Download presentation
Presentation is loading. Please wait.
Published byAsher Marshall Modified over 8 years ago
1
1 Committed to Shaping the Next Generation of IT Experts. 02: Enhancing the Web Page HTML
2
2 Objectives Planning a web page Rules of creating a web page Design checklist Formatting with Cascading Style Sheets Using graphics Changing color Using tables
3
Planning 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?
4
Structure of Web Page Rules of Thumb Consistent layout for each page One topic per page Keep pages short so scrolling not necessary Avoid large graphics at the top (Takes too long to load)
5
Design Checklist Be brief Be clear Use simple language Check spelling & grammar Try out presentation in more than one browser
6
Use 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
7
More 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
8
Formatting with Cascading Style Sheets 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
9
Cascading Styles Example: All Body text to be centered Body {text-align: center} etc …
10
Defining a CLASS for Style Class used in two places In HEAD Style definition In Body text HEAD EXAMPLE: P {font-style: normal} P.it {font-style: italics} P.color {color: red}
11
Defining a CLASS for Style (Continued) Class used in two places In HEAD Style definition In Body text BODY Text EXAMPLE: This text will be in italics This text is not affected This text is red This text is not affected
12
HTML to Show Use of Classes
13
RESULTING WEB PAGE
14
Mixing Classes with Other Tags Adding a Bold Tag
15
Inserting Pictures / Graphics Can include universal formats .JPG(best for photographs) .GIF(most browsers accept this format) Use Must use SRC=“filename” attribute for source EXAMPLE: No closing tag
16
Inserting Pictures / Graphics Can use ALT= alternate attribute to display EXAMPLE: This will display “Company CEO” rather than the file name (“A:\picturename.jpg”) Other attributes available are HEIGHT, WIDTH, FLOAT (causes browser to load quicker) Height & Width are measured in pixels Float defines position (Left, Right, Center)
17
Inserting Pictures / Graphics EXAMPLE using Height, Width, Float <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO” HEIGHT= “200” Width = “40”> Better to use Classes for each image size IMG.ceoPic1 {width: 40; height: 200; float: center} … body text … <IMG SRC=“A:\picturename.jpg” class=“ceoPic1” ALT=“Company CEO”>
18
Using a Graphic as Background Use image as background (instead of color) EXAMPLE for BODY background BODY {background-image: url (A:\classroom2.jpg)} Image should be light in color for better reading of page
19
RESULT of Classroom as background
20
Result of using a small picture as a background (Browser tiles the image and repeats it to cover background)
21
Changing Text Color Can change color of different text types ,, etc. Can change color of hypertext links Can change color of visited links Can change color of active links
22
Common Colors COLORHEX EQUIVALENT Red #FF0000 Green#00FF00 Blue#0000FF Black#000000 White#FFFFFF Tan#DEB887 Turquoise#19CCDF Magenta#FF00FF Yellow#FFFF00
23
To Insert Special Characters You can use Name or Code CHARACTERNAMECODE ©©© ®®® ÈÈÈ ¥¥¥ £££ >>> <<< &&& Must use Name or Code for “<“ because HTML uses that for start of a tag IF A < B would be coded: IF A < B or IF A < B
24
Inline Styles Used rarely – Single style definition is preferable Used when a style is to be used only once How it works: L ove Would produce: L ove
25
Using Tables To better organize data for user Columns and rows (intersection is a cell) Data placed in cells Table contents are between: and tags
26
Table Syntax Start each row with: tag End each row with: tag Everything between these tags will appear in one row
27
Table Syntax … text in First row … text in Second row
28
Table Syntax Use the and tags for column head Will make contents BOLD for Col. Headings EXAMPLE: Qty Price Cost Will create:Qty Price Cost
29
Table Syntax Use the and tags for column data Qty Price Cost 2 $10.00 $40.00
30
Table Syntax Adding a Border Use the and tags for column data Qty Price Cost 2 $10.00 $40.00
31
Table Syntax Wider Border & More Spacing Use the and tags for column data Qty Price Cost 2 $10.00 $40.00 Wider Border More space between cells
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.