Download presentation
Presentation is loading. Please wait.
1
Chapter01 Introduction to HTML5
HTML5 Programming
2
Contents Chapter01 1. HTML5 개요 2. HTML5 기본 구조 HTML5 시작하기
3
HTML5 개요 Chapter01 HTML HyperText Markup Language의 약자로 월드와이드웹(World Wide Web)에서 사용하는 마크업(Markup) 언어 마크업(Markup) 언어 어떠한 문서 안의 정보가 어떻게 구조화되는가를 지정하는 언어를 말함 문서의 구조 형식을 tag를 사용하여 지정 HTML5 HTML의 새로운 버전 1999년 HTML 4.01 버전이 발표된 이후에 XHTML이 발표되고 다시 HTML로 회귀하여 무려 10년 만에 HTML5를 발표함 HTML5 시작하기
4
HTML5의 정의 Chapter01 HTML5의 정의 문서 작성(HTML 4.01, 1999)을 넘어 다양한 웹 애플리케이션(HTML5)을 만들기 위한 웹 플랫폼을 지향함 현재 HTML5의 기술 영역이 정의되어 있지 않음. 그 이유는 다양한 사양이 독립적으로 존재하기 때문 기본적인 틀을 놓고 보면 HTML5는 기존의 HTML4와 크게 차이는 없음 다양한 기술을 구현하기 위하여 문서 작성을 위한 몇 개의 마크업이 추가 및 삭제, CSS2 (문서디자인), 동작을 담당하는 자바스크립트 API가 추가됨 HTML5 시작하기
5
웹 애플리케이션 e.g., docs.google.com 웹 애플리케이션: 브라우저에서 사용가능한 Office 도구들
Chapter01 e.g., docs.google.com 웹 애플리케이션: 브라우저에서 사용가능한 Office 도구들 HTML5 시작하기
6
HTML5의 배경 Chapter01 HTML5의 배경 최초에 Tim Berners-Lee가 개발하였으며 NCSA에서 개발한 Mosaic 브라우저에 의해 보편화되기 시작 HTML 2.0이 1995년 11월에 나왔으며 이는 IETF(Internet Engineering Task Force)에 의하여 개발 1997년에 3.2 버전이 발표되었으며 1998년 4월에 4.0 버전이 발표 현재 주로 사용하고 있는 HTML 4.01 버전은 1999년에 발표하였는데 2000년 이후에는 XML과 합쳐져서 XHTML 1.0이 등장 Apple, Mozila, Opera는 2004년에 공동으로 WHATWG(Web Hypertext Application Technology Working Group)을 발족하여 기존의 HTML을 진화시키려는 노력을 기울임 W3C(World Wide Web Consortium)도 2007년부터 참여하여 HTML5를 제정하고 2008년에 초안을 공개 HTML5 시작하기
7
HTML5의 배경 Chapter01 HTML5 시작하기
8
W3C(World Wide Web Consortium)
Chapter01 HTML5 시작하기
9
WHATWG(Web Hypertext Application Technology Working Group)
Chapter01 HTML5 시작하기
10
HTML5의 특징 웹 애플리케이션 개발을 위한 플랫폼
Chapter01 웹 애플리케이션 개발을 위한 플랫폼 추가적인 Plug-in이 없이도 다양한 기능들을 제공할 수 있게 됨. e.g., Adobe Flash, MS Silverlight 등 웹 문서 뿐만 아니라 웹 애플리케이션도 만들 수 있는 플랫폼 HTML5 시작하기
11
HTML5 각 기능별 브라우저 지원 여부 브라우저별 HTML5 지원 현황 확인
Chapter01 브라우저별 HTML5 지원 현황 확인 각 브라우저마다 HTML5 지원 현황이 모두 다름 사이트를 통하여 브라우저의 HTML5 지원 정도를 확인할 수 있음 브라우저별 최소 지원 버전 e.g., IE 브라우저 점수 HTML5 시작하기
12
HTML5의 특징 Chapter01 시맨틱 웹 기존의 HTML문서는 단지 표현을 위한 수단이었음. 이에 여러 태그를 사용하여 구조를 정의할 수 있지만 이는 정확한 의미의 태그 사용이 아닌 단순한 문서 표현에 불과함 구조를 나타내기 위하여 추가한 태그 HTML5 시작하기
13
HTML5의 특징 웹 표준화 어떤 브라우저에서든 누구든 정상적으로 동작하는 사이트를 이용하기 위해서는 웹 표준이 지켜져야 함
Chapter01 웹 표준화 어떤 브라우저에서든 누구든 정상적으로 동작하는 사이트를 이용하기 위해서는 웹 표준이 지켜져야 함 기존에 IE 한 개의 브라우저에서만 동작한다는 것을 알면서도 ActiveX 기술을 사용한 이유는 스크립트 언어만으로는 원하는 기능을 충분히 구현할 수 없었기 때문이었음 HTML5의 등장으로 스크립트만으로도 원하는 기능을 충분히 구현할 수 있음 HTML5 시작하기
14
브라우저 점유율 Chapter01 출처 : StatCounter Global Stats - Browser Market Share 2011년 전 세계의 브라우저 점유율 2011년 한국의 브라우저 점유율 HTML5 시작하기
15
브라우저 종류 익스플로러 (www.microsoft.com) 파이어폭스 (www.mosilla.com)
Chapter01 익스플로러 ( Microsoft에서 개발한 브라우저로 Windows 95 이상에서 운용됨 다양한 멀티미디어 환경을 브라우저에서 실행하도록 하여주는 ActiveX 기술을 지원하지만 느린 속도와 웹 표준 문제점을 가지고 있음 파이어폭스 ( 익스플로러를 위협하는 웹 브라우저 속도가 상당히 빠르며 보안 및 사용자 프라이버시에 강함. 국내에서는 ActiveX 문제로 인해 인터넷 뱅킹 등의 서비스에 대해 많은 제약 HTML5 시작하기
16
브라우저 종류 사파리 (www.apple.com) 크롬 (www.google.com)
Chapter01 사파리 ( 애플사에서 발표한 사파리는 최초에 가장 빠른 브라우저라는 특징을 내세워 발표 간결한 디자인과 여러 가지 독특한 기능들을 제공 크롬 ( 구글사에서 발표한 브라우저인 크롬은 속도 면에서도 빠르고 전체적으로 가볍다는 느낌을 가짐 최근에는 크롬 웹 스토어라는 온라인 마켓까지 오픈하여 브라우저를 다양한 용도로 사용할 수 있어 많은 이들의 호평을 받고 있음 오페라 ( 넷스케이프와 익스플로러가 시장을 장악한 초기부터 나름대로 인지도를 구축하며 지금까지 이어온 웹 브라우저 방대한 단축키를 지원하며 작은 용량과 빠른 속도로 인하여 저사양의 PC에서도 원활하게 구동됨 HTML5 시작하기
17
HTML5 기본 구조 HTML5 기본 구조 HTML5의 기본 템플릿은 기존의 HTML, XHTML의 형식과 크게 다르지 않음
Chapter01 HTML5 기본 구조 HTML5의 기본 템플릿은 기존의 HTML, XHTML의 형식과 크게 다르지 않음 HTML, XHTML과 거의 완벽하게 호환이 됨 HTML 구성요소 HTML5 시작하기
18
프로그램 1-1 Chapter01 01: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!– 문서의 형식을 선언 --> 02: <html> <!– 문서의 시작 --> 03: <head> <!– 문서의 설명 부분 --> 04: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!– 컨텐츠 유형--> 05: <title> HTML 기본 구조 </title> <!– 문서의 제목--> 06: </head> 07: 08: <body> <!– 문서의 본문/내용 부분 --> 09: HTML 기본 구조 10: </body> 11: </html> <!– 문서의 끝 --> HTML5 시작하기
19
HTML 기본 구조 Chapter01 HTML 4.01 HTML5 시작하기
20
HTML5 기본 문법 변경 DOCTYPE 선언 부분 비교 HTML 4.01/XHTML 1.0
Chapter01 DOCTYPE 선언 부분 비교 HTML 4.01/XHTML 1.0 HTML5: 간단해진 선언과 DTD(Document Type Def.) 참조할 필요 없음 HTML5 시작하기
21
HTML5 기본 문법 변경 Chapter01 문자 인코딩 방식 선언 HTML5 기본 형식 HTML5 시작하기
22
프로그램 1-2 HTML5 Chapter01 01: <!DOCTYPE html> 02: <html>
03: <head> 04: <meta charset="UTF-8"> 05: <title> HTML5 기본 구조 </title> 06: </head> 07: 08: <body> 09: HTML5 기본 구조 10: </body> 11: </html> HTML5 시작하기
Similar presentations
