cse103

HTML

Preface

Hyper-Text Mark-up Language, hyper-text를 표현하기 위한 언어로 mark-up형식을 띤다. Hyper-text란 쉽게 말해 WWW에서의 link를 말한다. 즉, 문서의 일부(단어나 문구 등)에 다른 문서가 연결되어 있어 해당 link를 통해 다른 문서를 불러낼 수 있는 문서, 또는 그 link자체를 말한다. HTML은 WWW의 contents를 표현하는 가장 기본적인 언어이며, HTTP(Hyper-Text Transfer Protocol)를 통해 전송된다. 한마디로, 홈페이지를 만들려면 HTML을 써야 한다.

Basic

HTML은 mark-up language이다. 즉, 문서의 내용에 뭔가 표시를 해둔다는 말인데, 여기서 표시란, 글꼴이라던가, 문단 모양 을 비롯한, 각종 부가 정보를 말한다. HTML에서 이러한 표시를 tag라 한다. Tag는 기본적으로 ‘<’,’>’로 둘러 싸여진 단어로 되어 있다.

다음은 거의 대부분의 HTML 페이지에 들어가는 기본적인 tag를 이용한 기본적인 페이지의 HTML코드이다.

cse103-lab10.html

<html>

<head>

</head>

<body>

HTML is really easy!

You can do it also!

</body>

</html>

처음엔 복잡해 보일지 모르지만, 차근 차근 뜯어 보자. 우선, <html></html> tag가 있는 것을 볼 수 있는데, 이것은 HTML문서의 처음과 끝을 표시하는 tag이다. HTML문서의 tag에는 <html></html>과 같이 쌍을 이루는 것이 있는데, 이들은 모두 <…></…>의 형식을 띠고 있다.

HTML문서는 크게 head와 body로 나뉜다. Head는 문서의 내용에 대한 부가 설명을 적고 있는 곳이고, body는 문서의 내용을 적어 놓은 부분이다. 이들 tag역시 쌍을 이루고 있다.

Head에 주로 나오는 내용은 title tag이다. 이것은 문서의 제목을 표현하며, web browser 창의 제목표시줄에 나타나는 web page의 제목이 바로 이 tag의 내용이다.

Body에 있는 내용은 기본적으로 text이다. 여기에 적은 내용이 바로 web browser를 통해 보이는 내용인데, 그냥 일반 text file에 적듯이 내용을 적으면 된다. 단, 주의해야 할 점이 있는데, 그것은 바로, 공백과 줄 바꾸기 이다.

HTML문서는 줄 바꾸기를 명시하지 않는 한, 줄 바꾸기를 하지 않는다. 위의 예의 경우 body내에 두 줄로 나눠 쓴 내용은 web browser를 통해 보면 한 줄로 나타나다. 이를 해결 하기 위해서는 줄을 바꾸고자 할 때, <br> tag를 써주는 것이다. <br> tag역시 </br>을 갖고 있지만, 한 줄만 띄울 경우는 <br>만 써줘도 된다.

HTML is really easy!<br>

You can do it also!<br>

This is CSE103 lab material.

다음은 공백에 관한 주의 점인데, HTML에서 한 칸 이상의 공백은 모두 한 칸의 공백으로 취급된다. 즉, 두 글자 사이를 멀리 띄우기 위해 그 사이에 아무리 많은 빈 칸을 넣어도 소용이 없다는 말이다. 이를 해결하기 위해 빈칸을 명시하기 위한 특별한 기호가 있는데 바로 ‘&nsbp;’ 이다.

HTML is really easy!<br>

You can do it also!<br>

<br>

   This is CSE103 lab material.

빈칸이나 줄 바꾸기를 쉽게 하기 위해서 <pre></pre> tag를 쓸 수 있는데, 이 tag사이에 오는 글자들은 text editor에서 편집한 그대로 빈칸과 줄 바꾸기가 적용되어 출력된다.

빈칸 외에 특별한 문자를 나타내는 기호로는 ‘&’를 나타내는 ‘&’ , ‘<’를 나타내는 ‘<’ , ‘>’를 나타내는 ‘>’ , ‘©’를 나타내는 ‘©’ 등이 있다. 이외에 ASCII code를 사용해 문자를 지정하려면 ‘&’ 과같이 ASCII code를 십진수로 써주면 됩니다.

