Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML PowerPoint Presentation

HTML

207 Views Download Presentation
Download Presentation

HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML 02: Enhancing the Web Page Committed to Shaping the Next Generation of IT Experts.

  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 • Create links

  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 • 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)

  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 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

  9. Cascading Styles • Example: • All Body text to be centered <HEAD> <STYLE type = “text/css”> Body {text-align: center} </STYLE> </HEAD> <BODY> etc …

  10. 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>

  11. 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…

  12. HTML to Show Use of Classes

  13. Resulting web page Practice…

  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 <IMG> • Must use SRC=“filename” attribute for source • EXAMPLE: <IMG SRC=“picturename.jpg”> • No closing tag • Practice…

  16. 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)

  17. 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”>

  18. Using a Graphic as Background • Use image as background (instead of color) • EXAMPLE for BODY background <body background = "Image.jpg"> • Practice…

  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 • <P> • <BODY> • <H1>, <H2>, etc. • Can change color of hypertext links • Can change color of visited links • Can change color of active links

  22. Common Colors Practice…

  23. 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 &LT; B or IF A &#60; B

  24. 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…

  25. 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

  26. Table Syntax Start each row with: <TR> tag End each row with: </TR> tag Everything between these tags will appear in one row

  27. Table Syntax <TABLE> <TR> … text in First row </TR> <TR> … text in Second row </TR> </TABLE>

  28. 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…

  29. 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…

  30. 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…

  31. 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

  32. 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…

  33. 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>

  34. 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…

  35. Creating Email Links <A HREF=“mailto:info@saigontech.edu.vn”> Email Saigontech </A>