Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML...

46
Introduction to Introduction to HTML & HTML & XHTML XHTML 15 th February

Transcript of Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML...

Page 1: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Introduction to Introduction to HTML &HTML &XHTMLXHTML

15th February

Page 2: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Introduction to HTML & Introduction to HTML & XHTMLXHTML Introduction to HTML Introduction to XHTML

Page 3: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

IntroductionIntroduction

Web developers views a web page as a document that must be created according to authoring and development guidelines

Web developers use HTML or XHTML to write code of a web page

Web browsers have a built-in interpreter to render the results of a code in its window

Page 4: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

The World Wide WebThe World Wide Web

Definitions HTML

The HyperText Markup Language The language used to design web pages

XHTML The eXtensible HyperText Markup Language Intended to enhance HTML, not replace it

World Wide Consortium (W3C) organisation is responsible for developing web standards

Page 5: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Content of Web PagesContent of Web Pages

A web site may contain a combination of 13 standard elements:

Text Sound

Lists Video

Hyperlinks Tables

Colour Layers

Graphics Frames

Images Forms

Image Maps

Page 6: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Content of Web PagesContent of Web Pages

The content of a web site can be classified as: Static content – does not change regularly e.g.

personal and professional web sites Dynamic content – changes regularly e.g.,

banking web sites, weather reports…

Page 7: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Authoring of Web PagesAuthoring of Web Pages

After a web page is designed one needs to use HTML/XHTML code to author a web page

Page 8: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

XHTML SyntaxXHTML Syntax XHTML uses tags that are enclosed in brackets (<,>)

XHTML content is enclosed between the tags

Tags and content form an XHTML Generic form: <start-tag>content<end-tag>

Start and end tags have the same name, end tag has a ‘/’ before it: <b>This is BOLD</b>

XHTML tags can be nested according to the “first open, last closed” rule: <b><i>bold and italic</i></b>

Page 9: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

XHTML SyntaxXHTML Syntax XHTML rules

Tags must be closed Empty tags must be closed Use lower case tags White space matters All attributes values must be quoted Tags must not overlap (i.e., during nesting) Comments can be used XHTML uses escaped characters

Do not use deprecated or obsolete tags Browsers ignore mis-spelled tags

Page 10: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

HTML Document HTML Document StructureStructure

<html><head>

<title>HTML Document Structure</title> <meta name="author" content=“yupeng">

</head><body>

Web page content goes here</body>

</html>

Page 11: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

XHTML Document XHTML Document StructureStructure<?xml version="1.0" encoding="iso-8859-1"?><!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">

<head><meta name="author" content=“yupeng”/><title>XHTML Document Structure</title></head><body>

Web page content goes here</body>

</html>

Page 12: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Document TagsDocument Tags

The tags that make up the framework of a typical HTML document include the following:

Document type tag – DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Top-level tag, generally <html> Tag indicates the beginning and end of an XHTML

document

Page 13: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Document Tags - HeaderDocument Tags - Header

Header section, delimited by <head> tags Provides extra information about the document Serves as a container such as styles and global

scripts The main tags used in this section are:

<title> - specifies the document title <meta> - provides information to search engines <style> - declares general & local styles for the document <script> - declares any scripting information

Page 14: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Document Tags - BodyDocument Tags - Body

Body section, delimited by <body> tags Section where visible content appears Content is a series of block tags containing inline

content

Page 15: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

XHTML TagsXHTML Tags

<!DOCTYPE ….><html>

<head>…..

</head><body>

…..</body>

</html>

Page 16: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

How can I write my first How can I write my first web page?web page?

1. Open a text editor e.g., Notepad

2. Put in code from the HTML Document Structure Slide

3. Save it as Example1.html

4. In web browser (IE/Firefox/Chrome), Select File -> Open Select Example1.html Select Open

Page 17: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Meta TagsMeta Tags

Web pages are designed for surfers and surf engines

The <meta> tag increases the chances of page indexing

Meta data refers to data about XHTML document rather than the document content

Browsers do not render meta data

Search engines use it for indexing and ranking the page hits in a given search

Some attributes of this tag are name, content, http-equiv, scheme

Page 18: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Meta TagsMeta Tags

<meta name=“keywords” content=“open, source, PHP, programming, code” />

When a search engine indexes the page, it includes the extra information -> open, source etc.

It provides the keywords to agents requesting them

Some search engines use these keywords to categorise the document for searching

