Scribd
Upload
3 views

Exp 3 - HTML Tags

This lab manual outlines Experiment No. 03 for students in the Computer Engineering Department, focusing on the study and application of basic HTML tags to create web pages. It covers essential HTML concepts such as tags, elements, attributes, lists, tables, images, forms, and various input types. The expected outcomes include the ability to design interactive web pages and format content effectively using HTML.

Uploaded by

lavanya.hexamide
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Exp 3 - HTML Tags

This lab manual outlines Experiment No. 03 for students in the Computer Engineering Department, focusing on the study and application of basic HTML tags to create web pages. It covers essential HTML concepts such as tags, elements, attributes, lists, tables, images, forms, and various input types. The expected outcomes include the ability to design interactive web pages and format content effectively using HTML.

Uploaded by

lavanya.hexamide
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

SVKM’s NMIMS

Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)


Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
PART A
(Part A: TO BE REFERRED BY STUDENTS)
Experiment No. 03
A.1 AIM:
Study of Basic HTML tags & create a web page or website using HTML tags.

A.2 Pre requisite:


Basic Knowledge of HTML and HTML tags.

A.3 Outcome:
After successful completion of this experiment students will be able to:

1. Design pages in HTML


2. Perform all formatting of text and images in HTML
3. Create tables and lists in HTML
4. Design interactive pages in HTML using Frames
5. Use various properties of Frames

A.4 Theory:
What is HTML?

HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language.
HTML is a markup language. A markup language is a set of markup tags. The tags describe
document content. HTML documents contain HTML tags and plain text. HTML documents are
also called web pages.

HTML Tags

HTML markup tags are usually called HTML tags. HTML tags are keywords (tag names)
surrounded by angle brackets like <html>. HTML tags normally come in pairs like <p> and
</p>. The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written
like the start tag, with a slash before the tag name. Start and end tags are also called opening tags
and closing tags
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual

HTML Element Syntax

An HTML element starts with a start tag / opening tag. An HTML element ends with an end tag /
closing tag. The element content is everything between the start and the end tag. Some HTML
elements have empty content. Empty elements are closed in the start tag. Most HTML elements
can have attributes.

HTML Attributes

HTML elements can have attributes. Attributes provide additional information about an element.
Attributes are always specified in the start tag. Attributes come in name/value pairs like:
name="value".

Example :
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

List
- Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Example:

<ul>
<li>Cricket</li>
<li>Tennis</li>
<li>Hockey</li>
</ul>

- Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
Example:

<ol>
<li>Cricket</li>
<li>Tennis</li>
<li>Hockey</li>
</ol>

- Description List

<dl> tag defines the description list


<dt> tag defines the term (name)
<dd> tag describes each term
Example:

<dl>
<dt>Static Web Page</dt>
<dd>- Do not change frequently</dd>
<dt>Dynamic Web Page</dt>
<dd>- Created at run time</dd>
</dl>

- Nesting of list is also possible.

Tables

- An HTML table is defined with the <table> tag.


- Each table row is defined with the <tr> tag.
- A table header is defined with the <th> tag.
- By default, table headings are bold and centered.
- A table data/cell is defined with the <td> tag.
- Example:

<table >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Sachin</td>
<td>Tendulkar</td>
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
<td>40</td>
</tr>
<tr>
<td>Rahul</td>
<td>Dravid</td>
<td>42</td>
</tr>
</table>

Cell that Span Many rows (Rowspan)

<table style="width:100%">
<tr>
<th>Name:</th>
<td>RAM Rao</td>
</tr>
<tr>
<th rowspan="2">Mobile:</th>
<td>123456</td>
</tr>
<tr>
<td>654321</td>
</tr>
</table>

Images
- Images help to make web page look attractive.
- We should always use images in jpg, gif or png, as browser supports these format.
- HTML images are defined with the <img> tag.
- Example

<img src="flower.jpg" alt="W3Schools.com" width="104" height="142">

- The compulsory attribute for <img> tag is src to specify URL of the image
o alt stands for Alternate Text – If the browser is not supporting Images it display
the value of ALT .
o height and width specify the height and width of the image.
- Img also has following attributes
o Hspace – specifies the amount of space to left and right of image.
o Vspace – Specifies the amount of space to top and bottom of an image.
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
o Border – Specifies border around an image.
o Align – Defines the alignment of image.
- Example:-
<img src="home.jpg" alt="Hill Climbing" hspace=250 vspace=250 border=10
align="right">

Its good practice to follow following html format:-


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Title</title>
</head>
<body>

</body>
</html>

Anchors <a>
Types of link:-

• Absolute (link to website )


• Relative (link to other files in same system(local file link), link to other section of
page)
• Internal
• Graphical

• <a> </a>Tag defines a hyperlink

• Attribute is href…
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
• By default, links will appear as follows in all browsers:

– An unvisited link is underlined and blue

– A visited link is underlined and purple

– An active link is underlined and red

- The HTML <body> vlink Attribute is used to specify a color of a visited


