CH 4. HTML 태그 활용

(1)

(2)

CH 4. HTML 태그 활용

학습목표

1. HTML의 정의, 유형, 용도에 대해 학습할 수 있다.

2. 웹 문서를 작성하는데 필요한 HTML 태그에 대해서 학습할 수 있다.

3. HTML 태그를 활용하여 블로그를 꾸밀 수 있다.

4. HTML 태그를 활용한 다양한 사용법을 습득할 수 있다.

(3)

• HTML과 HTML 태그

• 글자관련태그

• 서식태그

• 하이퍼링크와 표 태그

• 멀티미디어 삽입 태그

• 스타일시트 태그

학습내용

• 블로그 만들고 블로그에 HTML 태그 활용하기

• 정지영상(이미지)위에 글 흐르는 태그 활용하기

실습프로젝트

• 플래시 이미지 위에 글 자 움직이는 태그 이용 하여 메일 보내기

• 음악파일을 블로그에 올린 후 태그를 이용하 여 음악파일 연결하기

연습문제

(4)

1. HTML 태그

 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰임

 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있음

태그 예

<title> HTML 문서 만들기 </title>

(5)

2. HTML 태그 형식

HTML 문서의 기본 구조

<html>

<head>

<title> 문서의 제목이 들어가는 곳 </title>

</head>

<body>

웹브라우저의 화면에 보여지는 내용 ∙

∙

</body>

</html>

(6)

3. HTML 태그 종류

속 성 종 류 태 그

글자관련 태그 폰트 

스타일 지정태그 , , , , <s>

서식 태그

문장과 문단관련 태그 , , <center>, <xmp>

마키태그 <marquee>

문단번호 관련태그 <li>, <ul>,<ol>

배경 꾸미기태그 <body>태그의 속성으로 사용

표 태그 <table>, <tr>, <td>

하이퍼링크 및 멀티미디 어 삽입 태그

하이퍼링크태그 <a href="">

그림파일삽입 <img src="">

동영상, 사운드 파일 삽입 <embed src="">

플래시 파일 <boject>, <embed>

기타 태그 정렬태그 <div>

(7)

1. 폰트 태그

 글자의 크기를 지정할 때는 사용

 HTML 태그는 대∙소문자를 구별하지 않음

 표 4-2. 16가지 표준 색상이름

<형식>

//색상, “색상” 둘 다 사용가능

색상 16진수 색상 16진수 색상 16진수 색상 16진수

BLACK(검정) #000000 SILVER(은색) #C0C0C0 MAROON(밤색) #800000 RED(빨강) #FF0000

NAVY(네이비) #000080 BLUE(파랑) #0000FF PURPLE(보라) #800080 FUCHSIA(밝은

자주) #FF00FF GREEN(초록) #008000 LIME(라임) #00FF00 OLIVE(올리브) #808000 YELLOW(노랑) #FFFF00 TEAL(틸) #008080 AQUA(아쿠아) #00FFFF GRAY(회색) #808080 WHITE(하양) #FFFFFF

(8)

 표 4-3. 태그

태그와 속성 출력 내용

폰트 태그

폰트 태그

폰트 태그

폰트 태그

폰트 태그

(9)

 [예제 4-1] 폰트 태그와 태그의 속성들을 이용하여 다음의 문서를 작성해 보자.

① 메모장을 연다.

② 메모장에 기본태그를 작성하고 <body> 태그 안에 다 음을 작성한다.

<font size="5", color="red", face="휴먼옛체

"> HTML 태그 연습

HTML 태그 연습

<font size="6", face="휴먼편지체",

color="#990033"> HTML 태그 연습

③ 파일 이름을 연습.html로 저장한다. 이때 확장자 는 .html 또는 .htm 둘 다 가능하다.

④ 파일을 실행한다.

그림 4-1. 폰트 태그 연습

(10)

2. 스타일 지정 태그

 표 4-4. 스타일 지정 태그

태 그 출력 내용 설명

문자 스타일 문자 스타일 볼드체로 출력