Page 19: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Amazon’s Meta TagsAmazon’s Meta Tags

<meta name="description" content="Low prices on digital cameras, MP3, LCD TVs, books, music, DVDs, video games, software, home & garden and much, much more. Free delivery on orders over £15." />

<meta name="keywords" content="digital camera, LCD TV, books, DVD, low prices, video games, pc games, software, electronics, home, garden, video, amazon" />

Page 20: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Authoring ToolsAuthoring Tools Tools need to develop a web site:

Editor Graphics program Digital cameras Scanners Audio & video software

Types of editors Text: type in code and view results later -> Bottom-up development HTML: view results as you develop the web page -> top-down

development

Web author must be familiar with both approaches

Page 21: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Text FormattingText Formatting Paragraphs Lines Headings Horizontal Rules Block divisions

Page 22: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

ParagraphsParagraphs Main textual blocks, delimited by <p> tags

<p>This a paragraph of text in an XHTML document</p>

This a paragraph of text in an XHTML document

Line spaceLine space

Page 23: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

LinesLines

Used when you need to break a line prematurely (before the paragraph)

The line break tag is <br/>

Page 24: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Lines - ExampleLines - Example<p>This a paragraph of text in an XHTML document</p>

<p>This a 2nd paragraph of text in an XHTML document</p>

This a paragraph of text in an XHTML document

This a 2nd paragraph of text in an XHTML document

<p>This a paragraph of text in an XHTML document</p>

<br/>

<p>This a 2nd paragraph of text in an XHTML document</p>

This a paragraph of text in an XHTML document

This a 2nd paragraph of text in an XHTML document

Page 25: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

HeadingsHeadings There are 6 levels of headings <h1>…..<h6>, the higher

the heading number the smaller the text

<h1> Heading 1</h1>

<h2> Heading 2</h2>

<h3> Heading 3</h3>

<h4> Heading 4</h4>

<h5> Heading 5</h5>

<h6> Heading 6</h6>

Heading 1Heading 1Heading 2Heading 2Heading 3Heading 3Heading 4Heading 4Heading 5Heading 5Heading 6Heading 6

Page 26: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Horizontal RulesHorizontal Rules Horizontal rules appear as lines across the user agent

screen - <hr/> Used to separate information visually

A line should be drawn under this text

<hr/>

A line should be drawn under this text

Page 27: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Block DivisionsBlock Divisions Sometimes, there is a need to format a large block of text

in a similar fashion but in a way that is different from other blocks in the same document e.g. a quote should appear in a different style than the text around it - <div>

<div align="center"> Text formatted using div tag

</div>

Text formatted using div tag

Page 28: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Text FormattingText Formatting

TextText

HeadingsHeadings ParagraphsParagraphs Word/CharactersWord/Characters

<h1> largest<h1> largest....<h6> smallest<h6> smallest

<p><p><b> bold<b> bold<i> italic<i> italic<br/> line break<br/> line break<div> acts like a line break<div> acts like a line break

<hr/> line in a web page, <hr/> line in a web page,

Page 29: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Special CharactersSpecial Characters These are required because some characters are reserved

for XHTML use such as ‘<‘,’>’, etc. Special characters are represented by a character entity or

a numeric code The character entity begins with & and ends with;

&copy; ->©

The numeric code begins with &# and ends with ;&#169; -> ©

3 distinct character sets are: ISO 8859-1 (Latin – 1) Symbols, mathematical symbols, and Greek letters Markup-significant and internationalisation characters

Page 30: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

HyperlinksHyperlinks Hyperlinks link web pages to each other

A link is a connection from one source to another Hyperlinks create hypertext and is the driving force of the web

Hyperlinks can be used as: Links (inter-document links) Anchors (intra-document links)

Links start at the source (visible part) and points to the destination (invisible part)

<a invisible part> visible part</a>

Text or imageText or image File / web page/ program/ image/ video or File / web page/ program/ image/ video or Audio file….etc.Audio file….etc.

Page 31: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

HyperlinksHyperlinks The important attributes of the <a> tag:

href title name charset type rel rev accesskey shape coords

Page 32: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

HyperlinksHyperlinks

The visible part of the link may have 4 states Link – is not active and has not been visited Active – target of the link is active in another browser

window Visited – target of the link has been previously visited Hover – mouse pointer is over the link

Example:

<a href=http://www.dit.ie> This is the DIT web site</a>

Page 33: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