HTML문서로 HTML의 소스를 보여주려고 할 경우, ‘<’, ‘>’등의 기호를 이용하여 열심히 적으면 될 텐데, 이것보다 손쉬운 방법으로 <xmp></xmp> tag를 이용하는 방법이 있다. <xmp></xmp> tag 사이에 오는 tag들은 모두 화면에 그대로 출력 된다.

& < > © & <br>

Tags, Tags, Tags…

‘열심히 ‘ ’를 사용하여 글자들을 화면 중앙에 갖다 놓았다. Browser의 창 크기를 조절했더니, 더 이상 예쁘게 보이지 않는다.’ 이러한 고민을 덜어 줄 만한 tag로 <center></center>가 있다. 이 tag로 둘러싸인 내용은 모두 browser의 중앙으로 정렬된다.

좀 더 다양한 문단정렬을 위해서는 <p></p> tag를 사용한다. 문단의 정렬 방식을 지정하기 위해서는 <p> tag의 align 속성(attribute)를 사용한다. 정렬 방식은 left, right, center가 있으며, center는 <center></center> tag와 동일한 역할을 한다. <center>와 <p> tag는 기본적으로 행을 바꿔준다.

<center>Welcome!</center>

<p align=right>This sentence is aligned to right</p>

글꼴을 바꿔보자. 가장 간단하게 글자의 크기를 바꿀 수 있는 tag로 <h></h> tag가 있다. 이것은 h뒤에 숫자를 붙여서 쓰는데, 주로 구조화된 문서를 쓸 때, 장과 절들을 나눌 때 사용되어, heading의 약자로 ‘h’를 사용한다. <h1></h1>과 같이 h뒤에 숫자(1~6)를 붙여서 사용하는데, 1이 가장 큰 글자(문서 구조상 가장 상위)이고 숫자가 커질수록 작아진다(문서구조상 하위).

문서의 구조와 관계없이 단순히 글꼴을 바꾸는 tag로 <font></font>가 있다. Font tag의 size (1~7;7이 가장 큰 글씨) 속성은 글꼴의 크기를 face는 글꼴의 종류를 color는 글꼴의 색을 나타낸다.

여기서 색깔을 표현하는 방법을 알아보자. 우선, 위의 예에서처럼 영어 단어를 사용하는 방법이 있다. red, blue, white, green, yellow와 같이 일반적으로 쓰이는 단어들을 사용할 수 있으며, 140개 단어 정도를 지원한다. 이 단어를 다 외울 필요가 없도록 도와줄 수 있는 방법이 바로 RGB를 이용한 색표기 방법이다. 컴퓨터 화면에서 표현되는 모든 색은 red, green, blue의 빛의 3원색의 조합으로 표시된다. 각각은 1byte로 나타내므로 총 256단계를 갖고 있다. RGB색의 조합은 #000000 의 형태로 표기된다. 여기서 뒤에 나오는 0자리 숫자가 바로 두 자씩 끊어서 각각 R, G, B의 밝기를 나타내며, 이들은 16진수이다. 예를 들어 #000000은 검은색, #FFFFFF는 흰색, #FF0000은 빨간색, #006400은 어두운 녹색을 나타낸다.

<font color=#777700>DARK YELLOW</font>

이렇게 16진수를 써서 색을 표현하면 다양한 색을 표현할 수 있지만, 대신 색에 대한 감각이 약간 필요하다.

그 밖에 글자들을 장식하는 tag로는 <i></i>, <b></b>, <u></u>가 있으며 각각, italic, bold, underlined를 나타낸다.

HTML 페이지 전체의 글자의 색을 지정하는 방법으로 <body> tag의 속성을 이용하는 방법이 있다.

Text속성은 일반 글자의 색을, link는 최근에 방문한 적이 없는 링크, vlink는 최근에 방문(visited)한 적이 있는 링크, alink는 마우스가 놓여있는(active) 링크의 색을 나타내며, bgcolor는 문서 전체의 배경 색을 지칭한다. 링크에 대해선 뒤에서 설명을 하도록 하겠다.

