Scribd
Upload
3 views24 pages

Unit 1

The document provides an overview of HTML, its structure, and various tags used for formatting web pages. It explains the significance of hyperlinks in HTML, detailing their syntax and types, including text and image hyperlinks. Additionally, it covers the evolution of HTML versions and the basic components of an HTML document, such as the head and body sections.

Uploaded by

GREESHMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views24 pages

Unit 1

The document provides an overview of HTML, its structure, and various tags used for formatting web pages. It explains the significance of hyperlinks in HTML, detailing their syntax and types, including text and image hyperlinks. Additionally, it covers the evolution of HTML versions and the basic components of an HTML document, such as the head and body sections.

Uploaded by

GREESHMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

UNIT –I

HTML: Basic HTML, Document body, Text, Hyperlinks, adding more formatting tags, Lists, Tables
and images.
More HTML: Multimedia objects, Frames, Forms towards interactive, HTML document heading detail

What is Web Technology?


Web technology refers to the means by which computers communicate with each other using markup
languages and multimedia packages. It gives us a way to interact with hosted information, like websites. Web
technology involves the use of hypertext markup language (HTML) and cascading style sheets (CSS).

Introduction of HTML:-

HTML stands for Hypertext Markup Language, and it is the most widely used language to design Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link
available on a webpage is 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.
Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.
Versions of HTML:-
1.HTML – 1991
2.HTML2 – 1995
3.HTML3 – 1997
4.HMTL4 – 1999
5.XHTML – 2000
6.HTML5 – 2014(latest version of html)

HTML Tags:-
1. HTML tags are used to mark-up HTML elements.
2. HTML tags are surrounded by two character < and >.
3. The surrounding characters are called angle brackets.
4. HTML tags normally come in pairs like <b> and </b>
5. The first tag in a pair is the start tag, and second tag is end tag.
6.The text between the start and end tags is the element content.
7. HTML tags are not case sensitive i.e., <b> means the same as <B>.
1.Structure of HTML:-
An HTML document has two main parts: the head and the body. But firstly every HTML document should start
by declaring that it is an HTML document.
These tags are of the form:
<html>
Should appear at the beginning of your document.
</html>
Should appear at the end of your document.

Head of an HTML Document:-


The HEAD of an HTML document is where information (which might be ignored by some Web browsers), such
as the document's title, can be placed. There are several elements that can be referenced in the HEAD of a
document but we will concentrate on the document's title. (The document's title appears as the viewing window's
title on browsers such as Internet Explorer and Netscape.)
The region associated with the HEAD of a document should be declared using the following HTML tags:
<head>
Should appear after the <html> definition.
</head>
Should appear after any HEADer text.
A typical entry in the HEAD of a document would be:
<title>
Title of the document
</title>
Body of an HTML Document:-
The BODY of an HTML document is where all the information you wish to view must appear. The text must be
carefully marked-up, paragraphs must begin with the <p>marker and the end of each paragraph must be clearly
marked using the HTML tag </p>.
Web browsers are, generally speaking, very robust. That is, they will always show some presentation of the text -
albeit the wrong or unintended layout. (See what the ASCII text file example.txt looks like if it is saved
asexample.html.)
The region associated with the BODY of a document should be declared using the following HTML tags:
<body>
Should appear after the </head> definition.
</body>
Should appear after the document's text but before the </html> tag.
An HTML document can be as freely formatted as you wish. The ends of words and sentences are indicated by
spaces. It doesn't matter how many spaces you use; one is as good as 100! The end of lines counts as one space.
Lines can be left broken in odd places and your local Web viewer will join them together into one flowing
paragraph.

Note: HTML tags should always be nested and never over-lapping. Most HTML tags are like brackets - they
form pairs; and the various pairs must always match. For example, the brackets: [(< and >)] match; whereas the
grouping: [(< and )]> form a mis-match!
Example HTML Document
The following text should be typed in to a local file on a system which is equipped with a Web browser.
<html>
<head>
<title>
A Simple HTML Document
</title>
</head>
<body>
<p>This is a very simple HTML document</p>
<p>It only has two paragraphs</p>
</body>
</html>
When authoring a Web/HTML document there are several stages which will be repeated time and time again.
1. Using a local editor (or word processor) create the HTML file.
2. View the local file by using the Open file... option on the File menu.
3. If you see any errors, go back to (1) and repeat the exercise. Note: most Web viewers will store
previously viewed pages and sometimes gives the impression that corrections to the original HTML
documents have not been made. Always Reload HTML documents after they have been edited.
If there are no errors in your typing etc. the above tags should be interpreted as:

