Scribd
Upload
17 views

HTML

Uploaded by

NANDANA M B
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

HTML

Uploaded by

NANDANA M B
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

HTML

Ms. Sangeetha J
Asst. Professor
St. Albert’s College (Autonomous)
HTML
HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages.

HTML is the combination of Hypertext and Markup language.

Hypertext defines the link between the web pages.

Markup language is used to define the text document within tag which
defines the structure of web pages 

HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the
first standard HTML specification which was published in 1995

HTML is called markup language because its tags tells the web browser how to display the content within tags.
HTML
HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

HTML elements are represented by tags

HTML tags label pieces of content such as "heading", "paragraph", "table",


and so on

Browsers do not display the HTML tags, but use them to render the
content of the page
Features of HTML
It is easy to learn and easy to use.

It is platform independent.

Images, video and audio can be added to a web page.

Hypertext can be added to text.

It is a markup language.
<html>

<head>
<title>

Document Title Goes Here

Structure of HTML </title>

</head>

<body>
...Document content and markup go here....

</body>

</html>
<html> …. </html> tag
The <html>tag delimits the beginning and the end of an
HTML document

It is also known as root of an inverted tree structure


containing the tags and content of a document
<head> …. </head> tag
The information in the head of an HTML document is
very important because it is used to describe or augment
the content of the document

The information contained within the <head>tag is


information about the page, which generally is referred to
as meta-information.
<title> ….. </title> tag
The most important head element is the
title element, which most browsers
display in a title bar at the top of the
browser window.

The document title is actually the only


tag required under traditional HTML
specifications and should occur as the first
element within the head element.
<body> ….. </body> tag
After the head section, the body of a document is delimited by
<body>and </body>.

Only one body element can appear per document. Because the
body element delimits the document itself, its attributes are
primarily used to effect change across the entire document,
such as setting background images, background colors, and link
and text color.
Simple Web Page
<html>

<head>

<title> My Page </title>

</head>

<body>

Welcome to my page

</body>

</html>
How to create an HTML page
Type the HTML code in text editors like Notepad,
TextEdit etc

Save the file with extension .html or .htm


HTML Elements
Html pages starts with some elements like <html>, <head>, <Body>.

Every elements start with < (less than sign) and ends with > (greater than sign)

All tags in HTML starts and  we have to close properly.


HTML Comments
The html comment tags are used to insert the comment in between the paragraph.

The browser will not read any line which are in written under the comment tags

Comments are inserted by using

<!- - Write your comments here - ->


<html>
Heading Tags <head>
<title>Heading Example</title>
Heading tags are used to add headings in </head>
the web page. <body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
HTML has six levels of headings, which
<h3>This is heading 3</h3>
use the elements <h1>, <h2>, <h3>, <h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h4>, <h5>, and <h6>. <h6>This is heading 6</h6>
</body>
<h1> defines the most important </html>
heading.

<h6> defines the least important


heading.
HTML Paragraph
A paragraph always starts on a new line, and
browsers automatically add some white space (a
margin) before and after a paragraph.

The HTML <p> element defines a paragraph.


<html>
<head>
<title>Heading Example</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text formatting
Formatting elements were designed to display special types of text.

The various elements include

<b> ….. </b> bold

<strong> ….. </strong> Important text

<i> …… </i> Italic text

<em> -….. </em> Emphasized text

<u> ……. </u> Underlined Text


HTML Text formatting
<mark> ….. </mark> Marked text (Highlighted)

<small> ….. </small> Smaller text

<del> …. </del> Deleted text (Striked text)

<ins> ….. </ins> Inserted text

<sub> ….. </sub> Subscript text

<sup> ….. </sup> Superscript text


HTML Attributes
HTML attributes provide additional information about HTML elements.

Attributes are always specified in the start tag

Attributes usually come in name/value pairs like: name="value“


Attributes of <body> tag
bgcolor
It determines the background color of the web page
<body bgcolor=“color”>
<body bgcolor=“blue”>
background
It determines the background image for the document. 
<body background=“url”>
alink
It defines the color of the active link in a document. 
<body alink=“color”>
Attributes of <body> tag
text

It determines the color of the text in the document

<body text=“color”>

link

It determines the color of the unvisited link. . 


<body link=“color”>
HTML Fonts
The <font> tag is used to add fonts in an HTML page

The font tag is having three attributes called size, color, and face to customize your
fonts.

Face attribute is used to specify the name of the font

<font face = "Times New Roman“> Times New Roman</font>

Color attribute is used to change the color of the font

<font face = "Times New Roman“ color=“yellow”> Times New Roman</font>


HTML Fonts
The size attribute is used to change the size of the font

<font face = "Times New Roman“ color=“yellow” size=“5”> Times New


Roman</font>
Empty Tags in HTML
Empty tags are HTML elements having no content

Empty elements do not have an end tag

