HTML
description
Transcript of HTML
![Page 1: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/1.jpg)
XPXP
1
HTML
Committed to Shaping the Next Generation of IT Experts.
02: Enhancing the Web Page
![Page 2: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/2.jpg)
XPXPObjectives
• Planning a web page:– Rules of creating a web page– Design checklist
• Formatting with Cascading Style Sheets• Using graphics• Changing color• Using tables• Create links
2
![Page 3: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/3.jpg)
XPXPPlanning a Web Page
Questions to ask• What is the purpose of Web presentation?• Who is the audience?• What information am I trying to convey?• How will I organization the information?• How can I make it attract visitors?
![Page 4: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/4.jpg)
XPXPStructure of Web Page
• Consistent layout for each page• One topic per page• Keep pages short to avoid scrolling• Avoid large graphics at the top (will need long
time to load)
![Page 5: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/5.jpg)
XPXPDesign Checklist• Be brief• Be clear• Use simple language• Check spelling & grammar• Try out presentation in more than one browser
![Page 6: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/6.jpg)
XPXPUse Features to Tie it all Together
• Use Lists or menus• Avoid links that are not relevant• Use consistent terms & icons• Use same banner or logo on each page• Use consistent layout• Use return link to home page on all pages• Make sure links are current
![Page 7: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/7.jpg)
XPXPMore Features to Tie it all Together
• Avoid graphics that are not relevant• Include alternative text with every graphic• Each page should be able to stand alone• Avoid over-emphasizing / over-formatting • Contrast text from background (readability)• Use horizontal lines to separate sections of the
page
![Page 8: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/8.jpg)
XPXPFormatting withCascading Style Sheets (CSS)
• Styles pre-define formats• Allows changes to be made quickly• All styles are defined in one place• Makes for Global Formatting
– Changes made in one place affects all• Best to put Style tag in HEAD section
![Page 9: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/9.jpg)
XPXPCascading Styles• Example:
– All Body text to be centered<HEAD>
<STYLE type = “text/css”>Body {text-align: center}
</STYLE></HEAD><BODY>
etc …
![Page 10: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/10.jpg)
XPXPDefining a CLASS for Style• Class used in two places
– In HEAD Style definition – In Body text
HEAD EXAMPLE:<STYLE type =“text/css”>
P {font-style: normal}P.it {font-style: italic}P.color {color: red}
</STYLE>
![Page 11: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/11.jpg)
XPXPDefining a CLASS for Style(Continued)BODY Text EXAMPLE:
<P class = “it”> This text will be in italic </P><P> This text is not affected </P><P class = “color”> This text is red </P><P> This text is not affected </P>
Practice…
![Page 12: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/12.jpg)
XPXPHTML to Show Use of Classes
![Page 13: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/13.jpg)
XPXPResulting web page
Practice…
![Page 14: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/14.jpg)
XPXPMixing Classes with Other Tags
Adding a Bold Tag
![Page 15: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/15.jpg)
XPXPInserting Pictures / Graphics• Can include universal formats
– .JPG (best for photographs)– .GIF (most browsers accept this format)
• Use <IMG>– Must use SRC=“filename” attribute for source– EXAMPLE:
<IMG SRC=“picturename.jpg”>– No closing tag
• Practice…
![Page 16: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/16.jpg)
XPXPInserting Pictures / Graphics• Can use ALT= alternate attribute to display• EXAMPLE: <IMG SRC=“picturename.jpg” ALT=“Company CEO”>
• This will display “Company CEO” rather than the file name (“picturename.jpg”)
• Practice…• Other attributes available are HEIGHT, WIDTH, FLOAT
(causes browser to load quicker)– Height & Width are measured in pixels– Float defines position (Left, Right, Center)
![Page 17: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/17.jpg)
XPXPInserting Pictures / Graphics• EXAMPLE using Height, Width, Float
<IMG SRC=“picturename.jpg” ALT=“Company CEO” HEIGHT= “200” Width = “40”>
• Practice…
• Better to use Classes for each image size
<STYLE type=“text/css”> IMG.ceoPic1 {width: 40; height: 200; float: center}</STYLE> … body text …<IMG SRC=“picturename.jpg” class=“ceoPic1” ALT=“Company CEO”>
![Page 18: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/18.jpg)
XPXPUsing a Graphic as Background• Use image as background (instead of color)• EXAMPLE for BODY background
<body background = "Image.jpg">
• Practice…
![Page 19: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/19.jpg)
XPXP
RESULT of Classroom as background
![Page 20: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/20.jpg)
XPXP
Result of using a small picture as a background(Browser tiles the image and repeats it to cover background)
![Page 21: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/21.jpg)
XPXPChanging Text Color• Can change color of different text types
– <P>– <BODY>– <H1>, <H2>, etc.
• Can change color of hypertext links• Can change color of visited links• Can change color of active links
![Page 22: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/22.jpg)
XPXPCommon ColorsCOLOR HEX EQUIVALENT
Red #FF0000Green #00FF00Blue #0000FFBlack #000000White #FFFFFFTan #DEB887
Turquoise #19CCDFMagenta #FF00FFYellow #FFFF00
Practice…
![Page 23: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/23.jpg)
XPXPTo Insert Special CharactersYou can use Name or Code
CHARACTER NAME CODE© © ©® ® ®È È È¥ ¥ ¥£ £ £> > >< < <& & &
Must use Name or Code for “<“ because HTML uses that for start of a tagIF A < B would be coded: IF A < B or IF A < B
![Page 24: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/24.jpg)
XPXPInline Styles• Used rarely – Single style definition is preferable• Used when a style is to be used only once• How it works:<H1> <B style=“font-size: 48”> L</B>ove </H1>
Would produce: Love
Practice…
![Page 25: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/25.jpg)
XPXPUsing Tables• To better organize data for user• Columns and rows (intersection is a cell)• Data placed in cells• Table contents are between: <TABLE> and </TABLE> tags
![Page 26: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/26.jpg)
XPXPTable SyntaxStart each row with:
<TR> tag
End each row with: </TR> tag
Everything between these tags will appear in one row
![Page 27: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/27.jpg)
XPXPTable Syntax<TABLE>
<TR>… text in First row
</TR><TR>
… text in Second row</TR>
</TABLE>
![Page 28: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/28.jpg)
XPXPTable Syntax• Use the <TH> and </TH> tags for column head
– Will make contents BOLD for Col. Headings– EXAMPLE:<TABLE>
<TR><TH> Qty </TH><TH> Price </TH><TH> Cost </TH>
</TR>Will create: Qty Price Cost
• Practice…
![Page 29: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/29.jpg)
XPXPTable Syntax• Use the <TD> and </TD> tags for column data
<TABLE><TR>
<TH> Qty </TH><TH> Price </TH><TH> Cost </TH>
</TR><TR>
<TD>2</TD><TD>$10.00</TD><TD>$40.00</TD>
</TR>
• Practice…
![Page 30: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/30.jpg)
XPXPTable SyntaxAdding a Border• Use the <TD> and </TD> tags for column data
<TABLE BORDER=4><TR>
<TH> Qty </TH><TH> Price </TH><TH> Cost </TH>
</TR><TR>
<TD>2</TD><TD>$10.00</TD><TD>$40.00</TD>
</TR>
• Practice…
![Page 31: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/31.jpg)
XPXPTable SyntaxWider Border & More Spacing• Use the <TD> and </TD> tags for column data
<TABLE BORDER=12 CELLSPACING=12><TR>
<TH> Qty </TH><TH> Price </TH><TH> Cost </TH>
</TR><TR>
<TD>2</TD><TD>$10.00</TD><TD>$40.00</TD>
</TR>
• Practice…
Wider BorderMore space between cells
![Page 32: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/32.jpg)
XPXPInserting Linksto Other Documents
Syntax:<A HREF=URL> …text to be clicked …</A>
EXAMPLE:<P>Click below to go to HCCS Computer Science Department Home Page</P><P> <A HREF=http://csci.hccs.edu> COMPUTER SCIENCE DEPARTMENT</A> </P>
Practice…
![Page 33: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/33.jpg)
XPXPLinking Within Same Document• Like placing a bookmark in WORD• Must identify place it will link to<A NAME="top">TOP OF PAGE</A>• Linkage code placed where you want it
<A HREF="#top">Click here to go to top of page</A>
![Page 34: HTML](https://reader036.fdocuments.net/reader036/viewer/2022062323/56816691550346895dda6d75/html5/thumbnails/34.jpg)
XPXPLink to Return <A NAME="top">TOP OF PAGE</A> <A HREF="#Bottom"> Click here
to return to bottom of page</A>
<A HREF="#top">Click here to go to top of page</A>
<A NAME="Bottom"></A> Practice…