This is a very simple HTML document


It only has two paragraphs

The document's title will appear as the viewing windows name and the text will appear in the default font for
your browser, which is usually a Times Roman typeface with font size 12point.

2.TEXT FORMATTING TAGS:-

The following HTML tags are used to format the appearance of the text on your web page. This can
jazz( make different) up the look of the web page. However, too much variety in the text formatting can also
look displeasing.

Some of text formatting tags are listed below

1. Heading:- There are 6 levels of headings available, from h1 for the largest and most important heading ,
down to h6 for the smallest heading.
Syntax:- <hi>----------------</hi> where i=1,2,3,4,5,6
Ex:- <h1>Heading 1</h1> //The first heading tags

2. Paragraph tag:- It represents a paragraph of text. Paragraphs are usually represented in visual media as
blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.
Syntax:- <p [align=”left” | “center” | “right”]>The text</p>
Ex:- 1. <p>The para</p> 2. <p align=”right”>The right para </p>

3.Bold:- The text in between the tags will be bold, and stand out against text around it, the same as in a word
processor.
Syntax:- <b>---</b> Example:- <b>The text is in Bold </b>
4.Italic:- Also working the same way as a word processor, italics displays the text at a slight angle.
Syntax:- <i>------</i> Example:- <i>The text is in italic</i>

5.Underline:-It displays the text with underlined( the same way as a word processor).
Syntax:-<u>------</u> Example:- <u>The text to be underlined</u>

6.Preformatted text:- Any text between the pre tags, including spaces, carriage returns and punctuation, will
appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)
Syntax:- <pre>------</pre> Example:- <pre>Wel
C ome </pre>

7. center:- A useful tag, as it says, it makes everything in between the tags center(in the middle of the page).
Syntax:- <center>-------</center> Example:- <center>The text display in center.</center>

8. Strike-out:- Puts a line right through the center of the text, crossing it out. Often used to show that text is old
and no longer relevant.
Syntax:- <strike>--------</strike> Example:- <strike>The text is striked</strike>

9. Superscritpt:- Superscript text appears half a character above the normal line, and is sometimes rendered in a
smaller font(like 2 10 = 1024).
Syntax:- <sup>-----</sup> Example:- 2 <sup> 10 </sup> = 1024

10. Subscript:- Subscript text appears half a character below the normal line, and is sometimes rendered in a
smaller font( like H2O).
Syntax:- <sub>-------</sub> Example:- H <sub> 2 </sub> O

11.Big:- This tag makes the text size bigger in the HTML document.
Syntax:- <big>--------</big> Example:- <big>The text is in Big </big>

12. Small:- This tag makes the text size smaller in the HTML document.
Syntax:- <small>--------</small> Example:- <small>The text is in small</small>

13.mark:- This tag is used to highlight the text within the tag.
Syntax:- <mark>-------</mark> Example:- <mark>important</mark>

14.Emphasis:- This tag marks text that has stress emphasis which traditionally means that the text is displayed
in italics by the browser.
Syntax:-<em>----</em> Example:- <em>The text is emphasized</em>

15.Strong:- It indicates that its contents have strong importance, seriousness, or urgency. Browsers typically
render the contents in bold type.
Syntax:- <strong>----</strong> Example:- <strong>The text is strong</strong>

16.insert:- The HTML <ins> element represents a range of text that has been added to a document.
Syntax:- <ins>-------</ins> Example:- <ins>The new text is inserted</ins>

17.delete:- The HTML <del> element represents a range of text that has been deleted from a document.
Syntax:- <del>--------</del> Example:- <del>The text is deleted </del>
18.Division:- The <div> tag defines a division or a section in an HTML document. The <div> tag is used to
group block-elements to format them with CSS.
Syntax:- <div>----------</div> Example:- <div>The text is divided from the sentence</div>

19.font:- The font tag can be used to display the text in the specified font type/face, size and color.
Syntax:- < font face=”name” size=”value” color=”name”>-------</font>
Example:- <font face=”Times New Roman” size=”22” color=”Green”>The TEXT</font>

