HTML - 기본 구조의 HTML 문서 만들기




    가장 기본적인 구조의 HTML 문서를 만들어 보겠습니다.


    이전글 :


    HTML이란? - http://server-talk.tistory.com/1





     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> 태그사이에 실제 브라우저에 표시될 내용을 입력합니다.

    Posted by Server-talk 서버이야기