Teacher: CSC 330 E-Commerce

CSC 330 E-Commerce
Teacher
Ahmed Mumtaz Mustehsan

GM-IT CIIT Islamabad
Virtual Campus, CIIT

COMSATS Institute of Information Technology
T2-Lecture-1
HyperText Markup Language (HTML)
Part - II
For Lecture Material/Slides Thanks to: www.w3schools.com
Objectives
 HTML Head
 HTML Styles - CSS
 HTML Images
 HTML Tables
 HTML Lists
 HTML Blocks
 HTML Layouts
 HTML Forms and Input
 HTML iframes
3
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Head
The HTML <head> Element
 The <head> element is a container for all the head
elements. Elements inside <head> can include
scripts, instruct the browser where to find style
sheets, provide meta information, and more.
 The following tags can be added to the head
section: <title>, <style>, <meta>, <link>, <script>,
<noscript>, and <base>.
5
The HTML <title> Element
 The <title> tag defines the title of the document.
 The <title> element is required in all HTML/XHTML documents.
 The <title> element:
◦ defines a title in the browser toolbar
◦ provides a title for the page when it is added to favorites
◦ displays a title for the page in search-engine results
 A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
6
The HTML <base> Element
 The <base> tag specifies the base URL/target for
all relative URLs in a page:
<head>
<base href="http://www.comsats.edu.pk/images/"
target="_blank">
</head>
7
The HTML <link> Element
 The <link> tag defines the relationship between a
document and an external resource.
 The <link> tag is mostly used to link with style
sheets:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
CSS means Cascading Style Sheet
8
The HTML <style> Element
 The <style> tag is used to define style information
for an HTML document.
 Inside the <style> element you specify how HTML
elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
9
The HTML <meta> Element
 Metadata is data (information) about data.
 The <meta> tag provides metadata about the
HTML document. Metadata will not be displayed on
the page, but will be machine parsable.
 Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
 The metadata can be used by browsers (how to
display content or reload page), search engines
(keywords), or other web services.
 <meta> tags always go inside the <head> element.
10
<meta> Tags - Examples of Use
 Define keywords for search engines:
<meta name="keywords" content="HTML, CSS,
XML, XHTML, JavaScript">
 Define a description of your web page:
<meta name="description" content="Free Web

tutorials on HTML and CSS">
 Define the author of a page:
<meta name="author" content="Hege Refsnes">

 Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
11
The HTML <script> Element
 The <script> tag is used to define a client-side
script, such as a JavaScript.
 The <script> element will be explained in a later
chapter.
12
Review head Elements
13
Deprecated Tags and Attributes
 InHTML 4, several formatting tags and attributes
were used to style documents. These tags are not
supported in newer versions of HTML.
 Avoid using the elements: <font>, <center> and
<strike>, and the attributes: color and bgcolor.
Solution?
Use Style CSS
14
HTML Styles – CSS
( Cascading Style Sheets )
HTML Styles - CSS
 CSS was introduced together with HTML 4, to
provide a better way to style HTML elements.
 It removed the overhead of formatting every page
which was very time consuming.
Using styles in HTML:
 How to add style information inside the <head>
section ?
 How to make a link that is not underlined, with the
style attribute?
 How to use the <link> tag to link to an external style
sheet?
16
Styling HTML with CSS
 CSS can be added to HTML in the following ways:
◦ Inline - using the style attribute in HTML
elements
◦ Internal - using the <style> element in the
<head> section
◦ External - using an external CSS file
 The preferred way to add CSS to HTML, is to put

CSS syntax in separate CSS files usually adopted
by the web designer.
17
Inline Styles
 An inline style can be used if a unique style is to be
applied to one single occurrence of an element.
 To use inline styles, use the style attribute in the
relevant tag. The style attribute can contain any
CSS property.
Example to change the text color and the left margin

of a paragraph:
 <p style="color:blue;margin-left:20px;">This is a
paragraph.</p>
18
HTML Style Example - Background Color
 The background-color property defines the background
color for an element:
Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a
heading</h2>
<p style="background-color:green;">This is a
paragraph.</p>
</body>
</html>
The background-color property override the "old" bgcolor

