HTML Hyper Text Markup Language

HTML Lecture Sheet
What is Web Designing

Web Designing or Website Designing is the process of building and maintaining websites. This includes
different aspects like, website wireframe, website layout, color combinations, fonts, graphic design,
webpage interactions etc.
• HTML structural layer of a website, used to create content.

• CSS presentational layer of a website, used to style html.
• Javascript functional layer of a website, used to add functionalities.
What is HTML
Hyper Text Markup language or HTML, is the standard language on Web, used to build a website or
web application. HTML is a markup language, as it contains markup tags or tags. HTML is used to
write content or structure of web pages. HTML is not a programming language.
HTML is browser embedded. To Design or build a website, one should starts with HTML first. HTML
includes 140+ tags and attributes to build layout. The latest version of html is HTML5, which included
HTML, CSS and JavaScript. HTML and CSS are static, while JavaScript is dynamic.
HTML Invention
HTML was invented in 1990 by a CERN scientist Tim Berners-Lee. The purpose to invent HTML was
to make it easier for research scientists and professors at different universities around world to gain access
to each other's research works. The project became a bigger success than Tim Berners-Lee had ever
imagined. By inventing HTML, he laid the foundation for the web as we know it today. HTML language
makes it possible to present information (e.g. scientific research) on the Internet.
What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the
HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose
"Source". Or press ctrl + u, or Cmd + Alt + u
How to build a website using html

1. Open Notepad, Notepad++, Brackets, Sublime Text or any code editors.
2. Create the doctype of webpage. e.g. <!DOCTYPE html>
3. Create Parent html tag e.g. <html> </html>
4. Create head tag inside html tag, e.g. <head> </head>
5. Create body tag after head closing, e.g. <body> </body>
6. Add title tag inside head, e.g. <title> </title>
7. Add meta tag inside head, e.g. <meta charset="utf-8">
8. Save page as index.html file on your system.
9. Double Click the file and your webpage is live on browser.
A Sample HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Title</title>
<meta charset="UTF-8">
</head>
<body>
//Content of your webpage
</body>
</html>
HTML Most frequently used Tag:

Tag-Name Description
<html> HTML tag is the parent tag of our webpage.
Head tag is first child of html tag and is used to write the information for web
<head>
browsers and Search engines.
Title tag is used only once inside head tag. Title tell the search engines the about the
<title>
webpage. Its max character limit is 60-70. Title should be unique for every webpage.
Meta tag is used to define the charset family, description, keywords, Author, robots
<meta>
and Geo Location of the website.
Link tag is used to link external css, favicon icon, publisher and canonical of the
<link>
webpage.
Script Tag is used to attach external javascript, jquery, and AngularJS scripts with
<script>
the webpage.
Body tag is used to create the webpage structure. Structure includes Headings,
<body> Paragraphs, images, tables, division, etc of the webpage. Body includes all the
content which users see on a website.
HTML Comments
HTML Comments are used to write messages or notifications for web developers. Comments are started
with . These comments are not visible in browsers, but remain in page source code.


Block Vs Inline level Elements
A block level element can have both inline and block elements as children or descendent, but inline elements can
have only inline elements as children. (Except anchor tag).
HTML Block Level Elements List

Element Name Code Use
Para Tag <p> </p> Create new paragraph
Pre Tag <pre> </pre> Create pre formatted text.
Thematic Break or formally known as Horizontal rule,
hr <hr>
used to break with 2px gradient shadow.
Blockquote Tag <blockquote> </blockquote> Create a blockquote from new line.
Div Tag <div> </div> Create new New Division
ul Tag <ul> </ul> Create new Unordered List.
ol Tag <ol> </ol> Create new Ordered List.
Address Tag <address> </address> Create Postal Address
<h1> </h1>, <h2> </h2> till
Heading Tag Create Headings and sub-headings.
<h6> </h6>
Form Tag <form> </form> Used to group Form controls and send form data
Fieldset Tag <fieldset> </fieldset> This is a fieldset, used to group form element.
HTML Inline Elements

