HTML

Introduction
to
HTML
What is HTML
• With HTML you can create your own Web site.
• HTML stands for Hyper Text Markup Language.
• HTML is not a programming language, it is a Markup Language.
• A markup language is a set of markup tags.
• HTML uses markup tags to describe web pages.
• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.

Mark up language?
• A markup language is a computer language that uses tags to

define elements within a document. It is human-readable,
meaning markup files contain standard words, rather than
typical programming syntax. While several markup languages
exist, the two most popular are HTML and XML.
Markup languages
HTML XML
HTML Elements and Tags
• A tag is always enclosed in angle bracket <>like <HTML>
• HTML tags normally come in pairs like <HTML> and </HTML> i.e.
Start tag = <HTML> End tag =</HTML>
• Start and end tags are also called opening tags and closing tags
HTML
• Write html code in notepad.
• Save the file with (.Html)/(.Htm) extension.
• View the page in any web browser viz. INTERNET EXPLORER,
NETSCAPE NAVIGATOR etc.
• The purpose of a web browser (like internet explorer or firefox) is to
read html documents and display them as web pages.
First code with HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>
MY FIRST PAGE
</TITLE>
</HEAD>
<BODY>
Hello World
</BODY>
First code with HTML explain
• The DOCTYPE declaration defines the document type.

• <HTML> - Describe HTML web page that is to be viewed by a web
browser.
• <HEAD> - This defines the header section of the page.
• <TITLE> - This shows a caption in the title bar of the page.
• <BODY> - This tag show contents of the web page will be displayed.
Tags
Container elements Empty elements

Text Formatting Tags
Heading Element:->
• There are six heading elements (<H1>,<H2>,<H3>,<H4>, <H5>,<H6>).
• All the six heading elements are container tag and requires a closing
tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
Heading tag code
<html>
<title>heading</title>
<body>
<h1> This is my 1 Heading </h1>
</body>
</html>
HTML Paragraph Tag
HTML documents are divided into paragraphs.
Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p>
<p>Thisisanotherparagraph</p>
<pre>This text is preformatted</pre>
Line Break & Horizontal
Line Tag
if you want a line break or a new line without starting a new

paragraph Use the <br> tag.
Defines a horizontal line use <hr>tag.
<br> <hr> element are empty HTML element i.e. Global
Information Channel<hr>
Global Information <br> Channel
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<super> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
Text Formatting Code
<html>
<head>My First Head</head>
<body>
<b>This text is Bold</b><br>
<em>This text is Emphasized</em><br>
<i>This text is Italic</i><br>
<small>This text is Small</small><br>This is<sub> Subscript</sub> and
<sup>Superscript</sup><br> <strong>This text is Strong</strong><br>
<big>This text is Big</big><br>
<u>This text is Underline</u><br>
<strike>This text is Strike</strike><br>
<tt>This text is Teletype</tt>
</body>
</html>
Font Tag
• This element is used to format the size, typeface and color of the enclosed
text.
• • The commonly used fonts for web pages
<font color=“green" size="3" face="Times New Roman">

My HTML code
</font>
Background & Text Color Tag
The attribute bgcolor is used for changing the back ground color
of the page.
<body bgcolor=“Green” >
ext is use to change the color of the enclosed text.
<body text=“White”>
Text Alignment Tag
It is use to alignment of the text.
1.Left alignment <align=“left”>
2.Right alignment <align=“right”>
3.Center alignment <align=“center”>
Hyperlink Tag
• A hyperlink is a reference (an address) to a resource on the web.

