HTML

What is HTML?

HTML is standard Tag base Markup Language, who build up website Structure and Content.

          Sir Tim Berners Lee Invented HTML in 1989. First Developed HTML in 1990. First Version Of HTML released in 1991. Its Called HTML 1.0

HTML means for Hyper Text Markup Language
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

HTML Structure

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Structure Explained

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
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, but with a forward slash inserted before the tag name
N.B: The start tag is also called the opening tag, and the end tag the closing tag.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>

HTML Versions

 There have been many versions of HTML, since the early days of the web:

Version
Year
HTML
1991
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2014


Heading Tag <h1> .. </h1>

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Paragraph Tag [<p> .. </p>]

<p>
Basis Institute of Technology and Management
</p>

Paragraphs Example

<!DOCTYPE html>
<body>
<p>
NetBeans Community Distributions are available under a Dual License consisting of the Common Development and Distribution License (CDDL) v1.0 and GNU General Public License (GPL) v2. Such distributions include additional components under separate licenses identified in the
</p>
<p>
NetBeans Community Distributions are available under a Dual License consisting of the Common Development and Distribution License (CDDL) v1.0 and GNU General Public License (GPL) v2. Such distributions include additional components under separate licenses identified in the License
</p>
</body>
</html>

Formatting Tag

<b>  - Bold text </b>
<strong>  - Important text </strong>
<i>  - Italic text </i>
<em>  - Emphasized text </em>
<u> Underline Text </u>
<mark>   - Marked text </mark>
<small>  - Small text </small>
<del>  - Deleted text </del>
<ins>  - Inserted text </ins>
<sub>  - Subscript text </sub>
<sup>  - Superscript text </sup>
<br/> break in Text
<hr/> line in text

Bold, Italic, Underline

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is strong.</strong></p>
<p><u>This text is underline.</u></p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
</body>
</html>

<small>, <mark>

<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>

<del>, <ins>

<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>

<sub>, <sup>

<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>

<br> Tag for line break

<!DOCTYPE html>
<html>
<body>
<p>
To break lines<br>in a text,<br>use the br element.
</p>
</body>
</html>

<hr> Tag for horizontal line

<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>

HTML <q> for Short Quotations

<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.
</q>
</p>
</body>
</html>

HTML <blockquote> for Quotations
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>

HTML <abbr> for Abbreviations

<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body>
</html>

HTML <address> for Contact Information

<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

HTML Comment Tags

<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>

HTML img Tag for Images

<!DOCTYPE html>
<html>
<body>
<img src="pulpitrock.jpg" alt="Mountain View" width="500" height="377">
</body>
</html> 


3 Comments

Post a Comment