Scribd
Upload
15 views

HTML UNIT 1

osmania university bcom iv sem web

Uploaded by

Menaka Patil
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

HTML UNIT 1

osmania university bcom iv sem web

Uploaded by

Menaka Patil
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

1

HTML UNIT – 1
MARK UP LANGUAGES: Mark up languages are the languages that build Web pages.
WEB PAGE: A web page is a web document available on the World Wide Web or it is a page on
the internet web pages contain text. Graphics, audio, video, animations etc.
HTML: HTML stands for Hyper Text Markup Language. It is widely used language to design
web pages.
HYPER TEXT: Hyper Text refers to the way in which web pages are linked together. When we
click a link in a web page we are using hyper text. So hyper text is simply a peace of text that
works as a link. Markup language. It describes how html works. It is a way of writing layout
information within the document.
HTML TAGS: HTML TAGS are HTML based commands or key words surrounded by angular
brackets ‘<>’. HTML TAGS normally come in pairs like <tag-name>&</tag-name>. Such tags
are called paired tags. The first tag in the pair is called the start tag or the opening tag and the
second tag is said to be end tag or closing tag. Some tags have only opening tags. They are
called empty tags. Each tag may have attributes in them.
Example:<body bgcolor= “red’ text = “blue”>
↓ ↓ ↓↓↓
Tag attribute value
STRUCTURE OF HTML PROGRAMME: A HTML document is basically separated in two parts
the head and the body sections. A document type definition is added on the top of it to geet
the basic document structure or and HTML version the structure of HTML document is:
<! DOCTYPE -----> version information.
<HTML>
<HEAD>
----- information about document script style
</HEAD>
<BODY>
----- visible content of the document
</BODY>
</HTML>
<! DOCTYPE>: The <! DOCTYPE---> declaration a well written HTML document begins with a
basic declaration that defines what type of document it is. It tells the processing agent the
HTML version used.
<HTML>: The <HTML> tag acts as a container for the whole document. Every character in the
document should be in between the HTML start and end tags. The HTML tag can also be used
to define the language of the document. The content of the HTML tag is divided into 2 parts
using the Head and the body tags.
<HEAD> TAG: This section is the document’s head all the information contained in the
document’s head is loaded first before any other thing in the document. It includes tags like
script, style, title, meta etc.
The <head>tag is just a container for all other head elements. All the information contained in
the documents. Head is loaded first before any other thing in the document. It contains the
<title> tag indicating the title of the document. Apart from the <title> tag it can also include
<style><script><meta><link>.

2
i. <Title> tag: This is the document’s title. It is displayed in the title bar of the window.
ii. <Style> tag: This tag is used to write styles specifications. It includes a group of class
definitions used by other tags to provide some visual characteristics.
iii. <Script> tag: It is used to include a scripting language into the document.
iv. <Meta> tag: This tag includes information about the document such as keywords and
description. Meta means information about information.
v. <Link> tag: The link tag is used o link an external file such as style sheet or some Jawa
Script files.
BODY TAG: This is document’s body all the things written here will be shown when the
document is executed most of the tags in HTML are inserted in the body section.
THE BODY SECTION IN DETAIL: The body tag is a container for the visual part of the
document. All the content written in the body tag is displayed on the web page.
Example:
<HTML>
<HEAD>
<TITLE> my first page </title>
</head>
<body>
<h1> Hello from RDC </h1>
</body>
</html>
Attributes used with the body tag:
bgcolor: This change the back ground color of the webpage. We can set this to any color we
would like to use the value for this attribute can be a color name or a hexa decimal code.
Text: This change the default text color in the page. Here also the value of this attribute can
be a color name or haxa code.
Background: it specifies a back ground image for the document.
Link: It is used to specifies the color of the unvisited links in the document.
Vlink: It is used to specify the color of the visited link in a document.
Alink: It is used to specify the color of an active link in a document.
Example program:
<html>
<head>
<title> my program </title>
<body bgcolor = “red” text = “blue” link = “green” vlink = “yellow”>
Have a nice day
</body>
</html>

3
Text formatting tags: Formatting tags are used to apply formatting to the text. They display
the text in different formats according to the tags used.

