HTML

What is HTML?

HTML is ...

HTML stands for Hyper Text Markup Language
HTML is not a programming language
HTML is a markup language with a set of markup tags
HTML uses markup tags to describe web pages

Examples of Markup HTML Tags

Examples of plain markup HTML tagged elements in a HTML document.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Tagged Element Examples:</h1>
        <h2>A Heading Markup Tag</h2>
        <p>A Paragraph Markup Tag</p>
    </body>
</html>

HTML Web Page Embedded Output:

HTML Document

A HTML document is a structured document according to a standard or specification...

HTML document is used to describe web page in a structual way.
HTML document is also commonly called web page.
HTML document contains HTML tags and plain text in a structured form.
Basic structure of a HTML document:
- <!DOCTYPE> the HTML version information
- <html>... </html> indicates the whole web page
- <head>...</head> is the header of the web page
- <body>...</body> is the content of the web page
Only the Body content will display on the screen
HTML document can save as a file with extension either ".htm" or ".html"

Example of a Simple HTML Document

Example of a Simple HTML Document:

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
       <h1>HTML</h1>
       <p>A Web Page Sample</p>
    </body>
</html>

HTML Web Page Embedded Output:

Element Tags

Elements tags are elements to construct a HTML web page. For example,

<h1>,</h2> define font size
<p> defines a paragraph
<b> defines a font style
<a> defines a hyperlink
<img> defines a image

Examples of Element Tags

Examples of Element Tags:

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Heading 1</h1> 
        <h2>Heading 2</h2>
        <p>Paragraph</p> 
        <p><b>Bold Text</b></p>
        <a href="http://www.sideway.hk/">Hyper Link to Sideway.hk</a>
        <p><img src="http://www.sideway.hk/images/sideway.jpg" alt="Sideway"></p>
    </body>
</html>

HTML Web Page Embedded Output:

HTML Tagged Elements

HTML element...

starts with an opening tag and usually end with an closing tag
bounds the element contents in between, and empty element is allowed
can includes attributes in the opening tag to provide additional information about the element
can be nested to form complex element or HTML document
is not case sensitive but lowercase tags are preferred for compatible with future versions

Examples of HTML Tagged Elements

Element with opening tag, closing tag, and element content in between.

<p>Element with closing tag</p>

Element with additional attribute, in the opening tag.

<a href="http://www.sideway.hk">Hyper Link to Sideway.hk</a>

Element with opening tag, but no element content and closing tag

<br>

Element with additional attributes in the opening tag, but no element content and closing tag

<img src="/image/sideway.jpg" alt="Sideway">

The Fundamental HTML Tagged Elements of a HTML Document:

The fundamental HTML tagged elements to form a basic HTML documents are

<!DOCTYPE HTML> tag
<html> tag
<head> tag: the first nested tagged element in <html> tag
<body> tag the last nested tagged element in <html> tag after <head> tag
and a <title> tag should also be nested in the <head> tag,
and an optional tag of charset should also be nested in the <head> tag,

Example of a Simple Nested HTML Document:

Examples of Element Tags:

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>HTML</h1>
        <p>A Web Page Sample</p>
    </body>
</html>

HTML Web Page Embedded Output:

HTML Element Attributes

HTML element attribute...

locates in opening tag
provides additional informative description about the element
is not case sensitive but lowercase tags are preferred for compatible with future versions

Examples of HTML Tagged Element Attributes

HyperLink Element <a> with href attribute:

<a href="http://www.sideway.hk">Go to Sideway.hk</a>

Image Element <img> with src attribute:

<img src="http://www.sideway.hk/image/sideway.jpg">

HTML Standards

Some Useful HTML References...

w3org Website

All Standards and Drafts - W3C https://www.w3.org/TR/#w3c_all~~last updated 19 Aug 2017~~
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification https://www.w3.org/TR/CSS2/~~last updated 19 Aug 2017~~
Cascading Style Sheets, level 1 https://www.w3.org/TR/2008/REC-CSS1-20080411/~~last updated 19 Aug 2017~~
Cascading Style Sheets, Level 2 https://www.w3.org/TR/2008/REC-CSS2-20080411/~~last updated 19 Aug 2017~~
HTML 3.2 Reference Specification https://www.w3.org/TR/REC-html32-19970114~~last updated 19 Aug 2017~~
HTML 4.01 Specification https://www.w3.org/TR/html401/~~last updated 19 Aug 2017~~
HTTP - Hypertext Transfer Protocol Overview https://www.w3.org/Protocols/~~last updated 19 Aug 2017~~