1. McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML

2. Mod F-2 HYPERTEXT MARKUP LANGUAGE (HTML)  HTML – the language you use to create a Web site  HTML allows you to  Specify the content  Specify the formatting for content

3. Mod F-3 HYPERTEXT MARKUP LANGUAGE (HTML)  To create a Web site, you must create an HTML document  HTML document – file that contains your Web site content and the HTML formatting instructions  Web page is a view of an HTML document from within a Web browser

4. Mod F-4 Creating an HTML Document  Use any text editor  Our choice is Notepad  Click on Start  Point at All Programs  Point at Accessories  Click on Notepad  Create HTML document and save with htm or html extension

5. Mod F-5 HTML Document Sections  HTML tag – specifies the formatting and presentation of information in a Web site  Structure tags – HTML tags that set up the necessary sections  Two major sections in an HTML document  Head section  Body section

6. Mod F-6 HTML Document Sections Body section Structure tags

7. Mod F-7 HTML Tags  Usually are and  Entire HTML document

8. Mod F-8 HTML Document

9. Mod F-9 Resulting Web Page Image Lists

10. Mod F-10 Working Locally  For all to see, Web site must be in Web space  Web space – storage area where you keep your Web site  While building…  Keep local on your computer  Use browser to view

11. Mod F-11 Working Locally  To view a local Web site in Internet Explorer  Click on File and Open  Click on Browser  Choose folder and HTML document name  Click on Open and OK

12. Mod F-12 BASIC TEXT FORMATTING  Basic formatting tags – HTML tags that allow you specify formatting for text  Strong (bold) - and  Underline - and  Emphasis (italics) - and  Line break -  Horizontal rule -

13. Mod F-13 BASIC TEXT FORMATTING Many different basic formatting tags

14. Mod F-14 BASIC TEXT FORMATTING

15. Mod F-15 CREATING HEADINGS  Heading tags – make certain information, such as titles, stand out  and, where number is from 1 to 6  and - largest  and - smallest

16. Mod F-16 CREATING HEADINGS Heading tags

17. Mod F-17 CREATING HEADINGS

18. Mod F-18 ADJUSTING TEXT COLOR  Default text color is black, can be changed  and  Example  I like the color blue.  Reads as… I like the color blue.

19. Mod F-19 ADJUSTING TEXT COLOR Font colors

20. Mod F-20 ADJUSTING TEXT COLOR

21. Mod F-21 ADJUSTING TEXT SIZE  Default is usually 3; can be changed  and  Example  A stronomy is fun  Reads as… A stronomy is fun.

22. Mod F-22 ADJUSTING TEXT SIZE Font sizes

23. Mod F-23 ADJUSTING TEXT SIZE

24. Mod F-24 CHANGING BACKGROUND COLOR  Default is white; can be changed  with no ending tag  Example   Changes background color to green

25. Mod F-25 CHANGING BACKGROUND COLOR Change background to green

26. Mod F-26 ADDING LINKS TO A WEB SITE  Link (hyperlink) – clickable text or image that takes you to another site or page  Three types 1. Links to other Web pages or sites 2. Links to downloadable files 3. Links to e-mail

27. Mod F-27 ADDING LINKS TO A WEB SITE  Format of a link tag is…  scree n text  Example  To provide a link to MTV’s Web site  Visit MTV  Displays as Visit MTV

28. Mod F-28 ADDING LINKS TO A WEB SITE Link to another site or page

29. Mod F-29 ADDING LINKS TO A WEB SITE Links usually appear blue and underlined

30. Mod F-30 ADDING LINKS TO A WEB SITE  For a downloadable file  Replace Web site address with file name  Example  My Excel Workbook  Displays as My Excel Workbook  Lets someone download your Excel workbook

31. Mod F-31 ADDING LINKS TO A WEB SITE  For a link to e-mail  Replace address/filename with mailto: and your e-mail address  Example  E- mail me  Displays as E-mail me

32. Mod F-32 ADDING LINKS TO A WEB SITE Link to downloadable file Link to e- mail

33. Mod F-33 ADDING LINKS TO A WEB SITE

34. Mod F-34 ADDING IMAGES  Images can be useful or worthless  To insert an image   Image file must be in Web space  Is usually jpg or gif format  Cannot use bmp file formats

35. Mod F-35 ADDING IMAGES

36. Mod F-36 ADDING IMAGES

37. Mod F-37 Adjusting Image Sizes  Can adjust image size with height and width parameters  Provide sizing in pixel count  Example   Size would be approximately 1.5 inches square

38. Mod F-38 Adjusting Image Position  Can adjust location; default is left; use align parameter  align=“right” is right justified  is centered

39. Mod F-39 ADDING IMAGES

40. Mod F-40 ADDING IMAGES

41. Mod F-41 USING A TEXTURED BACKGROUND  Can use an image as background  Browser will “tile” image to fill page   File must be in Web space

42. Mod F-42 USING A TEXTURED BACKGROUND Textured background

43. Mod F-43 CREATING AND USING LISTS  Lists can be  Numbered  Unnumbered (bulleted)  Format is (for numbered) list content

44. Mod F-44 CREATING AND USING LISTS  For unnumbered or bulleted list, replace “o” with “u”  Format is (for unnumbered) list content

45. Mod F-45 CREATING AND USING LISTS List tags

46. Mod F-46 CREATING AND USING LISTS Lists