1. HTML 언어와 TAG
HTML은 Hyper Text Markup Language의 약어로서 WEB에 사용되는 언어이다. HTML은 <HTML> <HEAD> <TITLE>과 같이 "< >로 묶인 명령어들인 TAG와 함께 사용된다. TAG는 우리말로 바꾸면 '꼬리표'로서 HTML로 홈페이지를 제작할 때 특정한 기능이나 모양들을 정의하기위한 '꼬리표'라고 정의된다. HTML에는 수많은 TAG가 있으며 HTML을 배운다는 것은 결국 이 TAG들의 사용법을 익힌다는 뜻이 된다.
2. HTML의 구성
2.1 HTML의 기본 구조
우선 이 홈페이지가 HTML로 구성되었다는 것을 알려주는
표시가 맨 첫 줄과 마지막 줄에 붙어야 한다. <HTML> </HTML> TAG
그 사이에 해당 문서의 정보를 가지고 있는 '머리말'이 들어간다. <HEAD> </HEAD>
TAG
마지막으로 실제 홈페이지에 나타나는 내용을 담은 "본문'이 들어간다. <BODY>
</BODY>
<HTML>
-------- HTML 문서의 시작을 알림 |
2.2 작은 homepage 구성 연습
1) Window에서 memo 장을 연다
아래와 같이 입력한다.
<html>
<head>
<title> 내 홈페이지 </title>
</head>
<body background="back.jpg">
<center>
<h3> 안녕하세요 제 홈페이지에 들어오신 것을 환영합니다. </h3>
<hr size 5 width=100%>
<br>
<img src="welcome.gif" width=480 height=50>
</center>
<embed src="younever.mid" width=50 height=15 controls=smallconsole
autostart=true loop=true volume=100>
</body>
</html>
해설:
<h> tag은 글자의 크기를 확정하는 것으로서 크기는 1부터 6까지 있다.
<Hr> tag는 수평선의 두께 및 길이를 확정하는 tag이다.
<br> tag는 break의 의미로서 줄을 바꾼다는 의미를 가진다.
<img src=> tag는 그림 삽입 tag
<center> tag는 정렬시키고자 하는 내용의 앞뒤에 위치시켜 중앙정렬을 하게한다.
<center> tag를 사용하지 않으면 전부 왼쪽 정렬이 된다.
<body back ground=> tag는 배경그림을 삽입하는 tag이다.
<embed src="file
이름">은 배경음악을 넣는 tag이다. width=50 height=15는 sound controller의
가로 세로의 크기로 pixel(畵素)를 의미한다.
문서를 저장한다.
문서이름에 home.html이라고 저장한다. 이 때 file의 형태는 모든
파일 로 한다.
folder를 만들고 이 folder 안에 home.html 과 welcome.gif와 back.jpg younever.mid
file을 이동한다.
Web Brouser로 home.html을 연다.
2.3 Tag 공부
2.3.1 줄 넘김과 관련된 tag
<BR> : line break 의 의미를 가진다.
메모장에 다음과 같이 쓴다
<HTML>
<HEAD>
<TITLE >시 감상 </TITLE>
</HEAD>
<BODY>
가을 편지<BR>
그 푸른 하늘에
</BODY>
</HTML>
가을 편지 와 그 푸른 하늘
사이에 한 줄의 공간을 주고자 한다면
<HTML>
<HEAD>
<TITLE >시 감상 </TITLE>
</HEAD>
<BODY>
가을 편지<P>
그 푸른 하늘에
</BODY>
</HTML>
2.3.2 bold TAG
시의 글자 중 푸른을 강조하고 싶다면 굵은 글씨를 구현하는
<B> tag를 사용한다.
그 <B> 푸른 </B>
2.3.3 글자 크기 및 색깔 변경 tag
글자크기 변경
<html>
<head>
<title >시 감상 </title>
<body>
<font size=6>가을 편지<font><BR>
그 푸른 하늘에
<body>
</html>
문자의 크기는 기본적으로 size 1~7 의 7가지가 있다. option을 주지 않으면 3의
크기로 출력된다.
색깔변경
<html>
<head>
<title>시 감상 </title>
</head>
<body>
가을 편지<BR>
그 푸른 <font color=red 하늘</font>에
<body>
</html>
배경색 넣기
<html>
<head>
<title >시 감상 </title>
</head>
<body bgcolor="FFFF00">
가을 편지<BR>
그 푸른 하늘에
<body>
</html>
참고) 대표적인 색의 color code
흰색: #FFFFF 빨강: #FF0000 녹색: #00FF00 파랑: #0000FF 노랑: #FFFF00 검정:
#000000 마젠타: #FF00FF Cyan: #00FFFF Violet: #4F2F4F
회색: #C0C0C0 Light blue: #C0D9D9
배경색을 녹색으로 바꿔보자
2.3.4 그림넣기
C drive root에 myhome 이라는 folder를 만듭니다.
bitmap 파일 또는 다른 형식의 그림 파일로 만든 moon 이라는 이름의 그림
파일을 만들어 myhome 폴더에 저장합니다.(doll.gif)
메모장을 열고 gallery.html 이라는 이름으로 다음과 같이 html 문서를 만듭니다.(gallery.html
도 myhome 폴더에 저장합니다)
<html>
<head>
<title>그림감상</title>
</head>
<body bgcolor="white">
<font size=6 face="돋움">그림감상</font><p>
<img src="doll.gif">
</body>
</html>
그림이 잘 저장되었는지 확인합시다.
*참고: P tag는 phrase의 약어로 문단바꿈의 역할을 한다.
그림 파일 위치 지정하기
상대경로 지정하기: 내가 만든 폴더 내의 파일(그림파일등)의 위치를 지정할 때
gallery.html 과 doll.gif가 같은 폴더에 있을 때
<img src="doll.gif">
그림이 myhome 폴더 아래의 pic 폴더에 있을 때
<img src="pic/doll.gif>
그림이 myhome 폴더 위의 pic 폴더에 있을 때
<img src="../doll.gif">
그림이 myhome 폴더위 2단계 위에 있을 때
<img src="../../doll.gif">
임의의 폴더아래 myhome 폴더가 있고 pic 폴더에 그림이 있을 때
<img src="../pic/doll.gif>
단서: myhome 폴더에 gallery.html이 있다고 가정.
절대경로 지정하기: 어떤 특정 홈페이지에 있는 file을 내 홈페이지에 출력할 때
<img src="http://www.eandc.co.kr/rose.gif>
그림의 크기 조정하기
<img src="doll.gif" width=600 height=100>
2.3.5 Sound 넣기
<html>
<head>
<title>음악감상</title>
</head>
<body bgcolor="white">
<font size=6 face="돋움">음악감상</font><p>
<a href="music1.mid">음악</a><p>
</body>
</html>
* 음악을 click 하세요
2.3.6 Link
다른 문서나 그림 홈페이지등을 연결하는 것을 link라고 한다.
2.3.6.1 그림을 link
어느 문장의 부분이나 전체를 클릭하면 출력하고 싶은 사진이 니오게 하는 경우
먼저 출력할 사진을 myhome 폴더로 복사/이동합니다. <a href="파일명"을
입력한다.
<html>
<head>
<title>그림감상</title>
</head>
<body bgcolor="white">
<font size=6 face="돋움">그림감상</font><p>
<img src="doll.gif">
<A href="fall.jpg">가을풍경</A><p>
</body>
</html>
*가을 풍경이란 단어를 click 해봅니다.
2.3.6.2 html 문서를 link
먼저 myhome 폴더에 poem.html 문서를 만들어 이동/저장합니다.
<html>
<head>
<title>그림감상</title>
</head>
<body bgcolor="white">
<font size=6 face="돋움">그림감상</font><p>
<img src="doll.gif">
<A href="fall.jpg">가을풍경</A><p>
가을과 관련된 시를 <a href="poem.html">감상</a>합니다.<p>
</body>
</html>
*감상이란 단어를 click 해봅니다.
2.3.6.3 website 에 link하기
<html>
<head>
<title>그림감상</title>
</head>
<body bgcolor="white">
<font size=6 face="돋움">그림감상</font><p>
<img src="doll.gif">
<A href="fall.jpg">가을풍경</A><p>
검색을 하려면 <a href="http://www.yahoo.co.kr">야후</a>로 가세요
</body>
</html>
* 야후란 단어를 click 해봅니다.
2.3.6.4 e-mail에 link
<html>
<head>
<title>그림감상</title>
</head>
<body bgcolor="white">
<font size=6 face="돋움">그림감상</font><p>
<img src="doll.gif">
<A href="fall.jpg">가을풍경</A><p>
선생님께 <a href="mailto:hsooo@dreamx.net ">팬레터</a>를
보냅시다.<p>
</body>
</html>
*팬 레터를 click 해봅니다.
2.3.7 Form tag
설문조사나 기타 문서의 빈칸을 채워 넣는 등의 작성을 할 때의 서류 형식을 의미한다.
form tag는 상대방으로부터 정보를 받을 수 있게 하는 tag이다.
Form 의 기본형식은 다음과 같다.
<Form> ----- form 시작 tag
<input> ----- 다양한 형식의 form으로 다양한 형태의 정보를
받아들임
------
</Form> ----- form tag의 종료
(1) 다음과 같은 form tag를 만들어보자
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><p>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
(2) 다음과 같은 form tag를 만들어보자
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation"><br>
주소:<input type=text name="address" size=40><p>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
참고: 입력칸의 size를 지정하지 않으면 기본값으로 size=20으로 지정한다. 20은 영문자 20, 한글 10자를 의미한다.
(3) 다음과 같은 form tag를 만들어보자
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation"><br>
주소:<input type=text name="address" size=40><br>
주민등록번호:<input type=text name="id" maxlength=14><br>
암호:<input type=password name="pass" maxlength=8 size=8 ><p>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
(4) 다음과 같은 form tag를 만들어보자: Radio button
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation" value=한국><br>
주소:<input type=text name="address" size=40><br>
주민등록번호:<input type=text name="id" maxlength=14><br>
암호:<input type=password name="pass" maxlength=8 size=8 <p>
제 홈페이지가 맘에 들었나요?<br>
<input type=radio name="evaluation" value="good">좋다
<input type=radio name="evaluation" value="soso" checked>보통
<input type=radio name="evaluation" value="bad">나쁘다<p>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
* 참고사항: 주홍글씨는 기본값으로 들어 가게 되는 것을
의미한다.
(5) 다음과 같은 form tag를 만들어 봅시다.: checkbox
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation" value=한국><br>
주소:<input type=text name="address" size=40><br>
주민등록번호:<input type=text name="id" maxlength=14><br>
암호:<input type=password name="pass" maxlength=8 size=8 ><p>
제 홈페이지가 맘에 들었나요?<br>
<input type=radio name="evaluation" value="good">좋다
<input type=radio name="evaluation" value="soso" checked>보통
<input type=radio name="evaluation" value="bad">나쁘다<p>
특히 마음에 드는 page는? <br>
<input type=checkbox name="travel" value="good">여행준비
<input type=checkbox name="poem" value="good">시감상
<input type=checkbox name="gallery" value="good">그림감상<p>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
(6) 다음과 같은 form tag를 만들어봅시다.: pulldown 메뉴:
select tag
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation" value=한국><br>
주소:<input type=text name="address" size=40><br>
주민등록번호:<input type=text name="id" maxlength=14><br>
암호:<input type=password name="pass" maxlength=8 size=8><p>
제 홈페이지가 맘에 들었나요?<br>
<input type=radio name="evaluation" value="good">좋다
<input type=radio name="evaluation" value="soso" checked>보통
<input type=radio name="evaluation" value="bad">나쁘다<p>
특히 마음에 드는 page는? <br>
<input type=checkbox name="travel" value="good">여행준비
<input type=checkbox name="poem" value="good">시감상
<input type=checkbox name="gallery" value="good">그림감상<p>
당신의 나이는 어떻게되시죠?<br>
<select name="age" size=3>
<option value="10age">10~19
<option value="20age">20~29
<option value="30age">30~39
<option value="40age">40 세 이상
</select>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
(7) 다음과 같은 form tag를 만들어보자: 목록 중에서 다중
선택
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:hsooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation" value=한국><br>
주소:<input type=text name="address" size=40><br>
주민등록번호:<input type=text name="id" maxlength=14><br>
암호:<input type=password name="pass" maxlength=8 size=8 ><p>
제 홈페이지가 맘에 들었나요?<br>
<input type=radio name="evaluation" value="good">좋다
<input type=radio name="evaluation" value="soso" checked>보통
<input type=radio name="evaluation" value="bad">나쁘다<p>
특히 마음에 드는 page는? <br>
<input type=checkbox name="travel" value="good">여행준비
<input type=checkbox name="poem" value="good">시 감상
<input type=checkbox name="gallery" value="good">그림
감상<p>
당신의 나이는 어떻게되시죠?<br>
<select name="age" size=3>
<option value="10age">10~19
<option value="20age">20~29
<option value="30age">30~39
<option value="40age">40 세 이상
</select>
<select name="gifts" size=4 multiple>
<option value="1">라디오
<option value="2">목도리
<option value="3">케이크
<option value="4">장갑
<option value="5">공구세트
</select><p>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
(8) 다음과 같은 form tag를 만들어보자: 문장입력을 위한
창
<html>
<head>
<title>고객정보입력</title>
</head>
<body bgcolor="blue">
<form method=post action="mailto:sooo@dreamx.net" enctype="text/plain">
이름:<input type=text name="visitor"><br>
국적:<input type=text name="nation" value=한국><br>
주소:<input type=text name="address" size=40><br>
주민등록번호:<input type=text name="id" maxlength=14<br>
암호:<input type=password name="pass" maxlength=8 size=8 ><p>
제 홈페이지가 맘에 들었나요?<br>
<input type=radio name="evaluation" value="good">좋다
<input type=radio name="evaluation" value="soso" checked>보통
<input type=radio name="evaluation" value="bad">나쁘다<p>
특히 마음에 드는 page는? <br>
<input type=checkbox name="travel" value="good">여행준비
<input type=checkbox name="poem" value="good">시감상
<input type=checkbox name="gallery" value="good">그림감상<p>
당신의 나이는 어떻게 되시죠?<br>
<select name="age" size=3>
<option value="10age">10~19
<option value="20age">20~29
<option value="30age">30~39
<option value="40age">40 세 이상
</select>
<select name="gifts" size=4 multiple>
<option value="1">라디오
<option value="2">목도리
<option value="3">케이크
<option value="4">장갑
<option value="5">공구세트
</select><p>
제 홈페이지에 대한 소감을 써주세요<br>
<textarea name=comments cols=60 rows=10>
</textarea><P>
<input type=submit value="전송">
<input type=reset value="reset">
</form>
</body>
</html>
참고 cols=60은 가로 60 pixel 세로 10행을 의미한다.
2.3.8 조판
2.3.8.1: Center tag: 가운데 정렬
<html>
<head>
<title>정렬</title>
<body bgcolor="#aaaaaa">
<center><font size=6 face=궁서">여행준비</font></center>
<p></body>
</html>
2.3.8.2 hr tag: 수평선 긋기
<html>
<head>
<title>수평선 긋기</title>
<body bgcolor="#aaaaaa">
<center><font size=6 face=궁서">여행준비</font></center>
<p>
1. 지리산 개관<br>
2. 여행준비물<br>
3. 여행경로<br>
<hr width=60% size=8 align=left noshade>
</body>
</html>
*참고: noshade: 수평선의 내부를 진하게 채운다. size: 수평선의 두께(단위는 pixel)
2.3.8.3 blockquote tag: 좌우문단에 여백을 준다.
<html>
<head>
<title>문단 여백</title>
<body bgcolor="#aaaaaa">
<center><font size=6 face=궁서">여행준비</font></center>
<p>
1. 지리산 개관<br>
2. 여행준비물<br>
3. 여행경로<br>
<hr width=60% size=8 align=left noshade>
1. 지리산 개관
<blockquote>
경상남도 향양군, 산청군, 하동군, 전라북도 남원시, 전라남도 구례군, 등에 넓게
걸쳐있는 산. 우리나라 남부지방을 동서로 나누는 소백산맥의 끝머리에 크게 솟구쳐
있는 산이다. 가장 높은 천왕봉( 1,915m)은 산청군과 함양군 경계에 있으며 그밖에
반야봉, 노고단 등 1,500m를 넘는 높은 산봉우리가 곳곳에 솟아있다.
</blcokquote>
</body>
</html>
2.3.8.4 UL tag: 무순위 목록을 나타내는 tag로써 목록에는 성적순처럼 순서대로 목록을 기록해야 하는 순위목록도 있지만 소유품 목록처럼 무순위 목록이 있다. 이때 사용하는 tag가 UL tag이다.
<html>
<head>
<title>순위</tag>
<body bgcolor="#aaaaaa">
<center><font size=6 face=궁서">여행준비</font></center>
<p>
1. 지리산 개관<br>
2. 여행준비물<br>
3. 여행경로<br>
<hr width=60% size=8 align=left noshade>
1. 지리산 개관
<blockquote>
경상남도 향양군, 산청군, 하동군, 전라북도 남원시, 전라남도 구례군, 등에 넓게
걸쳐있는 산. 우리나라 남부지방을 동서로 나누는 소백산맥의 끝머리에 크게 솟구쳐
있는 산이다. 가장 높은 천왕봉( 1,915m)은 산청군과 함양군 경계에 있으며 그밖에
반야봉, 노고단 등 1,500m를 넘는 높은 산봉우리가 곳곳에 솟아있다.
</blcokquote>
2. 여행준비물
<ul>
<LI TYPE=DISC>배낭
<LI TYPE=CIRCLE>부식
<LI TYPE=SQUARE>버너
</body>
</html>
2.3.8.5 띄어쓰기
html에서 space bar로 띄어쓰기는 단 한칸만 이루어진다. html에서 띄어쓰기는 를
사용한다.
다음을 비교하여 보자
<body>
빈칸을 어떻게
만드나?
빈칸을 어떻게 만드나?
</body>
2.3.8.6 주석문 tag<!-- -->:
화면에 출력되지 않음
<body>
이 내용은 화면에 출력됩니다.
<!--이 내용은 화면에 출력 안됩니다. -->
</body>
2.3.8.7 글자로 모양만들기: Pre tag
<body>
크리스마스 트리입니다.
<pre>
*
***
****
******
*
*
</pre>
</body>
2.3.8.8 문서내 link
다음 html 문서를 작성한다.
<html>
<head>
<title>여행준비</title>
</head>
<body bgcolor="#aaaaaa">
<center><font size=6 face="궁서">여행준비</font></center><p>
<hr width=60% size=8 align=left noshade>
1. 지리산 개관 <br>
2. <a href=#준비물">여행준비물</a><br>
3. 여행경로<br>
4. 조편성<br>
5. 등산이란<br>
<p>
The war came early one morning in June of 1950, and by the time the North
Koreans occupied our capital city, Seoul, we had already left our university,
where we were instructors in the History of Human Civilization. I joined the
Korean Army, and Park volunteered for the Marine Corps-the proud combat outfit
that suited his temperament. In a short time-because junior officers died very
fast in the early phase of the war-we were trained and battle tested, and we
both became officers. We survived, but we were both wounded. The shrapnel of
a mortar shell had grazed my right knee during the defense of Taegu, and a sniper
had shot Park in his left arm in the mopping-up operation in Seoul after the
Inchon landing. We both <br>
spent some time in the hospital , were both promised medals, and were returned
promptly to our respective duties.<br>
n the area of political intelligence,
and I can hardly disagree with him."<br>
"You are suggesting that it may be good material
for propaganda,"
I said. "A grave case of religious persecution by the Communists. Of
international
significance, if I may add, sir, particularly in America. In short, we may be
able to exhibit to the entire world the Korean chapter i
n the history of Christian
martyrdom." <br>
"All right, all right. I am not suggesting anything,"
Colonel Chang said impatiently. "Now, let me return to the problem.
It's
a simple matter of arithmetic. If we assume there were originally fourteen ministers,
and if we take into account the claim that only twelve were shot, then it is
possible two have survived, is it not?" <br>
"Of course."<br>
"As you know, it is impossible for us, at this
early stage,
to check every single living Christian minister in North Korea. But the curious
thing is that there are two in Pyongyang, right this minute, who were imprisoned
by the Reds. Actually they were still in prison when we took the city. It is
an interesting coincidence, don't you think, however hypothetical it
many be?"<br>
Something in his manner-perhaps it was the sudden, quick
gleam in
his eyes, or the way he tilted his bald head-impressed me that he knew more
about the two ministers than he was willing to tell me. <br>
"Well, what do you think of this possibility?"
he asked.
<br>
"Hypothetical, as you say, sir," I replied.<br>
He was pleased with my response. "Good.
Now, I want you
to go and see thedse ministers, Shin and Hann, and tell them about our problem.
1. 여행준비<p>
--------------------------------------------------------------------------<p>
2. <a name="준비물">여행준비물</a><p>
버너<br>
냄비<br>
<p>
</body>
<html>
3. Table 만들기
1) 다음과 같이 html을 작성해보자: 기본 table
<html>
<head>
<title>환영</title>
</head>
<body bgcolor="white">
<table border=1 width=400 height=80>
<tr>
<td>내용 1</td>
<td>내용 2</td>
</tr>
</table>
</body>
</html>
2) 다음과 같이 html을 작성해보자: cell 폭 조정
<html>
<head>
<title>환영</title>
</head>
<body bgcolor="white">
<table border=1 width=400 height=80>
<tr>
<td width=200>내용 1의 내용은 더 깁니다</td>
<td width=200</td>내용2
</tr>
</table>
</body>
</html>
3) 다음과 같이 html을 작성해봅시다.: row의 추가
<html>
<head>
<title>환영</title>
</head>
<body bgcolor="white">
<table border=1 width=400 height=80>
<tr>
<td width=200>내용 1의 내용은 더 깁니다</td>
<td width=200>내용2</td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5 </td>
</tr>
</table>
</body>
</html>
다음과 같이 html을 작성해봅시다
4) 다음과 같이 html을 작성해봅시다.: 셀 합치기
(1)
<html>
<head>
<title>환영</title>
</head>
<body bgcolor="white">
<table border=1 width=400 height=80>
<tr>
<td>내용 1</td>
<td>내용 2</td>
<td>내용 3</td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
</table>
</body>
</html>
(2): 내용 2 의 cell을 지웁니다.
<html>
<head>
<title>환영</title>
</head>
<body bgcolor="white">
<table border=1 width=400 height=80>
<tr>
<td>내용 1</td>
<td>내용 3</td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
</table>
</body>
</html>
(3): 가로의 cell을 합치는 colspan tag 사용
<html>
<head>
<title>환영</title>
</head>
<body bgcolor="white">
<table border=1 width=400 height=80>
<tr>
<td colspan=2>내용
1</td>
<td>내용 3</td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
</table>
</body>
</html>
참고: colspan=2: 2칸의 cell을 차지하겠다는 의미
다음과 같이 html을 작성해봅시다.: 세로의
cell을 합치는 rowspan 이용
(1)
<html>
<head>
<title>가을여행</title>
</head>
<table border=5 width=600 height=300>
<tr>
<td colspan=3 height=50 valign=bottombgcolor ="#d9b524">
 :이 달의 주제 ----------<font face="궁서" size="6">가을
