web pages: creating and maintaining **

21
WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli [email protected] http://udel.edu/~frankr Instructor: Wednesday: 10:15 -11:15 Week 3

Upload: macha

Post on 10-Jan-2016

30 views

Category:

Documents


1 download

DESCRIPTION

WEB PAGES: CREATING AND MAINTAINING **. Wednesday: 10:15 -11:15. Instructor:. Frank Romanelli [email protected] http://udel.edu/~frankr. Week 3. On ALL Web Pages. . Basic HTML Tags. On ALL Web Pages. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: WEB PAGES: CREATING AND MAINTAINING **

WEB PAGES: CREATING AND MAINTAINING **

Frank Romanelli

[email protected]

http://udel.edu/~frankr

Instructor:

Wednesday: 10:15 -11:15

Week 3

Page 2: WEB PAGES: CREATING AND MAINTAINING **

Basic HTML Tags

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

On ALL Web Pages

Page 3: WEB PAGES: CREATING AND MAINTAINING **

Basic HTML Tags

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

On ALL Web Pages

<P> </P>

<BR>

<B> </B>

<I> </I>

<U> </U>

Formatting Tags

<SUB> </SUB> = Subscript e.g. H2O

<SUP> </SUP> = Superscript e.g. Today is September 23rd

H<sub>2</sub>O

Today is September 23<sup>rd</sup>

Page 4: WEB PAGES: CREATING AND MAINTAINING **

Basic HTML Tags

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

On ALL Web Pages

< P > < /P >

< BR >

<B> < /B >

< I > < /I >

<U> </U>

Formatting Tags

<SUB> </SUB>

<SUP> </SUP>

Page 5: WEB PAGES: CREATING AND MAINTAINING **

Basic HTML Tags

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

On ALL Web Pages

< P > < /P >

< BR >

<B> < /B >

< I > < /I >

<U> </U>

Formatting Tags

<SUB> </SUB>

<SUP> </SUP>

&nbsp; non-breaking spaceThis is one space, but this has extra spaces.

This is one space, but &nbsp; &nbsp; &nbsp; this has extra spaces.

Page 6: WEB PAGES: CREATING AND MAINTAINING **

Basic HTML Tags

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

On ALL Web Pages

< P > < /P >

< BR >

<B> < /B >

< I > < /I >

<U> </U>

Formatting Tags

<SUB> </SUB>

<SUP> </SUP>

&nbsp;

Page 7: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

SIZE = “1 … 7”

Page 8: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

SIZE = “1 … 7”

<FONT size=“1”> <FONT size=“2”> <FONT size=“3”>

<FONT size=“4”> <FONT size=“5”> <FONT size=“6”>

<FONT size=“7”>

smallest

largest

This is LargeThis is <font size=“7”>Large</font>

Default

Page 9: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

color = “16 standard colors”

<FONT color=“red”> aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

purple

red

silver

teal

white

yellow

This is: red and blue

This is: <font color=“red”>red</font> and <font color=“blue”>blue</font>

Page 10: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

This is <FONT size=“7” color=“green”>Large & Green</FONT>

This is Large & Green

This is <FONT size=“7”><font color=“green”>Large & Green</font></FONT>

Page 11: WEB PAGES: CREATING AND MAINTAINING **

This is Large & Green

This is <FONT size=“7”><font color=“green”>Large & Green</font></FONT>

This is Large & Green only largeThis is <FONT size=“7”><font color=“green”>Large & Green</font>only large</FONT>

Page 12: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

FACE = “name1, name2, name3, …”

These are different types of Font Faces

Page 13: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

FACE = “name1, name2, name3, …”

• Browsers have VERY limited “Font Face” Support

• The “Font Face” file must reside on the Users Computer

• Name must match – might not look the same – MAC’s -PC’s

Page 14: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

FACE = “name1, name2, name3, …”

These 12 fonts are installed on both PC and MAC

and are considered as ‘safe’

arial

arial black

comic sans ms

courier

courier new

georgia helvetica

impact

palatino

times new roman

trebuchet ms

verdana

Page 15: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

FACE = “name1, name2, name3, …”

arial

arial black

comic sans ms

courier

courier new

georgia helvetica

impact

palatino

times new roman

trebuchet ms

verdana

cursive

fantasy

Serif

Sans-serif

monospace

Font-Family

Generic-Family

Page 16: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<FONT> </FONT>

THE FONT TAG

FACE = “name1, name2, name3, …”

arial

arial black

comic sans ms

courier

courier new

georgia helvetica

impact

palatino

times new roman

trebuchet ms

verdana

cursive

fantasy

Serif

Sans-serif

monospace

Font-Family

generic-Family

<FONT face = “verdana, helvetica, serif”>Hello</FONT>

Page 17: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<P> </P>

Paragraph Tag

ALIGN = “Left, Right, Center”

<P align=“left”>

<P align=“right”>

<P align=“center”>

Default

<P align=“center”>This text will be centered</P>

Page 18: WEB PAGES: CREATING AND MAINTAINING **

All of this text

is centered on the page

and this

is firetruck but only this

is italized.

<p align=“center”>All of this text<br>is centered on the page<br>

and this<br>is <font color=“red”>firetruck</font> but only this<br>is

<i>italized</i>. </p>

Page 19: WEB PAGES: CREATING AND MAINTAINING **

<H1…6> </H1…6>

THE HEADING TAG

<H1> </H1>

<H2> </H2>

<H3> </H3>

<H4> </H4>

<H5> </H5>

<H6> </H6> smallest

largest

HEADING

HEADING

<H4>HEADING</H4><H2>HEADING</H2>

Note!

• Opposite – Font Size• Always on it’s own line !

Page 20: WEB PAGES: CREATING AND MAINTAINING **

Tag Options

<H1…6> </H1…6>

THE HEADING TAG

ALIGN = “left, right, center”

This is Centered

This is left

This is right

<h2 align=“center”>This is centered</h2>

<h1align=“left”>This is left</h1>

<h2 align=“right”>This is right</h2>

Page 21: WEB PAGES: CREATING AND MAINTAINING **

Basic HTML Tags

<HTML> </HTML>

<HEAD> </HEAD>

<TITLE> </TITLE>

<BODY> </BODY>

On ALL Web Pages

<P> <BR>

<FONT> </FONT>

<H1>… <H6> to </H1>… </H6>

<B> </B>, <I> </I>, <U> </U>

<SUP> </SUP>, <SUB> </SUB>

&nbsp;

Formatting Tags

<P align=“Left”> <P align=“Right”> <P align=“Center”><FONT size=“1…7” color=“color name” face=“name1, name2, name3, …>

Tag Options

Colors – aqua, black, blue, fuchsia, gray, green, lime, maroon,

navy, olive, purple, red, silver, teal, white, yellow