Tag Description
<b> defines bold text
<i> defines italic text
<u> defines underline text
<big> defines big text
<small defines small text
>
<sub> defines subscripted text
<sup> super subscripted text
<tt> Tele-type text
<strike strikes of the text
>
<blink> makes the text blinking
<font> allows us to set font face, color,
size
<center alink the text in center
>
<pre> defines preformatted text

Example: <html>
<head>
<title> text formatting tags </title>
</head>
<body>
<b> Hello </b>
<i> Hello <li>
<u>Hello <lu>
<big> Hello </big>
<small> Hello </small>
x <sup> 2 </sup>
H <sub> 2 </sub> 0
<tt> Hello </tt>
<strike> Hello </strike>
<blink> Hello </blink>
<font color= “red”face = “Arial”>
Hello
</font>
<center> Hello </center>
<pre>
Hello
from
Royal
</pre>
</body>
</HTML>
4
HTML paragraphs: In HTML paragraphs are defined using the <p> tag. The paragraph text
must be enclosed within the <p></p>
Example:
<html>
<head>
<title> paragraph </title>
</head>
<body>
<H1> my paragraph </h1>
<P> HTML stands for
Hyper Text Markup Language
</p>
<P> my first paragraph </p>
</body>
</html>
Types of tags:
1. Paired or container tag
2. Unpaired or empty tag
a. Paired or container tag: Html tags normally come in pairs like <html></html>.
Such type of tags are called paired or container tags. The first tag in the pair is
said to be the stat tag and the second one is said to be the end tag.
Syntax: <tag name> content </tag name>
Example: <h1> hello </h1>
b. Unpaired or empty tag: An unpaired or empty tag refers to a tag which does not
have a closing tag
Syntax: <tag name>
Example: <br>, <hr>
Heading tags: Headings are the most common type of tag included in any document. It
breaks a document into section there are 6 types of heading tag in html <H1> to <H6>. when
we use heading tags they automatically appear in new lines.
Example:
<html>
<head>
<title> heading </title>
</head>
<body bgcolor = “Red” text = “blue”>
<H1> Hello </H1>
<H2> Hello </H2>
<H3> Hello </H3>
<H4> Hello </H4>
<H5> Hello </H5>
<H6> Hello </H6>
</body>
</html>
5
HTML line break and horizontal line: To break a line without starting a new paragraph in
the web page <br> tag is used. Whenever a <BR>is used anything following it starts on a next
line. The <BR>tag is an empty tag i.e., it does not have an end tag.
In HTML <HR> tag is used to create a horizontal line across the web page. It is alos called
horizontal rule <HR>. The <HR> tag has some attributes.

Attribute Value Description


Align Left, right, centre It specifies the alignment of the <HR> element.
Noshade Noshade Specifies that the <HR> element should render or
display in one solid colour instead of a shaded
colour.
Size Pixel or Specifies the height of <HR> element
percentage
Width Pixel or Specifies the width of an <HR> element.
percentage
Color Color name pink Specifies the colour of the <HR> element.

Example:
<html>
<head>
<title> line breaks and horizontal line
</title>
</head>
<body>
<b> Hello </b><br>
<I>Have a nice day </I><br>
<hr color = “red” align = “center” size = 10% width = “80%”><br>
<b> my new web page </b>
</body>
</html>
HTML Comment: Comments can be inserted in HTML code to make the code more readable
and understandable. HTML comments are indicated by a special beginning tag <!--> and
ending tag <-->. The comment will be placed within the opening and closing of the comment
tag. Comments are ignored by the borrower and are not displayed.
Example:
<html>
<head>
<title> comment lines </title>
</head>
<body>
<! – my new comment –
<! – multiple lines of comments written here
-->
Have a nice day
</body>
</html>
6
Physical and logical tags: A physical tag controls how a character is formatted. For
example: we may display some character as bold or underlined. Physical styles are associated
with these tags Example:<B>,<BIG>, <SMALL><I><Italic><STRIKE><SUB><SUP><U>
Logical tags: These tags describe how the text is being used. Not necessarily how it is
formatted. Logical style is associated with these tags
Example:
<q> Defines a short quotation
<strong> Defines strong text
<pre> Defines a block of pre formatted
text.

