Lecture E-Commerce - Chapter 18: Hypertext markup language (HTML) (part I)
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (450.42 KB, 55 trang )
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
and
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.
) and an end tag (e.g.
), with thecontent in between:
This is a paragraph.
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 started with 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
element:
◦
This is my first paragraph.
The
element defines a paragraph in the HTML
document.
The element has a start tag
and an end tag
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>
This is my first paragraph.
</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>
This is my first paragraph.
</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:
◦
This is a paragraph
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.
is an empty element without a closing tag (the
tag defines a line break).
Tip: In XHTML, all elements must be closed.
Adding a slash inside the start tag, like
, 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
.
Many web sites use uppercase HTML tags.
Recommendations
15
T2-Lecture-1
are use lowercase
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
