HTML

Introduction to HTML

o HTML stand for Hyper Text Markup Language

o HTML describes the structure of a Web page

o HTML elements tell the browser how to display the content.

o HTML elements are represented by tags.

o HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.

o Browsers do not display the HTML tags, but use them to render the content of the page

o We use HTML tags to define look & fact of a website.

o HTML designed by Tim Berners-Lee in 1991.

HTML Tags

o HTML tags are element names surrounded by angle brackets:

o <tagname>content goes here...</tagname>

o HTML tags normally come in pairs like <p> and </p>

o The first tag in a pair is the start tag, the second tag is the end tag.

o The end tag is written like the start tag, but with a forward slash inserted before the tag name.

Basic Structure of HTML

HTML is the basic structural element that is used to create web pages.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

----------

</body>

</html>

o The <!DOCTYPE html> declaration defines this document to be HTML5.

o The <html> element is the root element of an HTML page.

Syntax -

<html>

--------

</html>

o The <head> element contains meta information about the document. It contains other head elements such as-

<title> - Its is displayed in a browser tab.
<meta> - It is used to specify page description, author and keywords etc.
<link> - It is used to load an external style sheet into HTML document.
<style> - It is used to define embedded style information for an HTML document.
<script> - It is used to define client-side script such as JavaScript within the document.
<base> - It specifies a base URL for all relative links contained in the document. It is used either a href attribute or target.

Syntax -

<html>

<head>

<title> Document title </title>

</head>

</html>

o The <body> is the second and largest part of html document. The tags explain below are within the body of html document.

Syntax -

<!DOCTYPE html>

<html>

<head>

</head>

<body>

----------

</body>

</html>

Example 1.

<!DOCTYPE html>

<html>

<head>

<title>First Example</title>

</head>

VIMALA GURUKUL<br>

A World Class Computer Academy

</body>

</html>

Example 2.

<!DOCTYPE html>

<html>

<head>

<title>Second Example</title>

</head>

VIMALA GURUKUL<br>

A World Class Computer Academy

</body>

</html>

Formatting Tags

o <b> - - - - - - - - - - - - -</b> :- to bold the text

o <strong> - - - - - - - - - </strong> :- to bold the text

to identify the text is important

o <i> - - - - - - - - - - -- - - </i> :- to italic the text

o <u> - - - - - - - - - - - - - -</u> :- to underline the text

o <mark> - - - - - - - - - - -</mark> :- to highlight the text

o <small> - - - -- - - - - -- -</small> :- to set small font size

o <big>- - - -- - - - - - - - - </big> :- to set big font size

o <del> - - - - - - - - - - - - </del> :- to set deleted the text

o <s> - - - - - -- - - - - - -- </s> :- to set strikethrough the text

o <ins> - - - - -- - - - - - - -<ins> :- to inserted the text

o <sub> - - - - -- - - - - - -</sub> :- to subscript the text

o <sup> - - - - - - - - -- - - </sup> :- to superscript the text

o <center>- - - - - - - - - - </center> :- to center the text

o <pre> - - - -- - - - - - - - </pre> :- to preformatted the text

o <p> - - - - - - - - -- - - - - </p> :- to paragraph the text

Comment

o The comment tag is used to insert comments in the source code.

o Comments are not displayed in the browsers.

o You can use comments to explain your code, which can help you when you edit the source code at a later date.

Syntax –

<! - - - -- - comment here - - - -- >

Heading tags in html

An HTML heading tag is used to define the headings of a page. Browsers display the contents of headings in different sizes.

There are six heading tags in html are:-

<h1>-------- Heading 1--------</h1>

<h2>-------- Heading 2--------</h2>

<h3>-------- Heading 3--------</h3>

<h4>-------- Heading 4--------</h4>

<h5>-------- Heading 5--------</h5>

<h6>-------- Heading 6--------</h6>

Note –

<h1> tag is the most important heading or main heading. (Biggest in size)

<h6> tag is the least important heading small heading. (Smallest in size)

Image tag

o An image can be inserted into a web page using the tag <img>.

o This tag takes the name of the image file name (photo.jpg) as an attribute.

o It also allowed control of the height, width, border, etc. of every image placed on web page.

