Experiment No. 2 Web Page Using HTML5 Title: Objective

FULL STACK DEVELOPMENT (BTCOL705)
Experiment No. 2
Web Page using HTML5
Title: Create simple web page using HTML5.
Objective: Objective of this module is to provide students an overview of the
concepts Web
Technologies, and HTML.
Scope: Create interactive and elegant web pages using HTML 5
HTML
• HTML stands for Hyper Text Markup Language.
• HTML file is a text file containing small markup tags.
• The markup tags tell the web browser how to display the page.
• HTML file must have .htm or .html file extension.
• HTML file can be created using a simple text editor.
HTML Tags
• HTML tags are used to mark-up HTML elements.
• HTML tags are surrounded by angle brackets.
• HTML tags normally come in pair like <i> and </i>.
The first tag in a pair is the start tag, and second tag is the end tag.
• The text between the start and end tags is the element content.
• HTML tags are not case sensitive.
• HTML Elements
• HTML documents are defined by HTML elements.
• An HTML element starts with a start tag.
• An HTML element ends with an end tag.
• The element content is text between the start and the end tag.
• Some HTML elements have empty content.
• Empty elements are closed in the start tag.
• HTML elements can have attributes.
ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 1

HTML Attributes
• Attributes provide additional information about HTML elements.
• Attributes are always specified in the start tag of element.
• Attributes come in name/value pairs like : name=“value”.
• Example <p align=“right”> this tag defined right aligned paragraph.
General structure of HTML document
It consists of following sections :
• HTML Tag-This tag specifies that it is HTML document.
• HEAD Tag-This tag contains meta information about HTML page. External
files can be added to web page by importing in HEAD section.
• TITLE Tag-This tag is included in HEAD tag .The text between <title>
and </title> will be displayed in title bar of web page.
• BODY Tag-The content of web page is included in body tag.
Example 1
<html>
<head>
<title>
</title>
</head>
<body>
Page body This is actual content of web page
</body >
</html>

Output:
Basic HTML tags

The most important tags in HTML are heading, paragraphs and line breaks.
Simple paragraphs
• HTML documents are divided into paragraphs.
• The paragraph element automatically creates some space before and after itself.
• Paragraphs are defined with the <P> tag.
• HTML automatically adds an extra blank line before and after a paragraph.
• Paragraph tag has one attribute align which specifies the alignment of the text
within a paragraph. It has value left, right, center.
Headings:
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading and <h6> defies the smallest heading.
Heading tag has one attribute align which specifies the alignment of the text within a
heading. It has value left, right, center, justify.

Example 2
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Output :
Line breaks
• The <br> tag is used when we want to end a line, but don‟t want to start a new
paragraph.
• The <br> tag forces a line break wherever we place it.
Character/Text formatting tags

TEXT FORMATTING TAGS
<b> Defines bold text
<i> Defines italic text
<big> Defines big text
<small> Defines small text
<em> Define emphasized text
<sub> Defines subscripted text
<sup> Defines superscripted text
<strong> Defines strong text
<strike> Strikeout text
<u> Underline text
<pre> Defines preformatted text
Example 3
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p>The example of subscript is H<sub> 2</sub>O and superscript is
10<sup>5</sup></p>
<pre>
This is preformatted text.
It preserves both spaces and line breaks.
</pre>
<u>this is underline text</u><br>
<strike>this text is strikeout text</strike>
</body>
</html>
Output :

Citations, Quotations, and Definition Tags
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document .
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
Example 4
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse
pointer over the acronym or abbreviation.</p>
</body>
</html>

Output:
Example 5
<html>
<body>
<p><b>In long quotation the browser inserts white space before and after a blockquote
element. It also insert margins.</b></p>
A long quotation example:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a
long
quotation. This is a long quotation.
</blockquote>
<p><b>In short quotation the browser inserts quotation marks around the short
quotation
</b></p>
A short quotation example :
<q>This is a short quotation</q>

</body>
</html>
Output
TML Comments
The comments tag is used to insert a comment in HTML code. The web browser
ignored the comment. The comment helps the developer to explain the code and to edit
the code.
Syntax- 
Horizontal Rule
• The <hr> tag creates a horizontal line in an HTML page.
• The hr element can be used to separate content in an HTML page.
• The <hr> tag has three attributes such as align, width, size.
• Align attribute specifies the alignment of hr element.
• Size attribute specifies the height of hr element in pixel.
• Width attribute specifies the width of hr element in pixel.

Example 6
<html>
<head>
<title>hr example</title>
</head>
<body>
The horizontal rule is used to separate two paragraph.
<p>This is some text.</p>
<hr align="left" size="5pixel" width="500pixel" />
<p>This is some text.</p>
</body>
</html>
Output