attribute.
19
HTML Style Example - Font, Color and Size
 The font-family, color, and font-size properties defines
the font, color, and size of the text in an element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A
paragraph.</p>
</body>
</html>
 The font-family, color, and font-size properties override

the "old" bgcolor attribute.
20
HTML Style Example - Text Alignment
 The text-align property specifies the horizontal
alignment of text in an element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 The text-align property override the "old" text-allign

attribute.
21
Internal Style Sheet
 An internal style sheet can be used if one single
document has a unique style. Internal styles are
defined in the <head> section of an HTML page, by
using the <style> tag, like this:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
22
External Style Sheet
 An external style sheet is ideal when the style is
applied to many pages. With an external style
sheet, you can change the look of an entire Web
site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag
goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
23
Review Style Tags
24
HTML Tables
HTML Tables
HTML Table Example:
26
HTML Tables
 Tables are defined with the <table> tag.
 A table is divided into rows with the <tr> tag. (tr stands for table row)
 A row is divided into data cells with the <td> tag. (td stands for table
data)
 A row can also be divided into headings with the <th> tag. (th stands for
table heading)
 The <td> elements are the data containers in the table.
 The <td> elements can contain all sorts of HTML elements like text,
images, lists, other tables, etc.
 The width of a table can be defined using CSS.
Example
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
27
HTML Table Headings
 Table headings are defined with the <th> tag.
 By default, all major browsers display table headings as bold and centered:
Example
<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To left-align the table headings, use the CSS text-align property:

Example
th
{
text-align:left;
}
28
An HTML Table with Cell Padding
 Cell padding specifies the space between the cell
content and its borders.
 If you do not specify a padding, the table cells will
be displayed without padding.
 To set the padding, use the CSS padding property:
Example
th,td
{
padding:15px;
}
29
An HTML Table with Cell Spacing
 Cell spacing specifies the space between the cells.
 To set the cell spacing for the table, use the CSS
border-spacing property:
Example
table
{
border-spacing:5px;
}
30
HTML Table Tags
31
HTML Lists
HTML Lists
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list: An unordered list:

