What is Hyper Text Markup Language(HTML)?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
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 label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta-information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or the page's tab)
The <body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

What are Hyper Text Markup Language (HTML) Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

Container Tag

These are the tag which has two parts , one is opening tag and other is closing tag, which takes the following from.

Ex: <tag> XXXXXXXXXX </tag>

Empty Tag

Empty tags are the tags that don’t need to close. These tags are placed where needed.

a. <br> (line break) break rule

b. <hr> horizontal rule

Note: HTML is a case-insensitive type language, which means you can type HTML code in any case such as uppercase, lowercase, and capitalized code, but make sure both the opening tags are written in the same case.

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

Hyper Text Markup Language (HTML) page Structure.

Below is a visualization of an Hyper Text Markup Language (HTML) page structure:

Note: The content inside the <body> section will be displaced in a Brower. The content indisde the <title> element will be shown in the browser's title bar or in the page's tab.

Hyper Text Markup Language (HTML) History

Year

1989

1991

1993

1995

1997

1999

2000

2008

2012

2014

2016

2017

Version

Tim Berners-Lee invented www

Tim Berners-Lee invented HTML

Dave Raggett drafted HTML+

HTML Working Group defined HTML 2.0

W3C Recommendation: HTML 3.2

W3C Recommendation: HTML 4.01

W3C Recommendation: XHTML 1.0

WHATWG HTML5 First Public Draft

WHATWG HTML5 Living Standard

W3C Recommendation: HTML5

W3C Candidate Recommendation: HTML 5.1

W3C Recommendation: HTML5.1 2nd Edition

W3C Recommendation: HTML5.2

HTML (Hyper Text Markup Language) Editors.

Learn HTML (Hyper Text Markup Language) using NotePad or TextEdit.

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC).

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac).

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double-click on the file, or right-click - and choose "Open with").

The result will look much like this:

Formatting Tags

Formatting tags are used to make some text on the webpage to appear differently than normal text.

Boldface :This boldface tag <b></b> is used to make the text to show in boldface style.

Italics :The italics tag <i></i> is used to mark the text italics.

Underline :The tag <u></u> is used to make the text as underlined.

Strikethrough :The <s> </s> is used to make the text to be strike out. The content of strikethrough tags would appear with a horizontal line over the text.

Super script :The <sup></sup> tag is used to add a superscript text to the HTML document .eg. 12th

Sub script :The <sub></sub> tag is used to add a subscript text to the HTML document. E.g. H2O

Heading Tag

HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are defined with <h1> to <h6> tags.

Paragraph Tag

HTML paragraphs are defined with <p> tag.

Body Tag

The <body> tag encloses all the tags, attributes and information to be displayed in the web page.

Attributes

1. bgcolor

2. text

3. background

bgcolor

This attribute is used to give background color in the webpage.

Syntax:

<body bgcolor= “color_name”>

Example:

<body bgcolor= “gray”>

text

This attribute is used to give color on the text of the webpage.

Syntax:

<body text= “color_name”>

Example:

<body text= “gray”>

background

This attribute is used to add image in background of the webpage.

Syntax:

<body background= “file_name”>

Example:

<body background= “img.jpg”>

If image and HTML file in different location

Mention the location with image name

Syntax:

<body background= “location\img.jpg”>

Example:

<body background="C:\Users\haseebullah\zailearn\p1.jpg">

To add image in webpage

Tag :<img></img>

Attribute

Src :This is used to give image file name(source)

Example

width: This attribute is used to change width of the image.

Height: This attribute is used to change height of the image.

# If Image and HTML file in same location

<img src= “xyz.jpg” width=50% height=50%>

# If image and HTML file in different location

<img src= “d://WD/xyz.jpg” width=50% height=50%>

Font Tag

The font tag is used to style the content of the webpage.

Attributes

Face :The font face attribute is used to apply font styles on text.

Syntax:

<font face= “Font_style_name”>Some content here</font>

Example:

<font face= “Lucida Calligraphy”>Website</font>

