1 2006 2006년 봄학기 봄학기 문양세 문양세 강원대학교 강원대학교 컴퓨터과학과 컴퓨터과학과 웹 프로그래밍 프로그래밍 (Web Programming) (Web Programming) HTML (Hypertext Markup Language) HTML (Hypertext Markup Language) Page 2 Web Programming by Yang-Sae Moon 웹 페이지 페이지 제작 제작 단계 단계 및 환경 환경 Hypertext Markup Language 주제와 내용선정 디자인 웹 페이지 구조 저작권 확인 웹 페이지 등록 웹 페이지 홍보 어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정 로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성 웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을 종이에 그려본다. 자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의 인터넷 서비스 제공업체인 ISP의 웹 서버에 등록 검색엔진에 등록하여 모든 사용자에게 홍보
21
Embed
웹프로그래밍 (Web Programming) HTML (Hypertext …ysmoon/courses/2006_1/wp/05.pdfHTML (Hypertext Markup Language) Page 2 Web Programming by Yang-Sae Moon 웹페이지제작단계및환경
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
20062006년년 봄학기봄학기
문양세문양세
강원대학교강원대학교 컴퓨터과학과컴퓨터과학과
웹웹 프로그래밍프로그래밍 (Web Programming)(Web Programming)
HTML (Hypertext Markup Language)HTML (Hypertext Markup Language)
Page 2Web Programmingby Yang-Sae Moon
웹웹 페이지페이지 제작제작 단계단계 및및 환경환경Hypertext Markup Language
주제와 내용선정주제와 내용선정
디자인디자인
웹 페이지 구조웹 페이지 구조
저작권 확인저작권 확인
웹 페이지 등록웹 페이지 등록
웹 페이지 홍보웹 페이지 홍보
어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정어떤 내용을 담을 것인지, 어떤 단계로 제작할 것인지 결정
로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성로고,아이콘 또는 멀티미디어 등 다양한 소재를 어떻게 꾸밀 것인지 구성
웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을종이에 그려본다.
웹 페이지 내용을 분류/정리 후 구조적으로 구성하여 흐름도나 사이트 맵을종이에 그려본다.
자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의자바 스크립트나 그림 등을 사용할 때, 저작권에 대한 내용에 주의
인터넷 서비스 제공업체인 ISP의 웹 서버에 등록인터넷 서비스 제공업체인 ISP의 웹 서버에 등록
검색엔진에 등록하여 모든 사용자에게 홍보검색엔진에 등록하여 모든 사용자에게 홍보
2
Page 3Web Programmingby Yang-Sae Moon
웹웹 페이지페이지 제작제작 시시 고려사항고려사항
웹 페이지 로딩 시간이 10초 이하로 한다 (너무 복잡하지 않게…)
웹 페이지의 제목을 의미 있게 붙인다.
혼동을 일으키기 쉬운 링크를 만들지 않는다.
방문객이 웹사이트의 구조를 쉽게 파악할 수 있도록 구성한다.
좌우/상하로 길게 스크롤되는 문서를 만들지 않는다.
각 페이지마다 이전/상위 페이지로의 링크를 만들어 페이지간의 이동을 쉽게 한다.
사이트내의 링크는 상대 경로를 사용한다(Portable)
지나치게 애니메이션을 많이 사용해서 사용자의 눈을 피로하게 하지 않는다
특정한 환경을 가정하고 웹 페이지를 만드는 것은 좋은 자세가 아니다.
웹사이트의 내용이 계속 업데이트(update) 되어야 한다.
Hypertext Markup Language
Page 4Web Programmingby Yang-Sae Moon
정의WWW 상의 문서를 기술하기 위한 언어로서, 플랫폼에 관계없이 사용 가능한 Hypertext 문서를 만들 수 있는 Markup 언어이다.
Markup 언어일반 텍스트 문서에 “<”와 “>”로 둘러 쌓인 약속된 Tag를 붙임으로써, Tag에 내포된 기능을
Web Brower가 인식하여 실행할 수 있도록 지시(markup)해 주는 기능을 하는 언어
장점
• Web 상에서 손쉽게 Hypertext 및 Hypermedia 기능을 갖는 문서를 만든다.
• Web 상에서 문서를 쉽고 빠르게 다운로드 받는다.
• 이식성(Portability)이 높으며 사용이 편리하다.
단점
• 고정된 Tag만을 제공하여 사용자가 새로운 Tag를 정의할 수 없다.
• 문서 자체가 구조화되어 있지 않아(semi-structured), 효과적인 검색, 재사용, 검증이 어
렵다.
HTML HTML 개요개요Hypertext Markup Language
3
Page 5Web Programmingby Yang-Sae Moon
텍스트(Text)
• HTML 문서에 포함된 텍스트는 웹 문서의 본문에 해당
• 사용자가 웹 문서를 읽을 때, 화면에 나타나는 텍스트 자체를 의미
태그(Tag)
• “<”과 “>” 기호로 둘러 쌓은 문서의 중간 중간에 붙여주는 일종의 꼬리표
• 태그의 형식 <tag>문서의 문자열(텍스트)… </tag>
− <tag>를 시작 태그, </tag>를 종료 태그라 한다.
− 시작 태그에 의해 지정된 기능이 부여되고, 그 기능은 종료 태그를 만나면 끝난다.
HTML HTML 구성요소구성요소 (1/3)(1/3)Hypertext Markup Language
HTMLdocument 텍스트(Text)
태그(Tag) 스크립트(Script)
Page 6Web Programmingby Yang-Sae Moon
태그(Tag) (계속)
• 태그의 속성(attribute)
− 태그는 속성을 가질 수 있다.
− 속성은 지정된 태그에 대하여 보다 자세한 환경과 정보를 규정한다. (예: color, size)
• 태그의 종류: 복합/단독 태그
− 복합 태그: <title>…</title>, <p>…</p>, <body>…</body>
− 단독 태크: <br>, <hr>
• 태그의 종류: 속성의 유무
− 속성이 꼭 필요한 태그: <a href="...">...</a>, <img src="...">
− 속성이 옵션인 태그: <hr noshade>
− 속성이 없는 태그: <em>...</em>
• 태그의 특성
− 대소문자의 구별이 없다.
− 복합 태크는 엇갈려서 사용할 수 없다. (wrong: <big><blink>잘못된 예제</big></blink>
− 포함할 수 없는 태그를 포함시킬 수 없다. (wrong: <h1><h2>잘못된 예제</h2></h1>
HTML HTML 구성요소구성요소 (2/3)(2/3)Hypertext Markup Language
4
Page 7Web Programmingby Yang-Sae Moon
스크립트(Script)
• Client Side Script
- 웹 클라이언트(브라우저)에서 수행(execute)되는 간단한 명령어 집합
- 일반 프로그래밍 언어에 비해 간단하고, Compile이 아닌 Interpret 방식에 의해 수행됨
- 예: JavaScript, VBScript
• Server Side Script
− 웹 클라이언트에서 요청한 내용을 처리하기 위해 웹 서버에서 수행되는 프로그램
− 예: ASP, PHP, JSP
HTML HTML 구성요소구성요소 (3/3)(3/3)Hypertext Markup Language
Page 8Web Programmingby Yang-Sae Moon
HTML 문서의 구조
• HTML 문서의 머리말: 보통 문서에 대한 제목과 전반적인 정보를 담는 영역
• HTML 문서의 본문: 대부분의 HTML 문서의 내용이 바로 이 영역에 해당
HTML 문서의 특성
• 공백(space) 문자가 연속된 경우에는 한 글자의 공백 문자로만 인식
• 엔터(enter)나 탭(tab)도 하나의 공백 문자로 인식
HTML HTML 문서의문서의 기본기본 구성구성 및및 특성특성Hypertext Markup Language
<html> <head>
머리말 (제목) --> ① HTML 문서의 머리말 부분</head><body>
웹 페이지의 본문 --> ② HTML 문서의 본문 부분</body>
</html>
5
Page 9Web Programmingby Yang-Sae Moon
<HTML>…</HTML>HTML 문서임을 의미하며, 모든 HTML 문서는 <HTML>로 시작하여 </HTML>로 끝난다.
<HEAD>…</HEAD>HTML 문서의 머리말(header) 영역을 나타낸다.
<TITLE>…</TITLE>HTML 문서의 제목을 브라우저의 타이틀 바에 표시한다.
HTML HTML 태그태그 -- <HTML>, <HEAD>, <TITLE><HTML>, <HEAD>, <TITLE>Hypertext Markup Language