SlideShare a Scribd company logo
1 of 8
Download to read offline
CHAPTER.10 HTML
13년 6월 15일 토요일
HTML 이란 ?
• 버너스-리 에 의해 SGML 을 베이스로 개발된 Hypertext Markup Language
• HTML 4.01 까지 SGML 기반, 이후로 XML 기반인 XHTML 1.0, 1.1
• 미디어 타입 : “text/html” ,“application/xhtml + html” 2 종류가 있음.
• 확장자 : html , htm 이 있음, html 이 보편적
13년 6월 15일 토요일
XML
<!-- XML 버전, 문자 인코딩 선언 (1.0, 1.1 이 있음, 일반적으로는 1.0을 사용, 문자 인코딩은 UTF-8 이 무난)-->
<?xml version=”1.0” encoding=”utf-8”?>
<!--
이름공간(Namespace) 설정 : xmlns:접두어=”이름공간명”
Namespace : 복수의 xml 포맷을 조합할 때 이름의 충돌을 피하며 문서의 스펙을 정하기 위한 공간
xmlns:접두어 : 이름의 충돌을 방지하기 위한 선언
-->
<html xmlns=”http://www.w3.org/1999/xhtml” xmlins:atom=”http://www.w3.org/2005/Atom”>
<head>
<link rel=”stylesheet” href=”base.css” /> <!-- XHTML 의 링크 요소 -->
<link rel=”enclosure” href=”attachment.mp3” /> <!-- Atom 의 링크 요소 -->
</head>
....
</html>
13년 6월 15일 토요일
XML 2
<entry xmlns=”http://www.w3.org/2005/Atom” xmlns:thr=”http://purl.org/sydication/thread/1.0”>
<link href=”blog.example.com/entries/1/commentsfeed” thr:count=”10”>
</entry>
Local 속성 : href 속성과 같이 :접두어가 붙지 않는 속성
Global 속성 : thr:count 와 같이 :접두어가 붙은 속성
thr:count 의 경우 xmlns:thr 에서 설정한 Atom Namespace 에 속하는 속성 값
13년 6월 15일 토요일
HTML 1
• 헤더 : 문서의 메타 데이터를 선언
• 바디 : 문서의 내용자체
• 블록 레벨 요소 : 문서의 단락과 표제등 큰 덩어리
13년 6월 15일 토요일
HTML 2
• 인라인 요소 : 블록 레벨 요소 안에 들어가는 요소로
강조나 줄 바꿈, 이미지 삽입에 쓰임.
• 공통속성
• 1.id : 문서내에서 유일한 ID , CSS 로 스타일을 지정하
거나 할 때 이용함
• 2.class : 요소가 속할 클래스, 해당 요소가 어떠한 의미
를 가질 것인지 지정하는 메타 데이터.
13년 6월 15일 토요일
HTML4
• 웹 API 와 같이 프로그램이 클라이언트인 경우 각각
의 링크가 어떠한 의미인지를 해석하고, 어느 링크를
따라가야 하는지를 기계적으로 판단하는 구조가 필
요.
• rel 속성 : 링크하는 쪽과 링크되는 쪽의 리소스 관계
에 대해 기술
• 현재의 웹에서 다양한 리소스를 html 로 표현하는
상황에 대응하기 위해 HTML 링크 관계의 확장이
microformats 등에서 이루어 지고 있음.
13년 6월 15일 토요일
감사합니다.
13년 6월 15일 토요일

More Related Content

Viewers also liked

Web2 0 parte2 gd
Web2 0 parte2 gdWeb2 0 parte2 gd
Web2 0 parte2 gdformazione1
 
ป โท Singapore bilingual education policy
ป โท Singapore bilingual education policyป โท Singapore bilingual education policy
ป โท Singapore bilingual education policyNat Tang
 
Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...
Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...
Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...Eminent VJ
 
Trabajo once
Trabajo onceTrabajo once
Trabajo onceariandrea
 
Exposición con la lectura la vida de los adolescentes en la escuela secundari...
Exposición con la lectura la vida de los adolescentes en la escuela secundari...Exposición con la lectura la vida de los adolescentes en la escuela secundari...
Exposición con la lectura la vida de los adolescentes en la escuela secundari...Toyo_Alvarez
 
Qualidade1703
Qualidade1703Qualidade1703
Qualidade1703mmsml
 
Presentacion servicios
Presentacion serviciosPresentacion servicios
Presentacion serviciosYulys Anaya
 
