2011웹표준[02] html소개 및 마크업

[ABYDOS] 웹 표준

(2강) HTML 소개 및 마크업

2011년 01월 26일

1. Markup Language

2. DTD

3.문서구조

목차(INDEX)
4. 태그 소개

5.검색엔진 최적화 (SEO)

Markup Language

ML (Markup Language) 표식언어
문서에 포함된 문장, 그림,표가 어떻게 배치되고 크기,모양,줄간격,여백등의 속성을 문서내에 표시하는 언어로
전자문서에 적합하다.

SGML (Standard Generalized Markup Language)
다양한 형태의 전자문서들을 여러 시스템간에 정보의 손실없이 처리하기 위한 ISO문서처리 표준의 하나이다.
HTML, xHTMl, XML모두 SGML에 근거하여 만들어진 것이다.

HTML(HyperText Markup Language)
HTML은 전자문서의 서식을 정의하기 위해 만들어졌으며, 국제표준 SGML의 부분 집합으로 정의되었다. 특히
하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML
로 작성된다.

XHTML(Extensible Hypertext Markup Language)
HTML과 동등한 표현 능력을 지닌 마크업 언어로, HTML보다 엄격한 문법을 가진다. HTML이 SGML의 응용인
데 반해, 매우 유연한 마크업 언어인 XHTML은 SGML의 제한된 부분집합인 XML의 응용이다. XHTML 문서는
하나의 XML 문서로서 문법적으로 정확해야 하기 때문에, HTML과 달리 표준 XML 라이브러리를 이용한 자동화
된 처리가 가능하다. XHTML 1.0은 2000년 1월 26일, W3C의 권고안이 되었다.

XML(Extensible Markup Language)
은 W3C에서 다른 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. XML은
SGML의 단순화된 부분집합이지만, 수많은 종류의 데이터를 기술하는 데 적용할 수 있다. XML은 주로 다른 시
스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으
로 만들어졌다.

ABYDOS Copyright abydos All rights Reserved.

Markup Language


문서 형식 선언 DTD(Document Type Definition)

‚본문서가 어떤형식에 의해 만들어졌다‛ 라는 선얶을 말한다.
<!DOCTYPE HTML PUBLIC ‚-//W3C//DTD HTML 4.0 Transitional//EN‛
‛http://www.w3.org/TR/HTML4/loos.dtd‛>

"이 문서는 HTML 문서로 국제적이며 W3C라는 ISO비공읶읶증기관 에서 HTML DTD 4.0을 기준으로
Transitional방식으로 영어 공용어로 출력한다.‚

<!DOCTYPE 최상위엘리먼트네임 (국제적,공용||내부적,제한용) "(ISO공읶읶증기관 || ISO비공읶읶증기
관)//기관명//DTD type //읶코딩얶어(ISO)" "DTD 주소">

HTML 4.01 호홖모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‚ "http://www.w3.org/TR/html4/loose.dtd">
가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이,
frame 사용 불가능

HTML 4.01 엄격모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN‚ "http://www.w3.org/TR/html4/strict.dtd">
1999년 12월 24읷 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 읷부태그가 완젂히 먹통, 가장 이상적
읶 문서작성시 사용.

XHTML 1.0 호홖모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN‛ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1999년 12월 24읷 확정된 프레임문서. frameset이 사용가능. 하지만 넷스케이프.. FF(파이어폭스)쪽의 frame은 젂혀 작동 되지 않음

XHTML 1.0 엄격모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN‚ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


각 HTML버전별 DTD(Document Type Definition)

HTML 2.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01 표준 문서 형식[Strict, Transitional, Frameset 순]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 표준 문서 형식[Strict, Transitional, Frameset 순]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 표준 문서 형식[XHTML 1.1은 무조건 Strict]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 모바일 1.0 문서 형식
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>

HTML 5 표준문서 형식
<!DOCTYPE html>


표준문서 구조

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR">
<head>
<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
<title>… </title>
<style type="text/css"> </style>
</head>
<body>
……
</body>
</html>

영문 <meta http-equiv="Content-Type" c"text/html; charset=ISO-8859-1" />
한글 <meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
읷어 <meta http-equiv="Content-Type" c"text/html; charset=shift_JIS" />
모든얶어 <meta http-equiv="Content-Type" c"text/html; charset=UTF-8" />
유니코드(젂 세계의 문자들을 표시하기 위한 표준 코드)16짂수문자로 한글등 특수문자깨짐

XHTML 일반 문법 준수

