HTML HTML 기초기초((Part I)Part I)cs.kangwon.ac.kr/~ysmoon/courses/2009_2.5/wi/07-1.pdf · HTML...

1

웹과웹과 인터넷인터넷 활용활용 및및 실습실습(Web & Internet)(Web & Internet)

HTML HTML 기초기초 ((Part I)Part I)

문양세문양세강원대학교강원대학교 ITIT대학대학 컴퓨터과학전공컴퓨터과학전공

강의강의 내용내용HTML 기초

HTML의 개요

HTML 문서의 기본 구조

HTML의 구성요소

HTML 편집기

기본적인 HTML 태그

컬러와 그래픽 이미지

하이퍼텍스트 링크

Web & Internetby Yang-Sae MoonPage 2

하이퍼텍 링

테이블

프레임

사운드(오디오) 및 동영상

2

HTML HTML 개요개요

HTML: HyperText Markup Language

WWW 상의 문서를 기술하기 위한 언어로서 플랫폼에 관계없이 사용 가

능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어

HTML 기초

능한 하이퍼텍스트 문서를 만들 수 있는 마크업(markup) 언어

Markup 언어란?

• 일반 텍스트 문서에 < >로 둘러 쌓인 약속된 태그(tag)를 붙여 줌으로써, 특수한 기능을

웹 브라우저로 하여금 인식하여 실행할 수 있도록 지시 해주는 기능을 하는 언어

• 예: <B>이것은 굵은 글씨체이다.</B>

이것은 굵은 글씨체이다.


HTML HTML 문서의문서의 기본기본 구조구조 (1/2)(1/2)

HTML 문서는 일반적으로 머리말(header)과 본문(body)의 두 부분으로

나누어진다.

HTML 기초

<HTML>

<head>머리말 (제목) (1) HTML 문서의 머리말 부분

</head>

<body>웹 페이지의 본문 (2) HTML 문서의 본문 부분

b d


</body>

</HTML>

3

HTML HTML 문서의문서의 기본기본 구조구조 (2/2)(2/2)

HTML 문서 예제

HTML 기초



HTML의 개요



HTML 편집기





하이퍼텍 링

테이블

프레임


4

HTMLHTML의의 구성구성 요소요소

텍스트(text)

• 웹 문서의 본문에 해당 (실제 표현하고자 하는 내용)

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

HTML 기초

태그(tag)

• 텍스트에 속성/기능을 부여하기 위해 문서의 중간 중간에 붙여주는 일종의 꼬리표

• 일반적으로, ‘<‘와 ‘>’로 둘러 쌓아서 표기함 (예: <html>, <table>)

스크립트(script)

• 간단한 명령어들의 집합 텍스트(내용)


간단한 명령어들의 집합

• 동적인 웹 문서 작성이 가능하게 함

• Javascript, Visual Basic Script 등이 있음

텍스트(내용)

태그

스크립트

태그의태그의 속성과속성과 종류종류 (1/2)(1/2)

태그는 속성(attribute)을 가질 수 있다.

속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여,

웹 브라우저로 하여금 보다 세밀한 기능을 수행하도록 지정하는 명령의

HTML 기초


일부

태그 분류1: 복합 태그 vs. 단독 태그

• 복합 태그: 항시 쌍으로 사용되는 태그


• 복합 태그의 예: <title> ... </title>, <p> ... </p>, <html> ... </html> 등

• 단독 태그: 쌍으로 사용되지 않고, 단독으로 사용되는 태그

• 단독 태그의 예: <br>, <hr> 등

5


HTML의 이해는 태그의 종류, 의미, 속성을 이해하는 것이다.

태그는 속성(attribute)을 가질 수 있다.

속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여

HTML 기초

속성은 지정된 태그 명령에 대하여 보다 자세한 환경과 정보를 규정하여,


일부

태그 분류1: 복합 태그 vs. 단독 태그


• 복합 태그: 항시 쌍으로 사용되는 태그

• 복합 태그의 예: <title> ... </title>, <p> ... </p>, <html> ... </html> 등

• 단독 태그: 쌍으로 사용되지 않고, 단독으로 사용되는 태그

• 단독 태그의 예: <br>, <hr> 등


태그 분류2: 속성을 갖는 태그 vs. 속성을 갖지 않는 태그

