1. HTML 문서의 기본 구조





00. 태그(Tag)란?

HTML에서 사용하는 명령어를 '태그'라고 하며, '<'와 '>'기호로 둘러싸여 있습니다.

시작 태그와 종료 태그 한 쌍으로 사용하거나, ex) <tag> content </tag>

종료 태그를 사용하지 않고 단독으로 사용할 수도 있습니다. ex) <tag> content

또한, 태그는 중첩해서 사용이 가능합니다.



01. 기본 형식

<!DOCTYPE html>

<html>

<head>

<title> 웹 문서 제목 </title>

</head>


<body>

웹 문서 내용

</body>

</html>


 DOCTYPE 선언 : 모든 html 문서는 문서 유형(document type)의 선언으로 시작되어야 한다. 웹 페이지가 작성된 버전을 알려주며 반드시 <html>태그보다 앞서 선언해주어야 한다.

 <html>영역 : HTML 문서임을 나타내는 태그로, <html>로 시작해 </html>으로 끝나며, 그 사이에 <head>영역과 <body>영역이 있다.

 <head>영역 : 웹 문서의 제목, 키워드, 문자셋 등 웹 브라우저나 검색 엔진에 제공할 정보를 입력한다. 

④ <body>영역 : HTML 문서의 눈에 보이는 영역으로, 웹 문서의 실질적인 내용을 입력한다. 서술된 내용이 웹 브라우저 화면에 바로 나타난다.



02. HTML 문서 작성해보기

웹문서 작성을 위해선 HTML 에디터와 웹 브라우저가 필요한데, HTML 에디터란 문법을 잘 몰라도 쉽게 사용할 수 있도록 도와주는 저작 도구를 뜻합니다.

종류로는 Sublime Text3, EditPlus, AcroEdit, Brackets 등이 있고, 이외에도 여러 프로그램이 있으니 자신에게 맞는걸로 찾아 다운받습니다.


1) 에디터를 이용해 아래와 같이 작성합니다.

1
2
3
4
5
6
7
8
<html>
<head>
    <title>연습 문서</title>
</head>
<body>
첫 번째로 작성한 문서입니다.
</body>
</html>
cs

2) 파일을 다른 이름으로 저장하는데, 파일명 뒤에 반드시 '.html'이라는 확장자명을 붙입니다.


3) 저장한 파일을 웹 브라우저로 열어 작성한 내용과 비교해봅니다.

* <title>...</title>태그 : <head>영역 내에 사용하며, 제목 표시줄에 표시되는 내용을 변경할 수 있습니다.





'프로그래밍 > 웹표준' 카테고리의 다른 글

6. 목록을 만드는 태그 <ul>, <ol>, <dl>  (0) 2017.01.11
5. 문단 정렬 태그  (0) 2017.01.09
4. 제목을 나타내는 태그 <h1>~<h6>  (0) 2017.01.08
3. 시맨틱 요소와 시맨틱 웹  (0) 2017.01.07
2. <meta>태그  (0) 2017.01.04
더보기

댓글,

violet quartz