Scribd
Upload
26 views

WD Notes Unit-II

hi

Uploaded by

Varun Tyagi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

WD Notes Unit-II

hi

Uploaded by

Varun Tyagi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

UNIT II

HTML TAGS

The <html> tag represents the root of an HTML document. The <html> tag is thecontainer for
all other HTML elements.

HTML tags are like keywords which define that how web browser will format and display the
content. With the help of tags, a web browser can distinguish betweenan HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top tobottom and left
to right. HTML tags are used to create HTML documents. You can use as many tags you
want as per your code requirement.
• All HTML tags must be enclosed within < > these brackets.
• Every tag in HTML performs different tasks.
• If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)

Syntax:
<tag> content </tag>

HTML Tag Examples

<html> … </html> — The root element. ...

<head> … </head> — The document head. ...

<title> … </title> — The page title. ...

<body> … </body> — The page's content. ...

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>


<i> Italic Tag </i>

<u> Underline Tag</u>


WORKING WITH TEXT
1. Add the font Attributes
2. Add the sizeAttribute
3. Add the colorAttribute
4. Nest Colors
5. Specify a Font

# WORKING WITH LIST


HTML lists allow web developers to group a set of relateditems in lists.

Example

1. Unordered List

An unordered HTML list:

• Item
• Item
• Item
• Item

<!DOCTYPE html>
<html>
<head>
<title>Class </title>
</head>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
2. Ordered List

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

<!DOCTYPE html>
<html>
<head>
<title>Class </title>
</head>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

3. Definition List (or Description List)

• Definition lists are complex than the other two types of lists because theyhave two
elements for each item i.e., terms and definition.
• The <dl> tag defines a description list.

• The <dl> tag is used in conjunction with <dt> (defines terms)and


<dd> (describes Definition).

Example: -
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Nested List

• We can nest lists of the same type or different type inside another list e.g.,Suppose we
have a bulleted list and need a numbered ist beneath one of the items.
Example: -
<html>
<head>
<title>Class </title>
</head>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
</body>
</html>

# TABLES
• HTML Provide the table element to create a TABLE.
• The Table element helps us to display the information in more than onedimension
i.e., in columns and rows.
• A table consists of columns and rows, where each row is divided intoseveral data
cells.
• A cell can contain text, lists, images, forms and other tables.
• A table in a web page can be defined by using the starting and ending tags ofthe <table>.
• The elements used in the table element are colspan, rowspan, col, tr, td, th
• The <th> tag defines a header cell in an HTML table.
• The text in <th> elements are bold and centered by default.
• The text in <td> elements are regular and left-aligned by default.
Example: -
<html>
<head>
<title>Class </title>
</head>
<body>
<table border="1px" height="200px" width="50%">
<tr align="center">
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr align="center">
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr align="center">
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr align="center">
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

First Name Last Name Age

Priya Sharma 24

Arun Singh 32

Sam Watson 41
Example: -
<html>
<head>
<title>Section C</title>
</head>
<body>
<table border="1" width="50%" height="300px" align="center" bgcolor="lightgray">
<tr align="center" bgcolor="cyan">
<th colspan="3">TIME TABLE</th>
</tr>
<tr>
<td align="center"colspan="3">1</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center"bgcolor="green">3</td>
<td align="center">4</td>
</tr>
<tr>
<td rowspan="2" align="center"><img src="abc.jpeg" height="60px" width="80px"></td>
<td align="center" colspan="2">5</td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">7</td>
</tr>
<tr>
<td align="center">8</td>
<td rowspan="2">
<ul>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
</td>
<td align="center">9</td>
</tr>
<tr>
<td align="center">10</td>
<td align="center" rowspan="2"><img src="images (3).jpg" height="100px"
width="40px"></td>
</tr>
<tr>
<td align="center" colspan="2">11</td>
</tr>
</table>
</body>
</html>

TIME TABLE
1
2 3 4
5

6 7
8 • Fruit 9
o Bananas
o Apples
o Pears
10 • Vegetables
• Meat

11

1. tr Element
• The Tr element is used to define the rows of a table.
• A row contains one or more table cells and table data.e.g.

<html>
<head>
</head>
<body>
<h1>The tr element</h1>
<p>The tr element defines a row in a table:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>

Output:

2. td and th element
• In HTML, a table contains one or more cells that are divided into two
categories i.e. standard cells and header cells.
• The standard cell of a table contains table data, which can be text,
images, links and other tables.
• These cells are created using td element.
• The header cell of a table contains the header information, which canbe the
heading of a column and other content.
• The header cells are created by using the th element.

# FRAMES

Frames provide multiple separately scrollable areas within one user


window.
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: intorows and columns.
Frames are complex to implement, as they require a separate document to define the
frames layout as well as individual documents to actually occupythe frames.