• Hyperlinks can point to any resource on the web: an HTML page, an image, a
sound file, a movie, etc.
• The HTML anchor element <a>, is used to define both hyperlinks and anchors.
• <a href="url">Link text</a>
• The href attribute defines the link address.
• <a href="http://www.globalinfochannel/">Visit
• globalinfochannel!</a>
Image Tag
• To display an image on a page, you need to use the src attribute.
• src stands for "source". The value of the src attribute is the URL of the image
you want to display on your page.
• It is an empty tag.
• <IMG SRC ="url">
• <IMG SRC="picture.gif“>
• <IMG SRC="picture.gif“ HEIGHT="30“ WIDTH="50">
Image attributes - <img> tag
• <img> Defines an image
• <Src> display an image on a page, Src stands for "source".
• <Alt> Define "alternate text" for an image
• <Width> Defines the width of the image
• <Height> Defines the height of the image
• <Border> Defines border of the image
• <Hspace> Horizontal space of the image
• <Vspace> Vertical space of the image
• <Align> Align an image within the text
• <background> Add a background image to an HTML page
Sample code for an Image
• <img src=“images/picture1.jpg” align="left" width="48" height="48">
• <body background=“images/picture1.jpg" text="white">
HTML Table Tag
<table> used to create table
<tr> table is divided into rows
<td> each row is divided into data cells
<th> Headings in a table
<Caption> caption to the table
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
amount of space between table cells.
<Cellspacing>
space around the edges of each cell
<Cellpadding>
No of column working with will span
<Colspan>
No of rows working with will span
<rowspan>
attribute takes a number
Sample code for a table
<html>
<body>
<h3>Without cellpadding:</h3>
<table border="2" bgcolor="green">
<tr>
<th>Jones</td>
<th>Smith</td>
</tr>
<tr>
<td>Hayes</td>
<td>Jackson</td>
</tr>
</table>
</body>
Sample code for a table contd..
<html>
<body>
<h4>With cellpadding:</h4>
<table border="8“ cellpadding="10“
background="file:///C:/WINDOWS/FeatherTexture.b
mp">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
</body></html>
HTML List Tag
Lists provide methods to show item or element sequences in
document content. There are
two main types of lists:
1. Unordered lists:-unordered lists are bulleted.
2. Ordered lists:- Ordered lists are numbered.
List Tags
<LI> <LI> is an empty tag, it is used for representing the list
items
<OL> Ordered list
<UL> Unordered list
Unordered List
TYPE attribute to the <UL> tag to show different bullets like:-
1.Disc
2.Circle
3.Square
<ul Type =“disc”>…..</ul>
The attribute TYPE can also be used with
<LI> element.
Sample
<html>
for List
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Jones</li>
<li>Smith</li>
<ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Jones</li>
<li>Simth</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Jones</li>
<li>Smith</li>
</ul>
</body>
</html>
HTML Anchor
• The HTML anchor tag defines a hyperlink that links one page to
another page. It can create hyperlink to other web page as well as
files, location, or any URL. The "href" attribute is the most important
attribute of the HTML a tag. and which links to destination page or
URL.
The syntax of HTML anchor tag

<a href = "..........."> Link Text </a>
Meta Tags
• HTML lets you specify metadata - additional important information about a
document in a variety of ways. The META elements can be used to include
name/value pairs describing properties of the HTML document, such as author,
expiry date, a list of keywords, document author etc.
• The <meta> tag is used to provide such additional information. This tag is an
empty element and so does not have a closing tag but it carries information
within its attributes.
• You can include one or more meta tags in your document based on what
information you want to keep in your document but in general, meta tags do
not impact physical appearance of the document so from appearance point of
view, it does not matter if you include them or not.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
HTML - Comments
• Comment is a piece of code which is ignored by any web browser. It
is a good practice to add comments into your HTML code, especially
in complex documents, to indicate sections of a document, and any
other notes to anyone looking at the code. Comments help you and
others understand your code and increases code readability.
• HTML comments are placed in between  tags. So, any
content placed with-in  tags will be treated as comment
and will be completely ignored by the browser.
<!DOCTYPE html>
<html
<head>
<title>Valid Comment Example</title>
</head>
<body>

<p>Document content goes here.....</p>
</body>
</html>
HTML - Images
• Images are very important to beautify as well as to depict

many complex concepts in simple way on your web page. This
tutorial will take you through simple steps to use images in
your web pages.
• You can insert any image in your web page by using <img> tag.
Following is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Set Image Width/Height
• You can set image width and height based on your requirement using width
and height attributes. You can specify width and height of the image in terms
of either pixels or percentage of its actual size.
<img src = "/html/images/test.png" alt = "Test Image" width =

