홈페이지:HTML기초

목차
 홈페이지의 개요
 HTML(Hypertext Markup Language)
 프론트 페이지
 나모 웹 에디터
 드림위버
 플래시
 연습문제

1. 홈페이지의 개요
 - 홈페이지의 필요성 : 정보공유
 - 유의점 : 갱신되지 않는 홈페이지 = 쓰레기
 - 홈페이지를 작성 시 필요 프로그램들 :
• 웹에디터(메모장, 프론트페이지, 나모 웹 에디터…),
• 웹브라우저(익스플로러, 넷스케이프…),
• 그래픽프로그램(포토샵, 페인트샵프로 등…)
• 기타(Gif Construction Set, WWW Gif Animator, 알GIF 등…)
 - 홈페이지의 종류 : 개인용 홈페이지, 상업용 홈페이지, 교육기관 홈페이지, 정부기관 홈페이지

※ HTML 에디터
• 간단한 에디터를 이용하여 만드는 방법(텍스트기반) : 메모장, 워드패드, 에디트플러스 등
• HTML전문 프로그램을 이용하는 방법WYSIWYG) : 나모웹에디터, 프론트페이지, 드림위버 등
• 기타 응용 프로그램을 이용하는 방법 : 아래한글, MS-WORD, 훈민정음 등

