XP XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 02: Enhancing the Web Page
HTML
Feb 24, 2016
HTML. 02: Enhancing the Web Page. Committed to Shaping the Next Generation of IT Experts. Objectives. 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. Planning a Web Page. - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
XPXP
1
HTML
Committed to Shaping the Next Generation of IT Experts.
02: Enhancing the Web Page
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
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?
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)
XPXPDesign Checklist• Be brief• Be clear• Use simple language• Check spelling & grammar• Try out presentation in more than one browser
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
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
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
XPXPCascading Styles• Example:
– All Body text to be centered<HEAD>
<STYLE type = “text/css”>Body {text-align: center}
</STYLE></HEAD><BODY>
etc …
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>
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…
XPXPHTML to Show Use of Classes
XPXPResulting web page
Practice…
XPXPMixing Classes with Other Tags
Adding a Bold Tag
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…
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)
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”>
XPXPUsing a Graphic as Background• Use image as background (instead of color)• EXAMPLE for BODY background
<body background = "Image.jpg">
• Practice…
XPXP
RESULT of Classroom as background
XPXP
Result of using a small picture as a background(Browser tiles the image and repeats it to cover background)
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
XPXPCommon ColorsCOLOR HEX EQUIVALENT
Red #FF0000Green #00FF00Blue #0000FFBlack #000000White #FFFFFFTan #DEB887
Turquoise #19CCDFMagenta #FF00FFYellow #FFFF00
Practice…
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
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…
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
XPXPTable SyntaxStart each row with:
<TR> tag
End each row with: </TR> tag
Everything between these tags will appear in one row
XPXPTable Syntax<TABLE>
<TR>… text in First row
</TR><TR>
… text in Second row</TR>
</TABLE>
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…
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…
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…
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
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…
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>
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…
Related Documents
