Lecture E-Commerce - Chapter 17: Hypertext markup language (HTML) (part II)
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 (415.69 KB, 65 trang )
CSC 330 E-Commerce
Teacher
Ahmed Mumtaz Mustehsan
GM-IT CIIT Islamabad
Virtual Campus, CIIT
COMSATS Institute of Information Technology
T2-Lecture-2
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-2
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
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
The HTML <title> Element
The <title> tag defines the title of the document 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
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
The HTML <base> Element
The
<base> tag specifies the base URL/target for
all relative URLs in a page.
It defines a default address or a default target for
all links on a page:
<head>
<base href=" />target="_blank">
</head>
7
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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>
href="mystyle.css">
</head>
CSS means Cascading Style Sheet
8
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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:blue;}
p {color:yellow;}
</style>
</head>
9
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
<meta> Tags - Examples
Define keywords for search engines:
Define a description of your web page:
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
11
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
Review head Elements
13
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
Deprecated Tags and Attributes
In
HTML 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>,
<strike>, and the attributes: color and bgcolor.
Solution?
Use Style CSS
CSS means Cascading Style Sheet
14
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
HTML Styles – CSS
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 ?
16
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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:
This is a
paragraph.
18
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
Inline Style – using style attributes
Define
the background-color using style attribute:
Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
This is a
heading
This is a
paragraph.
</body>
</html>
The background-color property override the
previously defined background color in the block
<body>
19
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
Inline Style Font, Color and Size attributes
font-family, color, and font-size properties using
style attributes:
Define
Example
<!DOCTYPE html>
<html>
<body>
A heading
A
paragraph.
</body>
</html>
The
font-family, color, and font-size properties override
the previously defined attributes:
20
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
HTML Style Example - Text Alignment
Define
text-align property specifies the horizontal
alignment of text using style attributes:
Example
<!DOCTYPE html>
<html>
<body>
Center-aligned
heading
This is a paragraph.
</body>
</html>
demo!!!
21
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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>
demo !!!
22
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
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>
href="mystyle.css">
</head>
23
T2-Lecture-2
Ahmed Mumtaz Mustehsan
www.w3schools.com
Sample CSS File “myfile.css”
body
{
font-family: arial;
}
h1
{
background-color:#CCC;
border: 1px solid;
color:#39F;
text-align: center;
}
table
{
background-color: #F60;
border: 1px solid #39F;
width: 100%;
}
T2-Lecture-2
Ahmed Mumtaz Mustehsan
td
{
border: 0px;
text-align: center;
}
p
{
color:#09F;
text-indent: 20px;
}
www.w3schools.com
Review Style Tags
25
T2-Lecture-1
Ahmed Mumtaz Mustehsan
www.w3schools.com
