HTML

HTML Tutorials Welcome to HTML Tutorials

This HTML tutorials is separated into following sections:
Introduction to HTML
Basic Structure of HTML
Body Element
Nesting Rules
Font Element(Font Tag)
Formatting Text
Lists in HTML
Types of HTML Documents
Head Section Elements
Lang Attribute in HTML
Ins and Del Element
Marquee Tag
HYPERLINKS (Anchor Tag)

Hyper Text Markup Language

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

HTML Tags

HTML tags are keywords 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
Start and end tags are also called opening tags and closing tags

HTML Document

HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

Purpose of Web Browser

The purpose of a web browser (like Google Chrome, Firefox or Internet Explorer etc.) 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:

First Webpage

<html>
<head>
<title>The name of the first page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Heading and Paragraph Tag

Heading Tags:

<h1>This is h1 heading</h1>

<h2>This is a h2 heading</h2>
<h3>This is a h3 heading</h3>
<h4>This is a h4 heading</h4>
<h5>This is a h5 heading</h5>
<h6>This is a h6 heading</h6>

Paragraph Tag:

<p>This is another paragraph.</p>

Basic Structure of HTML

The basic structure of any HTML document consists of the following sections:

Document Type Declaration(DTD).
The main container.
The head section.
The body section.

Document Type Declaration

It identifies document type.
It inform browsers, what type of document we are about to process.
Doc Type Declaration is unique for each version of HTML.

Main Container (HTML Element/Tag)

lang attribute has a particular relevance when used in this element, as it defines the language of the entire document.

Head Section(Head Element/Tag)

The head section contains metadata about the document.
Different Types of meta data:

Document's title
Style declarations
Scripts information
Meta statements
Relational information

Tag:

<HEAD>

Body Section(Body Element/Tag)

The body of a document is simply the container part.
The place to start writing your content (adding headings, paragraphs, images, videos, tables etc.)
The section your visitors will immediately access when the page is loaded.

Tag:

<BODY>

Body Element

The HTML <body> element represents the content of an HTML document.
There can be only one <body> element in a document.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
It is composed from the following elements:

Headings (H1 to H6)
Block elements:

Paragraphs
Lists
Forms
Tables etc.

Horizontal rules
Text, images and hypertext links.

Attributes of Body Element

ALINK
BACKGROUND
BGCOLOR
TEXT
VLINK
LINK

alink:

Color of text for hyperlinks when selected

background:

URI of a image to use as a background

bgcolor:

Background color for the document

text:

Foreground color of text

vlink:

Color of text for visited hypertext links

link:

Color of text for unvisited hypertext links

<body> tag supported by the following browsers:

Chrome
Android
Firefox
Internet Explorer (IE)
Opera
Safari etc.

Example:

Output:

Nesting Rules

Nesting Rule

HTML tags should be "nested" in a proper order.
When you insert (nest) one tag within another, pay attention to the order in which you open each tag, and then close the tags in the reverse order
The tag opened most recently is always the next tag to close
Incorrect Nesting

It makes hard for the browser to know where to apply these styles.

Right Nesting

Wrong Nesting

Font Element(Font Tag)

Font Element

This element is also commonly referred to as the <font> tag.
<font> tag defines

Font Size
Color
Face

This tag was removed in HTML5, it is recommended that you use CSS properties.
It can be used on a single letter, single word or blocks of text.

Attributes of Font Element

Size:

It used to specify the size of the font.
Default size:3

Color:

It is used to specify the color of the font.
Default color: Black

Face:

It is used to specify the typeface to be used for the text enclosed in the font element.
Its value can be specified by a list of names separated by commas.
Default Face: Times New Roman

Syntax:

<font face="Magneto, Arial, French Script MT ">

Your formatted text

</font>

Example:

Output:

Formatting Text

Bold:

<b> </b> text in between the tags will be bold, and stand out against text around it, the same as in a word processor.

Italic:

<i> </i> Also working the same way as a word processor, italics display the text at a slight angle.

Underline:

<u> </u> Again, the same as underline in a word processor.

Strike-out:

<strike> </strike> Puts a line right through the centre of the text, crossing it out. Often used to show that text is old and no longer relevant.

Code:

<code> </code> Text is displayed in a fixed-width font, commonly used when showing source code.

Preformatted Text:

<pre> </pre> Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)

Typewriter Text:

<tt> </tt> The text appears to have been typed by a typewriter, in a fixed-width font.

Block Quote:

<blockquote> </blockquote> Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.

Small:

<small> </small> Instead of having to set a font size, you can use the small tag to render text slightly smaller than the text around it.

