1
Hyper Text Markup Language (HTML) and Extensible Hyper Text Markup Language (XHTML)
You have to Study from the textbook and http://www.w3schools.com
3
HTML Introduction
• With HTML you can create your own Web site.• What is HTML?– HTML is a language for describing web pages.– HTML stands for Hyper Text Markup Language– HTML is not a programming language, it is a
markup language– A markup language is a set of markup tags– The purpose of the tags are to describe page
content
4
HTML Tags• HTML markup tags are usually called HTML tags• HTML tags are keywords (tag names) surrounded by
angle brackets like <html>• HTML tags normally come in pairs 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<tagname>content</tagname>
5
HTML Elements
• "HTML tags" and "HTML elements" are often used to describe the same thing.
• But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags.
<p>This is a paragraph.</p>
6
HTML Documents = Web Pages
• HTML documents describe web pages• HTML documents contain HTML tags and
plain text• HTML documents are also called web pages
7
Web Browsers• 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
HTML Page Structure
a visualization of an HTML page structure
9
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
10
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag.
11
HTML Links
• HTML links are defined with the <a> tag.
12
HTML Images
• HTML images are defined with the <img> tag.
13
HTML Elements
• An HTML element is everything from the start tag to the end tag.
14
HTML Element Syntax
• An HTML element starts with a start tag / opening tag• An HTML element ends with an end tag / closing tag• The element content is everything between the start
and the end tag• Some HTML elements have empty content• Empty elements are closed in the start tag• Most HTML elements can have attributes
15
Nested HTML Elements
• Most HTML elements can be nested (can contain other HTML elements).
• HTML documents consist of nested HTML elements.
16
Empty HTML Elements
• HTML elements with no content are called empty elements.
• <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 a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
17
Use Lowercase Tags
• HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
18
HTML Attributes
• HTML elements can have attributes• Attributes provide additional information
about an element.• Attributes are always specified in the start tag• Attributes come in name/value pairs like:
name="value"Example<a href="http://www.w3schools.com">This is a link</a>
19
Always Quote Attribute Values• 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 single quotes:– name='John "ShotGun" Nelson‘
Newer versions of (X)HTML will demand lowercase attributes.
20
HTML 4.01 / XHTML 1.0 Tag Reference
21
22
23
,and so on
24
HTML / XHTML Standard Event Attributes
• Standard Event Attributes:– HTML 4 added the ability to let events trigger
actions in a browser, like starting a JavaScript when a user clicks on an element.
– Next is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions. (some)
25
26
27
HTML Color Names
• Color Names Supported by All Browsers:– 147 color names (or a hex values) are defined in
the HTML and CSS color specification (17 standard colors plus 130 more). The table below lists them all, along with 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
29
30
HTML Character Sets• To display an HTML page correctly, the browser must
know what character-set to use.• The character-set for the early world wide web was ASCII.
ASCII supports the numbers from 0-9, the uppercase and lowercase English alphabet, and some special characters.
• Since many countries use characters which are not a part of ASCII, the default character-set for modern browsers is ISO-8859-1.
• If a web page uses a different character-set than ISO-8859-1, it should be specified in the <meta> tag.
31
32
HTML Symbol Entities
• This entity reference includes mathematical symbols, Greek characters, various arrows, technical symbols and shapes.
• Note: Entity names are case sensitive.
33
34
HTML …….Tags
35
• Definition and Usage
• The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
• You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
• It is also a good practice to use the comment tag to "hide" scripts from browsers without support for it (so they don't show them as plain text).
The comment tag
36Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
37
The title attribute is used in the <abbr> tag, to show the full version of the abbreviation when you mouse over it.
38
Definition and UsageThe <button> tag defines a push button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_type
39
Table and caption
• Definition and Usage– The <caption> tag defines a table caption.– The <caption> tag must be inserted immediately
after the <table> tag.– You can specify only one caption per table.– Tip: By default, the table caption will be center-
aligned above a table. However, the CSS properties "text-align" and "caption-side" can be used to align and place the caption.
40
Table
• The <td> tag defines a standard cell in an HTML table.• An HTML table has two kinds of cells:– Header cells - contains header information (created with
the <th> element)– Standard cells - contains data (created with the <td>
element)– The text in <th> elements are bold and centered by default.– The text in <td> elements are regular and left-aligned by
default
41
42
Complex HTML table
• A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
43
Table and caption
44
Image inside the cell
• http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_align2
45
46
XHTML Introduction
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is almost identical to HTML 4.01• XHTML is a stricter and cleaner version of
HTML• XHTML is HTML defined as an XML application
47
48
An XHTML DTD describes the allowed syntax and grammar of XHTML markup. XHTML/XML namespaces are used for providing uniquely named elements and attributes used in an XHTML/XML document.
49
The Most Important Differences from HTML
• DOCUMENT STRUCTURE– XHTML DOCTYPE is mandatory– The XML namespace attribute in <html> is mandatory– <html>, <head>, <title>, and <body> is mandatory
• ELEMENT SYNTAX– XHTML elements must be properly nested– XHTML elements must always be closed– XHTML elements must be in lowercase– XHTML documents must have one root element
• ATTRIBUTE SYNTAX– XHTML attribute names must be in lower case– XHTML attribute values must be quoted– XHTML attribute minimization is forbidden
50
51
52
53
XHTML - Attributes
• XHTML attributes are HTML attributes written as XML
• XHTML Attributes - Syntax Rules– Attribute names must be in lower case– Attribute values must be quoted– Attribute minimization is forbidden
54
55
56
Note
• <body style="font-size:80%;background-color:white;margin:3px">
• <….. style="background-color:#ffffff“></….>
• <tr><td align='left' style='color:#F0F8FF'><…
57
Important
• Link, form, and frame: self study + in-Lab.
Top Related