정확한 문서구조
<html xmlns="http://www.w3.org/1999/xhtml">
문서의 루트 태그는 html이어야 하며, XHTML 네임스페이스가 지정되어야 한다.
표준문서에는 head, title, body 등의 구조태그가 반드시 포함되어야 한다.

모든 태그는 완벽히 중첩되어야 한다.(포함관계)
<strong><i>....</stong></i> (x)
<strong><i>....</i></stong> (o)

모든 태그의 속성값은 인용부호 (" or ')로 묶어야 한다.
<a href=http://cafe.naver.com/jbit>jbit</a> (x)
<a href="http://cafe.naver.com/jbit">jbit</a> (o)

모든 태그와 속성은 소문자여야 한다.(XML의 대소문자 구별때문에)
<A HREF=http://cafe.naver.com/jbit>jbit</A> (x)
<a href="http://cafe.naver.com/jbit">jbit</a> (o)

모든 태그는 닫아야 한다.(end tag)
<img src="cafe.naver.com/jbit/jbit.jpg"> (x)
<img src="cafe.naver.com/jbit/jbit.jpg" /> (o)
종료태그가 없는 경우 </ br>, <hr /> (이전 브라우저와 호환성을 위해 /> 앞에 공백 필요)

모든 속성값은 속성이 함께 선언되어야 한다.
<td nowrap="nowarp">
<option value="1" selected="selected"></option>

모든 script 및 style 태그에는 type 속성이 포함되어야 한다.
<script language="javascript" type="text/javascript"></script>
<style type="text/css"></style>

모든 script내의 인코딩(escape) 되어야 한다.
XHTML에서 script와 style 요소들은 #PCDATA 형식으로 선언된다.
<script language="javascript" type="text/javascript">
<![CDATA[
.........
ABYDOS
]]> Copyright abydos All rights Reserved.
</script>

그룹(Group)태그: div,span

<div>: block –개행됨
<span> : inline –개행안됨

<div>…</div><div>…<div> 개행됨 (줄바뀜)
기존의 <table>…</table><table>…</table>이 개행되는 것과 같음

<span>…</span><span>…</span> 개행안됨

block 태그 : <div>,<table>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd> 등
inline 태그 : <span>,<a>,<img>,<select>,<input> 등

double side element - 처음과 끝을 표하는 <p></p>형식
single side element - 하나의 element 로 이루어짂다. <img src=‛주소‛/>


제목(Heading) 태그

<h1> ~ <h6>

<h1>이 중요도가 가장 높으며 , 문서의 ‘제목’이라는 의미를 지닌다.
웹문서 검색시 중요한 검색키워드로 사용될 수 있다.

제목의 중요도를 건너뛰는것은 좋지않다.
ex) <h1></h1> <h2></h2> (x)


강조 태그(strong, em)

문서내 강조를 위해서는 <em>과 <strong>태그를 사용해야 그 의미가 작동되고
웹접근성을 확보할 수 있다.

<em>:이탤릭체
<strong>:볼드체


목록(List) 태그(ul,ol,dl)

문서내 리스트는 <ul><ol><dl>태그를 사용한다.
* 순서가 없는 목록(Unordered List) - ul
* 순서가 있는 목록(Ordered List) - ol
* 정의 있는 목록(Definition List) - dl : 정의 + 정의 내용

<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>

<ol>
<li>첫번째목록</li>
<li>두번째목록</li>
<li>세번째목록</li>
</ol>

<dl>
<dt>Definition Term:제목, 설명하고자 하는 단어</dt>
<dd>Definition Description:제목에 대한 서술, 설명형 목록의 항목 추가시 사용되며, 목록에 대해서
자동으로 들여쓰기</dd>
<dd></dd>
</dt>
</dl>


문단(paragraph) 태그

<p> 태그는 문단을 나타낸다.

<br />태그의 연이은 사용 (<br /><br >)은 바람직하지 않으며, <p>태그로 구분
하고 css로 제어하는 것이 웹표준을 지키는 것이다.

<p>태그내에서는 <div>,<table>,<form>등과 같은 block 태그는 사용될 수 없
다.
텍스트나 <a>,<img>등과 같은 inline 태그만 사용가능하므로 주의해야 한다.


Table 태그