Image: When an image is to be added on the web page we use the <img> tag. The image tag
has no closing tag but it has a compulsory attribute ‘SRC’ which stands for source. The value of
the SRC attribute is the ‘URL’ of the image that we wanted to display.
Syntax: <Img src = “URL”>
Example:<img src = “c:/doc/prgfiles/samplepics /sunset. jpg”>
If an image tag is used in between two paragraph tags then the browser shows the first
paragraph then the image and the second paragraph.
Attributes of the image tags:
Attribut Value description
e
SRC Url It specifies the URL or the location of an image where it is
stored.
align Left, right, top, It specifies how the image should be aligned with respect to
bottom& middle the surrounding text.
Alt Text It specifies an alternate text I
Width Pixel or It specifies the height and width of the image to be displayed
height percentage
Vspace Pixel or It specifies the left and right side spacing in case of Hspace.
Hspace percentage And the bottom and top spacing n case of Vspace.
Border Pixel It specifies the width of the border around an image.
Usemap # map name It specifies an image as Clint side image map.

Example:
<html>
<head>
<title> images </title>
</head>
<body bgcolor = “yellow”>
<img Src = “/winter.jpg” vspace = “10%” border = 4 align = “bottom”>
</body>
</html>
Hyper links: A link or hyper link is some highlighted text which on clicking takes to another
page or another website or another location in the same page. Hyper links facilitate non linear
reading. HTML allows us to create hyperlinks using the anchor tag. The anchor tag has one
mandatory attribute hrcf which specifies the target page or location. The text that acts like a
hyper link should be delimited by <a> and </a>. And anchor can point any resources on the
web like an HTML page an image a sound file a move etc.
7
Attributes used along <a> tag
Attribut Value Description
e
Href URL Specifies the destination of the link.
Name Section name Specifies the name or anchor or section.
Target Blank It specifies where to open the linked document.
Parent
Self
Top
Frame
name
Shape Default Specifies the shape of a link.
Rect
Circle
poly

By default links will appear as follows on the browser.


1. An unvisited link is underlined and blue in color.
2. A visited link is underlined and purple in color.
3. An act link is underlined and red in color.
The user may change these default link colors by using the attributes link for an visited
link. Vlink for a visited link and a link for an active link by specifying the desired color
name as there values inside the body tag.
Example Program
1. <html>
<head>
<title> ou2 course</title>
</head>
<body text = “red” bgcolor = “yellow”>
<u><h1 align = “center”> list of courses </h></u>
BA <br>
Bcom<br>Bsc<br> MA <br>Msc<br>Mcom
</body>
</html>

2. <html>
<head>
<title>ou course </title>
</head>
<body link = “green” vlink = “pink”>
<u><h1 align = “center”>OU </h1></u>
<a hrcf = “b. html”>
Course
</a>
</body>
</html>
Image has a hyper link: Image can be used as a hyperlink simply enclosed an image
within the anchor tags <a>
Example:
<html>
<head>
<title> image as hyperlink </title>
<head>
<body>

8
<h3> click on the image to visit my site </h 3>
<a>href = “./b. html”>
<img src = "./sunset. Jpg” height = 20% width = 20%>
</a>
</body>
</html>
Marquee: This tag is used to create a scrolling text or image. A marquee can be mode to
scroll either from left to right or from right to left. By default marquees continuously scroll
across the screen infinite no. of times.
Syntax:
<marquee attributename = ‘value’ ---->
text or image
</marquee>
Attribute of the marquee tag:
1. Bgcolor: It is used to specify the background color of the marquee. The value can be
any color name or in hexa decimal format.
2. Direction: it is used to specify the direction of the scrolling action as either left or right.
3. Align: Used to specify whether the marquee text is aligned to the top, middle, and
bottom of the marquee.
4. Height: Used to specify the height of the marquee either pixels or percentage of the
page.
5. Width: used to specify the width of the marquee in either pixels or percentage of the
page.
6. Loop: It is used to specify the no. of times a marquee scrolls in either no.of scrolls like
(loop = )or by default loop = infinite.
7. Hspace and vspace: they are used to specify the amount of clear space adjoining a
marquee.
8. Small amount: Used to specify the horizontal space.
9. Scroll delay: It is used to specify the time between scrolls in mini second.
10.Behavior: It specifies the scrolling style and the values can be scroll, side and
alternate.
Example:
<html>
<head>
<title> marquee </title>
</head>
<body bgcolor = “blue” text = “yellow”>
<h1align = “center” welcome to my page </h 1>
<marquee bgcolor = “red” direction = “right”>
</marquee>
</body>
</html>
Lists: Html allows mainly three types of list. Lists are powerful tools used in organic.
Similar kinds of information i.e. list are used to group related pieces of information
together.
Types of lists:
1. Ordered list or numbered list: The ordered list gives numbering to the list items.
This numbering could be Arabic numerals or roman numerals or alphabets depending on
the value of the type attribute of the ordered list. An ol tag is used o create an ordered list
and each list item starts with the li tag.
The type attribute of the ol tag specifies the type of ordering. We want by default generic
numbers will he displayed but it also have the following possibilities.