Syntax –

Attribute –

i. src – it is specifies the address of the image.

ii. alt – it is provide an alternate text of an image.

iii. height – it specifies the height of the image in pixel.

iv. width – it specifies the width of the image in pixel.

v. border – it specifies the size of the border to place around the image.

vi. align – it specifies change the alignment top/bottom/left/right

vii. title – it specifies adds a tooltip with title text to the image.

Example –

<!DOCTYPE html>

<html>

<head>

<title>Image tag</title>

</head>

<body>

We use image tag </h1>

</body>

</html>

HTML links –

o HTML links are hyperlinks. You can click on a link and jump to another document.

o When you move the mouse over a link, the mouse arrow will turn into a little hand.

o To create a link on a web page, you need to wrap an anchor <a> element around text, then set its href attribute to the URL you want to link to.

Syntax -

<a href=”list.html”> CLICK HERE </a>

HTML link color

By default a link will appear like this ( in all browser).

· An unvisited link is underlined and blue.

· A visited link is underlined and purple.

· An active link is underlined and red.

You can change the default color by using CSS.

The target attribute

The target attribute specifies where to open the linked document. This attribute is used to specify the location when linked document is opened.

Example –

<!DOCTYPE html>

<html>

<head>

<title> link color</title>

<style>

a:link {color:green;

background-color:transparent;

text-decoration:none;}

a:visited {color:pink;

background-color:transparent;

text-decoration:none;}

a:hover {color:red;

background-color:transparent;

text-decoration:underline;}

a:active {color:yellow;

background-color:transparent;

text-decoration:underline;}

</style>

</head>

<body>

<p>You can change the color of links</p>

</body>

</html>

List tags

A list is a record of information, such as names of students, usually written on each line and ordered in a way that makes a particular thing easy to find.

Example –

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Example of Ordered list</h1>

<ol>

</ol>

<hr>

<h1>Example of Unordered list</h1>

<ul>

</ul>

<hr>

<h1>Example of Description list</h1>

<dl>

<dd>HTML stand for Hyper Text Markup Language</dd>

</dl>

<dl>

<dd>CSS stand for Cascading Style Sheet</dd>

</dl>

<dl>

<dd>JS stand for JavaScript</dd>

</dl>

</body>

</html>

</body>

</html>

Table Tag

The table is used to show data which are related to each other.
In html closed tag <table> - - - - - </table> is used to create table.
<tr> - - - -</tr> is used to define a new row of the table.
<th> - - - -</th> is used to show the heading of each column inside the t able row.
<td> - - - - -</td> is used to show the data inside the table row.

Such as,

Note –

th :- by default, bold and center.

td :- by default, no formatting.

Example –

<!doctype html>

<html>

<head>

<title>table in html</title>

</head>

<body>

<h1>An Example of Table format</h1>

<caption>This is caption of table</caption>

<tr>

<th>Address</th>

</tr>

<tr>

<td>Amit Gupta</td>

<td>Varansi</td>

</tr>

<tr>

<td>Priya Rai</td>

<td>Azamgarh</td>

</tr>

<tr>

<td>Rohan Sharma</td>

<td>Ghazipur</td>

</tr>

</table>

</body>

</html>

Form

HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio button, submit buttons and more.

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

Syntax-

<form>

--------

</form>

Attribute of forms elements

1. Action – It defines the process to be performed when the form is submitted.

Example,

2. Target – It specifies where to open result after submitting the form.

It can have –

· _blank = next tab/window

· _self = self tab/window

Example,

3. Method – It specifies the http method to be use when submitting the form data.

It can have -

· Get – It is default value. It is not secure method because the submitted forms data will be visible in the address field of the browser.

· Post – We must use post method when form contains sensitive or personal information because it does not display the submitted form data in the address field of the browser.

Example –

HTML5 form element

Color –

o <input type=”color” name=”color”>

Email –

o <input type=”email”>

Number (age) –

o <input type=”number” name=”age”>

Number (Quantity –between 1 to 5) –

o <input type=”number” name=”quantity” min=”1” max=”5”>

Password –

o <input type=”password”>

Hidden (secret) –

