HTML and JavaScript for Visual Learners 1810 Monument Avenue, Suite 100 Richmond, VA 23220 www.visibooks.com HTML and JavaScript for Visual Learners Published by Visibooks, LLC, Richmond, VA Copyright Suggestions If you have a suggestion on how to improve this book, send it to improvements@visibooks.com . If we use it, well send you a complete set of all published Visibooks and post your name in the Acknowledgements of the next edition. Trademarks and Disclaimer Visibooks is a trademark of Visibooks, LLC. All brand and product names in this book are trademarks or registered trademarks of their respective companies. Visibooks makes every effort to ensure that the information in this book is accurate. However, Visibooks makes no warranty, expressed or implied, with respect to the accuracy, quality, reliability, or freedom from error of this document or the products described in it. Visibooks makes no representation or warranty with respect to this books contents, and specifically disclaims any implied warranties or fitness for any particular purpose. Visibooks disclaims all liability for any direct, indirect, consequential, incidental, exemplary, or special damages resulting from the use of the information in this document or from the use of any products described in it. Mention of any product does not constitute an endorsement of that product by Visibooks. Data used in examples are intended to be fictional. Any resemblance to real companies, people, or organizations is entirely coincidental. International Standard Book Number: 0-9707479-2-6 First Edition You have permission to post this book on a Web site, e-mail it, print it, or pass it along for free to anyone you like, as long as you make no changes or edits to its contents or digital format. Make as many copies as you want. However, the right to sell this book, whether in digital or bound form, is strictly reserved to Visibooks, LLC. Download other Visibooks for free at www.visibooks.com Table of Contents Introduction 1 HTML Basics 3 Create a home page 4 Create the home page 4 View the page in a browser 11 Format pages and text 14 Change fonts 14 Change text size 16 Change text weight 17 Change text color 18 Align text 19 Indent text 21 Create lists 23 Create links to new pages 25 Step 1: Create a new page 25 Step 2: Link to the new page 28 Create e-mail and external links 31 Create an e-mail link 31 Link to an external site 33 Insert and align graphics 34 Capture a graphic from the Web 34 Insert a graphic 36 Align a graphic 38 Format a graphic 41 Create a basic navigation system 44 Link back to the home page 44 Link pages to each other 45 Use graphics as links 46 Use graphics as links 47 Change page, link colors 50 Change background color of page 50 Change link colors 51 Change link colors 52 Download other Visibooks for free at www.visibooks.com Layout & Navigation 57 Lay out pages using tables 58 Create a table 58 Create a table 59 Format a table 63 Create a table-based home page 67 Create new table-based pages 73 Create navigation bars 76 Create a navigation bar for a home page 76 Create a navigation bar for a main section page 79 Add subsections to site 82 Insert a table for content and subsection links 82 Create subsection pages 84 Place tables within tables 88 Link to an external site using frames 91 Interactivity 99 Insert META tags 100 Create forms 102 Use style sheets 111 Create a style sheet 112 Apply a style sheet 114 Create link effects with style sheets 117 Upload sites to a Web server 121 Advanced Layout 131 Employ background graphics 132 Employ spacer GIFs 135 Insert a horizontal rule 137 Specify page margins 138 Download other Visibooks for free at www.visibooks.com Practical JavaScript 141 Enable rollover graphics 142 View source code 143 Copy source code 144 Modify source code 146 Open new windows 150 Validate form input 153 Validate form input 154 See how it works 154 Insert the validation script 155 Modify the <FORM> tag 156 Additional Resources 157 HTML Tag Chart 159 Index 165 Download other Visibooks for free at www.visibooks.com Download other Visibooks for free at www.visibooks.com 1 Introduction Welcome to HTML and JavaScript for Visual Learners. If youve never used a Visibook before, youll find that it contains several hundred illustrations, with comparatively little text. It presents essential tasks, breaks them down into steps, then walks you through them with illustrations. What youll learn Youll learn how to use HTML to create a solid, attractive Web site thats easy to navigate. Youll also learn how to upload it to a Web server. You wont become an expert in Web publishingthat takes practice and real- world experience. But you will learn the fundamentals of site-building, and get a good foundation on which to build professional-level skills. Additional resources for acquiring expert- level HTML and JavaScript skills are found at the end of this book. How youll learn it This book has five sections: HTML Basics, Layout & Navigation, Interactivity, Advanced Layout, and Practical JavaScript. At the end of each task and section are practice exercises. Dont worry if you cant work through the whole book in a day or two. Take your time, and try to do the practice. You can check your work against examples posted on the Web. Follow the steps ! See the results Download other Visibooks for free at www.visibooks.com 2 Before you begin Before you begin, its important that you know Windows well. A working knowledge of Windows makes it much easier to learn HTML and JavaScript. You should be familiar with: • How directories work • Windows Explorer • Basic word processing Make sure you can perform the following tasks: • Create a folder on your computers hard drive • Create a folder within a folder • Copy a paragraph from one document and paste it into another. If you have trouble doing this, set aside a couple of hours to learn Windows basics. Have a friend or co-worker who is proficient with computers walk you through Windows Explorer, creating folders and becoming familiar with file extensions. You should also practice using the Cut, Copy, and Paste commands in a standard word processing program. When you can do these things on your own, youre ready to learn HTML and JavaScript. Download other Visibooks for free at www.visibooks.com 3 HTML Basics In this section, youll learn how to: • Create a home page • Format text • Create links to new pages • Create e-mail and external links • Insert graphics • Create a navigation system • Change page and link colors Youll build a site that looks like this: Download other Visibooks for free at www.visibooks.com 4 Create a home page Create the home page 1. Open a browser, such as Internet Explorer or Netscape Navigator. 2. Open the program Notepad. Do this by first clicking the button on the taskbar, then Programs, then Accessories, then Notepad. 3. At the top of the Notepad screen, type: <HTML> Tip:  <HTML> is a tag. Tags are instructions to a Web browser. This particular instruction lets the Web browser know that what follows is a Web page, written in HTML. Tags can be written in upper-case or lower-case lettersit doesnt matter which. <HTML> , <html> , or <HtMl> are all fine. [...]... between the and tags Download other Visibooks for free at www .visibooks. com 10 14 Below the tag, close the < /HTML> tag When you’re finished, the code should look like this: 15 Between the and tags, type the words: Dogs Home Page 16 Save the page Download other Visibooks for free at www .visibooks. com 11 View the page in a browser 1 Go to the browser and on its menu... a html extension (or htm) All home pages have the file name index .html index .html comes up automatically when the address of a domain or directory where it’s located is typed into a browser For instance, if you go to www .visibooks. com, the home page appears automatically That’s because its file name is index .html If the file name of the Visibooks home page was homepage .html, you’d have to type www .visibooks. com/homepage .html. .. words New Page Download other Visibooks for free at www .visibooks. com 29 2 Save the home page and view it in the browser The words Chesapeake Bay Retriever should be a link, and the page should look like this: 3 Click on the Chesapeake Bay Retriever link The Chesapeake Bay Retriever page should appear in the browser Download other Visibooks for free at www .visibooks. com 30 Practice:... Download other Visibooks for free at www .visibooks. com 16 Change text size 1 In Notepad, add the SIZE=”+4” attribute to the tag: Dogs Home Page 2 Save the page and view it in the browser It should look like this: Download other Visibooks for free at www .visibooks. com 17 Change text weight 1 In Notepad, add the tag in front of the words “Dogs Home Page” and close... drive Download other Visibooks for free at www .visibooks. com 13 Practice: Create a home page A What is the correct file name for a home page? B Why is there a special file name for home pages? C Why is it important that the home page and all other pages in a Web site—have accurate titles? D What is the difference between a page’s title and its file name? Answers A B C D index html It allo ws ho me... other Visibooks for free at www .visibooks. com 22 3 Save the page and view it in the browser It should look like this: Tip: Notice how all the text below the tag looks the same It will stay that way until the closing tag is inserted Download other Visibooks for free at www .visibooks. com 23 Create lists 1 With the three breeds of dog, replace the and tags... follows: Chesapeake Bay Retriever German Shepherd Yorkshire Terrier 2 Save the page and view it in the browser It should look like this: Download other Visibooks for free at www .visibooks. com 24 Practice: Format pages and text A Why are the most common font choices Arial, Verdana, and Helvetica? B What kinds of computers have the font Arial installed? Which have Helvetica instead?... other Visibooks for free at www .visibooks. com 25 Create links to new pages Step 1: Create a new page 1 In Notepad, change the title of the page to “Chesapeake Bay Retrievers,” then take out all the tags and text between the and tags 2 On the menu bar, click File, then Save As 3 Save the new page with the file name chesapeake .html Tip: Remember to Save as type: All Files Download other Visibooks. .. folder by clicking on the icon Download other Visibooks for free at www .visibooks. com 6 7 Name the new folder “Dogs,” then double-click it so it appears in the Save in box 8 In the File name textbox, type index .html 9 In the Save as type drop-down list, select All Files When you’re done, the window should look like this: Download other Visibooks for free at www .visibooks. com 7 10 Save the page by clicking... page View it in the browser, and the text should show up red 3 Change the text color to black, then save the page Download other Visibooks for free at www .visibooks. com 19 Align text 1 Beneath the present text and tags, insert a tag to begin a new paragraph 2 Beneath the tag, insert the tag and the words “These are my . HTML and JavaScript for Visual Learners 1810 Monument Avenue, Suite 100 Richmond, VA 23220 www .visibooks. com HTML and JavaScript for Visual. Download other Visibooks for free at www .visibooks. com Download other Visibooks for free at www .visibooks. com 1 Introduction Welcome to HTML and JavaScript for Visual Learners. If youve. to learn HTML and JavaScript. Download other Visibooks for free at www .visibooks. com 3 HTML Basics In this section, youll learn how to: • Create a home page • Format text