15348_lecture 25-29

8/6/2019 15348_Lecture 25-29

1/33

HTML

Lecture 25- 29

8/6/2019 15348_Lecture 25-29

2/33

2

Introduction to HTMLIntroduction to HTML

8/6/2019 15348_Lecture 25-29

3/33

3

Contents

Getting Started..

What is HTML?

How to create and View an HTML document?

Basic HTML Document Format

The HTML Basic tags

8/6/2019 15348_Lecture 25-29

4/33

What the following term mean:

4 Web server: a system on the internet containg one

or more web site4 Web site: a collection of one or more web pages

4 Web pages: single disk file with a single file name

4 Home pages: first page in website

Think about the followings before working

yourWeb pages.

4 Think about the sort of information(content) you want

to put on the Web.4 Set the goals for the Web site.

4 Organize your content into main topics.

4 Come up with a general structure for pages and

topics.

8/6/2019 15348_Lecture 25-29

5/33

5

What is HTML?

4Telling the browser what to do, and what props to use.

4 A serises of tags that are integrated into a text

document.

Tags are ;4 surrounded with angle brackets like this

* or .

4 Most tags come in pairs

* exceptions:

,
, tags 4 The first tag turns the action on, and the second turns it

off.

8/6/2019 15348_Lecture 25-29

6/33

6

4 The second tag(off switch) starts with a forward slash.

* For example , text

4 can embedded, for instance, to do this:

* Your text it won't work.

* The correct order is Your text

4 not case sensitivity.

4 Many tags have attributes.* For example,

centers the paragraph following it.

4 Some browsers don't support the some tags and some

attributes.

8/6/2019 15348_Lecture 25-29

7/33

7

Basic HTML Document Format

WENT'99

Went'99

See what it

looks like:

8/6/2019 15348_Lecture 25-29

8/33

8

How to Createand View an HTML document?

1.Use an text editor such as Editpad to write the

document.

2.Save the file as filename.html on a PC. This is called

the Document Source.

3.Open Netscape (or any browser) Off-Line

4.Switch to Netscape

5.Click on File, Open File and select the filename.html

document that you just created.

6.Your HTML page should now appear just like any

other Web page in Netscape.

8/6/2019 15348_Lecture 25-29

9/33

9

7.You may now switch back and forth between theSource and the HTML Document

switch to Notepad with the Document Source

make changes

save the document againswitch back to Netscape

click on RELOAD and view the new HTML

Document

switch to Notepad with the DocumentSource......

8/6/2019 15348_Lecture 25-29

10/33

10

Tags in head ...-- contains information about the

document

...-- puts text on the browser's title

bar.

8/6/2019 15348_Lecture 25-29

11/33

11

Tags in Body

Let's talk Text

Heading:

Center:

Line Break

,

Phrase Markups: ,

Createa List

Unordered list :

Ordered list:

Nested

8/6/2019 15348_Lecture 25-29

12/33

12

Add Images

Use tags

How to specify Relative pathnames

Attributes of IMG tag

-width,height-Alt

-Align

-

8/6/2019 15348_Lecture 25-29

13/33

13

Add some Link

Use tags

How to specify Relative pathnames

Kinds of URLs

-http://www.women.or.kr- ftp://ftp.foo.com/home/foo

- gopher://gopher.myhost.com/

- news://news.nuri.net

- mailto:[email protected]

8/6/2019 15348_Lecture 25-29

14/33

14

How to make colors changes?

Hexadecimal number :

Color names :

Changing the Background color

Changing Text color

Spot colorWENT'99

Image Background

8/6/2019 15348_Lecture 25-29

15/33

XHTML (formerly HTML)

Markup Language, not programminglanguage

WebDocuments use HTML format to:

structure and organize text, images, etc.

supports headings, paragraphs lists, tables, links,images, forms, frames, etc

HTML versions from 2.01 4.01 (most recent) Replaced by XHTML 1.0

An HTML document has 2 components

Markup tags (for page organization/formatting)

Content

8/6/2019 15348_Lecture 25-29

16/33

XHTML Elements (tags) More than 90 types

Some ofthem are as follows :-

Top-level elements

html, head, body

Head elements

title, link, meta, base, script

Block-level elements

h1-h6, p, ul, ol, li, table, etc

Inline elements

a, br, em, hr, img, strong, etc

8/6/2019 15348_Lecture 25-29

17/33

Headings & Paragraphs

largest, through smallest Use for document headings

Use other headings for section headings

