390 likes | 668 Views
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.
E N D
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 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?
Structure 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)
Design Checklist • Be brief • Be clear • Use simple language • Check spelling & grammar • Try out presentation in more than one browser
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
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
Formatting 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
Cascading Styles • Example: • All Body text to be centered <HEAD> <STYLE type = “text/css”> Body {text-align: center} </STYLE> </HEAD> <BODY> etc …
Defining 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>
Defining 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…
Resulting web page Practice…
Mixing Classes with Other Tags Adding a Bold Tag
Inserting 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…
Inserting 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)
Inserting 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”>
Using a Graphic as Background • Use image as background (instead of color) • EXAMPLE for BODY background <body background = "Image.jpg"> • Practice…
Result of using a small picture as a background (Browser tiles the image and repeats it to cover background)
Changing 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
Common Colors Practice…
To Insert Special CharactersYou can use Name or Code 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
Inline 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…
Using 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
Table Syntax Start each row with: <TR> tag End each row with: </TR> tag Everything between these tags will appear in one row
Table Syntax <TABLE> <TR> … text in First row </TR> <TR> … text in Second row </TR> </TABLE>
Table 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…
Table 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…
Table 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…
Table 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… More space between cells Wider Border
Inserting 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…
Linking 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>
Link 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…
Creating Email Links <A HREF=“mailto:info@saigontech.edu.vn”> Email Saigontech </A>