Centre:

<center> </center> a useful tag, as it says, it makes everything in between the tags centered (in the middle of the page).

Emphasis:

<em> </em> used to emphasize text, which usually appears in italics, but can vary according to your browser.

Strong Emphasis:

<strong> </strong> used to emphasize text more, which usually appears in bold, but can vary according to your browser.

Lists in HTML

Types of List

Unordered list
Ordered list
Description list

Unordered list

This list is a collection of related items that have no special order or sequence.
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items will be marked with bullets

TYPE attribute

You can use type attribute for <ul> tag to specify the type of bullet you like.

<ul type = "square">

<ul type = "disc">

<ul type = "circle">

By default, it is a disc.

Ordered list

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used.
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

TYPE attribute

You can use type attribute for <ol> tag to specify the type of numbering you like.

<ol type = "1">

<ol type = "I">

<ol type = "i">

<ol type = "A">

<ol type = "a">

By default, it is a number.

START attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need.

<ol type = "1" start = "4">

<ol type = "I" start = "4">

<ol type = "i" start = "4">

<ol type = "a" start = "4">

<ol type = "A" start = "4">

Description List

A description list is a list of terms, with a description of each term.

<dl> − Defines the start of the list

<dt> − A term

<dd> − Term definition

</dl> − Defines the end of the list

Types of HTML Documents

DOCTYPE declaration

All HTML documents must start with a <!DOCTYPE> declaration
The declaration is not an HTML tag
It is an "information" to the browser about what document type to expect.
In HTML 5, the declaration is simple: <!DOCTYPE html>

Types of HTML documents

HTML can be divided into three categories:

Transitional
Strict
Frameset.

Every HTML document you create will fall into one of the above three categories.

Transitional

It has a flexible syntax, or grammar and spelling component.
It is used without syntax restrictions, and browsers support a 'best effort' approach to reading the tags.
If tags are misspelled, the browsers do not correct web developers' errors, and they display the content anyway.

Strict

The strict type of HTML is meant to return rules into HTML and make it more reliable.
For example, the strict type requires closing all tags for all opened tags.
It is important for phones, where the processing power may be limited.
A clean and error-free code helps to load pages faster.

Frameset

HTML documents where multiple documents can be connected into a single screen.
This technique is often used to create a menu system.
You click on a menu item on the left side of the screen, and only the right side of the screen re-loads. The menu stays in place.

Example: HTML 4.01 strict

Only structuring elements are allowed in the source code.
The formatting and design are controlled by style sheets.
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Example: HTML 4.01 transitional

This document type specifies that both HTML attributes and style sheets are utilized in this document.
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Example: HTML 4.01 frameset

With this document type, you specify that your HTML file contains frameset, i.e. individual windows.
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Head Section Elements

Head Element

Defines information about the document.
The HTML elements that can be used inside the <head> element are:

<title>
<base>
<link>
<style>
<meta>
<script>

The browser supported by <head> tag are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Title tag:

Defines the title of a document.
It is required in all HTML documents.
Only one title element is permitted in a document.
It must be placed within the <head> element.
It contains plain text, It may not contain other markup tags.
Example:

<html>

<head><title>sample HTML document</title></head>

<body><p>Hello BSc(IT)</p></body>

</html>

Base tag:

Defines a default address or a default target for all links on a page.
Example:

<html><head>

<base href="https://www.sdcollegeambala.ac.in/"> </head>

<body> <p><a href="computer-sc-app-department2017-18/">

HTML Head base tag</a></p> </body>

</html>

Link tag:

Defines the relationship between a document and an external resource.
Example:

<head>

<title>Linking Style Sheets</title>

<link rel="stylesheet" href="style.css"> </head>

Style tag:

Defines style information for a document.
Example:

<head>

<title>Embedding Style Sheets</title>

<style>

body { background-color: YellowGreen; }

h1 { color: red; }

p { color: green; }

</style>

</head>

Meta tag:

Defines metadata about an HTML document.
Example:

<head>

<title>Specifying Metadata</title>

<meta name="description" content=“head section elements">

<meta name="keywords" content="HTML, CSS, JavaScript">

<meta name="author" content=“Somesh">

</head>

Script tag:

Defines a client-side script.
Example:

<head>

<title>JavaScript</title>

<script>

document.write("<h1>Hello World!</h1>")

</script>

</head>

Lang Attribute in HTML

Lang attribute

You should always include The lang attribute inside the <html> tag, to declare the language of the web page.
The lang global attribute helps define the language of an element.
The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value.
Common examples are "en" for English,"fr" for French, and so on.

