COM414 HTML lecture

Part 1 - Introduction to Web Page
Development
Kevin Curran
Introduction to the World Wide Web
• Hypertext linking
– Most important aspect of the Web
• Web page
– Document on the Web
– Identified by Uniform Resource Locator (URL)
• Web site
– Location on the Internet where an individual,
company, or organization keeps Web pages
• Web browser is used to view Web pages
• Web server delivers Web pages
Creating Web Pages
• Markup language
– Set of characters or symbols that defines a
document’s logical structure
• Hypertext Markup Language (HTML)
– Based on an older language called Standard
Generalized Markup Language
– Originally designed as a way of defining the
elements in a document independent of how they
would appear
Basic HTML Syntax
• HTML documents
– Text documents that contain formatting instructions,
called tags
– Tags are enclosed in brackets (< >)
– Closing tag must include a forward slash ( / )
– Tag pair and any data it contains are an element
• Empty elements
– Do not require a closing tag
• Root element
– Contains all the other elements in a document
Basic HTML Syntax (continued)
• Document head <head>
• Document body <body>
• Parsing or rendering
– Web browser assembles and formats an HTML document
• Attributes
– Parameters to elements
– <img src="mygraphic.gif">
• Web browser ignores nonprinting characters such as
tabs and line breaks
• Text editor
• HTML editors
Working with Well-Formed Web Pages
• Extensible Hypertext Markup Language (XHTML)
– Next-generation markup language for creating Web pages
• User agent
– Traditional Web browser, a mobile phone, a crawler for a search
engine
– HTML is not suitable for user agents other than Web browsers
• Document Type Definition (DTD)
– Define the tags and attributes that you can use in a document and
the rules the document must follow when it includes them
– Valid versus invalid
– HTML DTD usually ignored
• W3C created XHTML to address issues with HTML
Understanding the Basics of XML
• Extensible Markup Language (XML)
– Text-based format for organizing data
• Element
– Tag pair and the data it contains
– All elements must have an opening and a closing tag
• Define your own elements and attributes to describe the data in
your document
The XML Declaration
• Specifies the version of XML being used
• Attributes: version, standalone, and encoding
• Example:
<?xml version="1.0" encoding="iso-8859-1”
standalone="yes"?>
Parsing XML Documents
• Well formed
– Document adheres to XML’s syntax rules
• Parser
– Check whether an XML document is well formed
• Two types of parsers: non-validating and validating
Writing Well-Formed Documents
•
•
•
•
•
•
•
All XML documents must have a root element
XML is case sensitive
All XML elements must have a closing tag
XML elements must be properly nested
Attribute values must appear within quotation marks
Empty elements must be closed
Root element contains all other elements in a
document
XML Is Case Sensitive
• HTML not case sensitive:
<B>This
<b>This
<B>This
<b>This
line
line
line
line
is
is
is
is
bold.</B>
also bold.</b>
bold.</b>
also bold.</B>
• With XML, however, you cannot mix the case of elements
– Does not match: <color>Red</COLOR>
• All elements must have a closing tag or the document will
not be well formed
XML Elements Must Be Properly
Nested
• Nesting
– How elements are placed inside other elements
• In an HTML document
– Makes no difference how the elements are nested
• In XML
– Each innermost element must be closed before
another element is closed
Attribute Values Must Appear Within
Quotation Marks
• HTML can assign attribute values with or without “”
– Examples:
<img src="dog.gif">Image of a dog</img>
<img src=cat.gif>Image of a cat</img>
• With XML
– Must place quotation marks around the values
assigned to an attribute
– Example:
<manufacturer company="General Motors"/>
Empty Elements Must Be Closed
• Empty elements
– Do not require an ending tag
– Create by adding a single slash (/) before the tag’s
closing bracket to close the element
Combining XML and HTML
• Extensible Stylesheet Language (XSL)
– Specification for formatting XML in a Web browser
– Not clear that XML and XSL currently provide an
adequate alternative to HTML
• W3C combined XML and HTML to create XHTML
– Almost identical to HTML
– Uses strict XML syntax to describe the parts of a
document
The Problem
• Computers often need to exchange data between
incompatible systems
– Hardware incompatible e.g.. MAC vs. PC (different
representations for integer and real numbers in the case of IBM
mainframes even different representations for letters too!)
– Data incompatible e.g. Microsoft Word vs. Oracle (both store data
in a proprietary format which is not documented. This makes you
reliant on them writing converters which are often not very good
(because they don’t want you to use another product with your
data)
Solution Strategies
• Agree on a totally custom format
Have to agree on the custom format. Write
converters to convert data to custom format
• Agree on a proprietary system
Have to agree which propriety system to use
g.e. Word. System does data conversion.
• Use a data format standard
May have to convert data to the standard
format if it is not in that form already
Propriety Systems
• Word documents often look good on paper and in the word application but
many people do not use Word. It is therefore a bad format to publish
documents on the web with.
Well Java is free and
runs on many types
of hardware
• PDF is better because there are free readers available for most computer
hardware and operating systems…..but the editors are expensive…..
The Problem – Business Perspective
• Businesses need documents that can be understood by
humans and computers.
ASCII text is readable by just about any application
and was therefore chosen as the standard to
represent HTML and the look of web pages.
• In addition, the document must contain enough added
information to enable the understanding of its underlying
structure as well as the meaning of the data (meta
data).
Well html can be read, viewed and
edited by many applications
HTML is not the Solution
• Why not use HTML as the standard for transferring data
between applications?
– HTML specifies how text data should be visually represented
e.g. bold.
• We want to transfer data and usually don’t care or even don’t know how
the other application will display it
• The data may not have an obvious HTML text based visual
representation e.g. sound
– HTML does not specify what the data means. When we store or
transfer data we often need to know what the data means after
all its really information not just numbers and letters!
The Way Forward
• Transfer between applications and preferably store all data
in a standard format.
• Ensure the standard contains enough information
– to tell you what each data field means
– To tell you the structure and relationship between data fields
• Make sure the standard can be transported and edited
easily especially across the internet
But eventually
someone will want
to view the data…
If you need to view the
data just convert from the
standard into HTML or
PDF etc…
XML eXtensible Markup Language
is one answer
• Is a replacement for EDI and benefits from the mistakes
made in designing EDI
• Is independent of any transport protocol and can easily
be sent via email or the internet/web
• Is readable by humans and editable with any text editor
(unlike a saved Word document)
• Shows the structure of the data
• XML tags describe content
• Can be validated by a parser
students.html
Specifies visual presentation
<html>
<head> </head>
<body>
<h2>Student List</h2>
<ul>
<li> 9906789 </li>
<li>Adam</li>
<li>[email protected]</li>
<li>yes - final </li>
</ul>
<ul>
<li> 9806791 </li>
<li>Adrian</li>
<li>[email protected]</li>
<li>no</li>
</ul>
</body>
</html>
students.xml
Specifies structure of the data
<?xml version = "1.0"?>
<student_list>
<student>
<id> 9906789 </id>
<name> Adam </name>
<email> [email protected]
</email>
<bsc level=“final”>yes</bsc>
</student>
<student>
<id> 9806791 </id>
<name>Adrian</name>
<email>[email protected]</email
>
<bsc>no</bsc>
</student>
HTML Document
(good for formatting)
<html><body>
<h2>Student List</h2>
<ul>
<li> 9906789 </li>
<li>Adam</li>
<li>[email protected]</li>
<li>yes - final </li>
</ul>
<ul>
<li> 9806791 </li>
<li>Adrian</li>
<li>[email protected]</li>
<li>no</li>
</ul>
</body></html>
Is this the student ID? or UCAS number?
What is “yes”?
Data and
presentation logic
mixed
What is “no”?
XML Document
(good for describing data)
<?xml version = "1.0"?>
<student_list>
<student>
<id> 9906789 </id>
<name>Adam</name>
<email>[email protected]</email>
<bsc level=“final”>yes</bsc>
</student>
<student>
<id> 9806791 </id>
<name>Adrian</name>
<email>[email protected]</email>
<bsc>no</bsc>
</student>
</student_list>
Only data
• Data is self-describing
• custom tags describe content
(you can/will define your own tags)
• easy to locate data
(e.g. all BSC students)
XML Elements
- have the same overall structure
- can contain sub-elements
NAME
Either another element just text
<Student Sex = “Male”
</Student> ATTRIBUTE
START TAG
>
Some Data
CONTENTS
ELEMENT
END TAG
Element vs. Attribute based XML
<student>
1
<id> 9906789 </id>
<name>Adam</name>
<email>[email protected]</email>
</student>
<student id = “9906789”>
2
<name>Adam</name>
<email>[email protected]</email>
</student>
<student id = “9906789” name=“Adam email=“[email protected]”> </student>
Which is better?
3
NO RIGHT ANSWER!
Some issues to consider
- elements can have substructures; but not attributes
- ID attributes can be easily located and processed
- Attributes can also be references to other elements or unique
Lexical Structure
• XML is simple; not many lexical rules
• all XML names must begin with a letter, “_” OR “:” :
is reserved for namespaces
• Names can contain Letters, Numbers, -, . , : ,
specialised foreign language characters such as Ó,
Ö etc
• Names should not begin with XML (any case)
• Legal Names: Sahithi SAHithi
My:Sur_Name
• Illegal Names: Sahithi! $Sahithi
Ends with an illegal character
Starts with an illegal character
A=B/C 100
Illegal
characters
Starts with a number
XML Document
(another sample .xml file)
<?xml version = "1.0"?>
Prolog

Root element
Element with
children
<books>
<author>
<title> Introduction to Computer Graphics </title>
<date>1995</date>
Element without
<fname>James</fname>
children
<lname>Foley</lname>
</author>
<author>
<title> Principles of Database Systems </title>
<date month="February” >2000</date>
<fname>Greg</fname>
Attribute
<lname>Riccardi</lname>
</author>
</books>
Miscellaneous
<!- - This is a list of students - ->
• The document structures
data with ‘books’ element
as the root node.
• Root node contains
elements (e.g. author)
• Each element further
contains child nodes that
describe data
• <books>,<author>,<title>
etc. are customised tags
describing data.
XML Structure
• Three distinct parts
• Prolog <?xml version=“1.0” encoding=“UTF-8”?> contains
instructions that apply to the entire document (such as XML
declaration, DTD)
• Root Element is a single element that encloses all of the data
• Miscellaneous Section is not recommended but still included
in the standard
Xml document
Child
element
Root element
Miscellaneous
element
Child
element
Child
element
Child
element
Child
element
Child
element
XML Syntax
• XML elements must be enclosed within start and end tags
<title> Introduction to Computer Graphics </title>
If there is no data inside the element, tag can end with ‘/>’
<title/> which is same as <title> </title>
• Element attributes must be enclosed within double quotes:
<date month="February" >2000</date>
• Element tags are case sensitive <author> Adam </Author> is incorrect
• XML tags must be nested in correct order:
<books> <author> … </author> </books> Good
<books> <author> … </books> </author> Bad
XML is therefore very rigid in enforcing syntax compared to HTML (which is
very forgiving)
• A “well formed” documents follows all these rules
XML is not enough to ensure valid data
structure!
• Any XML document which conforms to the XML syntax
(such as every tag must have a corresponding closing tag
is considered) to be well-formed
• However, this does not mean that all the structure of
the data is what you wanted. For instance you may want
to enforce:
– That a particular data field is present for each child
– Data fields in each child appear in the same order
– That a data field may not be present more than once in a
child node
XML is not enough to ensure
valid data structure
<?xml version = "1.0"?>
<books>
<author>
<date>1995</date>
<title> Introduction to Computer Graphics </title>
<fname>James</fname>
<lname>Foley</lname>
</author>
<author>
<title> Principles of Database Systems </title>
<date month="February">2000</date>
<fname>Greg</fname>
<lname>Riccardi</lname>
</author>
<author>
<title/>
<date>2010</date>
<fname>Dummy</fname>
<lname>Author</lname>
</author>
</books>
Valid?
Date has no attribute
Order of tags is
date then title
Order of tags is
title then date
Date has an attribute
called month
Title is empty
DTD: Document Type Definition
• DTD specifies grammar rules for an XML document
enforcing the structure
• This allows several XML documents prepared from various
sources can be validated using a single set of grammar rules
• An XML document that adheres to a DTD is called valid.
• DTD specifies rules for elements (child nodes) and how it can
be expanded into sub elements (child nodes)
• DTD consists - Element declarations, Attribute list, Data types
etc.
• DTDs are based on SGML: difficult to create!
Defining an DTD Element
• An element can either be defined as being empty,
containing a string of characters or containing some
sub elements (children)…
<!ELEMENT element EMPTY>
<!ELEMENT element (#PCDATA)>
<!ELEMENT element (subelement1,subelement2)>
<!ELEMENT element (subelement1|subelement2)>
EMPTY DTD element
<!ELEMENT useless EMPTY>
Name of element
Valid XML
<useless></useless>
Not Valid XML
<useless> </useless>
Not Valid XML
<useless> foo bar </useless>
XML does not throw away spaces so if
there is a space here the element is
NOT empty and can not be validated
against the DTD
DTD element just containing text
<!ELEMENT nothing_special (#PCDATA)>
Parsed Character DATA this is
DTD speak for a string!!
Valid XML
<nothing_special ></nothing_special >
Valid XML
<nothing_special > </nothing_special >
Valid XML
<nothing_special > foo bar </nothing_special >
DTD element containing children
<!ELEMENT parent (child1,child2)>
<!ELEMENT child1 (#PCDATA)>
<!ELEMENT child2 (#PCDATA)>
Valid XML
<parent>
<child1> any old text1</child1>
<child2> any old text2 </child2>
</parent>
Not Valid XML
<parent>
</parent>
Not Valid XML
<parent>
<child2> any old text1 </child2>
<child1> any old text2 </child1>
</parent>
Parent contains two child elements
with tags child1 and child2. There
must also be DTD definitions for
child1 and child2!!!!
In the XML child1 must come
before child2
Child elements must be
present
Right elements wrong order
DTD element containing optional children
<!ELEMENT parent (child1,child2?)>
<!ELEMENT child1 (#PCDATA)>
<!ELEMENT child2 (#PCDATA)>
Valid XML
<parent>
<child1> any old text1 </child1>
<child2> any old text2 </child2>
</parent>
Valid XML
<parent>
<child1> any old text </child1>
</parent>
The question mark means this
element is optional I.e. can be
present 0 or 1 time
DTD element containing zero or more
children of the same element
<!ELEMENT parent (child1*)>
<!ELEMENT child1 (#PCDATA)>
Valid XML
<parent>
</parent>
Valid XML
<parent>
<child1> any old text </child1>
</parent>
Valid XML
<parent>
<child1> any old text1 </child1>
<child1> any old text2 </child1>
</parent>
The * means this element is
present 0 or more times
DTD element containing one or
more children of the same element
<!ELEMENT parent (child1+)>
<!ELEMENT child1 (#PCDATA)>
Valid XML
<parent>
</parent>
Valid XML
<parent>
<child1> any old text </child1>
</parent>
Valid XML
<parent>
<child1> any old text1 </child1>
<child1> any old text2 </child1>
</parent>
The + means this element is
present 1 or more times
DTD element containing one of a choice of
child elements
<!ELEMENT parent (child1|child2)>
<!ELEMENT child1
(#PCDATA)>
<!ELEMENT child2
(#PCDATA)>
Valid XML
<parent>
<child1> any old text </child1>
</parent>
Valid XML
<parent>
<child2> any old text </child2>
</parent>
Not Valid XML
<parent>
</parent>
Either child1 or child2 must be
present once and both may not
be present
Not Valid XML
<parent>
<child1> any old text1 </child1>
<child2> any old text2 </child2>
</parent>
Not Valid XML
<parent>
<child1> any old text1 </child1>
<child1> any old text2 </child1>
</parent>
Including DTD in XML document
•The DTD specification is enforced in an XML document using the statement
<!DOCTYPE books SYSTEM ”Author.dtd">
books is the root element of the document. SYSTEM
specifies the DTD file.
Author.dtd
Must match root of

XML document
<!ELEMENT books (author+)>
<!ELEMENT author (date, title, fname,
lname)>
AuthorDtd.xml using a DTD
<!ELEMENT date (#PCDATA)>
<!ATTLIST date month CDATA #IMPLIED>
<!DOCTYPE books SYSTEM "Author.dtd">
<!ELEMENT title (#PCDATA)>
<books>
<!ELEMENT fname (#PCDATA)>
<author>
<!ELEMENT lname (#PCDATA)>
<date>1995</date>
<title> Introduction to Graphics </title>
<fname>James</fname>
<lname>Foley</lname>
</author>
…..
</books>
Embedding DTD in XML document
Name of root element (must match root
in DTD and root in XML
<!DOCTYPE parent
[
<!ELEMENT parent (child1|child2)>
<!ELEMENT child1 (#PCDATA)>
<!ELEMENT child2 (#PCDATA)>
]>
<parent>
<child1> oisahdf oiadhf </child1>
</parent>
DTD
XML
Structuring Web Pages
• <!DOCTYPE> declaration
– States the XHTML version of the document
– Required by HTML 5 and XHTML
– HTML 5: <!DOCTYPE HTML>
– XHTML: Requires one of three DTDs: Transitional,
Frameset, or Strict
• <html>, <head>, and <body> elements
– Required by HTML 5 and XHTML
Structuring Web Pages (continued)
• Well-formed HTML 5 Web page:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
</head>
<body>
. . .
</body>
</html>
Understanding Backward Compatibility
• XHTML documents must have an extension of
.html or .htm
• For empty elements, add a space between the
element name and the closing slash
– <hr />
– Include the space and slash for all empty elements
Defining the XHTML <!DOCTYPE>
Declaration
• XHTML <!DOCTYPE> declaration
– <!DOCTYPE html type "public identifier"
"URL">
– Replace the type attribute of the <!DOCTYPE>
declaration with PUBLIC or SYSTEM
• Public identifier
– Text string used to identify a DTD on the Web
• Universal Resource Locator (URL) of the DTD
• Public identifiers for XHTML 1.0 are built into
current Web browsers and other user agents
Understanding XHTML DTDs
• World Wide Web Consortium (W3C) created
XHTML to make the transition to XML-based Web
pages easier
– Provides three types of XHTML DTDs: Transitional,
Frameset, and Strict
Transitional DTD
• Deprecated
– Elements and attributes that are
considered to be obsolete and
that will eventually be
eliminated
• Transitional DTD
– Continue using deprecated
elements along with the wellformed document requirements
of XML
• Example:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0
Transitional//EN”
"http://www.w3.org/TR/xhtm
l1/DTD/xhtml1transitional.dtd">
Frameset & Strict DTD
• Identical to the Transitional DTD
• Includes the <frameset> and <frame> elements
– Split the browser window into two or more frames
• Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
• Eliminates the elements that were deprecated in the
Transitional DTD and Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Working with Required Elements
• Three elements must be included in every XHTML
document:
– <html>
– <head>
– <body>
The <html> Element
• Tells a Web browser that the instructions between the
opening and closing <html> tags are to be assembled into
an HTML document
• Root element for XHTML documents
• XHTML namespace
– Organizes the elements and attributes of an XML document into
separate groups
– Add the namespace and colon before the tag name in both the
opening and closing tags:
<investments:company>Oracle</investments:company>
The <html> Element (continued)
• Default namespace
– Applied to all of the elements and attributes in an
XHTML document
• xmlns namespace attribute in the <html>
element
– Specify a default namespace for an XHTML
document
• Namespaces are identified by a unique URI
– Example:
<html xmlns="http://www.w3.org/1999/xhtml">
The Document Head
• Elements within a document’s head section contain
information about the Web page itself
• Parent element
– Contains other elements known as child elements
– See Table 1-3
Principles of HTML, XHTML, and DHTML
55
The Document Head (continued)
Principles of HTML, XHTML, and DHTML
56
The Document Body
• Represented by the <body> element
• Contains other elements that define all of the
content a user sees rendered in a browser
• Differences in the use of the <body> element in
HTML and XHTML
• Comments
– Nonprinting lines that you place in programming
code to contain various types of remarks
• HTML comments
– Begin with an opening comment tag <!-– End with a closing comment tag -->
Validating Web Pages
• If XHTML document is not well formed
– Browser ignores the errors
• Use a validating parser
– Ensure XHTML document is well formed and that its elements are
valid
• Validation
– Checks that your XHTML document is well formed
– Checks that elements in your document are written correctly according
to the element definitions in an associated DTD
•
W3C Markup Validation Service
– Validates both HTML and XHTML
– http://validator.w3.org
•
Before you can validate a Web page
– Designate its character encoding by including a <meta> element in the
document head
– Example:
<meta http-equiv="Content-Type” content="text/html;
charset=iso-8859-1" />
Validating Web Pages (continued)
Figure 1-16 W3C Markup Validation Service main page
Part 2
Building, Linking, and Publishing
Basic Web Pages
Working with Basic Elements
and Attributes
• Elements
– Basic building blocks of all HTML pages
• All elements must have an opening tag and a
closing tag
Understanding the Different Types of Elements
• Block-level elements
– Give a Web page its structure
– Can contain other block-level elements or inline elements
• Inline elements
– Describe the text that appears on a Web page
– Must be placed inside a block-level element
•
The <p> element and heading elements (<h1>, <h2>, and so on) are
examples of common block-level elements. Inline, or text-level,
elements describe the text that appears on a Web page
• Unlike block-level elements, inline elements do not appear on their own
lines; they appear within the line of the block-level element that
contains them.
• Examples of inline elements include the <b> (bold) and <br> (line
break) elements.
Using Standard Attributes
• Standard attributes
– Available to almost every element
– Only the HTML 5 attributes contenteditable,
draggable, and spellcheck are currently
implemented in a Web browser
• lang attribute
– Two-letter code that represents a language
– Specify the language spoken in a particular country
by adding a hyphen and a two-letter country code
Designating the language and text
direction of elements
•
Although English is the primary language of the Web, it is certainly not the
only language used.
•
To be a considerate resident of the international world of the Web, you should
designate the language of your elements using the lang attribute.
•
•
Be aware that the lang attribute simply states the original language in which
an element was written; it is up to the user agent that renders the element to
decide what to do with the information.
You assign to the lang attribute a two-letter code that represents a language.
•
For instance, the language code for English is en.
•
So, to assign English as the language for a particular element, you add the
attributes lang="en" and xml:lang="en" to the element’s opening tag.
Designating the language and text
direction of elements
• You must also consider the direction in which a
language is read when you define elements.
• Although you read most Western languages from left to
right, languages such as Arabic and Hebrew are read
from right to left. For this reason, you should always
include the dir attribute along with lang attribute.
• You can assign one of two values to the dir attribute: ltr
(for left to right) and rtl (for right to left). For Western
languages such as English, you assign the dir attribute
a value of left to right, as follows: dir="ltr".
Principles of HTML, XHTML, and DHTML
66
Using Standard Attributes (continued)
Figure 2-3 Central Valley Farmers’ Market home page
after adding standard attributes
Defining Boolean Attributes
• Boolean attribute
– Specifies one of two values: true or false
– Presence of a Boolean attribute in an element’s opening tag indicates
a value of “true”
– Absence indicates “false”
• Minimized form
– Boolean attribute is not assigned a value
– Example:
<input type="checked" checked />
• Full form of a Boolean attribute
– Assign the name of the attribute itself as the attribute’s value
– Example:
<input type="checked" checked="checked" />
Defining the minimized and full form of
a Boolean attribute.
• When a Boolean attribute is not assigned a value,
as in the preceding code, it is referred to as having a
minimized form.
• However, recall from last week that all attribute
values must appear within quotation marks.
• This syntax also means that an attribute must be
assigned a value.
• For this reason, minimized Boolean attributes are
illegal in HTML.
Minimized & full form of Boolean attribute.
• You can still use Boolean attributes in HTML if you use
their full form. You create the full form of a Boolean
attribute by assigning the name of the attribute itself as
the attribute’s value. For example, to use the <input>
element’s checked Boolean attribute in HTML, you use
the full form of the attribute as follows:
<input type="checked" checked="checked" />
• Remember that to specify a value of false for a Boolean
attribute, you simply exclude the attribute from the
element. If you do not want a check box control to be
selected by default, for instance, you simply exclude the
checked attribute from the <input> element, as follows:
<input type="checked" />
70
Organizing with Section and
Content-Grouping Elements
• Section elements
– Used for organizing the primary sections of an HTML document
– See Table 2-4
• <body> element
– Main section element
Creating Headings
• Heading elements
– Used to emphasize a
document’s headings and
subheadings
• XHTML has six heading
elements:
– <h1> through <h6>
• Use to organize content
– Not as a formatting tool
• Rules of thumb for using
headings
A little on using heading elements in
your documents.
• There are several rules of thumb for using headings.
Generally, most Web pages should include only a single
<h1> element as the main heading for a page.
• You can think of the <h1> element as being equivalent to
the title of a document, and a document should contain
only one title.
• Second-level headings should use the <h2> element,
and additional higher-numbered headings should be
nested beneath lower-numbered headings.
Defining Document Sections (HTML 5)
• <section> elements
– Used to define organized types of content
– Not meant for visually formatting content
• <hgroup> element
– Defines the headings for a document or section
• Header section
– Defines an introduction to a document or section
• Footer section
– Placed immediately after a section element
– Contains information about that section
• When it was created or last updated
• Author
• Copyright information
Why should you use <section>, <header>,
and <footer> elements in your Web pages?
• Sections created with the <section> element usually
define specific types of organized content such as
chapters or other types of logical groupings.
• A header section defines an introduction to a
document or section.
• A footer section usually is placed immediately after
a section element and contains information about
that section, such as when it was created or last
updated, the author, and copyright information.
75
What type of content should you normally
place inside an <article> element?
• The <article> element defines a link to external content such as a news
article or Web log (blog).
• Although there are no requirements for what you place in an <article>
element, it should normally include a brief description of the article, a link
to the external URL, and the date of publication.
• <article> element
– Defines a link to external content
– Should normally include a brief description of the article, a link to the
external URL, and the date of publication
Defining Addresses & Nav Elements
• <address> element
• Defines contact information
• Should define an e-mail address or Web page of the owner
or author
• Typically placed within a <footer> element
• <nav> element
– Define navigation section that contains links to other parts of
the current page or to other pages
Creating Asides (HTML 5)
• Aside
– Comment or remark about the main theme or topic
• <aside> element
– Create content that is related to the surrounding
content
Working with Content-Grouping Elements
• Organize majority of the content within the various document
sections
• Some of the most frequently used elements in Web page
authoring
Paragraphs and Line Breaks
• Paragraph (<p>) and line-break (<br />) elements
– Provide the simplest way of adding white space to a document
• White space
– Important design element
– Empty areas on a page
80
Horizontal Rules
• Horizontal-rule (<hr />) element
– Draws a horizontal rule on a Web page to act as a section
divider
Linking and Publishing Your Pages
• Hypertext links
– Used to open files or navigate to other documents on the Web
– Underlined and often displayed in a vivid color
• Anchor: text or image used to represent a link
• <a> element
– Create a basic hyperlink
– href attribute specifies the link’s target URL
• Can use an image as a link anchor
Understanding Uniform Resource Locators
• Uniform Resource Locator (URL)
– Identifies a Web page
• Hypertext Transfer Protocol (HTTP)
– Manages the hypertext links that are used to navigate the Web
– Ensures that Web browsers correctly process and display the various
types of information contained in Web pages
• URL components:
–
–
–
–
–
Protocol
Host
Domain name
Domain identifier
Filename (optional)
• Example:
– https://banking.wellsfargo.com/
Understanding Uniform Resource
Locators (continued)
• mailto protocol
– Used in links to provide a quick way to send an email message to a specified address
– Example: mailto:[email protected]
Working with Absolute and Relative Links
• Absolute URL
– Full Web address of a Web page or to a specific drive and directory
• Relative URL
– Specifies location of a file relative to the location of the currently
loaded Web page
• An absolute URL refers to the full Web address of a Webpage or to a
specific drive and directory.
•
A relative URL specifies the location of a fi le relative to the location of
the currently loaded Web page.
Linking Within the Same Web Page
• Bookmarks
– Internal links within the current document
– Create using <a> element using the id attribute
Recap: Linking within the same Web page
• Bookmarks are internal links within the current
document and can be an effective tool for helping
users navigate through a long Web page.
• You create bookmark links by using the id attribute.
Recall that the standard id attribute uniquely
identifies an individual element in a document.
• Any element that includes an id attribute can be the
target of a link. For instance, you may have a long
Web page with an <h2> element near the bottom
that reads “Summary of Qualifications”.
87
Recap: Linking within the same Web page
• To create a bookmark to any other element, including
heading elements, you nest an <a> element inside
another element.
• If an <a>element does not include an href attribute (it
shouldn’t when you are creating a bookmark), its
contents are treated as normal text and are subject to
the rules of the parent element.
• Therefore, if the content of an <a> element does not
include an href attribute and is nested inside a
heading element, it will be formatted in a browser
with the style of the parent heading element.
Publishing Your Web Pages
• To publish
– Decide where Web site will be hosted
– Create and register a domain name for the site
– Post the files via FTP to the Web server
• Web hosting
– Publication of a Web site for public access
– Using your own computer is usually not a good idea for several reasons
• Web server
– Special type of computer used for hosting Web sites
• Internet Service Provider (ISP)
– Provides access to the Internet and other types of services
• More popular ISPs include:
– Yahoo!, Google, America Online, and EarthLink
• Having an ISP host your Web site offers many advantages
Understanding Metadata
• Metadata
– Data that describes the definition and structure of information enclosed
within
• Use <meta> element in <head> element
– Inform search engines and Web servers about the information in your
Web page
– Primary attributes:
• name
• content
• http-equiv
Define a name for the
information you want to
provide about the Web
page
Hiding Web Pages from Search Engines
• robots.txt file
– Place in the root directory of the Web server that hosts your Web site
• Robots Exclusion Protocol
– Inform search-engine spiders not to index certain directories and files
– Not very useful for typical Web page authors
• Do not have access to the root directory of the hosting ISP’s Web
server
• Alternative:
– Create a robots <meta> element for each Web page
• An alternate method for preventing spiders from indexing certain Web pages is
to create a robots <meta> element for each Web page.
Specifying Content Type with the
http-equiv Attribute
• Response header
– Sent to the Web browser before the Web page to
provide information that the browser needs to render
the page
• Content-type <meta> element
– Specify a content type that the document uses
– Allow a Web server to construct the response
header
That’s all folks………

Download Report

COM414 HTML lecture

Paperzz.com

Your Paperzz