20. <xmp> :- The HTML Element (<xmp>) renders text between the start and end tags without interpreting the
HTML in between and using a monospaced font.
Syntax:- <xmp>------------</xmp> Example:- <xmp> <p>The para</p> <b>The bold </b> </xmp>

Example:-

<html> Output:-
<head>
<title>Text Formatting</title>
</head> Text Formatting
<body> The Text is
<h3 align="center"><b><u>Text Formatting</u></b></h3>
The Text is <p>paragraph</p><br> paragraph
The Text is <pre>pre
formatted</pre><br>
The Text is <b>bold</b><br>
The Text is
The Text is <i>italic</i><br>
The Text is <u>underline</u><br> pre
The Text is <big>big</big><br>
The Text is <small>small</small><br> formatted
The Text is <strong>strong</strong><br>
The Text is <h1>heading1</h1><br> The Text is bold
The Text is <div>div</div><br>
The Text is italic
The Text is <em>emphasis</em><br>
The Text is <strike>strike</strike><br> The Text is underline
</body> The Text is big
</html> The Text is small
The Text is strong
The Text is

heading1

The Text is

div

The Text is emphasis


The Text is strike
3.HYPERLINK:-

The Hyperlinks are the essence of HTML. They are power and flexibility of HTML
comes from the simple method it uses to link documents together. It’s marked text that is the start and/or
destination of a hypertext link.
HTML uses the <a>(anchor) tag to create a link to another document. The anchor tag is used to create
hyperlinks in the HTML document. The term “anchor” is used because it indicates the static posting of a
hyperlink.
Syntax:- <a href = “URL”>Message/Graphic</a>

The three basic parts of a hyperlink are:


1.The beginning and ending tag pair i.e., <a>…….</a>
2.The href (hyperlink reference) attribute that specifies the URL of the page to be loaded when the hyperlink is
selected.
3.The text or graphic that appears on-screen as the active link.

Note:-
We have used target attribute in anchor tag itself.This attribute is used to specify the location where linked
document is opened. Following are the possible options −
1.target = blank (Opens the linked document in a new window or tab).
2.target = self (Opens the linked document in the same frame).
3.target = parent (Opens the linked document in the parent frame).
4.target = top (Opens the linked document in the full body of the window).
5.target = framename (Opens the linked document in a named framename).
Syntax: <a href = “URL” target = “blank” | ”self” | “parent” |“top” | “framename”>Message/Graphixa</a>

Types of Hyperlink:- We can use the hyperlink by the following types.


1.Text Hyperlink
2.Image Hyperlink
3.Playing audio/video files hyperlink and
4.Target within the same document.

1.Text Hyperlink:- A string of text that point to another web page or document is called text hyperlink. When
the hyperlink is selected, another web page is requested, retrieved and displayed by the browser.
Consider following example,
languages.html
TextHyperlink.html
<html>
<html> <head>
<head> <title>Hyperlink<title>
<title>Hyperlink<title> </head>
</head> <body>
<body> To design a web page we should learn designing
<a href=”languages.html”>Web page</a> languages like html,css,javascript etc..
</body> </body>
</html> </html>
In the above example, if a user run the TextHyperlink document and clicks on the text Web page, the document
languages.html will be loaded.
2. Image Hyperlink:- The principles behind creating a image hyperlink are the same as for creating a text
hyperlink. This hyperlink consists of a single image.

ImageHyperlink.html imagedetail.html

<html> <html>
<head> <head>
<title>Hyperlink<title> <title>Hyperlink<title>
</head> </head>
<body> <body>
<a href=”imagedetail.html” target = “blank” ><img You have clicked an image. It is type
src=”penguins.jpg” alt=”penguins image” height = ”300” emperor penguin.
width = “300”></a> </body>
</body> </html>
<.html>

If the user click an image, it load the imagedetail.html document as shown in the above coding.
Here, we included target attribute as blank, page loaded in new window or tab.

3.Playing audio/video files hyperlink:- Using HTML script we can play the both audio and video files, the
simplest way to play file using hyperlink are shown in below example,

