web pages: creating and maintaining ** frank romanelli [email protected] frankr instructor: wednesday:...
TRANSCRIPT
![Page 1: WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/1.jpg)
WEB PAGES: CREATING AND MAINTAINING **
Frank Romanelli
http://udel.edu/~frankr
Instructor:
Wednesday: 10:15 -11:15
Week 3
![Page 2: WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/2.jpg)
Basic HTML Tags
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
On ALL Web Pages
![Page 3: WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/3.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/4.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/5.jpg)
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>
non-breaking spaceThis is one space, but this has extra spaces.
This is one space, but this has extra spaces.
![Page 6: WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/6.jpg)
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 7: WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/7.jpg)
Tag Options
<FONT> </FONT>
THE FONT TAG
SIZE = “1 … 7”
![Page 8: WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/8.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/9.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/10.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/11.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/12.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/13.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/14.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/15.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/16.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/17.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/18.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/19.jpg)
<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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/20.jpg)
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 ** Frank Romanelli FrankR@Udel.Edu frankr Instructor: Wednesday: 10:15 -11:15 Week 3](https://reader033.vdocument.in/reader033/viewer/2022051014/551a981f550346b52d8b6175/html5/thumbnails/21.jpg)
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>
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