Element
Code Use Example
Name
span Tag <span> </span> Used to group inline elements. I am span.
anchor Tag <a href="">Link</a> Used to create hyperlinks. I am hyperlink.
b Tag <b> </b> Used to give bold appearance. I am bold.
Presentational Element used to
i Tag <i> </i> I am italic.
italicize text.
Gives bold appearance and
Strong Tag <strong> </strong> I am strong.
highlight content in searching .
Italicize text and highlight content
em tag <em> </em> I am em.
in searching .
small tag I am <small>small</small> small print. I am small.
u tag <u> </u> underline text. I am underlined.
del tag <del> </del> Shows deleted text . Product Price is ₹100 95.
s tag <s> </s> Shows struck text . I am struck text.
sup tag <sup> </sup> Shows superscript text. 2000 = 2 * 103.
Chemical formula of
sub tag <sub> </sub> Shows subscript text .
water is H2O.
<abbr title="Prime Shows full version of
abbr tag He is our PM.
Minister">PM</abbr> abbreviation in title tag .
To print this page, press
kbd tag <kbd> </kbd> Shows keyboard command .
Ctrl + p.
Here is the equation var
code tag <code> </code> To show computer code .
x = "string";.
q tag <q> </q> To show quotes . This is a quote.
cite tag I resides in <cite>India </cite> To show cited title of work. I resides in India.
This is a sample
samp tag <samp> </samp> To show sample.
password.
What is Doctype
An HTML page is started by doctype. Doctype defines the type of web document we are using. Doctype
includes the version of HTML and its DTD. Website will not be fully functional without doctype in
Internet Explorer lower versions.Doctype is always declared before HTML opening tag
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<title>HTML5 Doctype</title>
</head>
<body>
HTML5 Webpage
</body>
</html>
HTML Tags
Every Thing in HTML is written in tags. Mostly commonly used tags are PAIR TAGS. Like HTML,
HEAD, BODY, TITLE, ETC.Pair Tags are written in pairs, means separate opening and closing tag. Both
are written same except the closing or end tags include slash(/) or Forward Slash. Some Non Pair tags are
also there, like <img >, <meta > <input > <link >, <br >, <hr >
Structure of an HTML Tag
HTML Tags
The HTML <HTML> Tag is the only Element containing complete HTML Document.
Each HTML Document should have a HTML Opening and HTML Closing Tag.
Two Direct Child of an HTML Element are;
• Head Tag
• Body Tag
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Title of the webpage </title>
</head>
<body>
// content of webpage
</body>
</html>
HEAD Tag
HTML Head tag is the first child of HTML Element. It Contains all information related to webpage, css
links, scripts and meta tags.
• Title Tag
• Meta Tags
• Link Tags
• Script Tags
EXAMPLE:
<!DOCTYPE html>
<head>
<meta charset="utf-8" >
<meta name="keywords" content="Keywords of your website" >
<meta name="description" content="Search Description of your website" >
<link href="style.css" rel="stylesheet" >
<script >
script Goes Here
<script/>
</head>
BODY Tag
HTML Body Tag is used to define the body of our HTML Document
The Body Tag contains all visible contents of a web page like paragraph, headings, tables, lists, images,
videos etc.
By Default, body is 100% wide and takes a margin of 8px.
EXAMPLE:
<body>
Complete Website Structure will be created inside
</body>
HTML TITLE Tag

Title is the first child of HEAD Tag. Title tag is must be unique on every webpage of a website.
It enhance search visibility of a webpage on search engines.
Maximum limits of characters inside title tag is 70.
Attributes in HTML
HTML elements can have attributes. Attributes provide additional information about an element.
Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value".
List of Attributes in html
Attribute Name Description Example
bgcolor Background Color of the document <body bgcolor="aqua">
background Background Image of the document <body background="img/bg.png">
align Align left, right, center <p align="center">
valign Align top, middle, bottom <p valign="middle">
cellspacing change space (margin) between table cells <table cellspacing="10px">
cellpadding inner space ( padding) between table cells <table cellspacing="10px">
size Declare size of font and input <input size="4">
bottom margin Margin from bottom <body bottommargin="20">
top margin Margin from top <body topmargin="10">
class Specifies a class name for an element <div class="content">
id Specifies a unique id for an element <div id="banner">
CSS attribute for tags (Specifies an inline <div style="color:red">
style
style for an element)
Specifies extra information about an element <img src="img/logo.png" alt="Tech
Altum" title="Welcome to Tech Altum
title
(displayed as a tool tip) Tutorial">
type specify type of input control. <input type="text">
lang language used in text <p lang="es">Holla amigo</p>
source of media tags like image, iframe,
src <img src="pic.jpg" alt="">
audio and video
Bgcolor
Used to give background color to body tag and table tag.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body bgcolor="#999000">
// content
</body>
</html>
Background
Used to give background image in html4 for body element.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body background="http://www.techaltum.com/images/TechAltumLogo.png">
// content
</body>
</html>
Align
Align Attribute is used to horizontally align text or tables.
<h1 align="left">TEXT Aligned Left</h1>

