HTML (Hypertext Markup Language) Yang-Sae Moon Department of Computer Science Kangwon National University, Korea
웹 페이지 제작 단계 및 환경 주제와 내용선정 디자인 웹 페이지 구조 저작권 확인 웹 페이지 등록 웹 페이지 홍보 Hypertext Markup Language 주제와 내용선정 어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정 디자인 로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성 웹 페이지 구조 웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을 종이에 그려본다. 저작권 확인 자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의 웹 페이지 등록 인터넷 서비스 제공업체인 ISP의 웹 서버에 등록 웹 페이지 홍보 검색엔진에 등록하여 모든 사용자에게 홍보
웹 페이지 제작 시 고려사항 웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…) Hypertext Markup Language 웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…) 웹 페이지의 제목을 의미 있게 붙인다. 혼동을 일으키기 쉬운 링크를 만들지 않는다. 방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성한다. 좌우/상하로 길게 스크롤되는 문서를 만들지 않는다. 각 페이지마다 이전/상위 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 한다. 사이트내의 링크는 상대 경로를 사용한다(Portable) 지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않는다 특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아니다. 웹사이트의 내용이 계속 업데이트(update) 되어야 한다.
HTML 개요 (1/2) Hypertext Markup Language 정의 WWW 상의 문서를 기술하기 위한 언어로서, 플랫폼에 관계없이 사용 가능한 Hypertext 문서를 만들 수 있는 Markup 언어이다. Markup 언어 일반 텍스트 문서에 “<”와 “>”로 둘러 쌓인 약속된 Tag를 붙임으로써, Tag에 내포된 기능을 Web Brower가 인식하여 실행할 수 있도록 지시(markup)해 주는 기능을 하는 언어
HTML 개요 (2/2) 장점 단점 Web 상에서 손쉽게 Hypertext 및 Hypermedia 기능을 갖는 문서를 만든다. Hypertext Markup Language 장점 Web 상에서 손쉽게 Hypertext 및 Hypermedia 기능을 갖는 문서를 만든다. Web 상에서 문서를 쉽고 빠르게 다운로드 받는다. 이식성(Portability)이 높으며 사용이 편리하다. 단점 고정된 Tag만을 제공하여 사용자가 새로운 Tag를 정의할 수 없다. 문서 자체가 구조화되어 있지 않아(semi-structured), 효과적인 검색, 재사용, 검증이 어렵다.
HTML 구성요소 (1/4) 텍스트(Text) HTML document HTML 문서에 포함된 텍스트는 웹 문서의 본문에 해당 Hypertext Markup Language HTML document 텍스트(Text) 태그(Tag) 스크립트(Script) 텍스트(Text) HTML 문서에 포함된 텍스트는 웹 문서의 본문에 해당 사용자가 웹 문서를 읽을 때, 화면에 나타나는 텍스트 자체를 의미
HTML 구성요소 (2/4) 태그(Tag) “<”과 “>”로 둘러 쌓은 문서의 중간 중간에 붙여주는 일종의 꼬리표 Hypertext Markup Language 태그(Tag) “<”과 “>”로 둘러 쌓은 문서의 중간 중간에 붙여주는 일종의 꼬리표 태그의 형식 <tag>문서의 문자열(텍스트)… </tag> <tag>를 시작 태그, </tag>를 종료 태그라 한다. 시작 태그에 의해 지정된 기능이 부여되고, 그 기능은 종료 태그를 만나면 끝난다. 태그의 속성(attribute) 태그는 속성을 가질 수 있다. 속성은 지정된 태그에 대하여 보다 자세한 환경과 정보를 규정한다. (예: color, size) 태그의 종류: 복합/단독 태그 복합 태그: <title>…</title>, <p>…</p>, <body>…</body> 단독 태크: <br>, <hr>
HTML 구성요소 (3/4) 태그(Tag) (계속) 태그의 종류: 속성의 유무 태그의 특성 Hypertext Markup Language 태그(Tag) (계속) 태그의 종류: 속성의 유무 속성이 꼭 필요한 태그: <a href="...">...</a>, <img src="..."> 속성이 옵션인 태그: <hr noshade> 속성이 없는 태그: <em>...</em> 태그의 특성 대소문자의 구별이 없다. 복합 태크는 엇갈려서 사용할 수 없다. (wrong: <big><blink>잘못된 예제</big></blink> 포함할 수 없는 태그를 포함시킬 수 없다. (wrong: <h1><h2>잘못된 예제</h2></h1>
HTML 구성요소 (4/4) 스크립트(Script) Client Side Script Server Side Script Hypertext Markup Language 스크립트(Script) Client Side Script 웹 클라이언트(브라우저)에서 수행(execute)되는 간단한 명령어 집합 일반 프로그래밍 언어에 비해 간단하고, 컴파일(compile)이 아닌 해석(interpret) 방식에 의해 수행됨 예: JavaScript, VBScript Server Side Script 웹 클라이언트에서 요청한 내용을 처리하기 위해 웹 서버에서 수행되는 프로그램 예: ASP, PHP, JSP
HTML 문서의 기본 구성 및 특성 HTML 문서의 구조 HTML 문서의 특성 Hypertext Markup Language HTML 문서의 구조 HTML 문서의 머리말: 보통 문서에 대한 제목과 전반적인 정보를 담는 영역 HTML 문서의 본문: 대부분의 HTML 문서의 내용이 바로 이 영역에 해당 HTML 문서의 특성 공백(space) 문자가 연속된 경우에는 한 글자의 공백 문자로만 인식 엔터(enter)나 탭(tab)도 하나의 공백 문자로 인식 <html> <head> 머리말 (제목) --> ① HTML 문서의 머리말 부분 </head> <body> 웹 페이지의 본문 --> ② HTML 문서의 본문 부분 </body> </html>
HTML 태그 - <HTML>, <HEAD>, <TITLE> Hypertext Markup Language <HTML>…</HTML> HTML 문서임을 의미하며, 모든 HTML 문서는 <HTML>로 시작하여 </HTML>로 끝난다. <HEAD>…</HEAD> HTML 문서의 머리말(header) 영역을 나타낸다. <TITLE>…</TITLE> HTML 문서의 제목을 브라우저의 타이틀 바에 표시한다. <HTML> 태크는 생략됨
HTML 태그 - <BODY> <BODY>…</BODY> Hypertext Markup Language <BODY>…</BODY> HTML 문서의 Main이 되는 본문 영역 (문서의 실제 내용 부분) 속성: background, bgcolor, text, link, vlink, alink
HTML 태그 - <!–- comment --> Hypertext Markup Language <!-- … --> 주석(comment)에 해당하며, 여러 줄에 걸쳐 사용할 수는 없다(C와 다름에 유의).
HTML 태그 - <BASE> <BASE HREF = “…”> Hypertext Markup Language <BASE HREF = “…”> HTML 문서에서 참조하는 URL의 상대 경로를 지정한다. <BASE HREF = “http://cs.kangwon.ac.kr/~ysmoon/”>라 지정되어 있으면, <A HREF = “web_prog/web_prog.html”>…</A>은 <A HREF = “http://cs.kangwon.ac.kr/~ysmoon/web_prog/web_prog.html”>…</A>와 동일하다.
HTML 태그 - <P>, <BR> (1/2) Hypertext Markup Language <P> Paragraph의 약어로서, 단락을 구분(줄 바꿈과 동시에 한 줄을 띄는 역할)을 수행한다. 단독 태크로도 사용된다. 속성: ALIGN = LEFT | RIGHT | CENTER <BR> BReak의 약어로서, 문장에서 줄 바꾸기 기능을 한다. 단독 태크로 사용된다. 속성: CLEAR = CLEAR | LEFT | RIGHT | ALL
HTML 태그 - <P>, <BR> (2/2) Hypertext Markup Language
HTML 태그 - <PRE> Hypertext Markup Language <PRE>…</PRE> Preformatted text의 약어로서, 입력된 내용을 그대로 브라우저 화면에 출력한다.
HTML 태그 - <HR> <HR> Hypertext Markup Language <HR> Horizontal Ruler의 약어로서, 웹 페이지 안에 선/경계선을 그리는데 사용된다. 속성: size, width, align, noshade
HTML 태그 - <CENTER>, <NOBR> Hypertext Markup Language <CENTER>…</CENTER> <CENTER>와 </CENTER> 사이에 포함된 모든 내용을 브라우저 화면의 중앙으로 정렬 <NOBR>…</NOBR> NO line BReak의 약어로서, 웹 브라우저에 의해 임으로 줄 바꿈이 일어나지 않도록 한다. (일반적으로 브라우저 화면 크기를 조절하면 문장의 줄 바꿈이 일어난다.)
HTML 태그 - <BLOCKQUOTE> Hypertext Markup Language <BLOCKQUOTE>…</BLOCKQUOTE> blockquote.html 웹 페이지에서 “인용 단락”을 표시할 때 사용한다. 인용된 내용을 좌우에 적당한 여백을 주어 구분하여 보여준다.
HTML 태그 - <Hn> <Hn>…</Hn> hn.html Hypertext Markup Language <Hn>…</Hn> hn.html 웹 페이지에서 (주로 제목이나 머리글의) 글자 크기를 지정하기 위해 사용한다. 상대적 크기이며, <Hn>에서 n은 1(큰 글자) ~ 6(작은 글자)의 숫자를 사용한다. <Hn>은 줄 바꿈(line break) 기능을 포함한다.
HTML 태그 - <BASEFONT> Hypertext Markup Language <BASEFONT SIZE=n> basefont.html 기본 폰트 크기(default = 3)를 지정한다. n은 1~7의 숫자로 지정하며, 값이 클 수록 글자 크기가 커진다.
HTML 태그 - <FONT> <FONT>…</FONT> font.html Hypertext Markup Language <FONT>…</FONT> font.html 웹 페이지에서 글자의 크기(size), 색상(color), 글꼴(face)을 지정한다. 속성: size, color, face
HTML 태그 - <I>, <B>, <U>, … (1/2) Hypertext Markup Language <I>…</I> : 글자를 이탤릭(italic)체로 지정한다. <B>…</B> : 글자를 볼드(bold)체로 지정한다. <U>…</U> : 글자를 밑줄(underline)체로 지정한다. <TT>…</TT> : 글자를 타자(teletype)체로 지정한다. <BLINK>…</BLINK> : 글자를 깜박거리도록 지정한다. <SUP>…</SUP> : 글자를 위첨자(Superscript)로 지정한다. <SUB>…</SUB> : 글자를 아래첨자(Subscript)로 지정한다. <S>…</S> : 글자를 삭제된 문자(strike through)로 지정한다.
HTML 태그 - <I>, <B>, <U>, … (2/2) Hypertext Markup Language
HTML 태그 – 리스트 태그 (1/5) 리스트 태그:문서를 서술식이 아닌 개조식으로 표현 list.html Hypertext Markup Language 리스트 태그:문서를 서술식이 아닌 개조식으로 표현 list.html Bullet List Numbered List Definition List 축구는 11명이 둥근 공을 가지고 사각형의 큰 경기장에서 경기한다. 야구는 9명이 배트, 글러브, 작은 공을 가지고 다이아몬드 형의 경기장에서 경기한다. 탁구는 2명 혹은 4명이 라켓과 매우 작고 가벼운 공을 가지고 테이블 위에서 경기한다. 축구는 11명이 둥근 공을 가지고 사각형의 큰 경기장에서 경기한다. 야구는 9명이 배트, 글러브, 작은 공을 가지고 다이아몬드 형의 경기장에서 경기한다. 탁구는 2명 혹은 4명이 라켓과 매우 작고 가벼운 공을 가지고 테이블 위에서 경기한다. 축구 11명이 둥근 공을 가지고 사각형의 큰 경기장에서 경기한다. 야구 9명이 배트, 글러브, 작은 공을 가지고 다이아몬드 형의 경기장에서 경기한다. 탁구 2명 혹은 4명이 라켓과 매우 작고 가벼운 공을 가지고 테이블 위에서 경기한다.
HTML 태그 – 리스트 태그 (2/5) <UL>…</UL> <OL>…</OL> Hypertext Markup Language <UL>…</UL> Unordered List의 약어로서, Bullet List를 지정한다. Bullet List 내부에 다시 Bullet List를 중첩하여 표현할 수 있다. 속성: type = circle | square | disk (circle =, square = , disk = ) <OL>…</OL> Ordered List의 약어로서, 목록 앞에 순서(일반적으로 숫자)가 표시된다. 속성: type = A | a | I | i | 1, start = n <LI>…</LI> Unordered/Ordered List 내부에서 각 아이템을 명시한다. 속성: type = circle | square | disk (circle =, square = , disk = ) UL에서 type = A | a | I | i | 1 OL에서 value = n OL에서 시작 번호를 지정
HTML 태그 – 리스트 태그 (3/5) Hypertext Markup Language
HTML 태그 – 리스트 태그 (4/5) Definition List Hypertext Markup Language Definition List <DL>…</DL> : 용어 정의를 위한 리스트를 만든다. (<UL>, <OL>에 해당) <DT>…</DT> : 리스트의 항목(term)으로 지정한다. (“정의” 부분에 해당) <DD>..</DD> : 항목에 대한 설명(description)을 포함한다,
HTML 태그 – 리스트 태그 (5/5) Hypertext Markup Language Menu List (<MENU>…</MENU>) “메뉴”와 같이 길이가 짧은 순서 없는 목록을 만들 때 사용한다. Directory List (<DIR>…</DIR>) 파일 이름과 같이 길이가 짧은 목록을 나타낼 때 사용한다(글자 수가 24자 이내로 제한).
색깔(Color) 지정 방법 색깔 이름을 사용하는 방법 (“red”, “black”, “gray”, …) Hypertext Markup Language 색깔 이름을 사용하는 방법 (“red”, “black”, “gray”, …) 컬러 코드를 사용하는 방법 (#FFFFFF, #080808 RRGGBB in hexa code) Color Chart Color Code 변환
이미지(image) 삽입 방법 (1/2) Hypertext Markup Language 태그: <IMG SRC = “image file path”> img.html 속성: src, align, width, height, hspace, vspace, border
이미지(image) 삽입 방법 (2/2) Hypertext Markup Language
Hypertext Links (1/2) Hypertext Link의 활용 link.html Hypertext Markup Language Hypertext Link의 활용 link.html 다른 웹 페이지로 이동시키거나, 현 웹 페이지의 다른 위치로 이동시킨다. 파일을 다운로드 받을 수 있게 하거나, 이미지 파일을 보여준다. E-mail을 보낼 수 있게 하거나, FTP 서버로 접속이 가능하게 한다. Hypertext Link를 위한 태그 타 문서 연결: <A HREF = “연결하고자 하는 다른 문서의 URL”> … </A> 문서 내 연결 <A HREF = “#defined_label”> … </A> …… …… <A NAME = “defined_label”> … </A>
Hypertext Links (2/2) Hypertext Markup Language
테이블(Table) (1/3) <TABLE>…</TABLE> Hypertext Markup Language <TABLE>…</TABLE> 테이블의 시작과 끝을 나타내는 태그이다. 속성: border, width, height, cellspacing, cellpadding, cgcolor <CAPTION>…</CAPTION> 테이블 제목(caption)을 나타낸다. 속성: align = top | bottom <TR>…</TR> Table Row의 약어로서, 테이블의 새로운 행(row)이 시작한다. 속성: align = left | right | center, valign = top | bottom | middle <TD>…</TD> 테이블에서 각 셀(cell)을 정의하는 태그이다. 속성: align, valign, colspan, rowspan, nowrap, width, bgcolor, width, height
테이블(Table) (2/3) <TH>…</TH> Hypertext Markup Language <TH>…</TH> Table Heading을 의미하며, 테이블의 맨 윗 행(헤더, header)를 나타낸다. <TR>과 쓰임이 유사하나, 글자체가 Bold체로 중앙 정렬되는 특성을 가진다. <CAPTION> [표 1] 강원대학교 컴퓨터과학과 성적 분포 <TABLE> <TH> <TR> <TD>
테이블(Table) (3/3) Hypertext Markup Language
프레임(Frame) (1/3) Hypertext Markup Language 브라우저의 윈도우를 여러 작은 윈도우로 나누어 각각에 다른 웹 페이지를 보여주는 기능을 수행한다.
프레임(Frame) (2/3) 프레임 문서의 구조 <FRAMESET>…</FRAMESET> Hypertext Markup Language 프레임 문서의 구조 일반 웹 페이지 구조 <html> <head><title>...</title></head> <body> ... 웹 페이지 본문 ... </body> </html> 프레임 문서 구조 <html> <head><title>...</title></head> <frameset> ... 프레임 선언 ... </frameset> </html> <FRAMESET>…</FRAMESET> 화면을 프레임으로 분할하며, <BODY> 태그 대신 사용한다. 속성: ROWS, COLS (예: ROWS = “50%,50%”, COLS = “*, *, 2*”) <FRAME>…</FRAME> 각각의 프레임에 들어갈 정보를 정의한다. (Browsing할 웹 페이지를 지정한다.) SRC = “URL”, NAME, MARGINWIDTH, SCROLLING, NORESIZE
프레임(Frame) (3/3) Hypertext Markup Language
사운드(오디오) 이용 Hypertext Markup Language 사운드 파일 다운로드 하기 sound.html <A HREF = “music/sound01.mid”>sound01.mid(20kb)</A> 음악 들려주기 <EMBED SRC = “music/sound01.mid” autostart=true loop=2>
동영상(비디오) 이용 Hypertext Markup Language 동영상 파일 다운로드 하기 <A HREF = “movie/video02.avi”>video02.avi(12mb)</A> 동영상 실행(play)하기 <EMBED SRC = “movie/video02.avi” autostart=true>
Please do it yourself. 웹 페이지 등록 및 게시판 연결 웹 페이지 등록 게시판 연결 Hypertext Markup Language 웹 페이지 등록 Private한 웹 서버나 Naver 등에서 무료 웹 서버 계정을 활용한다. 웹 서핑 등을 통하여 자신에게 적합한 웹 서버 계정을 구축한다. 게시판 연결 웹 서버에서 제공하는 무료 게시판을 링크하여 활용한다. 게시판 소스(CGI 등)를 다운로드하여 Private 웹 서버에 설치하고 링크한다. (게시판을 직접 프로그래밍하는 것도 한 방편…) Please do it yourself.
HW #2 Hypertext Markup Language