4.홈페이지만들기cfs4.tistory.com/upload_control/download.blog?fhandle=...(2)...

9
255 V. 가상세계로의 여행 1 4.홈페이지 만들기 PART V>> 보임마당 1 우리 반을 만들기 위한 준비는? 홈 페이지란? (1) 홈페이지유래 인터넷이 활성화되면서 홈 페이지란 말을 자주 사용하게 되었는데, 홈 페이지 는 인터넷으로 정보를 제공하는 어떤 곳으로서 특정 모양새를 갖춘 정보 장소 라고 할 수 있다. 페이지란 말은 1989 년에 CERN 산하의 어느 물리학연구소 직원들이 연구 성과물을 좀 더 많이 공유하기 위한 전달 방법으로 인터넷을 이용하게 되었고, 연구물을 한 페이지 한 페이지 이어 나간다는 것으로 책의 개념이 많이 도입되 어 Page가 유래되었다. (2) 홈페이지와 웹 사이트 홈 페이지와 웹 사이트를 좀 더 구체적으로 정의하면 다음과 같다. HTML을 이용하여 만든 웹 페이지들 중 가장 처음에 접속되는 웹 페이지 홈 페이지라 하며, 이들 웹 페이지들의 모음을 웹 사이트라 한다. 웹페이지 제작 도구로는 전용 에디터(나모, 드림위버등), 그래픽프로그램(포토샵, 페인 등), 애니메이션프로그램(플래시 등), 텍스트에디터(메모장, 워드패 드 등), FTP 프로그램(Ws_FTP 등), 웹 브라우저(Explorer 등) 등이있다. 자습서5-4 1904.2.19 3:32 AM 페이지255

Transcript of 4.홈페이지만들기cfs4.tistory.com/upload_control/download.blog?fhandle=...(2)...

255V. 가상 세계로의 여행 ●

1

4.홈페이지만들기

PART V>> 보임마당

1 우리반을만들기위한준비는?

홈 페이지란?

(1) 홈페이지유래

인터넷이활성화되면서홈 페이지란 말을자주사용하게 되었는데, 홈페이지

는 인터넷으로정보를 제공하는어떤곳으로서 특정모양새를갖춘정보장소

라고할 수 있다.

홈 페이지란말은 1 9 8 9년에CERN 산하의어느물리학연구소직원들이연구

성과물을좀 더 많이공유하기위한전달방법으로인터넷을이용하게되었고,

연구물을한 페이지한 페이지이어나간다는것으로책의개념이많이도입되

어 P a g e가 유래되었다.

(2) 홈페이지와웹 사이트

홈 페이지와웹 사이트를좀 더 구체적으로정의하면다음과같다.

H T M L을 이용하여 만든 웹 페이지들 중 가장 처음에 접속되는 웹 페이지 홈

페이지라하며, 이들웹 페이지들의모음을 웹 사이트라 한다. 웹페이지 제작

도구로는 웹 전용 에디터(나모, 드림위버등), 그래픽 프로그램(포토샵, 페인

트 샵 등), 애니메이션 프로그램(플래시 등), 텍스트 에디터(메모장, 워드 패

드 등), FTP 프로그램(Ws_FTP 등), 웹브라우저(Explorer 등) 등이있다.

자습서5-4 1904.2.19 3:32 AM 페이지255

2

(3) 홈페이지의목적

① 개인 : 개인의홍보나관심분야의내용을실어이용자와공유

② 기업 : 기업의홍보나제품의판매가목적

③ 정부기관: 해당기관의홍보나각종자료를제공

④ 교육기관 : 교육에관련된내용의홍보나각종학습자료제공

(4) 홈페이지제작시고려사항

① 홈 페이지는목적이분명하여야한다.

어떠한내용을어떤사람을어떤대상을제공할것인지가명확해야하며, 그로

인해얻는이득이무엇인지를생각해보아야한다.

② 홈 페이지는Loading 속도가빨라야한다.

내용을기다리지않고빨리볼 수 있도록해야한다.

③ 홈 페이지는보기좋아야한다.

그래픽과프로그램을적절히사용하여목적을정확히전달하고이미지화시킨다.

④ 홈 페이지홍보는많이할수록좋다.

아무리 좋은 홈 페이지라도 다른 사람들이 모르고 찾아오지 않는다면 아무런

