html and xhtml - wordpress.com · html and xhtml part-1 in this chapter, you will learn about:...
TRANSCRIPT
![Page 1: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/1.jpg)
Chapter 2
HTML and XHTMLPart-1
![Page 2: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/2.jpg)
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
![Page 3: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/3.jpg)
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?
![Page 4: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/4.jpg)
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?
![Page 5: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/5.jpg)
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
![Page 6: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/6.jpg)
"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>
![Page 7: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/7.jpg)
HTML documents describe web pagesHTML documents contain HTML tags and plain textHTML documents are also called web pages
7
HTML Documents = Web Pages
![Page 8: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/8.jpg)
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
![Page 9: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/9.jpg)
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
![Page 10: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/10.jpg)
10
Main HTML tags
a visualization of an HTML page structure
![Page 11: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/11.jpg)
HTML headings are defined with the <h1> to <h6> tags.
11
HTML Headings
![Page 12: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/12.jpg)
HTML paragraphs are defined with the <p> tag.
12
HTML Paragraphs
![Page 13: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/13.jpg)
HTML links are defined with the <a> tag.
13
HTML Links
![Page 14: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/14.jpg)
HTML images are defined with the <img> tag.
14
HTML Images
![Page 15: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/15.jpg)
An HTML element is everything from the start tag to the end tag.
15
HTML Elements
![Page 16: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/16.jpg)
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
![Page 17: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/17.jpg)
Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
17
Nested HTML Elements
![Page 18: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/18.jpg)
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
![Page 19: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/19.jpg)
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
19
Use Lowercase Tags
![Page 20: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/20.jpg)
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>
![Page 21: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/21.jpg)
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
![Page 22: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/22.jpg)
22
HTML 4.01 / XHTML 1.0 Tag Reference
![Page 23: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/23.jpg)
23
![Page 24: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/24.jpg)
24
![Page 25: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/25.jpg)
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
![Page 26: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/26.jpg)
26
![Page 27: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/27.jpg)
27
![Page 28: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/28.jpg)
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
![Page 29: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/29.jpg)
29
![Page 30: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/30.jpg)
30
HTML Color attribute
<hr style="color : green ; height=3 ; width=50%">
![Page 31: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/31.jpg)
The comment tag adds notes to your HTML code<!-- comment -->
Comments can be spread over several lines
31
Adding Comments
![Page 32: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/32.jpg)
The syntax for making an extended quote is• <blockquote>content</blockquote>
32
Marking a Block Quote
![Page 33: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/33.jpg)
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
![Page 34: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/34.jpg)
34
![Page 35: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/35.jpg)
35
Creating an Ordered List
![Page 36: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/36.jpg)
Using the type Attribute to select numbers, letters, or roman numerals in ordered lists.
36
Creating an Ordered List
![Page 37: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/37.jpg)
37
Creating an Ordered List
![Page 38: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/38.jpg)
Using the start Attribute to change the starting numbers in ordered lists.
38
Creating an Ordered List
![Page 39: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/39.jpg)
39
Creating Unordered List
![Page 40: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/40.jpg)
40
Creating a Definition List
![Page 41: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/41.jpg)
41
Nesting Lists
![Page 42: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/42.jpg)
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
![Page 43: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/43.jpg)
43
![Page 44: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/44.jpg)
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
![Page 45: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/45.jpg)
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
![Page 46: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/46.jpg)
46
Working with Inline Elements
![Page 47: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/47.jpg)
Big text:• <big>…..</big>
Small text:• <small>….</small>
Subscripted text:• <sub>….</sub>
Superscripted text:• <sup>…</sup>
47
Working with Inline Elements
![Page 48: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/48.jpg)
48
Working with Inline Elements
![Page 49: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/49.jpg)
49
![Page 50: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/50.jpg)
50
![Page 51: HTML and XHTML - WordPress.com · HTML and XHTML Part-1 In this chapter, you will learn about: •XHTML syntax, tags, and document type definitions •The anatomy of a web page •Formatting](https://reader036.vdocuments.site/reader036/viewer/2022081522/5f0392e07e708231d409b8b8/html5/thumbnails/51.jpg)
51