Lecture E-Commerce - Chapter 17: Hypertext markup language (HTML) (part II)

In this chapter, the following content will be discussed: HTML Head, HTML Styles – CSS, HTML Images, HTML Tables, HTML Lists, HTML Blocks, HTML Layouts, HTML Forms and Input, HTML iframes.

Trang 1

CSC 330 E-Commerce

Teacher

Ahmed Mumtaz Mustehsan

GM-IT CIIT Islamabad

COMSATS Institute of Information Technology

T2-Lecture-2

Trang 2

HyperText Markup Language (HTML)

Part - II

For Lecture Material/Slides Thanks to: www.w3schools.com

Trang 4

HTML Head

Trang 5

The HTML <head> Element

elements Elements inside <head> can include

scripts, instruct the browser where to find style

sheets, provide meta information, and more

section:

<title>, <style>, <meta>, <link>, <script>,

5 T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com

Trang 6

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

Trang 7

The HTML <base> Element

all relative URLs in a page

all links on a page:

<head>

</head>

Trang 8

The HTML <link> Element

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

Trang 9

The HTML <style> Element

for an HTML document

elements should render in a browser:

Trang 10

The HTML <meta> Element

HTML document Metadata will not be displayed on the page, but will be machine parsable

description, keywords, author of the document, last modified, and other metadata

Trang 11

<meta> Tags - Examples

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Trang 12

The HTML <script> Element

The <script> tag is used to define a client-side

chapter

Trang 13

Review head Elements

Trang 14

Deprecated 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

CSS means Cascading Style Sheet

Trang 15

HTML Styles – CSS

Trang 16

HTML Styles - CSS

provide a better way to style HTML elements

which was very time consuming

Trang 17

Styling HTML with CSS

◦Inline - using the style attribute in HTML

elements

◦Internal - using the <style> element in the

<head> section

◦External - using an external CSS file

CSS syntax in separate CSS files usually adopted

by the web designer

Trang 18

Inline Styles

applied to one single occurrence of an element

relevant tag The style attribute can contain any

Trang 19

Inline Style – using style attributes

The background-color property override the

previously defined background color in the block

<body>

Trang 20

Inline Style

Inline Style Font, Color and Size attributes

 Define font-family, color, and font-size properties using

Trang 21

HTML Style Example - Text Alignment

Trang 22

Internal Style Sheet

document has a unique style Internal styles are

defined in the <head> section of an HTML page, by using the <style> tag, like this:

Trang 23

External Style Sheet

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:

Trang 24

Sample CSS File “myfile.css”

T2-Lecture-2 Ahmed Mumtaz Mustehsan www.w3schools.com

text-align: center; }

p { color:#09F;

text-indent: 20px; }

Trang 25

Review Style Tags

Trang 26

HTML Tables

Trang 27

HTML Tables

HTML Table Example:

Trang 28

HTML Tables

 Tables are defined with the <table> tag.

 A table is divided into rows with the <tr> tag (tr : table row)

 A row is divided into data cells with the <td> tag (td : table data)

 A row can be divided into headings with the <th> tag (th :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.

Trang 29

HTML Table Headings

 Table headings are defined with the <th> tag.

 By default, all major browsers display table headings as bold and centered:

Trang 30

An HTML Table with Cell Padding

content and its borders

be displayed without padding

Trang 31

An HTML Table with Cell Spacing

Trang 32

HTML Table Tags

Trang 33

HTML Lists

Trang 34

HTML Lists

An ordered list:

1 The first list item

2 The second list item

3 The third list item

Trang 35

HTML Unordered Lists

An unordered list starts with the <ul> tag

Each list item starts with the <li> tag

small black circles)

<ul>

<li> Coffee </li>

Trang 36

HTML Ordered Lists

An ordered list starts with the <ol> tag

Each list item starts with the <li> tag

Trang 37

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):

- white cold drink

Trang 38

Review List Tags

Trang 39

HTML Blocks

Trang 40

HTML Block Elements

elements or as inline elements.

a new line when displayed in a browser

Examples: <h1>, <p>, <ul>, <table>

Trang 41

HTML Inline Elements

starting a new line

Examples: <b>, <td>, <a>, <img>

Trang 42

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.

Trang 43

The HTML <span> Element

that can be used as a container for text

set style attributes to parts of the text within the

block section

Trang 44

Review Grouping Tags

Trang 45

HTML Layouts

Trang 46

Website Layouts

website look good

(formatted like a magazine or newspaper)

<table> elements

backgrounds or colorful look for the pages

Trang 47

HTML Layouts - Using Tables

HTML <table> tag

<table> elements

backgrounds or colorful look for the pages

correct use of the element The purpose of the

<table> element is to display tabular data!

Trang 48

Using <div> Elements

Example uses five div elements to create a multiple column layout: demo !!!

<!DOCTYPE html>

<html>

<body>

<h1 style="margin-bottom:0;">CSC 330 E-Commerce </h1></div>

Covers Basic Web Technologis</div>

<! 4 > <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Trang 49

Useful Tips for Page layout

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

option is to use a template

pre-built website layouts you can use and

customize)

Trang 50

Review Layout Tags

Trang 51

HTML Forms and Input

Trang 52

HTML Forms and input

HTML Forms

checkboxes, radio-buttons, submit buttons and more

and label elements

Trang 53

The Input Element

element

information

depending on the type attribute An <input>

element can be of type text field, checkbox,

password, radio button, submit button, and more

Trang 54

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:

Trang 55

Note: The characters in a password field are masked

(shown as asterisks or circles)

Trang 56

Radio Buttons

<input type="radio"> defines a radio button Radio buttons let a user select ONLY ONE of a limited number of choices:

Trang 57

<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>

Trang 58

Submit Button

<input type="submit"> defines a submit button

action attribute The file defined in the action

attribute usually does something with the received input

Trang 59

HTML Form Tags

Trang 60

HTML iframes

Trang 62

Iframe - Set Height and Width

the height and width of the iframe

default, but they can also be in percent (like

Trang 63

Iframe - Remove the Border

to display a border around the iframe

Set the attribute value to "0" to remove the border:

Trang 64

Review iframe Tag

Trang 65

The End HPML Part-II Thank You

Định dạng
Số trang	65
Dung lượng	415,69 KB