Presentasi Membuat Website Membership 3 Level
Presentasi Membuat Website Membership 3 LevelPresentasi Membuat Website Membership 3 Level
Presentasi Membuat Website Membership 3 LevelJarvis AI
 

Viewers also liked (20)

Google moduli
Google moduliGoogle moduli
Google moduli
 
Web2 0 parte2 gd
Web2 0 parte2 gdWeb2 0 parte2 gd
Web2 0 parte2 gd
 
ป โท Singapore bilingual education policy
ป โท Singapore bilingual education policyป โท Singapore bilingual education policy
ป โท Singapore bilingual education policy
 
Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...
Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...
Michael dell ,history of michael dell,buisness ideas of michael dell,dell tod...
 
10장
10장10장
10장
 
Mecanica de suelos
Mecanica de suelos   Mecanica de suelos
Mecanica de suelos
 
Web2 0 parte1
Web2 0 parte1Web2 0 parte1
Web2 0 parte1
 
Prece De Todo Dia. Jr Cordeiro.
Prece  De Todo Dia. Jr Cordeiro.Prece  De Todo Dia. Jr Cordeiro.
Prece De Todo Dia. Jr Cordeiro.
 
Trabajo once
Trabajo onceTrabajo once
Trabajo once
 
Debuxos primavera
Debuxos primaveraDebuxos primavera
Debuxos primavera
 
ERRUMANIA
ERRUMANIAERRUMANIA
ERRUMANIA
 
Aswi Hot Stills
Aswi Hot StillsAswi Hot Stills
Aswi Hot Stills
 
Moviemaker
MoviemakerMoviemaker
Moviemaker
 
Quad ball
Quad ballQuad ball
Quad ball
 
Exposición con la lectura la vida de los adolescentes en la escuela secundari...
Exposición con la lectura la vida de los adolescentes en la escuela secundari...Exposición con la lectura la vida de los adolescentes en la escuela secundari...
Exposición con la lectura la vida de los adolescentes en la escuela secundari...
 
Qualidade1703
Qualidade1703Qualidade1703
Qualidade1703
 
efimerida
efimeridaefimerida
efimerida
 
A mis amig@s_de_internet
A mis amig@s_de_internetA mis amig@s_de_internet
A mis amig@s_de_internet
 
Presentacion servicios
Presentacion serviciosPresentacion servicios
Presentacion servicios
 
Presentasi Membuat Website Membership 3 Level
Presentasi Membuat Website Membership 3 LevelPresentasi Membuat Website Membership 3 Level
Presentasi Membuat Website Membership 3 Level
 

Similar to Ch

안드로이드스터디 3
안드로이드스터디 3안드로이드스터디 3
안드로이드스터디 3jangpd007
 
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5Young-Beom Rhee
 
모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개Hyogi Jung
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기Suan Lee
 
16장. XML 사용하기
16장. XML 사용하기16장. XML 사용하기
16장. XML 사용하기SungHoon Jung
 
Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Youngjo Jang
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술정혁 권
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술JungHyuk Kwon
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsEunYoung Kim
 
