Scribd
Upload
43 views19 pages

UNIT-1

Uploaded by

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

UNIT-1

Uploaded by

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

Q1) What is HTML? Explain Basic HTML Tags?

 HTML stands for Hypertext Markup Language


 It is used to display the document in the web browsers
 It is not a programming language.
 HTML was developed by Tim Berners-Lee
 A tag is a format name surrounded by angle brackets
Features of HTML
 It is a very easy and simple language. It can be easily understood and
modified.
 It is very easy to make effective presentation with HTML because it has a
lot of formatting tags.
 It is a markup language so it provides a flexible way to design web pages
along with the text.
 It is platform-independent because it can be displayed on any platform like
Windows, Linux and Macintosh etc.
 It enables the programmer to add Graphics, Videos, and Sound to the web
pages which makes it more attractive and interactive
Structure of HTML Program:
 All HTML documents follow the same basic structure.
 They have the root tag as <html>, which contains two sections <head>
section and <body> body section .
 The head section is used for control information by the browser
 The body section contains the actual user information that is to be
displayed on the screen.

Document Body:
 The document consist of so many tags which are used to describe the
content of the page.
 In HTML, document is structured as blocks of text, each of which can be
formatted independently.
 A block has no meaning outside of a particular document
 The two major blocks of text in HTML document
o Paragraph
o Heading Tags

Paragraph Tag (<p>):


 HTML <p> tag is used to define a paragraph in a webpage
Syntax: <p [align=”left” | “center” | “right”]>……. </p>
Example:
<html>
<head>
<title> Sample Page </title>
</head>
<body>
<p> Sample Paragraph Page </p>
<p align=”Right”> This Text Will display right side of Page </p>
</body>
</html>
Heading Tags:
 Heading Tags defined as Title of Page, it has Six types of Heading tags,
<h1> is largest Heading Style , <h6> is the least heading Style .
 The Heading tags has one common Attribute is align
Syntax:
<h1 [align=”left” | “center” | “right”]>……. </h1>
<h2 [align=”left” | “center” | “right”]>……. </h2>
<h3 [align=”left” | “center” | “right”]>……. </h3>
<h4 [align=”left” | “center” | “right”]>……. </h4>
<h5 [align=”left” | “center” | “right”]>……. </h5>
<h6 [align=”left” | “center” | “right”]>……. </h6>

Example :
<html>
<head>
<title> My sample web page </title>
</head>
<body >
<h1>heading level 1</h1>
<h2>heading level 2</h2>
<h3 align="center">heading level 3</h3>
<h4 align="right">heading level 4</h4>
<h5 align="left">heading level 5</h5>
<h6>heading level 6</h6>
</body>
</html>
Horizontal Rule (<hr>):
 This Tag places a horizontal line across the screen.
 These lines are used to break up the page and give it a little structure
 This Tag has few attributes
o Size
o Color
o Width
o Height
o Noshade

Example:
<html>
<head>
<title> HR Tag </title>
</head>
<body>
<h1> Degree College </h1>
<hr color=”red” size=”5px” width=”100%”>
</body>
</html>

Text Formatting:
The Text Formatting tags are used to apply text effects to the selected text,
HTML has several text formatting tags.
 <b>
 <i>
 <u>
 <basefont>
 <font>
 <sup>
 <sub>
 <mark>
 <strike>
 <strong>
 <tt>
 <pre>
base font: This specify format for the basic text but not the headings. Use
<basefont size=”10”>
font tag: This sets font size, color and face relative values for a particular
text. Use: <font size=”10” color=”#f1f2f3”> Degree College </font>
bold tag: This tag is used for implement bold effect on the text
Use: <b>Sample Text</b>
Italic tag: This implements italic effects on the text.
Use: <i> Sample Text </i>
Strong tag: This tag is used to always emphasized the text
Use: <strong> Sample Text</strong>
tt tag: This tag is used to give typewriting effect on the text
Use: <tt> Sample Text </tt>
<sub> and <sup> Script tag: These tags are used for write content below
and above of the base line
Example : H<sub> 2</sub>O it displays H 2O
Example : (A+B)<sup>2</sup> it displays (A+B) 2
Break tag: This tag is used to the break the line and start from the next line.
Example : <br>
Preformatted tag: used to display ready-formatted text on the webpage.
Syntax: <pre> Sample Page</pre>
<strike> tag: it puts a line strike through the center of the text,
Syntax: <strike> This is striking text </strike>
<mark> tag: used to highlight the text.
Syntax: <mark> this line is so important </mark>
Example:
<html>
<head><title> formatting tags </title></head>
<body>
<h1>Web Technology</h1>
<p align="center"> <br>
<b>Bolded text</b> <br>
<strong>Strong</strong> <br>
<u>underline</u> <br>
<i>Italic</i> <br>
<em>same as Italic</em> <br>
<b><i><u>welcome</u></i></b><br>
<strike>This is a Strike</strike><br>
<mark> this is important text</mark> <br>
a<sup>2</sup>+ b<sup>2</sup>+2ab
<hr>
h<sub>2</sub>o
<tt>tele text</tt>
<font face="Arial" size="3" color="red">
</body>
</html>
Hyper links:
 A hyperlink is a word, phrase, or image that you can click on to jump to a
