HTML
Bhavika Darji
Department of Computer Science & Engineering
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 1
Engineering
Outline
1. Introduction to HTML – List
• What is a Web Page? – Anchor
• My First HTML Page – Image
• HTML Code Formatting 3. HTML Tables
2. Basic HTML Tags 4. HTML Forms
• Heading 5. XHTML
• Paragraph 6. Introduction to HTML 5
• Color
• Font
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 2
Engineering
Lecture Structure
05
Outline & Objectives
Minutes
05
Recap of Previous Lecture
Minutes
30 Delivery of Actual Content as per
Minutes Lesson Plan
05
Industry Relevance
Minutes
10
Minutes Interactive Activities
02
Importance of Discipline
Minutes
03
Recording of Attendance
Minutes
Reference: Office Order No. Provost/092023135, Date: 18th September 2023
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 3
Engineering
What is a Web Page?
• Web page is text file containing HTML
• HTML – Hyper Text Markup Language
– A notation for describing
• document structure (semantic markup)
• formatting (presentation markup)
• The markup tags provide information about
the page content structure
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 4
Engineering
Creating HTML Pages
• An HTML file must have an .htm or .html
file extension
• HTML files can be created with text editors:
– NotePad, NotePad ++, PSPad
• Or HTML editors (WYSIWYG Editors):
– Microsoft FrontPage
– Macromedia Dreamweaver
– Netscape Composer
– Visual Studio
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 5
Engineering
First HTML Page
test.html
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 6
Engineering
HTML Structure
• HTML is comprised of “elements” and “tags”
– Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body>
</html>
• Tags have attributes:
<img src="logo.jpg" alt="logo" />
• HTML describes structure using two main
sections: <head> and <body>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 7
Engineering
HTML Code Formatting
• The HTML source code should be formatted to
increase readability and facilitate debugging.
– Every block element should start on a new line.
– Every nested (block) element should be indented.
– Browsers ignore multiple whitespaces in the page source,
so formatting is harmless.
• For performance reasons, formatting can be
sacrificed
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 8
Engineering
First HTML Page: Tags
<!DOCTYPE HTML>
Opening tag
<html>
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the content inside.
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 9
Engineering
First HTML Page: Header
HTML header
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 10
Engineering
First HTML Page: Body
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 11
Engineering
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 12
Engineering
Basic HTML Tags
1. Headings
2. Paragraph
3. Colors
4. Fonts
5. List
6. Anchor Tag
7. Image
8. Table
9. Form
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 13
Engineering
1) Headings
Headings are important because search engines use
the headings to index the structure and content of
your web pages.
<h1> text </h1> -- largest of the six
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6> -- smallest of the six
align="position" --left (default), center or right
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 14
Engineering
2) <p> paragraph
<p> defines a paragraph
Add align="position" (left, center, right)
Multiple <p>'s do not create blank lines
Use <br> for blank line
Fully-specified text uses <p> and </p>, but </p> is
optional
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 15
Engineering
3) Colors
Values for bgcolor and color
• many are predefined (red, blue, green, ...)
• all colors can be specified as a six character hexadecimal
value: #RRGGBB
• #FF0000 – red
• #888888 – gray
• #00FF00 –green
• #000000 – black
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 16
Engineering
4) Fonts
The <font> tag specifies the font face, font size, and color
of text.
The <font> tag is not supported in HTML5.
<font color="red" size="2" face="Times Roman">
This is the text of line one </font>
<font color="green" size="4" face="Arial">
Line two contains this text </font>
<font color="#FF9933" size="6" face="Courier“>
The third line has this additional text </font>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 17
Engineering
Ordered List 5) List
1. Block-A a) Block-A A. Block-A i. Block-A I. Block-A
2. Block-B b) Block-B B. Block-B ii. Block-B II. Block-B
c) Block-C C. Block-C iii. Block-C III. Block-C
3. Block-C
d) Block-D D. Block-D iv. Block-D IV. Block-D
4. Block-D
Unordered o Block-A Block-A
List o Block-B Block-B
– Block-A o Block-C Block-C
– Block-B o Block-D Block-D
– Block-C
– Block-D
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 18
Engineering
<ol>
5.1) Ordered List
<li> Item one </li>
Types:
<li> Item two </li>
<ol type="I" > Type = 1 (default)
<li> Sublist item one </li> Type = a
<li> Sublist item two </li> Type = A
<ol type="i"> Type = I
<li> Sub-sub list item one </li> Type = i
<li> Sub-sub list item two </li> Output
</ol>
</ol>
</ol>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 19
Engineering
<ul>
5.2) Unordered List
<li> One </li>
Types:
<li> Two </li>
<ul type="circle"> Type = disc (default)
<li> Three </li> Type = circle
<li> Four </li> Type = square
<ul type="square">
<li> Five </li>
<li> Six </li> Output
</ul>
</ul>
</ul>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 20
Engineering
6) <a> Anchor Tag (Hyperlinks)
The <a> tag defines a hyperlink, which is used to link from one
page to another.
Link to an absolute URL:
If you get spam, contact <a href="http://www.microsoft.com">
Microsoft </a> to report the problem.
Link to a relative URL:
See these <a href=“./index.php"> references </a>
concerning our fine products.
Link to a section within a URL:
<a href=“#reference">
Reference Section. </a>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 21
Engineering
7) Images
Syntax :
<img src=“PathToImage”/>
src is required
alt will specify the text to display if the Image not found
width, height may be in units of pixels or percentage of page
or frame
• width="357"
• height="50%“
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 22
Engineering
Images (cont.)
<img src="dolphin.jpg" align="left" width="150" height="150"
alt="dolphin jump!">
align=position Image/Text Placement
Left Image on left edge; text flows to right of image
Right Image on right edge; text flows to left
Top Image is left; words align with top of image
Bottom Image is left; words align with bottom of image
Middle Words align with middle of image
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 23
Engineering
Image (cont.) => align=“bottom”
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 24
Engineering
Image (cont.) => align=“right”
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 25
Engineering
8) Table
<table> table tag
<table border=1>
<caption> optional table title
<caption>Table Caption</caption>
<tr> table row
<tr>
<th> table column header
<th>Heading1</th>
<td> table data element
<th>Heading2</th>
</tr>
<tr>
<td>Row1 Col1 Data</td>
<td>Row1 Col2 Data</td>
</tr>
<tr>
<td>Row2 Col1 Data</td>
<td>Row2 Col2 Data</td>
</tr>
</table>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 26
Engineering
Table Element Attributes
align=position -- left, center, right for table
border=number -- width in pixels of border (default 0)
cellspacing=number -- spacing in pixels between cells, default
about 3
cellpadding=number -- space in pixels between cell border and
table element, default about 1
width=number[%]-- width in pixels or percentage of page/frame
width
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 27
Engineering
Table Row <tr> Attributes
Valid for the table row:
align -- left, center, right
valign -- top, middle, bottom
bgcolor -- background color
<table align="center" width="300" height="200">
<tr align="left" valign="top" bgcolor="red">
<td>One</td>
<td>Two</td>
</tr>
<tr align="center" valign="middle" bgcolor="lightblue">
<td>Three</td>
<td>Four</td>
</tr>
<tr align="right" valign="bottom" bgcolor="yellow">
<td>Five</td>
<td>Six</td>
</tr>
</table>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 28
Engineering
Irregular Table
Valid for the table cell:
colspan b c
- how many columns this cell occupies a
rowspan
d
- how many rows this cell occupies
<table align="center" width="300" height="200"
border="1">
<tr>
<td colspan="1" rowspan="2">a</td>
<td colspan="1" rowspan="1">b</td>
<td colspan="1" rowspan="1" >c</td>
</tr>
<tr>
<td colspan=“2" rowspan="1">d</td>
</tr>
</table>
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 29
Engineering
9) HTML Form
<form> is just another kind of HTML tag
HTML forms are used to create GUIs on Web pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio buttons,
drop-down menus, etc
• Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in the
form elements to the server
• The form’s parameters tell browser how to send the information to the
server (there are two different ways it could be sent)
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 30
Engineering
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 31
Engineering
The <form> Tag
The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
The arguments to form tell what to do with the user input
• action="url" (required)
• Specifies where to send the data when the Submit button is clicked
• method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 32
Engineering
Input tags
• Text field
– Example: <input type=“text” name=“inputname”/>
• Password field
– Example: <input type=“password” name=“inputname”/>
• Radio buttons
– Example:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
• Check boxes
– Example:
<input type="checkbox" name="Roll1"> Roll No 1 <br/>
<input type="checkbox" name="Roll2"> Roll No 2 <br/>
18/07/2025
<input type="checkbox"
Bhavika Darji, Dept.name="Roll3">
of Computer Sc. & Roll No 3 <br/> 33
Engineering
Input tags (cont.)
• Dropdown list
– <select> tag is used to create a drop-down list in HTML.
– <option> tags inside the <select> tag define the available options in the list.
– Example:
<select>
<option value=“1”>Rajkot</option>
<option value=“2”>Ahemdabad</option>
<option value=“3”>Surat</option>
</select>
– Example (multiple select):
<select multiple="multiple">
<option value=“1”>Rajkot</option>
<option value=“2”>Ahemdabad</option>
<option value=“3”>Surat</option>
</select> Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 34
Engineering
Input tags (cont.)
• Text area
– <textarea> tag defines a multi-line text
input control.
– Example :
<textarea rows=“8” cols=“30”>
GSFC university is a leading institute ….
</textarea>
• Submit Button
– Submit button is used to submit the data
to the form action url.
• Example :
<input type=“submit”
Bhavika Darji, Dept.value=“Add
of Computer Sc. & City”>
18/07/2025 35
Engineering
In every lecture, Faculty may talk on any of the following:
• DCS & GSFCU Portal: Remind students to use DCS, talk about it’s features and instruct all to visit GSFCU
website
• Discipline, Values and Ethics.
• GSFC University – My University: Emphasize the importance of taking ownership of the University.
• Respect & Courtesy: Remind students to be respectful to peers, teachers, and staff. Encourage polite language
and behavior.
• Punctuality: Emphasize the importance of arriving on time to class and completing assignments by deadlines.
• Classroom Rules: Reinforce basic classroom rules, such as keeping mobile phones on silent and maintaining a
clean environment.
• Safety: Remind students about safety protocols, whether it's physical safety in the classroom or digital safety
when using online resources.
• Positive Attitude: Encourage a positive mindset, cooperation and supporting one another.
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 36
Engineering
GSFCU & Values
Font
Type: Verdana
Size: 20 / 18 / 16
Colour: Black
Respect & Courtesy
Bhavika Darji, Dept. of Computer Sc. &
18/07/2025 37
Engineering
