기본 구조의 HTML 문서 만들기
에디트플러스를 이용해 가장 기본적인 구조의 HTML 문서를 만들어 보겠습니다.
HTML 문서 만들기
<!doctype html> <html> </html>
첫 번째 줄에 <!doctype html>이라고 입력후 중간에 빈 줄을 두고 웹 문서의 시작과 끝을 나타내는 <html> 태그와 </html> 태그를 입력합니다.
* <doctype html>은 이문서는 HTML5로 작성하는 문서라는 뜻입니다.
<!doctype html> <html> <head> </head> <body> </body> </html>
<html> 태그 안에 들여쓰기 한다음에 <head>태그 <body> 태그를 입력합니다.
* 모든 html 문서는 head 부분과 body 부분으로 나뉩니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>First create html document</title> </head> <body> </body> </html>
<head>태그 안에 위 코드와 같이 입력합니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>First create html document</title> </head> <body> <img src="/img/html.png"> <p>what is html</p> </body> </html>
<body> 태그 아래 들여쓰기를 합니다.
<img> 태그는 이미지를 표시하기 위한 태그이고 <p> 태그는 화면에 문단을 표시하기 위한 것입니다.
지금 입력한 'html.png'라는 이미지와 'what is html'라는 글자를 표시하는 것입니다.
화면 출력
지금까지 입력한 소스코드의 출력물 입니다.
title부분 'First create html document' 이미지, 이미지에 대한 글자가 모두 잘 표시되는것을 확인할 수 있습니다
HTML 문서의 기본구조
웹 문서는 아무리 길더라도 다음과 같은 기본 구조로 이루어져 있있으며 <head> ~ </head> 부분과 <body> ~ </body> 부분에 대부분의 소스가 표시됩니다.
HTML 문서와 DOCTYPE
웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 '문서 유형(document type)'을 지정하고 <!doctype> 태그입니다. 문서 유형은 웹 브라우저에서 이제 부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라고 알려주는 것입니다.
시작은 <html> 태그
문서 유형은 선언한 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다.
<!doctype html> <html lang="ko"> ...... </html>
<html> 태그에서는 lang이라는 속성을 사용하여 문서에서 사용할 언어를 지정할 수 있습니다. 예로 한국어라면 korea의 약자인 ko를 사용하시면 됩니다.
<head> 브라우저에게 정보를 주는 태그
웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다.
<title> 태그 - 문서제목
title태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고, 해당 페이지를 방문하는 방무자나 검색엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내요을 추측 할수 있습니다.
<meta> 태그 - 문자 인코딩 및 문서 키워드, 요약정보
<head> 태그 안에서 <meta> 태그는 여러 용도로 사용됩니다 그중에서 가장 중요한 것은 문자 인코딩을 지정하는 것입니다.
<body> 태그 - 문서의 몸통
문서 유형을 정의하고 문서 정보까지 입력하였다면 <body> 태그와 </body> 태그사이에 실제 브라우저에 표시될 내용을 입력합니다.
'웹언어 > HTML' 카테고리의 다른 글
| HTML - <div>, <span> 태그 (0) | 2017.03.05 |
|---|---|
| HTML - <br>태그, <p>태그 (0) | 2017.03.05 |
| HTML - 목록을 만드는 태그 (0) | 2017.03.05 |
| HTML - 문법과 주의사항 (0) | 2017.03.05 |
| HTML이란? (0) | 2016.12.28 |