이제 글자를 장식하는 방법은 대부분 알았으니, 그림을 넣는 방법을 알아보자. 그림을 넣는데 사용하는 tag는 <img>이다. 이것은 </img>를 쓰지 않는다는 점에 유의하자. 이 tag의 src속성은 그림의 URL(경로)을 그리고, alt속성은 그림을 불러오지 못했거나, 그림 위에 마우스 커서가 있을 때 보여줄 설명을 나타낸다. width, height 속성은 각각 그림의 폭과 높이를 지정하며, border는 이미지의 테두리선의 두께(0은 테두리 없음)를 지정한다. 기본적으로 src속성 이외의 속성은 모두 생략할 수 있다. WWW에서 사용되는 이미지 파일 형식의 표준은 jpg와 gif이다.

그림을 page의 바탕에 깔고 싶을 경우 body의 background 속성을 사용한다.

<body background=‘back.gif’

WWW에서 파일의 경로는 상대 경로를 사용하거나, URL(Uniform Resource Locator)주소를 사용하여 나타낸다. http://www.postech.ac.kr/~endovert/b.gif 와 같은 형식을 띠며, http는 통신규약을 //는 host의 address를 /는 directory를 나타낼 때 사용된다.

그 밖에 유용한 tag로는 <hr>, <ol>, <ul> 등이 있으며 각각 가로 줄(horizontal rule), ordered list, unordered list를 나타낸다.

가로 줄의 속성으로는 가로 길이를 지정하는 width, 높이를 설정하는 size, 색깔을 지정하는 color가 있다. width의 경우 %를 사용하여 현재 browser 창의 폭에 대한 백분율로 길이를 나타낼 수도 있다.

<ul></ul>은 bullet(점)을 사용하여 항목들의 list를 만들어 주며, <ol></ol>는 숫자나 알파벳을 사용하여 list를 만들어 주며, 각 list에서 하나의 item은 <li> tag로 나타내진다. 각 item들은 줄이 바뀌므로 <br> tag는 필요없다.

<ul>

<li> 사과

<li> 배

<li> 귤

</ul>

<li> 사과

<li> 배

<li> 귤

</ol>

<ol>의 type속성은 번호를 표기하는 방법이다. 1은 아라비아숫자를 , ‘a’는 영문 알파벳 소문자, ‘A’는 영문 알파벳 대문자, ‘i’는 소문자 로마식 숫자 표기, ‘I’는 대문자 로마식 숫자표기를 나타낸다.

HTML페이지에서 주석을 다는 tag는  이다.

Hyper Link!

앞에서도 언급 했지만, web의 가장 강력한 무기는 hyper link이다. 이러한 hyper link를 형성시키는 tag는 anchor라 불리는 <a></a> tag이다.

<a> tag의 속성 중 가장 많이 사용하는 것은 href(hyper-text reference)이다. 이것은 <a></a>사이에 있는 글자나 그림이 클릭 되었을 때 href속성으로 지정된 URL의 문서를 불러오게 해준다.

<a href=‘http://www.postech.ac.kr’>POSTECH</a>

한 페이지 내에서 특정 부분을 가리키는데도 이 anchor tag가 사용된다. name 속성으로 위치를 지정하고, 그 부분으로 링크를 만들 때에는 URL에 #을 붙여 문서의 특정 위치를 표시한다.

a.html

<html>

…

…

</html>

b.html

<html>

…

…

</html>

Table

<table></table> tag는 표를 그려준다. 이것은 웹 페이지를 다단으로 만들고자 할 때 매우 유용하게 사용될 수 있다.

표를 그리기 위해 <table></table> tag의 안에 오는 tag들로는 <td></td>, <tr></tr>, <th></th>가 있다. 기본적으로 <tr></tr>은 표에 새로운 줄을 하나 더하는 것이고, <tr></tr>은 새로운 칸을 하나 만드는 것이다. 표에 들어가는 내용은 <td></td> tag의 사이에 들어가게 된다. 예를 보면서 익히는 것이 가장 이해하기 쉬울 것이다.

<html>

<head>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

위의 결과로 나온 table은 다음과 같다.

