Download presentation
Presentation is loading. Please wait.
1
학습목표 학습목차 홈페이지에 대한 기본개념을 이해할 수 있습니다. 홈페이지 파일 작성 과정 실습으로 확인합니다.
HTML 문서 기본구조와 문법을 이해할 수 있습니다. 학습목차 홈페이지 제작개요 홈페이지 제작에 필요한 기술 홈페이지 파일 작성과정 HTML 기본 문법 <head> 태그와 속성 <body> 태그와 속성
2
홈페이지 제작 개요 홈페이지 웹 브라우저에 도메인 네임이나 IP를 입력하여 나타나는 모양 주소/사이트와는 차이
3
홈페이지 제작 개요 홈페이지 제작시 고려사항 ① 전체적인 윤곽을 구상. ② 내용에 충실.
③ 너무 많은 내용이나 주제를 취급하는 것 자제. ④ 그림은 가급적 지양. ⑤ 다른 홈페이지를 많이 방문.
4
홈페이지의 구성 다양한 그림으로 구성 각각 별개의 파일 수많은 파일들로 구성 하이퍼링크 문서들의 계층구조
5
홈페이지 제작에 필요한 기술 Client Side Include HTML(Hyper Text Markup Language)
CSS(Cascading Style Sheet) JavaScript Server Side Include PL : PHP, ASP, JSP DB : MySQL, MSSQL, Web Server : Apache, IIS
6
홈페이지 설계 및 구축 – 본 강좌내용 HTML(Hyper Text Markup Language) - 브라우저에 표시하는 방법
- 화면 디자인 CSS(Cascading Style Sheet) - HTML 보다 정교하게 화면 디자인 - HTML 보완 Web Server 운영방법 - 제작된 홈페이지에 접속
7
홈페이지 문서 = HTML 문서 = 웹문서 과거의 워드프로세서 조작 방식 HTML 보석글, 하나워드프로세서 등 모니터에서 편집
내용이 출력되는 매체는 프린터 .h3 > 아래 글자를 h3 크기로 출력 우리나라 만세 HTML 글자크기 조절 : .H3 대신 <H3>사용 점 대신 <> 기호 사용 <H3> : 태그(Tag)라고 함 태그 <b>, <table>, <img> 등 HTML 학습 : 태그의 기능 학습 출력되는 매체는 모니터 위주
8
HTML 편집기와 HTML 문서 작성 과정 텍스트 편집기 ASCII
American Standard Code for Information Interchange 코드로 파일을 생성하고 수정할 수 있는 편집기 메모장(Notepad) UltraEdit, Editplus, Pspad, AcroEdit
9
HTML 편집기와 HTML 문서 작성 과정 HTML FILE : ASCII FILE HTML 편집기
태그와 내용을 입력할 편집기 저장할 때는 반드시 htm, html을 확장자 ex) test.htm ≠ test.html 웹 브라우저 Internet Explorer, Netscape, Firefox, Opera.. 저장된 html 파일의 viewer 만들 때는 html 편집기를 사용, 그 결과를 볼 때는 웹 브라우저 사용
10
메모장을 이용한 간단한 실습 영상을 더블 클릭하시면 전체화면으로 볼 수 있습니다.
11
HTML 문서 기본구조와 작성 규칙 HTML 문서의 기본구조 대부분의 태그는 시작하는 태그와 끝내는 태그로 구성
하나의 HTML 파일은 반드시 <HTML>로 시작해서 </HTML>로 종료 <html>과 </html>사이에는 두 부분으로 구성된다 <head>….</head> : 헤드부분 <body>… </body> : 내용부분 <HTML> <HEAD> </HEAD> <body> </body> </HTML>
12
HTML 문서 기본구조와 작성 규칙 하나의 HTML 파일에는 헤드부분과 내용부분이 반드시 하나씩만 존재
헤드부분과 내용부분의 위치가 바뀌어서는 안됨 대소문자는 동일하므로(A=a) 혼용해도 상관없음 HTML 파일에서 줄 바꿈이나 2칸 이상의 공백은 한칸으로 인정됨 다시 말해 태그들을 한줄로 나열해서 사용해도 상관없음 줄 바꿈과 들여 쓰기를 한 것은 단지 작성하는데 보기에 편리하도록 한 것 위와 같은 규칙을 반드시 지켜줘야 웹 브라우저에 정상적으로 출력되므로 반드시 숙지 <HTML> <HEAD> </HEAD> <body> </body> </HTML>
13
HTML 구조와 작성규칙 실습 영상을 더블 클릭하시면 전체화면으로 볼 수 있습니다.
14
align = left |center|right
태그 설명을 위한 일반 규칙 속성(Attribute) : 태그의 기능을 확장하고 다양한 효과를 적용 하나의 태그는 2개 이상의 속성을 가질 수 있음. 속성은 대부분 속성값을 이용하여 태그의 기능을 확장. 속성값은 가급적 “”(이중부호)의 사용을 권장. 속성값은 이미 지정된 값과 사용자 지정값이 있음. 태그와 속성의 사용 예 <meta http-equiv="Content-Type" content="text/html"> 태그 속성 = 속성값 속성 = 속성값 속성값의 표현 여러 속성값 중 하나만 선택 사용자가 임의대로 작성하는 속성값 align = left |center|right marquee= "문자열"
15
Head 부분 태그 <head> - - - </head>
브라우저의 내용부분에 출력되지 않음 웹 문서의 설명부분 Title, meta 등 <HTML> <HEAD> </HEAD> <body> </body> </HTML> <title> </title> 태그 브라우저의 제목표시줄에 나타나는 웹 문서의 제목 <head> <title>강릉원주대학교</title> </head>
16
Head 부분 태그 <meta> - - - </meta> 태그
문서의 작성자, 날짜, 주요 단어 등 웹 브라우저의 내용에는 나타나지 않는 웹 문서의 일반 정보를 나타냄 속성 및 속성값 <meta name = author|keywords|content> 작성자, 핵심어, 요약 <meta content = "문자열"> 각 name의 값 <meta http-equiv = refresh> 해당문서를 새롭게 고침 - Keywords와 Content의 content는 정보검색 엔진의 키워드로 사용 <meta name="Author" content="김재호"> <meta name="Keywords" content="고대삼국사"> <meta name="Content" content="고대삼국사에 대해 다룹니다">
17
Head 부분 태그 <meta> - - - </meta> 태그
예2 : 정해진 시간후 자동으로 다른 웹 문서로 이동 (5초가 지나면 자동으로 it.gwnu.ac.kr 사이트로 이동) <meta http-equiv=refresh content=“5; url= 01-1.html
18
body 태그 웹 문서의 실제 내용을 표현 HEAD에 포함되는 태그를 제외한 모든 태그들을 포함
속성 및 속성값 <body bgcolor="색상값"> 브라우저의 배경화면 나타날 색상 지정 <body background="URL"> 브라우저의 배경화면 나타날 이미지 파일의 URL 지정 <body bgproperties=fixed> 배경화면 이미지는 고정시키고 내용들만 스크롤 <body text="색상값"> 문자의 색상 지정(영어 색상이름이나 RGB 값) <body link="색상값"> 링크의 색상 지정(영어 색상이름이나 RGB 값) <body vlink="색상값"> 방문한 링크의 색상 지정(영어 색상이름이나 RGB 값) <body alink="색상값"> 선택한 링크의 색상 지정(영어 색상이름이나 RGB 값)
19
body 태그 <HTML> <HEAD> - - - - </HEAD> <BODY>
</HEAD> <BODY> </BODY> </HTML>
20
body 태그 홈페이지의 배경화면은 노란색으로 지정 01_2.html <HTML> <HEAD>
<BODY bgcolor = yellow> </BODY> </HTML> 01_2.html
21
body 태그 홈페이지의 배경화면은 노란색, 문자는 빨강색으로 지정. 01_3.html <HTML>
<HEAD> </HEAD> <BODY bgcolor=yellow text=red> 열린사이버대학교 </BODY> </HTML> 01_3.html ※ BODY 태그의 TEXT 속성값은 본문 내에서 색상 변경이 없으면 본문 글자 전체에 영향을 미침. 홈페이지의 링크는 파란색, 방문한 링크는 붉은색, 선택한 링크는 녹색으로 지정. <body link=blue vlink=red alink=green>
22
body 태그 홈페이지의 배경화면을 지정한 이미지 파일로 지정 01_4.html <HTML> <HEAD>
<BODY background="naver_logo.gif"> </BODY> </HTML> 01_4.html ※ bgcolor과 background 속성이 같이 쓰이게 되면 background 속성이 우선
23
body 태그 예제 홈페이지의 배경화면은 지정한 이미지 파일로 설정하고 내용이 많아
스크롤 할 때, 이미지는 고정된 상태에서 내용들만 움직이게 한다. <HTML> <HEAD> </HEAD> <BODY background="naver_logo.gif" bgproperties="fixed"> 브라우저에 출력되는 내용들<br> </BODY> </HTML> 01_5.html
Similar presentations
![1/55 4.2 편집 기능 사용하기 – 실습 1 글자 모양을 바꾸고 싶은 곳을 블록 설정 [ 글자 모양 ] 대화 상자에서 [ 글꼴 ] ‘ 궁서체 ’, [ 글자 색 ] ‘ 토마토색 ’ 으로 선택 → [ 설정 ] 클릭 → 글자 모양 변경.](/40/11034426/big_thumb.jpg "1/55 4.2 편집 기능 사용하기 – 실습 1 글자 모양을 바꾸고 싶은 곳을 블록 설정 [ 글자 모양 ] 대화 상자에서 [ 글꼴 ] ‘ 궁서체 ’, [ 글자 색 ] ‘ 토마토색 ’ 으로 선택 → [ 설정 ] 클릭 → 글자 모양 변경.>")
