홈 페이지 언어를 잡아라

홈 페이지 언어를 잡아라 대단원 6 –중단원 1

1. 홈 페이지의 기본 구조 • 홈 페이지 개념 • 홈 페이지는 웹 사이트에서 제일 처음으로 표시되는 웹 페이지, 또는 특정한 웹 사이트에 저장되어 있는 모든 문서를 의미하는데, 일반적으로 웹 사이트와 홈 페이지를 동일한 의미로 얘기하기도 한다.

1. 홈 페이지의 기본 구조 • 하이퍼텍스트 개념 • 홈 페이지는 하이퍼텍스트 문서 구조로 이루어지는데 하이퍼텍스트 문서는 여러 가지 정보를 하나의 정보로 연결하기 위한 문서이다. 이러한 하이퍼텍스트 문서의 대표적인 사용 예는 윈도 98에서 사용하는 도움말로 이를 이용하면 원하는 도움말을 보다 쉽게 얻을 수 있다.

1. 홈 페이지의 기본 구조 • HTML(Hyper Text Markup Language) • 홈 페이지를 작성하는 대표적인 언어인 HTML은 태그(tag)라고 하는 명령어의 집합이다. • 태그(tag) • <html>, </html> 태그는 HTML 문서임을 표시해주는 태그로서 홈 페이지의 모든 내용은 반드시 <html> 태그 내에 작성되어 있어야 한다.

1. 홈 페이지의 기본 구조 • 홈 페이지의 기본 구조 • HTML 문서는 크게 머리말 부분과 본문 부분으로 나눌 수 있는데 머리말 부분을 표시하는 태그는 <head>, </head>이며 본문 부분을 표시하는 태그는 <bady>, </body>이다. <tile>, </title> 태그 사이에 입력된 문자는 브라우저의 제목 표시줄에 나타난다.

2. 홈 페이지 제목 정하기 • 홈 페이지 제목 태그 • 홈 페이지의 제목은 <title>, </title> 태그 사이에 입력한다. 이렇게 입력한 홈 페이지 제목은 웹 브라우저의 제목 표시줄에 표시된다. 또한 즐겨찾기로 등록할 때에도 이 제목이 주소와 함께 등록된다.

2. 홈 페이지 제목 정하기 • 줄 바꾸기 • 태그로 홈 페이지를 작성할 때에는 <Enter>를 눌러도 줄 바꿈이 되지 않는다. 홈 페이지에서 줄을 바꾸려면 태그를 입력한다. 태그를 입력하면 문단을 구분하는 줄바꿈과 함께 한 줄을 더 띄어준다.

2. 홈 페이지 제목 정하기 • 문자열의 속성 바꾸기 • , : 아래 첨자를 만들어 준다. • , : 위첨자를 만들어 준다. • <hn>, </hn> : 글자 크기를 조절할 때 사용하는 태그로 n의 자리에는 1부터 6까지 숫자를 사용할 수 있다.(예 : H1, H2, H6)

2. 홈 페이지 제목 정하기 • <center>, </center> : 문서를 가운데 기준으로 정렬한다. • , : 문자열을 진하게 표시한다. • , : 문자열을 기울인다. • <blink>, </blink> : 웹 페이지에서 문자열을 깜박이게 한다. • , : 문자열에 밑줄을 표시한다.

3. 배경에 변화 주기 • 글자 속성 변경하기 • , : 본문에 표시되는 글자의 크기를 설정한다. • 글자 색상 변경하기 • <body text=“RGB값”>, </body> : 문서의 기본 글꼴 색상을 설정한다. • , : 본문에 표시되는 글자의 색을 설정한다.

3. 배경에 변화 주기 • 문서 배경 색상 변경하기 • <body bgcolor=“색상”>, </body> : 문서 전체의 배경 색상을 설정한다. • 수평선 삽입하기 • <hr width=“픽셀 값”>, </hr> : 픽셀 값으로 넓이가 설정된 수평선을 삽입한다. • <hr size=“픽셀 값”>, </hr> : 픽셀 값으로 선의 굵기가 설정된 수평선을 삽입한다.

#FFFFFF White #FFA500 Orange #000000 Black #FF0000 Red #808080 Gray #FF00FF Magenta #008000 Green #800080 Purple #FFFF00 Yellow #4B0082 Indigo 색상표

4. 그림에 변화 주기 • 그림 삽입하기 • <img src=“그림의 경로명 또는 파일명”> : 문서에 그림을 삽입할 때 이용한다. • 그림 정렬하기 • <img src=“그림의 경로명 또는 파일명”align=“left/right/center”> : 그림 주위에 있는 문자열을 수평 정렬 위치를 설정할 때 사용한다.

4. 그림에 변화 주기 • 그림 테두리 넣기 • <img src=“그림의 경로명 또는 파일명”, border=“n”> : 그림의 테두리 두께를 표시한다. • 문서에 배경 그림 넣기 • <body background=“그림의 경로명 또는 파일명”>, </body> : 문서의 배경으로 그림 파일을 설정할 때 이용한다.

4. 그림에 변화 주기 • 하이퍼링크 설정하기 • <a href=“파일의 경로명 또는 URL”>, </a> : 다른 문서로 연결되는 하이퍼링크를 삽입할 때 사용한다.

한 걸음 더 • 1. 그 동안 학습한 HTML 언어의 기능을 이용하여 자신을 소개하는 홈 페이지를 만들어 보자. 우선 HTML 기본 태그를 이해하여 글자를 나타내 보자. • 메모장을 실행한다. • 홈 페이지 기본 태그를 입력한다. • 자기 소개 내용을 입력한다. • 글자의 속성을 변경한다. • 웹 문서을 저장하고 웹 브라우저에서 파일을 연다.

한 걸음 더 • 2. 선의 굵기와 색을 설정하고, 그림을 적당한 크기로 삽입해 보자. 배경에 그림이나 색으로 효과를 설정하여 홈 페이지를 만들어 보자. • 메모장을 실행한다. • 홈 페이지 기본 태그를 입력한다. • 본문을 입력하고 글자에 다양한 서식을 설정하는 태그를 이용하여 웹 문서를 꾸민다. • 웹 문서를 저장하고 웹 브라우저에서 파일을 연다.

한 걸음 더 • 3. 그림과 선, 글을 자유롭게 설정하여 삽입하고 글자를 클릭하면 연결된 그림이 보일 수 있도록 하이퍼링크를 설정해 보자. • 메모장을 실행한다. • 홈 페이지 기본 태그를 입력한다. • 태그를 이용하여 선과 그림을 삽입하고 꾸민다. • 그림을 삽입하고 정렬을 설정한다. • 웹 문서를 저장하고 웹 브라우저에서 파일을 연다.

홈 페이지 언어를 잡아라

홈 페이지 언어를 잡아라

Presentation Transcript