Example: -
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Frame1.html

<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #7fffd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>

Frame2.html

<!DOCTYPE html>
<html>
<head>
<style>
div{ background-color: #2f4f4f;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>
Frame3.html

<!DOCTYPE html>
<html>
<head>
<style>
div{ background-color: #c1ffc1;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>

1. Frameset Tag
• <frameset> tag defines the layout of the frames in thedocument.
• It does so by specifying whether the frames should be laidout in column or
rows and what each column’s width should be.
• The frameset tag has the following format:
<frameset cols = “column size(s)”> OR
<frameset rows = “row size(s)”>

2. Frame Tag
• Frame tag is responsible for defining properties of eachframe.
• The frame tag has the following syntax:
<frame name=”name” src=”url of content”></frames>

Inline Frames
Inline frame enables smaller pieces of content to be incorporated in scrollable
containers within a larger document. Like embedding Youtube videos on your web
page.
The iframe has the following syntax:
<iframe width=”” height=”” src=”URL of the page or
video”></iframe>

Example: -

<html>
<head>
<title>HTML Frames</title>
</head>
<body>
<iframe width="500" height="400"
src="https://www.youtube.com/embed/TcMBFSGVi1c"></iframe>
</body>

</html>

Output:
# WORKING WITH HYPERLINKS
<a> Element

A hyperlink interconnects the current webpage with the otherweb pages


available on the internet. In HTML we can create hyperlinks using anchor
elements <a>.
The hyperlink redirects the user to another HTML page, image, or file.

href attribute

The <a> element uses the href attribute to specify the targetresource or document
that we want to open when the user clicks the hyperlinks.
The term href stands for Hypertext Reference. The href
attribute is the URL of the target resource.e.g.

<a href="https://www.google.com">Visit Google</a>

target attribute

The <a> tag uses target attribute to specify a window wherewe want to open a
document when a hyperlink is clicked.

target Values:
_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.

target attribute syntax

<a href="https://www.google.com" target="_blank">VisitGoogle</a>

# WORKING WITH IMAGES


Image button

<input> elements of type image are used to create graphical submit buttons, i.e. submit
buttons that take the form of an image rather thantext.

The path to the image is specified in the src attribute.e.g.


<input type="image" src="img_submit.gif" width="48"

height="48">

Image

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linkedto web pages. The
<img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

src - Specifies the path to the image


alt - Specifies an alternate text for the image, if the image forsome reason
cannot be displayed
Note: Also, always specify the width and height of an image. If widthand height are not
specified, the page might flicker while the image loads.

e.g.

<img src="asteroid.jpg" width="700" height="400">

Output
How to make a clickable Image

We can make a clickable image link (image displayed with blue borders) indicating that it is
a hyperlink. For this to happen we need toembed the IMG element inside the anchor
tag(<a>).
e.g.

<a href=”https://www.google.com”>

<img src=”google.jpg” border=”10”></a>

Different Image formats

1. GIF
GIF files are used for web graphics. They can be animated andare limited to only
256 colors and allow transparency.
GIF files are small in size and portable.

2. JPEG
JPEG supports unlimited number of colors and has the .jpeg orjpg extension.
JPEG uses a complex compression algorithm known as the JPEG algorithm.
We can convert any image format to JPEG mage format byusing the JPEG
algorithm.

3. PNG
The png file format has all the features of GIF. PNG uses lossless compression
algorithm and support unlimited number ofcolors.
The lossless algorithm prevents any loss that occurs whilecompressing an
image.

# WORKING WITH MULTIMEDIA

HTML helps to add multimedia files on the websites by providingvarious


multimedia elements.
These elements include AUDIO, VIDEO, EMBED and OBJECT.
THE EMBED and OBJECT elements display the multimedia files on heweb
page as well as embed the files from other websites.
The AUDIO element is used to display the audio on the web page whereas
VIDEO element is used to display the video files on the webpage.

<audio> Tag

The HTML <audio> element is used to play an audio file on a web page.
<audio controls>
<source src="song.mp3" type="audio/mp3"> Your
browser does not support the audio element.
</audio>

Audio Extensions

1. Advance Audio Coding(AAC)


• AAC offers lossy audio compression.
• It is used to create small audio files, handle higher and lowerfrequency
of sound.
• The AAC gives better sound quality then MP3 at similar bit rates.

2. Audio Interchange File Format(AIFF)


• It refers to an audio file format to store high quality and
multichannel sampled audio data.
• This format is used for storing audio data for personal
computers and other electronic devices.
• AIFF uses 10MB of disk space for 1 minute of audio.

3. Media Playlist File Format (M3U)


• It refers to a file format that is used to store multimediaplaylists.
• It was first implemented in Winamp; however, it is now supported by
applications, such as Windows Media Player andReal Player.
• An M3U file is a plain text file containing the paths of one ormore
media files.
4. Musical Instrument Digital Interface.
• It refers to a standard protocol that is used to interchange the musical
information between various musical instruments, synthesizers, keyboard
controllers, sound card, and computers.
• The MIDI file format is smaller than a digital audio file and offerscross
platform compatibility, which means that all popular computer platforms
can play MIDI files.

Video Files

A video file is a collection of images that is displayed in a sequence


representing scenes in motion.
Video files are also encoded or decoded using the various videocodecs,
such as DivX, MPEG and Quicktime.

<video> Tag

The HTML <video> element is used to show a video on a web page

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Video Extensions

Following are the various commonly used video file formats:

1. Audio Video Interleave(AVI) File Format


• AVI files contain both audio and video data; thereby, allowing
synchronous audio-with-video playback.
• The AVI file format is also named as video for windows. The fileextension
for AVI file format is .avi.

2. MPEG File Format


• It refers to a video file format used for coding audio-visual
information, such as movies and videos, in a digitally compressed
format.
• An MPEG uses very sophisticated compression techniques, thesize of its
video files are much smaller than that of the other video and audio coding
format.
• The drawback of the MPEG video files is that they are expensiveto encode
and slow to decompress.
• The file extension of MPEG file is .mpeg or .mpg.

3. The Quicktime Movie(mov) File Format


• It refers to a video file format, which is a cross platform format.
• This format is available for Mac OS Class (System 7 Onwards),Mac OS
X and Microsoft Windows operating system.
• The file extension for the Quicktime movie file is .qt or .mov.

4. Windows Media Video(wmv) File Format


• Offers video data compression technology. WMV s designed tohandle all
types of video format.
• The file extension for the WMV file is .wmv.
WORKING WITH FORMS AND CONTROLS

CONTROLS

The <input> element can be displayed in many ways, depending onthe type
attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of manychoices)

<input Displays a checkbox (for selecting zero or more ofmany


type="checkbox"> choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

1. TextBox

A text box, text field or text entry box is a control element of a graphical user interface
that should enable the user to input text information to beused by a program

e.g. First Name: <input type="text" id="fname" name="fname">


Output

2. Radio Buttons

Radio buttons let the user select only one of a limited number of choices.e.g.

<input type="radio" id="male" name="gender" value="male"> Male

<input type="radio" id="female" name="gender" value="female">Female

Output

3. Checkbox

Checkboxes allow the user select one or more options of a limitednumber of


choices.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">


I have a bike<br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
I have a car<br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> Ihave a
boat

Output

4. Submit Button

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

e.g.
<form action="/action_page.php" method="get" id="nameform">First name:
<input type="text" id="fname" name="fname"><br><br>Last
name:
<input type="text" id="lname" name="lname">

<input type="submit" value="Submit">

</form>

Output

5. Button

The HTML <input type = “button”> is used to define a clickable Button ina
Document. It is mostly used with the Javascript to activate the script.

e.g.

<body>

<h1>Show a Push Button</h1>

<p>The button below activates a JavaScript when it is clicked.</p>


<form>
<input type="button" value="Click me" onclick="msg()">
</form>

</body>

Output
FORMS

The HTML <form> element is used to create an HTML form for user input.

The <form> element is a container for different types of input elements,such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

Syntax:
<form>
.
form elements
.
</form>

e.g.

<form action="/action_page.php" method="get" id="nameform">First name:


<input type="text" id="fname" name="fname"><br><br>Last
name:

<input type="text" id="lname" name="lname">

<input type="submit" value="Submit">

</form>

Output

Student Registration Form

<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<fieldset>
<legend>Personal Details</legend>
<form action=”url” method=”post”>
<label> Name</label>
<input type=text name=”textname” id=”textname” size=”30”><br><br>
<label>Father Name</label>
<input type=”text” name=”fathername” id=”fathername” size=”30”><br><br>
<label>Personal Address</label>
<input type=”text” name=”personaladdress” id=”personaladdress” size=”30”><br><br>
<label>Gender:-</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender1" value="female">
<label for="female">Female</label><br><br>
<label>Course</label>
<select name=”Course”>
<option value=”-1” selected>Select</option>
<option value=”B.Tech” >B.Tech</option>
<option value=”MCA”>MCA</option>
</select><br><br>
<label>Email</label>
<input type=”text” name=”email” id=”email” size=”30”><br><br>
<label>Mobile No.</label>
<input type=”text” size=”30”> <br><br>
<input type="reset" value="Reset"> &nbsp;
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>

Personal Details
Name

Father Name

Personal Address

Gender:- Male Female

Course Select

Email

Mobile No.

Reset Submit

You might also like