html 문서 기본구조 웹사이트 만들기

by

본 내용은 html 문서 기본구조와 웹사이트를 만들기위한 기초내용으로 물론 기본문서를 다루고 있지만 나중에 CSS를 이용하고 레이아웃과 디자인하여 좀더 가독성이 높은 홈페이지를 만들수도 있습니다.

웹사이트를 만들기 위해서 다른 여러가지 언어들의 경우에는 에디터(Edit)라는 프로그램과 웹서버가 필요하지만 html의 경우에는 윈도우 메모장만 있다면 얼마든지 기본 문서를 만들수가 있답니다.

메모장 html 문서작성

먼저 윈도우 운영체제라면 메모장을 열고 아래와같이 간단한 소스태그를 입력해 보도록 합니다. 기초적인 html 기본구조로 되어 있지만 홈페이지를 만들기위한 필요한 소스코드를 대부분 삽입되었습니다.

html 메모장 문서 저장

메모장에 소스코드를 입력하였다면 ‘파일 > 다른 이름으로 저장(A)’ 을 선택합니다.

파일이름은 ‘index.html’ 인코딩(E)은 ‘UTF-8’ 를 선택하여 저장을 합니다.

보통 웹서버(호스팅)에 문서를 업로드하는 경우 인코딩을 UTF-8 로 저장하지 않는다면 한글이 깨지는 문제가 발생할수가 있습니다.

문서 열어보기

저장된 문서를 열어보게 되면은 HTML 목록, 메뉴, 기본구조 내용이 포함된것을 확인해 볼수가 있으며 링크된 1.html ~ 4.html 문서는 마찮가지로 메모장을 열어 내용을 작성하고 같은방식으로 저장을 해주시면 됩니다.

html 기본구조설명 

<!DOCTYPE HTML> <!------------ DOCTYPE 는 HTML 문서를 나타냅니다. ------------->
<HTML>   <!-------------- HTML 시작 태크 ---------------->
 <head>  <! -------------- HEAD 헤드태그는 meta, css 삽입가능 ------------->
  <TITLE> 홈페이지 제목 </TITLE>
  <meta charset="utf-8">  <!------------메타태그------------>
 </head>

 <body>  <!----------------- 본문 내용 작성 li 목차태그, h 태그등  ---------------->
  
 </body>
</HTML>
▤ 목차 목차 보이기

Leave a Comment