1. HTML이란
홈페이지를 만들 때 사용하는 언어로써 Hyper Text Markup Language의 준말이다.
윈도우에서 메모장만 있으면 홈페이지를 만들 수 있어 가장 많이 사용된다.
그리고 HTML을 사용하면 홈페이지를 만들 때 세부적인 디자인이나 다양한 디자인을 만들 수 있으므로 유리한 점이 있다.
1.1. HTML 편집기
HTML은 많은 태그를 익혀야 하는 어려움이 있으므로 HTML 편집 프로그램인 웹 에디터를 사용하면 초보자도 쉽게 홈페이지를 만들 수 있다.
웹 에디터의 종류에는 국산으로 널리 사용되는 나모 웹 에디터를 비롯하여 다양한 외국제품들도 있다.
1.2. 홈페이지를 등록할 계정 준비
1.2.1. 인터넷 서비스 업체에 등록하는 방법
각종 인터넷 사이트에서 제공하는 무료계정 또는 유료계정을 사용한다.
무료사이트 : Naver, Natian, Yahoo등등
회원가입을 한 후 사용할 수 있다.
유료사이트: Thrunet, Chollian, Hitel등
1.2.2. 웹 호스팅을 하는 방법
웹 서버 업체의 하드디스크를 임대하여 사용하는 방법
1.2.3. 자신의 웹서버를 독자적으로 구축하는 방법
1.2.4. 학교에서는 전용웹서버가 있으므로 관리자에게 신청하여 사용가능
2. 메모장 사용하기
2.1.윈도우의 바탕화면에서 시작>프로그램> 보조프로그램>메모장을 클릭하면 메모장이 나타난다.
2.2. HTML 문서 저장하기
HTML로 문서작성을 마친후 반드시 *.html로 저장해야 브라우저에서 볼 수 있다.
3. HTML의 문서 구조
3.1. 태그
HTML문서에서 명령어들을 태그라하고 태그는 < >로 구분되면 <태그>로 시작하고</태그>로 끝난다.
3.2. HTML의 기본구조
|
<HTML> <HEAD> <TITLE>홈페이지 제목</TITLE> </HEAD> <BODY>본문 내용</BODY> </HTML>
|
HTML은 기본적으로 머리<HEAD>부분과 본문<BODY> 부분으로 구성되어있다.
3.2.1. <HTML> </HTML> : 현재 파일이 HTML 문서임을 알려주는 태그로 시작과 마지막에 입력한다.
3.2.2. <HEAD> </HEAD> : HTML 문서의 제목에 대한 정보가 들어가는데 브라우저에서는 나타나지 않는다. TITLE이 포함된다.
3.2.3. <TITLE> </TITLE> : HTML 문서의 제목을 정의하는 곳으로 여기서 쓴 제목은 브라우저의 제목 표시줄에 출력됩니다.
3.2.4. <BODY> </BODY> : HTML 문서의 본문이 들어가는 곳으로 브라우저에 나타난다.
이 태그에는 6개의 속성을 함께 쓸 수 있다.
3.2.4.1. BODY 속성표
|
속성 |
설명 |
예제 |
|
BACKGROUND |
배경 이미지 지정 |
<body background="back.gif"> |
|
BGCOLOR |
배경색 지정 |
<body bgcolor="white"> |
|
TEXT |
글자 색 지정 |
<body text="black"> |
|
LINK |
링크된 글자의 색 지정 |
<body link="blue"> |
|
VLINK |
방문한 링크 색 지정 |
<body vlink="purple"> |
|
ALINK |
클릭했을 때 링크 색 지정 |
<body alink="red"> |
|
예제 |
<body background="back.gif" text="black" link="blue" vlink="purple" alink="red"> |
|
3.3.메모장을 이용하여 홈페이지 작성하기
3.3.1. 시작>프로그램>보조프로그램>메모장을 클릭하여 메모장을 연다.
3.3.2. 내용을 입력한다.
3.3.3. 파일>다른이름으로 저장을 클릭한다. 다른이름으로 저장 대화상자에서 반드시 파일이름.html(html확장자)로 저장한다.
4. 웹 브라우저에서 보기
웹 브라우저(browser)는 웹 문서를 인터넷상에서 보여주는 툴이다. 주로 많이 사용하는 넷스케이프, 엔터넷익스플로러 등이 있다.
4.1. 시작>프로그램>Internet Explorer을 클릭하여 웹브라우저을 실행시킨다.
4.2. 파일>열기를 클릭한다.
4.3. 열기 대화상자에서 불러올 문서를 직접 입력하거나 찾아보기를 클릭한다.
4.4. 찾아보기를 클릭하여 불러올 문서를 찾는다.
4.5. 확인을 클릭하면 결과가 나타난다.
