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 - I
For Lecture Material/Slides Thanks to: www.w3schools.com
Synopsis
Introduction
to HTML
HTML Elements
HTML Editors
HTML Basics
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Text Formatting
HTML Comments
HTML Hyperlinks (Links)
3 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
What is HTML?
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
4 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
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
<tagname>content</tagname>
5 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Elements
HTML Elements
In HTML, most elements are written with a start tag
(e.g. <p>) and an end tag (e.g. </p>), with the
content in between:
<p>This is a paragraph.</p>
7 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Elements
HTML documents are defined by HTML elements.
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
8 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Document Example
9
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Example Explained
The <p> element:
◦ <p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML
document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
10
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Example Explained…
The <body> element:
◦ <body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML
document.
The element has a start tag <body> and an end tag
</body>.
The body element content is another HTML element (a
p element).
11
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Example Explained…
The <html> element:
◦ <html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <html> element defines the whole HTML
document.
The element has a start tag <html> and an end tag
</html>.
The element content is another HTML element (the
body element).
12 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Example Explained…
Don't Forget the End Tag
Some HTML elements might display correctly even
if you forget the end tag:
◦ <p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers,
because the closing tag is considered optional.
Never rely on this. Many HTML elements will
produce unexpected results and/or errors if you
forget the end tag.
13 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Empty HTML Elements
HTML elements with no content are called empty
elements.
<br> is an empty element without a closing tag (the
<br> tag defines a line break).
Tip: In XHTML, all elements must be closed.
Adding a slash inside the start tag, like <br />, is
the proper way of closing empty elements in
XHTML (and XML).
14
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive:
<P> means the same as <p>.
Many web sites use uppercase HTML tags.
Recommendations are use lowercase
15 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Web Browsers
The purpose of a web browser (such as Google
Chrome, Internet Explorer, Firefox, Safari) is to
read HTML documents and display them as web
pages.
The browser does not display the HTML tags, but
uses the tags to determine how the content of the
HTML page is to be presented/displayed to the
user.
16 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Page Structure
17 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to
display a web page correctly.
There are many different documents on the web,
and a browser can only display an HTML page
100% correctly if it knows the HTML version and
type used.
18 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Versions
19 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Write HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML
editor like:
◦ Adobe Dreamweaver
◦ Microsoft Expression Web
◦ CoffeeCup HTML Editor
Notepad (PC) or TextEdit (Mac) are recommended
to use at least once for gaining understanding.
20 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Steps to Create Your First Web Page
Step 1: Start Notepad
To start Notepad go to:
Start
All Programs
Accessories
Notepad
21 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Steps to Create Your First Web Page…
Step 2: Add HTML Code
Type your HTML code into your Notepad:
22 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Steps to Create Your First Web Page…
Step 3: Save HTML Page
Select File -> Save as.. in Notepad's menu.
while saving an HTML file, use:
either .htm
or .html file extension.
23 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Steps to Create Your First Web Page…
Step 4: View HTML Page in Your Browser
Start your web browser and open your html file from
the File, Open menu, or just browse the folder and
double-click your HTML file.
The result should look much like this:
24 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Tip - How to View HTML Source
When you see a Web page and wondered
“How did they do that ? “
“right-click”in the page and select "View Source" (IE)
or "View Page Source" (Firefox), or similar for other
browsers. That will open a window containing the
HTML code of the page.
25 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Basics
HTML Paragraphs
HTML documents are divided into paragraphs.
Paragraphs are defined with the <p> tag.
Examples:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Browsers automatically add an empty line before and after a
paragraph.
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end
tag:
Example
◦<p>This is a paragraph
◦<p>This is another paragraph
It might work in most browsers, but forgetting the end tag can produce
unexpected results or errors. Future version of HTML will not allow to
skip end tags.
27 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1> Ahmed Mumtaz Mustehsan </h1>
<h2> Teacher </h2>
<h3> CSC 330 E Commerce </h3>
28
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Headings Are Important
Use HTML headings for headings only. Don't use
headings to make text BIG or bold.
Search engines use headings to index the structure and
content of your web pages.
Since users may skim your pages by its headings, it is
important to use headings to show the document
structure.
H1 headings should be used as main headings, followed
by H2 headings, then the less important H3 headings,
and so on.
29 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading.
Example
◦ <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
demo !!
Note: Browsers automatically add some empty space (a
margin) before and after each heading.
30 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Attributes
Attributes provide additional information about HTML
elements.
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 links are defined with the <a> tag. The link
address is specified in the href attribute:
<a href="http://www.comsats.edu.pk"> comsats website
</a>
31 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Always Quote Attribute Values
Attribute values should always be enclosed in
quotes.
Double style quotes are the most common, but
single style quotes are also allowed.
Note:
In some rare situations, when the attribute value itself
contains quotes, it is necessary to use single
quotes: name=‘COMSATS Institute of Information
Technology “CIIT" '
32 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Tip: Use Lowercase Attributes
Attribute names and attribute values are case-
insensitive.
However, the World Wide Web Consortium (W3C)
recommends lowercase attributes/attribute values in
their HTML 4 recommendation.
Newer versions of (X)HTML will demand lowercase
attributes.
33 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Links
HTML links are defined with the <a> tag.
Example
◦ <a href="http://comsats.edu.pk"> university
website </a>
◦ Note: The link address is specified in the href
attribute.
demo !!
34
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Images
HTML Images
HTML images are defined with the <img> tag.
Images can be inserted in to HTML documents.
How to insert images into an HTML document ?
How to insert an image from another folder or
another server?
36 T1-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
If <img> tag is empty, i.e. no closing tag, means it
contains attributes only.
To display an image on a page, we need to use the src
attribute. Src stands for "source". The value of the src
attribute is the URL of the image we want to display.
Syntax for defining an image:
<img src="url" alt="some_text">
The URL points to the location where the image is
stored. An image named “monogram.gif", located in the
"images" directory on “www.vcomsats.edu.pk " has the
URL:
http://www.vcomsats.edu.pk/images/monogram.gif.
The browser displays the image where the <img> tag
occurs in the document. If we put an image tag between
two paragraphs, the browser shows the first paragraph,
then the image, and then the second paragraph.
37 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for
an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="smiley.gif" alt="Smiley face">
The alt attribute provides alternative information for an
image if a user for some reason cannot view it (because
of slow connection, an error in the src attribute, or if the
user uses a screen reader).
38
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Set Height and Width of an Image
The height and width attributes are used to specify
the height and width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="42"
height="42">
Tip: It is a good practice to specify both the height
and width attributes for an image. If these attributes
are set, the space required for the image is reserved
when the page is loaded. However, without these
attributes, the browser does not know the size of the
image. With the result the page layout will change
during loading
39
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Images
Example
<!DOCTYPE html>
<html>
<body>
<p><b>Raining Day</b></p>
<img src="raining.gif" alt=“vcomsats.edu.pk" width="400"
height="200">
<p><b>Its raining Cats and Dogs</b></p>
</body>
</html>
demo !!
40 T1-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
Useful Tips
Note:
If an HTML file contains ten images - eleven files are
required to display the page right.
Loading images takes time. So !!!Use images
carefully.
When a web page is loaded, the browser, gets the
image from a web server and inserts it into the page.
Therefore, make sure that the images are available in
the same location in relation to the web page,
otherwise the visitors will get a broken link icon.
The broken link icon is shown if the browser cannot
find the image.
41
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Image Tags
42
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Lines
The <hr> tag creates a horizontal line in an HTML
page.
The hr element can be used to separate content:
Example
◦ <p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
43 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Line Breaks
Use the <br> tag creates a new line without starting
a new paragraph:
Example
◦ <p>This is<br> a para <br> graph with line
breaks</p>
Note: The <br> element is an empty HTML
element. It has no end tag.
44 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Output
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will
create different results.
With HTML, you cannot change the output by
adding extra spaces or extra lines in your HTML
code.
The browser will remove extra spaces and extra
lines when the page is displayed. Any number of
lines count as one line, and any number of spaces
count as one space.
Solution ?
Use Formatting tags
45 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Formatting Tags
HTML Text Formatting Tags
HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.
These HTML tags are called formatting tags
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a
way that the user understands as "important". Today, all major
browsers render strong as bold and em as italics. However, if a
browser one day wants to make a text highlighted with the strong
feature, it might be cursive for example and not bold!
Example demo!!!
◦ This text is bold
This text is italic
This is computer output
This is subscript and superscript
47
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Text Formatting Tags…
48
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Comments
HTML Comment Tags
Comment tags <!-- and --> are used to insert comments
in HTML.
You can add comments to your HTML source by using
the following syntax:
◦ <!-- Write your comments here -->
Note: There is an exclamation point (!) in the opening
tag, but not in the closing tag.
Comments are not displayed by the browser, but they
can help document your HTML.
With comments you can place notifications and
reminders in your HTML:
Example
◦ <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
50
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Comment Tags…
Comments are also useful for debugging HTML, because you can
comment out HTML lines of code, one at a time, to search for
errors:
Example
◦ <!-- Do not display this at the moment
<img border="0" src="/images/pulpit.jpg" alt="Pulpit
rock" width="304" height="228">
-->
Conditional Comments
You might stumble upon conditional comments in HTML:
◦ <!--[if IE 8]>
.... some HTML here ....
<![endif]-->
Conditional comments defines HTML tags to be executed by IE
only.
51
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Links
HTML Hyperlinks (Links)
Links are found in nearly all Web pages. Links allow users to click their
way from page to page.
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can
click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will
turn into a little hand.
The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
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 code for a link is simple. It looks like this:
◦ <a href="url">Link text</a>
The href attribute specifies the destination of a link.
53
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
HTML Links - The target Attribute
The target attribute specifies where to open the linked
document.
The example below will open the linked document in a
new browser window or a new tab:
Example
◦ <a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
54
T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com
The End HPML Part-I
Thank You
