1. 1 Foundation of HTML Web Page Design

2. 2 Safe Web Fonts: Used by most computers regardless of environment or platform  Times New Roman  Arial  Courier  Verdana  Georgia Most san serif fonts are safe to use for web pages. Avoid serif font

3. 3 What does HTML stand for? What does it mean?  Hypertext Markup Language  Special codes that make the Web work. OR  Set of tags and other entities used to “mark up” a document for display on a web browser. (more specific definition)

4. 4 Factors that affect the downloading speed of a webpage are the: 1. Size of the web page (includes text, all graphics, etc.) 2. Speed of the user’s Internet connection 3. Speed of the Web server and its connection 4. Amount of internet traffic or other messages competing for use of the Internet.

5. 5 Three Ways to Transform a Text Document into a HTML file: 1. Use a word processing software then save file as a web page or add.html extension 2. Manually insert HTML tags into a document = hard coding 3. Use an HTML editor software EX, FrontPage, DreamWeaver, Adobe PageMill

6. 6 Sections of an HTML document: 1. HTML document Tells the Web browser that all the information following this tag should be treated as a web page. 2. HEAD section Provide general information about the web page. The title tag is displayed within this section. Information that goes inside the tag is displayed on the title bar of your web page.

7. 7 Cont. 3. BODY section Sets the visible portion of the document.

8. 8 Basic HTML Tags: 1. An open angle bracket (<) less than sign 2. The text and characters that tell Web browsers what to do. Ex. Body, Html 3. A closing angle bracket (>) greater than sign Examples:,,

9. 9 How Tags are Written:  Many are containers or paired tags Start tag – First tag, tells the browser where to turn on particular formatting function. End tag –Second tag, tells the browser where to turn off the function.

10. 10 Correct Nesting Order Your page’s Title Your page’s main information

11. 11 Nesting Order HTML tags have to be LIFO “last in first out”  The last tag you turn on should always be the first tag you turn off.  Imaginary lines connecting the start tag to the end tag should NEVER cross.

12. 12 Which nesting order is correct? A B

13. 13 Add White Space  White space – amount of empty space on a page.  Paragraph Tag: Adds white space betn your paragraphs  Line Break Tag: Adds a line break; return key

14. 14 Cont.  Horizontal Rule Tag: Want to add a horizontal line to the body of your web page.  Inserts a space between characters. Space bar &nbsp

15. 15 Physical Style Tags: How your web page’s text actually appears to your audience. 1. = Bold 2. = Italics 3. = Underline 4. = Subscript 5. = Superscript 6. = Text displayed in bigger font than the current font size. 7. = Smaller font than the current font size.

16. 16 Logical Style Tags:  = Emphasized phrase. Italics  = used for long quotation; indents the left and right sides of paragraph.  = Used to indicate the title of a book or other citation. Italics

17. 17 ORGANIZING TEXT  text here centers text  text here  = centers text

18. 18  text here Sets background color, using name or hex value  Sets the size of font, 1 to 7  Sets font color, using name or hex value  Sets a font style to text

19. Insert scrolling text text or picture text or picture =speeds up text text or picture allows your text to bounce back and forth text changes bkgrd color 19

20.  text  text changes background width  text changes bkgrd height  text changes scrolling direction 20

21. 21  Insert a picture = creates a picture  Insert a hyperlink text (what you want link to say) EXAMPLE Welcome to Google http://www.google.com

22. 22  Insert an email or mailto link text = creates a mailto linkmailto:EMAIL  Example Click here to email me!

23. 23 HEADING or HEADLINE TAGS:  Lets you organize your Web page’s content by emphasizing your major topic:  Each level has a different font size. is the largest size.

24. 24 List Ordered Tags: identifies the listed items  Ordered Tag Creates a numbered list. Green Blue  Unordered Tag Creates bulleted list Green Blue

25. 25 RESULTS: Ordered List 1. Green 2. Blue Unordered List  Green  Blue

26. 26 Creating a Table  = regular table  = row  = column  Set amount of space between table cells  Sets amount of space between a cell’s border and its contents

27. 27 Creating a Table (cont.)  border = # (adds a border around table)  Sets width of table-in pixels or as a percentage of document width.  or Sets alignment for cell(s) (left, center, or right).  or Sets vertical alignment for cell(s) (top, middle, or bottom)

28. 28 Creating a table (cont.)  Sets number of columns a cell should span  Sets number of rows a cell should span (default= 1)  Prevents the lines within a cell from being broken to fit.

29. 29 Insert Video Clip  Two Steps: 1. <embed name=‘put the name of the video player you will use’ <embed name= ‘Media Player’ 2. src= ‘video location’ (website address/folder/drive’ Src= ‘http://www.musicjesus.com/song_3685 1_Cascada-Everytime_We_Touch.html’

30. 30  Close the video 3. 4. Check out my School

31. R. E. S. P. E. C. T. the WWW  R=Responsibility: Assume personal responsibility and create only ethical appropriate pages.  E=Everybody: Try to create Web pages that everybody can enjoy, appreciate and consider of value. 31

32. Cont.  S=Simplicity: Make your Web pages easy to navigate. Make information simple to find.  P=Purpose: Have a clear purpose for every Web page you put on the Web. Don’t post unnecessary pages. 32

33. Cont.  E=Ethical: Make sure all the content of every Web page you post corresponds to your values and has beneficial purpose.  C=Correct: Make sure all the words on your page are spelled correctly, all the sentences are written correctly, and all the hyperlinks work. 33

34. Cont.  T=Totally worth visiting: Try to create pages that others will think are totally worth their time to visit. 34