|
1.1 HTML의 개요와 특징
●1989년도에 CERN에 있던 팀 버너스 리에 의해 개발 되었고 1991년 그가 개발한 웹 브라우저에서 텍스트 형태로 인터넷에 표현 되었다. W3C(http://www.w3c.org)에 의해 표준화 되었고, 현재 HTML4.0 버전이 표준으로 채택되어 사용 되고있다.
※HTML의 특징
①사용자의 편의를 위해 대소문자를 구별하지 않는다.
②웹 브라우저에서 자체적으로 기계어로 변환, 해석하므로 별도의 컴파일이 필요 없다.
③공백([Space Bar]키)이나 줄바꿈([Enter]키)이 중복하여 여러 번 나타날 경우 입력 오류로 받아들여 하나의 공백으로 인식하거나 줄바꿈을 무시한다.
④HTML에서 사용되는 명령어인 태그(Tag)로 이루어 있다.
⑤웹 서버나 사용자 컴퓨터에서 사용하는 운영체제 및 컴퓨터 기종에 관계없이 표현할 수 있다.
⑥간단한 작성법을 익히고 메모장을 비롯한 텍스트 편집기를 이용, 쉽게 작성하고 구현할 수 있다.
1.2 HTML 문서 편집기
(1)텍스트 편집기
●HTML을 직접 텍스트로 작성할 수 있는 편집도구 이며 윈도우에 포함되어있는 메모장(Not Pad)이 대표적이며, AcroEdit, UleraEdit, NoteTab Linght 등이 있다.
(2)웹 편집기
●각종 도구를 이용해 웹페이지를 작성하고 편집하는 프로그램으로써 자동으로 HTML문서를 작성할 수 있다.
●나모웹 에디터, 드림위버 가 대표적이며 그밖에 프론트 페이지, 고라이브 등이 있다.
2.1 HTML의 구성과 작성법
(1)HTML의 구조
(2) HTML의 작성 방법
①태그의 구분: 태그는 다른 텍스트와 구별되는 명령어이므로 “< >” 기호를 이용하여 구분한다.
②태그의 시작과 끝: 시작 태그는 <tag>와 같은 형식을 갖고, 종료 태그는 “ / “ 를 삽입하여 </tag>와 같이 표시함
③줄과 공백 부분: HTML에선 줄과 공백을 키보드의 [Enter],[Space Bar]키로 표현이 안되므로 <p>, <br>, 와 같은 별도의 태그를 사용한다.
④문서의 저장: 확장자 명을 .htm이나 .html로 저장해야 한다.
⑤태그의 중복: 태그안에서 다른 태그를 쓸경우 이전에 사용했던 태그에 대한 종료 태그 이전에 마감한다.
⑥태그의 속성: 태그에 따라 크기, 색상, 위치, 이미지 등 다양한 의미를 갖는다.
⑦태그의 인수: 태그 속성에 대한 구체적인 값을 표현할 때 사용함
⑧색상의 표현: 영문 색상이름을 직접 이용하거나, RGB형식을 표현하기 위한 16진수 6자리로 표현함
⑨주석: 웹 브라우저 상엔 나타나지 않지만 추후 유지보수를 위한 설명을 입력해 놓은 문구
⑩들여쓰기: 태그와 태그에 대한 구분이 쉽게 일정 간격으로들여쓰기 하는게 편하다
⑪CSS와 JavaScript: 문서의 표준 스타일을 위한 CSS 동적인 효과를 위한 JavaScript를 HTML에 포함시켜 구현할 수 있음
(3) HTML 작성시 주의사항
①태그명 입력오류
②종료태그 미입력
③태그의 표시와 입력 순서
④인수의 따옴표
⑤태그와 맞는 속성
⑥파일명의 대소문자
2.2 HTML 문서의 작성 단계
①[시작]→[프로그램]→[보조프로그램]에 ‘메모장’을 선택하여 실행한 후 HTML문서를 작성한다.
②파일 이름을 입력하고 확장자를 “.htm”으로 지정 후 저장한다
③제목 표시줄에서 저장된 파일명을 확인하고 종료한다.
④HTML파일을 저장시킨 위치에서 해당파일을 실행시키고 메모장에서 입력한 내용이 웹 브라우저에서 올바르게 표현되는지 확인한다
===========================================
1.1 기본 문장 작성
(1) 줄 바꾸기
<br>태그는 “line BReak”의 의미로 문장을 강제로 줄바꿈 할
때 사용하며, 구분된 줄 사이의 간격은 붙어있는 상태이다.
종료 태그가 필요 없다.
<html>
<head>
<title>줄바꿈 태그</title>
</head>
<body>
줄바꿈 태그를 사용하지 않고 계속 입력할 경우에는 웹 브라우저의 폭 넓이에서 자
동으로 줄이 바뀌어 표시되며, 원하는 위치에서는 적절하게 줄을 바꾸어 주는 것이 바람직하
다. 이곳까지 연속 입력 상태이다.<br>
enter키는 메모장에서 보기 편한 상태로 작업하기 위한 조치이며,<br>
웹 브라우저에서는 enter 키에 대한 결과가 표현되지 않는다.<br><br><br>
줄바꿈 태그를 이용하여 여러줄의 공백을 표현할 수 있다.
</body>
</html>
줄바꿈 태그(<br>태그)를 적용시킨 모습
(2) 문단 바꾸기
●<p>태그는 <br>태그와 달리 다음 문단과 하나의 빈 줄 여백을 표현, 단순히 줄을 바꾸는 것이 아닌 문단을 구분하는 역할을 수행하는 태그이다.
<html>
<head>
<title>문단바꿈 태그</title>
</head>
<body>
문단바꿈 태그를 사용했을 때<p>
줄이 바뀌면서 빈줄이 삽입되어 표현된다.<p>
이에 비해 줄바꿈 태그는<br>
줄이 바뀌지만 빈줄이 표시되지 않고, 문단은 계속 유지된다.
</body>
</html>
문단 바꿈 태그(<p>태그)를 적용시킨 모습
1.2 다양한 입력방식
(1) 기호문자 표시
●공백을 비롯한 <,>,”,”,&등의 문자는 태그명령어나 인수를 다른 텍스와 구분하는 역할을 담당하기 때문에 그대로 사용할 수 없다. 그래서 이러한 기호들은 ISO Latin-1 Character Set 이라는 정해진 문자세트 값을 이용하여 표현 한다.
<html>
<head>
<title>기호 문자 표현</title>
</head>
<body>
하나의 공백은 "spacebar키"로 구분할 수 있다.<p>
하나 이상의 여러개의 공백은 spacebar
키로 구분할 수 없다.<p> 또한 <enter>키를 아무리 눌러도 줄은 변하지 않는다. <p>
&나 ©, £, ¢ 등의 다른 문자와 구별하거나 키보드로 표현할 수 없
는<br> 다양한 기호들은 별도로 표현해야 한다.
</body>
</html>
(2) 입력 상태 표시 태그
●<pre>: 태그범위 내에 포함되어 있는 태그들은 원래의 역할을 수행
<html>
<head>
<title>기호 문자 표현</title>
</head>
<body>
<pre>
하나의 공백은 "spacebar키"로 구분할 수 있다.<p>
하나 이상의 여러개의 공백은 spacebar
키로 구분할 수 없다.<p> 또한 <enter>키를 아무리 눌러도 줄은 변하지 않는다. <p>
</pre>
<xmp>
&나 ©, £, ¢ 등의 다른 문자와 구별하거나
키보드로 표현할 수 없는<br> 다양한 기호들은 별도로 표현해야 한다.
</xmp>
</body>
●<xmp>: 범위 내에 포함되어 있는 태그 명령 자체를 표현
2.1 텍스트의 표현
(1)<font>태그
●글자와 관련된 속성을 부여하며, 텍스트를 다양한 형태로 표현하기 위해 사용됨
2.1 텍스트의 표현
(1)<font>태그
●글자와 관련된 속성을 부여하며, 텍스트를 다양한 형태로 표현하기 위해 사용됨
①글자크기
<html>
<head>
<title>글자 크기</title>
</head>
<body>
<font size=“6”><초 혼></font><p>
김 소 월<p>
<font size=“7”>산산히 부서진 이름이여!<br></font>
<font size=“6”>허공중에 헤어진 이름이여!<br></font>
<font size=“5”>불러도 주인없는 이름이여!<br></font>
<font size=“4”>부르다가 내가 죽을 이름이여!</font></p>
<font size=“4”>심증에 남아있는 말 한 마디<br></font>
<font size=“3”>끝끝내 마저 하지 못하였구나.<br></font>
<font size=“2”>사랑하는 그 사람이여!<br></font>
<font size=“1”>사랑하던 그 사람이여!</font>
</body>
</html>
②글자 색상
<html>
<head>
<title>글자 색상</title>
</head>
<body>
<font size=“6”color=“purple”><초 혼></font><p>
<font color=“lime”>김 소 월</font><p>
<font size=“7”color=“orange”>산산히 부서진 이름이여!<br></font>
<font size=“6”color=“cyan”>허공중에 헤어진 이름이여!<br></font>
<font size=“5”color=“navy”>불러도 주인없는 이름이여!<br></font>
<font size=“4”color=“skyblue”>부르다가 내가 죽을 이름이여!</font><p>
<font size=“4”color=“#b22222”>심증에 남아있는 말 한 마디<br></font>
<font size=“3”color=“#90ee90”>끝끝내 마저 하지 못하였구나.<br></font>
<font size=“2”color=“#ff6347”>사랑하는 그 사람이여!<br></font>
<font size=“1”color=“#4169e1”>사랑하던 그 사람이여!</font>
</body>
</html>
●③글꼴
<html>
<head>
<title>글자 색상</title>
</head>
<body>
<font size=“6”color=“purple”face=“HY예서M”><초 혼></font><p>
<font color=“lime”face=“궁서”>김 소 월</font><p>
<font face=“휴먼옛체”><font size=“7”color=“orange”>산산히 부서진 이름이
여!<br></font>
<font size=“6”color=“cyan”>허공중에 헤어진 이름이여!<br></font></font>
<font face=“휴먼매직체”><font size=“5”color=“navy”>불러도 주인없는 이름이
여!<br></font>
<font size=“4”color=“skyblue”>부르다가 내가 죽을 이름이여!</font></font><p>
<font face=“서울도시”><font size=“4”color=“#b22222”>심증에 남아있는 말 한 마디
<br></font>
<font size=“3”color=“#90ee90”>끝끝내 마저 하지 못하였구나.<br></font></font>
<font face=“HY센스L”><font size=“2”color=“#ff6347”>사랑하는 그 사람이여!<br></font>
<font size=“1”color=“#4169e1”>사랑하던 그 사람이여!</font></font>
</body>
</html>
● 태그
(2) 텍스트 효과
●<font>태그와는 별도의 태그를 사용해야 함.
●텍스트 효과에 대한 태그를 중복시켜 동일한 텍스에 여러 효과를 적용시킬 수 있다.
●종료 태그를 사용하여 효과를 적용할 대상을 설정해야 함
<html>
<head>
<title>글자 효과</title>
</head>
<body>
<font size=“4”>
중요한 부분은 글자를 <b>진하게</b> 표시합니다.<p>
자료를 인용할 때에는 <i>이탤릭체</i>로 표시합니다.<p>
강조하고자 할 때에는 <u>밑줄</u>로 표시합니다.<p>
텍스트 내용을 취소할 때에는 <s>취소선</s>으로 표시합니다.<p>
수학식에서는 <sup>윗첨자</sup>나 <sub>아랫첨자</sub>를 사용합니다.
</font>
</body>
</html>
2.2 제목의 표현
●<Hn>형식을 이용한다.
●n은 1~6까지의 인수를 가질 수 있다.
<font>태그의 size속성과는 반대로 숫자가 커질수록 글자의 크기가 작아진다.
<html>
<head>
<title>제목 태그</title>
</head>
<body>
<h1>제목 태그는</h1>
<h2>문서의 제목을</h2>
<h3>별도로 표현하기에 적합하고</h3>
<h4>자동으로 문단이 구분된다.</h4>
<h5>문서 각 항목에 맞도록</h5>
<h6>태그의 인수를 변경하여 사용한다.</h6>
</body>
</html>
●제목태그를 사용했을 경우 자동으로 문단이 바뀌므로 <p>,<br>태그를 사용하지 않는다.
2.3 문단 태그
(1) 문단 정렬
●<p>태그로 구분된 텍스트를 의미하여 태그의 속성을 이용하여 웹 브라우저에서 일정한 기중에 의해 정렬시킬 수 있다.
<html>
<head>
<title>문단 정렬</title>
<head>
<body>
<p align=“center”>제목이나 핵심은 가운데 정렬 시킨다.</p>
<p align=“right”>지은이나 소속 등은 오른쪽 정렬 시킨다</p>
<p align=“left”>기본적으로 텍스트는 왼쪽 정렬 되어 있다.</p>
내용이 길 경우에 왼쪽 정렬과 혼합 정렬의 차이점을 알 수 있다.</p>
<p align=“left”> 왼쪽 정렬 : 너에게 묻는다.(안도현)-연탄재 함부로 발로 차지 마라. 너
는 누구에게 한 번이라도 뜨거운 사람이었느냐.</p>
<p align=“justify”> 혼합 정렬 : 너에게 묻는다.(안도현)-연탄재 함부로 발로 차지 마라.
너는 누구에게 한 번이라도 뜨거운 사람이었느냐.</p>
</body>
</html>
2)들여쓰기
왼쪽 경계선에 일정한 여백을 두고싶을때 <blockquote>태그를 이용하며, 반복 사용할 경우 이용 횟수 만큼 공간을 확보한다.
<html>
<head>
<title>들여 쓰기</title>
</head>
<body>
<p align=“center”><font size=“6”>소금별</font></p>
<p align=“right”><font size=“5”>류시화</font></p>
<font size=“4”>
<blockquote><blockquote><blockquote><blockquote>
소금별에 사는 사람들은<br>
눈물을 흘릴 수 없네<br>
눈물을 흘리면<br>
소금별이 녹아 버리기 때문<p>
소금별 사람들은<br>
눈물을 감추려고 자꾸만<br>
눈을 깜박이네<p>
소금별이 더 많이 반짝이는 건<br>
그 때문이지
</blockquote></blockquote></blockquote></blockquote></font>
</body>
</html>
(3)수평선 표현
●<hr>태그를 이용. 문단이나 내용을 구분하기 위한 수평선을 표현할 수 있고, 속성을 설정하여 다양한 효과를 연출할 수 있음
●선의 폭은 픽셀/백분율 단위로 정할 수 있고, 백분율일 경우 웹 브라우저의 너비를 기준으로 정해짐
<html>
<head>
<title>수평 및 수직선</title>
</head>
<body>
<h2>n진수를 10진수로 변환</h2>
<hr align=“left”width=“80%”color=“red”><p>
(1) <b>2진수 101101</b>
<hr align=“left”size=“40”width=“540”><p>
(2) <b>8진수 2345</b>
<hr align=“size=“40”width=“70%”><p>
(3) <b>16진수 A37</b>
<hr align=“left”size=“40”width=“70%”><p>
<p align=“center”>[평가 결과]
<hr width=”30%”, size=“30”color=“#05ff05”>
</body>
</html>
2.4 목록 태그
(1)번호 목록
●<ol>태그로 선언하고 <li>태그로 추가함으로써 숫자나 알파벳의 정해진 순서대로 나열하는 형태를 갖음
<html>
<head>
<title>번호 목록</title>
</head>
<body>
<ol type=“1”>
<li>과일
<ol type=“a”>
<li>사과
<ol type=“i”>
<li>예산사과
<li>문경사과
<li>상주사과
</ol>
<li>배
<ol type=“I”>
<li>나주배
<li>먹골배
</ol>
</ol><p>
<li>야채
<ol type=“A”>
<li>감자
<li>호박
<li>오이
</ol>
</ol>
</body>
</html
(2) 기호목록
●기호목록은 <ul>태그로 선언하고 <li>태그로 추가함으로써 기호에 의해 목록을 구성하는 형태를 갖음
<html>
<head>
<title>기호 목록</title>
<head>
<body>
<ul>
<li>과일
<ul type=“square”>
<li>사과
<ul type=“circle”>
<li>예산사과
<li>문경사과
<li>상주사과
</ul>
<li>배
<ul type=“circle”>
<li>나주배
<li>먹골배
1.1 이미지의 삽입
<img src=“이미지의 경로 및 파일명”>
(1) 이미지의 삽입
<img>태그로 이미지 삽입을 선언하고, 반드시 src속성으로
이미지의 위치 및 파일명을 기입해야 함
●자신에게 할당된 홈페이지에 여유공간이 없을 때 다른 웹 페이지에 올려져 있는 이미지를 이용하는 것이 편하지만 원본 이미지가 올려져 있는 홈페이지가 변화될 경우 자신의 홈페이지에 영향을 준다.
(2) 이미지의 경로
자신의 컴퓨터에 저장되어 있는 이미지의 경로 표시를
절대적/상대적 위치로 표시한다.
●“C:/home/”폴더에는”image”폴더와”index.htm”문서파일이있다.
●“image”폴더에는”flower.jpg”이미지 파일이 포함되어 있다.
“flower.jpg”이미지 파일은 “index.htm”문서에 표시된다
●절대경로는 파일의 위치에 대한 드라이브와 폴더명을 모두 기입하지만, 상대경로는 “C:\home\”부분을 생략할 수 있다.
“홈페이지”폴더에있는”happy.gif”이미지파일을 “index.htm” 에서 참조한다고 가정할 때의 경로 표현
●경로나 파일명이 잘못되었을 경우 그림 위치에 오류표시가 표시되며, 이 경우에 참조한 URL이나 경로명 또는 파일명을 확인한다.
상대경로에 의한 그림삽입 형식
<html>
<head>
<title>이미지 삽입</title>
</head>
<body>
<img src=“image/flower.gif”>
<img src=“image/river.jpg”>
</body>
</html>
1.2 이미지의 변경
(1)이미지의 크기
이미지의 너비는 width, 높이는 height 속성을 사용하며, 인수는 픽셀이나 백분율 단위를 사용한다.
<html>
<head>
<title>이미지의 크기</title>
</head>
<body>
<img src=“image/flower.gif”width=”200”height=”150”>
<img src=“image/river.jpg”width=”60%”height=”60%”>
</body>
</html>
(2)이미지 정렬과 여백
●이미지를 웹 브라우저에 표현할 때 속성을 이용하여 정렬될 위치,텍스트와의 관계를 설정한다.
①이미지 정렬
<html>
<head>
<title>이미지의 정렬</title>
</head>
<body>
<img src=“image/jangsung.jpg”width=“70”height=“70”align=“left”>
홍길동은 전라남도 장성군을 대표하는 캐릭터로써, 해학과 풍자를 사랑하는 한국인의 전
통을 바탕으로 다양한 형태와 모양으로 개발되었다.<p><br><br>
<img src=“image/dragon.gif”width=“70”height=“80”align=“right”>
충청남도 계룡시에서는 용을 대표 상징으로 인식되어 왔으며, 위엄과 권위적 이미지에서
탈피한 친근하고 다정하며 진취적인 모습을 표현하고 있다.<p><br><br>
<img src=“image/jinan.gif”width=“70”height=“80”align=“top”>
전라북도 진안군의 마이용은 자연과 문화, 미래지향적인 비젼을 소개로한 캐릭터로써 자
신있게 엄지손가락을 들어 올린 모습은 살기 좋은 진안의 이미지를 형상화하였다.<p><br>
<img src=“image/haeuri.jpg”width=“60”height=“70”align=“middle”>
울산광역시의 캐릭터인 해울이는 거대한 태양(해)과 광역시중 가장 큰도시인 울산의 넓
고 광활한 이미지를 극대화한 이름으로 고래를 형상화하였다. <p><br>
<img src=“image/sudall.jpg”width=“70”height=“70”align=“bottom”>
강원도 인제군의 마스코트는 수달로써 청정지역인 인제의 지역적 특징을 상징화하였으
며, 천연기념물인 수달을 형상화하였다.
</body>
</html
②이미지 여백
<html>
<head>
<title>이미지의 여백</title>
</head>
<body>
정보화마을 캐릭터인 초롱이는 세련미와 부드러운 곡선, 그리고 다양한 선을 사용하여
<img src=“image/infortown.gif”width=“70”height=“70”align=“left”hspace=
“10”>
<img src=“image/hankkumi.gif”width=“60”height=“80”align=“right”
vspace=“10”>
친근한 이미지로 보드와 마우스를 표현하였으며 정보화 사회에 자신감에대한 이미지를
형상화하여 역동감 부여하였다. <p>
한꿈이는 꿈의 도시 대전에서 태어나 한빛탑을 지키고 있는 어린왕자로써 과학과 미래
라는 대전의 이미지를 상징한다. 전체적인 형상은 새천년의 선두에서 서서 당당하고 씩씩하게
헤쳐나갈 대전시민의 용기를 담았고 청명한 자연환경을 시각화 하였다. 핸드폰과 악세사리는
네트웍 시대를 상징하고 그 중심에 대전시민이 있음을 의미한다.
</body>
</html>
첫 번째 이미지는 좌우 여백, 두 번째 이미지는 상하 여백을 적용시킴
(3)이미지 테두리
●border속성으로 이미지에 테두리를 표시
<html>
<head>
<title>이미지 테두리</title>
</head>
<body>
정보화마을 캐릭터인 초롱이는 세련미와 부드러운 곡선, 그리고 다양한 선을 사용하여
<img src=“image/infortown.gif”width=“70”height=“70”align=“left”hspace=
“10”border=“5”>
<img src=“image/hankkumi.gif”width=“60”height=“80”align=“right”
vspace=“10”border=“10”>
친근한 이미지로 보드와 마우스를 표현하였으며 정보화 사회에 자신감에대한 이미지를
형상화하여 역동감 부여하였다. <p>
한꿈이는 꿈의 도시 대전에서 태어나 한빛탑을 지키고 있는 어린왕자로써 과학과 미래
라는 대전의 이미지를 상징한다. 전체적인 형상은 새천년의 선두에서 서서 당당하고 씩씩하게
헤쳐나갈 대전시민의 용기를 담았고 청명한 자연환경을 시각화 하였다. 핸드폰과 악세사리는
네트웍 시대를 상징하고 그 중심에 대전시민이 있음을 의미한다.
</body>
</htm
(4)이미지 설명
alt속성으로 이미지에 마우스 포인트를 위치시켰을 때 설명이 표시된다
<html>
<head>
<title>이미지 설명</title>
</head>
<body>
정보화마을 캐릭터인 초롱이는 세련미와 부드러운 곡선, 그리고 다양한 선을 사용하여
<img src=“image/infortown.gif”width=“70”height=“70”align=“left”hspace=
“10”border=“5”alt=“정보화 마을의 초롱이 캐릭터”>
<img src=“image/hankkumi.gif”width=“60”height=“80”align=“right”
vspace=“10”border=“10”alt=“대전시의 한꿈이 캐릭터”>
친근한 이미지로 보드와 마우스를 표현하였으며 정보화 사회에 자신감에대한 이미지를
형상화하여 역동감 부여하였다. <p>
한꿈이는 꿈의 도시 대전에서 태어나 한빛탑을 지키고 있는 어린왕자로써 과학과 미래
라는 대전의 이미지를 상징한다. 전체적인 형상은 새천년의 선두에서 서서 당당하고 씩씩하게
헤쳐나갈 대전시민의 용기를 담았고 청명한 자연환경을 시각화 하였다. 핸드폰과 악세사리는
네트웍 시대를 상징하고 그 중심에 대전시민이 있음을 의미한다.
</body>
</html>
●<a>태그로 하이퍼링크를 설정해 마우스로 해당 텍스트나 이미지를 클릭하면 HTML문서나 파일을 연결할 수 있다.
<a href=“연결대상 문서명이나 파일명”>텍스트또는 이미지</a>
2.1 텍스트를 이용한 연결
(1)웹 문서 파일 연결
(2)일반 파일 연결
●웹 브라우저에서 바로 표현이 가능한 텍스트/그림 파일은 표시되지만, 그 외의 파일은 다운로드 대화상자가 표시됨
<html>
<head>
<title>파일 연결</title>
</head>
<body>
<a href=“poem.txt”>텍스트 파일과 연결</a><p>
<a href=“poetry.hwp”>한글 문서 파일과 연결</a><p>
<a href=“image/land.jpg”>이미지 파일과 연결</a>
</body>
</html>
(3) 메일 프로그램 연결
메일을 보내기 위해 하이퍼링크의 경로를 “mailto:메일주소” 형식으로 기입한다.
<html>
<head>
<title>이미지 연결</title>
</head>
<body>
정보화마을 캐릭터인 초롱이<br>
<a href=“http://www.invil.org”>
<img src=“/infortown.gif”width=“70”height=“70”border=“2”alt=“정보화 마을
의 초롱이 캐릭터”></a><p>
대전광역시의 캐릭터인 한꿈이<br>
<a href=“http://www.metro.daejeon.kr”>
<img src=“image/hankkumi.gif”width=“60”height=“80”border=“2”alt=“대전
시의 한꿈이 캐릭터”></a>
</body>
</html>
2.2 이미지를 이용한 연결
(1) 기본적인 이미지 연결
<html>
<head>
<title>이미지 연결</title>
</head>
<body>
정보화마을 캐릭터인 초롱이<br>
<a href=“http://www.invil.org”>
<img src=“/infortown.gif”width=“70”height=“70”border=“2”alt=“정보화 마을
의 초롱이 캐릭터”></a><p>
대전광역시의 캐릭터인 한꿈이<br>
<a href=“http://www.metro.daejeon.kr”>
<img src=“image/hankkumi.gif”width=“60”height=“80”border=“2”alt=“대전
시의 한꿈이 캐릭터”></a>
</body>
</html>
(2) 이미지 맵을 이용한 연결
2.3 연결된 페이지 표시
연결된 웹 문서를 표시할 대상을 ‘target’속성에 인수로 설정할 수 있다
<html>
<head>
<title>대상 창과 연결</title>
</head>
<body>
<a href=“it-1-13.htm”target=“_top”>초혼</a><p>
<a href=“it-1-16.htm”target=“_blank”>소금별</a><p>
<a href=“it-1-34.htm”target=“_self”>외눈박이 물고기의 사랑</a>
</body>
</html>
3.1 문서의 배경
●<body>태그에 속성을 이용하여 문서의 배경을 색상/이미지로 채울 수 있다.
(1)문서의 배경색
<html>
<head>
<title>문서 배경색</title>
</head>
<body bgcolor=“#aaffcc”>
홍길동은 <a href=“http://www.jangseong.jeonnam.kr”>전라남도 장성군</a>을 대표
하는 캐릭터이다.<p>
<a href=“http://www.gyeryong.go.kr”>충청남도 계룡시</a>에서는 용을 대표 상징으
로 인식하고 있다.<p>
<a href=“http://jinan.jeonbuk.kr”>전라북도 진안군</a>의 마이용은 살기 좋은 진안의
이미지를 형상화하였다.<p>
<a href=“http://www.ulsan.go.kr”>울산광역시</a>의 캐릭터인 해울이는 고래를 형상
화하였다. <p>
<a href=“http://www.inje.gangwon.kr”>강원도 인제군</a>의 마스코트는 천연기념물
인 수달을 형상화하였다.
</body>
</html>
(2) 문서 배경 이미지
<html>
<head>
<title>문서 배경 이미지</title>
</head>
<body background=“image/sky.jpg”>
홍길동은 <a href=“http://www.jangseong.jeonnam.kr”>전라남도 장성군</a>을 대표
하는 캐릭터이다.<p>
<a href=“http://www.gyeryong.go.kr”>충청남도 계룡시</a>에서는 용을 대표 상징으
로 인식하고 있다.<p>
<a href=“http://jinan.jeonbuk.kr”>전라북도 진안군</a>의 마이용은 살기 좋은 진안의
이미지를 형상화하였다.<p>
<a href=“http://www.ulsan.go.kr”>울산광역시</a>의 캐릭터인 해울이는 고래를 형상
화하였다. <p>
<a href=“http://www.inje.gangwon.kr”>강원도 인제군</a>의 마스코트는 천연기념물
인 수달을 형상화하였다.
</body>
</html>
●배경색과 배경 이미지를 함께 사용한 경우 배경 이미지로 인해 배경색이 표시되지 않음
3.2 문서의 텍스트
●하이퍼링크가 설정되어 있는 텍스트의 기본 색상을 변경할 수 있다.
<html>
<head>
<title>문서의 텍스트</title>
</head>
<body background=“image/sky.jpg”text=“navy”link=“olive”alink=“red”vlink=
“gray”>
홍길동은 <a href=“http://www.jangseong.jeonnam.kr”>전라남도 장성군</a>을 대표
하는 캐릭터이다.<p>
<a href=“http://www.gyeryong.go.kr”>충청남도 계룡시</a>에서는 용을 대표 상징으
로 인식하고 있다.<p>
<a href=“http://jinan.jeonbuk.kr”>전라북도 진안군</a>의 마이용은 살기 좋은 진안의
이미지를 형상화하였다.<p>
<a href=“http://www.ulsan.go.kr”>울산광역시</a>의 캐릭터인 해울이는 고래를 형상
화하였다. <p>
<a href=“http://www.inje.gangwon.kr”>강원도 인제군</a>의 마스코트는 천연기념물
인 수달을 형상화하였다.
</body>
</html>
=================================================================================
1.1 표의 기초
●웹 문서에서 표를 이용하여 내용을 일목요연하고 간결하게 표현할 수 있으며 정돈된 상태로 나타낼 수 있음
●이미지의 위치를 배치할 때 유용하게 사용됨
●<table>태그를 사용하며, 실제적인 행은 <tr>태그에 의해 만들어 지고 각 행에 존재하는 열은 <td>태그에 의해 생성됨(열의 개수만큼<td>태그가 필요함)
(1) 표의 기본 작성법
<html>
<head>
<title>기본 표 작성</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border>
<tr>
<td> </td> <td>상반기</td> <td>하반기</td> <td>합계</td>
<tr>
<td>일반과정</td> <td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
<talbe>태그를 이용해 표를 작성한 모습
●상위 행의 <td>개수와 현재 행의<td>개수가 다를 경우 셀이 비정상적으로 표시됨
●<table>태그에선 기본적으로 ‘border’속성이 적용되며 ‘border’속성을 적용하지 않으면 아래와 같이 선이 표시되지 않는다.
●표 전체의 크기는 <table>태그 안에서 지정한다.
●하나의 셀에 지정한 너비나 높이는 해당 셀이 속해있는 행과 열 전체에 영향을 미침
<html>
<head>
<title>표의 크기</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border width=“50%”height=“150”>
<tr>
<td> </td> <td>상반기</td> <td>하반기</td> <td>합계</td>
<tr>
<td>일반과정</td> <td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
<html>
<head>
<title>셀의 크기</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border width=“50%”height=“150”>
<tr>
<td width=“80”height=“70”> </td> <td width=“70”>상반기</td> <td
width=“70”>하반기</td> <td>합계</td>
<tr>
<td>일반과정</td> <td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
1.2 표의 서식
(1)표 테두리 두께
‘border’속성은 표의 테두리 선을 의미함
숫자 인수를 이용한 선의 굵기 설정이 가능
‘border’의 기본 인수 값은 ‘1’
표 전체 테두리에 적용하며, 일부 셀에만 별도로 적용할 수 있다.
<html>
<head>
<title>표 테두리 굵기</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border=“10”width=“50%”height=“150”>
<tr>
<td width=“80”height=“70”> </td> <td width=“70”>상반기</td> <td
width=“70”>하반기</td> <td>합계</td>
<tr>
<td>일반과정</td> <td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
(2) 표 전체 색상 테두리
<html>
<head>
<title>표 테두리 색상</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border=“10”width=“50%”height=“150”bordercolor=“#ff9900”>
<tr>
<td width=“80”height=“70”> </td> <td width=“70”>상반기</td> <td
width=“70”>하반기</td> <td>합계</td>
<tr>
<td>일반과정</td> <td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
(3)표의 부분 색상 테두리
<html>
<head>
<title>표 부분 테두리 색상</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border=“10”width=“50%”height=“150”bordercolordark=“#FF9900”
bordercolorlight=“#CCFFFF”>
<tr>
<td width=“80”height=“70”> </td> <td width=“70”>상반기</td> <td
width=“70”>하반기</td> <td>합계</td>
<tr>
<td>일반과정</td> <td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
(4) 셀 색상 채우기
<html>
<head>
<title>셀 색상 채우기</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border=“10”width=“50%”height=“150”bgcolor=“yellow”>
<tr>
<td width=“80”height=“70”> </td>
<td width=“70”bgcolor=“#ffbfb1”>상반기</td>
<td width=“70”bgcolor=“#f4c4ff”>하반기</td>
<td bgcolor=“00cccc”>합계</td>
<tr>
<td bgcolor=“#e0fffc”>일반과정</td>
<td>125</td> <td>176</td> <td>301</td>
(5) 표 배경 이미지 채우기
<html>
<head>
<title>표 배경 이미지 채우기</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border=“10” width=“50%” height=“150” background=
“image\antenna.jpg”>
<tr>
<td width=“80”height=“70”> </td>
<td width=“70”>상반기</td>
<td width= “70”>하반기</td>
<td>합계</td>
<tr>
<td>일반과정</td>
<td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td>
<td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
1.3 표의 편집
<td>태그에서 셀 테두리와 내용과의 여백을 설정하거나, 셀 테두리 선의 간격을 설정할 수 있다.
(1)셀 여백
표의 크기를 설정하지 않고 셀의 여백 또한 설정돼있지 않을 경우 내용의 분량에 따라 표의 크기가 결정됨
“cellpadding”속성을 이용해 셀 내부의 내용과 테두리 선과의 여백을 설정할 수 있음
<html>
<head>
<title>셀의 여백</title>
</head>
<body>
<h2>정보 통신 수강 현황</h2>
<table border cellpadding=“10”>
<tr>
<td > </td> <td>상반기</td>
<td>하반기</td>
<td>합계</td>
<tr>
<td>일반과정</td>
<td>125</td> <td>176</td> <td>301</td>
<tr>
<td>실무과정</td> <td>84</td> <td>103</td> <td>187</td>
</table>
</body>
</html>
(2) 셀 태두리 간격
표를 표현할 때에는 테두리 선이 이중으로 표현됨
“cellpadding”속성을 이용. 표를 표현하는 테두리선의 간격을 표현할 수 있음
(3) 표와 셀 내용 정렬
<table>태그와 <td>태그에 “align”속성을 이용하여 내용을 원하는 위치로 정렬 시킴
<html>
<head>
<title>셀의 여백</title>
</head>
<body>
<p align=“center”><font size=“5”><b>정보 통신 수강 현황</b></font></p>
<table border width=“400”align=“center”>
<tr>
<td > </td> <td align=“center”>상반기</td>
<td align=“center”>하반기</td>
<td width=“80”align=“center”>합계</td>
<tr>
<td align=“center”>일반과정</td>
<td align=“right”>125</td> <td align=“right”>176</td> <td align=“right”>301</td>
<tr>
<td align=“center”>실무과정</td>
<td align=“right”>84</td> <td align=“right”>103</td> <td align=“right”>187</td>
</table>
</body>
</html>
(4) 셀 합치기
행 또는 열 단위로 셀을 합칠 수 있다.
합쳐진 행과 열 사이에서는 <td>태그의 수를 더 적게 표현한다.
<html>
<head>
<title>셀 합치기</title>
</head>
<body>
<p align=“center”><font size=“5”><b>정보 통신 수강 현황</b></font></p>
<table border width=“400”align=“center”>
<tr>
<td align=“center”rowspan=“2”>구분</td>
<td align=“center”colspan=“2”>수강인원</td>
<td width=“80”align=“center” rowspan=“2”>합계</td>
<tr>
<td align=“center”>상반기</td>
<td align=“center”>하반기</td>
<tr>
<td align=“center”>일반과정</td>
<td align=“right”>125</td> <td align=“right”>176</td> <td align=“right”>301</td>
<tr>
<td align=“center”>실무과정</td>
<td align=“right”>84</td> <td align=“right”>103</td> <td align=“right”>187</td>
<tr>
<td align=“center”colspan=“3”>수강인원합계</td>
<td align=“right”>488</td>
</table>
</body>
</html>
(5) 표 안에 표 넣기
<td>태그에 새로운 <table>태그를 작성 후 </table>태그로 종료하면 해당 셀 안에 또 다른 표를 표시할 수 있다.
<html>
<head>
<title>표안에 표</title>
</head>
<body>
<p align=“center”><font size=“5”><b>정보 통신 수강 현황</b></font></p>
<table border width=“500”height=“150”align=“center”>
<tr>
<td > </td> <td align=“center”>학기 구분</td>
<td width=“80”align=“center”>총합계</td>
<tr>
<td align=“center”>정보통신과</td>
<td><p align=“center”>
<table border width=“300”></p>
<tr>
<td>학기구분</td>
<td colspan=“2”width=“110”><p align=“center”>1학기</p></td>
<td colspan=“2”width=“110”><p align=“center”>2학기</p></td>
<tr>
<td>일반과정</td>
<td align=“right”>125</td> <td align=“right”>176</td>
<td align=“right”>157</td><td align=“right”>105</td>
=============================================================
5장 멀티미디어의 표현
문서 배경 음악을 설정할 수 있다.
문서에 음악이나 동영상이 실행되도록 표시할 수 있다.
<bgsound>태그를 이용해 문서가 열림과 동시에 배경음악이 동작되도록 음악 파일을 연결시킴
<html>
<head>
<title>문서 배경 음악</title>
</head>
<bgsound src=“image/Wind.mp3”>
<body background=“image/sky.jpg”text=“navy”link=“olive”alink=“red”vlink=
“gray”>
홍길동은 <a href=“http://www.jangseong.jeonnam.kr”>전라남도 장성군</a>을 대표
하는 캐릭터이다.<p>
<a href=“http://www.gyeryong.go.kr”>충청남도 계룡시</a>에서는 용을 대표 상징으
로 인식하고 있다.<p>
<a href=“http://jinan.jeonbuk.kr”>전라북도 진안군</a>의 마이용은 살기 좋은 진안의
이미지를 형상화하였다.<p>
<a href=“http://www.ulsan.go.kr”>울산광역시</a>의 캐릭터인 해울이는 고래를 형상
화하였다. <p>
<a href=“http://www.inje.gangwon.kr”>강원도 인제군</a>의 마스코트는 천연기념물
인 수달을 형상화하였다.
</body>
</html>
작성한 문서를 열면 스피커나 헤드폰으로 배경 음을 확인할 수 있다
<embed>태그를 이용해 문서 영역에 사운드나 동영상을 포함시켜 재생 시킬 수 있다.
<embed>태그는 사용자가 매체 재생여부를 결정할 수 있고, 다양한 부가 설정이 가능함
<html>
<head>
<title>동영상 재생</title>
</head>
<body>
<font size=“6”color=“olive”face=“HY목판L”>소금별 -류시화</font><p>
<embed align=“right”src=“image/mabi.wmv”hidden=“false”autostart=“true”>
<font size=“4”>
<font color=“#008080”>소금별</font>에 사는 사람들은<br>
<font color=“fuchsia”face=“서울흘기”>눈물</font>을 흘릴 수 없네<br>
<font color=“steelblue”face=“휴먼매직체”>눈물</font>을 흘리면<br>
<font color=“#f4a460”>소금별</font>이 녹아 버리기 때문<p>
<font color=“#dda0dd”>소금별</font> 사람들은<br>
<font color=“violet”face=“서울들국화”>눈물</font>을 감추려고 자꾸만<br>
눈을 깜박이네<p>
<font color=“#adff2f”>소금별</font>이 더 많이 반짝이는 건<br>
그 때문이지<p>
</font>
</body>
</html>
단원요약
01. HTML은 Hyper Text Markup Language의 약자로 하이퍼텍스트 문서를 만들기 위한 마크업 언어이다.
02. HTML 문서는 텍스트 형식의 문서로서 메모장과 같은 일반적인 텍스트 편집기를 이용하여 작성한 후“html”이나“htm”이라는 확장자로 저장하면 된다.
03. HTML은 태그로 구성되어 있으며, 대소문자를 구분하지 않는다.
04. HTML 문서에서 줄을 바꾸거나 문단을 구분하기 위해서는 <br> 태그나 <p> 태그를 사용하여야 하며, 여러 개의 공백은 무시되고 오직 하나의 공백만 인식하므로 공백은“ ”로 표시한다.
05. 글자의 모양이나 크기, 또는 색상은 <font> 태그를 이용하여 해당 속성값을 지정함으로써 다양하게 변경할 수 있으며, 텍스트에 효과를 주는 다양한 태그를 이용하여 효과를 지정할 수도 있다.
06. 문단 태그인 <P> 태그 안에 align 속성을 이용하여 문단의 정렬 방식을 지정할수 있으며, <blockquote> 태그를 이용하여 들여쓰기를 할 수 있다.
07. <hr> 태그를 이용하면 수직선이나 수평선을 그을 수 있다.
08. 이미지를 삽입할 경우에는 <img> 태그를 사용하며, 이미지의 위치에 따라 절대경로와 상대 경로로 표시할 수 있다. 또한 리눅스 서버의 경우 에러가 발생할 수있으므로 폴더 사이의 구분자로“￦”기호 대신“/”기호를 사용하는 것이 좋다.
09. HTML 문서 내에서 다른 문서로 하이퍼링크를 연결하려면 <a> 태그를 사용한다. 이때 연결된 문서의 위치에 따라 절대 경로와 상대 경로를 사용할 수 있다.
10. 이미지를 이용하여 연결할 때 이미지의 특정 부분에 따라 다른 문서를 연결시킬때에는 이미지맵 기능을 사용한다.
11. 연결된 문서는“target”속성에 지정된 값에 따라 현재 창의 현재 위치(_self), 새로운 창(_blank), 상위의 창(_parent), 현재 창 전체(_top) 등에 나타낼 수 있다.
12. <body> 태그의 속성값을 이용하여 문서 전체에 대한 배경색이나 배경 이미지등을 지정할 수 있으며, 하이퍼링크가 지정된 문장의 속성값 등을 지정할 수도있다.
13. <table> 태그를 이용하여 HTML 문서에 표를 작성할 수 있으며, 표의 전체에 대한 속성을 지정할 때에는 <table> 태그 안에서 속성값을 지정하고, 각 셀에 대한속성을 지정할 때에는 해당 셀을 나타내는 <td> 태그 안에서 속성값을 지정한다.
14. <bgsound> 태그를 이용하여 HTML 문서가 웹 브라우저에서 불려질 때 배경 음악이 연주되도록 할 수 있으며, <embed> 태그를 사용하여 HTML 문서 안에 배경 음악뿐만 아니라, 동영상, 사운드 등의 멀티미디어를 삽입할 수 있다.
|
