HTML & XHTML Basics

HTML & XHTML
1

HOSSEIN ZAHED
AMIR KABIR UNIVERSITY OF TECHNOLOGY
HTTP://WWW.HZAHED.COM
HOSSEIN.ASPX@GMAIL.COM

© 2013 Hossein Zahed - www.hzahed.com

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


Device Independence
3

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

The Browser
4

The browser is not print!

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


The Adjustable Document
6


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)


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


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)


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


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


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>

Hierarchical Structure
13

Well formed xhtml forms a hierarchy

Content Types
14

Documents are made up of logical types of content.

Semantic Structure
15

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

Semantic Markup
16

HTML markup is based on logical content types

Hierarchy
17

The resulting hierarchy

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


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


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


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


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


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


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


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>


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


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>

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― />


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>


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>


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,


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


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


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


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


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












Resources
37

 W3schools


http://www.w3schools.com/

 RADCOM (Farsi Language)


http://www.html.ir


HTML & XHTML Basics

HTML & XHTML Basics

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente(20)

Destacado

Destacado(20)

Similar a HTML & XHTML Basics

Similar a HTML & XHTML Basics(20)

Más de Hossein Zahed

Más de Hossein Zahed(13)

Último

Último(20)

HTML & XHTML Basics