소용이없겠지요. 홍보하고광고하여많은사람이찾아오게해야한다.

⑤ 홈 페이지는바꿔주어야한다.

일년이 지나도 바뀌지 않는 홈 페이지는 새로운 정보를 제공한다고 할 수 없

다. 새로운정보로업그레이드를하지않으면사람들은찾아오지않는다.

⑥ 홈 페이지의제작원리

홈 페이지는 H T M L이라는 언어를 이용해서 만들어진 여러 문서로 연결되어

있으며, 이러한HTML 문서는익스플로러, 넷스케이프와같은웹 브라우저를통

보/임/마/당

256 ● 정보사회와 컴퓨터

>>> 4. 홈페이지 만들기

257V. 가상 세계로의 여행 ●

하여제작된결과를볼 수 있다. HTML 기술에대한개발과표준의정립은W 3 C

( World Wide Web Consortium : http://www. w 3 . o r g )에서하고있다.

홈 페이지를만들기위한준비

(1) 홈페이지구조

(2) 사이트구조도(Site Map)

홈 페이지의연결구조를간단하게파악할수 있도록작성한m a p을 말한다.

(3) 스토리보드( S t o ry B o a rd )

홈 페이지나 학습용 프로그램 등을 만들 때, 스토리보드 용지에 각 화면의 색

상, 배경, 내용, 파일이름, 메뉴, 이미지, 사운드, 연결상태등을 상세하게명

시하도록한 것이다.

순차구조

[메모장]

[나모]

격자구조 네트워크구조 계층구조

자습서5-4 1904.2.19 3:32 AM 페이지256

3

2

1

자주사용하는기본태그

① Ta g라는명령어사용

② < Ta g명> . . . . . . < / Ta g명>의 한쌍으로 구성. 그러나 단독 < Ta g명>으로 사용되

기도한다(예⃞ <br>, <P> 등) .

③ Ta g는 대소문자를구분하지않는다.

④ 별도의공백문자사용( & n b s p ; )

형식 구성 설명

< H n > < H n > . . . < / H n >표제부분글자 크기정의.

1 ~ 6까지의숫자를사용

< ! - . . . - > < ! -주석내용- > 주석을달때사용

< P > < P > 문단을바꾸는태그

< B R > < B R > 줄바꿈

< P R E > < P R E > . . . < / P R E > 여백이나줄간격등을고정

HTML 문서저장하기와열기

HTML 문서를 저장할 때, 파일의 확장자는‘h t m l’또는‘h t m’이다. 그리고

HTML 문서를열 때는웹 브라우저에서[파일] - [열기]를선택하면된다.

>>> 4. 홈페이지 만들기

259V. 가상 세계로의 여행 ●

보/임/마/당

258 ● 정보사회와 컴퓨터

2 H T M L과 나모웹 에디터의이해

H T M L이란?

HTML(Hyper Text Markup Language) : 하이퍼 텍스트또는하이퍼미디

어 문서를 만들기 위한 언어라는 뜻으로서 태그( Ta g )라는명령어를 사용하여

다양한멀티미디어데이터를표현한다.

<HTML>

<HEAD>

<TITLE>

제목

</TITLE>

</HEAD>

<BODY>

본문

</BODY>

</HTML>

문서의 시작

문서의 머리 부분

문서의 제목 부분

문서의 본문 부분

문서의 종료

자습서5-4 1904.2.19 3:32 AM 페이지258

•b o r d e r에 지정된 숫자에 따라

표의테두리두께가달라진다.

숫자를 생략한 경우에는 1이

된다.

•c e l l s p a c i n g은셀사이의간격

이다.

•w i d t h는 표 전체의 폭으로 %

인 경우 창 전체에서의 크기가

되고 숫자만 지정한경우 지정

된숫자의픽셀 크기가된다.

홈 페이지에는 그림 파일의 크기

가 작은 g i f나 jpeg 형식의 그림

을 주로사용한다.

3

H T M L에서 색상은 y e l l o w와 같

이 색상명이나, #ffff00과 같이

RGB(Red, Green, Blue)에 해

당하는1 6진수로나타낸다.

H T M L에서의색상

s i z e는 1 ~ 7까지지정할수 있고,

숫자가 클수록 글자의 크기가

크다.

글자의크기

2

1

<body bgcolor=yellow>...</body>배경색을노랑으로지정한다 .

<body bgcolor=“#ffff00”>...</body>

>>> 4. 홈페이지 만들기

261V. 가상 세계로의 여행 ●

보/임/마/당

260 ● 정보사회와 컴퓨터

그림넣기태그

홈 페이지에이미지를넣기위한태그와옵션은다음과같다.

<IMG SRC =“그림1.jpg”ALIGN=LEFT WIDTH=“372”HEIGHT=“165”>

기본태그 옵션 설명

< I M G S R C =“

A L I G N 그림을왼쪽, 가운데, 오른쪽정렬한다.

그림파일이름”>W I D T H 그림의폭을 지정한다.

H E I G H T 그림의높이를지정한다.

표 만들기태그

웹페이지제작시자료들을 도표나목록의형태로나타낼때 사용하는태그다.

(1) TABLE 태그의사용예

<TABLE border cellpadding=“3”c e l l s p a c i n g =“0”w i d t h =“9 7 %”b o r d e r c o l o r =

“#FFB099”>.....</TABLE>

< H T M L >

< H E A D >

< T I T L E > 2학년 2반< / T I T L E >

< / H E A D >

<BODY BGCOLOR=“# F F C C 9 9”>

< C E N T E R >

<FONT SIZE=6>2학년 2반 사이버 학

급< / F O N T >

< B R > < B R > < B R >저희 홈 페이지를 찾아

주신 것을 환영합니다.

< B R > < B R >

<IMG SRC=“학급 소개. j p g”W I D T H =

“3 7 2”H E I G H T =“1 6 5”>

< / C E N T E R >

< / B O D Y >

< / H T M L >

3 홈 페이지만들기

글자입력하기와배경꾸미기

(1) 글자및 배경꾸미기관련태그

배경색을지정하기 위해서는<body>...</body> 태그를사용하며, bgcolor라는

옵션을사용하면배경색을다양하게지정할수 있다.

글자를 입력하고꾸미기 위해서는 <font>...</font> 태그를사용하며, size라는

옵션을 사용하면글자의크기를조절할수 있다.

<font size=6>2학년 2반사이버학급 < / f o nt >“2학년 2반 사이버 학급”문자

열을글자크기 6으로지정한다

< H T M L >< H E A D >< T I T L E > 2학년 2반< / T I T L E >

< / H E A D ><BODY BGCOLOR=“# F F C C 9 9”>< C E N T E R ><FONT SIZE=6>2학년 2반 사이버 학급< / F O N T >< B R > < B R > < B R >저희 홈 페이지를 찾아 주신것을환영합니다.< / C E N T E R >

< / B O D Y >< / H T M L >

<TABLE BORDER>

<TR>

<TD>...</TD>

<TD>...</TD>

</TR>

</TABLE>

테두리가 있는 표를 만드는 태그

표의 줄을 만드는 태그(Table Row)

<TR>...</TR> 태그 사이에 넣어야 하며,

셀의 데이터에 해당하는 기능(Table Data)

을 한다.

자습서5-4 1904.2.19 3:32 AM 페이지260

4

<TD> 태그 내에도 W i d t h나

Height 등의 옵션을 주어 폭이

나 높이를지정할수 있다.

표를이루고 있는각 칸을셀이라

고 한다. 셀을 선택하는 방법은

칸 속의 커서에 마우스를 누르고

움직이거나 칸 속의 커서에서 마

우스오른쪽 버튼을눌러셀 선택

을 누르면된다.

셀( C e l l )

>>> 4. 홈페이지 만들기

263V. 가상 세계로의 여행 ●

(2) 셀의합침

•C O L S P A N =“n”

가로부분의셀을n개만큼씩합친다.

•R O W S P A N =“n”

세로부분의셀을n개만큼씩합친다.

보/임/마/당

262 ● 정보사회와 컴퓨터

하이퍼링크태그

하이퍼링크(hyperlink) : 서로다른문서와 문서또는동일한문서내부에서서

로를연결하여이동할수 있는태그를하이퍼링크라한다.

<A href=“URL 또는상대경로”target=“링크되기를원하는부분”> ... </A>

절대경로상대경로

U R L 절대경로

h t t p : / / w w w . y a h o o . c o . k r C :₩W i n d o w s₩F o n t s . . / b o o k / t e s t . h t m

h t t p : / / i s c h o o l . p e . k r / t o p / t o p . h t m/ u s r / l o c a l / b i n / p e r l / i m a g e s / t e s t . g i f

웹사이트의주소 루트디렉토리에서 자신(현재문서)의위치를

기준으로

주소하위디렉토리명포함 시작한경로의총괄상위디렉토리, 하위

디렉토리구분

다른웹사이트와의연결에 CGI 설치시주로이용됨홈페이지내에서의

연결에주로이용됨

다른문서로의하이퍼링크의예 설명

<A HREF=“c y b e r . h t m”> . . . < / A >“. . .”부분을클릭하면“c y b e r .

h t m”문서파일로이동한다.

<A HREF=“. /학습창고/논리창고. h t m”> ...</A>

“. . .”부분을클릭하면현재의

하위폴더인‘학습창폴더에

있는‘논리창고. h t m’문서

파일로이동한다.

<A HREF=“h t t p : / / w w w . e d u n e t 4 u . n e t”> ...</A>

“. . .”부분을클릭하면“h t t p :

//www.edunet4u. net”

주소로이동한다.

책갈피/메일주소로하이퍼링크의예 설명

<A HREF=“# t o p”> . . . < / A >“. . .”부분을 클릭하면동일문서에서t o p이라

는 이름으로지정된곳으로이동한다.

<A HREF=“M A I L T O : m a s t e r @“. . .”부분을클릭하면받는사람의전자우편

edunet 4u.net”> . . . < / A >주소가“m a s t e r @ e d u n e t 4 u . n e t”으로기록된

상태로전자우편전용프로그램이실행된다.

<TD ROWSPAN=2> 오른쪽세로

부분의 칸이 2개이므로 2칸을 합

치면된다.

<TD COLSPAN=2> 아래가로 부

분의 칸이 2개이므로 2칸을 합치

면 된다.

자습서5-4 1904.2.19 3:32 AM 페이지262

작성한 HTML 문서를 I S P의 웹

서버에 전송하는 것을 인터넷 출

판이라한다.

인터넷출판

1

5

>>> 4. 홈페이지 만들기

265V. 가상 세계로의 여행 ●

4 사이버공간에우리반 입주하기

FTP 프로그램이용하기

일반적으로I S P의 웹 서버에웹 문서를전송할때는FTP 프로그램을많이이

용한다. 그 중 많이 사용되고 있는 WS_FTP 프로그램의사용 방법에 대하여

알아보자.

(1) FTP 사용법

① FTP 프로그램을실행한다.

보/임/마/당

264 ● 정보사회와 컴퓨터

프레임과프레임셋태그

(1) 프레임( f ra m e )

웹 브라우저의창을수직이나 수평 방향으로한 번 또는여러번 나눌수 있는

데, 그각각의창을말한다.

(2) 프레임셋( f ra m e s e t )

프레임의 개수와 배열, 각각의 프레임에 대한 이름이나 크기, 속성 등과 같은

프레임정보를가지고있는HTML 문서다.

기본적인프레임형식

복합분할프레임 예제

위쪽프레임

왼쪽프레임 오른쪽프레임

복합적프레임 예제

TARGET 등을이용한프레임

자습서5-4 1904.2.19 3:32 AM 페이지264

2

267V. 가상 세계로의 여행 ●

② FTP 서버의사용자홈 페이지영역에접속한다.

•Profile Name : ISP 이름을입력한다.

•Host Name/Address : FTP 서버주소를입력한다.

•User ID, Password : ‘I D’와‘비밀번호’를 입력한다.

③ [확인] 버튼을클릭하면접속된다.

검색엔진에홈 페이지홍보하기

인터넷의 검색 엔진 사이트에 작성한 홈 페이지를 등록하여야만 네티즌들이

홈 페이지를이용할 수 있다. 검색 엔진에 우리반 홈 페이지를 등록하는과정

은 다음과같다.

검색엔진에우리반 홈 페이지를등록시켜보자.

① 등록할검색엔진에접속한다.

② 홈 페이지를등록한다.

•우리반 홈 페이지가등록될가장적합한카테고리를찾는다.

•등록할 카테고리 페이지의 아래쪽에 있는 [홈 페이지 등록]을 클릭하면,

등록양식페이지가나타난다.

•등록 페이지의양식에 따라필요한 내용을입력하고, [등록확인] 버튼을

클릭한다.

③ 등록을확인한다.

등록이 완료되었다는메시지가 나타나면, 홈페이지 등록이 정상적으로완

료된것이다.

보/임/마/당

266 ● 정보사회와 컴퓨터

0 1 HTML 문서안에여러개의공백( S p a c e )을삽입할때사용하는특수문자코드는무엇인가?

02 HTML 태그중에서줄과줄 사이에문단구분이없이단순히줄바꾸기역할을하는것은?

03 가로부분의셀을합칠때 사용하는태그는?

04 웹 문서전용편집기의장점은?

05 스토리보드란?

06 홈 페이지제작순서에대해서술하시오.

07 전자우편주소를하이퍼링크하는방법에대하여서술하시오.

08 웹 문서파일의확장자는?

09 다음표를정의한HTML 문서가웹 브라

우저를 통해 나타나는 모양을 그림으로

그려보시오.

10 홈페이지에“안녕하세요”라는 글자를 쓰고 w w w . s a m y a n g m . c o m이라는 곳에 있는

“i n d e x . h t m l의 문서에링크시키고자한다. 이때필요한HTML 태그를작성하시오.

AB

C

D E

< h t m l >

<table border>

< t r >

<td> A </td>

<td rowspan=2> B </td>

<td> C </td>

< / t r >

< t r >

<td> D </td>

<td> E </td>

< / t r >

< / t a b l e >

< / h t m l >

해설

<a href=“h t t p : / / w w w . s a m y a n g m .c o m / i n d e x . h t m l”>안녕하세요? < / a >

주관식진단평가

자습서5-4 1904.2.19 3:32 AM 페이지266

269V. 가상 세계로의 여행 ●

>>> 4. 홈페이지 만들기

268 ● 정보사회와 컴퓨터

07 H T M L에 대한설명으로틀린것은?

① H T M L은 HyperText Markup Language의약자다.

② HTML 파일을 이용하면 그래픽, 사운드, 동영상과 같은 멀티미디어 요소도

링크할수 있다.

③ HTML 파일은 다른 문서들과 링크가 가능하지만, 같은 문서 내에서는 링크

할 수 없다.

④ H T M L에서하이퍼텍스트(링크)와관련되어사용되는태그는< A >태그다.

⑤ 웹 문서에서DHTML 도사용가능하다.

08 다음중 표의줄( r o w )을 만드는태그는?

① <table> ②<tr> ③< t d >

④ <colspan> ⑤ < r o w s p a n >

09 홈 페이지작성시<BODY> 태그내에서문서의전반에걸친 설정을할 수 있다. 문서내

에서하이퍼링크된문자들에대한설정중 이미방문한사이트에대한 설정을해 주는속

성은?

① vlink ②alink ③l i n k

④ plink ⑤b l i n k

10 F T P에 관한설명으로틀린것은?

① 특정시스템에서다른시스템으로파일을송·수신하기위한프로토콜이다.

② 사용자에게서비스를제공하는컴퓨터를FTP 서버라고한다.

③ 대표적인프로그램으로는WS_FTP, AlFTP 등이있다.

④ 사용자 계정에 접속하고자 할 때의URL 표기형식은“f t p : / /비밀번호:사용자

I D @ w w w호스트이름”이다.

⑤ 파일들끼리전송되는인터넷 서비스 규약이다.

11 HTML 문서에서‘S e a r c h e r . g i f’라는 그림 파일을 삽입한 후 이 그림‘h t t p : / / w w w .

r o s y . o r . k r’로 링크하려고할 때의올바른태그는?

① <a href=“h t t p : / / w w w . r o s y . o r . k r”><img src=“S e a r c h e r . g i f”> < / a >

② <img src=“S e a r c h e r . g i f”><a href=“h t t p : / / w w w . r o s y . o r . k r”> < / a >

③ <a link=“h t t p : / / w w w . r o s y . o r . k r”><img src=“S e a r c h e r . g i f”> < / a >

④ <img src=“S e a r c h e r . g i f”><a link=“h t t p : / / w w w . r o s y . o r . k r”> < / a >

⑤ <a link=“S e a r c h e r . g i f”><a href=“h t t p : / / w w w . r o s y . o r . k r”> < / a >

해설

정답:③

해설

정답:②

해설

정답:①

해설

정답:④

해설

정답:①

01 일반적인HTML 문서의시작과끝을나타내는태그는?

① <html> </html> ②<head> </head>

③ <body> </body> ④<title> </title>

⑤ <a href> </a>

02 F T P에 대한설명으로틀린것은?

① F T P는 파일을 송•수신하기위한통신규약이다.

② 아스키형식과 바이너리형식모두전송이 가능하다.

③ FTP 전용프로그램에는WS_FTP 등이있다.

④ Anonymous FTP 서버는해당서버의 계정이있어야 접속할수 있다.

⑤ 웹 브라우저에서도F T P를 이용할 수 있다.

03 HTML 태그에대한설명으로틀린것은?

① 태그에의해만들어진문서는 웹 브라우저를통해서그 구조를볼 수 있다.

② 대•소문자 구분이없다.

③ 색상은 RGB Hex 코드만을사용한다.

④ 문단나누기를할 경우<p> 태그를사용한다.

⑤ 자바 스크립트나애플릿도사용가능하다.

04 멀티미디어파일확장자중 이미지파일이아닌것은?

① pcx ②jpg ③wav ④bmp ⑤g i f

05 새로운창을만들어하이퍼링크된문서를보고자한다. 이때사용할속성은?

① T A R G E T =“_ b o t t o n” ② T A R G E T =“_ t o p”

③ T A R G E T =“_ s e l f” ④ T A R G E T =“_ p a r e n t”

⑤ T A R G E T =“_b l a n k”

06 홈페이지를소유하고있는사람이지켜야할 네티켓으로틀린것은?

① 갱신된 날짜를표시한다.

② 저작물에대한저작권도명시한다.

③ 외부정보를 포함할경우에는출처를밝히지 않는다.

④ 제작자의전자우편과제작자에관련된 정보를표시한다.

⑤ 갱신은 가능한한자주한다.

해설

정답:①

해설

정답:④

해설

정답:③

해설

해설

정답:⑤

해설

정답:③

진단평가

HTML 문서의 시작과 끝은 < h t m l > ~< / h t m l >로나타낸다.

Anonymous FTP만 계정이 없어도접속할 수있다.

HTML 문서에서 색상은 RGB 16진수 코드뿐만 아니라 색상명을 사용할수 있다.

w a v는 음성파일의 확장자다.

•-self :현재창에 나타내기

•-blank :비어있는 새로운 창에나타내기

외부 정보를 포함할 경우에는 출처를명시하여야한다.

정답:③

같은 문서 내에 이름을 정리해 두고링크할 수있다.

표에서 줄을만드는 태그는 < t r >이다.

④에서 비밀번호와 사용자 I D가 바뀌었다.

<a href> 태그로 이동될 위치를 지정하고, <img src> 태그로 그림 파일을 지정한다.

•alink :링크될때 색상

•link :링크되는문자의색상

자습서5-4 1904.2.19 3:32 AM 페이지268

271V. 가상 세계로의 여행 ●

>>> 4. 홈페이지 만들기

270 ● 정보사회와 컴퓨터

확/인/마/당

17 H T M L을 이용하여만든웹 페이지들중 가장처음에접속되는웹 페이지를무엇이라하

는가?

① 웹페이지 ② 홈페이지 ③ 웹사이트 ④ 인터넷사이트 ⑤ 웹 에디터

18 홈페이지의개설목적이아닌것은?

① 개인의홍보 ② 기업의홍보 ③ 제품의 판매

④ 학습자료제공 ⑤ 상용소프트웨어무료공급

19 홈페이지제작시고려사항이아닌것은?

① 개설목적이분명하여야한다. ② Loading 속도가빨라야 한다.

③ 디자인이좋아야 한다. ④ 색상이매우다양해야한다.

⑤ 쉽게정보를찾을수 있어야한다.

20 홈페이지의연결구조를간단하게파악할수 있도록작성한m a p을 무엇이라하는가?

① 사이트구조도(site map) ②스토리보드

③ 홈페이지구조 ④ 홈페이지연결도

⑤ 스토리연결도

21 다음table 태그중, 가로칸을합칠때 사용하는태그는?

① rowspan ②colspan ③align ④valign ⑤b o r d e r

22 다음table 태그중 세로칸을합칠때 사용하는태그는?

① rowspan ②colspan ③align ④valign ⑤b o r d e r

23 다음태그중 공백을나타낼때 사용하는태그는?

① pre ②p ③br ④body ⑤& n b s p ;

24 웹 브라우저의창을수직이나수평방향으로한 번 또는여러번 나눌때 사용하는태그는?

① body ②blink ③pre ④frame ⑤t a b l e

25 프레임의개수와배열, 각각의프레임에대한이름이나크기, 속성등과같은프레임정보

를 가지고있는태그는?

① body ②blink ③pre ④frameset ⑤t a b l e

해설

정답:②

해설

정답:⑤

해설

정답:④

해설

정답:①

해설

정답:②

해설

정답:①

해설

해설

정답:④

12 HTML 태그에대한설명으로틀린것은?

① <hr> : 세로선 긋기 ② <blockquote> : 인용문

③ <center> : 가운데정렬 ④ <title> : 웹 페이지의제목

⑤ <table> : 표 만들기

13 웹 기반의프로그래밍언어로적당하지않은것은?

① HTML ②CGI ③J A V A

④ COBOL ⑤A S P

14 웹 문서에서문서간의연결을하고자한다. 연결하고자하는 문서명이“s c h o o l . h t m l”이

라고할 때, 올바르게태그를작성한것은?

① <A href=“s c h o o l . h t m l”>학교< / A >

② <A href=school.html>학교< / A >

③ <Link href=“s c h o o l . h t m l”>학교</A>

④ <Link href=school.html>학교</A>

⑤ <A href=school.html>“학교”< / A >

15 HTML 작성방법에대한설명으로맞는것은?

① HTML 문서의태그는 대소문자를구별한다.

② H T M L의 주석문은< # - - - - - >로 표기한다.

③ HTML 문서 작성시 특정 태그의 기능을 제외하고 나머지 부분은 문자 사이

의 공백을 한 칸 이상 작성할 경우 한 칸으로 인식된다. 또한, Enter를사용

하여줄 분리를하였을 경우도공백한 칸으로 처리한다.

④ H T M L의 주석문은사용하지않는것이바람직하다.

⑤ 메인페이지문서는 m a i n . h t m l로 하는것이좋다.

16 HTML 태그에대한설명으로틀린것은?

① <a href=“i n d e x . h t m l”>gha</a> : index.html 문서를연결시키는태그이다.

② <hr> : 줄바꾸기태그로한글에서E n t e r와 같은역할을 한다.

③ <IMG src=“a . g i f”a l t =“정보”> : 이미지삽입태그다.

④ <Frameset cols=50%,50%”></Frameset> : 화면을 좌우로 5 0 : 5 0으로 나누

는 태그다.

⑤ <a href=“m a i l t o : m a s t e r @ e d u n e t 4 u . n e t”>...</a> : . . .를 클릭하면 전자 우편

주소m a s t e r @ e d u n e t 4 u . n e t으로메일을보낼수 있는창이나타난다.

해설

정답:①

해설

정답:④

해설

정답:①

해설

정답:③

해설

정답:②

해설

정답:④

<hr> 태그는 가로선을 긋는데 사용된다.

C O B O L의 웹 기반이 아닌 전통적인상업용 언어다.

문서의 연결에는<a href>와 < / A >로묶어주어야 한다.

HTML 문서는 대소문자를 구별하지않고, 주석은 < #- - - - ->로 표기한다. 주석문은 가극적 자주 사용하여프로그램을이해할수 있도록 한다. 메인 페이지문서는 대부분 i n d e x . h t m l이나 i n d e x . h t m으로 지정한다.

<hr> 태그는 수평선을 긋는데 사용된다.

웹 페이지에서 가장 먼저 접속되는페이지를 홈페이지라한다.

홈 페이지에서 상용 소프트웨어를 무료 공급하면법적인제재를받는다.

다양한 색상보다는 통일감있고 간단한 색상으로나타내는것이좋다.

연결 구조는 사이트 구조도로 파악한다.

가로셀들은c o l s p a n으로 설정한다.

세로칸을 합칠 때에는 r o w s p a n으로설정한다.

공백은 & n b s p ;으로나타내야 한다.

창을 나눌 때에는 프레임 태그를 사용한다.

각 프레임에 대한정보는< f r a m e s e t >태그에 지정된다.

정답:⑤

자습서5-4 1904.2.19 3:32 AM 페이지270