for paragraphs, can contain inlineelements, but noblock-level elements

line wrappingis done automatically

white space (tabs, spaces, returns) is normallyignored

must be specified using specific tags
for line breaks

for single space between twowords that must be kept

together on the same line

8/6/2019 15348_Lecture 25-29

18/33

Lists

Block-level elements: Unordered list (bulleted):

Ordered list (numbered): Both & have list items, , for each element

in a list Definition list:

Each definition is specified by a definition descriptionelement,

Lists are formed according to hierarchicalnesting

All list tags require opening & closing tags withpropernesting

8/6/2019 15348_Lecture 25-29

19/33

Howwould you get the following list?

East

Central

West

East

Central

West

8/6/2019 15348_Lecture 25-29

20/33


1. Yankees2. Red Sox

3. Orioles

YankeesRed Sox

Orioles

8/6/2019 15348_Lecture 25-29

21/33


East

1. Yankees

2. Red Sox

3. Orioles

Central

West

East

YankeesRed Sox

Orioles

Central

West

8/6/2019 15348_Lecture 25-29

22/33

Howwould you get the following list?Monday

Read

pgs 50 -100

pgs 170 200

Review

Pgs 600-640Pgs 680-700

Tuesday

Monday

Read

pgs 50 -100

pgs 170 200

Review

pgs 600-650

pgs 680-700

Tuesday

8/6/2019 15348_Lecture 25-29

23/33

Quick review ofHTML block structures: lists and tables

Ordered Lists

8/6/2019 15348_Lecture 25-29

24/33

Unordered Lists

The type attribute can control bullet types (disc, circle,square)

8/6/2019 15348_Lecture 25-29

25/33

Hyperlinks

Inline element, musthave 2 tags

8/6/2019 15348_Lecture 25-29

26/33

Local Hyperlinks Use relative reference rather than absolute reference

Relative towhere the document with the link is

../means in the directory above the current file

./means in the same directory as the current file

XHTML.ppt

8/6/2019 15348_Lecture 25-29

27/33

Organizing your own site images

Place all images inside an images directory

Be sure to do this for all assignments

Inside your Web pages, you may then

reference the images using src="./images/"

When you upload your Web pages, upload

your entire images directory

Save the followingfile to an images directory andcorrect the URLs accordingly

http://www.du.edu/~jcalvert/hist/wh9j.jpg

8/6/2019 15348_Lecture 25-29

28/33

Images To display an image alone in a browser you may use the a tag.:

William Henry Harrison

To display an inline image within a page, use img:

URL points to a GIF, JPEG, or PNG

imgmay be placed in any block-level or inline element exceptpre

You should always include alt

8/6/2019 15348_Lecture 25-29

29/33

Tables

Basic structure

By default, table cells are drawn ofminimum height and width to accommodate the contents

ofthe cells.

8/6/2019 15348_Lecture 25-29

30/33

Properties ofthe whole table can be formatted using attributes ofthe table element.

(table definition) Block ElementATTRIBUTE POSSIBLE VALUES DEFAULTalign left, center, right

(make text flow around table)

left with text not flowing around table

background(background image)

URL (relative or absolute)

bgcolor(background color)

#hexcolor, named color inherited fr om bgcolorofunderlying

Web pageborder pixels 0cellpadding pixels browser dependent (about 1)cellspacing pixels browser dependent (about 2)height pixels, % minimum to accommodate table

contents

width pixels, % minimum to accommodate table

contents

8/6/2019 15348_Lecture 25-29

31/33

Properties ofsingle cells can be formatted using attributes ofthe tdelement.

(t d t c ) Us d on insid tr m ntATTRI TE POSSI E ALUES DEFAULTalig(horizontal alignment of

cell contents)

left, center, right left

valign (verticalalignment ofcell

contents)

top, middle, bottom middle

backgro(background image)

URL (relative or absolute)

bgcolor(background color)

#hexcolor, named color inherited from bgcoloroftable

containing the cell

cols a pixels 0ro s a pixels 0

eig t pixels, minimum to accommodate cell contentsi t pixels, minimum to accommodate cell contents

*< h > (table heading cell) Takes exact same attributes as td . In heading cells, text is

8/6/2019 15348_Lecture 25-29

32/33

Here is an example using several ofthese attributes.

8/6/2019 15348_Lecture 25-29

33/33

To create "irregular" tables, use the rowspa and olspa attributes ofthe tdelement.

The spanningis always to the right and down. Notice which td

elements are eliminated.