MultimediaHyperlink.html
<html>
<head>
<title>Multimedia Hyperlink<title>
</head>
<body>
<a href=”kalimba.mp3”>Click to play audio</a> <br>
<a href = “wildlife.mp4”>Click to play video</a>
</body>
</html>
If the user run the above coding, it show two link. If user click any one of file it runs the corresponding file
through hyperlink.
Note: The media file should be exist in particular link. Otherwise it shows file is not found.

4.Target within the same document:- Sometimes, we need to open the webpage in the same web document,
then we can mention the target element by including “id” attributes, which can be used to identify an “href”.
Here, illustration as ID for href tag
Example:-
<html>
<head>
<title>Hyperlink within same document</title> In the above example, if user click Book2
</head> link, it automatically hyperlink to Book2
<body> information which is in same document
<a href="#b2">click for Book2</a>
<h3>Book1</h3>
Book1 for Maths students
<h3 id="b2">Book2</h3>
Book2 for Computer Science students
</body></html>
4.Lists:-

Introduction:- Lists are used to group together related pieces of information so they are clearly associated with
each other and easy to read. In modern web development, lists are frequently used for navigation as well as
general content.
Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-
maintain document. They are also useful because they provide specialized elements to which you can attach CSS
styles.
Types:- There are three types of lists in HTML that are listed below

1. Ordered list – used to group a set of related items in a specific order


2. Unordered list – used to group a set of related items in no particular order
3. Definition/Description list – used to display name/value pairs such as terms and definitions

1.Ordered List:- An ordered list typically is a numbered list of items. It gives you the ability to control the
sequence number - to continue where the previous list left off, or to start at a particular number. The numbering
style is left to associated style sheets, e.g. whether nested lists contribute to a compound item number, e.g. "3.1.5
However, to create an ordered list, the <ol> tag is used. We’re also going to change the text of the list items <li>
tag to make it clear that these are items that need to appear in a specific sequential order.

The type attribute:- The type attribute of the <ol> tag, defines the type of the list item marker.
Type Description
type = “1” The list items will be numberd with numbers(default)
type = “A” The list items will be numbered with uppercase letters
type = “a” The list items will be numbered with lowercase letters
type = “I” The list items will be numberd with uppercase roman numbers
type = “i” The list items will be numberd with lowercase roman numbers

Syntax:- <ol [type=”1 | “A” | “a” | “I” | “I”]>--------</ol>

Example:-
<html> Output:-
<head> The products made by milk are
<title>Lists</title> 1.Curd
</head> 2.Butter Milk
<body> 3.Ghee
The products made by milk are
<ol>
Here, set attribute type = “A”, then list out it in UpperCase
<li>Curd</li>
<li>Butter Milk</li> <ol type=”A”> Output:-
<li>Ghee</li> <li>Curd</li> The products made by milk are
</ol> <li>Butter Milk<li> A.Curd
</body> <li>Ghee</li> B.Butter Milk
</html> </ol> C.Ghee
You can also set attribute for ordered list as start = “value” i.e., start = “10” then,

<ol start = “10”> Output:-


<li>Curd</li> 10.Curd
<li>Butter Milk</li> 11.Butter Milk
<li>Ghee</li> 12.Ghee
</ol>

2.Unordered List:-
An unordered list created using the <ul> tag, and each list item starts with the <li> tag.
The list items in unordered lists are marked with bullets (small black circles), by default.
The following are the bulleted in unordered list
Type Description
type = “disk” The list items will be in disk(by default)
type = “circle” The list items will be in circle
type = “square” The list items will be in square

syntax:- <ul [type = “disk” | “circle” | “square”]>---------</ul>

Example:-
<html>
Output:
<head>
<title>Unordered list</title> Some of Operating Systems are listed below
</head> • Unix
<body> • Linux
• Dos
Some of Operating Systems are listed below
• Windows
<ul> • Macintosh
Here attribute type = “square”
<li>Unix</li>
<li>Linux</li>
Some of Operating Systems are listed below
<li>Dos</li>
<ul type = “square”>
<li>Windows</li>
<li>Unix</li>
<li>Macintosh</li>
<li>Linux</li>
</ul>
<li>Dos</li>
</body>
<li>Windows</li>
</html>
<li>Macintosh</li>
</ul>