Font Tag
• The <font> tag specifies the font face, font size, and font colour of text.
• Font tag has three attributes size, colour and face.
• Size attribute specifies the size of text.
• Colour attribute specifies the colour of text.
• Face attribute specifies the font of text.
• Size attribute specifies the size of text.
Example 7
<html>
<head>
<title>font example</title>
</head>
<body><b>FONT EXAMPLE</b><br><br>
<font size="3" color="red">This is some text in red color!</font><br><br>
<font size="2" face="comic sans ms" color="blue">This is some text in blue
color!</font><br><br>
<font face="verdana" color="green">This is some text in green color!</font>
</body>
</html>
Output

Background
• The <body> tag has three attributes bgcolor, background and text which specify
the background of web page.
• Bgcolor : The bgcolor attribute specifies the background color. The value of this
attribute can be hexadecimal number, RGB value or name of a color.
Ex. < body bgcolor = “rgb(100,100,100)” >
• Background : The background attribute sets an image as the background. The
value of this attribute is the URL of the image which we want to set as
background.
<body background=“back.gif”>
• Text : The text attribute specifies the color of text.
<body text=“red”>

Example 8
<html>
<head>
<title>body example</title>
</head>
<body background="C:\Documents and Settings\All Users\Documents\My
Pictures\Sample Pictures\Winter.jpg" text="green">
<b>This is example of background tag</b>
</body>
</html>
Output
HTML links
• HTML uses the < a > (anchor) tag to create a link to another document.
• An anchor can point to any resource on the web- a HTML page, an image, a
sound file, a movie.
• Hyperlink or only link will take us to a new page on clicking the link.
The syntax of creating an anchor- <a href = “url”> Text to be displayed </a>
• An anchor tag has following attributes :
• Href attribute: Href is hypertext reference. This attribute specifies the
address of the document which we want to link.
• Name attribute: The name attribute is used to create a link within
document which is called as named anchor. Name anchor is used to create
link which directly point to the specific section in document. <a
name=“label”> some text </a>
• Target attribute : The target attribute specifies location where the linked
document will get opened.
Ex. <a href=“www.google.com” target=“_blank”> Google Web Site </a>
• <noframes> tag : The <noframes> tag is used for browsers that do not
handle frames.
Example 9(a)
<html>
<head>
<title>link example</title>
<body>
<a href=“page2.html”>
This is a link to page 2</a>
</body>
</html>
Example 9(b)
<html>
<body>
<center>THIS IS PAGE 2...</center>
</body>

Output :
Output (on clicking the link)

Example 10
<html>
<head>
<title>link example</title>
</head>
<body>
<p>
<a href="#c8">See chapter 8</a></p>
<p> <b> Chapter 1</b> </p>
<p> This is chapter 1</p>
<p> This is chapter 4</p> <p> <b> Chapter 5</b> </p>
<a name="c8"><p><b>Chapter 8</b></p></a>
<p>This is chapter 8</p>
<p><b>Chapter 9</b></p>

</body>
</html>
Output

Explanation
In this example name attribute is used to create a bookmark inside an HTML document.
HTML Frames
• HTML frames allows us to display more than one HTML document in the same
browser window.
• Each HTML document is called a frame and each frame is independent of the
others.
• We can use <frameset> and <frame> tag to create frame.
• We must include <frameset> tag instead of <body> tag.
• The frameset tag :
• The <frameset> tag defines how to divide the window into frames.
• The <frameset> tag defines a frameset.
• Each frameset defines a set of rows or columns.
• Cols-Specifies the number and size of columns in a frameset.
• Rows-Specifies the number and size of rows in a frameset.
The values of the rows or columns indicate the amount of screen area each
row or column will occupy.
• The frame tag :
• The <frame> tag defines what HTML document to put into each frame.
• The src attribute specifies the URL of the file which we want to display.
• Scrolling attribute control the appearance of the scrollbar within each
frame. It can
• have three values such as yes, no, auto.
• We can resize frames by simply clicking and dragging the frame border.
Noresize
• attribute avoids this.
• Name : Specifies the name of a frame.
• Marginheight : Specifies the top and bottom margins of a frame.
• Marginwidth : Specifies the left and right margins of a frame.

• The disadvantages of frames are :

(i) The web developer has to keep track of more HTML documents.
(ii) It is difficult to print the entire page.
Example 11(a)
<html>
<frameset cols=“25%,50%,25%”>
<frame src=“frame1.html” />
</frameset>
Example 11(b)
<html>
<head>
<title>frame1</title>
</head>
<body>
<center><h1>THIS IS FRAME 1</h1></center>
</body>
</html>
Example 11(C)
<html>
<head>
</head>
<body>

