제1장 HTML의 기초
Download
Report
Transcript 제1장 HTML의 기초
제1장 HTML의 기초
1.1 웹의 개요
웹의 소개
웹과 관련된 문서 표준 언어
웹 브라우저의 소개
1.1.1 웹의 소개
웹의 역사
World Wide Web, W3, WWW
Tim Berners-Lee
1989년 CERN(The European Laboratory
for Particle Physics)의 프로젝트에서 기원
효율적인 정보 공유를 위하여 제작된 분산
하이퍼미디어 시스템(Distributed
Hypermedia System)
1.1.1 웹의 소개
Marc Andreessen의 모자익(Mosaic)
최초의 웹 브라우저
웹의 대중화에 기여
넷스케이프 커뮤니케이션(Netscape
Communications)사를 설립
모자익을 기본으로 한 넷스케이프 네비게이터
(Netscape Navigator)를 개발
1.1.1 웹의 소개
웹의 특징
통합적 환경
웹 브라우저를 통한 기존 서비스의 이용
편리한 사용환경
그래픽 기반의 사용자 환경(GUI : Graphic
User Interface)
1.1.1 웹의 소개
분산 하이퍼미디어 시스템
멀티미디어 서비스의 제공
Hypertext + Multimedia
텍스트, 사운드, 이미지, 동화상
하이퍼링크(Hyperlink) 지원
웹 문서간의 이동(navigation)이 가능
1.1.1 웹의 소개
웹의 구조
클라이언트-서버(Client-Server) 구조
서버(Server) : 네트워크 상에서 상대편 컴
퓨터가 정보를 요청할 때 정보를 제공하는
컴퓨터
클라이언트(Client) : 사용자 쪽에서 정보를
요청하는 컴퓨터
그림 1.3
서버
서버
인터넷
클라이언트
클라이언트
클라이언트-서버 구조
1.1.1 웹의 소개
HTTP(HyperText Transfer Protocol)
통신 프로토콜(Protocol)
컴퓨터간의 통신을 위한 규약
오디오, 이미지, 동화상과 같은 다양한 인
터넷 서비스를 구현
클라이언트
웹서버
HTML 문서
<HTML>
<HTML>
<HEAD>
<HEAD>
….
….
브라우저
인터넷
멀티미디어
서버
서버
웹 서비스의 구조
데이터
1.1.1 웹의 소개
인터넷에 사용되는 다양한 프로토콜
예> http://WebIR.dongguk.ac.kr
표 1.1 서로 다른 프로토콜의 URL 예
프로토콜
HTTP
FTP
Gopher
URL 예
http://WebIR.dongguk.ac.kr
ftp://ftp.NCSA.uiuc.edu
gopher://gopher.tc.umn.co.kr
Telnet
telnet://dongguk.ac.kr
Usenet
news://news.kaist.ac.kr
1.1.2 웹과 관련된 문서 표준 언어
SGML(Standard Generalized Markup
Language)
HTML(HyperText Markup Language)
XML(eXtensible Markup Language)
1.1.2 웹과 관련된 문서 표준 언어
SGML
ISO(International Standard Organization) 표준
이기종간의 컴퓨터나 프로그램에서 작성된 문서들
의 완벽한 교환을 위해 개발
문서의 물리적 표현 방식은 배제하고 문서의 구성
요소와 구조 등 논리적 특성을 기술
다른 언어의 정의가 가능한 메타 언어(Meta
Language)
www.isgmlug.org
1.1.2 웹과 관련된 문서 표준 언어
HTML
웹 문서를 작성하기 위한 언어
CERN의 Tim Berners-Lee에 의해 개발
다양한 인터넷 서비스 제공을 위한 문서의 표준 규
격이 필요
문서를 구조적으로 작성할 수 있는 SGML의 문법
을 이용
1.1.2 웹과 관련된 문서 표준 언어
HTML
태그를 이용하여 문서의 구조 및 내용을 표현
문서의 제목, 타이틀, 단락, 목록 및 글자의 크기
와 모양을 지정
하이퍼링크(Hyperlink)
문서간의 연결 및 이동
1.1.2 웹과 관련된 문서 표준 언어
XML
HTML의 단점
확장 태그의 사용
스타일, 레이아웃, 스크립트 처리의 단점
고정적인 태그들만을 사용
기존 HTML의 단점을 보완
브라우저 회사마다 서로 다른 확장 태그 사용
호환성의 문제 대두
HTML의 문제점을 해결하기 위한 W3C의 제안
XML의 제시
1.1.2 웹과 관련된 문서 표준 언어
XML
SGML의 단점 : 사용법의 어려움
장점 : 정보의 구조적 표현
HTML의 단점 : 표현력의 부족
장점 : 단순한 사용법
SGML과 HTML의 단점을 극복하고 장점만을 살린
새로운 웹 표준 언어
무한한 확장성 제공 : 사용자 태그의 정의
다양한 분야에 적용
DB, 수학식, 악보, 멀티미디어 등
1.1.3 웹 브라우저의 소개
웹 브라우저
웹 상의 하이퍼텍스트 문서를 사용자에게
보여주기 위한 어플리케이션
하이퍼링크 및 멀티미디어 지원
다양한 인터넷 서비스의 제공
넷스케이프, 익스플로러
1.1.3 웹 브라우저의 소개
넷스케이프 커뮤니케이터(Netscape
Communicator)
넷스케이프 커뮤니케이션사
6.01 버전
넷스케이프 커뮤니케이터의 화면 구성
1.1.3 웹 브라우저의 소개
인터넷 익스플로러(Internet Explorer)
마이크로소프트사
특징
윈도우 환경에 적절한 다양한 기능 제공
운영체제 기반
무료 제공
6.0버전
인터넷 익스플로러의 화면 구성
1.2 HTML의 개요
HTML의 소개
HTML의 현재와 미래
1.2.1 HTML의 소개
모든 운영체제에서 동일한 결과 확인
하이퍼링크 기능
SGML을 기본으로 제작
브라우저를 이용
마우스를 통한 내부 혹은 외부의 웹 문서로의 이동
배우기 쉬운 언어
간단한 문법
다양한 편집기들의 이용
이미지 클릭
텍스트 클릭
텍스트와 이미지를 이용한 하이퍼링크
1.2.2 HTML의 현재와 미래
HTML의 발전
1992년 HTML 1.0 발표
1997년 HTML 4.0 표준화
브라우저 제작사들에 의한 HTML의 확장
호환성의 문제 대두
웹 문서 제작시 반드시 호환성 고려
• HTML의 발전 과정
1989년 - 스위스 CERN의 팀 버너스 리(Tim Berners-Lee)에 의해
WWW 프로젝트 시작됨
1990년 - HTML이 웹 문서 작성에 사용되기 시작함
1992년 - HTML 1.0 발표
1993년 - 미국 일리노이대학 NCSA 연구소에서 마크
앤드리슨(Marc Andreessen)에 의해 HTML
1.0의 브라우저인 모자익 개발
- HTML+ 제안
1995년 - HTML 2.0 표준화
- HTML 3.0 제안
1996년 - HTML 3.2 표준화
1997년 - HTML 4.0 표준화
1998년 - XML 1.0 표준화
2000년 - XHTML 1.0 표준화
1.2.2 HTML의 현재와 미래
HTML 2.0
최초의 HTML 표준 버전
문단, 리스트, 폼(Form) 작성, 이미지 삽입,
하이퍼링크 등의 기능 제공
HTML 3.2
테이블, 프레임, 첨자 표현 등을 추가
자바 애플릿 기능 추가
1.2.2 HTML의 현재와 미래
HTML 4.0
CSS(Cascading Style Sheet) 기능
색깔과 폰트, 웹 문서의 레이아웃(Layout)을 자
유롭게 조절
테이블 및 프레임 기능을 확장
UCS(Universal Multiple-Octet Coded
Character Set) 문자 셋 사용
효과적인 멀티미디어 요소 처리
1.2.2 HTML의 현재와 미래
HTML의 최신 기술 – DHTML
동적인 웹 문서 제작의 필요성
기존의 자바 애플릿, CGI를 이용
프로그래밍에 대한 전문적 지식 요구
서버에 의존적
서버 상태에 따라 로딩 속도가 변화
새로운 대안 요구
DHTML(Dynamic HTML)의 개발
1.2.2 HTML의 현재와 미래
DHTML(Dynamic HTML)
HTML 4.0 버전부터 지원
기존 동적인 웹 문서 제작 방법의 단점을
보완
확장 태그의 사용 : 간편한 사용법
서버에 독립적 : 빠른 실행 시간
넷스케이프 & 익스플로러
서로 다른 확장 태그의 사용
호환성 문제
1.2.2 HTML의 현재와 미래
확장 태그의 비호환성 문제
문서 객체 모델(DOM: Document Object Model)
스타일 시트(Style Sheets)
각 브라우저 마다 정의와 사용 방법이 다름
넷스케이프 : <DIV>, <LAYER>
익스플로러 : <DIV>
W3C의 표준화 작업
DOM : 레벨 1과 2 제정
Style Sheets : 레벨 1과 2 제정
W3C의 스타일 시트 사이트
1.2.2 HTML의 현재와 미래
HTML의 미래 - XHTML
XHTML(The Extensible HyperText Markup
Language)
XML을 이용한 XHTML의 정의
구현 방법의 용이
XML 발전과 호응
1.2.2 HTML의 현재와 미래
XHTML의 특징
모듈화(Modularization)
프로파일(Profile)
문서의 특성에 대해 자세히 기술함으로써 문서의 호환성
을 높임
폼(Form)
HTML 태그들을 종류에 따라 태그 집합(Tag Set)들로 구
분
새로운 태그 집합을 확장할 수 있는 유연성을 제공
데이터베이스와 워크플로우(Workflow) 응용을 위한 새
로운 폼 추가
미래의 인터넷 환경에 부응
PDA, 휴대폰, 디지털 TV
W3C의 XHTML 사이트
1.3 HTML 문서의 구조
HTML 문서의 기본 구조
간단한 HTML 문서의 예
1.3.1 HTML 문서의 기본 구조
HTML 태그
마크업 언어 : 태그를 이용하여 문서의 구
조 및 모양을 정의
태그 : 문서의 구조와 형태를 표현하는 명
령어
“< >” 로 표현
1.3.1 HTML 문서의 기본 구조
태그 작성에 필요한 기본 사항들
태그는 시작 태그와 종료 태그로 구성된다
시작 태그 “<>”와 종료 태그 “</>”가 반드시
존재
HTML 문서에서 사용되는 태그 형식
1.3.1 HTML 문서의 기본 구조
- 태그의 형식
<태그> ∼ </태그>
<태그 속성=값> ∼ </태그>
<태그>
- 태그의 예
<H1> 태그의 기본 속성 </H1>
<A HREF="test.html"> test 문서로 이동 </A>
<BR>
1.3.1 HTML 문서의 기본 구조
태그의 이름은 대소문자를 구분하지 않는
다
<H1> <h1>, <TITLE> <title>
대문자 사용이 바람직
여러 개의 공백문자들은 하나로 인식된다
공백문자들은 하나를 제외하고 모두 무시
1.3.1 HTML 문서의 기본 구조
<예>
공백이 들어간 태그 사용
<P> “HTML 문서에서는 공백을
무시하게
결과
"HTML 문서에서는 공백을 무시하게 된다.“
된다.” </P>
1.3.1 HTML 문서의 기본 구조
태그를 중첩하여 사용할 수 있다
먼저 사용한 태그가 나중에 사용한 태그를 포함
하도록 종료 태그를 순서대로 지정
순서가 올바른 태그 사용
<H1> <H2> HTML은 구조적인 언어이다. </H2> </H1>
순서가 올바르지 못한 태그 사용
<P> <FONT SIZE="2"> 순서가 올바르지 못한 태그 사용 </P>
</FONT>
1.3.1 HTML 문서의 기본 구조
HTML 문서의 구조
머리(HEAD)
제목(TITLE)
몸통(BODY)
1.3.1 HTML 문서의 기본 구조
HTML 문서의 기본 구조
<HTML>
<HEAD>
<TITLE> 문서의 제목 </TITLE>
HTML 문서의 시작
HTML 문서의 머리 부분
HTML 문서의 제목
</HEAD>
<BODY>
HTML 문서의 몸통 부분
문서의 내용
</BODY>
</HTML>
HTML 문서의 종료
1.3.2 간단한 HTML 문서 예제
HTML 문서 작성 – test.html
<HTML>
<HEAD>
<TITLE>간단한 HTML 문서 작성 예제</TITLE>
</HEAD>
<BODY>
HTML 문서는 머리와 몸통의 두 부분으로 구성되어
있으며, 이를 정의하기 위하여 3개의 기본적인 태그가
이용된다. 본 예제는 이러한 기본 태그를 사용하여 작성한
것이다
</BODY>
</HTML>
1.3.2 간단한 HTML 문서 예제
HTML 문서를 브라우저에서 확인
넷스케이프
익스플로러
test.html을 브라우저에서 실행한 결과