Output:-
Some of Operating Systems are listed
below
▪ Unix
▪ Linux
▪ Dos
▪ Windows
▪ Macintosh
3.Definition/Description List:-

A definition list is a list of items, with a description of each item. The definition list created using <dl> tag. The
<dl> tag is used in conjunction with <dt> - defines the item in the list, and <dd> describe the item in the list.

Here, the tag terms stands as <dl> - definition list, <dt> - definition term, <dd> - definition data
Syntax:-
<dl>
<dt>TERM</dt>
<dd>Defintion statement</dd>
</dl>

Example:-

<html> Output:-
<head>
HTML
<title>Definition List</title>
HTML stands for Hypertext Markup
</head> Language,used to design web page
<body> CSS
<dl> CSS stands for Cascading Style sheet,used
<dt>HTML</dt> for presentation for web page
<dd>HTML stands for Hypertext Markup
Language,used to design web page</dd>
</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style sheet,used for
presentation for web page</dd>
</dl>
</body>
</html>

5.TABLE:-

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Table Heading:-
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent
actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use
<th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.
Cellpadding and Cellspacing Attributes:-
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your
table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance
between cell borders and the content within a cell.

Colspan and Rowspan Attributes:-


You will use colspan attribute if you want to merge two or more columns into a single column. Similar way
you will use rowspan if you want to merge two or more rows.

Tables Backgrounds:-
You can set table background using one of the following two ways −
• bgcolor attribute − You can set background color for whole table or just for one cell.
• background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use
these attributes.
Table Height and Width:-
You can set a table width and height using width and height attributes. You can specify table width or height in
terms of pixels or in terms of percentage of available screen area.

Table Caption:-
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag
is deprecated in newer version of HTML/XHTML.

Table Header, Body, and Footer:-


Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to
headers and footers in a word-processed document that remain the same for every page, while the body is the
main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
• <thead> − to create a separate table header.
• <tbody> − to indicate the main body of the table.
• <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that
<thead> and <tfoot> tags should appear before <tbody>
Nested Tables:-
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag
<td>.
Example:-
Output:-
<html> <tr align=”center”>
<head> <td>2</td> Exam Marks
<title>Table</title> <td>Kumar</td>
S.No Name Mark1 Mark2 Mark3 Total
</head> <td>75</td>
<table border="1" align="center"> <td>62</td> 1 Ram 45 70 39 154
<caption>Exam Marks</caption> <td>71</td> 2 Kumar 75 62 71 208
<tr> <td>208</td> 3 sita 49 60 64 173
<th>S.No</td> </tr>
<th>Name</td>
<th>Mark1</td> <tr align=”center”>
<th>Mark2</td> <td>3</td>
<th>Mark3</td> <td>sita</td>
<th>Total</td> <td>49</td>
</tr> <td>60</td>
<td>64</td>
<tr align=”center”> <td>173</td>
<td>1</td> </tr>
<td>Ram</td> </table>
<td>45</td> </body>
<td>70</td> </html>
<td>39</td>
<td>154</td>
</tr>

Colspan and Rowspan:-

COLSPAN creates a cell that "spans" across a number of cells in a row. This makes the cell longer across, not
down, since it is crossing COLumns, not ROWs.

Syntax:- <td colspan=”number”>

Example:-
<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2 row 1 cell 1. row 1 cell 2
</td>
</tr> row 2 cell 1
<tr>
<td colspan="2">
row 2 cell 1
</td>
</tr>
</table>
ROWSPAN is very similar to COLSPAN, but it works in the opposite direction. While COLSPAN goes across
columns, ROWSPAN goes across rows. Taking the simple 2 row 2 column table from above, here is an example
with ROWSPAN in place.
Syntax:- <td rowspan="number">
Example:-
<table>
<tr>
<td rowspan="2">
row 1 cell 1
</td>
<td>
row 1 cell 2 row 1 cell 2
</td> row 1 cell 1
</tr> row 2 cell 2
<tr>
<td>
row 2 cell 2
</td>
</tr>
</table>

Cellspacing and Cellpadding:-


CELLSPACING is the pixel width between the individual data cells in the TABLE. (The thickness of the lines
makeing the TABLE grid). The default is zero. If the BORDER is set at 0, the CELLSPACING lines will be
invisible.

<table border="1" cellspacing="5">