Size :The font size attribute is used to change the size of the text. The size can be given in numeric from 1 to 7.

Syntax:

<font size= size>Some content here</font>

Example:

Color :The font color attribute is used to give color to the content.

Syntax:

<font color= “color_name”>Some content here</font>

Example:

Example:

HTML List:

List

In HTML, there are two types of list:

1.Ordered List <ol> </ol>

2. Unordered List <ul> </ul>

Unordered List

This type of list represent points symbols such as1. Disc (By default)2. Circle3. Square

Tag: -- <ul></ul>

List elements : -- <li></li>

Syntax:

2. Ordered List

This type of list represent points in sequence or order such asCommonly used attributes of <ol> </ol> tags :1.Type : it is use to define the type of numbering format. Syntax : type= “number” 2.Start : it is use to define the starting point of numbering into the list .
Syntax : start= “starting number”· 1,2,3 …· A,B,C,…..· a,b,c,….· I,II,III,IV,…..· i,ii,iii,…..

Tag: -- <ol>…..</ol>

List element: -- <li>….</li>

Syntax

Attribute

Type : Type is an attribute which is used to change the points of list and it is used for both ordered list and unordered list.

Table in HTML

The table elements in HTML is<table></table>.

Everything within a table is enclosed between these two tag which are both required.

Commonly used sub tag :

· <caption></caption> : table name

· <tr></tr> : 1 row

· <th></th> : 1 heading

· <td></td> : 1 data value

Attribute of table tag :

· Bgcolor : change background color of a table , row or cell.

· Border : provide table border

· Align : left , right or center alignment

· Height

· Width

· background

· Cellpadding : space with in cell

· Cellspacing : space between two cell

· Colspan

· Rowspan

For the table row,

<tr></tr> tag is used. All the data which is in single row should be enclosed between these tags.

To create individual cells, the <td></td> tag is used. .

For Heading, <th></th> tag is used.

Syntax:

Example

View:

Attributes of <table> tag

1. width :This attribute is used to define the width of the table

Example:

2. height: This attribute is used to define the height of the table

Example:

3. border: This attribute is used to enable border of the table. By default, table border is not visible.

4. bordercolor: This attribute is used to color the border of the table.

Example

5. bgcolor: This attribute is used to give color to the cell, row or to the entire table. This can be used with <tr>, <th> and <td> also.

Example

6. cellspacing: This attribute is used to provide space between the cells of the table.

7. cellpadding:This attribute is used to provide space between the content and the edges of the cell.

Example:

There are two more attributes which is used with <th> or <td>.

colspan à This is used to merge the columns of the table.

rowspan à This is used to merge the rows of the table.

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax:

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

HTML Forms

Forms are such HTML tools, which allow readers to communicate with one another via the web. Form is a collection of markup tags that work with web servers to produce a means of obtaining information.

<form> Tag

A Form tag is used in an HTML document just like any other element. It has a start tag <form> and an end tag </form>.

Form’s Element

The form element consists of the following:

a. INPUT

b. TEXTAREA : <textarea></textarea> à multiple lines

a. Rows

b. cols

c. SELECT : drop down option

INPUT : INPUT element is the basic way to get input from the user in a variety of situations. The reason is that an INPUT element can define many types of graphical user interface features. These are:

· Text : single line text

· Checkbox : multiple selection

· Radio : single selection

· Password : provide encrypted data

· Submit

· Button

Text : Type defines the text value of the attribute that will be displayed.

Checkbox : - Check boxes are utilized when more than one option is required to be chosen and are defined by <input type=”checkbox”>

Radio :- Radio button is an input element which is used to select only one option from the given option and defined by <input type=”radio”>

Password :- Password is a single lined text box which is displayed the characters as a dotted line and defined by <input type=”password”>

Submit :- Submit is an input element and is used to submit to the form handler which is server page and process the input data. Submit input type is defined by <input type=”submit”>.

HTML Input Types

Here are the different input types you can use in HTML:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Syntax:

Example:

View:

Page updated

Google Sites

Report abuse