</body>
Example 11(d)
<html>
<head>
</head>
<body>
</body>
Output :

Example 12
<html>
<head>
<title>frame example</title>
</head>
<frameset rows="25%,75%">
<frame src="frame1.html" noresize="noresize" scrolling="no" />
<frameset cols="50%,50%">
<frame src="frame2.html" scrolling="yes"/>
<frame src="frame3.html" scrolling="no"/>
</frameset>
</frameset>
</html>
Output :

Example 13
<html>
<body>
<table border=“2”>
<caption>Student Information </caption>
<tr>
<th>Roll Number </th>
<th>NAME </th>
</tr>
<tr>
<td>101 </td>
<td>Priyanka Kulkarni</td>
</tr>
<tr>
<td>102 </td>
<td>Prachi Malpure</td>
</tr>
<tr>
<td>103 </td>
<td>Vedashri Awati</td>
</tr>
</table>
</body>
</html>

Output
Example 14
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<th rowspan="2">Persons</th>
<th colspan="2">Personal Information </th>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<tr>
<td>Tejas</td>
<td>125CM </td>
<td>34 </td>
</tr>
<tr>
<td>Sagar</td>
<td>175CM </td>
<td>75 </td>
</tr>
<tr>
<td>Mayuresh</td>
<td>135CM </td>
<td>40</td>
</tr>
</table>
</body>
</html>
Output:

HTML List
List is used to sequentially arrange the items in web page.
Inside a list item you can put text, line breaks, images, links, other lists, etc.
In HTML, there are 3 types of lists.
• Unordered lists
• An unordered list is a list of items.
• The list items are marked with bullets.
• An unordered list starts with the <ul> tag. Each list item starts with te <li>
tag.
• Ordered lists
• In ordered list, the items are marked with numbers.
• An ordered list starts with the <ol> tag.
• Definition lists
• A definition list is not a list of items. This is a list of terms and explanation
of the terms.
• A definition list starts with the <dl> tag. Each definition term starts with
the <dt> tag and each definition starts with the <dd> tag.
• <li>- tag defines a list item.
• The type attribute specifies which kind of bullet point will be used. It has
value 1, i, I, a, A, square, disc, circle.
• Value attribute specifies the number of a list item.
Example 15
<html>
<body>
<h4>A Nested List:</h4>
<ul type=“square”>
<li>Coffee</li>

<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ul>
<h4>A Definition List:</h4>
Input Output Devices
<dl>
<dt>Mouse</dt>
<dd>It is input device</dd>
<dt>Printer</dt>
<dd>It is output device</dd>
</dl>
</body>
</html>
Output

HTML Images
• <img> tag is used to display image in web page.
• The image tag has following attributes :
• Src : it specifies the source of image.

• Width : It specifies the width of image in pixels.
• Height : It specifies the height of image in pixels.
• Alt : alternate description of the image.
• Align : Specifies the alignment of an image according to surrounding
elements. It has
• value top, bottom, left, right, middle.
• Hspace : Specifies the whitespace on left and right side of an image
• Vspace : Specifies the whitespace on top and bottom of an image
Example 16
<html>
<body>
<img src=“ C:\Documents and Settings\All Users\Documents\My
Pictures\Sunset.jpg” height=100 width=300 align=“center”></img>
Pictures\Sample
</body>
</html>

Explanation
• This program shows how to use an image as a link.
Example 17
<html>
<body>
<p><b>Example of an image as link</b></p>
<p><b>This link point to a form</b></p>
<a href="formprogram.html">
<img src="E:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" width="32"
height="32" />
</a></p>
</body>
</html>