<h1 align="center">TEXT Aligned Center</h1>
<h1 align="right">TEXT Aligned Right</h1>
Size
size Attribute is used define size to font tag and input tag.
<font size="2" > Font with size 2</font>

<input type="text" size="10" >

<input type="text" size="20" >
Class
Class attribute is used to define a group of elements having same css properties. Class can have single or
multiple values with whitespace separation.
Class Attribute Code
<style>
.red{ color:red}
.bold{ font-weight:bold}
</style>
<p class="red bold" > Font with class red and bold</p>
<p class="red" > Font with class red only</p>
<p> Font without class red</p>
OUTPUT:
Font with class red and bold
Font with class red
Font without class red
ID
Id attribute is used to call a unique element. On a single webpage, an id cannot be repeated. An html
element can have a single ID attribute and single value of id.
ID Attribute Code
<style>
.red{ color:red}
#blue{ color:blue}
</style>
<p class="red" > Font with class red</p>

<p class="red" > Font with class red</p>
<p id="blue"> Font with id blue</p>
OUTPUT:
Font with class red
Font with class red
Font with id blue
HTML Headings
HTML includes 6 headings. <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Heading elements are used to write
headings on a webpage, whereas p tag is only for plain text. All Headings are bold and block level
elements.
Heading 1 ( <h1>)
Heading 2 ( <h2>)
Heading 3 ( <h3>)
Heading 4 ( <h4>)
Heading 5 ( <h5>)
Heading 6 ( <h6>)
Headings Code
<h1> Heading 1 </h1>
HTML Images
HTML includes images from its 4th version (HTML-4) ie since 1998. Images enhance the look and feel of
a website. We uses images as a logo, banner, icons, symbols, product etc.
Image extensions for web
• Joint Photographic Gallery (jpg)

• Portable Network Graphics (png)
• Graphics Interchange Format (gif)
• Scalable Vector Graphics (svg)
How to insert image in a webpage

Image is inserted in html using <img> tag. Img is an non-pair element. src and alt attributes are
compulsory in an img tag. width and height are optional in img.
<img src="logo.png" alt="alternate text of image" >
Attributes in img tag

Attribute Use
src source or path of image ( compulsory )
alt alternate text for image ( compulsory )
title show tooltip on mouse over
width control width of an image
height control height of an image
HTML List
There are three types of list in HTML, unordered lists , ordered lists & description list.
Unordered lists and ordered lists work the same way, except that the Unordered is used for non-
sequential lists with list items usually preceded by bullets and the letters is for Ordered List, which are
normally represented by incremental numbers.
The ul tag is used to define unordered list and the ol tag is used to define ordered list. Inside the list, the
li tag is used to define each list item.
Type of list in HTML
1. Unordered List
2. Ordered List
3. Description List
Unordered List
Unordered List are list without counting. By default, unordered list are styled with disk. Till html4, type
attribute was used to change list style. But in HTML5, type attribute of unordered list is deprecated. But
we can remove or change list style using CSS.
Create Unordered List
• List 1
• List 2
• List 3
• List 4
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
Unordered List with type "none"

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.
• List 1
• List 2
• List 3
• List 4
<ul type="none">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
Unordered List with type "square"

▪ List 1
▪ List 2
▪ List 3
▪ List 4
<ul type="square">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
Unordered List with type "circle"

