홈페이지 만들기 HTML HyperText Markup Language 홈페이지를 만들 때 사용하는 언어 다른 문서로의 하이퍼링크(앵커)를 가지는 텍스트 형태의 문서 HTML 문서의 확장명은 HTML 혹은 HTM 웹 브라우저 HTML 문서를 화면상에 보여주는 프로그램 종류: 네비게이터, MSIE, ...
홈페이지 만들기 홈페이지 작성에 사용하는 프로그램들 네비게이터를 통해 HTML 문서의 결과를 확인 프론트페이지 넷스케이프 컴포저 나모 웹 에디터 메모장을 이용하여 HTML 문서 작성 네비게이터를 통해 HTML 문서의 결과를 확인
홈페이지 만들기 HTML 문서의 구성 <HTML> <HEAD> <TITLE> ... </TITLE> </HEAD> <BODY> ... </BODY> </HTML>
홈페이지 만들기 Tag <HTML>, </HTML>, <HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY>, <.BODY>, ... 대소문자 구별 없음 <HTML>: HTML 문서의 시작 </HTML>: HTML 문서의 끝 <TITLE>: HTML 문서의 제목 시작 </TITLE>: HTML 문서의 제목 끝
홈페이지 만들기 HTML 문서는 여러 개의 태그들로 구성된 문서 간단한 HTML 문서 작성 1 메모장을 이용 자신의 폴더에 simple-1.htm으로 저장 네비게이터 실행 File | Open Page | Choose File 버튼 simple-1.htm 선택 | 열기 | Open
홈페이지 만들기 HTML 문서와 출력 결과를 자세히 비교
홈페이지 만들기 BODY 부분에서 사용하는 태그들 1 머릿글자: <H#> 수평선: <HR> 한 줄을 모두 차지하는 머릿글자를 사용할 때 종류: <H1>, <H2>, <H3>, <H4>, <H5>, <H6> <H1>이 가장 크고 <H6>이 가장 작음 수평선: <HR> 수평선을 그을 때 사용 <HR> </HR>로 이루어지지 않고 <HR>
홈페이지 만들기 줄바꿈: <BR> 문단바꿈: <P> 줄을 바꿀 때 사용 <BR>로만 이루어짐 HTML 문서에서 줄을 바꾸어도 네비게이터 창에서는 줄이 바뀌지 않음 HTML 문서에서 여러 개의 공백은 네비게이터 창에서는 하나의 공백으로 취급 ‘A A’ ‘A A’ ‘A A’ 문단바꿈: <P> 문단을 바꿀 때 사용
홈페이지 만들기 간단한 HTML 문서 작성 2
홈페이지 만들기 BODY 부분에서 사용하는 태그들 2 글자의 형태 <B>: 진하게 출력 <I>: 이탤릭체로 출력 <TT>: 타자체로 출력 <STRONG>: 강조체로 출력 <BLINK>: 깜박이는 글자 출력
홈페이지 만들기 글자의 크기: <FONT SIZE = #> 글자의 크기를 바꿀 때 사용 종류: <FONT SIZE = 1> ~ <FONT SIZE = 7> 보통 화면에 나타나는 글자의 크기는 3 <FONT SIZE = 1>이 가장 작고 <FONT SIZE = 7>이 가장 큼
홈페이지 만들기 간단한 HTML 문서 작성 3
홈페이지 만들기 BODY 부분에서 사용하는 태그들 3 문장의 가운데 정렬: <CENTER> 문장을 화면의 가운데에 정렬할 때 입력 형태 그대로 출력하기: <PRE> HTML 문서에 입력한 내용을 네비게이터 창에 그대로 출력 여러 가지의 수평선들 <HR align=left | right | center width=#% size=정수>
홈페이지 만들기 길이 조정 <HR width=30%> <HR align=center width=30%> 위치 조정 <HR align=left width=30%> <HR align=right width=30%> 두께 조정 <HR width=30% size=1> <HR width=100% size=20>
홈페이지 만들기 간단한 HTML 문서 작성 4
홈페이지 만들기 하이퍼링크(앵커) 단어나 그림을 통해 다른 문서로 연결 <A href=파일이름>화면에 출력할 단어</A> 파일이름: ‘화면에 출력할 단어’를 클릭했을 때 연결이 되는 파일(문서, 페이지) 화면에 출력할 단어 화면에 출력되는 글자 파란색에 밑줄이 생김 단어 위로 포인터를 옮기면 포인터가 손모양으로 바뀜
홈페이지 만들기 예: <A href=./simple-3.htm>책소개</A> <A href=./태극기설명.htm><IMG src=./태극기.gif> </A> <A href=http://www.chollian.net/>천리안 홈페이지</A> <A href=ftp://ftp.unitel.ac.kr/pub/>유니텔 FTP 서비스</A> <A href=news://news.kreonet.re.kr/han.*>연구전산망 han 뉴스그룹</A> <A href=mailto:mjlee123@chollian.net>전자우편을 보내려면 여기를 클릭...</A>
홈페이지 만들기 간단한 HTML 문서 작성 5
홈페이지 만들기 문서에 그림넣기 <IMG src=filename align=top | middle | bottom | left | right width=pixels | percentage height=pixels | percentage border=pixels vspace=pixels hspace=pixels alt=text>
홈페이지 만들기 그림넣기: Align 효과
홈페이지 만들기 그림넣기: Width와 height 효과
홈페이지 만들기 그림넣기: Border, vspace, hspace
홈페이지 만들기 리스트의 표현 순서가 없는 리스트 <UL> 리스트의 이름 <LI> 항목 1 <LI> 항목 n </UL>
홈페이지 만들기 순서가 있는 리스트 <OL> 리스트의 이름 <LI> 항목 1 <LI> 항목 2 <LI> 항목 n </OL>
홈페이지 만들기 순서가 있는 다단 리스트 <OL>실용 컴퓨터 목차 <LI>윈도 98 <OL> <LI>WWW
홈페이지 만들기 정의 리스트 용어와 그에 대한 설명 들여쓰기 <DL> <DT> World Wide Web <DD> WWW는 하이퍼미디어 정보를 전달하기 위한 시스템이며 클라이언트/서버 모델에 따라 작용합니다. <DD> WWW 사용자들은 하이퍼미디어 혹은 하이퍼텍스트 정보를 볼 수 있는 특별한 종류의 프로그램을 갖고 있어야 합니다. </DL>
홈페이지 만들기 리스트의 표현
홈페이지 만들기 표(테이블) 만들기 1행 1열 표 <TABLE border=1> <tr><td>내용 입력</td></tr> </TABLE> border: 표의 두께, 픽셀 단위 <tr>: 표의 행 <td>: 표의 열
홈페이지 만들기 2행 2열 표 다음은 어떤 표가 될까요? <TABLE border=1> <tr><td>(1, 1) 내용</td><td>(1, 2) 내용</td></tr> <tr><td>(2, 1) 내용</td><td>(2, 2) 내용</td></tr> </TABLE> 다음은 어떤 표가 될까요? <TABLE border=2> <tr><td colspan=2>(1, 1)과 (1, 2)가 합쳐짐</td></tr> <tr><th>(2, 1) 내용</th><th>(2, 2) 내용</th></tr>
홈페이지 만들기 colspan=2: 1개의 열이 행으로 2개의 열을 차지 <th>: 표의 열, 표 안의 내용을 진하게 출력
홈페이지 만들기 문서의 배경그림과 배경색 <BODY> <BODY background=filename 배경그림이 없고, 배경색은 흰색, 글자는 검은색, 하이퍼링크(앵커)는 파란색, 방문한 하이퍼링크는 진한 청색 <BODY background=filename bgcolor=#rrggbb text=#rrggbb link=#rrggbb vlink=#rrggbb>
홈페이지 만들기 background: 문서의 배경으로 사용할 그림의 파일이름을 지정 bgcolor: 배경색을 지정 text: 글자의 색을 지정 link: 하이퍼링크의 색을 지정 vlink: 방문한 하이퍼링크의 색을 지정 색(rrggbb) 빛의 삼원색(red, green, blue)의 혼합으로 표현 표현형식: #rrggbb로 2자리의 16진수를 사용 빨간빛을 0에서부터 255까지의 256 단계로 구분 rr=0: 빨간빛이 전혀 없음, rr=ff: 가장 강한 빨간빛
홈페이지 만들기 빛이 전혀 없을 때(빨간빛, 초록빛, 파란빛 모두가 00)를 #000000로 표현하고 이것은 검은색을 나타냄 자주 사용하는 색의 표현 #ff0000 빨간색 #ffffff 흰색 #00ff00 초록색 #ffff00 노란색 #0000ff 파란색 #ff00ff 보라색 #000000 검은색 #00ffff 청녹색
홈페이지 만들기 배경그림을 가지는 HTML 문서
홈페이지 만들기 프레임 만들기 네비게이터 창을 여러 개의 영역(프레임)들로 구분하여 사용 프레임을 사용하기 위한 준비작업 프레임의 사용을 정의하는 HTML 문서 프레임에 출력할 HTML 문서들
홈페이지 만들기 프레임의 사용을 정의하는 HTML 문서 <HTML> <HEAD> </HEAD> <FRAMESET> </FRAMESET> </HTML>
홈페이지 만들기 <FRAMESET>: 네비게이터 창을 나누어라 <HTML> <HEAD> <TITLE>프레임 만들기</TITLE> </HEAD> <FRAMESET cols="50%, 50%"> <FRAME src="./left.htm"> <FRAME src="./right.htm"> </FRAMESET> </HTML>
홈페이지 만들기 <FRAMESET> 태그의 일반적인 형식 <FRAMESET cols=“열 너비, 열 너비, ...”> <FRAMESET rows=“행 높이, 행 높이, ...”> <FRAMESET> 태그는 cols와 rows 중에서 하나는 반드시 포함해야 함. <FRAME src=“./left.htm”> 첫 번째 (왼쪽) 프레임에 출력할 HTML 문서가 left.htm임을 의미하며 실제로 left.htm은 다음과 같다.
홈페이지 만들기 <HTML> <HEAD> </HEAD> <BODY> <CENTER><H2>프레임 1</H2></CENTER> </BODY> </HTML>
홈페이지 만들기 Cols 네비게이터 창을 세로로 분할할 때 사용 형식: <FRAMESET cols=“열 너비, 열 너비, ...”> 열 너비는 아래의 것들 중에서 하나를 선택 값%: 세로를 100%로 간주 값*: 비율 값: 픽셀 단위 실습
홈페이지 만들기 Rows 네비게이터 창을 가로로 분할할 때 사용 형식: <FRAMESET rows=“행 높이, 행 높이, ...”> 행 높이는 아래의 것들 중에서 하나를 선택 값%: 가로를 100%로 간주 값*: 비율 값: 픽셀 단위 실습
홈페이지 만들기 Cols와 rows를 이용한 프레임 설정
홈페이지 만들기 <FRAME> 속성들 Noresize <FRAMESET cols="30%, 70%"> <FRAME src=“frame-1.htm”, noresize> <FRAME src=“http://www.chollian.net/”, noresize> </FRAMESET> 마우스 드래그를 이용하면 프레임의 크기를 변경할 수 있지만 noresize 속성을 가진 프레임은 드래그하여도 크기가 변경되지 않음.
홈페이지 만들기 Name <FRAMESET cols="30%, 70%"> <FRAME src="frame-1.htm" name="f1"> <FRAME src="frame-2.htm" name="f2"> </FRAMESET> Name 속성은 프레임에 이름을 부여할 때 사용. 여러 개의 프레임들이 있는 경우에 출력할 내용을 어느 프레임에 나타낼 것인가를 지정할 때 사용
홈페이지 만들기 frame-1.htm에 다음과 같은 내용이 있다면 <A href=./intro.htm target=f2>1. 인사말</A> 네비게이터 창의 왼쪽 프레임에서 '1. 인사말'을 클릭하면 인사말 페이지(intro.htm)는 target에서 정해준 오른쪽 프레임(f2)에 출력됩니다. 만약 위의 앵커에서 target을 빠뜨리면 인사말 페이지는 왼쪽 프레임(f1)에 출력될 것입니다.
홈페이지 만들기 프레임을 이용한 간단한 홈페이지 만들기