<tr>
<td>some text</td>
<td>some text</td> some text some text
</tr><tr>
<td>some text</td> some text some text
<td>some text</td>
</tr>
</table>

CELLPADDING is the pixel space between the cell contents and the cell border. The default for this property is
also zero. This feature is not used often, but sometimes comes in handy when you have your borders turned on
and you want the contents to be "away" from the border a bit for easy viewing. CELLPADDING is invisible,
even with the BORDER property turned on.

<table border="1" cellpadding="10">


<tr>
<td>some text</td>
<td>some text</td> some text some text
</tr><tr>
<td>some text</td> some text some text
<td>some text</td>
</tr>
</table>
Nesting Table:
Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables
layouts, which are both visually interesting and have the potential of introducing errors depends on its nesting
nature.

Tables within Tables:

Nested Table always need to be placed between < td > ... < /td > tags of the outer container Table. You can
format nested tables as you would format any other HTML Table.
Example:-
Output:-
<html> <tr>
<head> <td>C</td>
<title>Nesting Table</title> <td>D</td>
Nested
</head> </tr> AB
<body> </table> 2
C D
<table border="1"align="center">
<caption>Nested </caption> </td> 3 4
<tr> <td>2</td>
<td> </tr>
<table border="1">
<tr> <tr>
<td>A</td> <td>3</td>
<td>B</td> <td>4</td>
</tr> </tr>

</table>
6.Image:- </body>
</html>and HTML's multimedia features allow you to include images,
The web is not just about text, its multi-media
audio clips, video clips, and other multimedia element in the web pages.

Inserting Images in HTML Documents

The <img> tag is used to insert images in HTML documents. It is an empty element and contains attributes only.
The syntax of <img> tag can be given with:

Syntax|:- <img src="url/path" alt="some_text">

There is no close tag for image.

The Src Attribute of Images:-

Every image has a src attribute (src stands for source). The src attribute tells the browser where to find the image
you want to display.
The URL of the image provided as the value of src attribute points to the location where the image is stored.
For Example, An image named "Tulips.jpg", located in the "images" directory on URL: Images/Tulips.jpg

<img src="images/Tulips.jpg" alt="Yellow Flower">

Here, .jpg is the extension of the image file.(There must be extension for all files) .Some of extension for image
files are .jpg, png, bmp and gif etc.,.
The Alt Attribute of Images
The alt attribute is the alternative description for an image, if the image cannot be displayed. The value of the alt
attribute is an author-defined text.
<img src="images/Tulips.jpg" alt="Yellow Flower">

Setting Width and Height of an Image


The width and height attributes are used to specify the height and width of an image.The attribute values are
specified in pixels by default.

Syntax:
<img src=”url/path” alt=”description” height=”value” width=”value”>

Example:-
<img src=”images/Tulips.jpg” alt=”Yellow Flower” height=”200” width=”300”>

Background Graphics:-
New version of web browser can load on image and use it as background when displaying on
webpage. Some people like background images if you want to include a background images, make sure you text
can be read easily when displayed on top of the image.
It can be used in body tag to set background image for your web page.
Example:- <body background=”url/path”>

Adding text:- You can also give the information to the particular image by using tag like <p> as show in below
example.

Example: Output:-

<html>
<head>
<title>Image</title>
</head>
<body>
<img src="images/Tulips.jpg" alt="Yellow flower"

height="200" width="300">
<p>Tulips is the Spring-Flowering plant.
</body>
</html>
Tulips is the Spring-Flowering plant.
7.HTML Document Heading Details:-
HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before
and after, and any white space necessary to render the heading.
The heading elements are h1, h2, h3, h4, h5, and h6 with h1 being the highest (or most important) level and h6
the least
Syntax:-<hi>Some Text</hi> where i=1,2,3,4,5,6

Example:-
<html> Output:-
<head>
<title>Using Heading Tags</title>
</head>
<body> Heading1
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
Heading2
<h4>Heading4</h4>
<h5>Heading5</h5> Heading3
<h6>Heading6</h6>
</body> Heading4
</html>
Heading5
Heading6

8.Frames:-
HTML frames are used to divide 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.

Creating Frames:-

