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
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
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:
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...
Sideway
BICK BLOG from Sideway