o <input type=”hidden” name=”secret”>

Date (Birthday) –

o <input type=”date” name=”birthday”>

Range –

o <input type=”range” min=”0” max=”10”>

Search –

o <input type=”search” name=”google search”>

Telephone –

o <input type=”tel” name=”phone” pattern=”[0-9]{3} – [0-9]{2} – [0-9]{3}”>

Time –

o <input type=”time”>

Week –

o <input type=”week”>

URL –

o <input type=”url”>

Note - Full address support.

e.g. – www.vimalagurukul.com

HTML5 form Attribute

Required
Readonly
Placeholder
Autofocus
Disabled
Checked
Min
Max
Maxlength

Grouping form data with <fieldset>

Example –

<!DOCTYPE html>

<html>

<head>

<title>grouping form data</title>

</head>

<body>

<form>

<legend>Personal Information</legend>

First name :

Last name:

</fieldset>

</form>

</body>

</html>

HTML Frames

The <frame> tag was used in html to define one particular window (frame) with in a <frameset>.

Syntax –

---------------

</frameset>

The <frameset> tag attributes are –

Cols – The cols attributes is used to create vertical frames in web browser.

o Example – to create three vertical frames, use cols = “30%,40%,30%”.

Rows – The rows attributes is used to create horizontal frames in web browser.

o Example – to create two horizontal frames, use rows = “10%,90%”.

Border – This attribute of frameset tag defines the width of border of each frame in pixels.

o Example - <frameset border=”4”> </frameset>

Framespacing – This attribute of frameset tag is used to specify the amount of spacing between the frames in frameset.

o Example – framespacing=”10” means there should be 10 pixels spacing between each frames.

Example –

<!DOCTYPE html>

<html>

<head>

<title>frame</title>

</head>

</frameset>

<body>

This file is not support.

</body>

</noframes>

</html>

Note – If you load a frame definition document into a web browser that does not support frames, you get only a blank page. The <noframes> tag enables you to include body text as part of the document.

HTML Iframe

An iframe is used to display a web page within another web page. An HTML iframe are defined with in the <iframe> tag.

Syntax-

Example –

<!DOCTYPE html>

<html>

<head>

<title>iframe</title>

</head>

<body>

<h1>Example of HTML iframe</h1>

<p>Iframe are used to display a web pages in webpage use the height and width attribute to spacify of the iframe.</p>

<p>Document content also go here --------------------------</p>

</body>

</html>

How to embed video on web page

Video tag and source tag -

· The <video> tag is used to embed video contain in a document, such as a movie clip or other video stream.

· The <video> tag contains one or more <sources> with different video sources. The browser will choose the first source it supports.

Example –

<!DOCTYPE html>

<html>

<head>

<title>Video tag</title>

</head>

<body>

Your browser not supported video tag.

</video>

</body>

</html>

Note – Don’t use preload and poster attribute in the same video tag.

How to embed audio on web page

Audio tag and source tag -

· The <audio> tag is used to embed sound contain in a document, such as music and other audio streams.

· The <audio> tag contains one or more <sources> with different audio sources. The browser will choose the first source it supports.

Example –

<!DOCTYPE html>

<html>

<head>

<title>Audio tag</title>

</head>

<body>

</audio>

</body>

</html>

How to embed youtube video using iframe in html5

Step1 – Go to youtube video on your PC.

Step2 – Click “share” button, then

Step3 – Click “embed”, and open video file, then

Step4 – Copy all embed video file, and then

Step5 – We create html file and paste embed video file.

How to embed google map using iframe in html5

Step1 – Open google and search google map

Step2 – Search our location

Step3 – Then right click and search “share” or “embed map”, then

Step4 – Show both send a link and embed a map the copy embed map file.

Step5 – We create html file and paste embed map file.

Special Character in html

· Registered trademark ® - ®

· Trademark ™ - ™

· em space (four space) - &emsp;

· en space (two space) - &ensp;

· non breaking space (one space) -  

· Indian Currency - ₹

· Leftword arrow - ← or ←

· Rightword arrow - ↑ or ↑

· Downword arrow - → or →

· Upword arrow - ↓ or ↓

· Blackheart - ♥ or &hearts;