"150" height = "100"/>
HTML - Image Links
• We have seen how to create hypertext link using text and we also
learnt how to use images in our webpages. Now, we will learn how to
use images to create hyperlinks.
• It's simple to use an image as hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>
HTML - Email Links
• It is not difficult to put an HTML email link on your webpage but it can cause
unnecessary spamming problem for your email account. There are people,
who can run programs to harvest these types of emails and later use them
for spamming in various ways.
<a href = "mailto: abc@example.com">Send Email</a>

HTML - IFrames
• You can define an inline frame with HTML tag <iframe>. The <iframe> tag is
not somehow related to <frameset> tag, instead, it can appear anywhere in
your document. The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate document, including
scrollbars and borders. An inline frame is used to embed another document
within the current HTML document.
<iframe width="560" height="315"

src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0"
allowfullscreen></iframe>
Grouping HTML Elements
• There are two important tags which we use very frequently
to group various other HTML tags (i) <div> tag and (ii) <span>
tag
The <div> tag
• This is the very important block level tag which plays a big role in
grouping various other HTML tags and applying CSS on group of
elements. Even now <div> tag can be used to create webpage layout
where we define different parts (Left, Right, Top etc.) of the page
using <div> tag. This tag does not provide any visual change on the
block but this has more meaning when it is used with CSS.
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
</ul>
</div>
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
</div>
</body>
HTML - Backgrounds
• By default, your webpage background is white in color. You may not
like it, but no worries. HTML provides you following two good ways to
decorate your webpage background.
HTML Background with Colors

HTML Background with Images
Html Background with Colors
• The bgcolor attribute is used to control the background of an HTML
element, specifically page body and table backgrounds.
• Note − The bgcolor attribute deprecated in HTML5. Do not use this

attribute.
<tagname bgcolor = "color_value"...>

Html Background with Images
• The background attribute can also be used to control the background of an HTML
element, specifically page body and table backgrounds. You can specify an image to set
background of your HTML page or table.
• Note − The background attribute deprecated in HTML5. Do not use this attribute.
<table background = "/images/html.gif" width = "100%" height = "100">

HTML - Colors
• HTML Color Coding Methods
• There are following three different methods to set colors in your web page
−
• Color names − You can specify color names directly like green, blue or
red.
• Hex codes − A six-digit code representing the amount of red, green, and
blue that makes up the color.
• Color decimal or percentage values − This value is specified using the
rgb( ) property.
HTML Colors - Hex Codes
• A hexadecimal is a 6 digit representation of a color. The first two

digits(RR) represent a red value, the next two are a green
value(GG), and the last are the blue value(BB).
• A hexadecimal value can be taken from any graphics software like
Adobe Photoshop, Paintshop Pro or MS Paint.
• Each hexadecimal code will be preceded by a pound or hash sign
#.
HTML Colors - RGB Values
• This color value is specified using the rgb( ) property. This property
takes three values, one each for red, green, and blue. The value can
be an integer between 0 and 255 or a percentage.
• Note − All the browsers does not support rgb() property of color so it
is recommended not to use it.
HTML - Forms
• HTML Forms are required, when you want to collect some data from
the site visitor. For example, during user registration you would like to
collect information such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc. The
back-end application will perform required processing on the passed
data based on defined business logic inside the application.
HTML – Forms contd..
<form action = “test.php" method = "GET">

First name: <input type = "text" name = "fname" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
Common Attributes of a Form
• Action - Backend script ready to process your passed data.
• Method - Method to be used to upload data. The most frequently
used are GET and POST methods.
• Target - Specify the target window or frame where the result of the
script will be displayed. It takes values like _blank, _self, _parent etc.
• Enctype - You can use the enctype attribute to specify how the
browser encodes the data before it sends it to the server. Possible
values are −
• application/x-www-form-urlencoded − This is the standard method most
forms use in simple scenarios.
• mutlipart/form-data − This is used when you want to upload binary data in
the form of files like image, word file etc.
HTML Form Controls
There are different types of form controls that you can use
to collect data using HTML form −
•Text Input Controls
•Checkboxes Controls
•Radio Box Controls
•Select Box Controls
•File Select boxes
•Submit and Reset Button
Text Input Controls
<form >
First name: <input type = "text" name = "first_name" /> <br>
Last name: <input type = "text" name = "last_name" />
User ID : <input type = "text" name = "user_id" /> <br>