1.The first list item •List item
2.The second list item •List item
3.The third list item •List item
33
HTML Unordered Lists
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
 The list items are marked with bullets (typically
small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 How the browser displays:
•Coffee
•Milk
34
HTML Ordered Lists
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
 How the browser displays:
1.Coffee
2.Milk
35
HTML Description Lists
A description list is a list of terms/names, with a description of each
term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with
<dt> (defines terms/names) and
<dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the browser displays:
Coffee
- black hot drink
Milk
- white cold drink
36 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

Review List Tags
37
HTML Blocks
HTML Block Elements
 HTML elements can be grouped together with
<div> and <span>.
 Most HTML elements are defined as block level
elements or as inline elements.
 Block level elements normally start (and end) with
a new line when displayed in a browser.
 Examples: <h1>, <p>, <ul>, <table>
39
HTML Inline Elements
 Inline elements are normally displayed without
starting a new line.
 Examples: <b>, <td>, <a>, <img>
40
The HTML <div> Element
 The HTML <div> element is a block level element that
can be used as a container for grouping other HTML
elements.
 The <div> element has no special meaning. Except
that, it tells the browser to display a line break before
and after the block.
 When used together with CSS, the <div> element can
be used to set style attributes to large blocks of content.
 Another common use of the <div> element, is for
document layout. It replaces the "old way" of defining
layout using tables. Which was incorrect as the correct
use/ purpose of the <table> element is to display tabular
data.
41
The HTML <span> Element
 The HTML <span> element is an inline element
that can be used as a container for text.
 The <span> element has no special meaning.
 When used together with CSS, the <span> element
set style attributes to parts of the text.
42
Review Grouping Tags
43
HTML Layouts
Website Layouts
 Web page layout is very important to make your
website look good.
 Design your webpage layout very carefully.
 Most websites put their content in multiple columns
(formatted like a magazine or newspaper).
 Multiple columns are created by using <div> or
<table> elements.
 CSS are used to position elements, or to create
backgrounds or colorful look for the pages.
45
Using <div> Elements
Example uses five div elements to create a multiple column layout: demo !!!
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">CSC 330 E-Commerce </h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
<b>Track-2 </b><br>
HTML<br>
CSS<br>
XML<br>
JavaScript <br>
PHP</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;">
Covers Basic Web Technologis</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com / vcomsats.edu.pk </div></div></body></html>
46 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Layouts - Using Tables
 A simple way of creating layouts is by using the
HTML <table> tag.
 Multiple columns are created by using <div> or
<table> elements.
 CSS are used to position elements, or to create
backgrounds or colorful look for the pages.
 Using <table> to create a nice layout is NOT the
correct use of the element. The purpose of the
<table> element is to display tabular data!
47
Useful Tips for Page layout
 The biggest advantage of using CSS is that, we
place the CSS code in an external style sheet, our
site becomes MUCH EASIER to maintain. we can
change the layout of all pages by editing one file.
 Advanced layouts take time to create, so a quicker
option is to use a template.
 Google provides free website templates (these are
pre-built website layouts you can use and
customize).
48
Review Layout Tags
49
HTML Forms and Input
HTML Forms and input
HTML Forms
are used to select different user inputs.
are used to pass data to a server.
can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more.
 can also contain select lists, textarea, fieldset,
legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
51
The Input Element
 The most important form element is the <input>
element.
 The <input> element is used to select user
information.
 An <input> element can vary in many ways,
depending on the type attribute. An <input>
element can be of type text field, checkbox,
password, radio button, submit button, and more.
52
Text Fields
The most common input type is text:
<input type="text"> defines a one-line input field
that a user can enter text into:
<form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
53
Password Field
 <input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Note: The characters in a password field are masked

(shown as asterisks or circles).
54
Radio Buttons
 <input type="radio"> defines a radio button. Radio
buttons let a user select ONLY ONE of a limited
number of choices:
<form>
<input type="radio" name="sex"
value="male">Male<br>
<input type="radio" name="sex"
value="female">Female
</form>
55
Checkboxes
 <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
 <form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>
56
Submit Button
 <input type="submit"> defines a submit button.
 A submit button is used to send data to a server.
 The data is sent to the page specified in the form's
action attribute. The file defined in the action
attribute usually does something with the received
input.
57
HTML Form Tags
58
HTML iframes
HTML Iframes
 An iframe is used to display a web page within a
web page.
Syntax for adding an iframe:
 <iframe src="URL"></iframe>
 The URL points to the location of the separate
page.
60
Iframe - Set Height and Width
 The height and width attributes are used to specify
the height and width of the iframe.
 The attribute values are specified in pixels by
default, but they can also be in percent (like
"80%").
Example
 <iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
61
Iframe - Remove the Border
 The frameborder attribute specifies whether or not
to display a border around the iframe.
 Set the attribute value to "0" to remove the border:
Example
 <iframe src="demo_iframe.htm"
frameborder="0"></iframe>
62
Review iframe Tag
63
The End HTML Part-II
Thank You
T2-Lecture-1 Ahmed Mumtaz 1-

Mustehsan www.w3schools.com 64

Teacher: CSC 330 E-Commerce

Uploaded by

Copyright:

Available Formats

You might also like

Teacher: CSC 330 E-Commerce

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

Teacher: CSC 330 E-Commerce

Uploaded by

Copyright:

Available Formats

CSC 330 E-Commerce

Ahmed Mumtaz Mustehsan

Virtual Campus, CIIT

CSS means Cascading Style Sheet

<meta name="description" content="Free Web

<meta name="author" content="Hege Refsnes">

<meta http-equiv="refresh" content="30">

 The preferred way to add CSS to HTML, is to put

Example to change the text color and the left margin

The background-color property override the "old" bgcolor

 The font-family, color, and font-size properties override

 The text-align property override the "old" text-allign

To left-align the table headings, use the CSS text-align property:

An ordered list: An unordered list:

36 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

Note: The characters in a password field are masked

T2-Lecture-1 Ahmed Mumtaz 1-

You might also like