Embed Size (px)
Citation preview
Chapter 2
HTML and XHTMLPart-1
In this chapter, you will learn about:• XHTML syntax, tags, and document type definitions• The anatomy of a web page• Formatting the body of a web page• Formatting the text on a web page• Physical and logical style tags• Special Characters• Connecting Web pages using hyperlinks
2
Learning Outcomes
HTML: HTML is an acronym that stands for HyperText Markup Language.It is the set of markup symbols or codes placed in a file intended for display on a Web browser page.
The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.
3
What is HTML?
HTML is not a programming language, it is a markuplanguage
A markup language is a set of markup tagsThe purpose of the tags are to describe page content
4
What is HTML?
HTML markup tags are usually referred to as an HTML element or HTML tag.
Each tag has a purpose.HTML tags are keywords (tag names) surrounded by
angle brackets , "<" and ">" symbols, like <html>.HTML tags normally come in pairs; an opening tag and a
closing tag, like <b> and </b> The first tag in a pair is the start tag, the second tag is the
end tag The end tag is written like the start tag, with a forward
slash before the tag name Start and end tags are also called opening tags and closing
tags
5
HTML tag
"HTML tags" and "HTML elements" are often used todescribe the same thing.
But strictly speaking, an HTML element is everythingbetween the start tag and the end tag, including thetags.
6
HTML Elements
<p>This is a paragraph.</p><p>This is a paragraph.</p>
HTML documents describe web pagesHTML documents contain HTML tags and plain textHTML documents are also called web pages
7
HTML Documents = Web Pages
The purpose of a web browser (Chrome, Internet Explorer, Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
8
Web Browsers
an HTML document has an hierarchical structure<html> - is the root of the html document <head> - contains metadata about the document,
action-scripting (see javascript), styles (see CSS) and general information referenced in the whole document
<body> - contains the actual text of the document
9
Main HTML tags
10
Main HTML tags
a visualization of an HTML page structure
HTML headings are defined with the <h1> to <h6> tags.
11
HTML Headings
HTML paragraphs are defined with the <p> tag.
12
HTML Paragraphs
HTML links are defined with the <a> tag.
13
HTML Links
HTML images are defined with the <img> tag.
14
HTML Images
An HTML element is everything from the start tag to the end tag.
15
HTML Elements
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tagThe element content is everything between the start
and the end tagSome HTML elements have empty contentEmpty elements are closed in the start tagMost HTML elements can have attributes
16
HTML Element Syntax
Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
17
Nested HTML Elements
HTML elements with no content are called emptyelements.
<br> is an empty element without a closing tag (the<br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding aslash inside the start tag, like <br />, is the proper wayof closing empty elements in XHTML (and XML).
18
Empty HTML Elements
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
19
Use Lowercase Tags
HTML elements can have attributesAttributes provide additional information about an
element.Attributes are always specified in the start tagAttributes come in name/value pairs like:
name="value"
20
HTML Attributes
Example<a href="http://www.w3schools.com">This is a link</a>
Attribute values should always be enclosed in quotes.Double style quotes are the most common, but single
style quotes are also allowed.Tip: In some rare situations, when the attribute value
itself contains quotes, it is necessary to use singlequotes:• name='John "ShotGun" Nelson‘
Newer versions of (X)HTML will demand lowercaseattributes.
21
Always Quote Attribute Values
22
HTML 4.01 / XHTML 1.0 Tag Reference
23
24
Standard Event Attributes:• HTML 4 added the ability to let events trigger actions in
a browser, like starting a JavaScript when a user clickson an element.
• Next is the standard event attributes that can beinserted into HTML / XHTML elements to define eventactions. (some)
25
HTML / XHTML Standard Event Attributes
26
27
Color Names Supported by All Browsers:• 147 color names (or a hex values) are defined in the
HTML and CSS color specification (17 standard colorsplus 130 more). The table below lists them all, alongwith their hexadecimal values.
• Tip: The 17 standard colors are: aqua, black, blue,fuchsia, gray, grey, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow.
28
HTML Color Names
29
30
HTML Color attribute
<hr style="color : green ; height=3 ; width=50%">
The comment tag adds notes to your HTML code<!-- comment -->
Comments can be spread over several lines
31
Adding Comments
The syntax for making an extended quote is• <blockquote>content</blockquote>
32
Marking a Block Quote
HTML supports three kinds of lists: ordered, unordered, and definition
You use an ordered list for items that must appear in a numerical order
You use an unordered list for items that do not need to occur in any special order
One list can contain another list This is called a nested list
33
Marking a List
34
35
Creating an Ordered List
Using the type Attribute to select numbers, letters, or roman numerals in ordered lists.
36
Creating an Ordered List
37
Creating an Ordered List
Using the start Attribute to change the starting numbers in ordered lists.
38
Creating an Ordered List
39
Creating Unordered List
40
Creating a Definition List
41
Nesting Lists
HTML supports the address element to indicate contact information Most browsers display an address element in an italicized font, and some right-justify or indent addresses
42
Using Other Block-Level Elements
43
An inline element marks a section of text within a block-level element
Often used to format characters and words• Also referred to as character formatting elements
44
Working with Inline Elements
Boldfaced text:• <b>…..</b>
Italicized text:• <i>….</i>
Underlined text:• <u>….</u>
Deleted text:• <del>…</del>
Quoted text:• <q>….</q>
45
Working with Inline Elements
46
Working with Inline Elements
Big text:• <big>…..</big>
Small text:• <small>….</small>
Subscripted text:• <sub>….</sub>
Superscripted text:• <sup>…</sup>
47
Working with Inline Elements
48
Working with Inline Elements
49
50
51