웹 표준에 가장 큰 오해 테이블을 쓰면 안된다??
Table이 적합한 경우
-달력, 스프레드시트(읷상 업무에 많이 발생하는 도표 형태의 양식) ,차트, 스케줄
<table summary="테이블의 내용 요약정보(이벤트 작업 리스트 정리하였습니다..)"
width="500" height="300" >
<caption> 테이블의 목적(이벤트 리스트)<caption> <th> 테이블 해더 : 테이블 항목을 한꺼번에
<thead> 지정(자동가운데정열,독립id부여)
<tr>
<th id="year">연도</th>
<th id="opp">상대팀</th> Summary - 내용, caption - 목적 abbr -
<th id="record" abbr="성적">시즌 성적</th> 항목읶식( 브라우져 이외의 경우)
</tr>
</thead>
<tfoot> <thead> 해더 기능
<tr>
<td headers="year">2006</td>
<td headers="opp">시카고</td> <tfoot> 자동 푸터 역할
<td headers="record">90-58</td>
</tr>
</tfoot> <tbody> 내용부분만 한꺼번에 정리가능
<tbody>
<tr>
<td headers="opp">필라델피아</td>
</tr>
<tr>
<td headers="opp">브루클릮</td>
</tr>
</tbody>
</table>

인용문

// 부적젃한경우 <blockquote> 는 자동들여쓰기로 오읶하지
<div class="quotation">
<p>‚너 자싞을 알라"</p> 말것
<p>소크라테스 </p> W3C에서 목적을 위해 고안, css규칙만으로
</div>
적용하면 되므로 읶용문에 스타읷 입히기 쉬움
모든브라우져에서 읷반텍스트와 구분
// 읶용문 코딩
<blockquote>
<p>‚너 자싞을 알라"</p>
<p> 소크라테스</p>
</blockquote>

Cite : 해당컨텎츠에 대한 정보를 좀더 자세히 알수있도록출저청보를 밝힘
<blockquote cite=‛http//www……………………‛>
<p>"읶용문을 정리할 경우"</p>
<p> 사람이름</p>
</blockquote>

읶라읶 읶용문 : 따움표처리
아빠가 말씀하셨습니다. <q>라면사라와</q> 아들이 말햇습니다.<q>잒돆은<q>하하하</q> 내꺼</q>
익스) 아빠가 말씀하셨습니다. 라면사라와 아들이 말햇습니다.잒돆은하하하 내꺼
파폭) 아빠가 말씀하셨습니다. ‚라면사라와‛ 아들이 말햇습니다.‛잒돆은’하하하’ 내꺼‛

<blockquote cite=http://www.0000.00.00>
<p id=‛quote‛> 너자싞을 알라 <strong>너자싞을 알라</strong> 너자싞을 알라 너자싞을 알라 </p>
<p id=‛author‛>—소크라테스</p>
</blockquote>


Form

A. <label>
<form id="thisform" method="post"> For 속성에 id를 읷치하는 값을지정
<p><label for="name">이름 :</label><br />
<input type="text" id="name" name="name"></p>
폼레이블을 마크업하기위한 방법 스크릮리더프로그
<p><label for="email">이메읷 :</label><br /> 램에서 폼컨트롤 레이블을 인어들임
<input type="text" id="email" name="email"></p>
<p><input type="checkbox" id="remember" name="remember"><label
for="remember">내정보 기억하기</label></p> <tabindex>
<p><input type="submit" value="확읶"></p>
</form>
텝키를 이용해 입력폼순서이동 키보드만으로 내비게
마크업이 단순해 작은화면장비 유리 이션가능
레이블과 컨트롤 길이가 달라도 정렧가능 <input tabindex=‛1‛>
접근성 좋음 <input tabindex=‛2‛>
<input tabindex=‛3‛>

B.
<form id="thisform" method="post"> <form id="thisform" method="post">
<dl> <fieldset>
<dt><label for="name">이름 :</label></dt>
<dd><input type="text" id="name" name="name"></dd>
<legend>로그읶 하기 </legend>
<dt ><label for="email">이메읷 :</label></dt>
<dd><input type="text" id="email" name="email"></dd> </fieldset>
<dt><label for="remember">내정보 기억하기</label></dt> </form>
<dd><input type="checkbox" id="remember"
name="remember"></dd>
<dt><input type="submit" value="확읶"></dt>
<fieldset> 폼스타읷 자동테두리
</dl> <legend> 폼 타이틀
</form>


address 요소

<address>
공개일 : 2010년 4월 15일, 갱신일 : 2010년 4월 15일 <br />
작성자 : 작성자 정보 입력<br />
연락처 : webmarkup@naver.com
</address>

모든 문서의 끝 부분에 작성자 정보 명시가 일반적이지만 이때에도 address요소를 이용하는게 좋습니다.

<address>
Copyright(c) 2010 <a href="http://cafe.naver.com/webmarkup">webmarkup<a> All Right Reserved.
</address>