link in a Document.
- The HTML <body> alink Attribute is used to specify the color of an
active link in a document.
- The HTML <body> link Attribute is used to specify the default color for a
unvisited link in a document.

Target Attribute: -

- The target attribute specifies where to open the linked document.


- Syntax:-
<a target="_blank|_self|_parent|_top|framename">
- Attribute values:-

Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked
(this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framenam Opens the linked document in the named iframe
e

HTML Form
- Form is a container where user provides their information, this can be personal
information or feedback.
- <form> </form> are used to create interactive GUI
- Form contains following form elements.
- Elements of forms are
o Text Box.
o Text Area.
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
o Radio Button
o Check Box
o Drop Down List
o Buttons
o Files
o Slider etc….
- Forms cannot be nested, but a web page can contain multiple form.
- The actual working of form involves the setting of action and method(GET &
POST)attributes.
- Following elements can be used to create an HTML form
o Form
 Form elements defines form.& Form element support action attribute.
<form action= “confirm.html”>
 Confirm.html File will be opened when user submits the data of the form.
o Input
 It enables us to insert
 Radio button
 Check boxes
 Text box
 password
 input elements are implemented by <input></input> container tag.
 Following are the attributes of input
 Name
 Type
 Value
 MaxLength
 Size
o Select & option
 Used to create a menu or drop down list.
o Textarea
 In textarea user can enter large amount of text.
 Has following attributes
 Rows
 Cols
 name

Note:- Here table tag is used to go give proper look to form


SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
TextBox & Password
- Enables us to create text field.
- Values of input element is “text” for textbox.
- Values of input element is “password” for Password Field.

<form>
<tr>
<td align="right">user name</td>
<td><input type="text" name="usrnm” maxlenghth=15 size=10/></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="Password" name="pw" maxlenghth=15 size=10/></td>
</tr>
</form>
Output

Text Area
- Text Area is require for large amount of text.
- Following are commonly used attributes for <textarea>
o Rows
 Sets the number of rows of text that visible without scrolling up or down
in the fields.
o Cols
 Sets the number of rows of text that visible without scrolling left or right
in the fields.
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
o Name
 Specifies name of text area.
<form>
<tr>
<td align="right">User Details</td>
<td><textarea rows=5 cols=40></textarea></td>
</tr>
</form>

OutPut

Radio Button
- Values of input element is “radio” for radio.
- Enables to create radio button.
- We can select only one radio button at a time from group of radio buttons.
<form>
<tr>
<td align="Right"> Gender:
<input type="radio" name="gen" value="m">Male
<input type="radio" name="gen" value="F">Female
</td>
</tr>
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
</form>

Check Box

- Values of input element is “checkbox” for enabling checkbox.


- We can select multiple check boxes.
<form>

<tr>

<td align="Right"> Sports Interest:

<input type="checkbox" name="sprt" value="h">Hockey

<input type="checkbox" name="sprt" value="ft">FootBall

</tr>

</form>

Drop Down List

- The select element enables us to create a menu or drop down list in a form, depending on
the attribute specified.
- The Select element specifies that the text follows is a list.
- Select element is used with the option element.
- The option element enables us to specify the items of the list created using the select
element.
- Functionality of select element is similar to that of unordered list(<ul> </ul>) and
ordered list(<ol></ol>) element.
- The option element is similar to list item element (<li>)
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
- The select element is implemented by using <select> </select> tag
- The option element is implemented by using <option> </option> tag.

<td align="Right"> Branch:</td><td align="left">

<select name="Branch" size=“4”>

<option value="#">--Select--</option>

<option value="ce">Comp Engg</option>

<option value="cs">Comp Science</option>

<option value="cse">Comp Sci & Engg</option>

</select>

Button
- Values of input element is “submit” for submit button.
- Values of input element is “reset” for reset/clear button.
- Reset and Submit are buttons.
- “Submit” enables to create submit button, when we click submit button, the values of the
from are submitted to the web page specified in the action attribute of the form.
- “reset” enables to create reset/clear button , when we click reset button, the values
entered in the form are cleared automatically and set back to default values.
</tr>

< tr> <td colspan=2 align="center">

<input type="submit" value="Add to DB"/>


SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
<input type="reset" value="Clear"/>

</tr>

File
- Values of input element is “file” for uploading file.
- the file are submitted to the path/url specified in the action attribute of the form???

< tr>

<td align=“right"> Select Image to Upload

<input type=“file" value=“upload"/>

</tr>

Image Control
- Values of input element is “image” for graphical submit button.
- If any error occur to open image, then alt values will be displayed.
< tr>

<td align=“right"> Select Image to Upload

<input type=“image" src=“ dj.jpg” alt=“submit”/>

</tr>
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual

If we integrate above all code, it will generate following form as output.

Because the attributes used with input elements varies so much depending on the type of input
you want to use, we have provided several specific examples of using different types of input.

Color:-
<input type = "color"
value = "#001A57"
id = "clr"
">

 type is color picker


 value is default color value
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual

Slider/Range:
<input type = "range"
min = "10"
max = "100"
value = "10"
">

 type is slider
 min is minimum value, max is maximum value
 value is default value
 id lets us refer to input element in JavaScript

File:-

<input type = "file"


multiple = "false"
accept = "image/*"
">

 type is file
 multiple = "false" indicates user cannot select multiple files
 accept = "image/*" indicates user can only select image files
 value is default value
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
Frames
- Frame allows us to divide browser window into one or more sub regions.
- Each sub region displaying different HTML documents.
- By using frame in this way, we can view the data of all documents simultaneously.
- Frames are useful when we want to compare data.
- We can also use frame to display an index of link in one sub region and corresponding
document in another sub regions
- This way the index never goes out of sight while browsing through the documents.
- Frames divides the browser window horizontally or vertically.
- We can also nest frame with in a another frame.
- We can also display tables, links forms, and images through frame.
- A <frameset> tag is used to create frames in a web page.
- A standard frame has no body element and cannot contain tags normally placed in the
body element.
- If they appears in frame, frameset tag ignores.
- With <frameset> tag we can use <frame> and <noframe> tag.
- The frameset tag has two attributes
o Rows
o cols
- <frame> tag is used to display different html pages in different frame.
- <frame> has no matching end tag.
- <frame> tag has following attributes
o Src url of html file
o Name  assign name to frame
o Marginwidth can be used when user wants to control margin from frame
o Marginheight top and bottom margin
o Scrolling whether frame should have scroll bar or not..
o Noresize has no value & which means that frame cannot be resized by user.
o Frameboarder control the display of frame border.
o Framespacing  to set extra space around the frame.

- Use the name attribute to name a frame, then target the frame name with hyperlinks
- The syntax for naming a frame is as follows:
<frame src="url" name="framename"/>
- Load a web page into a frame using src attribute

Example:-
<html>
<head >
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
<title> Image</title>
</head>
<frameset cols="25%,*,25%">
<frame src="base.html">
<frame src="form7.html">
<frame src="img.html">
</frameset>
</html>

Ex1:

<frameset rows="40%,60%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>

Ex2 :
<frameset rows="16%,84%">
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset></frameset>

Create a static web pages using HTML


1. Create one HTML web page to interlink the webpages created in expt#2, use attributes
link, alink and vlink for text hyperlinks and other tags.
2. Create link to section within same page (of your CV implemented in expt#2)
3. Create all the tables in given format of CV, use attributes colspan, rowspan, cellspacing,
cellpadding and caption tag.
4. Use attribute type for lists in program 1 to change the type of sequence numbering &
different symbols for unordered list.
5. Registration page (Now, implement it using form tag)
6. One web page with frames implemented (to display all three web pages implemented in
expt #2) column-wise

Note: - Don’t use any type of CSS in your code…

1. Your CV: - Do all entries with your personal details in following format…

Create a webpage to display your Curriculum vitae (CV) as per following format.

B. TECH. COMPUTER ENGINEERING

Name: - Your Name


SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
OBJECTIVE:

Write single line objective

EDUCATION:

Degree Institute Board/ CGPA/Percentage Year


University
B. Tech Currently Pursuing
XII 2018
X 2016
Note: - if X & XII from same institute then use row span in institute column and If board is
same for X & XII use row span in Board/University Column.

TECHNICAL SKILLS:

Domain Details
Languages
Web Designing
Software
Database
Analytics
Operating Systems

KEY PROJECTS:

Project Title Duration Platform Brief Description


Used

TECHNICAL –PRESENTATION/WORKSHOPS/CERTIFICATION

 Program 1
 Program 2
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
TECHNICAL –WORK EXPERIENCE / INTERNSHIPS:

1. Internship 1
2. Internship 2
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
PART B

(PART B: TO BE COMPLETED BY STUDENTS)

(Students must submit the soft copy as per following segments within two hours of the practical. The
soft copy must be uploaded on the Blackboard or emailed to the concerned lab in charge faculties
at the end of the practical in case the there is no Black board access available)

Roll No. :A222 Name: Lavanya Jadhav


Class : MBA TECH Batch :
Date of Experiment : 25/01/2025 Date/Time of Submission : 25/01/2025
Grade :

B.1 Code:

First webpage:

Page 2:
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual

Page 3:
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual

B.2 Output

B.3 Conclusion:

In conclusion we learned to implement the different types of tags used in html and using these tags
created different webpages and also created framesets from it.

B.3 Observations and Learning:

Learned various tags that includes anchor tag, lists ,framesets, forms etc.
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual
Designed horizontal frames.

Linked three different html files into one file.

B.4 Question of Curiosity

(To be answered by student based on the practical performed and learning/observations)

1. Validate html code of your CV code… using following link…. (validate by direct
method )
https://validator.w3.org/

Input code to validator: -

Output of validator: -
SVKM’s NMIMS
Mukesh Patel School of Technology Management & Engineering (Mumbai Campus)
Computer Engineering Department (MBA-Tech Sem IV)
Web Programming
Lab Manual

You might also like