여행</font></td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
<tr>
<td>내용 7</td>
<td>내용 8</td>
<td>내용 9</td>
</tr>
<tr>
<td>내용 10</td>
<td>내용 11</td>
<td>내용 12</td>
</tr>
</table>
</body>
</html>
(2)세로의 cell을 합치는 rowspan 이용
<html>
<head.
<title>가을여행</title>
</head>
<table border=5 width=600 height=300>
<tr>
<td colspan=3 height=50 valign=bottombgcolor ="#d9b524">
 :이 달의 주제 ----------<font face="궁서" size="6">가을
여행</font></td>
</tr>
<tr>
<td>내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
<tr>
<td>내용 7</td>
<td>내용 8</td>
<td rowspan=2>내용 9</td>
</tr>
<tr>
<td>내용 10</td>
<td>내용 11</td>
</tr>
</table>
</body>
</html>
5) 다음과 같이 html을 작성해봅시다.: cell에
바탕 색 넣기
<html>
<head.
<title>가을여행</title>
</head>
<table border=5 width=600 height=300>
<tr>
<td colspan=3 height=50 valign=bottombgcolor ="#d9b524">
 :이 달의 주제 ----------<font face="궁서" size="6">가을
여행</font></td>
</tr>
<tr>
<td bgcolor="yellow">내용 4</td>
<td>내용 5</td>
<td>내용 6</td>
</tr>
</table>
</body>
</html>
6) 다음과 같이 html을 작성해봅시다: table
cell에 그림을 집어넣고 이그림을 website에 link 하기
<html>
<head>
<title>CAR</title>
</head>
<body bgcolor="white">
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td ><a href="http://www.eandc.co.kr"><img
src="car.gif"></a></td>
</tr>
</table>
</body>
</html>
7) cell spacing & cell padding
다음과 같이 html을 작성합시다.
<html>
<head>
<title>table</table>
</head>
<body>
<table border=5 cellsapcing=25 cellpadding=15>
<tr>
<td width=50%>내용 1의 내용은 더 깁니다</td>
<td width=30%>내용 2</td>
<td width=20%>내용 3</td>
</tr>
</table>
</body>
</html>
4. Frame
창을 다양한 형태로 나누는 것을 framing이라고 한다. framing을 하기 전에
생성된 frame에 넣을 문서를 만들어야 할 것이다.
1) 1 번 frame에 넣을 html 문서를 만든다.(문서이름: 1.html)
<html>
<head>
<title>문서 </title>
</head>
<body>
문서 1
</body>
</html>
2) 2 번 frame에 넣을 문서를 만든다.(문서이름: 2.html)
<html>
<head>
<title>문서 </title>
</head>
<body>
문서 2
</body>
</html>
3) 3번 frame에 넣을 문서를 만든다.(문서이름: 3.html)
<html>
<head>
<title>문서 </title>
</head>
<body>
문서 3
</body>
</html>
4) 4번 frame에 넣을 문서를 만든다. (문서이름: 4.html)
<html>
<head>
<title>문서 </title>
</head>
<body>
문서 4
</body>
</html>
5) 5번 frame에 넣을 문서를 만든다.(문서이름: 5.html)
<html>
<head>
<title>문서 </title>
</head>
<body>
문서 5
</body>
</html>
6) Main Frame 만들기: frame을 만들기 위한 html 문서는 main frame이라고 한다.
(1) 다음과 같이 main frame을 만들고 brower에서 창을 확인하자(
frame html 문서는 <body> tag 대신 <frameset> tag가 사용된다.
<html>
<head>
<title>프레임</title>
</head>
<frameset>
</frameset>
</html>
(2) 다음과 같이 main frame을 만들고 browser에서 창을 확인하자: 창을 좌우로 반반씩
나눈다. 속성은 cols를
사용한다.
<html>
<head>
<title>프레임</title>
</head>
<frameset cols="50%, 50%">
<frame>
<frame>
</frameset>
</html>
* 2 개의 창으로 나누었으므로 2개의 frame이 필요하다.
(3) frame에 문서를 집어넣자:
<html>
<head>
<title>프레임</title>
</head>
<frameset cols="50%, 50%">
<frame src="1.html">
<frame src="2.html">
</frameset>
</html>
(4) 창을 수평으로 나누어보자: 속성 rows를 사용한다.
<html>
<head>
<title>프레임</title>
</head>
<frameset rows="20%, 10%, 30%, 35%">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
<frame src="4
</frameset>
</html>
(5) 다시 창을 가장 많이 사용하는 형태인 좌우 15%, 85% 로 분할하자.
<html>
<head>
<title>프레임</title>
</head>
<frameset cols="15%, 85%">
<frame src="1.html">
<frame src="2.html">
</frameset>
</html>
(6) 좌우로 다음 오른쪽 창을 상하로 절대크기로 분할한다.
<html>
<head>
<title>프레임</title>
</head>
<frameset cols="150, *">
<frame src="1.html">
<frameset rows="80, *">
<frame src="2.html">
<frame src="3.html>
</frameset>
</html>
(7) frame의 두께와 경계 색깔을 변화시킨다.
<html>
<head>
<title>프레임</title>
</head>
<frameset cols="150, *"
border=15 bordercolor="red">
<frame src="1.html">
<frameset rows="80,*">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>
5. Home Page 제작 실습
1) index.html 문서 제작
<html>
<head>
<title>프레임</title>
</head>
<frameset cols="150,*">
<frame src="menu.html">
<frameset rows="80,*>
<frame src="2.html">
<frame src="home.html" name="window3">
</frameset>
</html>
2) menu.html 문서를 만든다
<html>
<head>
<title>메뉴</title>
</head>
<body bgcolor="yellow">
<font size=6 face="굴림">menu</font><p><br>
<a href="home.html" target="window3">첫화면으로</a><p>
<a href="travel.html" target="window3">여행준비</a><p>
<a href="poem.html" target="window3">시감상</a><p>
<a href="gallery.html" target="window3">그림감상 </a><p>
<a href="http://www.yahoo.co.kr"
target="newwin">검색 tool</a><p>
<a href="mailto:jjhy@channeili.net">저에게
편지를</a>
</body>
</html>
3) home.html 문서를 만든다.
4)travel.html 문서를 만든다
5)poem.html 문서를 만든다
6)gallery.html 문서를 만든다.
3) 2 nd frame에 그림문자를 만들어 집어 넣어 보자
(hint) index.html을 변경한다.
<frameset cols="150,*">
<frame src="menu.html>
<frameset rows="80.*">
<frame src="title.jpg">
<frame src="home.html" name="window3">
</frameset>
4) Homepage를 ISP를 통해 Web에 띄우기
FTP를 이용한다.
5. 움직이는 GIF 파일 만들기
Paintshop을 실행한다
메뉴에서 file/new 른 선택한다.
새 그림의 크기와 색상 수등 규격을 정하는 창이 뜨면 항목을 적당하게 입력하는데
이 때 주의해야 할 것은 background 항목을 반드시 white 로 선택을 해주어야 흰색
바탕으로 용지가 마련된다.
왼쪽 tool bar에서 그릴 붓을 선택한다.
상단 tool bar에서 붓의 palette를 click 하여 항목을 적당히 채운다.
꽃잎을 그린다.(red)
꽃 중앙을 그린다(yellow)
그림을 다 그린 후 에 메뉴에서 file/save를 누르면 file 저장창이 나타난다
이 때 file 의 저장 위치와 file의 형식(jpg)을 정해준 후 저장한다.
다시 메뉴 file/open을 통해 꽃 file을 불러온 후
사각형 선택 tool로 전체 꽃을
선택한다
ctrl + C 명령으로 복사를 한 후
메뉴에서 edit/paste/as new image를 3번 반복하여 3 개의 꽃을 상단에 정렬시키고
원본은 창을 닫는다.
1 번 꽃 그림은 그대로 두고
2번 그림을 click 하여 선택하여 메뉴의 image/deformations/wave를 차례로 선택한다.
Wave 창이 뜨면
Horizontal displacement Vertical displacement
amplitude (5) amplitude
(3)
wavelength (100) wavelength(100)
을 기재하고
OK를 누른다
3 번 그림도 같은 방법으로 진행하지만
Horizontal displacement Vertical
displacement
amplitude (10) amplitude
(6)
wavelength (100) wavelength(100)
으로 기재한다.
이제 화면에 1 개의 기본 그림과 2 개의 변형된 그림이 나타납니다.
먼저 1번 그림을 click 하여 active image 로 지정하고 메뉴의
file/export/transparent GIF를 선택한 후 나타난 Transparent GIf Saver 창에서
Use Wizard 버튼을 누르고 계속 "다음"을 눌러가다 마지막에 "마침"을
누르면 저장 창이 뜬다. aniflower 1으로 file명을 정하고 장소를 확정한 후 저장을
누른다. 2 번 꽃, 3 번 꽃도 aniflower 2, aniflower 3 로 한 후 같은 장소에 저장한다.
애니매직 GIF 프로그램을 실행한다.
메뉴에서 file/open을 누르고 aniflower 1을 연다
그디음에 붙일 그림을 불러오기 위해 메뉴에서 file/append frame을 누르고 aniflower
2을 선택하여 연다
그디음에 붙일 그림을 불러오기 위해 메뉴에서 file/append
frame을 누르고 aniflower 3을 선택하여 연다
그디음에 붙일 그림을 불러오기
위해 메뉴에서 file/append frame을 누르고 aniflower 2을 선택하여 연다
이렇게 하면 Frame List를 보면 aniflower 1, 2, 3, 2 가 첨부된 것을 확인할 수
있다.
메뉴에서 Play를 선택하면 꽃이 움직이는 것을 확인할 수 있다.
만약 움직이는
속도가 너무 빠르거나 느리다면 Frame rate 메뉴를 통해 이를 조절한다.
마지막으로 File/Save를 선택하여 Aniflower.gif 라는 파일명으로 저장한다.
6. 기타 유용한 tag
6.1 흐르는 문장 tag 연습
문장을 위로 흐르게 하고 배경에 꽃을 집어넣고
배경음악을 집어넣어본다.
<html><head><title></title></head><body>
<table width=600 height=400 background="http://www.eandc.co.kr/htdocs/과꽃.jpg"><tr><td>
<marquee scrollAmount=1 direction=up width=500 height=300>
<p><font size="3" face="굴림체" color="#ffffff">
<ul>
<b>少年의 悲哀 중에서 : 라라에게 보내는 편지</b></font> </p>
<font size="2" face="굴림체" color="#ffffff"><b>
<p>사람들이 거리를 지나다닙니다.
그 거리에 年年히 눈이 나리고
빗방울이 흥건히 적셔지곤 합니다.
무수한 발자욱은 발자욱을 지우고
충만과 공허가 무수히 교차합니다.
이하 생략
written by Mr. Lee </b>
</ul></marquee></font>
</td></tr></table>
<bgsound src="http://www.eandc.co.kr/htdocs/song/연주곡-엘리제를 위하여(팬플룻).mp3">
</body></html>
7. 무료 counter 사용하기
website:easynara.com에
접속 메뉴 블루보드/블루카운터 로 들어가 회원가입한
후 무료 counter 서비스 신청하면
이메일/homepage/카운터id/초기화번호(0)/이미지
번호(4)를 적고 다음으로 넘어가면
<script src='http://count04.blueboard.co.kr/bluecount/link.cgi?path=link504&id=male&type=4'></script>라는
script 명령어가 화면에 생성된다. 이를 그대로 초기화면 source의 적당한 자리에
삽입시키면 된다.
*이미지번호 는 나열된 counter 그림을 본 후 취향에
맞는 것을 선택한다.
*카운터 id는 임의로 만들면 된다.
*easynara.com
전화번호:02-362-2627