o List 1
o List 2
o List 3
o List 4
<ul type="circle">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
Nested Unordered List
An unordered list can have another child unordered list.
• List 1
• List 2
• List 3
o List 31
o List 32
• List 4
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>List 31</li>
<li>List 32</li>
</ul>
</li>
<li>List 4</li>
</ul>
Ordered List
Ordered list use numbers, alphabets and Roman characters. Ordered list are countable. By default,
ordered list are styled with numbers. We can change list style using type attribute or css.
Default Ordered List
Default Ordered list with type 1
1. List 1
2. List 2
3. List 3
4. List 4
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>
Ordered List with type "Roman"
to start an ordered list with roman characters, use type I or i.
Ordered list with uppercase roman
I. List 1
II. List 2
III. List 3
IV. List 4
<ol type="I">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>
Ordered list with lowercase roman
i. List 1
ii. List 2
iii. List 3
iv. List 4
<ol type="i">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
<li>List 8</li>
</ol>
Ordered List with type "Alphabet"
Ordered list with uppercase
A. List 1
B. List 2
C. List 3
D. List 4
<ol type="A">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>
Ordered list with lowercase
a. List 1
b. List 2
c. List 3
d. List 4
<ol type="a">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>
Ordered List starting from number more than 1
Ordered List starting from 10
10. List 1
11. List 2
12. List 3
13. List 4
<ol type="1" start="10">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>
Ordered List starting from X
X. List 5
Y. List 6
Z. List 7
<ol type="A" start="24">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
</ol>
Description List
Description List, formerly known as Definition List is a list with description term and description data.
How to use description list

Web Designing
To Design front end of a web application or website.
DATABASE
ORACLE, My SQL, and SQL Server
<dl>
<dt>WEB DESIGNING</dt>
<dd>To Design front end of a web application or website.</dd>
</dl>
<dl>
<dt>DATABASE</dt>
<dd>ORACLE, My SQL, and SQL Server</dd>
</dl>
HTML Form
What is HTML Form

Forms can be used to send data across the web. HTML forms are used to pass data to the server.
The common elements used in the actual HTML form are form tag, input, textarea,, select, and label.
Form Tag defines the form and within this tag, there is action attribute which tells the form where its
contents will be sent to when it is submitted.
An HTML form can contain input elements like text fields, checkbox, radio buttons, submit button
and more. A form can also contain select list, textarea, fieldset, legend, and label elements.
Create HTML Form
form is build inside <form> tag. See the code below
<form action="" >

/*Content*/
</form>
Form inside fieldset with legend

Form can also be placed inside fieldset tag. Fieldset tag is used to group form. We can also use legend tag
inside fieldset.
<fieldset>
<legend> Enquiry Form</legend>
<form action="" >
<label>Name:<input type="text"></label>
<input type="reset">
<input type="submit">
</form>
</fieldset>
Fieldset with disable

Fieldset also supports disable attribute. By adding disable attribute, all form controls including submit
button are disabled. Thus user cannot fill and submit form data.
<fieldset disable>
<legend> Enquiry Form</legend>
<form action="" >
<label>Name:<input type="text"></label>
<input type="submit">
</form>
</fieldset>
Input Element
The most important form element is the input element.
The input element is used to get user information.
An input element can vary in many ways, depending on the type attribute.
An input element can be of type text field, checkbox,password, radio button, submit button, and more.
Attributes in input element
Attribute
values Use
Name
text, password, radio, checkbox, file, button,
type type defines type of input control.
submit, and reset
size default value is 20 change size of input control
used to define a sequence followed by user when he
tabindex any numeric value
navigate using Tab key
value any possible value set a default value of input control
maxlength n digits set maximum characters length
disabled "" disabled input control, or fieldset tag
checked "" choose checkbox and radio button
Input Type Text

Input type text <input type="text"> is the common input for words, numbers and symbols.
Label is used to write the content just before text field. To Specify particular label, the value of for attribute
inside label should match the id value of input.
Input Type Text with value
<form>
<label>First Name:</label> <input type="text" value="First Name">
<label>Last Name:</label><input type="text" value="Last Name">
</form>
Input Type Text with maxlength

maxlength attribute is used to restrict no of characters in a text field.
<form>
<label>First Name:</label><input type="text" maxlength="10">
<label>Last Name:</label><input type="text" maxlength="10">
</form>
Input type Password

The input type password is used to write passwords. But the password is written in encrypt form. i.e. we
cannot copy or cut password data.
<form>
<label>Password:</label><input type="password" >
</form>
Radio Buttons
Radio Buttons are used to choose a single element among a group.
To allow window to choose a single radio, use name attribute with same value on both radio inputs.
<form>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female">Female
</form>
Checkbox
Checkbox are used to select multiple selections unlike radio button.
<form>
<label <input type="checkbox" name="vehicle" value="bike"> :Bike</label>
<label <input type="checkbox" name="vehicle" value="car"> :Car</label>
</form>
Select Dropdown list