Output
HTML Forms
• HTML forms are used to pass data to a server.
• A form is an area that can contain form elements.
• Form elements are elements that allow user to enter information like
text fields, text area fields, radio buttons and checkboxes in a form.
• The most commonly used input types are :
• Text fields : Text fields are used when we want user to type
letters, numbers in a form. This is one-line input field.
Syntax : < input type = “text” name = “fname” >
• Password : The characters in a password field are masked.
Syntax : <input type=“password” name=“pwd”>
• Radio buttons : Radio buttons are used when we want the user
to select one of a limited number of choices. Only one option
can be chose.
Syntax : < input type = “radio” name = “r1” value = “maruti800”> maruti800
• Checkboxes : Checkboxes are used when we want the user to
select one or more options of a limited number of choices.
Syntax : <input type = “checkbox” name = “bike”> I like a bike
• Text Area Box : Text area allows multiple line of input. It has
two attributes rows and cols. The attribute determine the number
of rows and character columns in the text area field.
Syntax : < texarea rows = 10 cols = 40 name = “t1” >
• Selection Box : The <select> tag is used to create a menu of
items. The attribute .Name is the name assigned to the list.Size
specifies the size of list. To add the item in the list Option tag is
used.
• Syntax : <select name=“car” size=“2”>
<option>maruti800</option>
<option>tata sumo</option>
</select>
The form attribute : The following are the attributes of <form> tag :
1) Action attribute : Specifies where to send the form-data when a form is submitted
2) Method attribute :
• Specifies how to send form-data.
• The method attribute can have either value get or post.
3)Enctype : Specifies how form-data should be encoded before sending it to a server.
4) Name : Specifies the name for a form.
5) Target : Specifies where to open the action URL.
Example 18
<html>
<body>
<p>Registration Form
<form name=“registration_form” action=“action.asp” method=“get”>
First name: <input type=“text” name=“FirstName” value=“first name” /><br /><br />
Last name: <input type=“text” name=“LastName” value=“last name” /><br /><br />
Gender<br><input type=“radio” name=“gender” value=“male” /> Male<br />
<input type=“radio” name=“ gender” value=“female” /> Female<br>

<input type=“submit” value=“Submit” />

</form>
</p>
<p>If we click the “Submit” button, the form-data will be sent to a page called
“action.asp”.</p>
</body>
</html>
Output :
Example 19
<html>
<body>
<p>Personal InformationForm
<form name=“personal_form” action=“action.asp” method=“get”>
First name: <input type=“text” name=“FirstName” /><br /><br />
Middle name: <input type=“text” name=“FirstName” /><br /><br />
Last name: <input type=“text” name=“LastName” /><br/><br/>
Gender<br><input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name=" gender" value="female" /> Female<br>

Address
<p><textarea rows="5" cols="28" name="address"></textarea></p>
<p>Education<select name="edu'' size="2">
<option value="Graduate">Graduate</option>
<option value="UnderGraduate">UnderGraduate</option>
<option value="Doctor">Doctor</option>
</select></p>
<br /><br />
<p>
Hobbies<br>
<input type="checkbox" name="c1" value="reading"/>Reading
<input type="checkbox" name="c1" value="writing"/>Writing
<input type="checkbox" name="c1" value="sports"/>Sports
</p>
<input type="submit" value="Submit" />
</form>
</p>
</body>
</html>
Output :

Conclusion:-
Industrial Applications:- HTML5 has become the global web standard, used it to
benefit industrial application development. HTML5 A Powerful Tool for Mobile
Application Development
Questionnaire
1. What is HTML?
2. What are tags?
3. Do all HTML tags have end tag?
4. What is the difference between HTML elements and tags?
5. What is semantic HTML?

6. What is image map?
7. Does a hyperlink only apply to text?
8. What is a marquee?
9. How many tags can be used to separate section of texts?
10. What are empty elements?

Experiment No. 2 Web Page Using HTML5 Title: Objective

Uploaded by

Copyright:

Available Formats

Experiment No. 2 Web Page Using HTML5 Title: Objective

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Experiment No. 2 Web Page Using HTML5 Title: Objective

Uploaded by

Copyright:

Available Formats

FULL STACK DEVELOPMENT (BTCOL705)

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 1

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 2

Basic HTML tags

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 3

Character/Text formatting tags

<b> Defines bold text

<i> Defines italic text

<big> Defines big text

<small> Defines small text

<em> Define emphasized text

<sub> Defines subscripted text

<sup> Defines superscripted text

<strong> Defines strong text

<strike> Strikeout text

<u> Underline text

<pre> Defines preformatted text

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 6

Citations, Quotations, and Definition Tags

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines contact information for the author/owner of a document .

<bdo> Defines the text direction

<blockquote> Defines a long quotation

<q> Defines a short quotation

<cite> Defines a citation

<dfn> Defines a definition term

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 7

<q>This is a short quotation</q>

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 9

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 10

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 11

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 12

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 14

Output (on clicking the link)

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 15

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 16

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 17

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 18

• The disadvantages of frames are :

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 19

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 20

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 21

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 22

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 24

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 25

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 26

• Src : it specifies the source of image.

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 27

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 28

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 30

<input type=“submit” value=“Submit” />

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 31

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 32

5. What is semantic HTML?

ASST.PROF. PALLAVI D. PATIL( CSE DEPARTMENT,SETI,PANHALA) 34

You might also like