문자 스타일 문자 스타일 이탤릭체로 출력

문자 스타일 문자 스타일 밑줄문자로 출력

문자 스타일 ^{문자 스타일} 위첨자로 출력

문자 스타일 _{문자 스타일} 아래첨자로 출력

<s>문자 스타일</s> 문자 스타일 글자 가운데 줄긋기

(11)

2. 스타일 지정 태그

 [예제 4-2] 문자 스타일 지정 태그를 이용하여 다음의 문서를 작성해 보자.

① 메모장을 연 후, 메모장에 기본태그를 작성하고 <body> 태 그 안에 다음을 작성한다.

볼드체 스타일 지정하기

이텔릭체 스타일 지정하기

밑줄 스타일 지정하기

위첨자 스타일 지정하기

아래첨자 스타일 지정하기

② 파일 이름을 연습.html로 저장한 후, 실행한다.

그림 4-2. 스타일 지정 태그 연습

(12)

1. 문장과 문단 관련 태그

 표 4-5. 문장, 문단 관련 태그

태 그 설 명

문단 구분시 사용, [Enter]키를 누른 효과,  (space)

줄바꿈 태그, shift+[Shift]+[Enter]키를 누르는 효과, 종료태그 필요 없음

<pre> ... </pre> 일반문서처럼 문서 내용을 그대로 보여주지만 태그는 작동한다.

[Enter]+[Space Bar]등 내가 입력한 형태로 보여줌

... 문장의 내용이 길 때 브라우저의 길이에 맞게 자동으로 길이 조정 되는 것을 없애준다. (줄바꿈 금지)

<center> ... </center> 태그 사이의 문장을 가운데로 정렬

<xmp> ... </xmp> 문서의 내용을 태그와는 상관없이 그대로 보여줌

(13)

1. 문장과 문단 관련 태그

 [예제 4-3] 문장과 문단에 관련 태그를 이용하여 다음의 문서를 작성해 보자.

① 메모장을 연 후, 메모장에 기본태그를 작성하고 <body> 태그 안에 다음을 작성한다.

1. 문장과 문단 관련 태그

재미있는 인터넷활용 

<pre>

재미있는 인터넷활용

무척 재미있지요?

</pre>

창의 크기가 작아저도 줄바꿈이 일어나지 않는 태그이다.

<xmp>

태그는 줄바꿈태그 

이렇듯 태그를 그대로 표현하는 태그

</xmp>

② 파일 이름을 연습.html로 저장한 후, 실행한다.

그림 4-3. 문장, 문단 관련 태그 연습

(14)

2. 목록 태그

 목록을 기호로 나타내기 위해서는 disk(•)모양, circle(◦)모양, square(▪)모 양으로 지정

 특별히 지정하지 않으면 기본값으로 disk(•)모양으로 지정

<기호 목록 형식>

<ul type=circle>

<li> ... </li>

</ul>

<숫자 목록 형식>

<ol type=i>

<li> ... </li>

</ol>

(15)

2. 목록 태그

 [예제 4-4] 문단의 목록 태그를 이용하여 다음의 문서를 작성해 보자.

① 메모장을 연 후, 메모장에 기본태그를 작성하고 <body> 태그 안에 다음을 작성한다.

기호 목록

<li>cicle 모양</li>

<li>square모양</li>

</ul>

숫자 목록

</ol>

그림 4-4. 목록 태그 연습

(16)

3. MARQUEE 태그

 표 4-6. MARQUEE 태그 속성

<형식>

<marquee direction={left | right | up | down} bgcolor=색상 scrolldelay=숫자

태그 속성 설 명

direction 글자가 흐르는 방향을 지정

bgcolor 글자가 흐르는 곳의 배경 색깔 지정

width 글자가 흐르는 곳의 가로 폭

height 글자가 흐르는 곳의 세로 폭

scrollamount 글자가 흐를 때의 속도

scrolldelay 글자가 흐를 때의 대기속도, 숫자가 클수록 늦다.

(17)