Typ Description
e
1 Default, Arabic, numerals
I Upper case, Roman numerals
i Lower case, Roman numerals
A Upper case letters
a Lower case letters
9
Example:
<html>
<head>
<title> ordered list </title>
</head>
<body>
<OL type = ‘A’>
<li> English </li>
<li> Hindi </li>
</OL>
<OL type = l start = 5>
<li> web </li>
<li> ecommerce </li>
</OL>
</body>
</html>
Unordered list / Bulleted list: It is a collection of related items that have no special ordering
or a sequence. The list is created using anbl tag each item in the list is marked with a bullet by
default which can be also in the form of square or circle, the default is disc.
The different values used along with the type attribute of the UL tag is.

Type Description
Disc The default, a filled circle
Circle Uses a hollow circle
Square Uses a square

Program:
<html>
<head>
<title> unordered list</title>
</head>
<body bgcolor = “yellow”>
<UL type = “square”>
<li> cricket </li>
<li> hockey </li>
</ul>
<ul type = “disc”>
<li>foot ball</li>
<li> volley ball </li>
</UL>
</body>
</html>
Definition list: It groups terms and definitions into a single list and requires three elements to
complete the list <DL>It holds the list definition (DL definition) list (DT). It defines the term in
the definition (def term)<DD>. It defines the definition for the term (DD definition list
definition).

10
Program:
<html>
<head>
<title> definition list </title
</head>
<body bgcolor= “cyan”>
<DL>
<DT> www</DT>
<DD>world wide web</DD>
<DT> html </DT>
<DD>hyper text markup language </DD>
<DT> http </DT>
<DD>hyper text transfer protocol </DD>
</DL>
</body>
</html>
Tables: Tables are a means to divide the page into different sections to create menus to add interactive
fields etc. in Html tables are defined with the table. A table is divided into rows and each row is divided
into content of the data cell. <TD> stands for table data which holds the control of the data cells. A
<td> tag may contain text links, images, list, forms, other tables etc.
Tags used with the table tag:
1. tr: This tag is used to define a table row. Each table row is delimited by lrand lt table rows are
nested within the table tag.
2. td: This tag is used to define the table data is each valve in the cell. The cells are nested within
the lr tag
3. Th: This tag produces a row which is normally used as a header row. Each table header is
delimited by th and lth the content in the th will be displayed in bold face.
Example:
<html>
<head>
<title>
<tables>
</title>
</head>
<body bgcolor = “red”>
<table border = 1 bgcolor = “pink”>
<tr>
<tr><th> name </th>
<th>Rno</th>
<th> marks </th>
</tr>
<tr>
<td>Ramu</td>
<td> 001 </td>
<td> 80 </td>
</tr>
<tr>
</td> Ravi </td>
<td> 002 </td>
<td> 85 </td>
</tr>
</table>
</body>
</html>
11
Attributes used with the <table> tag

Attribute Value Description


