Sideway
output.to from Sideway



Draft for Information Only

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...

Links of HTML Reference


©sideway

ID: 100800025 Last Updated: 8/20/2017 Revision: 3

IMAGE

Home (1)new

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (334)

Reference (60)

Computer

Hardware (148)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (540)

CSS (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (366)

MS Windows

Windows10 (SC)

DeskTop (5)

Knowledge

Mathematics

Formulas (8)

Number Theory (197)new

Algebra (14)

Trigonometry (18)

Geometry (18)

Calculus (67)

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics & Dynamics (129)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019