HTML 문서는 HTML로 내용의 역할과 관계를 적은 텍스트 파일이다. 확장자는 .html 또는 .htm이다. 서브라임 텍스트 같은 텍스트 에디터에서 쓰고 웹 브라우저에서 열어볼 수 있다.
첫 문서 만들기
아래 예제를 새 파일에 복사한다. 제목과 문단에 들어갈 말은 마음대로 바꿔도 좋다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>작은 소개</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>요즘은 이름 모를 나무가 궁금합니다.</p>
<a href="https://wiki.neworder.xyz/">새로운 질서 위키</a>
</body>
</html>- 텍스트 에디터에서 새 파일을 만들고 예제를 붙인다.
- UTF-8 인코딩으로 index.html이라는 이름을 붙여 저장한다. 파일명이
index.html.txt로 끝나지 않는지 확인한다. - 저장한 HTML 파일을 웹 브라우저 창으로 끌어놓거나 브라우저의 파일 열기로 연다.
- 에디터로 돌아와 문장 하나를 바꾸고 저장한다. 브라우저에서 새로 고침해 달라진 부분을 읽는다.
이 파일은 아직 자신의 컴퓨터에만 있다. 다른 사람에게 주소를 보내려면 네오시티 같은 웹 호스팅 서비스에 공개하는 단계를 거친다. (MDN, Basic HTML syntax)
어느 부분을 고칠까
<!doctype html>: 브라우저가 문서를 표준 모드로 읽도록 하는 선언이다.<html lang="ko">: 문서 전체를 감싸는 루트 요소이며, 이 예제의 주된 언어가 한국어임을 알린다.<head>: 문자 인코딩과 화면 크기 설정, 브라우저 탭의 제목처럼 문서에 관한 정보를 담는다.<body>: 방문자가 읽는 제목과 문단, 이미지와 하이퍼링크 같은 페이지 내용을 담는다. 화면에서 문서가 보이는 영역인 뷰포트와는 다른 개념이다.<h1>,<p>,<a>: 각각 제목, 문단, 하이퍼링크를 나타낸다. 같은 문장을 어디에 넣는지에 따라 역할도 달라진다.
이 구조를 다음 문서의 출발점으로 삼으면 HTML 보일러플레이트가 된다. 먼저 제목과 본문을 고치고, 필요한 부분을 조금씩 더하자.