• 속성을 꼭 필요로 하는 태그

<a href=“http://www.naver.com">네이버</a>로 연결

HTML 기초

<img src=“./images/mypicture.jpg">

• 속성이 옵션으로 사용되는 태그: <hr noshade> 등

• 속성을 가지지 않는 태그: <em> ... </em> 등


6

태그의태그의 특성특성

대/소문자 구별이 없다. 즉, <BR>, <Br>, <br>은 모두 같은 태그로 인식

복합 태그들은 엇갈려서 사용할 수 없다.

• 잘못 사용한 예: <big><blink> 엇갈린 예제 </big></blink>

HTML 기초

• 잘못 사용한 예: <big><blink> 엇갈린 예제 </big></blink>

• 바르게 사용한 예: <big><blink> 올바른 예제 </blink></big>

포함할 수 없는 태그는 포함시켜서는 안 된다.

• 세계 최대 컴퓨터 통신망 (interconnected network Internet)

• 잘못 사용한 예: <h1><h2> 틀렸어요! </h2></h1>

• 바르게 사용한 예: <h1> 옳아요! </h1> 또는 <h2> 또 옳아요! </h2>


바 게 사용한 예 옳아 는 옳아

• Why? <hn> 태그는 글자 크기를 조정하는데, 포함해서 쓰면 의미가 혼동됨

스크립트스크립트(script)(script)

웹 브라우저가 이해하는 간단한 명령어들의 집합

HTML 문서 내에 포함시켜 동적인 웹 문서 작성이 가능

자바 스크립트와 비쥬얼베이직 스크립트 사용가능

HTML 기초

자바 스크립트와 비쥬얼베이직 스크립트 사용가능


7


HTML의 개요



HTML 편집기





하이퍼텍 링

테이블

프레임


HTML HTML 편집기편집기 (1/3)(1/3)

텍스트 기반 편집기

• 메모장, 아래아한글, MS 워드, editplus

HTML 기초


8


텍스트 기반 편집기 (계속)

HTML 기초



WYSIWIG 방식 편집기

• 드림위버(매크로미디어社), 나모 웹 에디터, 프론트페이지(MS)

HTML 기초


9


HTML의 개요



HTML 편집기





하이퍼텍 링

테이블

프레임


텍스트텍스트 기반기반 에디터에디터 사용사용??

WYSIWIG 편집기를 사용하지 않는 이유

• HTML 태그를 익힐 수 없다. (태그를 몰라도 HTML 문서 작성이 가능하기 때문)

• WYSIWIG 편집기는 사용자가 원하는 모든 기능을 제공하지 않는다.

HTML 기초

• WYSWIG으로는 보다 간결하고 이해하기 쉬운 HTML 문서를 작성하기 어렵다.

제안하는 바는…

• 여러분은 텍스트 기반 에디터(메모장, editplus)로 HTML 태그를 익히시기 바랍니다.

• 태그가 익숙해졌다면, 추후에는 WYSIWIG 편집기로 HTML 문서를 만드세요.


• HTML 태그를 잘 알고 있다면, WYSIWIG 편집기로 만든 문서도, 에디터로 수정하여, 보

다 간결하고 보기 좋게 만들 수 있습니다.

10

첫첫 번째번째 HTML HTML 문서문서

메모장을 열고 다음과 같이 입력하고 first.html로 저장

HTML 기초

<html>

<head>head

<title>간단한실습</title>

</head>

<body>

안녕하세요? <br>

첫 번째 실습입니다.


</body>

</html>

문서문서 구조구조 태그태그 (1/5)(1/5)

<html> …. </html>

• HTML 문서 형식으로 작성되었음을 나타냄

• 모든 HTML 문서는 <HTML>로 시작하여 </HTML> 로 끝남

HTML 기초

<head> …. </head>

• HTML 문서의 머리말(header) 영역

• HEAD에 사용되는 전용태그: <TITLE>, <BASE HREF="...">, <LINK>, <NEXTID>,

<META>, <RANGE>, <STYLE>, <ISINDEX>

<title> …. </title>


• 문서의 제목을 브라우저 화면의 타이틀 바에 표시

• 통상 <head>와 </head> 사이에 위치함

• 브라우저에서 북마크(bookmark)했을 때, 북마크 제목으로 사용됨

