Html (1)

HTML
By
Dr.Smitha.P.S
Associate Professor
Velammal Engineering College

HTML
• HTML is a markup language for describing
web documents (web pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content

• Hypertext refers to the way in which Web
pages (HTML documents) are linked together.
Thus the link available on a webpage are
called Hypertext.
• As its name suggests, HTML is a Markup
Language which means you use HTML to
simply "mark up" a text document with tags
that tell a Web browser how to structure it to
display.

SMALL HTML DOCUMENT
• <html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

• The text between <html> and </html> describes
an HTML document
• The text between <head> and </head> provides
information about the document
• The text between <title> and </title> provides a
title for the document
• The text between <body> and </body> describes
the visible page content
• The text between <h1> and </h1> describes a
heading
• The text between <p> and </p> describes a
paragraph

• HTML Tags
• HTML tags are keywords (tag names) surrounded
by angle brackets:
• <tagname>content</tagname>
• HTML tags normally come in pairs like <p> and
</p>
• The first tag in a pair is the start tag, the second
tag is the end tag
• The end tag is written like the start tag, but with
a slash before the tag name
• The start tag is often called the opening tag. The
end tag is often called the closing tag.

HTML Page Structure
Below is a visualization of an HTML page structure:

HTML BASICS
• HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
OutPut
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

• HTML Paragraphs
• HTML paragraphs are defined with the <p>
tag.
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>

HTML Special characters
Character Entity reference
< &lt
> &gt
& &amp
“ &quot
‘ &apos
© &copy
ñ &ntilde
α &alpha
&forall

• HTML Attributes
• 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"

HTML-Relative URLs
• HTML Links
• HTML links are defined with the <a> tag.
<html>
<body>
<a href="http://www.yahoo.com">
This is a link</a>
</body>
</html>
• The link address is specified in the href attribute.
• Attributes are used to provide additional information about
HTML elements.
• HTML Links - The target Attribute
• The target attribute specifies where to open the linked
document.

HTML-Relative URLs
• HTML Images
• HTML images are defined with the <img> tag.
<html>
<body>
<img src=“x.jpg" width="104"
height="142"></body>
</html>
The alt attribute specifies an alternate text for
an image, if the image cannot be displayed.
<img src="wrongname.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">

HTML
<html>
<body>
<p>This is<br>a para<br>graph with line
breaks</p>
</body>
</html>
Output
This is
a para
graph with line breaks

• HTML Styling
• Every HTML element has a default style (background
color is white and text color is black).
• Changing the default style of an HTML element, can be
done with the style attribute.
• This example changes the default background color
from white to lightgrey:
• Example
• <body style="background-color:lightgrey">
<h1>This is a heading</h1>
</body>
• style="property:value"

• HTML Text Color
• The color property defines the text color to be
used for an HTML element:
• Example
• <h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>

• HTML Text Size
• The font-size property defines the text size to
be used for an HTML element:
• Example
• <h1 style="font-size:300%">This is a
heading</h1>
<p style="font-size:160%">This is a
paragraph.</p>

• HTML Text Alignment
• The text-align property defines the horizontal
text alignment for an HTML element:
• Example
• <h1 style="text-align:center">Centered
Heading</h1>

• HTML Fonts
• The font-family property defines the font to
be used for an HTML element:
• Example
• <h1 style="font-family:verdana">This is a
heading</h1>
<p style="font-family:courier">This is a
paragraph.</p>

HTML formatting tag
• The <pre> tag defines preformatted text.
• Text in a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks.
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
Tip: Use the <pre> element when displaying text with unusual
formatting, or some sort of computer code.

HTML
• <b> Defines bold text
• <em> Defines emphasized text
• <i> Defines a part of text in an alternate voice
• <small> Defines smaller text
• <strong> Defines important text
• <sub> Defines subscripted text
• <sup> Defines superscripted text
• <ins> Defines inserted text
• <del> Defines deleted text
Often <strong> renders as <b>, and <em> renders as <i>.
Coding
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
Output
My favorite color is blue red!

HTML formatting tag
• HTML also defines special elements, for defining text with a special
meaning.
• HTML uses elements like <b> and <i> for formatting output, like bold or
italic text.
• Formatting elements were designed to display special types of text:
• Bold text
• Important text
• Italic text
• Emphasized text
• Marked text
• Small text
• Deleted text
• Inserted text
• Subscripts
• Superscripts

HTML Font Style Elements
Element Font Used for Content
B Boldface
I Italic
Tt Monospace(“teletype:fixed-width
font)
Big Increased font size
small Decreased font size

<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p><b>This text is bold</b></p>
<p>My favorite color is <del>blue</del> red.</p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>

HTML formatting tags
• The <span> tag is used to group inline-elements in a document.
• The <span> tag provides no visual change by itself.
• The <span> tag provides a way to add a hook to a part of a text or a
part of a document.
<html>
<body>
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>
</body>
</html>
Output
My mother has blue eyes and my father has dark green eyes.

HTML formatting Tags
The <tt> tag defines teletype text.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><tt>This text is teletype text.</tt></p>
</body>
</html>

HTML5 is the fifth version of HTML. Many
elements are removed or modified from HTML5.

There are many HTML elements which have been modified or removed from
HTML5. Some of them are listed below:
Element In HTML5
<applet> Changed to <object>
<acronym> Changed to <abbr>
<dir> Changed to <ul>
<frameset> Removed
<frame> Removed
<noframes> Removed
<strike> No new tag. CSS is used for this
<big> No new tag. CSS is used for this
<basefont> No new tag. CSS is used for this
<font> No new tag. CSS is used for this
<center> No new tag. CSS is used for this
<tt> No new tag. CSS is used for this

• Many new elements are added in HTML5 like
nav, audio, figcaption, progress, command,
time, datalist, video, figure, meter, data,
section, time, aside, canvas, summary, rp, rt,
details, wbr, header, footer, keygen, embed,
article, hgroup, bdi, mark, output, source,
track, section, ruby and many more.

HTML
• HTML Tables
• Tables are defined with the <table> tag.
• 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 Example
• How the HTML code above looks in a browser:
Row1,cell1 Row1,cell2

HTML-TABLES
HTML Tables and the Border Attribute
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
• Header information in a table are defined with the <th> tag.
• All major browsers display the text in the <th> element as bold and centered.
• <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Output:
Header 1 Header2

• Cell padding specifies the space between the
cell content and its borders.
• The <caption> tag must be inserted
immediately after the <table> tag.
• The cellspacing attribute specifies the space,
in pixels, between cells.
• Border spacing specifies the space between
the cells.

HTML Styles - CSS
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work.
• It can control the layout of multiple web pages all at
once.
• Cascading Style Sheets (CSS) is used to format the
layout of a webpage.
• With CSS, control the color, font, the size of text, the
spacing between elements, how elements are
positioned and laid out, what background images or
background colors are to be used, different displays for
different devices and screen sizes, and much more

• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML
elements
• Internal - by using a <style> element in the
<head> section
• External - by using a <link> element to link to an
external CSS file
• The most common way to add CSS, is to keep the
styles in external CSS files.

Inline CSS
• An inline CSS is used to apply a unique style to a single
HTML element.
• An inline CSS uses the style attribute of an HTML
element.
• The following example sets the text color of the <h1>
element to blue, and the text color of the <p> element
to red:
• <h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
• An internal CSS is used to define a style for a
single HTML page.
• An internal CSS is defined in the <head> section
of an HTML page, within a <style> element.
• The following example sets the text color of ALL
the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red.
• In addition, the page will be displayed with a
"powderblue" background color:

• <!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>

External CSS
• An external style sheet is used to define the style for many HTML
pages.
• To use an external style sheet, add a link to it in the <head> section
of each HTML page:
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>

• The external style sheet can be written in any text editor.
• The file must not contain any HTML code, and must be saved with a
.css extension.
• Here is what the "styles.css" file looks like:
• "styles.css":
• body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

• To add borders, use the CSS border property:
• table, th, td {
border: 1px solid black;
}
• table, th, td {
border-collapse: collapse;
}
• the borders to collapse into one border, add CSS
border-collapse:

• table, th, td {
border-collapse: collapse;
}
th, td {
padding: 15px;
}
• table {
border-spacing: 5px;
}
• th {
text-align: left;
}

HTML Tables-cell spacing
• The cellspacing attribute specifies the space, in pixels, between cells.
• cellpadding attribute, which specifies the space between the cell wall and the cell content.
<html>
<body>
<p>Table without cellspacing:</p>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellspacing:</p>
<table border="1" cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>

HTML Tables-CellPadding
<html>
<body>
<p>Table without cellpadding:</p>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellpadding:</p>
<table border="1" cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
Pixels= The space between the cell wall and the cell content

Table with rowspan and colspan
<<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>

Table with Caption
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

HTML-LIST
• HTML Unordered Lists
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
• The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
• Coffee
• Milk
• HTML Ordered Lists
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
• The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
• How the HTML code above looks in a browser:
1.Coffee
2.Milk

Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

HTML-Nested List
A List can be nested.
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

HTML LIST-Definition
• The <dl> tag defines a definition list.
• The <dl> tag is used in conjunction with
<dt> (defines the item in the list) and <dd> (describes the item in the list).
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Output:

HTML-FORMS
• HTML Forms
• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form
can also contain select lists, textarea, fieldset, legend, and
label elements.
• The <form> tag is used to create an HTML form:
• <form>
.
input elements
.
</form>

HTML Form Tags
Element Type Attribute Control
Input Text Text input
Input Password Password input
Input Checkbox Checkbox
Input Radio Radio button
Input Submit Submit button
Input Image Graphical submit button
Input Reset Reset button
Input Button Push button(for use with scripts)
Input Hidden Nondisplayed control(stores server-
supplied information)
Input File File select
Button Submit Submit button with content(not an
empty element)
Button Reset Cancel button with content(not an
empty element)
Button Button Button with content but no
predefined action

HTML form Tags
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-
down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button

HTML Forms - The Input Element
• The most important form element is the <input> element.
• The <input> element is used to select 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.
• The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a
user can enter text into:

• <html>
• <body>
• <form>
• First name:<br>
• <input type="text" name="firstname">
• <br>
• Last name:<br>
• <input type="text" name="lastname">
• </form>
• <p>Note that the form itself is not visible.</p>
• <p>Also note that the default width of a text field is 20 characters.</p>
• </body>
• </html>

Password Field
• <input type="password"> defines a password field:
• <form>
Password: <input type="password" name="pwd">
</form>
Radio Buttons
• <input type="radio"> defines a radio button. Radio buttons let a user
select ONLY ONE of a limited number of choices:
• <form>
<input type="radio" name="sex" value="male“ checked >Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes
• <input type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.
• <form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Submit Button
• <input type="submit"> defines a submit button.
• A submit button is used to send form data to a
server.
• The data is sent to the page specified in the
form's action attribute.
• The file defined in the action attribute usually
does something with the received input:
• <form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

• <input type="submit"> defines a button for
submitting a form to a form-handler.
• The form-handler is typically a server page
with a script for processing input data.
• The form-handler is specified in the form's
action attribute:

• The Action Attribute
• The action attribute defines the action to be
performed when the form is submitted.
• The common way to submit a form to a server, is
by using a submit button.
• Normally, the form is submitted to a web page on
a web server.
• In the example above, a server-side script is
specified to handle the submitted form:
• <form action="action_page.php">
• If the action attribute is omitted, the action is set
to the current page.

• <!DOCTYPE html>
• <html>
• <body>
• First name:<br>
• <input type="text" name="firstname" value="Mickey">
• <br>
• Last name:<br>
• <input type="text" name="lastname" value="Mouse">
• <br><br>
• <input type="submit" value="Submit">
• </form>
• <p>If you click "Submit", the form-data will be sent to a page called
"action_page.php".</p>
• </body>
• </html>

• The Method Attribute
• The method attribute specifies the HTTP
method (GET or POST) to be used when
submitting the forms:
• <form action="action_page.php"
method="GET">
• or:
• <form action="action_page.php"
method="POST">

• If the form submission is passive (like a search
engine query), and without sensitive
information.
• GET is best suited to short amounts of data.
Size limitations are set in your browser.
• action_page.php?firstname=Mickey&lastnam
e=Mouse

• If the form is updating data, or includes
sensitive information (password).
• POST offers better security because the
submitted data is not visible in the page
address.

• The Name Attribute
• To be submitted correctly, each input field must have a
name attribute.
• This example will only submit the "Last name" input
field:
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
</form>

HTML forms-Lables
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male"
value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female"
value="female"><br>
</form>

HTML
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

HTML
<html>
<body>
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free
tutorials in all web development technologies.
</textarea>
</body>
</html>
Output
At w3schools.com you will learn how to make a
website. We offer free tutorials in all web
development technologies.

HTML
<html>
<body>
<button type="button" onclick="alert('Hello
world!')">Click Me!</button>
</body>
</html>
Output
Click Me!

<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
</body>
</html>
OutPut Name:
Email:
Date of birth:
Personalia

HTML-optgroup
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>

HTML Forms
<html>
<body>
<form >
Username: <input type="text" name="usrname"><br>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car
Select a file: <input type="file"
name="img">
<input type="hidden" name="country" value="Norway">
<input type="image" src=“rose.jpg " alt="Submit">
</form>
</body>
</html>

HTML FRAMES
• HTML frames are used to divide your browser
window into multiple sections where each
section can load a separate HTML document.
• A collection of frames in the browser window
is known as a frameset.
• The window is divided into frames in a similar
way the tables are organized: into rows and
columns.

HTML-Frames
• The <frameset> tag defines a frameset.
• The <frameset> element holds one or more
<frame> elements.
• Each <frame> element can hold a separate
document.
• The <frameset> element specifies HOW MANY
columns or rows there will be in the frameset,
and HOW MUCH percentage/pixels of space will
occupy each of them.
cols (pixels,%,*) Specifies the number and size of
columns in a frameset
rows (pixels,%,* ) Specifies the number and size
of rows in a frameset

HTML Frames
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

HTML Frames
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>

FRAME ATTRIBUTES
•<frame scrolling="auto|yes|no">
•<frame src="URL">
•<frame noresize="noresize"> The frame cannot be resized by the
user
•<frame name="text"> text - Specifies the name of the frame
•<frame marginwidth="pixels"> pixels -pecifies the left and right
margins of a frame
•<frame marginheight="pixels"> - The marginheight attribute
specifies the height between the content and the top and bottom of
the frame, in pixels.
•<frame frameborder="1|0">

Html (1)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html (1)

Similar to Html (1) (20)

More from smitha273566

More from smitha273566 (6)

Recently uploaded

Recently uploaded (20)

Html (1)