select or select dropdown is used to fetch single or multiple field among listed options
<form>
<label>Current City:</label>
<select>
<option>--Select City--</option>
<option>New Delhi</option>
<option>Kolkata</option>
<option>Mumbai</option>
<option>Chennai</option>
</select>
</form>
Select with Optgroup

Select with multiple Optgroup
<form>
<label>Current City:</label>
<select>
<option>--Select City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Kolkata</option>
<option>Mumbai</option>
<option>Chennai</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
</form>
Textarea
Textarea is used to write multiple line. Like query, address, comments, reviews etc.
Submit Button
Submit Button or input type submit is used to send information from user to web server. Submit button
can be used only once in a form tag.
Create Submit Button

<form>
<input type="submit" value="submit">
</form>
Reset Button
Reset Button or input type reset is used to reload form data, without refreshing webpage. Reset is also
used once in a form tag.
Create reset Button
<form>
<input type="text">
</form>
HTML Table Tag

Tables are used in html to show Tabular data. Tables are defined with the <table> tag and then table row
and columns. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with
the <td> tag). td stands for "table data" and holds the content of a data cell. A <td> tag can contain text,
links, images, lists, forms, other tables, etc.
Table Code in html

row 1, cell 1 row 1, cell 2
<table>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
HTML Table Tags

Here is a list of Tags inside table.
Tag Name Description
<table> Defines a table Element
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell or table data
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Table Attribute
Here is a list of attributes of table tag.
Attribute Use
width width of table or table cell
height height of table or table cell
align align text in table
valign vertically align text in table cell
border border width of table in px
bgcolor background color of table
cellspacing gap between table cells
cellpadding gap inside table cells
Width in Table
<table width="300">
<tr>
</tr>
<tr>
</tr>
</table>
Table Border
To display table with border, specify the width of border. Default table border is zero. Table border can have any
numeric values.
Table Border Examples
Table border 1
<table border="1">
<tr>
</tr>
<tr>
</tr>
</table>
Table border 5
<table border="5">
<tr>
</tr>
<tr>
</tr>
</table>
Cellspacing
cellspacing in table is used to set margin between table cells and table border.
Cellspacing of Table
Table without cellspacing

<table border="1">
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</table>
S No Name
1 abc
2 xyz
Table with cellpspacing 0px

<table border="1" cellspacing="0">
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody>
</table>
S No Name
1 abc
2 xyz
Table with cellspacing 10px

<table border="1" cellspacing="10">
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody>
</table>
S No Name
1 abc
2 xyz
Cellpadding
Deprecated in HTML5, use css padding.
Cellpadding means padding of text or content inside table cell from the table border in px. Same like css
padding.
Table with cellpadding 10

table border="1" cellpadding="10">
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</table>
S No Name
1 abc
2 xyz
Align Attributes in Table
Align atribute is used inside table tag, tr, or td to align text. Align center for table can also align whole table
to middle.
Align value in table
1. Left
2. Center
3. Right
Table with align center

<table border="1px align="center">
<tr>
</tr>
<tr>
</tr>
</table>
Bgcolor
bgcolor in table
<table border="1px bgcolor="#FF0000">
<tr>
</tr>
<tr>
</tr>
</table>
TH, Table Header

th or table head is used inside table row with <th> tag. All major browsers display the text inside <th>
element as strong and centre aligned.
th inside table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Kaushal</td>
<td>21</td>
</tr>
<tr>
<td>Shubh</td>
<td>20</td>
</tr>
</table>
Name Age
Kaushal 21
Shubh 20
What is HTML Frames

The <frame> tag defines one particular window (frame) within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize,
etc.
With frames, you can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of frames are
• The web developer must keep track of more HTML documents

• It is difficult to print the entire page
The HTML Frameset Element

The frameset element holds two or more frame elements. Each frame element holds a separate document.
The frameset element states only HOW MANY columns or rows there will be in the frameset.
The HTML Frame Element