11


<title> …. </title> 사용 예

HTML 기초



<body> …. </body>

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

<body>의 속성(attribute)

HTML 기초

<body>의 속성(attribute)

태그 기능 Default

background = “그림파일”이미지(그림) 파일을 지정해 주면 그 이미지가 웹 문서

의 배경이 된다. 없음

bgcolor = “#색상” 웹 페이지의 배경 색을 지정한다 흰색

text = “#색상” 웹 페이지에 포함된 일반 글자의 색을 지정 검은색


link = “#색상” 접속된 적이 없는 하이퍼링크된 글자 부분의 색을 지정 파란색

vlink = “#색상”과거에 접속해 본적이 있는 하이퍼링크된 글자 부분의

색을 지정보라색

alink = “#색상”하이퍼링크된 글자를 마우스 버튼으로 누르고 있을 때

의 색을 지정빨간색

12


<body>의 속성 사용 예

HTML 기초



: 주석

• 여기에 담긴 내용은 브라우저를 통해서는 볼 수 없음

• 여러 줄에 걸쳐서 사용할 수 없음에 주의

HTML 기초

13

환경환경 정보정보 전달을전달을 위한위한 태그태그

<base href = “… path …”>

• 규정되는 HTML 문서의 기본 주소(상대 주소)를 알려준다.

• 해당 HTML 문서가 읽혀질 URL을 지정해 주는데 사용

HTML 기초

• <BASE HREF="...."> 태그를 지정하면 HTML 문서 안에 있는 모든 URL은

<BASE HREF="...."> 태그에서 지정된 URL로부터 상대적인 경로를 가지게 됨


문단문단 설정을설정을 위한위한 태그태그 (1/7)(1/7)

<p>

• 단락이 시작되는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분

• 중복 사용해도 한번만 적용

HTML 기초

• 속성: align = left | right | center

<p> 태그 내부에 들어간 단락의 내용을 정해진 위치로 정렬

<br>

• Break의 약어


• 문장에서 줄 바꾸기 기능

14


<p>, <br>의 사용 예제

HTML 기초



<pre>

• 입력한 내용 그대로를 웹 브라우저 화면에 출력 (공백 유지, html 태그 무시)

HTML 기초


15


<hr>: horizontal ruler

• 웹 페이지 안에 선을 그리거나 경계선을 나타낼 때 사용

• 문단을 구분하는 가로선(수평선)으로 많이 사용

HTML 기초

• 종료 태그가 없는 단독 태그

• <hr size = pixel width = pixel 또는 %>

속 성 기능

SIZE = n 가로선의 두께를 n개의 픽셀 단위로 지정


WIDTH = n | % 가로선의 길이를 n개 혹은 %의 픽셀 단위로 지정

ALIGN = LEFT 가로선의 정렬 방식을 지정하여 정렬

NOSHADE 가로선의 음영효과를 없애 준다.


<hr> 사용 예제

HTML 기초


16


<center> … </center>

• 태그 안에 포함되는 모든 내용을 브라우저 화면의 중앙으로 정렬

HTML 기초

<nobr> … </nobr>

• No line break의 약어

• 웹 브라우저에 의해서 임으로 줄 바꿈이 일어나지 않도록 함



<nobr> … </nobr>의 예제

HTML 기초


17

특별한특별한 텍스트를텍스트를 규정하기규정하기 위한위한 태그태그 (1/2)(1/2)

<blockquote> … </blockquote>

• 웹 페이지에 인용한 단락을 표시할 때 사용

• 인용할 내용을 좌우에 적당한 여백을 주어 본문과 구분

HTML 기초


특별한특별한 텍스트를텍스트를 규정하기규정하기 위한위한 태그태그 (2/2)(2/2)

<address> … </address>

• 웹 페이지 안에서 전자우편(e-mail) 주소를 표기할 때 사용

HTML 기초


18

글자의글자의 크기크기 지정을지정을 위한위한 태그태그 (1/4)(1/4)

<Hn> … </Hn>

• 주로 제목이나 머리글 글자의 크기를 지정할 때 사용

• n = 1(큰글자) ∼ 6(작은글자)

HTML 기초

• 줄 바꿈 기능제공 자동적으로 라인 브레이크 적용됨



<basefont size=“n”>