new document or a new section within the current document.
 Hyperlink tag was denoted by <a>
 This has few attributes
o href= “link page address”
o target=”_self/_parent/_blank”
o title=”alternate text”
 The default color of hyper link is blue,
 It has two types
o External linking
o Internal linking

Syntax : <a href=”URL address” target=”frame address” name=”section


name” > Sample Text</a>
External Linking :
External links are hyperlinks that direct readers to a website other than existing
one .
Example :
<html>
<head>
<title> External Linking </title>
</head>
<body>
<a href=”https://www.google.com” name=”link”> Google </a>
</body>
</html>

In the above example , Google Label link to Google Website, when we click on
Google Label , it redirect to Google Web Page

Internal Linking:
Internal links are hyperlinks that point to pages on the same domain or same
page .
Example :
<html>
<head>
<title> External Linking </title>
</head>
<body>
<a href=”#Section-1”> Section-1</a>
<a href=”#Section-2”> section-2</a>
<a href=”#Section-3”> Section-3</a>
<label name=”Section-1”>
_______________________
Sample Content of Section-1 Block
_______________________
Sample Content of Section-1 Block
</label>

<label name=”Section-2”>
_______________________
Sample Content of Section-2 Block
_______________________
Sample Content of Section-2 Block

</label>

<label name=”Section-3”>
_______________________
Sample Content of Section-3 Block
_______________________
Sample Content of Section-3 Block

</label>

</body>
</html>

Mail to Hyperlink:
It is possible to add a mail to hyperlink to a webpage. This provides a convenient
method to send the e- mail. The general form is
<a href=mailto:[email protected]>contact us</a>
When the user clicks on the text contact us, a mail dialog box will be launched
and the “To” filed will be
filed the address [email protected] . The user has to complete the remainder of
the message

Q2) Explain List Tags in HTML?


 Lists provides straight forward index in the web site.
 HTML provides three types of list
o Ordered List (<OL>)
o Unordered List (<UL>)
o Definition List (<DL>)

Ordered List :
 Ordered List is also called as Numbered List , it denotes with <OL> Tag ,
This has Only one Sub Tag called List Item (<LI>), it can hold list item
values
 The <ol> Tag has two attributes
o Type =” A/a/I/i/1”
o Start
 The default type of Ordered List is numbers
Example :
<html>
<head>
<title> Ordered List </title>
</head>
<body>
<ol>
<li> C </li>
<li> C++ </li>
<li> Java </li>
<li> DBMS</li>
</ol>
<hr>
<ol type=”A”>
<li> C </li>
<li> C++ </li>
<li> Java </li>
<li> DBMS</li>
</ol>
</body>
</html>

Un Ordered List :
 Un Ordered List is also called as Bullet List , it denotes with <UL> Tag ,
This has Only one Sub Tag called List Item (<LI>), it can hold list item
values
 The <ul> Tag has one attributes
o Type =”Circle/Disc/Square”
 The default type of Un Ordered List is Disc
Example :
<html>
<head>
<title> Un Ordered List </title> </head>
<body>
<ul>
<li> C </li>
<li> C++ </li>
<li> Java </li>
<li> DBMS</li>
</ul>
<hr>
<ul type=”Square”>
<li> C </li>
<li> C++ </li>
<li> Java </li>
<li> DBMS</li>
</ul>
</body>
</html>
Definition List :
HTML Description List or Definition List displays elements in definition form like
in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
The 3 HTML description list tags are given below:
<dl> tag defines the description list.
<dt> tag defines data term.
<dd> tag defines data definition (description).
Example :
<html>
<head>
<title> DL tag Example </title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
</body>
</html>
Q3) Explain Table Tag?
 HTML table tag is used to display data in tabular form (row * column). There
can be many columns in a row.
 We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements
 In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
Attributes of Table Tag :
Align=”left/right/center”
Border=value
Bordercolor=”color name”
Width=”value%”
Height=”value%”
Cellspacing=”value px”
Cellpadding=”valiu px”

Attribute Description
Align Specifies the horizontal alignment of the table. Default value is
Border Specified the width of border around table.
Cellpading Specifies the spacing between cell border and text. Default value
Cellspacin Specifies the spacing between cells of the table. Default value is 2
Width Specifies table width
Height Specifies table height