1.<frameset> tag:-
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines
how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames.
Attributes:- The <frameset> tag attributes are listed below
Attribute Description
1.cols Specifies no.of columns are contained in the frameset and the size of each
column(width)
1.Percentage of browser window ,use cols=”30%,40%,30%”
2.Absolute values in pixels, use cols=”100,500,100”
3.Using a wildcard symbol, cols = “30%,20%,*”
2.rows It is used to specify the rows in the frameset, rows=”40%,60%”.It assigns
two horizontal frames.
3.border It specifies the width of the border of each frame in pixels.
4.framespacing It specifies the amount of space between frames in a frameset
2.<frame> tag:-
Each frame is indicated by <frame> tag and it defines which HTML document shall open into
the frame.
Attributes:- The <frame> tag attributes are listed below
Attribute Description
1.src This attribute is used to give the file name that should be loaded in the frame.
Ex: src=”topframe.html”
2.name This attribute allows you to give a name to a frame. It is important to create
links in one frame that load pages into an another frame.
Ex: name=”topframe”
3.marginwidth It is used to specify the width of the space between the left and right of the
frame’s border and the frame’s content.
Ex: marginwidth=”10”
4.marginheight It is used to specify the height of the space between the top and bottom of the
frame’s border and frame’s content.
Ex: marginheight=”10”
5.scrolling It is used to control the appearance of the scrollbars that appear on the frame.
Ex: scrolling=”no”

The following example creates three horizontal frames and three vertical frames:-
//rowframe.html
<html>
<head>
<title>HTML Frames</title>
<head>
<frameset rows="25%,50%,25%">
<frame src="topframe.html" name="top">
<frame src="mainframe.html" name="main">
<frame src="bottomframe.html" name="bottom">
<noframes>
<body> Your Browser doesnot support
browser</body>
</noframes>
</frameset>
</html>

In the above example, we replace rows attribute by cols and changed their width. This will create all the three
frames vertically.
//columnframe.html
<html>
<head>
<title>HTML Frames</title>
<head>
<frameset cols="20%,60%,20%">
<frame src="topframe.html" name="top">
<frame src="mainframe.html" name="main">
<frame src="bottomframe.html" name="bottom">
<noframes>
<body> Your Browser doesnot support
browser</body>
</noframes>
</frameset> </html>
Note: If user using old browser or any browser which does not support frame, then <noframes> element should
be displayed to the user.

Frame’s name and target attributes:-


One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a
spate frame.

Ex:- <a href=”url/path” target=”targeted frame name”>


Here, target is an attribute decided that to load file in particular frame.

Example: //nameframe.html //searchengine.html

<html> <html>
<head> <head>
<title>Frames</title> <title>Websites</title>
</head> </head>
<frameset cols="30%,*"> <body>
<frame src="searchengine.html" name="page"> <a href="https://www.google.com"
<frame src="display.html" name="display"> target="display">Google</a><br><br>
</frameset> <a href="https://yahoo.com"
</html> target="display">Yahoo</a><br><br>
<a href="https://bing.com" target="display">Bing</a>
</body>
</html>

//display.html
<html>
<body>
This is target page.When you click link, the content will display here.
</body>
</html>

Here, we have created two columns fill with two frames. The first frame is 30% wide will contain the navigation
menu bar implemented by searchengine.html file. The second column fill in remaining space and will contain the
main part of the page. For all the three links available in menu bar, we have mentioned target frame as display.
So whenever you click any of the links in menu bar, available link will open in display page( set as name for
second frame).
The target attribute can also take the following value:
Attribute Description
1.self Loads the page into the current frame.
2.blank Loads the page into a new browser window. Opening a new window.
3.parent Loads the page into the parent window, which in the case of a single frameset
is the main browser window.
4.top Loads the page into the browser window, replacing any current frames.
5.targetframe Loads the page into a named targetframe
9.Forms:-
➢ An HTML form is a section of document that contains interactive controls that enable a user to submit
information to a web server.
➢ 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.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −

<form action = "Script URL" method = "GET|POST">


form elements like input, textarea etc.
</form>

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
• Clickable Buttons(Submit and Reset Button)
• Hidden Controls
1.Text Input Controls:-
There are three types of text input used on forms −
a)Single-line text input controls − This control is used for items that require only one line of user input, such
as search boxes or names. They are created using HTML <input> tag.

Symbol:-