Examples of lang attribute:

Declaring a U.S. English Page:

<html lang="en-US">...</html>

Declaring a British English Page:

<html lang="en-GB">...</html>

Declaring a French Page:

<html lang="fr">...</html>

Switching Languages

If you switch languages within one page, you can embed the LANG attribute in other tags such as a

P
TD
SPAN
DIV

and other tags

Why to use lang attribute

The presence of a valid lang attribute declaration also helps out other automated services that ingest and re-contextualize website content.
Identifying the content’s languages allows translation services such as Google Chrome to more accurately function.

Supported Browsers

The browser supported by lang attribute are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Ins and Del Element

INS Element

INS (Inserted text) element
It represents the text that has been inserted into surrounding text.
It is used when we trying to show differences to a document.
It is like change bars in word processing software.
Tag: <ins>

Del Element

DEL (Deleted text) element
It represents the text that has been deleted from surrounding text.
It is used when we trying to show differences to a document.
It is like change bars in word processing software.
Tag: <del>

Example of Ins & Del Element:

Output:

Marquee Tag

The <marquee> is a HTML tag which was used to create a scrolling text or an image.
It was used to make the text or image scroll horizontally across or vertically down the web page.
The <marquee> element is a deprecated HTML tag. If you use it, your pages or apps may be broken.
The developers often avoid using it. Nowadays, you can achieve the same result with the help of CSS and Java Script.

Example of Marquee Tag:

<html>

<head>

<title>

Marquee tag example

</title>

</head>

<body>

<marquee bgcolor = red>

Welcome BSIT Students

</marquee>

<marquee direction="up">

this is an example of Marquee tag

</marquee>

<marquee direction="right">

this is an example of Marquee tag

</marquee>

<marquee direction="down">

this is an example of Marquee tag

</marquee>

</body>

</html>

HYPERLINKS(Anchor Tag)

Hyperlinks

HTML links are hyperlinks.
We can click on a link and jump to another Web Page or HTML document.
When we move the mouse over a link, the mouse arrow will turn into a little hand.
A link does not have to be text.
A link can be an image or any other HTML element.

Syntax:

<a href="url">link text</a>

Attributes of Anchor Tag

HREF:

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

ANCHOR TEXT:

Link text that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

TARGET:

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

TITLE:

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

NAME:

The attribute name allows the anchor to be the destination of a link. The value of the attribute is an identifier for the anchor. Identifiers are arbitrary strings but must be unique within the HTML document. This feature is representable in SGML as an ID attribute.

Image as a Link:

To use an image as a link, just put the <img> tag inside the <a> tag

Link to an Email Address:

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email)

Button as a Link:

To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button.

Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for every link.
You can get rid of it if you use <base> tag in your HTML document header.
This tag is used to give a base path for all the links.
Browser will concatenate given relative path to this base path and will make a complete URL

Thank You

Other Tutorials
HTML Tutorials
Java Tutorials
RDBMS Tutorials
Other Popular Posts
HTML
Information System
Cloud Computing
Mobile Computing
E-Commerce
Computer
Java
Databse
Operating System

Computer Science Tutorials

HTML

Hyper Text Markup Language

What is HTML?

HTML Tags

HTML Document

Purpose of Web Browser

First Webpage

Heading and Paragraph Tag

Heading Tags:

Paragraph Tag:

Basic Structure of HTML

Document Type Declaration

Tag:

Example:

Main Container (HTML Element/Tag)

Tag:

Example:

Head Section(Head Element/Tag)

Tag:

Body Section(Body Element/Tag)

Tag:

Body Element

Body Element

Attributes of Body Element

alink:

background:

bgcolor:

text:

vlink:

link:

Example:

Nesting Rules

Nesting Rule

Right Nesting

Wrong Nesting

Font Element(Font Tag)

Font Element

Attributes of Font Element

Size:

Color:

Face:

Syntax:

Example:

Formatting Text

Formatting Text

Bold:

Italic:

Underline:

Strike-out:

Code:

Preformatted Text:

Typewriter Text:

Block Quote:

Small:

Centre:

Emphasis:

Strong Emphasis:

Lists in HTML

Types of List

Unordered list

TYPE attribute

Ordered list

TYPE attribute

START attribute

Description List

Types of HTML Documents

DOCTYPE declaration

Types of HTML documents

Transitional

Strict

Frameset

Example: HTML 4.01 strict

Example: HTML 4.01 transitional

Example: HTML 4.01 frameset

Head Section Elements

Head Element

Title tag:

Base tag:

Link tag: