More Related Content
Similar to HTML & XHTML Basics (20)
More from Hossein Zahed (13)
HTML & XHTML Basics
- 1. HTML & XHTML
1
HOSSEIN ZAHED
AMIR KABIR UNIVERSITY OF TECHNOLOGY
HTTP://WWW.HZAHED.COM
HOSSEIN.ASPX@GMAIL.COM
© 2013 Hossein Zahed - www.hzahed.com
- 2. Using HTML/XHTML
2
XHTML is relatively simple. You do most of your
work with about twenty tags.
XHTML is orderly and structured
Good references and tutorial sites are available
Follow the standards and your work will be much
simpler, more consistent, and your results more
reliable
Plus your co-workers will like you more
© 2013 Hossein Zahed - www.hzahed.com
- 5. The Browser Is Not Print
5
No fixed page size
No fixed page length
User can change the font size
User can link to her/his own local style sheet
Screen size can be tiny or huge
© 2013 Hossein Zahed - www.hzahed.com
- 7. The Birth of HTML
7
Created by Tim Berners-Lee at
CERN
Open standard developed under
supervision of the World Wide
Web Consortium (www.w3.org)
© 2013 Hossein Zahed - www.hzahed.com
- 8. The History of HTML/XHTML
8
1992 – HTML first defined
1994 – HTML 2.0
1995 – Netscape specific non-standard HTML
1996 – HTML 3.2, compromise version
1997 – HTML 4.0, separates content from presentation
1998 – XML standard for writing Web languages
2000 – XHTML 1.0, XML compliant HTML
2002 – XHTML 2.0
2008 – HTML 5.0
© 2013 Hossein Zahed - www.hzahed.com
- 9. Problems With HTML
9
In Large Scale Websites (Large number of HTML
pages) changing anything is very hard
Lack of Visual Effects in presentation
Lack of Programming features, only Static Pages
allowed. No database can be used
Cross Browser Problems (Chrome, IE, Firefox)
Lack of Multimedia support (Videos, Music, Flash
Animation)
© 2013 Hossein Zahed - www.hzahed.com
- 10. XHTML
10
XHTML is a version of HTML modified to conform to the
XML standard
Designed to separate content from presentation
Content in XHTML
Presentation controlled by Cascading Style Sheets (CSS)
Extensible – Additional elements can be defined
XML Compatible – Other XML based languages can be
embedded in XHTML documents
Like a programming language
Specific syntax to use
Validators help you get it right
© 2013 Hossein Zahed - www.hzahed.com
- 11. XHTML Differences
11
Case is significant
All elements must have begin tags and end tags
<p>Hello</p>
Empty elements contain their own end tag
<br /> , <hr/>
Attribute values must be enclosed in quotation
marks
More specifics available at
http://www.w3.org/TR/xhtml1/#diffs
© 2013 Hossein Zahed - www.hzahed.com
- 12. A Simple XHTML File
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
My Home Page
</title>
</head>
<body>
<h1>My Home Page </h1>
<p>
Welcome to my home page
</p>
</body>
</html>
© 2013 Hossein Zahed - www.hzahed.com
- 18. The DOCTYPE Statement
18
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
Always first in file
© 2013 Hossein Zahed - www.hzahed.com
- 19. Strict DOCTYPE
19
Enter exactly as below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN―
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Using Strict encourages standards based coding
Validators will flag logical errors in your methods
Your CSS will work better and more predictably
© 2013 Hossein Zahed - www.hzahed.com
- 20. Elements
20
Consist of three parts
Begin tag, which can contain attributes
Contents
End tag
Example:
<p id=―intro‖>Welcome</p>
W3schools specifications for <p>
http://www.w3schools.com/tags/tag_p.asp
© 2013 Hossein Zahed - www.hzahed.com
- 21. Attributes
21
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, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup
Used in scripting
© 2013 Hossein Zahed - www.hzahed.com
- 22. Empty Elements
22
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
© 2013 Hossein Zahed - www.hzahed.com
- 23. Heading
23
<h1>, <h2>, … , <h6>
Headings on the page
Represent the main topic, subtopics, subsubtopics,
etc. of the page
Important to use they in a logical manner, which
greatly helps assistive technology like voice browsers
present the page content intelligibly
© 2013 Hossein Zahed - www.hzahed.com
- 24. Paragraph
24
<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
© 2013 Hossein Zahed - www.hzahed.com
- 25. List
25
Unordered lists (bulleted lists)
<ul>
<li>One</li>
<li>Two</li>
</ul>
Ordered lists (numbered lists)
<ol>
<li>One</li>
<li>Two</li>
</ol>
© 2013 Hossein Zahed - www.hzahed.com
- 26. Text Markup
26
Bolding
<b>text</b>
<strong>text</strong>
Italics
<i>text</i>
<em>text</em>
Other
<sub>text</sub> subscript
<sup>text</sup> superscript
<del>text</del> deleted text
© 2013 Hossein Zahed - www.hzahed.com
- 27. Table
27
<table border="1" cellspacing="5" cellpadding="10">
<caption>People on the team</caption>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>Mary</td>
<td>Analyst</td>
</tr>
<tr>
<td>John</td>
<td>Technician</td>
</tr>
</table>
© 2013 Hossein Zahed - www.hzahed.com
- 28. Graphic (Image)
28
Graphics are placed by using an 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="picture.gif" alt="Suzzallo― />
© 2013 Hossein Zahed - www.hzahed.com
- 29. Anchor (Link)
29
Anchors can link your page to any file, page, URL on
the Web OR to a section on the same page
<a href="http://www.washington.edu/">
University of Washington </a>
© 2013 Hossein Zahed - www.hzahed.com
- 30. Div
30
<div>
Divs enclose a set of 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>
</div>
© 2013 Hossein Zahed - www.hzahed.com
- 31. Span
31
<span>
Spans enclose objects (text, graphics) within an
element
<p>Call me Ishmael. Some years ago — <span style=―fontstyle: italic;‖>never mind how long precisely</span> —
having little or no money in my purse, and nothing
particular to interest me on shore,
© 2013 Hossein Zahed - www.hzahed.com
- 32. Form
32
HTML forms are used to pass data to a server
An HTML form can contain input elements like
Text Fields
Checkboxes
Radio-Buttons
Submit Buttons and more
Textarea
Fieldset
Legend
Label
© 2013 Hossein Zahed - www.hzahed.com
- 33. Form Tags
33
<input type="text"> Defines a one-line input field
that a user can enter text into
<input type="password"> Defines a password field
<input type="radio"> Defines a radio button.
Radio buttons let a user select ONLY ONE of a
limited number of choices
<input type="checkbox"> Defines a checkbox.
Checkboxes let a user select ZERO or MORE
options of a limited number of choices
<input type="submit"> Defines a submit button
© 2013 Hossein Zahed - www.hzahed.com
- 34. Form Tags
34
<fieldset> Draws a box around the related
elements
<legend> Defines a caption for the <fieldset>
element
<select> Is used to create a drop-down list
<option> Inside the <select> element define the
available options in the list
© 2013 Hossein Zahed - www.hzahed.com
- 35. Other HTML Tags
35
<style> Defines style information for an HTML
document
<meta> Provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be
machine pars able.
<script> Contains scripting statements, or it points to an
external script file through the src attribute. (Like
JavaScript, VB Script)
<embed> Defines a container for an external application
or interactive content (a plug-in like Flash, YouTube).
<iframe> An inline frame is used to embed another
document within the current HTML document.
<hidden> Defines a hidden input field
© 2013 Hossein Zahed - www.hzahed.com
- 36. HTML5 New Tags
36
<canvas> Draws Graphics on the fly
<video> Defines a video or movie
<audio> Defines sound content
<source> Defines multiple media resources
<article> Defines an article
<dialog> Defines a dialog box or window
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<mark> Defines marked / highlighted text
<meter> Defines a scalar measurement within a known
range
<time> Defines a date/time
© 2013 Hossein Zahed - www.hzahed.com