Xhtml and html5 basics

XHTML & HTML5
Basics
LI843 Web Design & Development
Summer 2012

Using HTML
• HTML is relatively simple. You do most of your
work with about twenty tags.
• HTML is orderly and structured.
• Good references and tutorial sites are available.
• Follow the standards and your work will be
simpler, more consistent, and your results more
reliable.

Device independence

Your audience may view your site with many
different browser types and devices

…but fluid and adjustable
• No fixed page size
• No fixed page length
• User can change the font size
• User can link to own local style sheet
• Screen size can be tiny or huge

How does HTML work?
1. A series of short codes are typed into text-file by site
author – called “tags”
2. Tags are codes between angle brackets:
<p>Hello and welcome to my site.</p>
3. Text is saved as html file and viewed through
browser, like IE or Firefox
4. Browser reads file and translates text into visible form

What do tags do?
• Separate normal text content from HTML code words
between <angle brackets>
• Tags display content by telling browsers what to render on the
page
• Different tags perform different functions
• Tags don’t appear when page is viewed through browser but
their effects do
• Simplest tags just apply formatting to text, like this:
• <b>These words will be bold</b>, and these will not.
• <b> tags are wrapped around text and contained text will
be bolded when viewed through browser

Content types

Documents are made up of logical types of content

Semantic structure

Content of the same type usually is formatted to look the
same.

Semantic markup

HTML markup is based on logical content types

Hierarchical structure

<html> </html>

<head> </head> <body> </body>

<blockquote></
<title></title> <h1></h1> <h2></h2> <p></p> <p></p>
blockquote>

<ul></ul>

<li></li>

The resulting hierarchy

What is XHTML?
• eXtensible HyperText Markup Language
• Uses pre-existing HTML 4 tags and attributes as
vocabulary; XML provides rules of how they are put
together
• Writing XHTML requires following rules of XML such
as correct syntax and structure
• Benefits:
• Forward compatibility
• Ease of use
• Accessibility

What is HTML 5?
• Next major revision of the HTML standard
• Partial browser support already – full by 2014
• Semantically richer
• New elements and attributes
• New rules
• Full CSS3 support
• Video and audio
• 2D/3D graphics
• Web applications to replace JS, Flash and other scripting

HTML 5 tags we’ll be using
• <header> - header for section or page
• <footer> - footer for section or page
• <nav> - navigation links
• <section> - section in a document
• <hgroup> - group of headings for section
• <article> - self-contained composition that is independently
distributable
• <aside> - section of page that consists of content tangentially
related to content around it (e.g., sidebar, pull quote)
• <audio> - audio content
• <video> - video content
Consult the cheat sheets for others you’d like to try!

Elements
• Labels that identify and structure parts of web page
• Consist of three parts
• Opening tag, which can contain attributes
• Contents
• Closing tag

Empty elements
• Some elements have no content and therefore
also have no end tag
<img src=“photo.jpg” />
<br />
<hr />
<link rel="stylesheet" type="text/css" href=“main.css" />
• In XHTML, which requires end tags on all
elements, a single tag represents both the begin
and end tag

Elements: block vs. inline
Block-level
• Always displayed on new line,
like new paragraph
• Bigger structural pieces of
web page and usually contain
other block-level elements,
inline elements, and text
Inline
• Displayed in current line, like
next word in a paragraph
• Generally only contain other
inline elements and text

Elements: parents & children
• Structure is key feature
of HTML
• Proper nesting is
required
• Parent contains child
• Elements in child are
descendants of outer
parent
• Hierarchical
relationships between
elements

Attributes
• Always only used in the element begin tag
• Three types
• Optional attributes: varies with element type
• Standard attributes:
id, class, title, style, dir, lang, xml:lang
• Event attributes:
onclick, ondblclick, onmousedown, onmouseup, onmo
useover, onmousemove, onmouseout, onkeypress, on
keydown, onkeyup
• Used in scripting