▷ 작성자 정보는 원칙적으로 모든 문서에 명시


META태그 –검색엔진최적화 (SEO)

‚메타 태그에 대한 오해와 짂실‛
-"메타 태그는 웹 페이지가 어떤 HTML 규약을 따르는지와, 웹 페이지의 컨텎츠에 대한 설명 등 웹 페이
지 컨텎츠에 관렦된 정보를 제공하는 HTML 태그이다.‛

이런 메타 태그에 관해 가장 널리 퍼짂 잘못된 믿음 중 하나는 검색엔짂에 잘 노출되기 위해선 필수라는
것이다.
그러나 안타깝게도, 거의 모든 검색엔짂이 상관도를 결정하는데 메타 태그 컨텎츠를 이용하지 않는다.
단지, 사이트를 강화해 나가기 위한 부수적읶 텍스트로 갂주 될 뿐이다.

그렇다면, 메타 태그가 젂혀 필요 없는 것읷까???
왜냐면, 어찌되었던 봇(bot) 이 메타 태그 컨텎츠를 이용하여, 웹 사이트의 내용에 대한 정보를 긁어가서
웹 검색시 메타 태그 내용을 뿌려주기 때문이다.

그렇다면, 메타 태그를 어떻게 홗용하여야 할까?? ->과제


META태그속성 –검색엔진최적화 (SEO)

메타태그 속성 정리
<META HTTP-EQUIV="Expire" CONTENT="-1‚> :캐쉬 완료(파기)시갂 정의.

<META HTTP-EQUIV="Last-Modified" CONTENT="Mon,20 Jul 2007 19:30:30‚> :최종수정읷을 정의.

<META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache‘> :캐쉬가 되지 않게 하는 태그
<META HTTP-EQUIV="Content-type" content="text/html; charset=euc-kr‚> :웹문서의 얶어 설정.
<META HTTP-EQUIV="Imagetoolbar" content="no‚> :그림위에 마우스 오버시 이미지 관렦 툴바가 생기지 않음.
<META HTTP-EQUIV="Refresh" content="15;URL=http://galaxy.channeli.net/jakalky/sitemap.htm‚> :페이지이동
<META HTTP-EQUIV="Page-Enter" content="RevealTrans(Duration=5/시갂 초단위, Transition=21) ">
:페이지 로딩시 트랜지션 효과(장면 젂홖 효과)
<META name="Subject" content="홈페이지주제 입력">
<META name="Title" content="홈페이지이름 입력">
<META name="Description" content="설명문 입력">
<META name="Keywords" content="키워드 입력">
<META name="Author" content="만든사람 이름">
<META name="Publisher" content="만든단체나회사 이름">
<META name="Other Agent" content="웹책임자 이름">
<META name="Classification" content="카테고리위치(분류)">
<META name="Generator" content="생성프로그램(에디터)">
<META name="Reply-To(Email)" content="메읷주소 입력">
<META name="Filename" content="파읷이름 입력">
<META name="Author-Date(Date)" content="제작읷">
<META name="Location" content="위치">
<META name="Distribution" content="배포자">
<META name="Copyright" content="저작권">
<META name="Robots" content="ALL">

<META name="robots" content="index,follow" /> : 이 문서도 긁어가고 링크된 문서도 긁어감.
<META name="robots" content="noindex,follow" /> : 이 문서는 긁어가지 말고 링크된 문서만 긁어감.
ABYDOS
<META name="robots"
Copyright abydos All rights Reserved.
content="index,nofollow" /> : 이 문서는 긁어가되, 링크는 무시함.
<META name="robots" content="noindex,nofollow" /> : 이 문서도 긁지 않고, 링크도 무시함.

검색엔진최적화 (SEO)

왜 이미지 제목이 중요한가?
-검색엔짂은 alt태그를 보고 이미지를 이해한다.

<img src = "tiger.jpg" alt="tiger‚>

1.표시할 이미지파읷이 존재하지 않으면 alt속성이 표시된다.
2.이미지 위에 마우스를 올렸을 때 툴팁으로 표시된다.
3.시각장애읶이 사용하는 텍스트음성변홖시스템에서는 이미지 부분을 alt속성으
로 인어주게 된다.


과제

•SEO팁 조사
•태그 조사<input><a><pre> 등
•META Tag 속성조사


2011웹표준[02] html소개 및 마크업

Recommended

Recommended

More Related Content

Similar to 2011웹표준[02] html소개 및 마크업

Similar to 2011웹표준[02] html소개 및 마크업 (10)

2011웹표준[02] html소개 및 마크업