[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초
[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초
[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초JinuNoh
 
웹표준스터디4주차 이미진
웹표준스터디4주차 이미진웹표준스터디4주차 이미진
웹표준스터디4주차 이미진Mijin Lee
 
[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램
[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램
[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램해강
 
Web server page_ed10
Web server page_ed10Web server page_ed10
Web server page_ed10hungrok
 
페이스북과 트위터에서의 소셜 시맨틱 웹
페이스북과 트위터에서의 소셜 시맨틱 웹페이스북과 트위터에서의 소셜 시맨틱 웹
페이스북과 트위터에서의 소셜 시맨틱 웹Myungjin Lee
 
3.web의역사와browser
3.web의역사와browser3.web의역사와browser
3.web의역사와browsercheonsu park
 

Similar to Ch (17)

2-2. html5
2-2. html52-2. html5
2-2. html5
 
안드로이드스터디 3
안드로이드스터디 3안드로이드스터디 3
안드로이드스터디 3
 
자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5자바카페 프론트엔드스터디 E01 - HTML5
자바카페 프론트엔드스터디 E01 - HTML5
 
모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개모바일 메신저 아키텍쳐 소개
모바일 메신저 아키텍쳐 소개
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기
 
16장. XML 사용하기
16장. XML 사용하기16장. XML 사용하기
16장. XML 사용하기
 
Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술
 
웹을 지탱하는 기술
웹을 지탱하는 기술웹을 지탱하는 기술
웹을 지탱하는 기술
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초
[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초
[HTTP 101] 웹 개발자라면 반드시 알아야하는 HTTP의 기초
 
Atom
AtomAtom
Atom
 
웹표준스터디4주차 이미진
웹표준스터디4주차 이미진웹표준스터디4주차 이미진
웹표준스터디4주차 이미진
 
[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램
[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램
[아꿈사] The C++ Programming Language 9장 소스 파일과 프로그램
 
Web server page_ed10
Web server page_ed10Web server page_ed10
Web server page_ed10
 
페이스북과 트위터에서의 소셜 시맨틱 웹
페이스북과 트위터에서의 소셜 시맨틱 웹페이스북과 트위터에서의 소셜 시맨틱 웹
페이스북과 트위터에서의 소셜 시맨틱 웹
 
3.web의역사와browser
3.web의역사와browser3.web의역사와browser
3.web의역사와browser
 

Ch

  • 1. CHAPTER.10 HTML 13년 6월 15일 토요일
  • 2. HTML 이란 ? • 버너스-리 에 의해 SGML 을 베이스로 개발된 Hypertext Markup Language • HTML 4.01 까지 SGML 기반, 이후로 XML 기반인 XHTML 1.0, 1.1 • 미디어 타입 : “text/html” ,“application/xhtml + html” 2 종류가 있음. • 확장자 : html , htm 이 있음, html 이 보편적 13년 6월 15일 토요일
  • 3. XML <!-- XML 버전, 문자 인코딩 선언 (1.0, 1.1 이 있음, 일반적으로는 1.0을 사용, 문자 인코딩은 UTF-8 이 무난)--> <?xml version=”1.0” encoding=”utf-8”?> <!-- 이름공간(Namespace) 설정 : xmlns:접두어=”이름공간명” Namespace : 복수의 xml 포맷을 조합할 때 이름의 충돌을 피하며 문서의 스펙을 정하기 위한 공간 xmlns:접두어 : 이름의 충돌을 방지하기 위한 선언 --> <html xmlns=”http://www.w3.org/1999/xhtml” xmlins:atom=”http://www.w3.org/2005/Atom”> <head> <link rel=”stylesheet” href=”base.css” /> <!-- XHTML 의 링크 요소 --> <link rel=”enclosure” href=”attachment.mp3” /> <!-- Atom 의 링크 요소 --> </head> .... </html> 13년 6월 15일 토요일
  • 4. XML 2 <entry xmlns=”http://www.w3.org/2005/Atom” xmlns:thr=”http://purl.org/sydication/thread/1.0”> <link href=”blog.example.com/entries/1/commentsfeed” thr:count=”10”> </entry> Local 속성 : href 속성과 같이 :접두어가 붙지 않는 속성 Global 속성 : thr:count 와 같이 :접두어가 붙은 속성 thr:count 의 경우 xmlns:thr 에서 설정한 Atom Namespace 에 속하는 속성 값 13년 6월 15일 토요일
  • 5. HTML 1 • 헤더 : 문서의 메타 데이터를 선언 • 바디 : 문서의 내용자체 • 블록 레벨 요소 : 문서의 단락과 표제등 큰 덩어리 13년 6월 15일 토요일
  • 6. HTML 2 • 인라인 요소 : 블록 레벨 요소 안에 들어가는 요소로 강조나 줄 바꿈, 이미지 삽입에 쓰임. • 공통속성 • 1.id : 문서내에서 유일한 ID , CSS 로 스타일을 지정하 거나 할 때 이용함 • 2.class : 요소가 속할 클래스, 해당 요소가 어떠한 의미 를 가질 것인지 지정하는 메타 데이터. 13년 6월 15일 토요일
  • 7. HTML4 • 웹 API 와 같이 프로그램이 클라이언트인 경우 각각 의 링크가 어떠한 의미인지를 해석하고, 어느 링크를 따라가야 하는지를 기계적으로 판단하는 구조가 필 요. • rel 속성 : 링크하는 쪽과 링크되는 쪽의 리소스 관계 에 대해 기술 • 현재의 웹에서 다양한 리소스를 html 로 표현하는 상황에 대응하기 위해 HTML 링크 관계의 확장이 microformats 등에서 이루어 지고 있음. 13년 6월 15일 토요일