The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.
The first column is set to 30% of the width of the browser window. The second column is set to 70% of the
width of the browser window. The document "frame_a.htm" is put into the first column, and the document
"frame_b.htm" is put into the second column:
<frameset cols="30%,70%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
Iframe
Iframe is a inline frame used to embedd other document within iframe
<iframe src="http://www.techaltum.com"></iframe>
New window inside Iframe

<iframe name="frame1" ></iframe>
<a href="link1.html" target="frame1">Link 1</a>

HTML Marquee Tag

HTML Marquee is used to scroll text or image from left to right, right to left, bottom to top and top to
bottom direction. We can also control marquee speed, marquee direction , marquee scrolldelay and
Stop or start marquee on mouseover and mouseout.
Marquee Code
<marquee> This is a marquee </marquee>

Marquee Direction
Direction attribute can change direction of marquee, i.e from left to right, right to left, top to bottom or
bottom to top.
<marquee direction="left"> This marquee will scroll left </marquee>

<marquee direction="right"> This marquee will scroll right </marquee>
<marquee direction="up" height="200"> This marquee will scroll upwards </marquee>
<marquee direction="down" height="200"> This marquee will scroll downwards </marquee>
Marquee Behaviour
Marquee's behaviour can be changed using behavior attribute. Three possible values for marquee
behavior are:
1. Scroll
2. Slide
3. Alternate
Marquee Scroll behavior

<marquee behavior="scroll"> This is scroll behavior of a marquee </marquee>
Marquee Slide behavior

<marquee behavior="slide"> This is slide behavior of a marquee </marquee>
Marquee Alternate behavior

<marquee behavior="alternate">This is alternate behavior of a marquee </marquee>
Marquee scrollamount, or Speed

Speed of a marquee can be controlled by using scrollamount attribute. Default Marquee speed is 6px.
<marquee scrollamount="10"> This is a marquee with scrollamount 10 </marquee>

Marquee Scrolldelay
Marquee scrolldelay is delay interval between two frames. Scrolldelay works on Firefox, Internet
Explorer, Edge, Safari. But on Chrome, scrolldelay is same like scrollamount.
<marquee scrolldelay="10">This is a marquee with scrolldelay 10</marquee>

Stop and Start Marquee on mouseover

We can stop and restart marquee on mouseover.
<marquee onmouseover="this.stop()" onmouseout="this.start()">This marquee will stop on

mouseover.</marquee>
<marquee onclick="this.stop()" ondblclick="this.start()">This marquee will stop on
mouseclick and start on double click. </marquee>
HTML Entities
Html can not show all characters. Some characters are reserved by html.
To write special characters in HTML, we use HTML Entities.

We can write an HTML entity by Entity No or Entity name.
HTML Reserved Characters

• <
• >
• &
HTML Entities List