Border Pixel It specifies the border width
Border Any color name It specifies the color of the table border
color
align Right,left, center, It specifies the alignment of table according to the
justify surrounding text.
Bgcolor Any color It specifies the back ground color of the table.
Background URL It specifies the bakckground image for a table
height Pixels/% It specifies the height of the table
Width Pixel/% It specifies the width of the table.
Cell spacing pixels It specifies the space b/w adjacent cells.
Cell Pixels It specifies the space b/w the cell border and their
padding content
Table with caption: To add a caption to the table caption tag is used. Each table can have only
one caption tag and it must be used immediately after the table tag
Example:
<html>
<head>
<title> table </title>
</head>
<body by color = “red”>
<table boarder = 1 height = 30% width = 40%>
<caption> student details </caption>
<tr>
<th> name </th>
<th>Rno</th>
<th> marks <th>
</tr>
<tr>
<td>Ramu</td>
<td> 001 </td>
<td> 80 </td>
</tr>
<tr>
<td>Sita</td>
<td> 002 </td>
<td> 90 </td>
</tr>
</table>
</body>
</html>
Row Span: A table can have a cell span in multiple rows to achieve this we use the row span
attribute inside the td tag.
Example:
<html>
<head>
<title> row span </title>
</head>
<body>bgcolor = “blue”>
<table border = 1 bgcolor = “yellow”
<tr>
<td> Row span = 2>Royal </td>
<td> Jr. college </td>
</tr>
<tr>
<td>Dg. College </td>
</tr>
</table>
</body>
</html>
12

Colspan: A cell can span in multiple columns to do so we use the attribute colspan inside the td
the td tag.
Example:
<html>
<head>
<title> column span </title>
</head>
<body bgcolor= “red”>
<table border = 1bgcolor= “yellow”>
<tr>
<td colspan = 2> Royal </td>
</tr>
<tr>
<td> Jr. college </td>
<td> Dg. College </td>
</tr>
</table>
</body>
</html>
Frames: In html frames enable us to present multiple html documents within the same window.
Frames are achieved by creating a frameset page. The body tag is replaced by the frameset tag.
The frameset doesn’t actually contain any content but it is just a reference to each frame. Each
frame contains a separate html document. So frames allow us to display more than one html
document in the same browser window simultaneously. A collection of frames in the browser
window is known as frameset.
The frameset tag attributes:
1. Rows: It specifies the no.of rows and their height pixels or percentage the default is 100%
2. Cols: It specifies the no.of columns and their width in pixels or percentage the default is 100%
3. The frame tag: For each frame we want to display we specify a frame tag the frame tag is
nested within the frameset.

Attribute Value Description


Name Any name It specifies name of the frame
Src URL It specifies the URL of the location of the document to
be shown in a frame.
Scrolling Yes, No, Auto It specifies whether to display scroll bars in the frame or
not.
Yes: It specifies that the scroll bars should be added.
No: It specifies that no scroll bars will be added.
Auto: It specifies that scroll bars will be whenever
necessary.
Noresize - It specifies that a frame is not resizable.
Margin height Pixels It specifies the top and bottom margins of a frame.
Margin width Pixels It specifies the left and right margins in a frame.

Programs to display vertical frames:


<html>
<head>
<title> frames </title>
</head>
<frameset Cols = “30%, 40%, 30%”>
<frame src = “./sunset . Jpg” scrolling = yes frameborder = 3><
<frame src = “./winter . Jpg”>
<frame src = “./sunset. Jpg”>
</frameset>
</html>

13
Program to display horizontal frames
<html>
<head>
<title> horizontal frames </title>
</head>
<frameset rows = “40%, 25%, 35%”>
<frame src = “x.html”>
<frame src = “y.html”>
<frame src = “z.html”>
</frameset>
</html>
Nested frames:A nested frame is a frame within another frame. Here we need to use
one frameset in another frameset. The second frameset has two or more other frames.
Example:
<html>
<head>
<title> nested frames </title>
</head>
<frameset rows = “30%, 70%”>
<frame Src = “./first html border =2>
<frameset cols = “50%, 50%”>
<frame Src = “./second. html”>
<frameset rows = “50%, 50%”>
<frame Src = “./third. html”>
<frame Src = “./fourth. html”>
</frameset>
</frameset>
</frameset>
Forms:Forms are the most popular way to make webpage interactions. Like forms on a
paper
a form on a web page allows the user to enter requested information and submit it for
processing.
<form>
The <form> tag is used to create an html form. From the user input. A form can contain
input elements like text field, check boxes, radio buttons, submit buttons etc. It can also
contain select menus, label elements, text areas, etc.
Forms are used to collect different kind of user input. A form is defined with in the
<form> tag. The form element can contain one or more of the following form elements.
<input>
<textarea>
<button>
<select>
<option>
<fieldset>
<label>
Attribute of the form tag:
1. Name:It specifies the form name.
2. Method:The http method to use when the form is submitted.
3. Action:It specifies the URL of the script file where to send the form data when a form
is submitted. It takes an URL as the value.
4. Target:It specifies where to display the response that is received after submitting the
form. The possible values are blank, self, parent, top.