3. MARQUEE 태그

 [예제 4-5] MARQUEE 태그를 이용하여 방향은 왼쪽, 가로폭은 100%, 배경 색깔은

‘ping'로 문서를 작성해보자.

<marquee width=100%, bgcolor="pink"> 향기로운 아카시아의 계절 5월입니다.</marquee>

그림 4-5. MARQUEE 태그 연습

(18)

1. 하이퍼링크 태그

 HTML에서는 텍스트나 그림 등을 클릭하면 다른 화면으로 넘어가게 하는 하이퍼 링크 기능을 제공

<형식1 : 그림이나 글자를 클릭했을 경우 다른 문서로 링크>

<형식1 : 그림이나 글자를 클릭했을 경우 문서내의 name으로 링크>

...

(19)

1. 하이퍼링크 태그

 표 4-7. 하이퍼링크 태그의 속성

target 속성 설 명

_blank 링크시킨 html문서를 기존 프레임 구조의 브라우저는 그대로 두고 새로운 창에서 열기

_self 하이퍼링크 시킨 문서를 같은 프레임에서 열게 함

_present 기존의 프레임 구조를 완전히 벗어나서 현재의 프레임구조로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크함

_top 링크시킨 html 문서의 프레임 구조의 형태를 완전히 벗어나서

최초의 전체화면을 보줌

(20)

1. 하이퍼링크 태그

 [예제 4-6] 하이퍼링크 태그를 이용하여 문서 내에서 링크하는 방법과, 다른 문서로 이동할 때 새창에서 문서가 열리도록 태그를 작성해 보자.

① 메모장을 연 후, 메모장에 기본태그를 작성하고 <body> 태그 안에 다음을 작성한 다.

<a href="http://www.netan.go.kr", target="_blank">사이버테러대응 센터</a>

그림 4-6. 하이퍼링크 태그 연습

(21)

2. 표 태그

(22)

2. 표 태그

 [예제 4-7] 3*3표를 삽입하고 아래쪽 표와 같이 되도록 태그를 작성해 보자.

<tr>

</tr><tr>

</tr><tr>

</tr></table>

수성 화성 천왕성

토성 지구

금성

그림 4-7. 표 태그 연습

(23)

1. 그림 삽입 태그

 <형식>

이미지 형식

 jpg : www에서 많이 사용하고 사진이나 화면이 보이는 고해상도 이미지에 사용(24비트 또는 백만 컬러)

 gif : jpg 이미지와는 달리, 256 컬러만 지원, 움직이는 영상에 사용

 png : jpg와 gif의 장점을 살린 포맷, 움직이는 영상과 투명 이미지 사용

 bmp : 마이크로소프트 윈도의 그래픽 파일 포맷, 웹에서는 용량이 커서 사용하지 않음

<형식>

<img src="경로명\파일명“ width="300"

height="300">

T I P

(24)

2. 동영상 및 음악 삽입 태그

 플래시 파일을 홈페이지에 삽입하는 태그는 동영상 및 사운드 파일에서처럼

<embed>를 사용

 더 많은 옵션을 사용하려 면 <object> 태그를 사용

<플래시 삽입 태그 형식>

codebase="http://download.macrome dia.com/pub/shockwave/cabs/flash/s wflash.cab#version=6,0,29,0"

width="100" height="100">

<param name="movie"

value="images\ending_part.swf">

 [예제 4-10] 태그를 이용하여 플래시 파일을 삽입하는 문서를 작성해 보자.

<실행결과>

플래시 파일 삽입

그림 4-10. 플래시 삽입 태그 연습

(25)

1. 스타일시트란?

 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트

 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였음

 기존의 HTML은 웹 문서를 다양하게 설계하는데 많은 제약을 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 임

(26)

2. 스타일시트 구성

 스타일시트의 구성은 선택자(selector)와 선언부(declaration)로 구성 ◆ Font 속성

- font-family:글꼴명

- font-size : 길이값, 절대크기, 상대크기

◆ Color & Background 속성 - color : 색상

