웹프로그래밍 (Web Programming) HTML (Hypertext …ysmoon/courses/2006_1/wp/05.pdfHTML...

1

20062006년년 봄학기봄학기

문양세문양세

강원대학교강원대학교 컴퓨터과학과컴퓨터과학과

웹웹 프로그래밍프로그래밍 (Web Programming)(Web Programming)

HTML (Hypertext Markup Language)HTML (Hypertext Markup Language)

Page 2Web Programmingby Yang-Sae Moon

웹웹 페이지페이지 제작제작 단계단계 및및 환경환경Hypertext Markup Language

주제와 내용선정주제와 내용선정

디자인디자인

웹 페이지 구조웹 페이지 구조

저작권 확인저작권 확인

웹 페이지 등록웹 페이지 등록

웹 페이지 홍보웹 페이지 홍보

어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정

로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성

웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을종이에 그려본다.

웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을종이에 그려본다.

자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의

인터넷 서비스 제공업체인 ISP의 웹 서버에 등록인터넷 서비스 제공업체인 ISP의 웹 서버에 등록

검색엔진에 등록하여 모든 사용자에게 홍보검색엔진에 등록하여 모든 사용자에게 홍보

2


웹웹 페이지페이지 제작제작 시시 고려사항고려사항

웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…)

웹 페이지의 제목을 의미 있게 붙인다.

혼동을 일으키기 쉬운 링크를 만들지 않는다.

방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성한다.

좌우/상하로 길게 스크롤되는 문서를 만들지 않는다.

각 페이지마다 이전/상위 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 한다.

사이트내의 링크는 상대 경로를 사용한다(Portable)

지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않는다

특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아니다.

웹사이트의 내용이 계속 업데이트(update) 되어야 한다.

Hypertext Markup Language


정의WWW 상의 문서를 기술하기 위한 언어로서, 플랫폼에 관계없이 사용 가능한 Hypertext 문서를 만들 수 있는 Markup 언어이다.

Markup 언어일반 텍스트 문서에 “<”와 “>”로 둘러 쌓인 약속된 Tag를 붙임으로써, Tag에 내포된 기능을

Web Brower가 인식하여 실행할 수 있도록 지시(markup)해 주는 기능을 하는 언어

장점

• Web 상에서 손쉽게 Hypertext 및 Hypermedia 기능을 갖는 문서를 만든다.

• Web 상에서 문서를 쉽고 빠르게 다운로드 받는다.

• 이식성(Portability)이 높으며 사용이 편리하다.

단점

• 고정된 Tag만을 제공하여 사용자가 새로운 Tag를 정의할 수 없다.

• 문서 자체가 구조화되어 있지 않아(semi-structured), 효과적인 검색, 재사용, 검증이 어

렵다.

HTML HTML 개요개요Hypertext Markup Language

3


텍스트(Text)

• HTML 문서에 포함된 텍스트는 웹 문서의 본문에 해당

• 사용자가 웹 문서를 읽을 때, 화면에 나타나는 텍스트 자체를 의미

태그(Tag)

• “<”과 “>” 기호로 둘러 쌓은 문서의 중간 중간에 붙여주는 일종의 꼬리표

• 태그의 형식 <tag>문서의 문자열(텍스트)… </tag>

− <tag>를 시작 태그, </tag>를 종료 태그라 한다.

− 시작 태그에 의해 지정된 기능이 부여되고, 그 기능은 종료 태그를 만나면 끝난다.

HTML HTML 구성요소구성요소 (1/3)(1/3)Hypertext Markup Language

HTMLdocument 텍스트(Text)

태그(Tag) 스크립트(Script)


태그(Tag) (계속)

• 태그의 속성(attribute)

− 태그는 속성을 가질 수 있다.

− 속성은 지정된 태그에 대하여 보다 자세한 환경과 정보를 규정한다. (예: color, size)

• 태그의 종류: 복합/단독 태그

− 복합 태그: <title>…</title>, …, <body>…</body>

− 단독 태크: , <hr>

• 태그의 종류: 속성의 유무

− 속성이 꼭 필요한 태그: <a href="...">...</a>, <img src="...">

− 속성이 옵션인 태그: <hr noshade>

− 속성이 없는 태그: ...

• 태그의 특성

