학습목표 학습목차 홈페이지에 대한 기본개념을 이해할 수 있습니다. 홈페이지 파일 작성 과정 실습으로 확인합니다. HTML 문서 기본구조와 문법을 이해할 수 있습니다. 학습목차 홈페이지 제작개요 홈페이지 제작에 필요한 기술 홈페이지 파일 작성과정 HTML 기본 문법 <head> 태그와 속성 <body> 태그와 속성
홈페이지 제작 개요 홈페이지 웹 브라우저에 도메인 네임이나 IP를 입력하여 나타나는 모양 주소/사이트와는 차이
홈페이지 제작 개요 홈페이지 제작시 고려사항 ① 전체적인 윤곽을 구상. ② 내용에 충실. ③ 너무 많은 내용이나 주제를 취급하는 것 자제. ④ 그림은 가급적 지양. ⑤ 다른 홈페이지를 많이 방문.
홈페이지의 구성 다양한 그림으로 구성 각각 별개의 파일 수많은 파일들로 구성 하이퍼링크 문서들의 계층구조
홈페이지 제작에 필요한 기술 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
홈페이지 설계 및 구축 – 본 강좌내용 HTML(Hyper Text Markup Language) - 브라우저에 표시하는 방법 - 화면 디자인 CSS(Cascading Style Sheet) - HTML 보다 정교하게 화면 디자인 - HTML 보완 Web Server 운영방법 - 제작된 홈페이지에 접속
홈페이지 문서 = HTML 문서 = 웹문서 과거의 워드프로세서 조작 방식 HTML 보석글, 하나워드프로세서 등 모니터에서 편집 내용이 출력되는 매체는 프린터 .h3 ---------> 아래 글자를 h3 크기로 출력 우리나라 만세 HTML 글자크기 조절 : .H3 대신 <H3>사용 점 대신 <> 기호 사용 <H3> : 태그(Tag)라고 함 태그 <b>, <table>, <img> 등 HTML 학습 : 태그의 기능 학습 출력되는 매체는 모니터 위주
HTML 편집기와 HTML 문서 작성 과정 텍스트 편집기 ASCII American Standard Code for Information Interchange 코드로 파일을 생성하고 수정할 수 있는 편집기 메모장(Notepad) UltraEdit, Editplus, Pspad, AcroEdit
HTML 편집기와 HTML 문서 작성 과정 HTML FILE : ASCII FILE HTML 편집기 태그와 내용을 입력할 편집기 저장할 때는 반드시 htm, html을 확장자 ex) test.htm ≠ test.html 웹 브라우저 Internet Explorer, Netscape, Firefox, Opera.. 저장된 html 파일의 viewer 만들 때는 html 편집기를 사용, 그 결과를 볼 때는 웹 브라우저 사용
메모장을 이용한 간단한 실습 영상을 더블 클릭하시면 전체화면으로 볼 수 있습니다.
HTML 문서 기본구조와 작성 규칙 HTML 문서의 기본구조 대부분의 태그는 시작하는 태그와 끝내는 태그로 구성 하나의 HTML 파일은 반드시 <HTML>로 시작해서 </HTML>로 종료 <html>과 </html>사이에는 두 부분으로 구성된다 <head>….</head> : 헤드부분 <body>… </body> : 내용부분 <HTML> <HEAD> - - - - </HEAD> <body> </body> </HTML>
HTML 문서 기본구조와 작성 규칙 하나의 HTML 파일에는 헤드부분과 내용부분이 반드시 하나씩만 존재 헤드부분과 내용부분의 위치가 바뀌어서는 안됨 대소문자는 동일하므로(A=a) 혼용해도 상관없음 HTML 파일에서 줄 바꿈이나 2칸 이상의 공백은 한칸으로 인정됨 다시 말해 태그들을 한줄로 나열해서 사용해도 상관없음 줄 바꿈과 들여 쓰기를 한 것은 단지 작성하는데 보기에 편리하도록 한 것 위와 같은 규칙을 반드시 지켜줘야 웹 브라우저에 정상적으로 출력되므로 반드시 숙지 <HTML> <HEAD> - - - - </HEAD> <body> </body> </HTML>
HTML 구조와 작성규칙 실습 영상을 더블 클릭하시면 전체화면으로 볼 수 있습니다.
align = left |center|right 태그 설명을 위한 일반 규칙 속성(Attribute) : 태그의 기능을 확장하고 다양한 효과를 적용 하나의 태그는 2개 이상의 속성을 가질 수 있음. 속성은 대부분 속성값을 이용하여 태그의 기능을 확장. 속성값은 가급적 “”(이중부호)의 사용을 권장. 속성값은 이미 지정된 값과 사용자 지정값이 있음. 태그와 속성의 사용 예 <meta http-equiv="Content-Type" content="text/html"> 태그 속성 = 속성값 속성 = 속성값 속성값의 표현 여러 속성값 중 하나만 선택 사용자가 임의대로 작성하는 속성값 align = left |center|right marquee= "문자열"
Head 부분 태그 <head> - - - </head> 브라우저의 내용부분에 출력되지 않음 웹 문서의 설명부분 Title, meta 등 <HTML> <HEAD> - - - - </HEAD> <body> </body> </HTML> <title> - - - </title> 태그 브라우저의 제목표시줄에 나타나는 웹 문서의 제목 <head> <title>강릉원주대학교</title> </head>
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="고대삼국사에 대해 다룹니다">
Head 부분 태그 <meta> - - - </meta> 태그 예2 : 정해진 시간후 자동으로 다른 웹 문서로 이동 (5초가 지나면 자동으로 it.gwnu.ac.kr 사이트로 이동) <meta http-equiv=refresh content=“5; url=http://it.gwnu.ac.kr”> 01-1.html
body 태그 웹 문서의 실제 내용을 표현 HEAD에 포함되는 태그를 제외한 모든 태그들을 포함 속성 및 속성값 <body bgcolor="색상값"> 브라우저의 배경화면 나타날 색상 지정 <body background="URL"> 브라우저의 배경화면 나타날 이미지 파일의 URL 지정 <body bgproperties=fixed> 배경화면 이미지는 고정시키고 내용들만 스크롤 <body text="색상값"> 문자의 색상 지정(영어 색상이름이나 RGB 값) <body link="색상값"> 링크의 색상 지정(영어 색상이름이나 RGB 값) <body vlink="색상값"> 방문한 링크의 색상 지정(영어 색상이름이나 RGB 값) <body alink="색상값"> 선택한 링크의 색상 지정(영어 색상이름이나 RGB 값)
body 태그 <HTML> <HEAD> - - - - </HEAD> <BODY> - - - - </HEAD> <BODY> </BODY> </HTML>
body 태그 홈페이지의 배경화면은 노란색으로 지정 01_2.html <HTML> <HEAD> <BODY bgcolor = yellow> </BODY> </HTML> 01_2.html
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>
body 태그 홈페이지의 배경화면을 지정한 이미지 파일로 지정 01_4.html <HTML> <HEAD> <BODY background="naver_logo.gif"> </BODY> </HTML> 01_4.html ※ bgcolor과 background 속성이 같이 쓰이게 되면 background 속성이 우선
body 태그 예제 홈페이지의 배경화면은 지정한 이미지 파일로 설정하고 내용이 많아 스크롤 할 때, 이미지는 고정된 상태에서 내용들만 움직이게 한다. <HTML> <HEAD> </HEAD> <BODY background="naver_logo.gif" bgproperties="fixed"> 브라우저에 출력되는 내용들<br> </BODY> </HTML> 01_5.html