Attributes and values
• Attributes contain information about the data and are
not the value itself
• In XHTML, attribute’s value must be enclosed in
quotation marks
• Some attributes can accept any value; others are more
limited (e.g., predefined)

<hgroup>,<h1>, <h2>…<h6>
• Headings on the page; <hgroup> groups
headings
• Represent the main topic, subtopics, sub-
subtopics, etc. of the page
• Important to use in logical manner; helps
assistive technologies present page content
intelligibly

<hgroup>
<h1>Our Event</h1>
<h2>Featured Speakers</h2>
<h3>Joe Smith, CEO, ABC Corp</h3>
</hgroup>

Our Event
Featured Speakers

Joe Smith, CEO, ABC Corp.

<p>
• Paragraph
• Important for presentation control to put text in an
element. When in doubt, put text in a paragraph.
• Blockquotes (<blockquote>) except they have wider left
and right margins

Lists
• Unordered lists (bulleted lists)
<ul>
<li>One</li>
<li>Two</li>
</ul>
• Ordered lists (numbered lists)
<ol>
<li>One</li>
<li>Two</li>
</ol>

Text markup for emphasis
Bolding
• <b>text</b> - visual effect only
• <strong>text</strong> - “logical” tag – adds emphasis
Italics
• <i>text</i>- visual effect only
• <em>text</em> - “logical” tag – adds emphasis
Other
• <sub>text</sub> subscript
• <sup>text</sup> superscript
• <del>text</del> deleted text

Images
• Images are placed using the <img> element
• The alt attribute provides alternative text describing the
graphic in case the graphic itself cannot be shown or the
user cannot see the graphic
<img src=“flower.png" alt=“red rose“ />

Anchors
Anchors can link your page to any file on the web or any
place on the web page

<a href="http://www.emporia.edu/">
Emporia State University</a>

<a href="#hayes">Kara Hayes, University of Washington
Tacoma</a>
…
<a name=hayes><p>Text goes here…</p>

Divs
Divs are generic block-level elements that enclose a set
of other elements

<div style=“text-align: center;”>
<h2>News</h2>
<p><a href=“budget.html”>Budget</a></p>
<p><a href=“invest.html”>Investment</a></p>
<img src=“news.png” alt=“news logo” />
</div>

Spans
Spans enclose objects (text, graphics) within an element

<p>Call me Ishmael. Some years ago — <span style=“font-
style: italic;”>never mind how long precisely</span> —
having little or no money in my purse, and nothing
particular to interest me on shore…</p>

Stolley’s 6 rules of XHTML
1. The first line of an HTML document must be DOCTYPE
declaration

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

HTML5: <!DOCTYPE html >

The DOCTYPE statement
• Declares the specific version of HTML or XHTML
being used on the page
• Used by the browser to decide how to process
the page
• Three types
• Transitional - forgiving
• Strict – requires adherence to standards
• Frameset – use if page has frames
• W3C recommended list of DTDs
• Always first in file

2. Every tag that opens must close

3. Tags close in the opposite order that they open

<p>This curry is <strong>very</strong>spicy!</p>

4. Tag elements and attributes and some values must be
in lowercase

5. Attribute values must be enclosed in quotation marks

<element attribute=“value”>
<address class=“office”>

6. Class and id values must begin with a letter and must
not contain spaces.

<h1 class=“pagetitle”>
<div id=“navigation”>

Well formed HTML is hierarchical
<html>
<head>
<title>
My Home Page
</title>
</head>
<body>
<h1>My Home Page </h1>
<p>
Welcome to my home page
</p>
</body>
</html>

Coding your first HTML page
• Basic tutorial at
http://www.w3.org/MarkUp/Guide/Overview.html
• Covers:
• Titles
• Headings and paragraphs
• Emphasis
• Images
• Links
• Lists

Xhtml and html5 basics

More Related Content

What's hot

Similar to Xhtml and html5 basics

Recently uploaded

Xhtml and html5 basics

Editor's Notes