− 대소문자의 구별이 없다.

− 복합 태크는 엇갈려서 사용할 수 없다. (wrong: <big><blink>잘못된 예제</big></blink>

− 포함할 수 없는 태그를 포함시킬 수 없다. (wrong: <h1><h2>잘못된 예제</h2></h1>

4


스크립트(Script)

• Client Side Script

- 웹 클라이언트(브라우저)에서 수행(execute)되는 간단한 명령어 집합

- 일반 프로그래밍 언어에 비해 간단하고, Compile이 아닌 Interpret 방식에 의해 수행됨

- 예: JavaScript, VBScript

• Server Side Script

− 웹 클라이언트에서 요청한 내용을 처리하기 위해 웹 서버에서 수행되는 프로그램

− 예: ASP, PHP, JSP



HTML 문서의 구조

• HTML 문서의 머리말: 보통 문서에 대한 제목과 전반적인 정보를 담는 영역

• HTML 문서의 본문: 대부분의 HTML 문서의 내용이 바로 이 영역에 해당

HTML 문서의 특성

• 공백(space) 문자가 연속된 경우에는 한 글자의 공백 문자로만 인식

• 엔터(enter)나 탭(tab)도 하나의 공백 문자로 인식

HTML HTML 문서의문서의 기본기본 구성구성 및및 특성특성Hypertext Markup Language

<html> <head>

머리말 (제목) --> ① HTML 문서의 머리말 부분</head><body>

웹 페이지의 본문 --> ② HTML 문서의 본문 부분</body>

</html>

5


<HTML>…</HTML>HTML 문서임을 의미하며, 모든 HTML 문서는 <HTML>로 시작하여 </HTML>로 끝난다.

<HEAD>…</HEAD>HTML 문서의 머리말(header) 영역을 나타낸다.

<TITLE>…</TITLE>HTML 문서의 제목을 브라우저의 타이틀 바에 표시한다.

HTML HTML 태그태그 -- <HTML>, <HEAD>, <TITLE><HTML>, <HEAD>, <TITLE>Hypertext Markup Language

<HTML> 태크는 생략됨


<BODY>…</BODY>

• HTML 문서의 Main이 되는 본문 영역 (문서의 실제 내용 부분)

• 속성: background, bgcolor, text, link, vlink, alink

HTML HTML 태그태그 -- <BODY><BODY>Hypertext Markup Language

6


주석(comment)에 해당하며, 여러 줄에 걸쳐 사용할 수는 없다(C와 다름에 유의).

HTML HTML 태그태그 -- <!<!––-- comment comment ---->>Hypertext Markup Language


<BASE HREF = “…”>

• HTML 문서에서 참조하는 URL의 상대 경로를 지정한다.

- <BASE HREF = “http://cs1.kangwon.ac.kr/~ysmoon/”>라 지정되어 있으면,

- <A HREF = “web_prog/web_prog.html”>…</A>은

- <A HREF = “http://cs1.kangwon.ac.kr/~ysmoon/web_prog/web_prog.html”>…</A>와 동일하다.

HTML HTML 태그태그 -- <BASE><BASE>Hypertext Markup Language

7




• Paragraph의 약어로서, 단락을 구분(줄 바꿈과 동시에 한 줄을 띄는 역할)을 수행한다.

• 단독 태크로 사용된다.

• 속성: ALIGN = LEFT | RIGHT | CENTER

 

• BReak의 약어로서, 문장에서 줄 바꾸기 기능을 한다.

• 단독 태크로 사용된다.

• 속성: CLEAR = CLEAR | LEFT | RIGHT | ALL

HTML HTML 태그태그 -- , (1/2), (1/2)Hypertext Markup Language


HTML HTML 태그태그 -- , (2/2), (2/2)Hypertext Markup Language

8


<PRE>…</PRE>Preformatted text의 약어로서, 입력된 내용을 그대로 브라우저 화면에 출력한다.

HTML HTML 태그태그 -- <PRE><PRE>Hypertext Markup Language


<HR>

• Horizontal Ruler의 약어로서, 웹 페이지 안에 선/경계선을 그리는데 사용된다.

• 속성: size, width, align, noshade

HTML HTML 태그태그 -- <HR><HR>Hypertext Markup Language

9


<CENTER>…</CENTER><CENTER>와 </CENTER> 사이에 포함된 모든 내용을 브라우저 화면의 중앙으로 정렬

…

• NO line BReak의 약어로서, 웹 브라우저에 의해 임으로 줄 바꿈이 일어나지 않도록 한다.

• (일반적으로 브라우저 화면 크기를 조절하면 문장의 줄 바꿈이 일어난다.)

HTML HTML 태그태그 -- <CENTER>, <CENTER>, Hypertext Markup Language


<BLOCKQUOTE>…</BLOCKQUOTE>

• 웹 페이지에서 “인용 단락”을 표시할 때 사용한다.

• 인용된 내용을 좌우에 적당한 여백을 주어 구분하여 보여준다.

HTML HTML 태그태그 -- <BLOCKQUOTE><BLOCKQUOTE>Hypertext Markup Language

10


<Hn>…</Hn>

• 웹 페이지에서 (주로 제목이나 머리글의) 글자 크기를 지정하기 위해 사용한다.

• 상대적 크기이며, <Hn>에서 n은 1(큰 글자) ~ 6(작은 글자)의 숫자를 사용한다.

• <Hn>은 줄 바꿈(line break) 기능을 포함한다.

HTML HTML 태그태그 -- <<HnHn>>Hypertext Markup Language


<BASEFONT SIZE=n>

• 기본 폰트 크기(default = 3)를 지정한다.

• n은 1~7의 숫자로 지정하며, 값이 클 수록 글자 크기가 커진다.

HTML HTML 태그태그 -- <BASEFONT><BASEFONT>Hypertext Markup Language

11


…

• 웹 페이지에서 글자의 크기(size), 색상(color), 글꼴(face)을 지정한다.

• 속성: size, color, face

HTML HTML 태그태그 -- Hypertext Markup Language


… : 글자를 이탤릭(italic)체로 지정한다.

… : 글자를 볼드(bold)체로 지정한다.

… : 글자를 밑줄(underline)체로 지정한다.

<TT>…</TT> : 글자를 타자(teletype)체로 지정한다.

<BLINK>…</BLINK> : 글자를 깜박거리도록 지정한다.

… : 글자를 위첨자(Superscript)로 지정한다.

… : 글자를 아래첨자(Subscript)로 지정한다.

<S>…</S> : 글자를 삭제된 문자(strike through)로 지정한다.

HTML HTML 태그태그 -- , , , , , , …… (1/2)(1/2)Hypertext Markup Language

12


HTML HTML 태그태그 -- , , , , , , …… (2/2)(2/2)Hypertext Markup Language


리스트 태그:문서를 서술식이 아닌 개조식으로 표현할 수 있다.

• Bullet List

• Numbered List

• Definition List

HTML HTML 태그태그 –– 리스트리스트 태그태그 (1/5)(1/5)Hypertext Markup Language

축구는 11명이 둥근 공을 가지고 사각형의 큰 경기장에서 경기한다.

야구는 9명이 배트, 글러브, 작은 공을 가지고 다이아몬드 형의 경기장에서 경기한다.

탁구는 2명 혹은 4명이 라켓과 매우 작고 가벼운 공을 가지고 테이블 위에서 경기한다.

1. 축구는 11명이 둥근 공을 가지고 사각형의 큰 경기장에서 경기한다.

2. 야구는 9명이 배트, 글러브, 작은 공을 가지고 다이아몬드 형의 경기장에서 경기한다.

3. 탁구는 2명 혹은 4명이 라켓과 매우 작고 가벼운 공을 가지고 테이블 위에서 경기한다.

축구 11명이 둥근 공을 가지고 사각형의 큰 경기장에서 경기한다.

야구 9명이 배트, 글러브, 작은 공을 가지고 다이아몬드 형의 경기장에서 경기한다.

탁구 2명 혹은 4명이 라켓과 매우 작고 가벼운 공을 가지고 테이블 위에서 경기한다.

13


<UL>…</UL>

• Unordered List의 약어로서, Bullet List를 지정한다.

• Bullet List 내부에 다시 Bullet List를 중첩하여 표현할 수 있다.

• 속성: type = circle | square | disk (circle = , square = , disk = )

<OL>…</OL>

• Ordered List의 약어로서, 목록 앞에 순서(일반적으로 숫자)가 표시된다.

• Bullet List 내부에 다시 Bullet 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에서 시작 번호를 지정

14


Definition List

• <DL>…</DL> : 용어 정의를 위한 리스트를 만든다. (<UL>, <OL>에 해당)

• <DT>…</DT> : 리스트의 항목(term)으로 지정한다. (“정의” 부분에 해당)

• <DD>..</DD> : 항목에 대한 설명(description)을 포함한다,



Menu List (<MENU>…</MENU>)“메뉴”와 같이 길이가 짧은 순서 없는 목록을 만들 때 사용한다.

Directory List (<DIR>…</DIR>)파일 이름과 같이 길이가 짧은 목록을 나타낼 때 사용한다(글자 수가 24자 이내로 제한).

15


색깔 이름을 사용하는 방법 (“red”, “black”, “gray”, …)

컬러 코드를 사용하는 방법 (#FFFFFF, #080808 RRGGBB in hexa code)

색깔색깔(Color) (Color) 지정지정 방법방법Hypertext Markup Language

Color Chart

Color Code 변환


태그: <IMG SRC = “image file path”>

속성: src, align, width, height, hspace, vspace, border

이미지이미지(image) (image) 삽입삽입 방법방법 (1/2)(1/2)Hypertext Markup Language

16


이미지이미지(image) (image) 삽입삽입 방법방법 (2/2)(2/2)Hypertext Markup Language


Hypertext Link의 활용

• 다른 웹 페이지로 이동시키거나, 현 웹 페이지의 다른 위치로 이동시킨다.

• 파일을 다운로드 받을 수 있게 하거나, 이미지 파일을 보여준다.

• E-mail을 보낼 수 있게 하거나, FTP 서버로 접속이 가능하게 한다.

Hypertext Link를 위한 태그

• 타 문서 연결: <A HREF = “연결하고자 하는 다른 문서의 URL”> … </A>

• 문서 내 연결

<A HREF = “#defined_label”> … </A>…………<A NAME = “defined_label”> … </A>

Hypertext Links (1/2)Hypertext Links (1/2)Hypertext Markup Language

17


Hypertext Links (2/2)Hypertext Links (2/2)Hypertext Markup Language


테이블테이블(Table) (1/3)(Table) (1/3)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

18



<TH>…</TH>

• Table Heading을 의미하며, 테이블의 맨 윗 행(헤더, header)를 나타낸다.

• <TR>과 쓰임이 유사하나, 글자체가 Bold체로 중앙 정렬되는 특성을 가진다.

<TABLE>

<TR>

<TH>

<TD>

[표 1] 강원대학교 컴퓨터과학과 성적 분포

<CAPTION>

19


프레임프레임(Frame) (1/3)(Frame) (1/3)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

20




사운드사운드((오디오오디오) ) 이용이용Hypertext Markup Language

사운드 파일 다운로드 하기

<A HREF = “music/sound01.mid”>sound01.mid(20kb)</A>

음악 들려주기

<EMBED SRC = “music/sound01.mid” autostart=true loop=2>

21


동영상동영상((비디오비디오) ) 이용이용Hypertext Markup Language

동영상 파일 다운로드 하기

<A HREF = “movie/video02.avi”>video02.avi(12mb)</A>

동영상 실행(play)하기

<EMBED SRC = “movie/video02.avi” autostart=true>


웹웹 페이지페이지 등록등록 및및 게시판게시판 연결연결Hypertext Markup Language

웹 페이지 등록

• Private한 웹 서버나 Naver 등에서 무료 웹 서버 계정을 활용한다.

• 웹 서핑 등을 통하여 자신에게 적합한 웹 서버 계정을 구축한다.

게시판 연결

• 웹 서버에서 제공하는 무료 게시판을 링크하여 활용한다.

• 게시판 소스(CGI 등)를 다운로드하여 Private 웹 서버에 설치하고 링크한다.(게시판을 직접 프로그래밍하는 것도 한 방편…)

웹프로그래밍 (Web Programming) HTML (Hypertext …ysmoon/courses/2006_1/wp/05.pdfHTML...

Documents

Transcript of 웹프로그래밍 (Web Programming) HTML (Hypertext …ysmoon/courses/2006_1/wp/05.pdfHTML...