Attribute Description
1.type Indicates the type of input control and for text input control, it will be set to text.
2.name Used to give a name to control which is sent to the server to be recognized and get the
value
3.value This can be used to provide an initial value inside the control.
4.size Allows to specify the width of the text-input control in terms of characters.
5.maxlength Allows to specify the maximum number of characters a user can enter into the text
box.
Example:- <input type = “text” name=”firstname” size = “10”>
b)Password input controls − This is also a single-line text input but it masks the character as soon as a user
enters it. They are also created using HTMl <input> tag. but type attribute is set to password.

Symbol:-

Attribute Description
1.type Indicates the type of input control and for password input control it will be set
to password
2.name Used to give a name to the control which is sent to the server to be recognized
and get the value.
3.value This can be used to provide an initial value inside the control.
4.size Allows to specify the width of the text-input control in terms of characters.
5.maxlength Allows to specify the maximum number of characters a user can enter into the
text box.
Example:- <input type = “password” name=”pword” size = “10”>

c)Multi-line text input controls − This is used when the user is required to give details that may be longer than
a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Symbol:

Description
Attribute
1.name Used to give a name to the control which is sent to the server to be
recognized and get the value.
2.rows Indicates the number of rows of text area box.
3.cols Indicates the number of columns of text area box

Example:<input type=”textarea” name=”ta” rows=”2” cols=”20”>

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

Symbol:

Attribute Description
1.type Indicates the type of input control and for checkbox input control it will be
set to checkbox.
2.name Used to give a name to control which is sent to the server to be recognized
and get the value
3.value The value that will be used if the checkbox is selected
4.checked Set to checked if you want to select it by default.

Example:- <input type=”checkbox” name=”chk” checked>


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

Symbol:

Attribute Description
1.type Indicates the type of input control and for checkbox input control it will be
set to radio.
2.name Used to give a name to the control which is sent to the server to be
recognized and get the value.
3.value The value that will be used if the radio box is selected.
4.checked Set to checked if you want to select it by default.

Example:-<input type=”radio” name=”rd” checked>

4.Select Box Control:-


A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.

Symbol:

Attribute Description
1.name Used to give a name to the control which is sent to the server to be
recognized and get the value.
2.size This can be used to present a scrolling list box.
3.multiple If set to “multiple” then allows a user to select multiple items from the menu

Following is the list of important attributes of <option> tag,

Attribute Description
1.value The value that will be used if an option in the select box is selected.
2.selected Specifies that this option should be the initially selected value when the page
loads.
3.label An alternative way of labeling options

Example: <select>
<option>---</option>
<option>----</option>
</select>
5.File Upload Box:-
If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element but type attribute is
set to file.
Symbol:-
Attribute Description
1.name Used to give a name to the control which is sent to the server to be
recognized and get the value.
2.accept Specifies the types of files that the server accepts.

Example:- <input type=”file” name=”file”>

6.Button Controls:-
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button.

Symbols:-

Attribute Description
1.submit This creates a button that automatically submits a form.
2.reset This creates a button that automatically resets form controls to their initial
values
3.button This creates a button that is used to trigger a client-side script when the user
clicks that button.
4.image This creates a clickable button but we can use an image as background of the
button.

Example: <input type=”submit” value=”click here”> //submit button


<input type=”reset” value=”clear”> //reset button

7.Hidden Form Controls:-


Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This
control hides inside the code and does not appear on the actual page.
Example:-
<html> course: <select name="crs">
<head> <option>B.sc</option>
. <title>HTML Form</title> <option>B.com</option>
</head> <option>B.C.A</option>
<body> </select> <br><br>
<h1><center><u>Student Identification Marks: <br>
Information</u></center></h1> <textarea row="3" cols="20">Type
<form align="center"> Here...</textarea> <br><br>
Name: <input type="text" name="name"> <br><br> Student Phot0: <input type="file"
Email ID: <input type="email" name="eid"> <br><br> name="file"><br><br>
Password:<input type="password" name="pword"> <input type="checkbox">The above
<br><br> information are verified. <br><br>
Gender:<input type="radio" name="gender">Male <input type="submit"> <input
<input type="radio" name="gender">Female type="reset">
<input type="radio" name="gender">Other </form>
<br><br> </body>
</html>

You might also like