Software Engineering
Module: Web UI Programming
Topic: HTML
Value Minds IT Services Pvt Ltd
HTML Basics
The content in this presentation is aimed at teaching
learners to:
• Format HTML document using basic HTML tags
Display lists of items in different formats
• Insert images in the WebPages
2
HTML Basics
What are HTML tags?
Used to mark-up HTML elements.
Surrounded by the two characters < and >
(angle brackets).
Normally in pairs like <b> and </b> where
first is start tag and the second tag is end tag.
The text between the start and end tags is the
element content.
Not case sensitive.
3
HTML Basics
Tag Attributes
Provide additional information about the HTML
elements.
The <tag> tells the browser to do something, while
the attribute tells the browser how to do it.
Always come in name/value pairs like this:
name="value".
Added to the start tag of an HTML element and the
value is surrounded by single or double quotes.
<h2 align='center'>This is a heading</h2>
4
HTML Basics
Basic HTML Tags
Starting Tag : <html>
Body Tag: <body>
Headings Tag: <h1> to <h6>
Paragaraph Tag: <p>
Break Tag: <br>
Horizontal Rule Tag: <hr>
Comments… Tag: <!– xxx -->
5
HTML Basics
Preview <h1>This is a heading</h1>
<h2 align='center'>This is a heading</h2>
<h3 align='right'>This is a heading</h3>
<h4 align='center'>This is a heading</h4>
<h5 align='left'>This is a heading</h5>
<h6 align='right'> This is a heading</h6>
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
6
HTML Basics
Some Important Text Formatting Tags
<b> Bold Bold
<i> Italic Italic
<u> Underline Underline
<s> Strike Strike
<big> Defines big text
Big
<small> Define small Text Small
<sup> superscripted text Super
Script
<sub> subscripted text Sub Script
<strong> Strong Text Strong
<em> Emphasis Emphasis
<strike> Strike Text Strike
7
HTML Basics
HTML Fonts
Used to define the layout and display properties of HTML elements.
Specifies the font face, font size, and font color of text.
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="Verdana“ color="green">This is some
This is
text!</font> some text! This is some text! This is some text!
8
HTML Basics
Problem
Code Expected Result
<body> int a = 1,b=2; int a = 1,b=2;
int a = 1,b=2; <br> if(a<b) if(a print “a is big”
if(a<b) <br>
print “a is big”<br>
print “a is big” else
else<br> else print “b is big”
print “b is big” <br> Print “b is big”
</body>
9
HTML Basics
HTML Character Entities
Result Description Entity Name Entity Number
non-breaking  
space
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' '
(does not work in IE)
Note: Entities are case sensitive.
10
HTML Basics
Nested Tags
Nested When you enclose an element within multiple tags,
Tag
the last tag opened should be the first tag closed.
For example:
<p><em>This is the<b>proper <sup>way</sup> to close
<b>nested tags. </em></p>
Preview:
This is the proper way
to close nested tags.
11
Lists and Links
Three kinds of Listing
Unordered Lists
Ordered Lists
Definition Lists
12
Lists and Links
Unordered Lists
Unordered Lists i.e. no item numbers:
• Starts with the <ul> tag
• Each list item starts with the <li> tag
Example:
<ul type=”disc”>
• Coffee
<li>Coffee</li>
• Milk
<li>Milk</li>
</ul>
Other values of ‘type’ attribute are square and circle.
By default value is disc.
13
Lists and Links
Ordered Lists
• The list items are marked with numbers
• Starts with the <ol> tag
• Each list item starts with the <li> tag
Example:
<ol type=”1”>
<li>Coffee</li> 1. Coffee
<li>Milk</li>
2. Milk
</ol>
• Inside a list item, you can put paragraphs, line breaks, images,
links, other lists, etc.
• Other values of ‘type’ attribute are A,a,I,i.
• Default value is 1, to change value use start/value attribute.
14
Lists and Links
Definition Lists
Consist of two parts, a term and a description.
Need three HTML elements: Cascading Style Sheets
Style sheets are used to
a container <dl> provide presentational
suggestions for documents
a definition term <dt>
marked up in HTML.
a definition description <dd> World Wide Web
A global, interactive,
dynamic, cross-platform,
graphical, hypertext
information system
<dl> HTML
<dt> Cascading Style Sheets</dt> Hyper Text Markup
<dd>Style sheets are used to provide Language used to design
presentational suggestions for documents web pages.
marked up in HTML.</dd>
</dl>
15
Images and Tables
<img> Tag
• <img> is used to display an image on a page.
• <img> tag is an empty tag that contains attributes only
and do not have closing tag.
• Use the src (Source) attribute i.e., URL or the path of
the image to be displayed .
16
Images
Example: <img src="graphics/valueminds.gif“>
The browser will look for the image name talentsprint.gif
in a graphics folder in the same folder where the html
document itself resides. This is called Relative Path.
Example:
<img src=“http://
dashboard.valueminds.com/images/valuemindslogo.jp
g
">
In this case it is called Absolute Path. As it doesn’t
related to the current directory
17
Images and Tables
<img> Attributes
Image Dimensions
• Height: Specifies the height of an image in pixels or %
• Width: Specifies the width of an image in pixels or %
Border
• Specifies the width of the border in terms of pixels around an
image.
18
Images
Alignment of Images
align
• Specifies the alignment of an image according to surrounding
elements
• left, right, top, middle, bottom are the values of align
attributes
Example:
<img src=“ts.gif” align=“right”>
19
Images
Alignment of Images
Example:
<p> This is text in paragraph tag… <img src=“ts.gif”
align=“top”></p>
Example:
<p> This is text in paragraph tag… <img src=“ts.gif”
align=“bottom”></p>
"middle” value can be used similarly
20
HTML Basics
21