• 기본 폰트 크기(기본 값이 3)를 적용

• n = 1∼7

HTML 기초


19


<font> … </font>: 폰트를 지정/변경하는 태그

<font>의 속성

• SIZE = n (예: < font size = 5>)

HTML 기초

• SIZE = n (예: < font size = 5>)

일반 HTML 문서의 폰트(글꼴)의 크기를 지정할 때 사용

N = 1∼7 (default = 3)

기본 폰트는 숫자 앞에 + 또는 -를 붙여서 폰트의 크기를 상대적으로 지정도 가능

• COLOR = “color” (예: <font color=“red”>)

폰트(글꼴)의 컬러를 지정하는데 사용

색깔 이 을 거나 컬러 있음 컬러 다음에 설명


색깔 이름을 주거나, 컬러 코드를 줄 수 있음 (컬러 코드는 다음에 설명)

• FACE = “face” (예: <font face=“굴림체”>)

텍스트를 표시하는데 사용할 글꼴을 지정하는데 사용

“굴림”, “돋움”, “궁서”, “바탕”


<font> 이용 예제

HTML 기초


20

문자열의문자열의 물리적물리적 스타일스타일 지정지정 태그태그 (1/2)(1/2)

글자를 표현할 때, 글자체를 직접적으로 지정하여 출력

i /i 글자를 이탤릭(it li )체로 지정

HTML 기초

<i> … </i> 글자를 이탤릭(italic)체로 지정

<b> … </b> 글자를 볼드(bold)체로 지정

<u> … </u> 글자를 밑줄(underline) 문자로 지정

<tt> … </tt> 글자를 통신문(teletype)체로 지정 (타자기체)

<sup> … </sup> 글자를 위 첨자(superscript)로 지정


sup … /sup 글자를 위 첨자(superscript)로 지정

<sub> … </sub> 글자를 아래 첨자(subscript)로 지정

<s> … </s> 글자를 삭제문자(strike through)체로 지정

문자열의문자열의 물리적물리적 스타일스타일 지정지정 태그태그 (2/2)(2/2)HTML 기초


21

문자열의문자열의 논리적논리적 스타일스타일 지정지정 태그태그 (1/3)(1/3)

글자로 표현된 문장의 내용에 따라, 글자를 특징지어 구분하여 출력

/ 문자를 강조( h i ) 이탤릭체

HTML 기초

<em> … </em> 문자를 강조(emphasis), 이탤릭체

<strong> … </strong> 문자를 강하게 표현, 볼드체

<dfn> … </dfn> 정의(definition)에 해당, 이탤릭체

<cite> … </cite> 책, 논문 등을 인용, 이탤릭체

<samp> … </samp> 상태 메시지/예제, 고정폭 일반글씨체


samp … /samp 상태 메시지/예제, 고정폭 일반글씨체

<code> … </code> 프로그램 코드, 고정폭 일반글씨체

<kbd> … </kbd> 키보드 입력 문구, 고정폭 일반글씨체

문자열의문자열의 논리적논리적 스타일스타일 지정지정 태그태그 (2/3)(2/3)

<var> … </var> 변수(variable) 이름을 표현, 이탤릭체

<au> … </au> 저자(author) 이름을 표현, 보통 글자체

HTML 기초


22

문자열의문자열의 논리적논리적 스타일스타일 지정지정 태그태그 (3/3)(3/3)HTML 기초


리스트리스트((목록목록)) 태그태그

리스트 태그의 종류

• 불릿(bullet) 리스트

• 번호(number) 리스트

HTML 기초

• 정의(definition) 리스트

불릿 리스트

• 첫 번째 항목

• 두 번째 항복

번호 리스트

1. 첫 번째 항목

2 두 번째 항복

정의 리스트

축구 11명이 경기한다.

야구 9명이 경기한다


• 두 번째 항복

• 세 번째 항목

2. 두 번째 항복

3. 세 번째 항목

야구 9명이 경기한다.

농구 5명이 경기한다.

23

불릿불릿 리스트리스트 (1/3)(1/3)

가장 일반적인 형태의 리스트 (블릿문자)

각 항목의 끝 부분에는 자동으로 라인이 나누어짐

HTML 기초

불릿 리스트 시작/끝 태그: <ul> … </ul> (ul: unordered list)