(1) HTML의 정의
 - WWW에서 사용되는 하이퍼텍스트를 기술하는 언어(Hypertext Markup Language)
 - 현재 HTML3.2가 표준으로 사용되고 있으며, HTML4.0까지 제정되어 있다.
 - HTML에 대한 표준화 작업은 W3C(The World Wide Web Consortium : http://www.w3.org) 에서 수행하고 있다.

(2) HTML문서의 기본 구조

<html>
<head>
<title> 웹페이지의 제목 </title>
</head>
<body>본문내용</body>
</html>

(3) HTML의 특징
 - HTML문서는 단순 텍스트로 되어 있다.
 - HTML문서는 html 또는 htm이라는 확장자를 가지고 있다.
 - HTML로 작성된 문서는 <HTML><HEAD><BODY>등 구조화된 형식을 가진다.
 - HTML의 명령어를 가리켜 태그(tag)라고 부른다. 일정한 태그를 사용하여 텍스트의 크기와 형태, 다른 곳으로의 링크를 지정하거나 이미지, 멀티미디어 데이터를 삽입할 수 있다.
 - HTML문서는 일정한 형식과 명령어를 가지고 있다. HTML에서 사용하는 명령어를 가리켜 꼬리표, 태그, TAG라고 부른다.
 - HTML의 태그는 여는 꺽쇠/닫는 꺽쇠(angle brackets), 시작되는 태그/끝맺는 태그라는 쌍괄 구조로 되어 있다.
 (예 : <FONT SIZE=3>글꼴크기 지정</FONT>
 <HR>,<BR>,<META>등은 끝맺는 태그가 없다.
 <P>,<TR>,<TD>,<IMG>등은 끝맺는 태그를 사용하지 않아도 된다.

 - 문서의 전체 내용은 <HTML>로 시작해서 </HTML>로 끝나게 된다. 생략 할 수도 있다.
 - <HEAD></HEAD>는 문서 전체 내용에 영향을 미치는 내용을 주로 기술한다.
 - <HEAD>,</HEAD>안에는 <TITLE>,<SCRIPT>,<META>,<STYLE>,<BASE>,<BASEFONT> 등의 태그를 삽입할 수 있다.
 - <TITLE></TITLE>는 해당 문서의 제목을 나타내는 것으로 웹 브라우저의 상단에 있는 제목표시줄(타이틀바)에 제목이 표시되며, 책갈피나 즐겨찾기에 등록되는 이름으로 사용된다.
 - <STYLE></STYLE>는 스타일 시트를 정의하는데 사용된다.
 - <BODY></BODY>는 문서의 본문 내용이 시작되고 끝나는 것을 의미한다.
 - <BODY>태그 안에는 백그라운드 이미지, 백그라운드 컬러, 링크 된 글자의 색깔, 방문한 링크의 색깔, 활성화된 링크의 색깔 등을 지정하는 옵션을 사용할 수 있다.

 - 대소문자를 구별하지 않는다.
 - 태그의 속성과 옵션 중 숫자나 값을 지정할 때 큰따옴표(")를 사용하는 것이 원칙이지만 편의에 따라 생략할 수도 있다. 생략시는 여는 곳과 닫는 곳을 모두 생략해야 한다.
 - 태그를 사용하여 홈페이지를 작성할 때 스페이스를 여러 번 눌러 여러 개의 빈칸을 준다 해도 웹브라우저에서는 하나의 빈 칸으로 처리된다.
 - 탭을 눌러서 공백을 주는 경우에는 하나의 빈칸으로 처리된다.
 - 태그를 사용하여 홈페이지를 작성할 때 엔터를 여러 번 눌러 여러 개의 빈 줄을 만든다고 해도 웹브라우저에서는 빈 줄이 하나도 없는 것으로 처리된다.

(4) 주요 태그
 - 앵커태그 : <A HREF="글자 또는 이미지">대상</A>
 - 코멘트 태그(주석 태그) : <!- … ->
 - 리스트 태그(목록 태그) : <DL>,<UL>,<OL>,<LI>
 - 프레임 태그 : <FRAMESET>.<FRAME>
 - 폼 태그 : <FORM METHOD=GET>,<FORM METHOD=POST>
 - 기타 : <HR>, <EMBED>. <BR>, <H1>~<H6> 등

링크만들기

이미지 삽입

<IMG SRC="이미지의 URL" width="n" HEIGHT="n" border="n" VSPACE="n" HSPACE="n" align="n" ALT="n">

<HTML>
<HEAD>
<TITLE>이미지의 삽입과 크기 조절</TITLE>
</HEAD>
<BODY>
<IMG SRC="../images/bear.gif" WIDTH="232" HEIGHT="350">원본 이미지
   <IMG SRC="../images/bear.gif" WIDTH="100" HEIGHT="350">폭 1/2
   <IMG SRC="../images/bear.gif" WIDTH="232" HEIGHT="175">높이 1/2

   <IMG SRC="../images/bear.gif" WIDTH="40%" HEIGHT="25%">폭 50%, 높이 20%
   <IMG SRC="../images/bear.gif" WIDTH="60" HEIGHT="80">폭 60, 높이 80
</BODY>
</HTML>

사운드 삽입

<EMBED SRC="사운드 파일의 URL">

<html>
<head>
<title> Wave 파일의 삽입</title>
</head>
<body>
인사 <br>
<embed src=" data/hello.wav">
벨소리 <br>
<embed width="150" height="30" autostart="false" loop="true“ src="data/ding.wav">
</body>
</html>

동영상 또는 비디오 삽입

<EMBED SRC="동영상 또는 비디오 파일의 URL">

<html>
<head>
<title> avi 파일의 삽입</title>
</head>
<body>
<p>마이클 조던의 덩크슛 장면 <br>
<embed width="200" height="150"
autostart="true" src="data/sports.avi">
</p>
</body>
</html>

테이블 삽입

<TABLE BORDER=" " WIDTH=" " HEIGHT=" " CELLPADDING=" " CELLSPACING=" ">...</TABLE>

<HTML>
<HEAD>
<TITLE>테이블의 삽입</TITLE>
</HEAD>
<BODY>
<H4>가야금과 거문고의 비교 </H4>
<TABLE BORDER="1">
<TR><TD>악기</TD><TD>줄 수</TD><TD>연주형태</TD></TR>
<TR><TD>가야금</TD><TD>6줄</TD>
<TD>'술대'라는 막대로 퉁김</TD></TR>
<TR><TD>거문고</TD><TD>12줄</TD><TD>손으로 퉁김</TD></TR>
</TABLE>
</BODY>
</HTML>

프레임 사용

좌우 2개의 창으로 나누기

<HTML>
<HEAD>
<TITLE>프레임나누기와 속성</TITLE>
</HEAD>

<FRAMESET COLS="40%,*">
<FRAME SRC="menu.htm" NAME="menu" SCROLLING="AUTO" NORESIZE>
<FRAME SRC="red.htm" NAME="main" SCROLLING="YES">
</FRAMESET>

<BODY>

</BODY>
</HTML>

3. 프론트 페이지
 - 프론트 페이지의 특징 및 실행
 - 웹페이지 작성
 - 글자체와 글자 크기 지정
 - 그림 삽입
 - 표 편집
 - 배경화면 넣기
 - 하이퍼링크(Hyperlink)
 - 특수 효과 넣기 : 움직이는 텍스트, 검색 양식 삽입 등…

4. 나모 웹 에디터
 - 나모 웹 에디터 실행
 - 웹페이지 작성과 저장
 - 텍스트 입력
 - 그림 삽입
 - 문서 꾸미기 : 문단 정렬, 배경 꾸미기
 - 프레임 작성

5. 드림위버
 - 매크로미디어사가 만든 저작도구
 - HTML태그를 모르고서도 쉽게 홈페이지 제작 할 수 있는 웹 저작도구
 - 드림위버 MX는 데이터베이스와 연동되는 진보된 저작도구

6. 플래시의 기능과 특징
 - 매크로미디어사가 공급하는 저작도구
 - 벡터 드로잉을 기반으로 하는 웹 애니메이션 저작도구로 파일 용량이 매우 작음
 - 스트리밍 방식의 지원으로 홈페이지 작성에 적합하며 강력한 사운드 효과 지원
 - 애니메이션 GIF, MOV파일, 시퀀스 파일 등으로 다양한 Publish 가능
 - 액션 스크립트의 활용으로 사용자와 인터렉션이 가능

* 참고 : 일본어 홈페이지 만들기
 - 일본어로 홈페이지를 만드는 방법은 두 가지가 있다. 한가지는 일본어 입력이 가능한 텍스트 에디터 또는 워드프로세서에 직접 HTML 편집기를 이용하여 만드는 방법과 다른 한가지는 나모 웹 에디터 등과 같은 홈페이지 제작 프로그램을 이용하여 만드는 것이다.
 - 직접 HTML을 편집하여 만드는 것이 가장 좋지만, 태그 등을 외우기 힘들고 시간이 많이 걸리므로 많은 양의 홈페이지 제작에는 홈페이지 제작 프로그램을 이용하는 것이 편리하다.

 - 일본어 홈페이지를 만들 때 가장 주의하여야 할 것은 HTML파일의 코드이다. 일본어 코드를 명확히 하지 않으면 깨진 글자로 보이게 된다. 일본어로 홈페이지를 만들 경우에는 반드시 언어 코드를 Shift-JIS나 EUC(-JP) 로 하여야 한다.
 예) <meta http-equiv=“content-type” content=“text/html;charset=shift_jis”>

 - 나모 웹에디터를 이용할 시에는 문자셋 지정은 메뉴에서 서식 → 문서 속성 → 일반 → 인코딩 → 일본어(Shift-JIS, EUC, JIS)중 하나로 골라서 지정한 후, 시스템에 설치되어 있는 MS Global IME를 이용하여 일본어를 입력하면 된다. Global IME(다국어 입력기)가 없으면 다운로드하여 설치한다.

** 핵심 요약 **
• 홈페이지를 만들기 위한 제작 도구는 메모장, Hotdog, 프론트 페이지,나모 엡 에디터 등이 있다.
• HTML은 다양한 컴퓨터 환경에서 사용 가능한 하이퍼텍스트(Hypertext)문서를 만드는데 사용되는 언어 규약이다.
• HTML은 전체적으로 헤터(Header)와 본문(Body)로 구분되며, 문법 형식은 태그(Tag)를 사용한다.
• HTML태그의 특징
- HTML태그는 대소문자 구분이 없다.
- 모든 태그는 “< >”로 둘러 쌓인다.
- 대부분의 태그는 시작과 끝을 나타내기 위해서 한 개의 쌍으로 이루어진다. 단, 태그 <P>와 <BR>은 쌍을 이루지 않는다.
- 공백문자나 개행 문자는 무시한다.
• HTML은 태그와 내용으로 구성되는데 태그는 <>안에서 사용되고 내용이 끝나면 </>를 사용한다.
• 기본 태그에는 주석문, HTML지정, 헤더, 웹페이지 제목 지정이 있다.
• 본문 지정의 형식은 ‘<BODY> 내용 </BODY>이고, 기능은 본문의 시작과 끝을 나타낸다.
• 문자 모양 지정에는 머리말 지정, 글자 크기, 단락 구분, 개행 문자, 수평선, 물리적 스타일 강조, 논리적 스타일 강조가 있다.
• 문장의 정렬은 미리 포맷된 문자, 가운데 정렬, 그대로 출력, 블록 인용, 서명 표시가 있다.
• 목록 만들기에는 순차 목록, 무순서 목록, 정의 목록, 메뉴 목록, 디렉토리 목록, 도표 만들기가 있다.
• 다른 문서 연결하기의 형식은 ‘<A HREF=“파일 이름 및 URL”> 글자나 그림 </A>’이고, 기능은 연결할 문서가 있는 URL이나 파일 이름을 지정한다.
• 멀티미디어 자료 삽입에는 그래픽 삽입과 오디오와 비디오 삽입이 있다. 비디오 파일 중에서 AVI파일은 브라우저가 처리할 수 있지만 MOV와 MPEG 파일은 외부 프로그램이 설치되어 있어야 된다.
• 프레임(Frame)은 화면을 분할해서 각기 다른 웹 문서를 사용할 수 있도록 하는 기능이다.
• 프론트 페이지와 나모 웹 에디터는 워드프로세서처럼 손쉽게 쓸 수 있는 웹 저작 도구이다.
• 프론트 페이지와 나모 웹 에디터는 일반 문서를 작성하는 것처럼 내용을 꾸미면 자동으로 HTML문서로 전환되어 저장된다.
• 프론트 페이지와 나모 웹 에디터의 하이퍼링크(Hyperlink)는 각각의 다른 홈페이지를 연결하여 주는 것으로 하이퍼링크된 부분만 클릭하면 원하는 페이지로 넘어가는 기능이다.

** 연습문제 **
 1. 일반적인 HTML문서의 구조와 HTML이 가지고 있는 한계에 대하여 설명하라.
 2. HTML 문서와 브라우저와의 관계에 대하여 설명하라.
 3. <FONT>태그와 헤더(<Hn>)태그와의 차이점 및 공통점에 대하여 설명하라.
 4. <BODY>태그의 내부에 들어갈 수 있는 모든 속성에 대하여 예를 들어 설명하라.
 5. 홈페이지 제작시 고려할 사항에 대하여 간략히 설명하라.
 6. 컬러코드를 알아내기 위한 두 가지 방법에 대하여 설명하라.
 7. 비트맵 그래픽 파일과 벡터 그래픽 파일의 특징 및 장단점에 대하여 각각 설명하라.
 8. <FRAME>태그를 사용하여 화면을 여러 개의 창으로 분할하여 문서를 작성하는 경우의 장단점에 대하여 설명하라.
 9. 멀티미디어를 정의해보고, 브라우저에서 기본적으로 처리할 수 있는 멀티미디어 파일 포맷에는 어떤 것들이 있는지를 조사/설명하라.
 10. 자신의 개인 홈페이지를 제작하여보자.

'인터넷활용' 카테고리의 다른 글

자바스크립트와 자바애플릿 (0)	2007.09.24
ZSPC Super Color Chart (0)	2007.09.24
RGB Hex Triplet Color Chart (0)	2007.09.24
다국어 웹페이지 보기 (0)	2007.09.24
정보검색(보충) (0)	2007.09.24
인터넷검색 (0)	2007.09.24
일본어 E-Mail 작성과 보내기 (0)	2007.09.24

웹일본어 강의노트(by 장희선)

홈페이지:HTML기초

'인터넷활용' 카테고리의 다른 글

티스토리툴바

홈페이지:HTML기초

'인터넷활용' 카테고리의 다른 글

'인터넷활용' Related Articles

티스토리툴바