여기에 더해서 각 칸의 크기나 높이 배경색 등은 각 tag의 속성을 사용하여 지정한다. 다음은 각 속성들을 정리한 것이다.

<table>의 속성

align=left\|right\|center	표가 page에서 정렬될 위치
background=url	배경에 넣을 이미지의 URL
bgcolor=color	배경 색
bordercolor=color	테두리 색
bordercolordark=color	테두리의 그림자 색
bordercolorlight=color	테두리의 밝은 부분의 색
cols=n	표의 칸의 수
width=n	폭(browser의 window에 대한 %표기 가능)
height=n	높이(browser의 window에 대한 %표기 가능)
cellspacing=n	표내의 각 cell 사이의 간격
cellpadding=n	Cell의 테두리와 내용과의 간격

<tr>의 속성

align=left\|righ\|center	해당 행의 각 칸의 content가 정렬될 위치
bgcolor=color	배경 색
bordercolor=color	테두리 색
bordercolordark=color	테두리의 그림자 색
bordercolorlight=color	테두리의 밝은 부분의 색
height=n	그 행의 높이

<td>의 속성

align=center	해당 칸의 content가 정렬될 위치
background=url	배경에 넣을 이미지의 URL
bgcolor=color	배경 색
bordercolor=color	테두리 색
bordercolordark=color	테두리의 그림자 색
bordercolorlight=color	테두리의 밝은 부분의 색
Colspan=n	표에서 차지할 칸의 수(default=1)
rowspan=n	표에서 차지할 행의 수(default=2)
width=n	표에서 차지할 폭의 크기 (표의 폭에 대한 %로 표기 가능)

<th></th> tag는 기본적으로 <td></td> tag과 같지만, 표의 첫 행 이나, 첫 줄로 사용되는 header를 나타내는데 사용되며, <td>와 구별하기 위해 글꼴이 bold체가 되고, 내용이 center로 정렬된다.

Frame

Frame은 HTML page안에 복수의 다른 HTML페이지들을 포함 시킬 수 있도록 해준다. <frameset></frameset> tag는 <html></html> tag바로 밑에, 즉, <head>나 <body>의 바깥에 위치하고 현재의 frame의 몇 개의 frame으로 어느 방향으로 나눌 것인지를 결정한다(rows, cols속성).

<frame> tag는 <frameset></frameset> tag사이에 있으면서 각각의 frame들에 들어갈 html파일(URL)과 이름(name)을 지정한다. 여기서 지정된 이름은 anchor tag로 href를 지정할 때 target속성에 쓰인다.즉, 기본적으로 링크는 같은 frame에서 열리지만, 만일 다른 frame에 해당 link가 열리게 하고 싶을 경우 <a href=b.html target=bottom>과 같이 써주면, name이 bottom인 frame에 b.html 파일이 열리게 된다. Target에 지정할 수 있는 이름들 중 미리 정의된 것들이 있는데, _top은 현재 browser창 전체에, _blank는 새로운 창을 만들고 거기에, _parent는 현재 frame을 포함하고 있는 한 단계 상위 frame에 href로 link된 파일을 불러온다.

<noframe></noframe> tag는 frame을 지원하지 않는 browser에서 실행될 부분을 담고 있다.

<html>

<head>

<title> CSE103-Lab10 frame </title>

</head>

</frameset>

</frameset>

<body>Sorry! This page requires FRAME...</body>

</noframe>

</html>

Closing

끝으로 HTML은 현재 4.01버전까지 있으며, www.w3c.org에서 표준화한다. 여기서 다루지 못한 tag들은 w3c나 기타 web에서 검색하거나 browser의 소스보기 기능을 참조 바란다.

Preview: Using FORMs

CGI를 배우기 전에 약간 익혀두어야 할 것이 있다. 바로, <form></form> tag 이다. 이것은 사용자가 browser를 통해 정보를 입력할 수 있게 해주는 control들의 묶음 이다. 이 tag의 속성으로는 이름을 나타내는 name, Server에 메시지를 보내는 방식을 결정하는 method(post 또는 get), 그리고, server쪽에 실행할 cgi program이나 script의 URL을 나타내는 action이 있다.