web pages: creating and maintaining ** tom keane & mayis seapaninstructors: html tags to format...
Post on 22-Dec-2015
215 views
TRANSCRIPT
WEB PAGES: CREATING AND MAINTAINING **
Tom Keane & Mayis SeapanInstructors:
HTML Tags to format your text
Basic HTML Tags
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
On ALL Web Pages
<H1…6> </H1…6>
THE HEADING TAG
<H1> </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6> smallest
largest
HEADING
HEADING
Note!
• Always on its own line !
<H2>HEADING </H2>
<H4>HEADING</H4>
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>
<h1 align=“left”>This is left</h1>
<h2 align=“right”> This is right </h2>
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>
No Tag Options
<BR>
Break Tag
Starts a new lineSimilar 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 HeadingAll 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>
Basic HTML Tags
<B> </B> - bold
<I> </I> -italic
<U> </U> -underline
Text Formatting Tags
<SUB> </SUB> = Subscript
e.g. H2O
<SUP> </SUP> = Superscript
e.g. Today is February 25th
H<sub>2</sub>O
Today is February 25<sup>th</sup>
Basic HTML Tags
< P > < /P >
< BR >
<B> < /B >
< I > < /I >
<U> </U>
Formatting Tags
<SUB> </SUB>
<SUP> </SUP>
non-breaking spaceThis is one space, but this has extra spaces.
This is one space, but this has extra spaces.
Main HeadingAll 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>
Tag Options
<FONT> </FONT>
THE FONT TAG
SIZE
COLOR
FACE
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
Opposite to the Heading tag
Tag Options
<FONT> </FONT>
THE FONT TAG
color = “one of 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>
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>
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 largeThis is <FONT size=“7”><font color=“green”>Large & Green</font>only large</FONT>
Tag Options
<FONT> </FONT>
THE FONT TAG
FACE = “name1, name2, name3, …”
These are different types of Font Faces
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
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
Tag Options
<FONT> </FONT>
THE FONT TAG
FACE = “name1, name2, name3, …”
arial
arial blackcomic sans mscourier
courier new
georgia helvetica
impact
palatinotimes new roman
trebuchet msverdana
Font-Family
generic-Family
<FONT face = “verdana, helvetica, sans-serif”>Hello</FONT>
cursivefantasy
monospaceSerif
Sans-serif
Fonts – Let’s Practice
Make a web page for:
Welcome to my Web Page I did it myself
Blue, size = 4, underlineItalic, Underline, 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>
`
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”><font color = “red”
face = “arial”> This is right </font ></h2>
Can “nest” font color and face in the heading tag
Basic HTML Tags
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
On ALL Web Pages
<P> </P> <BR>
<FONT> </FONT>
<H1>… <H6> to </H1>… </H6>
<B> </B>, <I> </I>, <U> </U>
<SUP> </SUP>, <SUB> </SUB>
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