• 목록 앞에 숫자 대신에 기호를 붙여서 순서 없는 목록을 만들 때 사용

• 블릿 리스트의 내부에 또 다른 블릿 리스트를 넣는 것이 가능 (중첩된 블릿 리스트)

<ul>의 속성


• <UL type = circle | square | disc> .... </UL>

• Circle = ○, square = ■, disc = ●

불릿불릿 리스트리스트 (2/3)(2/3)

각 항목(list item)의 시작/끝 태그: <li> … </li>

(불릿 리스트에서) <li>의 속성

• <LI type = circle | square | disc> </LI>

HTML 기초

• <LI type = circle | square | disc> .... </LI>

• Circle = ○, square = ■, disc = ●

참고: 속성이 영향을 미치는 범위

• <ul>(혹은 <ol>)에서의 속성은 목록 전체에 영향을 주는 반면에,

• <li>에서의 속성은 해당 항목에만 영향을 준다.


에서의 속성은 해당 항목에만 영향을 준다

24

불릿불릿 리스트리스트 (3/3)(3/3)HTML 기초


번호번호 리스트리스트 (1/3)(1/3)

목록 앞에 숫자가 붙어서 그 순서를 가지는 목록을 만들 때 사용

번호 리스트 시작/끝 태그 l / l ( l d d li t)

HTML 기초

번호 리스트 시작/끝 태그: <ol> … </ol> (ol: ordered list)

• 목록 앞에 숫자를 붙여서 순서를 갖는 목록을 만들 때 사용

• 리스트의 내부에 또 다른 리스트를 넣는 것이 가능 (중첩된 불릿/번호 리스트)

<ol>의 속성

• <OL type = “A” | “a” | “I” | “I” | “1”> .... </OL>

“A” 대문자 알파벳 (A B C )


• A 대문자 알파벳 (A, B, C, …)

• “a” 소문자 알파벳 (a, b, c, …)

• “I” 대문자 로마 숫자 (I, II, III, …)

• “I” 소문자 로마 숫자 (i, ii, iii, …)

• “1” 아라비아 숫자 (1, 2, 3)

25

번호번호 리스트리스트 (2/3)(2/3)

<ol>의 속성 (계속)

• <OL start=n> .... </OL>

• 리스트의 시작 번호를 명시

HTML 기초

각 항목(list item)의 시작/끝 태그: <li> … </li> (<ul>과 동일한 내용)

(번호 리스트에서) <li>의 속성

• <LI type = “A” | “a” | “I” | “I” | “1”> .... </LI>

• <LI value = n>: 번호를 임의로 부여하고 싶을 경우


번 를 임의 부여하 싶을 경우

참고: 속성이 영향을 미치는 범위 (<ul>과 동일한 내용)

• <ol>(혹은 <ul>)에서의 속성은 목록 전체에 영향을 주는 반면에,

• <li>에서의 속성은 해당 항목에만 영향을 준다.

번호번호 리스트리스트 (3/3)(3/3)HTML 기초


26

정의정의 리스트리스트 (1/2)(1/2)

태그 내에서 리스트 항목을 정의하는 태그(<dt>)와 이 항목을 설명하는

태그(<dd>)를 가지고 있음

HTML 기초

정의 리스트 시작/끝 태그: <dl> … </dl> (dl: definition list)

• <dl> 태그는 내부에서 <dt>와 <dd> 태그를 사용함

• <dt>와 <dd> 태그는 반드시 짝을 이루어 사용되어야 함

<dt> … </dt> (dt: definition term)

리스트의 정의 항목을 나타냄


• 리스트의 정의 항목을 나타냄

<dd> … </dd> (dd: definition description)

• 리스트의 정의 항목에 대한 설명을 나타냄

정의정의 리스트리스트 (2/2)(2/2)HTML 기초


27


HTML의 개요



HTML 편집기





하이퍼텍 링

테이블

프레임


HTML HTML 기초기초((Part I)Part I)cs.kangwon.ac.kr/~ysmoon/courses/2009_2.5/wi/07-1.pdf · HTML...

Documents

Transcript of HTML HTML 기초기초((Part I)Part I)cs.kangwon.ac.kr/~ysmoon/courses/2009_2.5/wi/07-1.pdf · HTML...