Headings Paragraphs Horizontal Rules Lists Images Line Break

1. Web Page Design Web Page Elements • Headings • Paragraphs • Horizontal Rules • Lists • Images • Line Break 7. Backgrounds 8. Targets 9. Links 10. Special Characters 11. Tables Frames Center When you see this mouse, click it to return to this slide

2. Web Page Design Web Page Elements • Headings • There are six heading styles • H1 to H6 • The smaller the number, the bigger the heading • Headings can be : • Left justified • Right justified • Centered • Used to divide sections of text • Example: <H1>Welcome to the Internet!</H1>

3. Web Page Design Web Page Elements • Headings (cont’d) • Think of headings as items in an outline • If your text has some sort of structure, use headings to indicate that structure or hierarchy of importance • Headings can be any length, including many lines of text • (having many line of emphasized text can be tiring to read) • Don’ts • Don’t use headings to display text in boldface type • Don’t use headings to make certain parts of your page stand out. • Be careful! Different browsers display headings differently!

4. Web Page Design Web Page Elements • Paragraphs • Paragraphs are set within <p> tags • <p> and </p> • The closing </p> tag is optional, but is a good practice ! • Some people use <p> tags between paragraphs to add space • There are better ways to add “white space” • Remember: “Design for content, not appearance” • Used to divide sections of text • Example: <p>I hope you enjoy using HTML!</p>

5. Web Page Design Web Page Elements • Horizontal Rules • A “design element” used to create dividers • Use between sections of thought • They appear in a 3-D effect • You can vary : • Length • Thickness • Shading • Horizontal Rule tag: <hr> • Example: <hr> • Rules.htm

6. Web Page Design Web Page Elements • Horizontal Rules (cont’d) • Attributes of the Horizontal Rule tag • SIZE • Indicates the thickness, in pixels, of the rule line • Default is “2” (smallest thickness) • RuleThickness.htm • WIDTH • Indicates the horizontal width of the rule line • Indicate the “exact width, in pixels, or values as a % of screen width (Changes as window is resized !!) • RuleWidth.htm

7. Web Page Design Web Page Elements • Horizontal Rules (cont’d) • Attributes of the Horizontal Rule tag • ALIGN • If you specify a width smaller than actual width of screen, Can also specify the alignment of that rule line Left, Center, Right • Example : RuleAlign.htm • NOSHADE • Causes the browser to draw the rule line as just a plain line without any of the 3-D shading • Example: RuleNoShade.htm

8. Web Page Design Web Page Elements • Lists • Can be : • Ordered (numbered) • Numbered automatically • Tags: <ol> <li>This is an item in my ordered list</li> <li>So is this</li> </ol> • UnOrdered • Items are bulleted • Tags: <ul> <li>This is an item in my UnOrdered list</li> <li>So is this</li> </ul> Examples: UnOrdered.htmOrdered.htm

9. Web Page Design Web Page Elements • Images • Enhance the visual appeal of the web page • Can take extra time to download and display the page! • The more graphics and pictures, the longer time to load • Text can be made to flow around the picture / graphic • Two general classes of images: • InLine - appear on a web page along with text and links - are automatically loaded when page is retrieved • External - stored separate from the web page - loaded only on demand (as result of a link)

10. Web Page Design Web Page Elements • Images (cont’d) • Regardless of InLine or External, they must be of a certain format • InLine: • .GIF (the more popular) (more browsers can view) • .JPEG (Support is becoming more widespread) • Image tag : <img> • <IMG SRC=“image.gif”> • <IMG SRC=“../image.gif”> • for an image one directory up from your html code

11. Web Page Design Web Page Elements • Images (cont’d) • Examples: Halloween0.htm (No image) Halloween1.htm (One image) Halloween2.htm (Two images) HalloweenInWithHeading.htm images can go anywhere in text: Atom.htm images can be aligned with text: TAlign.htm images can be a link to a picture: Penguin1.htm text can be a link to a picture: Penguin2.htm

12. Web Page Design Web Page Elements • Line Break • Breaks a line of text at the point where it appears • When browser encounters a line break, it restarts the text at the left margin. • Use within other elements, • such as paragraphs • list items • Line Break tag : <br> • Example : LineBreak.htm

13. Web Page Design Web Page Elements • Backgrounds • Can be filled with a solid color • Can be filled with a tiled bitmap image for textured appearance • Make sure background does not detract from the content of the web page or its readability • Black text on white background is most popular • Strive for contrast • Don’t use colors that clash or bleed (see page 195)

14. Web Page Design Web Page Elements • Backgrounds (cont’d) • Background colors • Add the BGCOLOR attribute to the <body> tag to specify a background color • BGCOLOR is an HTML extension introduced by Netscape • You can specify the color by : • Color number in hexadecimal : #FFFFFF • <body bgcolor=#FFFFFF”> • Color name in text: white, green, yellow, blue • <body bgcolor=green”>

15. Web Page Design Web Page Elements • Backgrounds (cont’d) • Background image • Use an image as your background which is “tiled” to make it appear seamless. • “tiled” – repeated in rows to fill the browser window • You need an image to serve as the tile • The pattern must “flow” smoothly from one tile to the next • The edges must line up. • Try clipart packages for tiles to use as backgrounds (or web)