Symbol Description Entity Name Entity Number
space
! Exclamation Mark !
" Quotation Mark "
# Hash #
$ Dollar Sign &dollar; $
% Percent Sign %
& Ampersand Sign & &
' Apostrope '
( Opening Brackets (
) Closing Bracket )
* Asterisk *
+ Plus +
, Comma ,
- Hyphen -
. Period .
/ Forward Slash /
0 Zero 0
1 One 1
2 Two 2
3 Three 3
4 Four 4
5 Five 5
6 Six 6
7 Seven 7
8 Eight 8
9 Nine 9
: Colon :
; Semi Colon ;
< Less Then < <
= Equal To =
> Greater Then > >
? Question Mark ?
@ "At" Symbol @
A Upper case A A
B Upper case B B
C Upper case C C
D Upper case D D
E Upper case E E
F Upper case F F
G Upper case G G
H Upper case H H
I Upper case I I
J Upper case J J
K Upper case K K
L Upper case L L
M Upper case M M
N Upper case N N
O Upper case O O
P Upper case P P
Q Upper case Q Q
R Upper case R R
S Upper case S S
T Upper case T T
U Upper case U U
V Upper case V V
W Upper case W W
X Upper case X X
Y Upper case Y Y
Z Upper case Z Z
[ Brackets Open [
\ Back Slash \
] Brackets Close ]
^ Caret ^
_ Underscore _
` Single Quote `
a Lower case a a
b Lower case b b
c Lower case c c
d Lower case d d
e Lower case e e
f Lower case f f
g Lower case g g
h Lower case h h
i Lower case i i
j Lower case j j
k Lower case k k
l Lower case l l
m Lower case m m
n Lower case n n
o Lower case o o
p Lower case p p
q Lower case q q
r Lower case r r
s Lower case s s
t Lower case t t
u Lower case u u
v Lower case v v
w Lower case w w
x Lower case x x
y Lower case y y
z Lower case z z
{ Opening Curly Brace {
| Vertical Line |
} Closing Curly Brace }
~ Tilde ~
• Delete
€ Euro €
‚
ƒ
„
…
†
‡
ˆ
‰
Š
‹
Œ
Ž
‘
’
“
”
•
– Hypen
—
˜ Tild
™ Trade Mark ™
š
›
œ
ž
Ÿ
¡ ¡
¢ Cent ¢ ¢
£ Pound £ £
¤ ¤
¥ Yean ¥ ¥
¦ ¦
§ Section § §
¨ ¨
© Copyright © ©
ª ª
« « «
¬ ¬
® ® ®
¯ ¯
° ° °
± Plus Minus ±
² Power 2 ²
³ Power 3 ³
´ Plus Minus ´
µ Micro Symbol µ µ
¶ Paragraph symbol ¶ ¶
· ·
¸ ¸
¹ ¹
º º
» » »
¼ One Fourth ¼
½ One Half ½
¾ Three Fourth ¾
¿ Inverted Question Mark ¿
À A with À
Á A with Á
Â A with Â
Ã A with Ã
Ä A with Ä
Å A with Å
Æ A with Æ
Ç A with Ç
È E with È
É E with É
Ê E with Ê
Ë E with Ë
Ì I with Ì
Í I with Í
Î I with Î
Ï I with Ï
Ð &#20*;
Ñ I with Ñ
Ò O with Ò
Ó O with Ó
Ô O with Ô
Õ O with Õ
Ö O with Ö
× ×
Ø Ø
Ù U with Ù
Ú U with Ú
Û U with Û
Ü U with Ü
Ý Y with Ý
Þ Þ
ß Beta β ß
à a with à
á a with á
â a with â
ã a with ã
ä a with ä
å a with å
æ a with æ
ç ç
è e with è
é e with é
ê e with ê
ë e with ë
ì i with ì
í i with í
î i with î
ï i with ï
ð i with ð
ñ n with ñ
ò o with ò
ó o with ó
ô o with ô
õ o with õ
ö o with ö
÷ Divide ÷
ø oslash ø ò
ù ugrave ù ù
ú uacute ú ú
û ucirc û û
ü uuml ü ü
ý ý
þ þ
ÿ yuml &yuml ÿ
€ euro € €
₹ Indian Rupee ................ ₹
™ trademark ™ ™
→ Right Arrow → ................
← Left Arrow ← ................
“ Open Curly Double Quote “ “
” Close Curly Double Quote ” ”
♠ Black Spade Suit &spades; ................
♣ Black Club Suit &clubs; ................
♥ Black Heart Suit &hearts; ................
♦ Black Diamond Suit &diams; ................
What is Anchor Tag

Anchor Tag or HTML Anchor Tag defines a Hyperlink in html document. A hyperlink can be Internal
Link or External Link. A hyperlink links a webpage with other webpages and external pages.
Hyperlinks Examples with code
<a href="">Link 1</a> ( Blank Link)

<a href="contact.html">Link 2</a> ( Relative link)
<a href="http://www.domain.com">Tech Altum</a> ( Absolute Link);
<a href="#body">Go To Top</a> ( Internal Link);
<a href="mailto:[email protected]">Mail Me</a> ( Mail Link);
<a href="tel:9090909090">Call Me</a> ( Click to call Link);
Hyperlink on a webpage
Link 1
Link 2
Tech Altum
Go To Top
Mail Me
Call Me
Properties of hyperlink
• Default Color is blue.

• After visit, color turns purple.
• Underlined
• Inline Level Element
• On mouseover, cursor changes to pointer.
• Turns red on active state( mouse keydown)
Hypertext Reference ( href="")

href attribute is used in an anchor tag to specify the URL( Uniform Resource Location) of the page link to
go. It can be a relative link, absolute link or an id.
Relative Link
A relative Link is used to link pages within same domain.
Example of Relative link
<a href="contact.html">Link 1</a> ( Relative link in same directory)