- background-color : 색상, transparent - background-image : url(파일경로)

◆ Text 속성

- text-align : left, right, center, justify - test-indent : 길이값, 백분율

그림 4-11 스타일시트 구성

(27)

3. HTML태그에서 스타일시트 사용 방법

<일반적인 태그>

CSS 예제파일입니다.

스타일시트를 확인해봅시다.

<수정>

CSS 예제파일입니다.

스타일시트를 확인해봅시다.

(28)

3. HTML태그에서 스타일시트 사용 방법

 스타일시트를 사용하면 좀 더 다양한 스타일들을 적용 가능함

① Embedding style

h4 {color:red}

p {font-size:10pt}

b {font-style:italic}

</style> </head>

CSS예제파일입니다.

스타일시트를 확인해봅시다.

(29)

3. HTML태그에서 스타일시트 사용 방법

 스타일시트를 사용하면 좀 더 다양한 스타일들을 적용 가능함

② Inline 스타일시트 방법

<h4 style="color:red">Example</h4>

<span style="font -weight:bold; font-

style:italic; color:red"> CSS

예제파일입니다 .

스타일시트를 확인해봅시다./p>

(30)

3. HTML태그에서 스타일시트 사용 방법

 스타일시트를 사용하면 좀 더 다양한 스타일들을 적용 가능함

③ 외부 파일로 불러와서 사용하는 Link 스타일시트 방법

<head>

</head>

(31)

1. 프로젝트개요

 네이버(www.naver.com)에서 블로그를 만들고 간단한 스킨을 바꾼 후 HTML태그 를 이용하여 문서를 작성해보자.

그림 4-11 블로그 만들기 결과화면

[작업 내용]

❶ 네이버에서 블로그를 만든 후 ‘내 블로그 가기’에 접속한다.

❷ 블로그 스킨을 바꾼다.

❸ 기본 정보 바꾸기를 한다.

❹ 블로그 카테고리 만들기를 한다.

❺ 태그를 이용하여 포스트 쓰기를 한다.

(32)

1. 플래시 이미지 위에 글 흐르는 태그 이용하여 메일 보내기

 플래시 이미지나 움직이는 이미지(gif, png)를 이용하여 이미지 위에서 글을 흐르 게 하여 메일 쓰기를 해보자.

[ 작업 내용 ]

① 먼저 움직이는 이미지가 있는 위치를 검색함

② 검색한 이미지 위에서 마우스 오른쪽을 클릭하여 [속성]에서 주소(URL)을 복사함 ③ 메일쓰기를 하여 html을 클릭한 후, 코드를 입력함

④ 편지보내기로 완성

(33)

1. 플래시 이미지 위에 글 흐르는 태그 이용하여 메일 보내기

그림 4-21 움직이는 영상 사용하여 메일 보내기

(34)

2. 음악파일을 블로그에 올린 후 태그를 이용하여 음악파일 연결하기

 음악파일의 태그를 연습하고자 할 때 웹에 음악을 올려놓고 주소(URL)를 가지고 음악이 플레이 되도록 태그를 이용해서 작성해 보자.

그림 4-22 음악파일 태그 사용

(35)

2. 음악파일을 블로그에 올린 후 태그를 이용하여 음악파일 연결하기

[ 작업 내용 ]

① 음악파일 비나이다.mp3를 블로그에 첨부파일로 넣는다.

② 음악파일이 첨부된 웹페이지에서 오른쪽 마우스를 클릭하여 [소스보기]를 한다.

③ 소스에서 [찾기]를 하여 .mp3를 검색하여 주소를 복사한다.

④ 다음의 코드를 입력한다.

⑤ 포스트 작성을 완성한다.

286_blogfile/bangule_1276603665210_9E57s5_m p3/%BA%F1%B3%AA%C0%CC%B4%D9.mp3">

</embed>

(36)

2. 음악파일을 블로그에 올린 후 태그를 이용하여 음악파일 연결하기

그림 4-23 소스코드에서 주소(URL) 찾기

CH 4. HTML 태그 활용