WEB PAGES: CREATING AND MAINTAINING **

WEB PAGES: CREATING AND MAINTAINING ** HTML Tags to format your text Instructor: E-mail: Web page: Cajee Cordeiro Cordeicf@Udel.Edu http://udel.edu/~cordeicf

On ALL Web Pages <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> Basic HTML Tags

Note! largest • Always on it’s own line ! <H4>HEADING</H4> smallest <H2>HEADING</H2> THE HEADING TAG <H1…6> </H1…6> <H1> </H1> <H2> </H2> <H3> </H3> <H4> </H4> HEADING HEADING <H5> </H5> <H6> </H6>

THE HEADING TAG <H1…6> </H1…6> Tag Options This is Centered This is left This is right ALIGN = “left, right, center” <h2 align=“center”>This is centered</h2> <h1align=“left”>This is left</h1> <h2 align=“right> This is right </h2> <P align=“Left”> <P align=“Right”> <P align=“Center”> <FONT size=“1…7” color=“color name”>

Paragraph Tag <P> </P> Tag Options ALIGN = “Left, Right, Center” Default <P align=“left”> <P align=“right”> <P align=“center”> <P align=“center”>This text will be centered</P>

Break Tag <BR> No Tag Options Starts a new line Similar to a carriage return but does not start a new paragraph Does not need to be “closed” This is the first line This is the next line This is the first line <BR> This is the next line

Main Heading All of this paragraph is centered on the page <h1 align = “center”> Main Heading </h1> <p align=“center”> All of this paragraph<br> is centered on the page <br> </p>

Text Formatting Tags <B> </B> - bold <I> </I> -italic <U> </U> -underline rd e.g. Today is September 23 Basic HTML Tags <SUB> </SUB> = Subscript e.g. H2O H<sub>2</sub>O <SUP> </SUP> = Superscript Today is September 23<sup>rd</sup>

Formatting Tags < P > < /P > < BR > <B> < /B > < I > < /I > <U> </U> <SUB> </SUB> <SUP> </SUP> Basic HTML Tags non-breaking space This is one space, but this has extra spaces. This is one space, but this has extra spaces.

Main Heading All of this paragraph is centered on the page <h1 align = “center”> <u>Main Heading <u></h1> <p align=“center”> All of <b> this paragraph </b><br> is <u><i> centered </i></u> on the page <br> </p>

THE FONT TAG <FONT> </FONT> Tag Options SIZE COLOR FACE

smallest largest THE FONT TAG <FONT> </FONT> Tag Options SIZE = “1 … 7” <FONT size=“1”> This is Large <FONT size=“2”> Default <FONT size=“3”> This is <font size=“7”>Large</font> <FONT size=“4”> <FONT size=“5”> Opposite to the Heading tag <FONT size=“6”> <FONT size=“7”>

aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow THE FONT TAG <FONT> </FONT> Tag Options color = “one of 16 standard colors” <FONT color=“red”> This is: red and blue This is: <font color=“red”>red</font> and <font color=“blue”>blue</font>

THE FONT TAG <FONT> </FONT> Tag Options This is Large & Green This is <FONT size=“7” color=“green”>Large & Green</FONT> This is <FONT size=“7”><font color=“green”>Large & Green</font></FONT> Options may be grouped or distributed Tags should be “nested”

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

THE FONT TAG <FONT> </FONT> Tag Options FACE = “name1, name2, name3, …” ThesearedifferenttypesofFont Faces

THE FONT TAG <FONT> </FONT> Tag Options 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

arial arial black comic sans ms courier courier new georgia helvetica impact palatino times new roman trebuchet ms verdana THE FONT TAG <FONT> </FONT> Tag Options 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 Serif Sans-serif cursive fantasy monospace THE FONT TAG <FONT> </FONT> <FONT face = “verdana, helvetica, sans-serif”>Hello</FONT> Tag Options FACE = “name1, name2, name3, …” Font-Family generic-Family

Fonts – Let’s Practice • Make a web page for: • Welcometo myWeb PageI did it myself Bold, blue, size = 4, underline Italic, Underline blue, size = 3 Arial, size = 3 Color= “red” ` Welcome to <u> <i> my</i> <font size=“4” color = “blue”>Web Page</font></u> <FONT face = “arial”> I did it <font color = “red”> myself </font> </FONT>

THE HEADING TAG <H1…6> </H1…6> Tag Options This is Centered This is left This is right ALIGN = “left, right, center” <h2 align=“center”>This is centered</h2> <h1align=“left”>This is left</h1> <h2 align=“right”><font color = “red” face = “arial”> This is right </font ></h2> Can “nest” font color and face in the heading tag

THE BODY TAG <body> </body> Tag Options BGCOLOR background color TEXT default text color TOPMARGIN (pixels) LEFTMARGIN (pixels) RIGHTMARGIN (pixels) <body bgcolor= “yellow” text= “blue” leftmargin = “25” topmargin = “100”> Can use font tag to specify size, color and face after the body tag

EXAMPLE <body bgcolor = “color”, text = “color”, topmargin = “x”…> <font color = “color” face = “type” size = “x”> <hn> <font color = “color” face = “type”> Heading text </font> </hn> <p align = “location”> <font color = “color” face = “type” size = “x”> paragraph text </font > </p> </font> </body>

Basic HTML Tags On ALL Web Pages Formatting Tags <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <P> </P> <BR> <FONT> </FONT> <H1>… <H6> to </H1>… </H6> <B> </B>, <I> </I>, <U> </U> <SUP> </SUP>, <SUB> </SUB> Tag Options <P align=“Left”> <P align=“Right”> <P align=“Center”><FONT size=“1…7” color=“color name” face=“name1, name2, name3, …> Colors – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

WEB PAGES: CREATING AND MAINTAINING **