Post on 28-Dec-2015
Introduction to Introduction to HTML &HTML &XHTMLXHTML
15th February
Introduction to HTML & Introduction to HTML & XHTMLXHTML 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
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
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
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…
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
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>
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
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>
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>
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
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
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
XHTML TagsXHTML Tags
<!DOCTYPE ….><html>
<head>…..
</head><body>
…..</body>
</html>
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
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
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
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" />
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
Text FormattingText Formatting Paragraphs Lines Headings Horizontal Rules Block divisions
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
LinesLines
Used when you need to break a line prematurely (before the paragraph)
The line break tag is <br/>
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
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
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
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
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,
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;
© ->©
The numeric code begins with &# and ends with ;© -> ©
3 distinct character sets are: ISO 8859-1 (Latin – 1) Symbols, mathematical symbols, and Greek letters Markup-significant and internationalisation characters
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.
HyperlinksHyperlinks The important attributes of the <a> tag:
href title name charset type rel rev accesskey shape coords
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>
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”>
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>
ListsLists
XHTML supports 3 types of lists: Ordered – <ol> Unordered – <ul> Definition – <dl>
Lists may be nested to obtain multiple hierarchy levels
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
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
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
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
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
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
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
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
Audio & Video Audio & Video
<embed src="music.mp3" width="145" height="60" volume="70"> </embed>
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
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