14
< input> Tag:<Input> is the most used form tag. It specifies an input field where
the user can input or enter data. The type of input is specified with the type attribute.
The following are the commonly used <input> types.
Text, password, button, radio, checkbox, submit, reset.
The <input> tag attributes.
Attribute Value Description
Type Text, password, submit, It specifies the type of
image, file, button, radio, control.
checkbox.
Name Any field name Assigns a name to the input
control.
Align Left, right, top, middle, It specifies the alignment of
bottom an image input only.
Size Number It specifies the width in
characters of an input
element.
SRC URL It specifies the URL of the
image to use as a submit
button. (used with image
only)
Value Text It specifies the value of an
input element.
Maxlength Number It specifies the maximum
number of character
allowed in an input element.

Write a program to create an http form using most of the attribute of the input
tag.
<html>
<head>
<title> forms </title>
</head>
<body bgcolor = “pink”>
<center>
<u><h2> user details </h2></u>
<form>
User name:
<input type = “text” size = 10 maxlength = 20><br>
Password:
<input type = “password”><br>
<u><h2> Gender </h2></u>
<input type = “Radio” name = ‘x’> male <br>
<input type = “Radio” name = ‘x’> female <br>
<u><h2> course completed </h2></u>
<input type = “checkbox” name = ‘a’>ssc<br>
<input type = “checkbox” name = ‘b’> inter<br>
<input type = “checkbox” name = ‘c’> degree<br>
<input type = “checkbox” name = ‘d’> PG<br>
<input type = “checkbox” name = ‘e’>Phd<br>
<input type = “submit” value= “submit”>
<input type = “Reset” value = “Reset”>
</form>
</center>
</body>
</html>
15
Good web design principles:A web design is a collection of associated, hyper –linked
web pages that usually have some underlying theme. Web presentations are visually
oriented and it must be done effectively. Some of the key elements in a good web design
are discussed below.
1. Details: Good choices of background color, headers footers, and appropriate size are
all important details to be considered. Carefully prepared pages help to enhance the
credibility and readability of the presentation.
2. Coding: A good programmer uses the appropriate elements of style to contribute to
the quality of the presentation. Simplistic pages could indicate lack of knowledge and
cluttered pages indicate poor design.
3. Features: A few graphic and sound components can improve presentation. For
example, applets, or some Java scripts improve the quality. It is always better to
include too few fancy items.
4. Graphics: Including graphics is the most significant ways to enhance our design.
Many free images can be found on the web. It is important to integrate the images
effectively in to presentation.
5. Layout: If the pages are visually appealing and if they provide convenient navigation,
they are likely to be visited by more users. A poor layout. Will discourage people
from spending too much time on the presentation.
6. Writing Quality: Good writing and an interesting style are also necessary for a solid
presentation.
7. Load time: Users should be taken care not to include too many graphics or any large
graphics. Also users should be given the option to downloading large images
separately.
8. Hyperlinks: Navigation is a key element to any good Web presentation. If the reader
can movearound the pages easily, they will be more impressed. It is always a good
idea to include much navigation.
Unit-1
Important questions
Short answer questions:
1. Define HTML.
2. What is a Form in HTML?
3. Write short notes on <img> tag with attributes.
4. What is the use of Anchor tag (or) write about hyperlinks?
5. Explain types of lists in HTML.
6. Write about structure of HTML?
7. List and explain different attributes used with the body tag?
8. What is the use of <br> and <hr> tags.
9. Define web page.

Essay answer questions:


1. Explain in detail about Web Designing Principles.
2. What is a form? Explain <form> elements.
3. What is a table? Explain the attributes of <table> in HTML.
4. Explain in detail about frames in HTML with examples. what is an iframe?
5. List and explain text formatting tags with suitable examples.

Prepared by P. MENAKA RAO


M.TECH, M.C.A, M.B.A, MA(ENGLISH)

You might also like