1.HeadingsHeadings 2.ParagraphsParagraphs 3.Horizontal RulesHorizontal Rules 4.ListsLists 5.ImagesImages 6.Line BreakLine Break Web Page Design Web Page Elements 7. BackgroundsBackgrounds 8. TargetsTargets 9. LinksLinks 10. Special CharactersSpecial Characters 11. TablesTables 12. FramesFrames 13. CenterCenter When you see this mouse, click it to return to this slide

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: Welcome to the Internet! Web Page Design Web Page Elements

Headings (contd) 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) Donts Dont use headings to display text in boldface type Dont use headings to make certain parts of your page stand out. Be careful! Different browsers display headings differently! Web Page Design Web Page Elements

Paragraphs Paragraphs are set within tags and The closing tag is optional, but is a good practice ! Some people use 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: I hope you enjoy using HTML! 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: Example: Rules.htm Web Page Design Web Page Elements

Horizontal Rules (contd) 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 Web Page Design Web Page Elements

Horizontal Rules (contd) 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.htmRuleAlign.htm NOSHADE Causes the browser to draw the rule line as just a plain line without any of the 3-D shading Example: RuleNoShade.htmRuleNoShade.htm Web Page Design Web Page Elements

Lists Can be : Ordered (numbered) Numbered automatically Tags: This is an item in my ordered list So is this UnOrdered Items are bulleted Tags: This is an item in my UnOrdered list So is this Examples: UnOrdered.htm Ordered.htm UnOrdered.htmOrdered.htm 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) Web Page Design Web Page Elements

Images (contd) 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 : for an image one directory up from your html code Web Page Design Web Page Elements

Images (contd) Examples: Halloween0.htm (No image) Halloween0.htm Halloween1.htm (One image)Halloween1.htm Halloween2.htm (Two images)Halloween2.htm HalloweenInWithHeading.htm images can go anywhere in text: Atom.htmAtom.htm images can be aligned with text: TAlign.htmTAlign.htm images can be a link to a picture: Penguin1.htmPenguin1.htm text can be a link to a picture: Penguin2.htmPenguin2.htm 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 : Example : LineBreak.htmLineBreak.htm 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 Dont use colors that clash or bleed (see page 195) Web Page Design Web Page Elements

Backgrounds (contd) Background colors Add the BGCOLOR attribute to the 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 Color name in text: white, green, yellow, blue Web Page Design Web Page Elements

Backgrounds (contd) 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) Web Page Design Web Page Elements

Backgrounds (contd) Background image Use the Background attribute of the tag The vale of Background attribute is usually a filename or and URL that points to your background image Attribute: Examples: NoBackground.htm Background.htm 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.htmHTMLTarget.htm 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 links on a page Web Page Design Web Page Elements

Links (contd) A tag: Samples: Contents Examples : Mt. SACs Home Page 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. 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. Web Page Design Web Page Elements

Tables (contd) 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 Web Page Design Web Page Elements

Tables (contd) Table tag 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: Web Page Design Web Page Elements

Tables (contd) 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: Web Page Design Web Page Elements

Tables (contd) ROWS Inside the table tags, you define rows using: Row tag : Sample: Two rows are formed Web Page Design Web Page Elements

Tables (contd) ROWS Attributes of the row tag ALIGN – horizontal alignment : left, right, center VALIGN – vertical alignment : top, middle, bottom, baseline (Netscape) Sample: Two rows are formed Web Page Design Web Page Elements

Tables (contd) Cells Inside the ROW tags, you define cells using: Cell tag : Sample: Cell-1 Cell-2 Two cells are formed Web Page Design Web Page Elements

Tables (contd) EXAMPLES: Simple.htm Car1.htm Car2.htm CarFin.htm SimpleWithoutBorder.htm 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: your frame definition goes here </Frameset Web Page Design Web Page Elements

Frames Cannot use a tag together with a 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: EXAMPLE: FrameCols.htmFrameCols.htm FrameRows.htm FrameCombo.htm 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: EXAMPLE: FrameRows.htmFrameRows.htm FrameCombo.htm Web Page Design Web Page Elements

CENTER Center tags center everything between them Web Page Design Web Page Elements

1.Layout 8. Scrolling 2.Font Selection 9. User Friendliness 3.Text Sizing 10. Consistency 4.Foreground vs Background colors 5.Photographic backgrounds 6.Tiled backgrounds 7.Navigational Icons Web Page Design Screen Design Principles