HyperlinksHyperlinks

Anchors are <a> tag to link different sections of the same web page

2 uses of anchors are for table of contents and eliminating scrolling

Creation of anchor requires 2 <a> tags

<a name=“sale”> and <a href=“#sale”>

Page 34: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Hyperlinks - anchorsHyperlinks - anchors

<a name="Contents">Table of Contents</a>

<a href="#Section1"> Section 1</a>

<a name="Section1"> Section 1</a>

<a href="#Contents"> Return to Table of Contents</a>

Page 35: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

ListsLists

XHTML supports 3 types of lists: Ordered – <ol> Unordered – <ul> Definition – <dl>

Lists may be nested to obtain multiple hierarchy levels

Page 36: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Ordered List - <ol>Ordered List - <ol>

Lists whose elements must appear in a certain order

Such lists usually have their items prefixed with a number or letter

<ol><ol><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li>

</ol></ol>

1.1. ApplesApples2.2. BananasBananas3.3. CoconutsCoconuts

Page 37: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Ordered List - <ol>Ordered List - <ol> How can the numbering style be changed??

Some other style options: decimal lower-roman upper-roman upper-alpha

<ol <ol style=“list-style-type: lower-alpha”style=“list-style-type: lower-alpha”>><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li>

</ol></ol>

a.a. ApplesApplesb.b. BananasBananasc.c. CoconutsCoconuts

Page 38: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Unordered List - <ul>Unordered List - <ul>

Lists whose elements do not have to appear in a certain order

<ul><ul><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li>

</ul></ul>

• ApplesApples• BananasBananas• CoconutsCoconuts

Page 39: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Unordered List - <ul>Unordered List - <ul> How can the list item marker be changed??

Some other style options: disc circle none

<ul <ul style=“list-style-type: square”style=“list-style-type: square”>><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li>

</ul></ul>

ApplesApplesBananasBananasCoconutsCoconuts

Page 40: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Definition List - <dl>Definition List - <dl> More complex than the other 2 lists due to their

having 2 elements per list item<dl><dl> <dt>Internet Explorer</dt><dt>Internet Explorer</dt> <dd>Developed by Microsoft</dd><dd>Developed by Microsoft</dd> <dt>Netscape</dt><dt>Netscape</dt> <dd>Developed by Netscape</dd><dd>Developed by Netscape</dd> </dl></dl>

Internet ExplorerInternet ExplorerDeveloped by MicrosoftDeveloped by Microsoft

NetscapeNetscapeDeveloped by NetscapeDeveloped by Netscape

Page 41: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Nesting ListsNesting Lists

Lists can be nested of the same or different types

<ul><ul> <li>Send us a letter, including:</li><li>Send us a letter, including:</li> <ol><ol>

<li>Your full name</li><li>Your full name</li><li>Your order number</li><li>Your order number</li><li>Your contact information</li><li>Your contact information</li>

</ol></ol> <li> Use the web form to send an email </li><li> Use the web form to send an email </li></ul></ul>

• Send us a letter, including:Send us a letter, including:1.1. Your full nameYour full name2.2. Your order numberYour order number3.3. You contact informationYou contact information

• Use the web form to send an emailUse the web form to send an email

Page 42: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

ColoursColours

Colour is an essential element and greatly improves visualisation

A web author can set colours for background and text

Tags have a color attribute that enables web authors to set colours for different XHTML elements

Colours are specified using hexadecimal codes Black -> #000000

Red -> #FF0000

Blue -> #0000FF

Colours can be set globally or locally

Page 43: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Audio & Video Audio & Video

XHTML allows any author to incorporate digital audio and videos in a web page

Audio formats – AU, WAV, MIDI, AIFF and MP3

Video formats – AVI, QuickTime, MPEG and MJPEG

A surfer must have the right hardware and software to be able to play multimedia content of the web page

<embed> tag is used to incorporate audio and video files in a web page

Attributes used are src, width and height, volume, autostart, loop and hidden

Page 44: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Audio & Video Audio & Video

<embed src="music.mp3" width="145" height="60" volume="70"> </embed>

Page 45: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Conclusion Conclusion

Three views of Web pages: URL, browser display, and document

Web sites and Web pages Text formatting: text, lists, colors, hyperlinks, audio, video HTML and XHTML Text and HTML editors XHTML document structure Content of Web pages Special characters

Page 46: Introduction to HTML & XHTML 15 th February. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML.

Reference Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript