지난 포스팅에서는 코딩을 하기 위한 준비를 했으니...
이제는 본격적으로 문법을 정리해볼 시간이겠네요(어으으윽)
제가 참고한 사이트는 바로 이곳입니다...!
https://www.w3schools.com/html/default.asp
HTML Tutorial
HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. This tutorial follows the latest HTML5 standard. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try
www.w3schools.com
우선 코드들을 잠깐 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Example Explained
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
- The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
DOCTYPE는 말 그대로 어떤 타입의 문서를 작성할 것인지를 알려주는 것인가보네요
<html></html>은 페이지 코드의 시작과 끝부분을 알려주는 것이고
<head></head>부분은 HTML페이지의 meta data(인코딩을 어떤 형식으로 할것인지...타이틀은 뭘로 할것인지...)를 저장하는 부분이 되는 것 같습니다.
<title></title>부분은 웹페이지의 제목을 뭘로 나타낼 것인지를 나타내는 거싱고
<body></body>부분은 본격적인 내용부분이 되겠네요..!
마지막으로 <h1>부분은 제목부분(큰 문자열 출력), <p>부분은 문단을 구분하는 것인 듯 합니다.
<h>부분은 <h1>~<h6>까지 정의되어 있으니 참고하면 될 것 같습니다.
위와같이 코딩을 하면 아래와 같이 웹사이트가 나오네요(오 신기신기)
다음으로는 링크와 이미지가 나오도록 코딩을 해보겠습니다.
여기서 a는 하이퍼링크를 정의하는 태그, heft는 링크가 가야할 URL을 구체화하는 속성을 가지고 있다고 하네요.
img는 HTML에서 이미지를 표시하기 위해 쓰이는 태그, src는 이미지가 표시되어야 할 경로를 구체화 한다고 하는데.. 정확하게 무슨 의미인지는 잘 모르겠네요. alt는 이미지가 나타나지 않았을 때 대신 나타나는 문자열을 의미하는 듯 합니다.
<a href="https://www.w3schools.com">This is a link</a> <!--링크-->
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> <!--이미지 표시-->
엥...? 링크는 잘 나오는데.. 이미지가?
네 맞습니다 이미지도 remote 웹에 업로드를 해야 표시를 할 수 있겠지요.
여기에서 이미지를 받아서 파일질라를 통해서 업로드를 하니
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img
Tryit Editor v3.6
HTML Images HTML images are defined with the img tag:
www.w3schools.com
잘 나오는군요...!
이번에는 문자에 색을 입히는 것과 title을 한번 만들어보겠습니다.
저는 다음 코드를 참고했습니다.
<p style="color:red;">This is a red paragraph.</p><!--이 문단 안에는 빨간 문자로 입력됩니다-->
<p title="I'm a tooltip">This is a paragraph.</p><!--웹페이지에서 문장에 커서를 대면 I'm a toolip이 나옵니다.-->
<p title='John "ShotGun" Nelson'><!--타이틀에 "가 들어간다면 '로 주석처리!-->
<p title="John 'ShotGun' Nelson"><!--그외에는 일반적으로 "로 주석처리를 합니다.-->
코드
<h3>빨간문자</h3>
<p style="color: red;">여기는 빨간문자열!</p>
<h3>문단에 제목넣기</h3>
<p title="아 배고파">나는 배부른 돼지보다 배고픈 소크라테스가 되겠다
</p>
<p title="아앗! '종강'이야!!">기말고사가 끝나면?</p>
<p title='이번에는 "큰따옴표를 인용"'>작은따옴표를 이용합니당</p>
이번에 제가 추가적으로 코딩을 해서 만든 최종작은 다음과 같습니다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>My First Heading</h1> <!--제목-->
<h2>점점더 </h2>
<h3>작아지는것은</h3>
<h4>기분탓인가?</h4>
<p>첫 번쨰 문단.</p>
<p>두 번쨰 문단</p>
<p>세 번째 문단</p>
<p>저는지금 한줄이에요오오오여기서<br>쪼개질까???</p>
<h3>HTML LINK</h3>
<a href="https://www.w3schools.com">This is link</a>
<h3>이미지파일 표시</h3>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<h3>빨간문자</h3>
<p style="color: red;">여기는 빨간문자열!</p>
<h3>문단에 제목넣기</h3>
<p title="아 배고파">나는 배부른 돼지보다 배고픈 소크라테스가 되겠다
</p>
<p title="아앗! '종강'이야!!">기말고사가 끝나면?</p>
<p title='이번에는 "큰따옴표를 인용"'>작은따옴표를 이용합니당</p>
</body><!--문단-->
</html>
결과화면
아직 갈길이 멀지만...다음 포스팅에 이어서 더 배워보도록 하겠습니다!
'웹서비스 구축' 카테고리의 다른 글
| CSS Advanced, CSS Responsive 정리 (0) | 2020.07.26 |
|---|---|
| HTML CSS 정리 (0) | 2020.07.24 |
| HTML Forms, Graphics, Media 정리 (0) | 2020.07.22 |
| html 기본문법2 (0) | 2020.07.20 |
| 웹서비스 구축을 위한 기본준비! (1) | 2020.07.20 |