Eg : <br> tag is used to add a line break in HTML document

<hr> tag is used to insert a horizontal rule in HTML document


Questions
1) Write a codes to create a web page to display the message “Welcome to my web page”

having the document title “My Page” (background color : blue)

2) Write a codes to create a web page using text formatting tags (title – text formatting


tags in HTML)

3) Write a code to create a web page using font color, font face, font face and background
color (Title of the page – font attributes)

4) Write a codes to create a web page using Paragraph tags such as P tag and BR tag

(write 2 paragraphs about HTML. In each paragraph, there will be 3 sentences. )


Lists in HTML
A list is a record of short pieces of information, such as people’s names, usually written
or printed with a single thing on each line and ordered in a way that makes a particular
thing easy to find.

HTML Lists are used to specify lists of information. 

The various lists include


Ordered List or Numbered List

Unordered List or Bulleted List

Description List or Definition List


Ordered List (<ol> ……. </ol>
In the ordered HTML lists, all the list items
are marked with numbers by default. <ol>  
 <li>Aries</li>  
It is known as numbered list also.  <li>Bingo</li>  
 <li>Leo</li>  
The ordered list starts with <ol> tag  <li>Oracle</li>  
</ol>  
The list items start with <li> tag.
1.Aries
2.Bingo
3.Leo
4.Oracle
Unordered List (<ul> ……. </ul>)
In HTML Unordered list, all the list items
are marked with bullets. <ul>
<li>Aries</li>
It is also known as bulleted list also. <li>Bingo</li>
<li>Leo</li>
The Unordered list starts with <ul> tag and <li>Oracle</li>
</ul>
list items start with the <li> tag. •Aries
•Bingo
•Leo
•Oracle
Type attribute
The type attribute for <ul> tag to specify the type of bullet you like.

By default, it is a disc. Following are the possible options −

<ul type = "square">

<ul type = "disc">

<ul type = "circle">


Type attribute
The type attribute for <ol> tag to specify the type of numbering you like.

By default, it is a number. Following are the possible options −

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.

<ol type = "i"> - Lower-Case Numerals.

<ol type = "A"> - Upper-Case Letters.

<ol type = "a"> - Lower-Case Letters.


Start attribute
The start attribute for <ol> tag to specify the starting point of numbering you need.

Following are the possible options 

<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.

<ol type = "i" start = "4"> - Numerals starts with iv.

<ol type = "a" start = "4"> - Letters starts with d.

<ol type = "A" start = "4"> - Letters starts with D.


Definition List (<dl> ……. </dl>)
Definition lists where entries are listed like in a dictionary or encyclopedia.

The definition list is the ideal way to present a glossary, list of terms, or other
name/value list.

Definition List makes use of following three tags.


<dl> − Defines the start of the list

<dt> − A term (Definition Term)

<dd> − Term definition

</dl> − Defines the end of the list


Definition List (<dl> ……. </dl>)
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
HTML
</html>
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
Text Links (Hyperlink)
The HTML anchor tag (<a>) 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 href attribute is used to define the address of the file to be linked
Text Links (Hyperlink)
The  syntax is

<a href = "..........."> Link Text </a>


<html>
<a href="second.html">Click for Second Page</a>   <head>
<title> My Page </title>
</head>
<body>
<a href=“a1.html”> Click here </a>
</body>
</html>
Image Links
<img> tag is used to insert image into an HTML document.

HTML img tag is an empty tag that contains attributes only, closing tags are
not used in HTML image element.
Attributes of <img>
src

It is a necessary attribute that describes the source or path of the image. It


instructs the browser where to look for the image on the server.

Alt

The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describe the image in words.
Attributes of <img>
Width

It is an optional attribute which is used to specify the width to display the image.

Height

It is an optional attribute which is used to specify the height of the image

Eg : <img src="good_morning.jpg" alt="Good Morning Friends">  
Tables in HTML
HTML <table> tag is used to display data in tabular form

Each table row is defined with a <tr> tag.

Each table header is defined with a <th> tag.

Each table data/cell is defined with a <td> tag.


<html>
<head>
Tables in HTML <title>HTML Tables</title>
</head>
<body>
<table border = "1“ bordercolor=“red”>
<tr>
Fruits Nos <th>Fruits </th>
Apple 100 <th>Nos</th>
Mango 200 </tr>
<tr>
<td>Apple</td>
<td>100</td>
</tr>
<tr>
<td>Mango</td>
<td>200</td>
</tr>
</table>
</body>
</html>
Table Backgrounds
Bgcolor

Used to set the background color of the table

Background

Used to set the background image

Bordercolor

Used to set the border color of the table


Cell Padding Attribute
Cellpadding Attribute is used to specify the space between the cell
content and cell wall.

The syntax is

<table cellpadding=“value">

Eg: <table border="1" cellpadding="15">


Cell Spacing Attribute
Cellspacing Attribute is used to specify the spacing between table cells.

The syntax is

<table cellspacing=“value">

Eg: <table border="1" cellspacing="15">


Rowspan
The HTML rowspan attribute define the number of rows a cell of a
table should span in an HTML document.

It can only be applied on <td> or <th> HTML element.


Rowspan
<table border="2"> </tr>

<tr> <tr>

<th>Name</th> <td rowspan="2">Elon</td>

<th>Language</th> <td>Germany</td>

</tr> </tr>

<tr> <tr>

<td>John</td> <td>French</td>

<td>English</td> </tr>

</table>
Colspan
The colspan attribute in HTML is used to set the number of columns a
cell should span in a table.

Use the colspan attribute on the <td> or <th> element


Colspan
<table> <tr>
<tr> <td>Services</td>
<th>Domains</th> <td>100000</td>
<th>Cost</th> </tr>
</tr> <tr>
<tr> <td>Support</td>
<td>Product Development</td> <td>100000</td>
<td>500000</td> </tr>
</tr> <tr>
<tr> <td>Maintenance</td>
<td>Marketing</td> <td>100000</td>
<td>500000</td> </tr>
</tr> <tr>
<tr> <td colspan="2">Total Budget = INR 1300000</td>
<td>Marketing</td> </tr>
<td>500000</td> </table>
</tr>
Marquee
The HTML <marquee> tag is used for scrolling piece of text or image
displayed either horizontally across or vertically down your web site page
depending on the settings.
Attributes of <marquee> tag
Attribute Value Description

Behavior scroll Defines the type of


slide scrolling.
alternate
Direction up Defines the direction of
down scrolling the content.
left
right
Example - <marquee> tag
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction = "up">The direction of text will be from bottom to top.</marquee>
</body>

</html>
HTML Forms
An HTML form is used to collect user input

HTML form is a section of a document which contains controls such as text


fields, password fields, checkboxes, radio buttons, submit button, menus etc.

HTML form facilitates the user to enter data that is to be sent to the server
for processing such as name, email address, password, phone number, etc. .

<form> tag is used to create an HTML form


HTML Form Attributes
Action
The action attribute defines the action to be performed when the form is submitted.

Method
The method attribute specifies the HTTP method to be used when submitting the form
data.
The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
The default HTTP method when submitting form data is GET.
Eg : <form action="action_page.html" method="get">
HTML Form Attributes
GET

Get method Appends the form data to the URL, in name/value pairs

POST

POST method Appends the form data inside the body of the HTTP request
(the submitted form data is not shown in the URL)
HTML Form Elements
Text input

Check Box

Radio Box

Select Box

File Select box

Submit and Reset Button


Text Input Controls
There are three types of text input used on forms 

Single-line text input controls 

Password input controls 

Multi-line text input controls 


Text Input Controls
Single-line text input controls 

This control is used for items that


<form >
require only one line of user input, First name: <input type = "text" name = "first_name" />
<br>
such as search boxes or names. Last name: <input type = "text" name = "last_name" />
</form>
They are created using
HTML <input> tag.
Attributes
of <input> tag
Text Input Controls
Password input controls − <form >
User ID : <input type = "text" name = "user_id" />
This is also a single-line text <br>
Password: <input type = "password" name = "password"
input but it masks the />
</form>
character as soon as a user
enters it.

They are also created using


HTMl <input> tag and
attribute is set to password
Attributes
Text Input Controls
Multi-line text input controls 
<form>
Description : <br />
This is used when the user is required
<textarea rows = "5" cols = "50" name =
"description">
to give details that may be longer than
Enter description here...
</textarea>
a single sentence.
</form>

Multi-line input controls are created


using HTML <textarea> tag.
Attributes
Check Box Control
Checkboxes are used when more than
one option is required to be selected.

They are also created using HTML


<input> tag but type attribute is set
to checkbox.
<form>
<input type = "checkbox" name = "maths" value = "on">
Maths
<input type = "checkbox" name = "physics" value = "on">
Physics
</form>
Check Box Control Attributes
Radio Button Control
Radio buttons are used when out of
many options, just one option is required
to be selected. They are also created
using HTML <input> tag but type
attribute is set to radio.
< <form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
Radio Button Control - Attributes
Select Box Control
A select box, also called drop down box
which provides option to list down
<form>
various options in the form of drop down <select name = "dropdown">
<option value = "Maths" selected>Maths</option>
list, from where a user can select one or <option value = "Physics">Physics</option>
</select>
more options. </form>
Select - Attributes
<option> tag - Attributes
File Upload Box
If you want to allow a user to upload a
file to your web site, you will need to use
<form>
a file upload box, also known as a file <input type = "file" name = "fileupload" accept = "image/*"
</form>
select box. This is also created using the
<input> element but type attribute is set
to file.
File Upload Box - Attributes

You might also like