Password: <input type = "password" name = "password" />
Description : <br />

<textarea rows = "5" cols = "50" name = "description"> Enter
description here...
</textarea>
</form>
Checkbox Controls
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
Radio Button Controls

<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
Select Box Controls
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
File Upload Box

<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
Button Controls
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
"/html/images/logo.png" />
</form>
HTML - Embed Multimedia
• Sometimes you need to add music or video into your web page. The easiest
way to add video or sound to your web site is to include the special HTML
tag called <embed>. This tag causes the browser itself to include controls for
the multimedia automatically provided browser supports <embed> tag and
given media type.
• You can also include a <noembed> tag for the browsers which don't
recognize the <embed> tag. You could, for example, use <embed> to display
a movie of your choice, and <noembed> to display a single JPG image if
browser does not support <embed> tag.
HTML - Marquees
• An HTML marquee is a scrolling piece of text displayed either horizontally across

or vertically down your webpage depending on the settings. This is created by
using HTML <marquees> tag.
• Note − The <marquee> tag deprecated in HTML5. Do not use this element,
instead you can use JavaScript and CSS to create such effects.
<marquee direction = "right">This text will scroll from left to right</marquee>

HTML - Style Sheet
• Cascading Style Sheets (CSS) describe how documents are presented on

screens, in print, or perhaps how they are pronounced. W3C has actively
promoted the use of style sheets on the Web since the consortium was
founded in 1994.
• Cascading Style Sheets (CSS) provide easy and effective alternatives to

specify various attributes for the HTML tags. Using CSS, you can specify a
number of style properties for a given HTML element. Each property has a
name and a value, separated by a colon (:). Each property declaration is
separated by a semi-colon (;).
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = “css/style.css">
<style>
</style>
</head>
<body>
</body>
</html>
HTML - JavaScript
• A script is a small piece of program that can add interactivity to your website. For
example, a script could generate a pop-up alert box message, or provide a dropdown
menu. This script could be written using JavaScript or VBScript.
• You can write various small functions, called event handlers using any of the scripting
language and then you can trigger those functions using HTML attributes.
• Now-a-days, only JavaScript and associated frameworks are being used by most of the
web developers, VBScript is not even supported by various major browsers.
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/js/script.js" type = "text/javascript"/></script>
</head>
<body>
</body>
</html>

HTML

Uploaded by

Copyright:

Available Formats

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Introduction

• HTML stands for Hyper Text Markup Language.

• HTML is not a programming language, it is a Markup Language.

• A markup language is a set of markup tags.

• HTML uses markup tags to describe web pages.

• HTML is not case sensitive language.

• HTML documents contain HTML tags and plain text.

• A markup language is a computer language that uses tags to

• A tag is always enclosed in angle bracket <>like <HTML>

• The DOCTYPE declaration defines the document type.

Container elements Empty elements

if you want a line break or a new line without starting a new

<font color=“green" size="3" face="Times New Roman">

• A hyperlink is a reference (an address) to a resource on the web.

The syntax of HTML anchor tag

• Images are very important to beautify as well as to depict

<img src = "Image URL" ... attributes-list/>

<img src = "/html/images/test.png" alt = "Test Image" width =

<a href = "mailto: abc@example.com">Send Email</a>

<iframe width="560" height="315"

HTML Background with Colors

• Note − The bgcolor attribute deprecated in HTML5. Do not use this

<tagname bgcolor = "color_value"...>

<table background = "/images/html.gif" width = "100%" height = "100">

• A hexadecimal is a 6 digit representation of a color. The first two

<form action = “test.php" method = "GET">

User ID : <input type = "text" name = "user_id" /> <br>

Description : <br />

Radio Button Controls

File Upload Box

• An HTML marquee is a scrolling piece of text displayed either horizontally across

<marquee direction = "right">This text will scroll from left to right</marquee>

• Cascading Style Sheets (CSS) describe how documents are presented on

• Cascading Style Sheets (CSS) provide easy and effective alternatives to

You might also like