HTML 편집하기

__NOTOC__
<div style="width:100%;border:#99f 1px solid;margin:0 0 1%;background:#eef">
== 목차 ==
*[[#시작하기 전에|시작하기 전에]]
*[[#HTML 입문|HTML 입문]]
*기초
**[[HTML/헤더|헤더]]: 정보의 입력
**[[HTML/본문|본문]]: 본문의 입력
**[[HTML/하이퍼링크|하이퍼링크]]: 링크를 거는 방법
**[[HTML/목록|목록]]
**[[HTML/오브젝트|오브젝트]]: 동영상 등을 넣는 방법
**[[HTML/id와 class|id와 class]]: 요소에 이름을 붙이는 방법
**[[HTML/태그의 생략|태그의 생략]]: 태그를 생략하는 방법
*응용
**[[HTML/표|표]]: 표를 만드는 방법
**[[HTML/폼|폼]]: 웹페이지에서 정보를 송신하는 방법
**[[HTML/프레임|프레임]]: 복수의 페이지를 묶어서 표시시키는 방법
**[[HTML/스크립트|스크립트]]: 스크립트를 구성하는 방법 
**[[HTML/디자인|디자인]]: 색이나 크기를 지정하는 방법
*HTML과 같이 사용되는 기술
**[[CSS]]: 페이지의 디자인
**[[JavaScript]]: 페이지에 동적 효과를 주기
**[[CGI]]: 서버나 다른 컴퓨터와의 교환
*[[HTML/HTML5|HTML5]]: 차세대의 웹표준
*[[HTML/바깥고리|바깥고리]]: HTML 작성에 유익한 정보
</div>

== 시작하기 전에 ==
'''HTML'''('''HyperText Markup Language''', 하이퍼텍스트 마크업 랭귀지)는 [[w:웹 페이지|웹 페이지]]를 만들기 위한 [[w:마크업 언어|마크업 언어]]이다. 알지 못한다면 지금의 시점에서는 얼추 “홈페이지를 만들기 위한 작성법”이라고 생각해도 좋다. 

현재, 그 후계인 [[w:XHTML|XHTML]]나 [[w:XML|XML]]로의 이행이 시작되고 있으나, 대부분의 웹 페이지에서는 HTML로 쓰여져있으며, [[w:World Wide Web|WWW]]의 주역은 변함없이 HTML인 것이다. HTML은 직접 요소를 생각해서 쓰지 않아도 “HTML 편집기”나 “웹 제작 프로그램”이라고 불리는 소프트웨어를 사용하면, 워드프로세서처럼 페이지를 만들 수도 있다. 하지만, 그 경우에도 소프트웨어가 인간을 대신해서 자동적(기계적)으로 HTML을 출력하고 있는 것에 지나지 않는다. 

HTML는 '''태그'''라는 문자열이 쓰인 텍스트 파일이다. 따라서, 텍스트 문서를 쓸 수 있는 환경(예를 들면, 윈도우 메모장)이 있으면 만들 수 있다. 

한편, [[w:인터넷 익스플로러|인터넷 익스플로러]]나 [[w:모질라|모질라]], [[w:오페라 (웹 브라우저)|오페라]], [[w:사파리 (웹 브라우저)|사파리]] 등의 웹 브라우저에서 웹 페이지를 표시시키면, 다양한 색이나 볼드체 등의 많은 물리적 효과, 디자인이 있는 것을 알수 있다. 이들의 디자인은 어느 것이나 HTML의 요소를 웹 브라우저가 해석해서 렌터링해주는 효과다. 

유감스럽지만 예전에(지금도 그 영향이 꼬리를 물고 있지만)는 HTML의 해석이 하나로 정해져 있을 이유는 없었다. 웹 브라우저 메이커는 [[w:World Wide Web Consortium|W3C]]라는 단체가 만든 사용서를 제멋대로 해석한 끝에, 상대보다도 우위에 서기 위해서 사용법으로는 존재하지 않은 요소나 속성까지 상대에게 개발하거나 했다. 

그 때문에 웹 브라우저에 따라서 표시 효과가 바르거나, 게다가는 그 때문에 같은 내용인 것에도 관계없이, 특정 웹 브라우저용에 HTML를 용의해야만 하거나 했다. 

또, CSS는 유감스러운 것에 현재의 최신 브라우저도 그 모든 것을 지원하고 있을 이유는 없다. 
따라서, 웹 브라우저에 따라서 표시 효과가 다르다. 하나의 HTML에 대해서, 다른 웹 브라우저에서 어떻게 표시될지를 확인하거나, 경우에 따라서 특정 웹 브라우저에 대한 대책을 필요로 하거나 한다. 

오늘낙은 W3C의 사용서에 따르며, 게다가 CSS를 이용해서 문장과 디자인을 분리하는 것을 권하고 있다. 왜냐하면, 핸디캡을 가지는 것도 포함해서 모든 사용자에게 평등하게 정보를 제공할 수 있으며, 현재 존재하는 웹 브라우저가 진화한 후에도 이용 가능한 문장으로 하는 것이 가능하기 때문이다. 

== HTML 입문 ==
=== 요소와 태그 ===
이 페이지에서는 HTML의 최종판이 된, HTML4.01에 따라서 해설해가고 싶다.  

HTML는 요소마다 태그를 사용해서 그 문장구조를 나타내듯이 기술한다. 

요소는 기본적으로 '''시작 태그''', '''내용''', '''종료 태그'''의 세가지로 이루어져있다. 일부 요소에서는 종료 태그를 사용하지 않은 것도 있다. 시작 태그는 반드시 ''' <code>&lt;</code> '''로 시작되며, ''' <code>&gt;</code> '''로 끝난다. 또, 종료 태그는 반드시 ''' <code>&lt;/</code> '''로 시작되며, ''' <code>&gt;</code> '''로 끝난다. 시작 태그와 종료 태그를 아울러서, 태그라고 부른다. 또, 태그는 대문자 수문자를 의식하지 않는다. 다만, 전각과 반각은 구별되며, 반각으로 적지 않으면 태그가 작동되지 않는다. 또, 시작 태그에서 대문자를 사용하면 종료 태그에서도 대문자를 사용하는 것이 관례이다. 

아래에서는 단독인 예를 사용해서, 소개한다. 첫번째 행의 뜻은 후술하기에 지금은 “주문”이라고 생각해줬으면 좋겠다. 

'''예시'''
<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> 간단한 예 </title>
</head>
<body>

<p>이 문서는 매우 간단한 예시이다! </p>

</body>
</html>
</source>

'''표시예'''
<div style="border:#000 1px dashed;padding:1em">
<p>이 문서는 매우 간단한 예시이다! </p>
</div>

2번째 행인 <code>&lt;html&gt;</code>는 <code>&lt;</code>로 시작되며, <code>&gt;</code>로 끝나기에 “시작 태그”이다. 마지막 행의 <code>&lt;/html&gt;</code>는 <code>&lt;/</code>로 시작되며, <code>&gt;</code>로 끝나기에 “종료 태그”이다. <code>&lt;html&gt;</code>라는 시작 태그와 <code>&lt;/html&gt;</code>라는 종료 태그로 하나의 쌍을 이루고 있으며, 그 사이에 끼우는 것은 내용이라는 것이 된다. 이러한 이유로 아래에서는 '''HTML 요소'''로 불린다. 3번짜 행의 <code>&lt;head&gt;</code>와 5번째 행의 <code>&lt;/head&gt;</code>도 같은 관계이며, 아래 head 요소라고 불린다. 다른 태그에 관해서도 같다. 

HTML 문장을 매우 간단하고 게다가 중요한 점을 이 예는 나타내고 있다. 
* html 문장은 반드시 1개의 HTML 요소만을 가진다. 
* html 요소에서는 반드시 head요소와 body 요소(또는 [[HTML/프레임|프레임]])을 하나씩만 가진다. 
* head 요소 중에서는 반드시 1개의 title 요소만이 있다.

이 예문을 웹 브라우저에서 보면 다음과 같은 것을 알수 있다. 
* title 요소의 내용이 타이틀바 등에 표시되어있을 것이다. 
* body 요소 중의 문장이 표시될 것이다. 

===요소와 속성 ===
예를들면, “문자를 빨갛게 하는 요소”와 “문자를 푸르게 하는 요소”에 각각 다른 요소명을 붙인다고 하면, 녹색은? 핑크는? 연한 빨강은?이라는 느낌으로 요소의 종류가 단숨에 많아져버린다. 거기서 “문자의 디자인을 빠꾼다”라는 정리되지 않을까라는 것으로, 요소의 종류가 방대해지지 않듯이,  닮은 듯한 기능에 대해서는 같은 요소명을 대응하고 있다. 
그러면, “빨갛게 하다”“푸르게 하다”는 어떻게 지정하면 좋을까? 지정하기 위회서 '''속성'''을 주는 것으로 자세한 지정을 할 수 있게 되고 있다. 

속성은 시작 태그의 요소명과 <code>&gt;</code>의 사이에 다음과 같은 형태로 적는다. 
<pre>
<요소명 속성명="속성값">
</pre>
속성명은 속성의 종류를 주고, 속성값은 지정한 값을 준다. 
속성값에 반각의 영어숫자 등을 제외한 값을 줄 경우에는 따옴표 기호, 또는 큰 따옴표로 감싸는 요소가 있다. 
속성명은 대소문자를 묻지 않지만, 속성값은 대소문자를 구별하는 것이 있다. 
2개 이상의 속성을 줄 경우에는 띄어쓰기로 사이를 비워서 이어서 적는다. (아래의 예의 크고 파랗게 되어있는 케이스를 봐라)

아래에 예를 게재한다.

'''입력 예'''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
  <head>
    <title>속성의 간단한 예</title>
  </head>
  <body>

<div style="color: red;">이 문장은 빨갛다.</div>
<div>이 문장은 <span style="color: #ff8888;">연한 빨강</span>과 <span style="color: #ff8888;">연한 녹색</span></div>
<div style="color: blue;font-size: larger;">이 문장은 크고 파랗다.</div>

  </body>
</html>
</syntaxhighlight>
'''표시 예'''
<div style="border: black 1px dashed; padding: 1em;">
<div style="color: red;">이 문장은 빨갛다.</div>
<div>이 문장은 <span style="color: #ff8888;">연한 빨강</span>과 <span style="color: #ff8888;">연한 녹색</span></div>
<div style="color: blue;font-size: larger;">이 문장은 크고 파랗다.</div>
</div>
[[Category:HTML]] [[Category:마크업 언어]]