Introduction to HTML II Shih-Heng Chin Preface Structure of a - - PowerPoint PPT Presentation

▶

Sep 22, 2023 107 likes •388 views

Introduction to HTML II Shih-Heng Chin Preface Structure of a HTML File Elements used frequently Tables Structure of a HTML File (HTML Version Information) Head Title Meta Data Body Important Meta Data Content-type Type Charset

SLIDE 1

Introduction to HTML II

Shih-Heng Chin

SLIDE 2

Preface

Structure of a HTML File Elements used frequently Tables

SLIDE 3

Structure of a HTML File

(HTML Version Information) Head Title Meta Data Body

SLIDE 4

Important Meta Data

Content-type Type Charset Refresh

SLIDE 5

Example

<!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN" "http:/ /www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Home - Web</title> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <meta http-equiv="refresh" content="10;URL=http:/ /www.yam.com"> </head> <body> Hi </body> </html>

SLIDE 6

Result

SLIDE 7

Elements Used Frequently

Text: FONT, B, I Paragraph: P, BR, PRE. ❋Space characters (Block: DIV , SPAN) List: OL, UL, LI Figure: IMG Hyperlink: A

SLIDE 8

Structure of A Tag

<BODY bgcolor=”#FFFFFF”> Element name: BODY Attribute: Name: bgcolor Value: #FFFFFF Start tag: <BODY> End tag: </BODY>

SLIDE 9

Attribute of FONT

size Value: 1, 2, 3, 4, 5, 6, 7 +n or -n color face

SLIDE 10

Example of FONT

SLIDE 11

B, I

B Text in Bold Font <STRONG> I Text in Italic Font <EM>

SLIDE 12

P, BR

P Form a paragraph BR Add a line break Start tag only, there isn’t </BR>

SLIDE 13

PRE and Space Characters

In HTML, all continued space characters, include space and tab, are merged into one space only. Use PRE to control space character manually.

SLIDE 14

Example of PRE

Without PRE: int main(void)<br> {<br> return 0;<br> } With PRE: <pre> int main(void) { return 0; } </pre>

SLIDE 15

List - OL, UL, LI

OL Ordered lists UL Unordered lists LI List items

SLIDE 16

Example of List

<ol> <li>Project Name</li> <li>Team Member</li> <li>Timeline </li> </ol> <ul> <li>CD</li> <li>LD</li> <li>DVD</li> </ul>

SLIDE 17

Attributes of IMG

src - Location of image file, URI (protocol:/ / host/folder/resouse) width height alt - Text for user can’t display images border Start tag only

SLIDE 18

Attributes of A

href target Frame id Window id _blank, _top, _parent, _self

SLIDE 19

Tables

Basic Table Structure Merge cells

SLIDE 20

Basic Table Structure

Cell Row Table

SLIDE 21

Table Elements

TABLE Row: TR Cell: TD, TH

SLIDE 22

Attribute of TABLE

bgcolor border width, height cellspacing cellpadding

SLIDE 23

width, height of TABLE

pixels width=”300” percent width=”90%”

SLIDE 24

border, cellspacing, cellpadding

border cellspacing cellpadding

SLIDE 25

Example of TABLE

1 2 3 4 5 6 7 8 9

SLIDE 26

Merge Cells

Attributes of TD rowspan Merge cells in the same column colspan Merge cells in the same row

SLIDE 27

Example of Merging Cells