<a href="blog/blog1.html">Link 2</a> ( Relative link in child
directory)
<a href="../cart.html">Link 3</a> ( Relative link in parent directory)
Absolute Link
An Absolute Link is used to link pages from their Absolute Path. for exp
<a href="http://www.domain.com">Link</a> is an Absolute Link as it contains domain name and page.
Example of Absolute link?

<a href="http://www.domain.com">Link</a> ( Absolute
Link)
<a href="https://www.facebook.com/thetechaltum">Join us on Facebook</a> ( Our

facebook page)
Target attribute
A target attribute ( target="" ) is used to tell window where to open that particular link.
Various values of target
1. _self ( By Default) Open the link in same window

2. _blankopen link in new tab
3. name of frame( iframe or frame)Open the link on frame whose name is there
Values of target attribute
<iframe name="frame1" ></iframe>
<a href="http://www.techaltum.com" target="_self">_self</a><br>

<a href="http://www.techaltum.com" target="_blank">_blank</a><br>
<a href="webdesigning.html" target="frame1">frame1</a><br>
How HTML, CSS and Javascript are Different

Language Type Purpose
HTML Markup Language To create Structure of a webpage.
CSS Stylesheet Language To give style to the structure.
Javascript Scripting Language To create a user interactive page and validate inputs.
Static Websites
HTML and CSS can create a static website only. A Static website means a website with fixed contents,
where we cannot interact with the user, we cannot send form inputs to the server, we cannot create image
sliders, and tabs etc.
A static website code
<!DOCTYPE html>
<html>
<head>
<title>Static Webpage</title>
<style>
*{
margin:0px;
padding:0px;
}
.wrap{
width:960px;
height:auto;
border:1px solid red;
}
.header{
height:150px;
background:#333;
}
.nav{
height:50px;
background:#000;
}
.container{
background:#ccc;
}
.left{
width:30%;
height:200px;
float:left;
background:#333;
}
.right{
width:70%;
height:200px;
float:left;
}
.clear{
clear:both; // Clear Both will clear floating from both sides.
}
.footer{
height:80px;
background:#ccc;
}
</style>
<head>
<body>
<div class="wrap">
<div class="header"></div>
<div class="nav"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</div>
</div>
</body>
</html>

HTML Hyper Text Markup Language

Uploaded by

Copyright:

Available Formats

HTML Hyper Text Markup Language

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 Hyper Text Markup Language

Uploaded by

Copyright:

Available Formats

HTML Lecture Sheet

What is Web Designing

• HTML structural layer of a website, used to create content.

How to build a website using html

A Sample HTML Page

HTML Most frequently used Tag:

HTML Block Level Elements List

HTML Inline Elements

Structure of an HTML Tag

HTML TITLE Tag

<h1 align="left">TEXT Aligned Left</h1>

<font size="2" > Font with size 2</font>

<input type="text" size="10" >

Class Attribute Code

<p class="red" > Font with class red</p>

Font with class red

Font with class red

Font with id blue

<h2> Heading 2 </h1>

<h3> Heading 3 </h1>

<h4> Heading 4 </h1>

<h5> Heading 5 </h1>

<h6> Heading 6 </h1>

Image extensions for web

• Joint Photographic Gallery (jpg)

How to insert image in a webpage

<img src="logo.png" alt="alternate text of image" >

Attributes in img tag

Type of list in HTML

Create Unordered List

Unordered List with type "none"

Unordered List with type "square"

Unordered List with type "circle"

Nested Unordered List

An unordered list can have another child unordered list.

Default Ordered List

Default Ordered list with type 1

Ordered List with type "Roman"

to start an ordered list with roman characters, use type I or i.

Ordered list with uppercase roman

Ordered list with lowercase roman

Ordered List with type "Alphabet"

Ordered list with uppercase

Ordered list with lowercase

Ordered List starting from number more than 1

Ordered List starting from 10

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

Ordered List starting from X

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

How to use description list

To Design front end of a web application or website.

ORACLE, My SQL, and SQL Server

<dd>To Design front end of a web application or website.</dd>

<dd>ORACLE, My SQL, and SQL Server</dd>

What is HTML Form

Create HTML Form

form is build inside <form> tag. See the code below

<form action="" >