Table Row <tr>: Each row of the table is created using. It has the following
form
Attributes :
Bgcolor=”color name”
Align=”left/right/center”
Valign=”top/center/bottom”
Table Data <td>: used to represent table cell and it data.
Bgcolor=”color name”
Align=”left/right/center”
Colspan=”value”
Rowspan=”value”
Table head <th>: Used to create headings for columns in a table.
Bgcolor=”color name”
Align=”left/right/center”
Colspan=”value”
Rowspan=”value”
Caption <caption>: This optional element is used to provide a title to the table.
Example: <caption>Student Records</caption>
<tbody>: It is used to group the body content in a table.
<thead>: It is used to group the header content in a table.
<tfooter>: It is used to group the footer content in a table.
Program:
<html>
<head>
<title>
Table Activity-2
</title>
</head>
<body>
<table border="1" width="50%" align="center" cellpadding="10px">
<caption>:: STUDENT MARKS ::</caption>
<colgroup>
<col span="2" style="background-color:red">
<col span="6" style="background-color:yellow">
</colgroup>
<tr bgcolor="#223567">
<td rowspan="2">SLNO</td>
<td rowspan="2">NAME</td>
<td colspan="6" align="center"> Subjects</td>
</tr>
<tr>
<th>Eng</th>
<th>Tel</th>
<th>Hin</th>
<th>Mat</th>
<th>Sci</th>
<th>Soc</th>
</tr>
<tr>
<td>1</td>
<td>Anitha</td>
<td>88</td>
<td>77</td>
<td>88</td>
<td>77</td>
<td bgcolor="red">44</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td>Sailu</td>
<td>77</td>
<td>99</td>
<td>55</td>
<td>44</td>
<td>55</td>
<td>66</td>
</tr>
</table>

</body>
</html>
Q4) Explain Images and Multimedia objects ?
 HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML
image element.
Attributes of img tag:
Src: It is a necessary attribute that describes the source or path of the image.
Syntax : <img src=”image file path”>
Alt: The alt attribute defines an alternate text for the image, if it can't be
displayed.
Syntax : <img src=”image file path” alt=”alternate text”>
Width: It is an optional attribute which is used to specify the width to display
the image.
Syntax : <img src=”image file path” alt=”alternate text” width=”50%”>
Height: the height of the image.
Syntax : <img src=”image file path” alt=”alternate text” width=”50%”
height=”50%”>
Example :
<html>
<head>
<title> Image Tag</title>
</head>
<body>
<img src="animal.jpg" height="180" width="300" alt="animal image">
</body>
</html>
Use <img> tag as a link:
We can also link an image with other page or we can use an image as a link. To
do this, put <img> tag inside the <a> tag.
<html>
<head>
<title> Image Tag</title>
</head>
<body>
<a href=http://www.google.com>
<img src="animal.jpg" height="180" width="300" alt="animal image">
</a>
</body>
</html>
Multimedia objects :
HTML allows adding different multimedia files on your website by various
multimedia tags. These tags include:
<audio> for displaying a audio file on the web page,
<video> for displaying a video file on the web page,
<embed> for embedding multimedia files on the web page,
<object> for embedding multimedia files on the web page.
<iframe> for embedding other web pages.
Audio Tag : The <audio> tag is used to embed sound content in a document,
such as music or other audio streams.
Attributes:

Attribut Value Description


e

autoplay autoplay Specifies that the audio will start playing as soon
as it is ready

controls controls Specifies that audio controls should be displayed


(such as a play/pause button etc)
loop loop Specifies that the audio will start over again,
every time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio
metadat should be loaded when the page loads
a
none

src URL Specifies the URL of the audio file

Video Tag : The <video> tag is used to embed video content in a document,
such as a movie clip or other video streams.
Attributes:

Attribut Value Description


e

autoplay autoplay Specifies that the audio will start playing as soon
as it is ready

controls controls Specifies that audio controls should be displayed


(such as a play/pause button etc)

loop loop Specifies that the audio will start over again,
every time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio
metadat should be loaded when the page loads
a
none

src URL Specifies the URL of the audio file


Example:
<html>
<body>
<h1>The video element</h1>

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


<source src="movie.mp3" type="audio/mp3">
</audio>
</body>
</html>

<html>
<body>
<h1>The video element</h1>

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


<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
Embed Tag : The <embed> tag defines a container for an external resource,
such as a web page, a picture, a media player, or a plug-in application

Attributes:

Attribut Value Description


e

height pixels Specifies the height of the embedded content

src URL Specifies the address of the external file to


embed

type media_typ Specifies the media type of the embedded


e content

width pixels Specifies the width of the embedded content

Example :
<html>
<body>
<h1>The embed element</h1>
<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">
</body>
</html>
Q5) Explain Frames in HTML ?
In HTML it is possible to split the webpage into different sizes. To do this HTML
provides three tags
<frameset>
<frame>
<iframe>.
Frameset tag : A frameset is an element in hypertext markup language (HTML)
which contains the different frame elements. It is used to inform the browser of
the division of the screen into different split windows.
Attributes :
Cols=”value”
Rows=”value”
Scrolling=”yes/no”
Frameborder=”0/1”
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "20%,80%">
<frame name = "top" src = top_frame.htm" />
<frame name = "main" src = "main_frame.htm" />
</frameset>
</html>
Iframe: The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.
<html>
<body>
<iframe src="https://www.gdc.com">
</iframe>
</body>
</html>
Q6) Explain Forms in HTML ?
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
Attributes :
Name=”name of the form “
Action=”destination page”
Method=”get/post”
Example :

<html>
<head>
<title>Form Tag</title>
</head>
<body>
<form action="#" method="post">
User Name: <input type="text" name="uname" placeholder="Enter your
Name:"> <br>
Password :<input type="text" name="pass"> <br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

You might also like