HTML Basics
Trainer- Renuka S
How the Web Works?
WWW use classical client / server architecture
• HTTP is text-based request-response protocol
HTTP
Page request
HTTP
Server response
Server running
Client running a
Web Server
Web Browser
Software (IIS,
Apache, etc.) 2
What is a Web Page?
Web pages are text files which holds information containing
HTML
HTML-Hyper Text Markup Language
Why Webpage? To share the Info universally in an standard
form without any software requirements.
3
Three Layers of Web page
• Structural Layer-
Contents of webpage-HTML
• Presentation Layer
Look and Feel of Webpage-CSS
• Behaviour Layer
Interaction for User Interface-JavaScript
Creating HTML Pages
An HTML file must have an .htm or .html file extension
HTML files can be created with text editors:
• NotePad, NotePad ++, Visual Studio Code, Sublime Text, ATom
5
HTML Basics
Text, Images, Tables, Forms
HTML Structure
Anatomy Of Tag- Opening and Closing tag
<html> <head></head> <body></body> </html>
Tag can have attributes (Name and Value
pair)
<img src="logo.jpg" alt="logo" />
7
HTML Structure
8
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>
9
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>
10
First HTML Page: Tags
<!DOCTYPE HTML>
<html>
Opening
tag
<head>
<title>My First HTML Page</title>
</head>
<body> Closing
<p>This is some text...</p> tag
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the
content inside.
11
First HTML Page: Header
<!DOCTYPE HTML>
HTML
header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
12
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
13
The <head> Section
Contains information that doesn’t show directly
on the viewable page
Starts after the <!doctype> declaration
Begins with <head> and ends with </head>
Contains mandatory single <title> tag
Can contain some other tags, e.g.
• <meta>
• <script>
• <style>
• <!–- comments -->
14
<head> Section: <title> tag
Title should be placed between <head> and
</head> tags
Used to specify a title in the window titlebar
Search engines and people rely on titles
15
<head> Section: <script>
The <script> element is used to embed scripts into an HTML
document
• Script are executed in the client's Web browser
• Scripts can live in the <head> and in the <body> sections
Supported client-side scripting languages:
• JavaScript (it is not Java!)
• VBScript
• JScript
16
Text Formatting Tags
Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
Sections: div and span
<div style="background: skyblue;">
This is a div</div>
17
Text Formatting Tags
Bold Tag
<b> Text Formatting</b>
Italic Tag
<i> Text Formatting</i>
Underline Tag
<u> Text Formatting</u>
Subscript and Superscript
<sub> and <sup>
18
Text Formatting
Text formatting tags modify the text between the opening tag and the
closing tag
• Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
19
Text Formatting
Live Demo
Headings and Paragraphs –
Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body bgcolor=“pink”>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
21
Headings and Paragraphs –
Example (2)
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
22
Self Closing Tags
Self Closing Tags
<HR>- Horizontal Line
<BR>- Break the text into new line
<IMG>-Display the image
Can also be used as <hr/>,<img/> and <br/> also.
Other Tags-
<strong>,<em>,<q>,<blockquote>,<abbr>,<acronym>,<ad
dress>,<del>,<ins> and <s>
Miscellaneous Tags
<hr />: Draws a horizontal rule (line):
<hr size="5" width="70%" />
<center></center>: Deprecated!
<center>Hello World!</center>
<font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
<font face=“roboto” size=‘5’ color=“red”>
24
Miscellaneous Tags – Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>
25
<Marquee> Tag
-HTML Support to scrollable texts and images
<marquee behavior="scroll" direction="up"
scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right"
scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left"
scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right"
scrollamount="50">Very Fast Scrolling</marquee>
26
Images: <img> tag
Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
Example:
<img src="./php.png" alt="PHP Logo" />
<img src=“logo.jpg" alt="PHP Logo" />
<img src="img_girl.jpg" alt="Girl" width="500" height="600“
27
Images: <img> tag
Image in another folder -/images/html5.gif
Image on Another server-
https://unsplash.com/images/nature/flower
Image as Link:<a><img></a>
28
Creating Lists
Live Demo
Ordered Lists: <ol> Tag
Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
Attribute values for type are 1, A, a, I, or i
1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
30
Unordered Lists: <ul> Tag
Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
Attribute values for type are:
• disc, circle or square
• Apple o Apple Apple
• Orange o Orange Orange
• Pear o Pear Pear
31
Definition lists: <dl> tag
Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renders without bullets 32
Lists – Example
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
33
Hyperlinks: <a> Tag
Link to a document called form.html on the
same server in the same directory:
<a href="form.html">Fill Our Form</a>
Link to a document called parent.html on the
same server in the parent directory:
<a href="../parent.html">Parent</a>
Link to a document called cat.html on the
same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
34
Hyperlinks: <a> Tag (2)
Link to an external Web site:
<a href="http://www.devbg.org" target="_blank">BASD</a>
• Always use a full URL, including "http://", not just
"www.somesite.com"
• Using the target="_blank" attribute opens the link in a new
window
Link to an e-mail address:
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
35
Hyperlinks: <a> Tag (3)
Link to a document called apply-now.html
• On the same server, in same directory
• Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
Link to a document called index.html
• On the same server, in the subdirectory english of
the parent directory:
<a href="../english/index.html">Switch to
English version</a> 36
Hyperlinks and Sections
Named Anchors-Link to another location in the same document
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>
Link to a specific location in another document:
<a href="chapter3.html#section3.1.1">Go to Section
3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
37
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
38
Hyperlinks – Example (2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
39
Hyperlinks
Live Demo
Links to the Same Document –
Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
41
Links to the Same Document –
Example (2)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
42
Links to the Same Document
Live Demo
HTML Special Characters
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
45
Special Characters – Example
<p>[>> Welcome special-chars.html
<<]</p>
<p>►I have following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy™</p>
46
Special Chars – Example (2)
<p>[>> Welcome special-chars.html
<<]</p>
<p>►I have following cards:
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
47
The <div> Tag
<div> creates logical divisions within a page
Block style element
Used with CSS
Example:
div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
48
<SPAN>
Live Demo
The <span> Tag
Inline style element
Useful for modifying a specific portion of text
• Don't create a separate area (paragraph) in the document
Makes sense only with some CSS
<p>This one is <span style="color:red; font-
span.html weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
50
HTML Tables
HTML Tables
Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
Tables comprised of several core tags: <table></table>:
begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS
52
floats and
positioning styles instead
HTML Tables
Start and end of a table
<table> ... </table>
Start and end of a row
<tr> ... </tr>
Start and end of a cell in a row
<td> ... </td>
53
Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
54
</table>
Complete HTML Tables
Table rows split into three semantic sections: header, body and
footer
• <thead> denotes table header and contains <th> elements,
instead of <td> elements
• <tbody> denotes collection of table rows that contain the very
data
• <tfoot> denotes table footer but comes BEFORE the <tbody> tag
• <colgroup> and <col> define columns (most 55often used to set
column widths)
Complete HTML Table: Example
<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup>
header th
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body
(data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody> 56
</table>
Cell Spacing and Padding
Tables have two important attributes:
cellspacing cellpadding
cell cell cell cell
cell cell cell cell
Defines the Defines the empty
empty space space around the cell
between cells content
57
Cell Spacing and Padding – Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
58
</html>
Column and Row Span
Table cells have two important attributes:
colspan rowspan rowspan="
colspan=" 1"
colspan=" rowspan="
1" 1" 2"
cell[1,1 cell[1,2 cell[1,2
] ] ]
cell[1,1]
cell[2,1
cell[2,1]
]
colspan=" rowspan="
Defines how Defines how 1"
2"
many columns many rows the
the cell cell occupies
59
occupies
Column and Row Span – Example
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
60
<iframe> Tag
• inline frame is used to embed another document within
the current HTML document.
• src attribute is used to specify the URL of the document
<iframe width="560" height="315"
src="https://www.youtube.com/embed/FzG4uDgje3M"
frameborder="0" allow="; autoplay; clipboard-write;
encrypted-media;picture-in-picture"
allowfullscreen></iframe>
61
<Audio> Tag
• used to embed sound content in a document
• Supported audio formats in HTML: MP3, WAV, and OGG.
• Contains one or more <source>tags with different audio
sources
<audio src=“song.mp3” controls> --</audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio> 62
<Video> Tag
• used to embed video content in a document
• Supported video formats in HTML: MP4, WebM, and
OGG.
• Contains one or more <source>tags with different video
sources
<video src=“song.mp4” controls width=“250”> --</video>
<video controls width=“450”>
<source src="horse.ogg" type=“video/ogg">
<source src="horse.mp4" type=“video/mp4">
Your browser does not support the video tag.
</video> 63
HTML Forms
Entering User Data from a Web
Page
HTML Forms
Forms are the primary method for
gathering data from site visitors
The “method" attribute tells
Create a form block with how the form data should be
<form></form> sent – via GET or POST request
Example:
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action"
65
attribute tells
where the form data should be
Form Fields
Single-line text input fields:
<input type="text" name="FirstName" value="This
is a text field" />
Multi-line textarea fields:
<textarea name="Comments">This is a multi-line
text field</textarea>
Hidden fields contain data not shown to
the user:
<input type="hidden" name="Account" value="This
66
is a hidden text field" />
Form Input Controls
Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />
Radio buttons:
<input type="radio" name="title" value="Mr." />
Radio buttons can be grouped, allowing only one to be selected
from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse"
67 />
Other Form Controls
Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
Submit button: <input type="submit" name="submitBtn"
value="Apply Now" /> 68
Other Form Controls
Password input – a text field which masks
the entered text with * signs
<input type="password" name="pass" />
Multiple select field – displays the list of
items in multiple lines, instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
69
</select>
Other Form Controls
File input – a field used for uploading files
<input type="file" name="photo" />
• When used, it requires the form element to
have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form> 70
Labels
Form labels are used to associate an explanatory text to a form field
using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
Clicking on a label focuses its associated field (checkboxes are
toggled, radio buttons are checked)
Labels are both a usability and accessibility feature
71 and are required
in order to pass accessibility validation.
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br /> 72
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
HTML Forms – Example
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form> 73
