extensible hypertext markup language (xhtml) laboratory of intelligent networks(link)@kut youn-hee...
TRANSCRIPT
Extensible HyperText Markup Language (XHTML)
Laboratory of Intelligent Networks(LINK)@KUT
Youn-Hee Han
Introduction To XHTMLHistory of HTML
HTML 2.0 (1996) Internet Engineering Task Force (IETF) HTML Working Group
HTML 3.2 (Jan. 1997, W3C Recommendation) <font> tag is added, which have introduced unnecessary
complexity to the important task of separating HTML content (text) from its presentation (style).
HTML 4.0 (first - Dec. 1997, second – April 1998, W3C Recommendation)
the introduction of style sheets (CSS) HTML 4.01 (Dec. 1999, W3C Recommendation)
W3C will not continue to develop HTML. Future W3C work will be focusing on XHTML
XHTML 1.0 (Jan. 2000, W3C Recommendation) the latest version of HTML XHTML 1.0 reformulates HTML 4.01 in XML
Web Programming2
Introduction To XHTML
What Is XHTML? XHTML stands for EXtensible HyperText Markup
Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01
XHTML is compatible with HTML 4.01. XHTML is a reformulation of HTML 4.01 in XML
XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation
W3C defines XHTML as the latest version of HTML
XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML.
Web Programming3
XHTML – why?Why XHTML?
We have reached a point where many pages on the WWW contain "bad" HTML
Today's market consists of different browser technologies some browsers run Internet on computers, and some browsers
run Internet on mobile phones and hand helds. All-types of browser do not have the resources or power to
interpret a "bad" markup language. 참고 : http://www.zeroboard.com/12663405
XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers!!!
Web Programming4
<html><head><title>This is bad HTML</title><body> <h1>Bad HTML </body>
XHTML – why?
Why XHTML? There are a lot of software tools for XML (XHTML) We can add a new markup element in XHTML
documents XHTML is extensible!
Web Programming5
XHTML 의 필요를 느끼게 된 가장 큰 이유는 웹 콘텐츠가 전통적인 ' 컴퓨터 ' 를 벗어나 여러 가지 장치 ( 이동통신기기 , 장애인을 위한 점자& 음성브라우저 등 ...) 에서 이용되면서 , 부정확한 HTML 을 해석하는데 많은 어려움이 생겨났기 때문입니다 .즉 , 하나의 웹문서가 여러 가지 장치 , 여러 가지 브라우저 에서 모두 그 내용 ( 콘텐츠 ) 를 제대로 이해하고 보여줄 수 있도록 할 필요성이 있는 시대가 이미 시작되었고 , 그렇게 할 수 있도록 만들어주는 것이 XHTML 의 존재이유입니다 . 인용 : http://cglinkxe.cafe24.com/?
mid=springnote&pageid=680682
XHTML vs. HTMLHow To Get Ready For XHTML
You can prepare yourself for XHTML by starting to write “strict HTML”
XHTML is not very different from the HTML 4.01 standard
In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip ending tags
The Most Important Differences (from HTML 4.01) XHTML elements must be properly nested XHTML elements must be always closed XHTML elements must be in lowercase XHTML documents must have one root element
<html> … </html>
Web Programming6
XHTML vs. HTMLXHTML Elements must be properly nested
In HTML, this is valid <b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other
<b><i>This text is bold and italic</i></b> Common mistakes
Web Programming7
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li></ul>
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
XHTML vs. HTMLXHTML Elements must always be closed
Non-empty elements must have an end tag. <p>This is a paragraph</p> <p>This is another paragraph</p>
Empty Elements Must Also Be Closed
Web Programming8
A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">
A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />
XHTML SyntaxMore XHTML syntax rules
Attribute names must be in lower case Attribute values must be quoted ("") Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements
All XHTML documents must have a DOCTYPE declaration. The html, head, title and body elements must be present.
This is a minimum XHTML document template
The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.
Web Programming9
<!DOCTYPE Doctype goes here><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title goes here</title></head><body>…</body></html>
XHTML SyntaxWrong vs. Correct
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.
To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this
<img src="picture.gif" id="picture1" name="picture1" />
Web Programming10
wrong correct
<table WIDTH="100%"> <table width="100%">
<table width=100%> <table width="100%">
<input checked><input readonly><input disabled><option selected><frame noresize>
<input checked="checked" /><input readonly="readonly" /><input disabled="disabled" /><option selected="selected" /><frame noresize="noresize" />
<img src="pic.gif" name="pic1" /> <img src="pic.gif" id="pic1" />
XHTML DTD<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts: the DOCTYPE the Head the Body
Note!!! <DOCTYPE…> is first, <head> element is mandatory!!!
The basic document structure is:
Web Programming11
<!DOCTYPE ...><html xmlns="http://www.w3.org/1999/xhtml"><head><title>... </title></head><body> ... </body></html>
XHTML DTDThe 3 Document Type Definitions
DTD specifies the syntax of a web DTD specifies rules that apply to the markup of
documents of a particular type, including a set of element and entity declarations.
An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.
There are currently 3 XHTML document types: STRICT TRANSITIONAL FRAMESET
Web Programming12
XHTML DTDXHTML 1.0 Strict
Use this when you want really clean markup, free of presentational clutter.
Use this together with Cascading Style Sheets.
XHTML 1.0 Transitional (Recommendation)
Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets
Web Programming13
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML DTDXHTML 1.0 Frameset
Use this when you want to use HTML Frames to partition the browser window into two or more frames.
Web Programming14
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Block element vs. Inline elementAll HTML elements are naturally displayed in one of the following ways:
Block takes up the full width available, with a new line before and after (display:block;)
Inline takes up only as much width as it needs, and does not force new lines (display:inline;)
Not displayed Some tags, like <meta /> and <style> are not visible (display:none;)
In XHTML, inline element cannot be used without a block element!!!
<body> element has only block elements!!!
Web Programming15
Block Element vs. Inline ElementBlock Elements
<div> Your general-purpose box
<h1> ... <h6> All headings
<p> Paragraph
<ul>, <ol>, <dl> Lists (unordered, ordered and definition)
<li>, <dt>, <dd> List items, definition list terms, and definition list definitions
<table> Tables
<pre> Indicates a block of preformatted code
<form> An input form
Web Programming16
Block Element vs. Inline ElementBlock Elements
<blockquote> Like an indented paragraph, meant for quoting passages of
text Note: <blockquote> does not allow to have inline
element without other block elements
Web Programming17
<blockquote><img src="p.gif" alt="p" /></blockquote>
<blockquote><p><img src="p.gif" alt="p" /></p></blockquote>
Invalid!!!Valid!!!
Block Element vs. Inline ElementInline Elements
<span> Your all-purpose inline element
<a> Anchor, used for links (and also to mark specific targets on
a page for direct linking) <strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower
<b> (bold) tag
<em> Adds emphasis, but less strong than <strong>. Usually
displayed as italic text, and replaces the old <i>
(italic) tag
Web Programming18
Block Element vs. Inline ElementInline Elements
<img /> Image alt attribute should be specified.
<br> The line-break is an odd case, as it's an inline element that
forces a new line. However, as the text carries on the next line, it's not a block-level element.
<input> Form input fields like and
<abbr> Indicates an abbr.
<acronym> Working much like the abbreviation
Web Programming19
<img src="p.gif" /> <img src="p.gif" alt="p" />
Type of Content & Character SetXHTML requires the type of content in <meta> element
<meta http-equiv…> indicates the type of data sent to the browser.
It is used by browsers to know what to do with the data that they receive, and what character set is used.
Usage <meta http-equiv="Content-Type" content="type;
charset"> Example
Web Programming20
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
Some other rules for XHTML<title> element is mandatoryOther block element is not nested within a <p> block without <object> element
xmlns="http://www.w3.org/1999/xhtml" is mandatory in <html> elementXHTML common rule specified by NAVER
http://html.nhndesign.com/html_guideline
Web Programming21
<p><img src="p.gif" alt="p" /><h1> any </h1></p>
<p><img src="p.gif" alt="p" /><object><h1> any </h1></object></p>Invalid!!!
Valid!!!
XHTML ValidationXHTML Example
XHTML Validation Site Official Site
http://validator.w3.org/
Web Programming22
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/xhtml; charset=euc-kr" /> <title>XHTML 연습 </title></head><body> <p>Hello, World!</p></body></html>