16. Web Page Design Web Page Elements • Backgrounds (cont’d) • Background image • Use the Background attribute of the <body> tag • The vale of Background attribute is usually a filename or and URL that points to your background image • Attribute: <body background=“tiles.gif”> <body background=“backgrounds/rosemarble.gif”> • Examples: • NoBackground.htm • Background.htm

17. Web Page Design Web Page Elements • Targets • To provide a quick way to jump around among the various topics in a web page • Often is presented as a Table of Contents • Often called “linked windows” A target can be to an place / anchor within the current page or a link to a new web page window Example : HTMLTarget.htm

18. Web Page Design Web Page Elements • Links • Most essential element in web page design • Links create webs • Links can be textual or pictorial • Any word(s) or picture can be linked to any resource on the web. • Most links connect you to other web pages • Any multimedia file or application can be the object of a link • A resume might have links to a portfolio of your work • It is also common to find e-mail links on a page

19. Web Page Design Web Page Elements • Links (cont’d) • A tag: <a> • Samples: <a href=“contents.doc”,> Contents </a> Examples : <a href=http://www.mtsac.edu> Mt. SAC’s Home Page </a>

20. Web Page Design Web Page Elements • Special Characters • Web pages can contain special characters and symbols such as the Greek alphabet used in scientific notation, as well as mathematical functions, operators, delimiters, accents, arrows, and pointers.

21. Web Page Design Web Page Elements • Tables • Provides a way of aligning or dividing the screen into rectangular regions. • Text flows within the rectangular regions creating a columnar appearance • The borders of the table(s) can be visible or invisible • The most powerful way of positioning items on a web page • We cover tables in more depth in Chapter 20.

22. Web Page Design Web Page Elements • Tables (cont’d) • An advanced HTML construct • Allows for arranging text, images, and other HTML content into rows and columns with/without borders • Parts of a Table object: • Caption – indicates what the table is about • Headings – labels the rows and columns or both (opt) • Table data – the values in the table itself • Table cells – individual squares in the table

23. Web Page Design Web Page Elements • Tables (cont’d) • Table tag • <table> </table> • Attributes of the Table tag • Border=X where X equals 0 – no border 1 – 1 pixel-wide border 2 – 2 pixel-wide border and so on… • Samples: • <TABLE Border=“1”> • <TABLE border=“0”>

24. Web Page Design Web Page Elements • Tables (cont’d) • Table tag • Attributes of the Table tag • WIDTH=X where X equals the table width in pixels or a percentage of the web page width • Samples: • <TABLE WIDTH=800> • <TABLE WIDTH=“80%”> • <TABLE WIDTH=“100%”>

25. Web Page Design Web Page Elements • Tables (cont’d) • ROWS • Inside the table tags, you define rows using: • Row tag : <TR> </TR> • Sample: <TABLE WIDTH=800> <tr> </tr> <TR> </TR> </TABLE> • Two rows are formed

26. Web Page Design Web Page Elements • Tables (cont’d) • ROWS • Attributes of the row tag • ALIGN – horizontal alignment : left, right, center <TR ALIGN=“LEFT”> </TR> • VALIGN – vertical alignment : top, middle, bottom, baseline (Netscape) <TR VALIGN=“MIDDLE”> </TR> • Sample: <TABLE WIDTH=800> <tr align=“center”> </tr> <TR VALIGN=“Top> </TR> </TABLE> • Two rows are formed

27. Web Page Design Web Page Elements • Tables (cont’d) • Cells • Inside the ROW tags, you define cells using: • Cell tag : <TD> </TD> • Sample: <TABLE WIDTH=800> <TR> <TD> Cell-1</TD> <TD> Cell-2</TD> </TR> </TABLE> • Two cells are formed

28. Web Page Design Web Page Elements • Tables (cont’d) • EXAMPLES: • Simple.htm • Car1.htm • Car2.htm • CarFin.htm • SimpleWithoutBorder.htm

29. Web Page Design Web Page Elements • Frames • Frames change what a “page” means to the browser • A single screen can display multiple pages which interact with each other • You first create a frame definition document or a “frameset” • Define how many frames are within the frame document • Sample: <Frameset> your frame definition goes here </Frameset

30. Web Page Design Web Page Elements • Frames • Cannot use a <body> tag together with a <Frameset> tag • The frameset only contains the definitions of the frames of the page • Attributes of the Frameset tag: • COLS: • Tells the browser to split the screen into a number of vertical frames • Sample: <Frameset COLS=“100, 50%, *> </Frameset> • EXAMPLE: FrameCols.htm FrameRows.htm FrameCombo.htm

31. Web Page Design Web Page Elements • Frames • Attributes of the Frameset tag: • ROWS: • Tells the browser to split the screen into a number of vertical frames • Sample: <Frameset ROWS=“100, 50%, *> </Frameset> • EXAMPLE: FrameRows.htm FrameCombo.htm

32. Web Page Design Web Page Elements • CENTER • Center tags center everything between them • <CENTER> </CENTER>

33. Web Page Design Screen Design Principles • Layout 8. Scrolling • Font Selection 9. User Friendliness • Text Sizing 10. Consistency • Foreground vs Background colors • Photographic backgrounds • Tiled backgrounds • Navigational Icons