Your SlideShare is downloading. ×
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Html & javascript_for_visual_learners_tutorial_-_174_pages
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html & javascript_for_visual_learners_tutorial_-_174_pages

1,637

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,637
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML and JavaScriptfor Visual Learners1810 Monument Avenue, Suite 100Richmond, VA 23220www.visibooks.com
  • 2. HTML and JavaScript for Visual LearnersPublished by Visibooks, LLC, Richmond, VACopyrightSuggestionsIf you have a suggestion on how to improve this book, send it toimprovements@visibooks.com. If we use it, we’ll send you a complete setof all published Visibooks and post your name in the Acknowledgements ofthe next edition.Trademarks and DisclaimerVisibooks™ is a trademark of Visibooks, LLC. All brand and product names inthis book are trademarks or registered trademarks of their respective companies.Visibooks™ makes every effort to ensure that the information in this book isaccurate. However, Visibooks™ makes no warranty, expressed or implied, withrespect to the accuracy, quality, reliability, or freedom from error of thisdocument or the products described in it. Visibooks™ makes no representation orwarranty with respect to this book’s contents, and specifically disclaims anyimplied warranties or fitness for any particular purpose. Visibooks™ disclaims allliability for any direct, indirect, consequential, incidental, exemplary, or specialdamages resulting from the use of the information in this document or from theuse of any products described in it. Mention of any product does not constitute anendorsement of that product by Visibooks™. Data used in examples are intendedto be fictional. Any resemblance to real companies, people, or organizations isentirely coincidental.International Standard Book Number: 0-9707479-2-6First EditionYou 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 nochanges or edits to its contents or digital format. Make as many copiesas you want. However, the right to sell this book, whether in digital orbound form, is strictly reserved to Visibooks, LLC.
  • 3. Download other Visibooks for free at www.visibooks.comTable of ContentsIntroduction ............................................................................................... 1HTML Basics.................................................................... 3Create a home page..............................................................................4Create the home page......................................................................................................4View the page in a browser ............................................................................................11Format pages and text.........................................................................14Change fonts...................................................................................................................14Change text size.............................................................................................................16Change text weight ........................................................................................................17Change text color ...........................................................................................................18Align text.........................................................................................................................19Indent text.......................................................................................................................21Create lists......................................................................................................................23Create links tonew pages...................................................................25Step 1: Create a new page .............................................................................................25Step 2: Link to the new page........................................................................................28Create e-mail and external links.......................................................... 31Create an e-mail link......................................................................................................31Link to an external site ..................................................................................................33Insert and align graphics....................................................................34Capture a graphic from the Web...................................................................................34Insert a graphic...............................................................................................................36Align a graphic................................................................................................................38Format a graphic.............................................................................................................41Create a basic navigation system........................................................ 44Link back to the home page ..........................................................................................44Link pages to each other ...............................................................................................45Use graphics as links.....................................................................................................46Use graphics as links.....................................................................................................47Change page, link colors ....................................................................50Change background color of page ................................................................................50Change link colors..........................................................................................................51Change link colors..........................................................................................................52
  • 4. Download other Visibooks for free at www.visibooks.comLayout & Navigation...................................................... 57Lay out pages using tables.................................................................58Create a table.................................................................................................................58Create a table.................................................................................................................59Format a table ................................................................................................................63Create a table-based home page .................................................................................67Create new table-based pages......................................................................................73Create navigation bars........................................................................76Create a navigation bar for a home page ....................................................................76Create a navigation bar for a main section page ........................................................79Add subsections tosite......................................................................82Insert a table for content and subsection links..........................................................82Create subsection pages...............................................................................................84Place tables within tables...................................................................88Link toan external siteusing frames................................................... 91Interactivity...................................................................99Insert META tags.............................................................................. 100Create forms .................................................................................... 102Use style sheets................................................................................ 111Create a style sheet......................................................................................................112Apply a style sheet.......................................................................................................114Create link effects with style sheets...........................................................................117Upload sites toa Web server..............................................................121Advanced Layout.......................................................... 131Employ background graphics............................................................ 132Employ spacer GIFs ...........................................................................135Insert a horizontal rule......................................................................137Specify page margins....................................................................... 138
  • 5. Download other Visibooks for free at www.visibooks.comPractical JavaScript......................................................141Enable rollover graphics....................................................................142View source code..........................................................................................................143Copy source code .........................................................................................................144Modify source code......................................................................................................146Open new windows...........................................................................150Validate form input............................................................................153Validate form input............................................................................154See how it works ..........................................................................................................154Insert the validation script..........................................................................................155Modify the <FORM> tag.................................................................................................156Additional Resources ..............................................................................157HTML Tag Chart .......................................................................................159Index.......................................................................................................165
  • 6. Download other Visibooks for free at www.visibooks.com
  • 7. Download other Visibooks for free at www.visibooks.com1IntroductionWelcome toHTML and JavaScript for Visual Learners. If you’ve neveruseda Visibookbefore,you’ll findthat it contains several hundredillustrations,withcomparativelylittle text. It presents essential tasks,breaks themdown intosteps,then walks you throughthemwithillustrations.What you’ll learnYou’ll learn howtouse HTMLtocreate asolid,attractive Website that’s easytonavigate. You’ll alsolearn howtouploadit toa Webserver.You won’t become an expert in Webpublishing—that takes practice andreal-worldexperience. But you will learn thefundamentals of site-building,andget agoodfoundation on whichtobuildprofessional-level skills.Additional resources for acquiring expert-level HTMLandJavaScript skills arefoundat the endof this book.How you’ll learn itThis bookhas five sections: HTMLBasics,Layout & Navigation,Interactivity,AdvancedLayout,andPracticalJavaScript.At the endof eachtaskandsection arepractice exercises. Don’t worryif youcan’t workthroughthe whole bookin adayor two. Take your time,andtrytodothe practice. You can checkyour workagainst examples postedon the Web.Follow thesteps!Seetheresults
  • 8. Download other Visibooks for free at www.visibooks.com2Before you beginBefore you begin,it’s important that you knowWindows well. Aworking knowledge of Windows makes it mucheasier tolearn HTMLandJavaScript. You shouldbe familiar with:• Howdirectories work• Windows Explorer• Basic wordprocessingMake sure you can performthe following tasks:• Create a folder on your computer’s harddrive• Create a folder within a folder• Copya paragraphfromone document andpaste it intoanother.If you have trouble doing this,setaside a couple of hours tolearnWindows basics. Have a friendorco-worker whois proficient withcomputers walkyou throughWindows Explorer,creating foldersandbecoming familiar withfileextensions.You shouldalsopractice using theCut,Copy,andPaste commands ina standardwordprocessingprogram. When you can dothesethings on your own,you’re readytolearn HTMLandJavaScript.
  • 9. Download other Visibooks for free at www.visibooks.com3HTML BasicsIn 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 colorsYou’ll build a site that looks like this:
  • 10. Download other Visibooks for free at www.visibooks.com4Create a home pageCreate the home page1. Open a browser,suchas Internet Explorer or Netscape Navigator.2. Open the programNotepad. Dothis byfirst clicking thebutton on the taskbar,then Programs,then Accessories,thenNotepad.3. At the topof the Notepadscreen,type:<HTML>Tip:HTML is a tag. Tags are instructions to a Web browser. Thisparticular instruction lets the Web browser know that what follows isa Web page, written in HTML.Tags can be written in upper-case or lower-case letters—it doesn’tmatter which. HTML, html, or HtMl are all fine.
  • 11. Download other Visibooks for free at www.visibooks.com54. Save the file.5. When the Save As windowappears,select the C: drive in theSave in drop-down list.6. Create a newfolder byclicking on the icon.
  • 12. Download other Visibooks for free at www.visibooks.com67. Name the newfolder “Dogs,” then double-clickit soit appears inthe 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’redone,the windowshouldlooklike this:
  • 13. Download other Visibooks for free at www.visibooks.com710.Save the page byclicking on the Save button.11. Belowthe HTML tag,type:HEAD!--Created by Your Name--/HEADTip: The HEAD section contains information that doesn’t show upon the page when it is viewed in a browser. Note the closing/HEAD tag: in HTML, you must give the browser instructions toend something as well as start it.Home page file namesAll Webpages have a .html extension (or .htm).All home pages have the file name index.html. index.htmlcomes up automaticallywhen the address of a domain ordirectorywhere it’s locatedis typedintoa browser.For instance,if you gotowww.visibooks.com,the home pageappears automatically. That’s because its file name isindex.html. If the file name of the Visibooks home page washomepage.html,you’dhave totypewww.visibooks.com/homepage.html toget it toappear.The Microsoft exception: Toget your home page tocome upautomaticallyon a Webserver running Microsoft’s InternetInformation Server as it’s operating system,give your homepage the file name default.htm.
  • 14. Download other Visibooks for free at www.visibooks.com8Tip: !--Created by Your Name-- is called a comment.Whatever text is between the dashes won’t show up on a browser’sscreen—it’s only visible if someone views the page’s HTML code. Youneed to include the ! for this to work.12.Belowthe /HEAD tag,title the page “AHome Page AboutDogs” byusing TITLE tags:TITLEA Home Page About Dogs/TITLETip: Note that the text “AHome Page About Dogs” is not a tag. It istext surrounded by tags. The TITLE tags tell the browser what todo with the text: make it the title of the page.
  • 15. Download other Visibooks for free at www.visibooks.com913.Belowthe /TITLE tag,add:BODY/BODYTip: Anything you want to be visible in a browser’s main window,put between the BODY and /BODY tags.Page titlesThe title of a Webpage describes the page. It’s what appears ina browser’s Historylist. The title alsoshows upas a linkwhen apage comes upin a searchengine. If all your pages havediscrete,descriptive titles,they’ll be easier for people tofind.The page title shows upin the top,or “title,” bar of the browserusedtoviewit. The title of this page is Dogs.
  • 16. Download other Visibooks for free at www.visibooks.com1014.Belowthe /BODY tag,close the /HTML tag. When you’refinished,the code shouldlooklike this:15.Between the BODY and/BODY tags,type the words:Dogs Home Page16. Save the page.
  • 17. Download other Visibooks for free at www.visibooks.com11View the page in a browser1. Gotothe browser andon its menu bar,clickFile,then Open.Tip: If you’re using Netscape Communicator instead of InternetExplorer, click Open Page,then Choose File.2. When the Open windowappears,clickthe Browse button.
  • 18. Download other Visibooks for free at www.visibooks.com123. When the newwindowappears,navigate tothe Dogs folder in theLook in drop-down list,then select the home page: index.html.4. Clickthe Open button,then the OK button. The page shouldcome upin the browser andlooklike this:You have createda home page titled“A Home Page AboutDogs.”The home page’s file name is index.html.It is locatedin a folder calledDogs on the C: drive.
  • 19. Download other Visibooks for free at www.visibooks.com13Practice: Create a home pageA. 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 aWeb site—have accurate titles?D. What is the difference between a page’s title and its file name?AnswersA. index.htmlB. It allows home pages to appear in a browser without typing the file name as part of a Web address.C. Accurate titles allow people to find pages easier when bookmarking them or searching in a browser’s History list.D. A page title appears in the Title bar at the top of the browser. It’s plain text, such as “The Smith Family: VacationPictures,” that makes it easy for people to keep track of a page. A page’s file name, such as vacpics.html, is how thecomputer keeps track of it.
  • 20. Download other Visibooks for free at www.visibooks.com14Format pages and textChange fonts1. In front of the words “Dogs Home Page,” insert a FONT tagwiththe attribute FACE=”arial”:FONT FACE=”arial”Dogs Home Page/FONT2. After the words,close the FONT tag:FONT FACE=”arial”Dogs Home Page/FONTTip:Think of an attribute as a sub-instruction to the browser. In thiscase, the FONT tag tells the browser that text will be changed, andthe FACE attribute tells it how to change, specifying the Arialtypeface.
  • 21. Download other Visibooks for free at www.visibooks.com153. Viewthe page in the browser. Clickthe browser’s Refresh button,andthe page shouldlooklike this:Tip: If a page doesn’t look like it’s supposed to—or nothing shows upat all—check the HTML code you’ve written. You might have left outa quote or made some other small mistake. Something that seemsinsignificant can wreck a page:FONT FACE=”arialWeb fontsWhen text is viewedon a computer,onlyfonts installedon thecomputer can be seen. For instance,if someone createda pagethat specifiedthe Tekton font,almost noone viewing it wouldsee it in Tekton because veryfewcomputers have that fontinstalled. Computers without Tekton woulddisplaytext in thedefault font: Times New Roman.All Windows computers have the Arial font installed.Windows 95 andlater computers have Verdana. Macintosheshave Helvetica,the font that Arial is basedupon.Tocover all bases,specifymultiple fonts:FONT FACE=”verdana,arial,helvetica”Missing endquote(“)Textis intheArial font
  • 22. Download other Visibooks for free at www.visibooks.com16Change text size1. In Notepad,addthe SIZE=”+4” attribute tothe FONT tag:FONT FACE=”arial” SIZE=”+4”Dogs HomePage/FONT2. Save the page andviewit in the browser. It shouldlooklike this:
  • 23. Download other Visibooks for free at www.visibooks.com17Change text weight1. In Notepad,addthe B tag in front of the words “Dogs HomePage” andclose it after them:FONT FACE=”arial” SIZE=”+4”BDogs HomePage/B/FONTTip: Wheninserting multiple tags, arrange them in mirror-imageorder. The tags and text above are a good example: since it starts withthe FONT tag, it ends with the /FONT tag. Tags that aren’tarranged in mirror-image order can cause display problems in somebrowsers.2. Save the page andviewit in the browser. It shouldlooklike this:
  • 24. Download other Visibooks for free at www.visibooks.com18Change text color1. In the FONT tag,addthe attribute COLOR=”red”:FONT FACE=”arial” SIZE=”+4” COLOR=”red”2. Save the page. Viewit in the browser,andthe text shouldshowupred.3. Change the text color toblack,then save the page.FONT FACE=”arial” SIZE=”+4” COLOR=”black”
  • 25. Download other Visibooks for free at www.visibooks.com19Align text1. Beneaththe present text andtags,insert a P tag tobegin a newparagraph.2. Beneaththe P tag,insert the tag FONT FACE=”arial”SIZE=”-1” andthe words “These are my favoritebreeds of dog:”3. Within the P tag,addthe attribute ALIGN=”right”:P ALIGN=”right”4. Adda closing /P tag after the newparagraph.P ALIGN=”right”FONT FACE=”arial” SIZE=”-1”These are myfavorite breeds of dog:/P
  • 26. Download other Visibooks for free at www.visibooks.com20Tip: Usually a P tag requires no closing /P tag in HTML, butin this case the ALIGN=”right” attribute is used. The closing/P tag after the paragraph keeps the browser from right-aligningwhatever is beneath it.5. Save the page,then viewit in the browser. It shouldlooklike this:6. Remove the ALIGN=”right” attribute fromthe P tag.Tip: To generate a single-line break rather than the double-space aP tag generates, use the BR tag. Putting a BR or “Break” tagbetween two lines of text will bump the second line down to the nextline:FONT FACE=”arial” SIZE=”+4”BDogs HomePage/B/FONTBRFONT FACE=”arial” SIZE=”-1”These are myfavorite breeds of dog:
  • 27. Download other Visibooks for free at www.visibooks.com21Indent text1. Belowthe text,“These are myfavorite breeds of dog:,” insert threenewparagraphs:PChesapeake Bay Retriever/PPGerman Shepherd/PPYorkshire Terrier/P2. Enclose these paragraphs in UnorderedList tags toindent them:ULPChesapeake Bay Retriever/PPGerman Shepherd/PPYorkshire Terrier/P/UL
  • 28. Download other Visibooks for free at www.visibooks.com223. Save the page andviewit in the browser. It shouldlooklike this:Tip: Notice how all the text below the FONT FACE=”arial”SIZE=”-1” tag looks the same. It will stay that way until theclosing /FONT tag is inserted.
  • 29. Download other Visibooks for free at www.visibooks.com23Create lists1. Withthe three breeds of dog,replace the P and/P tags withLI tags togenerate bullets in front of the text that follows:ULLIChesapeake Bay RetrieverLIGerman ShepherdLIYorkshire Terrier/UL2. Save the page andviewit in the browser. It shouldlooklike this:
  • 30. Download other Visibooks for free at www.visibooks.com24Practice: Format pages and textA. Why are the most common font choices Arial, Verdana, andHelvetica?B. What kinds of computers have the font Arial installed? Which haveHelvetica instead?1. Change the title of the home page to“My Favorite Dogs.”2. Change the bulletedlist toa numberedlist.Tip: Use OL instead of UL to generate a numbered list.3. Change the numberedlist backtoa bulletedlist.4. Make the list items bold. When you viewit in the browser,the pageshouldlooklike this:AnswersA. Those are the fonts that most Windows computers have installed.B. Windows computers have Arial, Macs have Helvetica.
  • 31. Download other Visibooks for free at www.visibooks.com25Create links to new pagesStep 1: Create a new page1. In Notepad,change the title of the page to“Chesapeake BayRetrievers,” then take out all the tags andtext between theBODY and/BODY tags.2. On the menu bar,clickFile,then Save As.3. Save the newpage withthe file name chesapeake.html.Tip: Remember to Save as type: All Files.
  • 32. Download other Visibooks for free at www.visibooks.com264. Beneaththe BODY tag,type “Chesapeake BayRetrievers.” This isthe page heading. Make it verdana,bold,size +3:BODYFONT FACE=”verdana” SIZE=”+3”BChesapeakeBay Retrievers/B/FONT/BODYFile names for the WebMost Webservers are Unix- or Linux-based,whichdon’t dealcleanlywithspaces in file names. For instance if you name afile fido page.html,it mayshowupin the URLbox of thebrowser as fido%20page.html.Also,Webservers are case-sensitive,sokeeping file nameslower-case eliminates a potential source of mistakes.Make all file names in a Website—pages,graphics andfolders—lower-case,withnospaces.Correct file name: german.htmlIncorrect: German Shepherds.html
  • 33. Download other Visibooks for free at www.visibooks.com275. Save the page.Providing navigation clues with text sizeThe heading of the Chesapeake BayRetriever page is made onesize smaller than the heading of the home page. That’s becausethe CBRpage is one stepdown in the site hierarchy.Level 1: Dogs(toplevel heading; SIZE=”+4”)Level 2: Chesapeake BayRetrievers(second-level heading; SIZE=”+3”)Making the heading of the CBRpage smaller than the homepage’s heading helps showpeople where theyare in the site.DogsChesapeakeBayRetrievers
  • 34. Download other Visibooks for free at www.visibooks.com28Step 2: Link to the new page1. Open the home page (index.html) in Notepad. In front of the firstitem,Chesapeake Bay Retriever,insert an anchor tag.Then close the anchor tag :LIBA HREF=”chesapeake.html”ChesapeakeBay Retriever/A/BHow an anchor tag worksAnchor tags create a clickable linktoanother page.A pagewith this filename… …is linkedtothesewords.a href=”filename.html”New Page/a
  • 35. Download other Visibooks for free at www.visibooks.com292. Save the home page andviewit in the browser. The wordsChesapeake Bay Retriever shouldbe a link,andthe pageshouldlooklike this:3. Click on the Chesapeake Bay Retriever link. The ChesapeakeBayRetriever page shouldappear in the browser.
  • 36. Download other Visibooks for free at www.visibooks.com30Practice: Create links to new pagesA. Why should file names be lower-case and free of spaces?B. Why should the headings on section pages (Chesapeake BayRetrievers, German Shepherds) be smaller than the heading of thehome page?1. Create newpages for German Shepherds andYorkshire Terriers.Page Title File NameGerman Shepherds German Shepherds german.htmlYorkshire Terriers Yorkshire Terriers yorkshire.html2. On the home page,linkthe words German Shepherd andYorkshire Terrier totheir pages.3. On the home page,remove the words “Home Page” after“Dogs.”4. On the Chesapeake BayRetriever,German ShepherdandYorkshireTerrier pages,put the page headings in the same font andweight asthe home page (Verdana; bold).5. Make the page headings of these pages one size smaller than theheading on the home page,just like on the Chesapeake BayRetriever page.6. Save all pages andclickon the home page’s links tomake sure theywork.AnswersA. Because most Web servers deal better with lower-case, spaceless file names.B. It provides site users with a visual distinction between first-level (home) pages and second-level (main section) pages.
  • 37. Download other Visibooks for free at www.visibooks.com31Create e-mail and external linksCreate an e-mail link1. In a newparagraphbeneaththe list,type the sentence “For moreinformation, contact info@visibooks.com.”2. Surroundthe e-mail address withanchor tags,but insteadoflinking it toa Webpage,use the mailto commandtolinkit toane-mail program:For more information, contactA HREF=”mailto:info@visibooks.com”info@visibooks.com/A
  • 38. Download other Visibooks for free at www.visibooks.com323. Save the page. When you viewit in the browser,it shouldlooklikethis:How e-mail links workWhen someone goes toa Website andclicks on an e-mail link,it’s supposedtoopen the e-mail programon that person’scomputer andinsert the address intoa newmessage.If the person’s e-mail programisn’t configuredcorrectly,thiswon’t work. That’s whye-mail links shoulduse the e-mailaddress as a link: sopeople can enter the address manuallyiftheyhave to.
  • 39. Download other Visibooks for free at www.visibooks.com33Link to an external site1. In Notepad,adda newsentence after the last one. Type thesentence,“Please also visit www.dogs.com.”2. Surroundthe Webaddress www.dogs.com withthese anchortags tolinkit tothe external Website:AHREF=”http://www.dogs.com”www.dogs.com/ATip: For an external link to work, you must type http:// as part ofthe Web address.3. Save the page.4. Previewthe page in the browser,then clickon the linktosee if itlinks tothe external site www.dogs.com.5. Close the browser.
  • 40. Download other Visibooks for free at www.visibooks.com34Insert and align graphicsCapture a graphic from the Web1. Open a newbrowser window.2. Gotothe Website www.visibooks.com/dogpics.3. Place your cursor on top of the picture of the Chesapeake BayRetriever,then clickwithyour right mouse button.Rightmousebutton
  • 41. Download other Visibooks for free at www.visibooks.com354. ClickSave Picture As.5. When the Save Picture windowappears,select the “Dogs” folderin the Save in drop-down list.6. Create a newfolder within Dogs called“graphics.”7. Double-clickon the graphics folder soit appears in the Save indrop-down list.8. Clickthe Save button tosave the graphic inside the graphicsfolder.Tip: Creating this separate sub-folder to hold your site’s graphicsmakes the site easier to organize and update.
  • 42. Download other Visibooks for free at www.visibooks.com36Insert a graphic1. In Notepad,open the Chesapeake BayRetriever page,file namechesapeake.html.2. Create a newparagraphunder the main heading.3. In the newparagraph,insert an image tag:IMG SRC=”graphics/chessie.gif”Tip: Notice that in this image tag there’s a “path.” For the imagesource, the tag first points to the graphics folder, then to the file nameof the image within it.folder graphic
  • 43. Download other Visibooks for free at www.visibooks.com374. Save the page,then viewit in the browser. It shouldnowlooklikethis:
  • 44. Download other Visibooks for free at www.visibooks.com38Align a graphic1. In a newparagraphbelowthe graphic,type in:Chesapeake Bay Retrievers love water. If youthrow tennis balls in the water, these dogswill chase them and bring them back untilyour arm falls off.
  • 45. Download other Visibooks for free at www.visibooks.com392. Save the page andviewit in the browser. The page shouldlooklikethis:3. GobacktoNotepadandaddthe ALIGN=”left” attribute totheIMG tag:IMG SRC=”graphics/chessie.gif”ALIGN=”left”
  • 46. Download other Visibooks for free at www.visibooks.com404. Save the page andviewit in the browser (just clickthe “Refresh”or “Reload” button). It shouldlooklike this:
  • 47. Download other Visibooks for free at www.visibooks.com41Format a graphic1. In the Chesapeake BayRetriever page,addthis ALT attribute totheIMG tag:IMG SRC=”graphics/chessie.gif” ALIGN=”left”ALT=”Chesapeake Bay Retriever”2. Addthe VSPACE=”4” andHSPACE=”12” attributes as well:IMG SRC=”graphics/chessie.gif” ALIGN=”left”ALT=”Chesapeake Bay Retriever” VSPACE=”4”HSPACE=”12”3. Also,addthe BORDER=”1” attribute:IMG SRC=”graphics/chessie.gif” ALIGN=”left”ALT=”Chesapeake Bay Retriever” VSPACE=”4”HSPACE=”12” BORDER=”1”“Alt” text allows visually-impairedpeople toknowwhat agraphic represents. Alt text alsoallows searchengines toindexvisual content.
  • 48. Download other Visibooks for free at www.visibooks.com424. Save the page andviewit in the browser. It shouldnowlooklikethis:5. Move your cursor ontothe graphic. The “Alt” text—an alternativetext description of the graphic—shouldpopup.The text shouldbe alignedwiththe topof the graphic.Tip: If you know the dimensions of a graphic, you can make it loadfaster by specifying its width and height in pixels:IMG SRC=”graphics/chessie.gif” ALIGN=”left”ALT=”Chesapeake Bay Retriever” VSPACE=”4”HSPACE=”12” BORDER=”1” WIDTH=”150”HEIGHT=”189”AnHSPACE of 12 creates ahorizontal spaceof 12 pixelsaroundthegraphic thatnothingcanoccupyA Borderof 1 creates a1-pixelborderaroundthegraphic
  • 49. Download other Visibooks for free at www.visibooks.com43Practice: Insert graphicsA. Why should you specify Alt text for each graphic you insert?1. Gotowww.visibooks.com/dogpics. Save the German Shepherdsgraphic in C:dogsgraphics withthe file name shepherds.gif.2. Save the Yorkshire Terrier graphic in C:dogsgraphics withthefile name yorkie.gif.3. Insert shepherds.gif intothe German Shepherds page in a newparagraphbelowthe heading.4. Insert yorkie.gif intothe Yorkshire Terriers page in a newparagraphbelowthe heading.5. On the German Shepherds page,type “German Shepherds aresmart dogs” in a paragraphbelowthe graphic.6. On the Yorkshire Terriers page,type “Yorkshire Terriers arecute” in a paragraphbelowthe graphic.7. On bothpages,align the text tothe side of the graphic,as on theChesapeake BayRetrievers page.8. On bothpages,give the graphic a border of 1,vspace of 4,andhspace of 12.9. On all three “Dog” pages,put all paragraphtext (not the mainheadings) in the arial font,witha size of -1.AnswersA. Alt text makes it easier for vision-impaired people to understand a page’s content, and makes it easier for search engines tocatalog it.
  • 50. Download other Visibooks for free at www.visibooks.com44Create a basic navigation systemLink back to the home page1. In Notepad,open the Chesapeake BayRetrievers page,chesapeake.html.2. Type the word“Home” in a newparagraphbeneaththe firstparagraph.3. Enclose it in anchor tags that linkit backtothe home page:A HREF=”index.html”Home/ATip: Remember, index.html is the file name for the home page.4. Save the page,andviewit in the browser. The wordHome shouldnowbe a link,andthe page shouldlooklike this:5. On the German Shepherds page,create a linkbacktothe homepage. Dothis the same wayyou createdthe linkfor the ChesapeakeBayretriever page.6. On the Yorkshire Terriers page,create the same sort of linkbacktothe home page.
  • 51. Download other Visibooks for free at www.visibooks.com45Link pages to each other1. In Notepad,open the Chesapeake BayRetrievers page.2. Following the Home link,type:| Chesapeake Bay Retrievers | German Shepherds |Yorkshire Terriers3. Make the words “Chesapeake Bay Retrievers” boldtoshowsite users “You are here.”4. Linkthe words “German Shepherds” tothe German Shepherdspage:A HREF=”german.html”German Shepherds/A5. Linkthe words “Yorkshire Terriers” tothe Yorkshire Terrierspage.
  • 52. Download other Visibooks for free at www.visibooks.com466. Save the page andviewit in the browser. It shouldlooklike this:Showing “you are here”Asite’s navigational systemshouldshowpeople twothings:where theyare,andwhere theycan go.Toshowpeople where theyare,make the linkcorrespondingtothe current page intoplain text. This lets users knowthat iftheycan’t gotothat page,theymust be looking at it.Home | Chesapeake Bay Retrievers | German Shepherds | Yorkshire TerriersYouarehereMaking the text boldreinforces the “you are here” message.
  • 53. Download other Visibooks for free at www.visibooks.com47Use graphics as links1. In Notepad,open the home page. Belowthe bulletedlist of links,ina newparagraph,insert the Chesapeake BayRetriever,GermanShepherdandYorkshire Terrier graphics:IMG SRC=”graphics/chessie.gif”IMG SRC=”graphics/shepherds.gif”IMG SRC=”graphics/yorkie.gif”2. Enclose the first image tag within anchor tags that linkit totheChesapeake BayRetriever page:A HREF=”chesapeake.html”IMGSRC=”graphics/chessie.gif”/A3. Save the page,then previewit in the browser. When you clickonthe Chesapeake BayRetriever graphic,it shouldtake you totheChesapeake BayRetriever page.4. GobacktoNotepadandaddthe BORDER=”0” attribute tothefirst image tag:A HREF=”chesapeake.html”IMGSRC=”graphics/chessie.gif” BORDER=”0”/A
  • 54. Download other Visibooks for free at www.visibooks.com485. Save the page andviewit in the browser again. The blue linkborder aroundthe Chesapeake BayRetriever graphic shouldbegone:
  • 55. Download other Visibooks for free at www.visibooks.com49Practice: Create a navigation systemA. What’s a good way to show site users “You are here?”Task: Tomake your Dogs site looklike the site atwww.visibooks.com/dogs.1. In Notepad,open the German Shepherds page,german.html.2. Following the Home link,type:| Chesapeake Bay Retrievers | German Shepherds |Yorkshire Terriers3. Make the words German Shepherds bold.4. Linkthe words Chesapeake Bay Retrievers andYorkshire Terriers totheir corresponding pages.5. Save the page.6. Using the same system,create navigation links for the YorkshireTerriers page. Then save the page.7. On the home page,linkthe German Shepherds graphic totheGerman Shepherds page. Dothe same for the Yorkshire Terriersgraphic.8. Take out the linkborders of these graphics.9. When finished,previewyour Dogs site in the browser. It shouldlooklike the site at www.visibooks.com/dogs.AnswersA. Make the link corresponding to the current page bold, and plain text (no longer a link).
  • 56. Download other Visibooks for free at www.visibooks.com50Change page, link colorsChange background color of page1. Open the home page in Notepad.2. In the BODY tag,addthe attribute BGCOLOR=”#ffffcc”:BODY BGCOLOR=”#ffffcc”3. Save the page andviewit in the browser. The backgroundcolor ofthe page shouldnowbe pale yellow.Hexadecimal colorsThe ffffcc that stands for pale yellowis a hexadecimalcolor. Hexadecimal colors allowyou tospecifycolors morepreciselythan you can withwords. For example,you couldusethe attribute BGCOLOR=yellow in the bodytag andthe pagebackgroundwouldturn bright yellow,but if you usedBGCOLOR=pale yellow,that wouldn’t work.For shades of color,hexadecimals must be used. Theyworklike this:Computers showcolor as a mix of red,green andblue. Inhexadecimal colors,the first pair of letters or numbers signifyred,the secondpair signifygreen,andthe thirdpair signifyblue:Red Green Blueff ff cc
  • 57. Download other Visibooks for free at www.visibooks.com51Hexadecimal colors, continuedThe color values gofromthe maximumamount of color (ff)tonocolor at all (00):Max Mid-range Noneff cc 99 66 33 00Navyblue wouldbe shown in hexadecimals as nored(00),nogreen,(00),anda little bit of blue (66):000066Alist of hexadecimal color codes is postedat:www.webmonkey.com/reference/color_codes
  • 58. Download other Visibooks for free at www.visibooks.com52Change link colors1. In the home page,addthe attribute LINK=”#ff0000” totheBODY tag:BODY BGCOLOR=”#ffffcc” LINK=”#ff0000”This makes the links on the page showup in red.2. Addthe attribute VLINK=”#00ff00” tothe BODY tag:BODY BGCOLOR=”#ffffcc” LINK=”#ff0000”VLINK=”#00ff00”This makes visitedlinks showupin green.Tip: Visited links are links to pages that have already been viewed inthe browser.
  • 59. Download other Visibooks for free at www.visibooks.com533. Save the page andviewit in the browser. The links on the pageshouldeither be redor green.Consistent link colorsLinkcolors shouldbe consistent throughout a Website. If thelinks on one page are red,theyshouldbe redon everypage.Learning that “redequals link” once is mucheasier for peoplethan having tofigure out the linkcolor for eachpage or sectionof a site.
  • 60. Download other Visibooks for free at www.visibooks.com54Practice: HTML BasicsTask: Tocreate a Website about cats that looks like the site atwww.visibooks.com/cats.1. Create a newhome page andtitle it “The Wonderful World ofCats.”2. Save it in a newfolder on the C: drive calledCats:C:Cats3. Make the heading of the page read“The Wonderful World ofCats.”4. Belowthe main heading on the home page,insert a bulletedlist:House CatsAlley CatsBig Cats5. Make these items arial,witha size of -1.
  • 61. Download other Visibooks for free at www.visibooks.com556. Linkeachlist itemtoa newpage about it. For instance,link“House Cats” toa newpage about house cats withfile namehousecats.html.7. On each of these new pages, put a descriptive heading at the topof the page. For instance, the words “House Cats” at the top ofthe house cats page.8. Put the main headings of all four pages in the Arial font. Makethembold. Give the home page’s heading a size of +3. Give theheadings of the other pages a size of +2.9. On eachpage,write a descriptive sentence or twoin a newparagraphbelowthe main heading. Make it arial,witha size of -1.10.Gotowww.visibooks.com/catpics andget the three cat graphicsthere. Put themin a folder called“graphics” within the C:Catsfolder.
  • 62. Download other Visibooks for free at www.visibooks.com5611.Insert the appropriate graphic on eachof the 3 pages between themain heading andthe descriptive text below.12.Align eachgraphic left,then specifyvspace of 4 andhspace of 16.13.Linkeachof the three “cat” pages backtothe home page,andtoeachother. On eachpage,make the “you are here” linkintobold,plain text.14.Make the backgroundcolor of eachpage light grey.15.Make the linkcolor on eachpage bright red. Make the visitedlinkcolor orange.16.Previewthe site in the browser. It shouldlooklike the site atwww.visibooks.com/cats.
  • 63. Download other Visibooks for free at www.visibooks.com57Layout NavigationIn this section, you’ll learn how to:• Lay out pages using tables• Create navigation bars• Add subsections to site• Place tables within tables• Link to an external site using framesYou’ll build a site that looks like this:
  • 64. Download other Visibooks for free at www.visibooks.com58Lay out pages using tablesTables and Web page layoutAlmost all professional-qualityWebsites are laidout usingtables. Just like a spreadsheet has cells that contain numbers,atable on a Webpage has cells that contain links,graphics,andtext.The lines on this page clearlyshowits layout withtable cells:cell cell cell
  • 65. Download other Visibooks for free at www.visibooks.com59Create a table1. Create a newfolder on the C: drive called“Travel.”2. In Notepad,create a home page (file name index.html) titled“Traveling Down South.” Save it in the Travel folder.Tip: Make sure that your new home page has the correct file name—index.html—and all necessary tags:HTMLHEAD!--Created by Your Name--/HEADTITLETraveling Down South/TITLEBODY/BODY/HTML3. You’re going tocreate a simple one-row,two-cell table that lookslike this:links content4. The first step is tobegin the table. Belowthe BODY tag,beginyour table withthe TABLE tag:BODYTABLE5. Belowthe TABLE tag,start a rowwiththe TR (Table Row)tag:BODYTABLETR
  • 66. Download other Visibooks for free at www.visibooks.com606. In the table row,start the first cell withthe TD (Table Data) tag:BODYTABLETRTD7. After the TD tag,type the word“links,” then close the cellwiththe /TD tag:BODYTABLETRTDLinks/TDYou’ve createdthe first cell in the row:links content8. Nowcreate the secondcell in the rowbyadding a TD tag,thewordContent,andclosing the cell witha /TD tag:BODYTABLETRTDLinks/TDTDContent/TDlinks content
  • 67. Download other Visibooks for free at www.visibooks.com619. Finishthe table byclosing the rowwitha /TR tag,then closingthe table withthe /TABLE tag:BODYTABLETRTDLinks/TDTDContent/TD/TR/TABLE
  • 68. Download other Visibooks for free at www.visibooks.com6210.You have set upthe basic table. Tomake it possible tosee the tableoutlines in a browser,addthe attribute BORDER=”1” totheTABLE tag:BODYTABLE BORDER=1TRTDLinks/TDTDContent/TD/TR/TABLE11.Save the page,then viewit in the browser. It shouldlooklike this:
  • 69. Download other Visibooks for free at www.visibooks.com63Format a table1. Nowyou’ll extendthe table. In Notepad,addthe WIDTH=”100%”attribute tothe TABLE tag:BODYTABLE BORDER=1 WIDTH=”100%”TRTDLinks/TDTDContent/TD/TR/TABLE2. Save the page andviewit in the browser. It shouldlooklike this:
  • 70. Download other Visibooks for free at www.visibooks.com64Percentage vs. fixed-width tablesWhen laying out a page using a table,set the table’s widthat100%. That way,the contents of the page can stretchtofill thewhole monitor,regardless of the monitor’s resolution.If you want it tofit a fixed-widthtable on all monitors,you’relimitedtoa table 580 pixels wide:640 pixelswidth oflow-resolutionmonitor- 20 pixelsbrowseroffset: thedistancethatpagecontentis indentedfromthesides ofthebrowser- 40 pixels20 fortheverticalscroll bar,plus 20 extra= 580 pixelswidthavailablefortableCreating pages withfixed-widthtables offers precise control,but wastes space on higher-resolution monitors:Page:laid out using a table 580 pixels wideMonitorusedtoview page:1280 pixels wide
  • 71. Download other Visibooks for free at www.visibooks.com653. Remove the table border byspecifying BORDER=”0”:BODYTABLE BORDER=”0” WIDTH=”100%”TRTDLinks/TDTDContent/TD/TR/TABLE4. Make the first cell light greybyadding the attributeBGOLOR=”#CCCCCC” tothe first TD tag:BODYTABLE BORDER=”0” WIDTH=”100%”TRTD BGCOLOR=”#CCCCCC”Links/TDTDContent/TD/TR/TABLE5. Save the page andviewit in the browser. It shouldlooklike this:
  • 72. Download other Visibooks for free at www.visibooks.com666. You’ll notice that the wordLinks is right up against the edge of theleft-handcell. Toadda 16-pixel margin between the edge of thecells andtheir contents,addthe attribute CELLPADDING=”16”tothe TABLE tag:BODYTABLE BORDER=”0” WIDTH=”100%”CELLPADDING=”16”TRTD BGCOLOR=”#CCCCCC”Links/TDTDContent/TD/TR/TABLE7. Toeliminate the spacing between cells,addthe attributeCELLSPACING=”0” tothe TABLE tag:BODYTABLE BORDER=”0” WIDTH=”100%”CELLPADDING=”16” CELLSPACING=”0”TRTD BGCOLOR=”#CCCCCC”Links/TDTDContent/TD/TR/TABLE8. Save the page andviewit in the browser. It shouldlooklike this:Cell Padding creates acushionof pixels betweentheedgeofthecell andwhat’s insideit.Cell Spacing is thespacebetweencells.Inthis case, 0 pixels
  • 73. Download other Visibooks for free at www.visibooks.com67Create a table-based home page1. Create a folder called“graphics” inside the Travel folder on yourharddrive.2. Gotowww.visibooks.com/travelpic. Capture the graphic there(uva.gif) andsave it in the graphics folder.3. In the right-handcell on the home page,replace the wordContentwiththe heading “Traveling South.” Give the heading a sizeof +3,put it in the Verdana font,andmake it bold.4. Insert the graphic in a newparagraphbeneaththe heading.5. Under the graphic,addthe following sentences as a newparagraph:If youve got a couple of weeks for vacation, you might wantto visit the South. Richmond, Williamsburg, and Charlestonare all beautiful cities.Make the text arial,size -1.
  • 74. Download other Visibooks for free at www.visibooks.com686. In the left-handcell,replace the wordLinks withthe names of thissite’s main sections: Richmond,Williamsburg andCharleston.Separate themwithP tags andput themin the arial font,at size-1.The code for the page can looklike this:
  • 75. Download other Visibooks for free at www.visibooks.com697. Save the page andviewit in the browser. It shouldlooklike this:
  • 76. Download other Visibooks for free at www.visibooks.com708. Tobring the left-handcell’s content tothe topof the cell,addtheattribute VALIGN=”top” tothe first TD tag. (Tocover allbases,addthe attribute tothe secondTD tag as well):TABLE BORDER=”0” WIDTH=”100%”CELLPADDING=”16” CELLSPACING=”0”TRTD BGCOLOR=”#CCCCCC” VALIGN=”top”FONT FACE=arial SIZE=”-1”RichmondPWilliamsburgPCharleston/FONT/TDTD VALIGN=”top”FONT FACE=verdana SIZE=”+3”BTravelingSouth/B/FONTPIMG SRC=graphics/uva.gifPFONT FACE=arial SIZE=”-1”If youve got acouple of weeks for vacation, you might wantto visit the South. Richmond, Williamsburg,and Charleston are all beautifulcities./FONT/TD/TR/TABLE
  • 77. Download other Visibooks for free at www.visibooks.com719. Tocontrol the widths of the table cells,addthe attributeWIDTH=”20%” tothe first TD tag,andthe attributeWIDTH=”80%” tothe second:TABLE BORDER=”0” WIDTH=”100%”CELLPADDING=”16” CELLSPACING=”0”TRTD BGCOLOR=”#CCCCCC” VALIGN=”top”FONT FACE=arial SIZE=”-1” WIDTH=”20%”RichmondPWilliamsburgPCharleston/FONT/TDTD VALIGN=”top” WIDTH=”80%”FONT FACE=verdana SIZE=”+3”BTravelingSouth/B/FONTPIMG SRC=graphics/uva.gifPFONT FACE=arial SIZE=”-1”If youve got acouple of weeks for vacation, you might wantto visit the South. Richmond, Williamsburg,and Charleston are all beautifulcities./FONT/TD/TR/TABLE
  • 78. Download other Visibooks for free at www.visibooks.com7210.Save the page andviewit in the browser. It shouldnowlooklikethis:
  • 79. Download other Visibooks for free at www.visibooks.com73Create new table-based pages1. On the Notepadmenu bar,clickEdit,then Select All.2. Once all the code on the page is selected,clickEdit,then Copy.3. On the menu bar,clickFile,then New.4. When a newblankpage comes up,clickEdit,then Paste.
  • 80. Download other Visibooks for free at www.visibooks.com745. Save the newpage at C:Travel withthe file name richmond.html.6. Title the newpage “Richmond, VA.”7. Open a browser andgotowww.visibooks.com/travelpic/richpic.Capture the Richmond,Virginia graphic there (capitol.jpg) andplace it in the graphics folder.8. Replace the “Traveling South” heading withone that reads“Richmond, Virginia.” Give it a size of +2.9. Replace the home page graphic withthe Richmondgraphic.Beneaththe graphic,in a newparagraph,type the sentence,“Richmond is the capital of Virginia.”10.Addthe word“Home” belowthe words in the left-handcell. Whenyou’re done,the page shouldlooklike this:
  • 81. Download other Visibooks for free at www.visibooks.com75Practice: Lay out pages using tablesA. Why do you usually want to create tables with a percentage width,rather than a fixed-pixel width?Task: Tomake your Travel site lookandworklike the one atwww.visibooks.com/travel.1. Create pages for Williamsburg andCharleston just like theRichmond page.Get the graphic andtext for the Williamsburg page atwww.visibooks.com/travelpic/willpic. Get the Charleston graphicandtext at www.visibooks.com/travelpic/charlpic.2. Using the words Richmond,Williamsburg,Charleston,andHome in the left-handcell of eachpage,linkall the pages in thisWebsite toeachother.TIP: Don’t forget to transform the link that shows “You Are Here”into bold, plain text.3. Insert the text andgraphics in their appropriate pages.4. Align all graphics tothe left. Give themvspace of 4 pixels andhspace of 12 pixels. Give eachgraphic appropriate Alt text.5. When you’re done,previewthe site in the browser. It shouldlookandworklike www.visibooks.com/travel.AnswersA. Fixed-width tables waste space and make pages look a bit sparse when viewed on higher-resolution monitors.
  • 82. Download other Visibooks for free at www.visibooks.com76Create navigation barsCreate a navigation bar for a home page1. Create a folder called“Travel West” on your harddrive atC:Travel West.2. Create a home page titled“Traveling West for Vacation.” Save itin the Travel West folder.3. Between the BODY and/BODY tags,create a table withonerowand3 cells in the row:TABLETRTD /TDTD /TDTD /TD/TR/TABLE4. Give the TABLE tag these attributes:WIDTH=”100%”Border=”0”CELLPADDING=”4”CELLSPACING=”0”5. In the table’s first cell,enter the word“California.” In thesecondcell,“The Rockies,” andin the thirdcell,“TheMidwest.”6. Make eachcell 33% wide (except for the middle one,whichhas tobe 34%: their summust equal the table widthof 100%).
  • 83. Download other Visibooks for free at www.visibooks.com777. Center the words in eachcell withCENTER tags:TD WIDTH=”33%”CENTERCalifornia/CENTER/TDTD WIDTH=”34%”CENTERThe Rockies/CENTER/TDTD WIDTH=”33%”CENTERThe Midwest/CENTER/TD8. Change the text in eachcell toarial,size -1,andchange thebackgroundcolor of all cells tolight grey(#cccccc).9. When you’re done,previewthe page in the browser. The tableshouldlooklike this:10.Belowthe table,in a newparagraph,enter the heading“Traveling West.” Make it arial,size +4,bold.11.Belowthat,adda newparagraphwiththis text:When you go West, be sure to visit thesights of California, the natural wonders ofthe Rockies, and the cities of the Midwest.
  • 84. Download other Visibooks for free at www.visibooks.com7812.Make the newparagraphverdana,size -1 andsave the page.13.Viewthe page in the browser. It shouldlooklike this:
  • 85. Download other Visibooks for free at www.visibooks.com79Create a navigation bar for a main section page1. Create a newpage withfile name california.html. Title it“Vacationing in California.”2. Make the table just like the one on the home page,except with4cells insteadof 3.Tip: Don’t forget to change the cell widths. There are now four cells,and their widths must add up to 100%. That means 25% per cell.3. Format the table andtext just like on the home page,but make theCalifornia cell bright yellow(BGCOLOR=”#ffff00”) toshow“You are here.”4. When you’re done,save the page andviewit in the browser. Thetable shouldlooklike this:5. Linkthe wordHome tothe home page (AHREF=”index.html”Home/A),then save the page.6. Open the home page in Notepad.7. Linkthe wordCalifornia tothe California page.8. Save the page.
  • 86. Download other Visibooks for free at www.visibooks.com80Practice: Create navigation barsTask: Tomake your Travel West site looklike the site atwww.visibooks.com/travelwest.1. Create a newblankpage andsave it withthe file namemidwest.html. It will be The Midwest page,but leave it blankforright now.2. Create a newpage withfile name rockies.html. This is The Rockiespage. Title it “Nature in the Rocky Mountains.” Make itsnavigation bar table exactlylike that of the California page.3. Change the “You are here” yellowbackgroundcolor fromtheCalifornia cell toThe Rockies cell.4. LinkCalifornia,The Midwest andHome totheir respectivepages.5. When you’re done,previewthe page in the browser. It shouldlooklike this:
  • 87. Download other Visibooks for free at www.visibooks.com816. Repeat this process withthe California andMidwest pages sothey’ve got functioning navigation bars that show“you are here.”7. Gotothe home page andin the navigation bar,linkThe RockiesandThe Midwest totheir respective pages.8. Make all text that corresponds tothe current page bold. (Example:make “The Rockies” boldon The Rockies page.)9. When you’re done,previewthe site in the browser. It shouldlooklike the site at www.visibooks.com/travelwest.
  • 88. Download other Visibooks for free at www.visibooks.com82Add subsections to siteInsert a table for content and subsection links1. In Notepad,open the California page in the Traveling West Website.2. Belowthe navigation bar table,addanother table that has one rowandtwocells in the row. Give the table the attributes:WIDTH=”100%”BORDER=”0”CELLPADDING=”16”CELLSPACING=”0”3. Make the first cell 25% wide andthe secondcell 75% wide.4. In the left-handcell,put the subsections for the main Californiasection:The Golden Gate BridgePHighway 101PBig Sur
  • 89. Download other Visibooks for free at www.visibooks.com835. In the right-handcell,put the heading “Places to visit inCalifornia.” Belowthe heading,in a newparagraph,type thesentence :When in California, be sure to see theGolden Gate bridge, Highway 101, and Big Sur.6. Align the contents of bothcells tothe topof each.7. Make the text in the left-handnavigation cell arial,size -1.8. Make the heading in the right-handcell bold,arial,size +3. Makethe paragraphbeneaththe heading verdana,size -1.9. When you’re done,save the page andpreviewit in the browser.The page shouldlooklike this:
  • 90. Download other Visibooks for free at www.visibooks.com84Create subsection pages1. Create newblankpages for subsections The Golden Gate Bridge,Highway101 andBig Sur:Page Title File NameThe Golden GateBridgeSeeing the GoldenGate Bridgegoldengate.htmlHighway 101 Driving Highway 101 highway101.htmlBig Sur Staying in Big Sur bigsur.html2. Copythe tables fromthe California page andpaste themintotheGolden Gate Bridge page.3. On the Golden Gate Bridge page,change the heading toread“Seeing the Golden Gate Bridge.” Make it size +2.4. Belowthe heading,change the paragraphtoread:The Golden Gate Bridge isnt golden--its actuallyorange.5. Make it verdana,size -1.
  • 91. Download other Visibooks for free at www.visibooks.com856. Linkthe words California,Highway 101,andBig Sur totheirrespective pages. Leave The Golden Gate Bridge as plain text toshow“you are here.”7. When you’re done,save the page andviewit in the browser. Itshouldlooklike this:Consistent page layoutCopying tables fromone page andpasting themintonewpages ensures that all pages share the same layout.This consistencymakes site navigation easier: nomatter whichpage in the site is being viewed,a person knows where thepage’s links andcontent will be.
  • 92. Download other Visibooks for free at www.visibooks.com86Practice: Add subsections to siteA. What’s the best way to keep tables consistent from page to page?Task: Tomake your Travel West Website lookandworklike the oneat www.visibooks.com/travelwest2.1. Open the California page in Notepad. LinkThe Golden GateBridge,Highway101 andBig Sur totheir respective pages.2. Open the Golden Gate Bridge page. Copybothtables fromthepage.3. Paste these tables intothe Highway101 page.4. On the Highway101 page,linkthe words The Golden GateBridge tothe Golden Gate Bridge page. Get ridof the anchor tagsaroundHighway 101 soit shows as plain text.5. Change the Highway101 page’s heading anddescriptive textbeneathit soit looks like this:
  • 93. Download other Visibooks for free at www.visibooks.com876. Format the Big Sur page soits layout andnavigation are consistentwiththe Golden Gate Bridge andHighway101 pages.Heading:Staying in Big SurParagraph:There are many excellent hotels right on the oceanin Big Sur.7. Save all pages.8. When you’re done creating all the pages in the California section ofthis site,previewit in a browser. It shouldlookandworklikewww.visibooks.com/travelwest2.AnswersA. Copying and pasting tables from one page to another.
  • 94. Download other Visibooks for free at www.visibooks.com88Place tables within tables1. In Notepad,open the Golden Gate Bridge page(goldengate.html).2. In front of the paragraphbelowthe main heading,begin a newtable with:2 rows1 cell in eachrowWIDTH=”200”CELLPADDING=”8”Tip: To create a table with more than one row, just begin a new rowafter ending the one above it:TRTD /TD/TRTRTD /TD/TRNote: the widthis a number—200—whichrenders the widthinpixels rather than as a percentage.3. Color the topcell blue (#0000ff) andthe bottomcell grey(#cccccc).4. In the topcell,put the words,“A Whole Lot of Paint.” Center thewords andmake thembold.
  • 95. Download other Visibooks for free at www.visibooks.com895. In the bottomcell,type the sentence:The Golden Gate bridge is covered with enough paint to coatfour battleships.6. Make the text arial,size -1.7. Save the page andviewit in the browser. When you’re done,itshouldlooklike this:8. Make the text in the topcell white. Dothis byadding theCOLOR=”#ffffff” attribute tothe FONT tag:FONT FACE=arial SIZE=”-1”COLOR=”#ffffff”BA Whole Lot of Paint/B/FONT
  • 96. Download other Visibooks for free at www.visibooks.com909. Addthe ALIGN=”right” attribute tothe TABLE tag:TABLE WIDTH=”200” BORDER=”0”CELLPADDING=”8” ALIGN=”right”10.Save the page andpreviewit in the browser. The page shouldlooklike this:
  • 97. Download other Visibooks for free at www.visibooks.com91Link to an external site using framesHow touse frames“Frames” are a waytoput more than one Webpage at a timeon a computer’s screen:2=CA2=CA 2=CA!Alive example of frames can be seen atwww.visibooks.com/frames.Manysites that usedframes have noweliminatedthem,returning tosingle-page layouts. That’s because frames haveserious drawbacks:• Frames are difficult toupdate. Everyscreen involvesthree or more pages tokeep trackof: the frameset itself,andat least twoothers togoin the frames.• Frame navigation is tricky. Links require special“targets” that gofrompage toframe.• Frames often require people toscroll annoyinglyinmore than one place.However,frames are useful for one thing: theyallowa user toget backtoa site withone clickwhile clicking throughothersites linkedtoit. An example of this can be seen in the externallinks at www.charuhas.com/sites.html.The following exercise demonstrates howtouse frames toprovide convenient links toexternal sites.
  • 98. Download other Visibooks for free at www.visibooks.com921. On the Golden Gate Bridge page,in a newparagraphbelowthefirst one,type:Visit the Web site for the Golden Gate bridge atwww.goldengate.org.www.goldengate.org will be linkedtothe frameset page.2. Create a newblankpage withfile name framesetgg.html. This willbe the “frameset” page that holds twoother pages.3. Insert this HTMLcode intothe newblankpage:HTMLHEAD/HEADTITLEGolden Gate Frameset/TITLEFRAMESET ROWS=50,*FRAME NAME=topframe SRC=backtogg.htmlFRAME NAME=bottomframeSRC=http://www.goldengate.org/FRAMESET/HTML
  • 99. Download other Visibooks for free at www.visibooks.com93Tip: The ROWS=”50,*” attribute in the FRAMESET tag tellsthe frameset to make the top frame 50 pixels high, and to allow thebottom frame to fill in the rest of the available space beneath it.The top frame will contain the link back to the Golden Gate Bridgepage. The bottom frame will contain an external site:www.goldengate.org.Link back to the Golden Gate Bridge pageThe goldengate.org site will display here4. Save framesetgg.html.5. Create a newpage withfile name backtogg.html. This is the pagethat will contain a linkbacktothe Golden Gate Bridge page.6. Give the newpage a light greybackground,anda single linkon it:Back to the Golden Gate Bridge page.7. Use an anchor tag withthe TARGET=”_top” attribute tolinkbacktothe Golden Gate Bridge page:A HREF=”goldengate.html” TARGET=”_top”Backto the Golden Gate Bridge page/A
  • 100. Download other Visibooks for free at www.visibooks.com94Tip:The TARGET=”_top” attribute enables linking to a pageoutside of the current frame…Clickhere Gotonew pageoutsideframeBack to the Golden Gate BridgePageGolden Gate Bridge Page…which avoids clicking on the link and having the page come up inthe same frame:Clickhere Pagecomes up insameframeBack to the Golden Gate BridgePageGolden Gate Bridge page8. Make the linkarial,size -1,andbold.9. Save the page.
  • 101. Download other Visibooks for free at www.visibooks.com9510.Open framesetgg.html in the browser. It shouldlooklike this:11.Clickon the Back to the Golden Gate Bridge page link. Itshouldtake you backtothe Golden Gate Bridge page.
  • 102. Download other Visibooks for free at www.visibooks.com96Tip: To make the frameset look more crisp and clean, try using thefollowing attributes in framesetgg.html:HTMLHEAD/HEADTITLEGolden Gate Frameset/TITLEFRAMESET ROWS=28,* FRAMEBORDER=”0”FRAME NAME=topframe SRC=backtogg.htmlMARGINWIDTH=”12” MARGINHEIGHT=”4”SCROLLING=”NO” NORESIZEFRAME NAME=bottomframeSRC=http://www.goldengate.org”MARGINWIDTH=12 MARGINHEIGHT=12SCROLLING=”AUTO” NORESIZE/FRAMESET/HTML
  • 103. Download other Visibooks for free at www.visibooks.com97Practice: Layout NavigationA. Why is it important that navigational links stay in the same place andorder on pages throughout a Web site?B. What is the minimum number of files that must be used to make aframeset work?Task: Make your Travel West Website lookandfunction like the oneat www.visibooks.com/travelwest3.1. Layout the Rockies page using tables soit looks like the Californiapage.Heading for the Rockies page:Nature in the Rocky Mountains2. Create pages for three subsections of The Rockies main section:StreamsSnowRock Formations3. Make sure that these pages are linkedandlaidout just like theGolden Gate Bridge,Highway101 andBig Sur pages.Page File name HeadingStreams streams.html Mountain StreamsSnow snow.html Snow in the RockiesRockFormationsrocks.html Rock Formations
  • 104. Download other Visibooks for free at www.visibooks.com984. Repeat this process withthe Midwest section of the site. Thesubsections of the Midwest section are:St. LouisChicagoDeMoinesPage File name HeadingMidwest midwest.html Cities of the MidwestSt. Louis stlouis.html St. LouisChicago chicago.html ChicagoDeMoines demoines.html DeMoines5. On the Chicagopage,insert a one-row,one-cell,fixed-widthtable200 pixels wide,withcell padding of 4. Color it pale yellow(BGCOLOR=”#ffffcc”).6. In this table,put the sentence,“In the past, Chicago was hometo Al Capone, Mayor Daley, and the nation’s biggeststockyards.”7. On the St. Louis page,linktothe external Websitewww.stlouis.comusing frames.Paragraph for St. Louis page:Find out what’s going on in St. Louis atwww.stlouis.com.8. When you’re done,open the Travel West site in the browser. Itshouldlookandfunction like the one atwww.visibooks.com/travelwest3.
  • 105. Download other Visibooks for free at www.visibooks.com99InteractivityIn this section, you’ll learn how to:• Insert META tags• Create forms• Format text with style sheets• Employ templates• Upload sites to a Web serverYou’ll build a site that looks like this:
  • 106. Download other Visibooks for free at www.visibooks.com100Insert META tags1. In Notepad,open upthe home page of the Travel West Website.2. Beneaththe HEAD andsignature (!--your name--) tags,insert the first META tag for describing the site’s contents:HEAD!--Created by Your Name--META NAME=”description” CONTENT=”This isthe Travel West Web site. It containsinformation about vacationing in California,the Rockies and the Midwest.”/HEADMETA tagsMETAtags are HTMLtags that can include a description ofthe page,as well as “keywords that provide clues toits content.METAtags make a page easier tofindandindex bysearchengines.METAtags don’t showupon a Webpage. Rather,theyresideunseen in its HTMLcode.
  • 107. Download other Visibooks for free at www.visibooks.com1013. Beneaththe “description” meta tag,insert a newMETA tag forits searchkeywords:HEAD!--Created by Your Name--META NAME=”description” CONTENT=”This isthe Travel West Web site. It containsinformation about vacationing in California,the Rockies and the Midwest.”META NAME=keywords CONTENT=”traveling,travel, west, California, rockies, midwest,golden gate bridge, highway 101, Big Sur,streams, snow, rock formations, St. Louis,Chicago, De Moines”/HEAD
  • 108. Download other Visibooks for free at www.visibooks.com102Create forms1. Create a newpage withfile name infoform.html.2. Title the page “Request for Information” andsave it in the TravelWest folder on your harddrive.3. Belowthe BODY tag,type the sentence:Fill out the following form to get moreinformation about traveling West:4. Belowthe sentence,insert a P tag,then insert a FORM tag:BODYFill out the following form to get moreinformation about traveling West:PFORM/BODY5. Belowthe FORM tag,create a table with4 rows and2 cells ineachrow. Make the width50%,give it cellpadding of 4,andaborder of 1.
  • 109. Download other Visibooks for free at www.visibooks.com1036. In the top three left-handcells,put:Name:Address:E-Mail:7. Save the page andviewit in the browser. It shouldlooklike this:8. In the top right-handcell,insert a text input field. Dothis withanINPUT tag:TRTDName:/TDTDINPUT TYPE=”text” NAME=”name”SIZE=”20”/TD/TRTip: The TYPE of this input is “text,” which makes it a textbox.The NAME of this input is “name,” which is how the server knowsthat it’s where people enter their name. The SIZE is 20 characters—the length of the textbox.
  • 110. Download other Visibooks for free at www.visibooks.com1049. Save the page andviewit in a browser. It shouldnowlooklike this:10.Insert textboxes in the cells next toAddress andE-mail as well.Name the input textbox next toAddress “address,” andnamethe input textbox next toE-mail “email.”INPUT TYPE=”text” NAME=”address” SIZE=”20”11.Save the page andviewit in the browser. It shouldnowlooklikethis:Textinputbox
  • 111. Download other Visibooks for free at www.visibooks.com10512.In the last row’s right-handcell,insert a submit button,INPUTTYPE=”submit”. Use the VALUE attribute tospecifythe textdisplayedon the button:TRTDE-mail:/TDTDINPUT TYPE=”text” NAME=emailSIZE=”20”/TD/TRTRTD/TDTDINPUT TYPE=”submit” VALUE=Send meinfo /TD/TR/TABLE13.Save the page andviewit in the browser. When you’re done,thepage shouldlooklike this:
  • 112. Download other Visibooks for free at www.visibooks.com10614.Remove the border fromthe table andalign the text in the left-handcells tothe right.TDP ALIGN=”right”Name:/TD15.Make the left-handcell in the first row5% wide,andthe right-handcell in the first row45% wide.Tip: By specifying the width of cells in the first row, the cells in therows beneath will assume the same widths.16.Save the page,viewit in the browser,andit shouldlooklike this:
  • 113. Download other Visibooks for free at www.visibooks.com10717.Open the home page in Notepadandadda newparagraph:Get more information about Western Travelmailed to you18.Linkthis sentence toinfoform.html.19.Save the page andviewit in the browser. It shouldlooklike this:20.Clickon the linksentence. It shouldbring upthe page withtheform.
  • 114. Download other Visibooks for free at www.visibooks.com108Making a form workTomake a formwork,an action must be assignedtoit. Toaddan action toyour form,addthe ACTION attribute totheFORM tag.Consult withyour Webserver administrator tospecifywhataction you shouldassign. For example,an action for a formmight looksomething like this:FORM METHOD=”POST”ACTION=http://www.yourdomain.com/cgi-bin/formmail.pl”This tells the formtopost its data toa programcalledformmail.pl on at yourdomain.com. This programmight takethe formdata ande-mail it towhomever you choose.
  • 115. Download other Visibooks for free at www.visibooks.com109Practice: Create forms1. Create a newpage withfile name favoritesform.html. Title it “MyFavorite Places.”2. Insert a form,then insert a table withfour rows andtwocells ineachrow. Fill the cells withthe text andformobjects seen below:Tip: The HTML code for a drop-down list looks like this:SELECT NAME=selectOPTIONFirst Choice/OPTIONOPTIONSecond Choice/OPTIONOPTIONThird Choice/OPTION/SELECTThe HTML code for radio buttons looks like this:input type=radio name=radiosvalue=radio1 checked This is radio button1brinput type=radio name=radiosvalue=radio2 This is radio button 2Drop-downlistRadiobuttons
  • 116. Download other Visibooks for free at www.visibooks.com1103. Put these values in the drop-down list:CaliforniaThe RockiesThe Midwest4. When finished,save the page andpreviewit in the browser. Itshouldlooklike this:
  • 117. Download other Visibooks for free at www.visibooks.com111Use style sheetsThe pros and cons of style sheetsStyle sheets are a flexible,powerful tool for laying out andformatting Webpages. Theyalloweverypage in a site togetdisplayinstructions fromjust one style sheet.For instance,if you createda 1,000 page Website using stylesheets,andyou wantedtochange the linkcolor on everypage,you’donlyneedtochange the linkcolor on one style sheet.Without style sheets,you’dhave tochange 1,000 individualpages.Style sheets can alsocreate displayeffects. An example of this isat www.visibooks.com. When you roll your cursor over links,theybecome underlined—if you’re viewing the page withtheInternet Explorer browser.That’s the disadvantage of using style sheets: they’reinterpreteddifferentlybyeachbrowser. Astyle sheet-basedpage viewedin Internet Explorer maylookdifferent than itdoes in Netscape Navigator or other browsers.
  • 118. Download other Visibooks for free at www.visibooks.com112Create a style sheet1. Create a newpage withfile name format.css.2. Save it in a newfolder on the C: drive calledCSS Site.Tip: This is a style sheet, not a Web page. It’s a file that gives Webpages formatting instructions, but isn’t ever seen. It contains noHTML, and has a different file extension: .css rather than .html.3. On the blankformat.css page,insert the following instruction:.bodytext {font-family:Courier New,Courier, mono; font-size:11pt; font-weight:bold; color:”#ff0000”; background-color:#ccccff”}Here are the component parts of the formatting instructions forthe .bodytext style:.bodytext The type of text tobe formatted.font-family The fonts in whichthe text shouldbedisplayed. First the computer looks forCourier New,then Courier,then amonospacedfont.The quotes in “Courier New” allow thecomputer to read font names with spaces.font-size The size of the text. Unlike in HTML,stylesheets allowspecific point sizes tobe used.font-weight Boldor plain text.color The color of the text.background-color Changes the color of the page area directlybehindthe text.
  • 119. Download other Visibooks for free at www.visibooks.com1134. Save format.css. It shouldlooklike this:
  • 120. Download other Visibooks for free at www.visibooks.com114Apply a style sheet1. In Notepad,create a newhome page andput it the CSS Sitefolder.2. Title the home page “Style Sheet Demo Page.”3. Belowthe BODY tag,type the text CSS Site. Make it a size 1heading using H1 tags:BODYH1CSS Site/H14. In a newparagraphbeneathit,type the sentence,“Cascading StyleSheets are a powerful andflexible tool for formatting Webpages:”BODYH1CSS Site/H1PCascading Style Sheets are a powerful andflexible tool for formatting Web pages/P5. Save the page andviewit in the browser. It shouldlooklike this:
  • 121. Download other Visibooks for free at www.visibooks.com1156. Belowthe HEAD tag,adda LINK tag that points toformat.css:HTMLHEADLINK REL=stylesheet HREF=format.css/HEADTITLEStyle Sheet Demo Page/TITLE7. In the P tag,addthe CLASS attribute that points tothe.bodytext style:P CLASS=bodytextCascading Style Sheetsare a powerful and flexible tool forformatting Web pages./P8. Save the home page andviewit in the browser. It shouldlooklikethis:The home page’s LINK REL=stylesheetHREF=format.css tag referredtoformat.css forformatting instructions.The paragraphon the page referredtothe .bodytext style onformat.css for formatting instructions.
  • 122. Download other Visibooks for free at www.visibooks.com116Tip: To use the same stylesheet to format pages throughout a site, justinsert the same LINK tag in each Web page. For instance, if therewere 100 pages in the CSS Site, they could all contain the sameLINK REL=stylesheet HREF=format.css tagand format body text the same way by using the PCLASS=”bodytext” tag.
  • 123. Download other Visibooks for free at www.visibooks.com117Create link effects with style sheets“Cascading” style sheetsStyle instructions can be containedwithin a Webpage itself,without referring toa separate style sheet. These instructions willoverride those of the style sheet,hence the term“Cascading StyleSheets:”Aninstructioninapage’s text…FONTCOLOR=”#ff0000”This is redtext./FONT…overrides astyleinstructionforthepage…STYLETYPE=text/css.greentext { color:“#00ff00” }/STYLEBODYPCLASS=”greentext”This is green text.…which overrides astyleinstructionforthesite.LINK REL=”stylesheet”HREF=”format.css”/HEADBODYP CLASS=”bodytext”This is blue text.The following exercise employs an in-page style.
  • 124. Download other Visibooks for free at www.visibooks.com1189. In the CSS Site folder,open the home page in Notepad.10. Belowthe HEAD tag,replace this:LINK REL=stylesheet HREF=format.csswiththis:STYLE TYPE=text/css!--A:link {color:#ff0000; text-decoration:none}A:visited {color:#ff0000; text-decoration:none}A:hover {color:#00ff00; text-decoration:underline}--/STYLE11.Belowthe present paragraph,adda newparagraph:A good resource for learning more aboutstyle sheets is Webmonkey.12.Linkthe word“Webmonkey” tothe external sitehttp://www.webmonkey.com. Also,make the wordWebmonkeybold.13.Save the page andrefreshit in the browser. When you put yourcursor on the wordWebmonkey,it shouldchange fromredandplain togreen andunderlined.
  • 125. Download other Visibooks for free at www.visibooks.com119Practice: Using style sheets1. Open format.css in Notepad.2. Addthe following style instruction belowthe .bodytext style:.heading {font-family: Verdana, Arial,Helvetica, sans-serif; font-size: 48pt}3. Save format.css.4. Open the home page andreplace:STYLE TYPE=text/css!--A:link {color:”#ff0000”; text-decoration:none}A:visited {color:”#ff0000”; text-decoration:none}A:hover {color:”#00ff00”; text-decoration:underline}--/STYLEwiththe original LINK tag:LINK REL=stylesheet HREF=format.css
  • 126. Download other Visibooks for free at www.visibooks.com1205. Addthe CLASS=”heading” attribute tothe H1 tag.H1 CLASS=”heading”6. Save the home page andviewit in the browser. It shouldlooklikethis:
  • 127. Download other Visibooks for free at www.visibooks.com121Upload sites to a Web server1. DownloadWS_FTPLE andinstall it.2. Open the program. You shouldsee an initial Session Propertieswindow. It shouldlooklike this:FTPFTPstands for “File Transfer Protocol,a waytotransfer filesbetween computers over the Internet. Uploading a site toaWebserver requires special FTPsoftware.The most popular programusedtouploadanddownloadWebpages froma server is WS_FTP. The LE version is free andcanbe downloadedat www.download.comor www.tucows.com.The Proversion costs $39.95,andcan alsobe foundat the Website of the companythat makes it,www.ipswitch.com.Beloware instructions for uploading files using the free LEversion.
  • 128. Download other Visibooks for free at www.visibooks.com1223. Clickthe Newbutton.4. In the Profile Name textbox,enter the name of your uploadprocess,suchas “Upload my Web site.”5. In the Host Name/Address textbox,enter the name or IPaddressof your Webserver. It can be something like www.visibooks.com,washington.patriot.net,or 207.176.7.217.Tip: Contact your Web server administrator to find out the HostName or IPAddress of your Web server. The Web serveradministrator can also supply your User ID and Password.6. Leave the Host Type set at Automatic detect,andinput yourUser ID andPassword.7. Checkthe Save Pwd checkbox,then clickthe Apply button. TheSession Properties windowshouldnowlooksomething like this:
  • 129. Download other Visibooks for free at www.visibooks.com1238. Clickthe OK button,andafter your Webserver is contactedtheWS_FTPwindowwill appear. It shouldlooksomething like this:9. At the top of the left-handLocal System window,double-clickonthe green arrowicon togoupin the file hierarchy. Double-clickit again toget tothe C: drive.10.Double-clickon the folder containing your Website toopen it up.11.In the right-handRemote System window,double-clickon thepublic_html folder,or the folder that leads toyour site on theserver.Yourcomputer Web server
  • 130. Download other Visibooks for free at www.visibooks.com12412.You shouldnowsee your Webpages on your computer andonyour Webserver. Tosendover your Webpages,highlight them,then clickon the button tosendthemtothe Webserver.Tip: If there are already pages on your Web server, the new pages yousend over will replace the old versions with the same file name.
  • 131. Download other Visibooks for free at www.visibooks.com125Practice: InteractivityCreate a new home page and site1. Create a newhome page titled“World Dances.” Save it atC:Dance.2. Create a home page for the site that looks like this:Tip: Get the graphics and text for this page atwww.visibooks.com/dancing.3. At the bottomof this andeveryother page in the site,put an e-maillinktoinfo@worlddance.org.
  • 132. Download other Visibooks for free at www.visibooks.com126Create main section pages1. Linkthe words American,Latin,andEuropean in the navigationbar tonewmain section pages on American,Latin,andEuropeandance,respectively.Tip: Get the images and text for these pages atwww.visibooks.com/dancing.The American dance page shouldlooklike this:2. Make the Latin andEuropean pages lookconsistent withtheAmerican dance page.
  • 133. Download other Visibooks for free at www.visibooks.com127Create subsection pages1. On the American dance page,linkthe words Lindy Hop andFoxtrot tonewsubsection pages on those dances. The LindyHoppage shouldlooklike this:Tip: Get the images and text for this and the other subsection pages atwww.visibooks.com/dancesub.2. Make the Foxtrot page lookconsistent withthe LindyHoppage.3. Create the subsection pages Tango,Merengue,andSalsa for theLatin section.4. Create the subsection pages Waltz andContra Dancing for theEuropean section.
  • 134. Download other Visibooks for free at www.visibooks.com128META tags1. Include this METAdescription in the home page:Dances Aroundthe Worldincludes information about American,Latin andEuropean dances.2. Include these METAkeywords in the home page:dance, worldwide, tango, merengue, salsa, lindy hop, foxtrot,waltz, contra dancing.
  • 135. Download other Visibooks for free at www.visibooks.com129Creating forms1. On the home page,insert a formthat looks like this:2. When you’re done,previewthe whole Website in the browser. Itshouldlooklike the site at www.visibooks.com/worlddancing.
  • 136. Download other Visibooks for free at www.visibooks.com130
  • 137. Download other Visibooks for free at www.visibooks.com131Advanced LayoutIn this section, you’ll learn how to:• Employ background images• Employ spacer GIFs• Insert a horizontal rule• Specify page marginsYou’ll create a page that looks like this:
  • 138. Download other Visibooks for free at www.visibooks.com132Employ background graphics1. Open Notepad.2. Create a newpage withall necessaryHTMLtags anda two-celltable:Rows: 1Cells: 2Width: 100 PercentBorder: 0Cell Padding: 18Cell Spacing: 03. Save the file on your computer’s Desktopwiththe file nameadvlayout.html. Title it Advanced Layout.4. Give bothcells in the table a darkblue backgroundcolor(#000099).5. Make the first cell 10% wide,andthe secondcell 90% wide.
  • 139. Download other Visibooks for free at www.visibooks.com1336. Gotowww.visibooks.com/advlayout/picsandsave techtool.gif onyour computer’s Desktop. Insert it in the left-handcell.7. Gotowww.visibooks.com/advlayout/picsandsave bkgd.gif onyour computer’s Desktop. Make it the backgroundof the right-handcell using the BACKGROUND attribute:TD WIDTH=”90%” BGCOLOR=#000099BACKGROUND=”bkgd.gif”8. In the right-handcell,type the text,“The Magazine for PeopleWho Like Gadgets.”9. Make the text arial,size +1,bold.10.Color the text white.11.Previewthe page in the browser. It shouldlooklike this:Tip: Notice the line towards the bottom of the cell where bkgd.gifbegins repeating. It repeats because background graphics tile to fill allavailable space in a cell. The cell is 136 pixels tall: 100 pixels fortechtool.gif, plus 36 for Cell Padding (18 pixels at the top and bottomof techtool.gif).bkgd.gif is only 123 pixels tall; therefore, there’s 13 pixels of space leftto fill. To fix this, use an image editing program like Photoshop,Fireworks or Paint Shop pro to make the background image 136 pixelstall.
  • 140. Download other Visibooks for free at www.visibooks.com13412.Belowthe first table,insert a three-cell table witha widthof 100%andcellpadding of 4. It’s border andcellpadding shouldbe 0. Makethe cells equal widthandcolor themblack.13.In the first cell,enter the text,“Laptops.” In the second,“CellPhones,” andin the third,“PDAs.” Make the text white andcenterit withing the cells.14.Save the page andviewit in the browser. It shouldlooklike this:
  • 141. Download other Visibooks for free at www.visibooks.com135Employ spacer GIFs1. Gotowww.visibooks.com/advlayout/pics andsave spacer.gif onyour computer’s Desktop.2. Belowthe toptwotables,insert a thirdtable just like the first table.3. Insert spacer.gif in the left-handcell. Give it a widthof 100 andheight of 1.TD WIDTH=10% BGCOLOR=#000099IMGSRC=spacer.gif WIDTH=100HEIGHT=1/TDTip: Most spacer GIFs are 1x1 pixel, which load very quickly online.This one started out as 50x50 to make it easier to see and save.4. Change the backgroundcolor of the cell containing spacer.gif tobright yellow(#ffff00).Why use spacer GIFs?Spacer GIFs are usedtostretchtable cells toan exact width.Theyare transparent,sotheyremain invisible regardless of thecell’s backgroundcolor.Aspacer GIF is usedin the exercise below. It keeps the widthofthe left-handcell constant,regardless of the size or resolutionof the screen usedtoviewit.
  • 142. Download other Visibooks for free at www.visibooks.com1365. Put text in the right-handcell sothe page looks like this whenviewedin the browser:6. Set the browser tohighresolution—1024x768 pixels. The pageshouldlooklike this:Notice howthe left-handcells in the topandbottomtables staythesame width,regardless of the widthof the browser usedtoviewthem.
  • 143. Download other Visibooks for free at www.visibooks.com137Insert a horizontal rule1. Belowthe text in the right-handcell,insert a P tag,then the tagfor a horizontal rule:You can read our product reviews and alsooffer your own opinions and observations onhigh tech products.PHR2. This generates a 3-Drule. Togive it a cleaner look,addtheattributes NOSHADE andSIZE=”1” tothe HR tag:HR NOSHADE SIZE=”1”3. Place text belowthe horizontal rule soit looks like this whenviewedin the browser:
  • 144. Download other Visibooks for free at www.visibooks.com138Specify page margins1. In the BODY tag,addthe LEFTMARGIN,RIGHTMARGIN,TOPMARGIN,MARGINWIDTH andMARGINHEIGHT attributes.Give themall a value of zero:BODY LEFTMARGIN=0 RIGHTMARGIN=0TOPMARGIN=0 MARGINWIDTH=0MARGINHEIGHT=0Tip: The LEFTMARGIN, RIGHTMARGIN, and MARGINWIDTH(along with TOPMARGIN and MARGINHEIGHT) attributes areredundant to account for browser differences: Internet Explorerrecognizes LEFTMARGIN, RIGHTMARGIN and TOPMARGIN,while Netscape Navigator recognizes MARGINWIDTH andMARGINHEIGHT.2. Specifya backgroundcolor of white (#ffffff) for the cellcontaining the page’s text. Specifya backgroundcolor of darkblue(#000099) for the page itself.
  • 145. Download other Visibooks for free at www.visibooks.com1393. Save the page andviewit in the browser. When you’re done,itshouldlooklike this:
  • 146. Download other Visibooks for free at www.visibooks.com140Practice: Advanced layout1. Give the navigation table (the one withLaptops,Cell Phones andPDAs) five cells.2. Put |characters (on the same keyas the backslash character onyour keyboard) in the cells surrounding the one that contains CellPhones.3. Give the cells withthe |characters a widthof 1%,andcenter the |characters within the cells.4. Color the |characters white. When you’re done,the page shouldlooklike the one at www.visibooks.com/advancedlayout:
  • 147. Download other Visibooks for free at www.visibooks.com141Practical JavaScriptIn this section, you’ll learn how to:• Enable rollover graphics• Open new windows• Validate form inputYou’ll incorporate functions that look like this:Creating rollover graphic linksOpening new windowsValidating forms
  • 148. Download other Visibooks for free at www.visibooks.com142Enable rollover graphicsWhat is JavaScript?JavaScript is a programming language that sits in the HTMLcode of a Webpage. It’s not an industrial-strengthlanguagelike C++,Java,or Perl that’s usedtoprogramWebservers.Rather,JavaScript is usedtoperformsimple functions withinWebpages.The following section shows you howtoemployJavaScript’sthree most useful functions. It won’t teachyou howtowriteprograms in JavaScript. Learning a programming language isjust that: learning a newlanguage,whichcan take months oryears tomaster. Rather,you’ll learn howtoobtain functioningJavaScript scripts andmodifythemtodowhat you want.This approachis fast andeffective. There are thousands ofJavaScript scripts available for free on the Webthat performanything you’dwant todoin a Webpage—all you have todois customize them.Working with source codeSometimes you’ll see a Webpage andsaytoyourself,“Iwonder howtheydidthat?” Byviewing the page’s HTMLandJavaScript source code,you can findout.You can alsocopysource code,paste it intopages you’reworking on,andmodifyit. Since that’s soeasytodo,sourcecode for Webpages isn’t usuallycopyrighted.The following exercise shows you howtocopy,paste,andmodifyan existing JavaScript toput rollover graphic links onyour Webpages.
  • 149. Download other Visibooks for free at www.visibooks.com143View source code1. Create a folder on your harddrive called“rollover,” at C:/rollover.2. Using the browser,gotowww.visibooks.com/advancedlayout.3. Viewthe page’s source code byclicking View,then Source.
  • 150. Download other Visibooks for free at www.visibooks.com144Copy source code1. Acopyof Notepadwithadvancedlayout(1) in the title bar willappear. Select all the HTML,then copyit.2. Create a newblankpage in Notepadandpaste all the copiedHTMLcode intoit.3. Save the page at C:rollover as index.html.4. Create a folder within the rollover folder calledgraphics:C:rollovergraphics.5. Gotowww.visibooks.com/rolloverpics. Capture all six graphicsthere andsave themin the graphics folder.
  • 151. Download other Visibooks for free at www.visibooks.com1456. Gotowww.visibooks.com/rollover.The graphics in the navigation bar arerollover links:7. Viewits source code andhighlight allthe code between andincluding theSCRIPT and/SCRIPT tags.It’s between the HEAD and/HEAD tags:8. Copythis JavaScript code.9. Paste the JavaScript code between the HEAD and/HEAD tagsin index.html.
  • 152. Download other Visibooks for free at www.visibooks.com146Modify source code1. You’ll notice that the names of the graphics specifiedin theJavaScript (laptops2.gif,laptops.gif,cellphones2.gif…) don’t correspondwiththe names of thegraphics in your graphics folder.Modifythe source code tospecifythe correct file names for yourgraphics:img1on = new Image();img1on.src = graphics/lapbright.gif;img2on = new Image();img2on.src = graphics/cellbright.gif;img3on = new Image();img3on.src = graphics/pdabright.gif;img1off = new Image();img1off.src = graphics/lap.gif;img2off = new Image();img2off.src = graphics/cell.gif;img3off = new Image();img3off.src = graphics/pda.gif;Graphicsthatsittherewhencursorisoff linkGraphicsthatpopup whencursorisonlink
  • 153. Download other Visibooks for free at www.visibooks.com1472. Gobacktowww.visibooks.com/rollover in the browser,andviewthe page’s source code. Scroll down until you see the code for thesecondtable,the one that defines the blacknavigation bar.3. Highlight andcopythe anchor tag withthe onMouseOver andonMouseOut attributes,the closing anchor tag (/a),andtheimage tag inside them. It links tolaptops.html:4. In index.html,get ridof the twocells withthe |characters in them.
  • 154. Download other Visibooks for free at www.visibooks.com1485. Paste the anchor tags andthe image tag theyenclose intoindex.html sotheyreplace the wordLaptops:From this:TD WIDTH=33%BGCOLOR=#000000CENTERFONT FACE=arialSIZE=-1COLOR=#ffffffLaptops/FONT/CENTER/TDTo this:TD WIDTH=33% BGCOLOR=#000000CENTERAHREF = laptops.htmlonMouseOver = imgOn(img1)onMouseOut = imgOff(img1)IMGSRC=graphics/laptops.gif WIDTH=120HEIGHT=20 BORDER=0 name=img1alt=Laptops/a/CENTER/TD6. Change the file name for the graphic being linkedfromlaptops.gif toyour graphic: lap.gif.7. Save index.html andviewit in the browser. It shouldworklikethis:
  • 155. Download other Visibooks for free at www.visibooks.com149Practice: Enable rollover graphics1. In the navigation bar of index.html,replace the words “CellPhones” and“PDAs” withrollover graphics. Use the graphicscellbright.gif,cell.gif,pdabright.gif andpda.gif.Tip: Modify the anchor tag and image code in the first cell for use inthe other two.A HREF = laptops.htmlonMouseOver = imgOn(img1)onMouseOut = imgOff(img1)IMGSRC=graphics/lap.gif WIDTH=120HEIGHT=20 BORDER=0 name=img1alt=Laptops/A2. When you’re done,save the page andviewit in the browser. Itshouldlooklike this:
  • 156. Download other Visibooks for free at www.visibooks.com150Open new windows1. In Notepad,open upthe home page for the Travel West Website:index.html at C:Travel West.2. In the browser,gotowww.visibooks.com/newwindow.3. Viewthe source code for the page. Highlight andcopytheJavaScript code between the HEAD and/HEAD tags.4. Paste it belowthe META tags in index.html:
  • 157. Download other Visibooks for free at www.visibooks.com1515. Change the JavaScript code sothat it opens infoform.html in thenewwindow:From this:SCRIPT LANGUAGE=JavaScriptfunction Contact(){OpenNewWindow =window.open(contact.html,help,toolbar=no,location=0,directories=no,status=yes,menubar=0,scrollbars=yes,resizable=yes,width=300,height=350);}/SCRIPTTo this:SCRIPT LANGUAGE=JavaScriptfunction Contact(){OpenNewWindow =window.open(infoform.html,help,toolbar=no,location=0,directories=no,status=yes,menubar=0,scrollbars=yes,resizable=yes,width=300,height=350);}/SCRIPTTip: JavaScript is not HTML—it’s a programming language. It worksbetter without quotes around values. Also, don’t change the case ofwords in a script that works. JavaScript is, unlike HTML, case-sensitive.
  • 158. Download other Visibooks for free at www.visibooks.com1526. Viewthe source code again at www.visibooks.com/newwindow.7. Findthe anchor tag between the BODY and/BODY tags thatrefers tothe JavaScript function Contact().FONT FACE=arial SIZE=+1BAHREF=javascript:Contact()Open new windowwith form inside/A/B/FONTTip: A function is a job performed by a program. The one above isnamed Contact(). Its job is to open the window that allows peopleto contact Visibooks.8. Copythe anchor tag,then paste it intoindex.html soit links thesecondsentence totheFrom this:A HREF=infoform.htmlGet more informationabout Western travel mailed to you/ATo this:A HREF=javascript:Contact()Get moreinformation about Western travel mailed toyou/A9. Save index.html andviewit in the browser.
  • 159. Download other Visibooks for free at www.visibooks.com15310.Clickon the linkedsentence. Anewwindowshouldpopupwiththe forminside:Tip: To change the size and appearance of the window that pops up,change the values after window.open:OpenNewWindow =window.open(contact.html,help,toolbar=no,location=0,directories=no,status=yes,menubar=0,scrollbars=yes,resizable=yes,width=300,height=350)Changetostatus=notogetridofthestatusbaratthebottomofthewindowChangewidth andheightvalues tochangesizeofwindow inpixels
  • 160. Download other Visibooks for free at www.visibooks.com154Validate form inputSee how it works1. In Notepad,open infoform.html in the Travel West site.2. In the browser,gotowww.visibooks.com/validate.3. Clickon the Send me info button. When you do,an alert windowshouldappear. When you enter your name andclickthe button,another alert windowshouldappear that reads,“Please inputyour address.” This alsoworks withthe e-mail input.
  • 161. Download other Visibooks for free at www.visibooks.com155Insert the validation script1. Viewthe source of the page at www.visibooks.com/validate,andcopythe JavaScript between the HEAD tags:script!--function validate(){if (document.info.name.value==){alert (Please input your name.)return false}if (document.info.address.value==){alert (Please input your address.)return false}if (document.info.email.value==){alert (Please input your e-mail address.)return false}}//--/scriptTip:Here’s a diagram that explains the if statement variables:if (document.info.address.value==)2. Paste it between the HEAD tags in infoform.html.Commenttags hidethescriptfromolder,non-JavaScriptcapablebrowserssotheydon’tdisplay itStands forpageitselfNameofformIdentifiesinputfieldDenotesblankfield
  • 162. Download other Visibooks for free at www.visibooks.com156Modify the FORM tag1. Adda NAME attribute tothe FORM tag. Name the form“info:”FORM NAME=info METHOD=”POST”action=http://www.yourserver.com/cgi-bin/formmail.pl2. Addthe attribute ONSUBMIT tothe FORM tag. Tell the formthat when the submit button is clicked,performthe functionreturn validate():FORM NAME=info METHOD=”POST”ONSUBMIT=return validate()action=http://www.yourserver.com/cgi-bin/formmail.pl3. Save the page. Notice howthe JavaScript’s if statement inputvariables have the same name as the form’s input fields:script!--functionvalidate(){if(document.info.name.value==){alert(Pleaseinputyourname.)returnfalse}if(document.info.address.value==){alert(Pleaseinputyouraddress.)returnfalse}if(document.info.email.value==){alert(Pleaseinputyoure-mail address.)returnfalse}}//--/scriptTABLE WIDTH=”50%”CELLPADDING=”4”BORDER=”0”TRTDWIDTH=”5%”PALIGN=”right”Name:/TDTDWIDTH=”45%”INPUTTYPE=”text” NAME=nameSIZE=”20”/TD/TRTRTDPALIGN=”right”Address:/TDTDINPUT TYPE=TEXTNAME=address SIZE=”20”/TD/TRTRTDPALIGN=”right”E-mail:/TDTDINPUT TYPE=”text”NAME=email SIZE=”20”/TD/TRTRTD/TDTDINPUTTYPE=”submit” VALUE=Send meinfo/TD/TR/TABLE4. Viewinfoform.html in the browser. It shouldlookandworklikethe format www.visibooks.com/validate.
  • 163. Download other Visibooks for free at www.visibooks.com157Additional ResourcesWebmonkey (www.webmonkey.com)Ahow-tosite for people building Websites,filledwithexcellenttutorials andresources.EchoEcho (www.echoecho.com)Even more tutorials than Webmonkey,andall clear anddetailed.Contains helpful statistics on browser usage,monitor settings,platforms,andother technologyusedtoviewWebpages.Project Cool (www.projectcool.com)Knowledge,guidance andinspiration for people building Websites. Itincludes a goodstyle sheet guide atprojectcool.com/developer/reference/css_style.html.Web Review (www.webreview.com)Asharpandinformative site for Webdevelopers,withsections onAuthoring,Design,Development,E-Commerce,Multimedia,andBack-EndWebserver Programming.HTMLHelp (www.htmlhelp.com)Goodresource site withlots of information on style sheets andHTMLtechnical standards. Includes online tools suchas an HTMLvalidator,linkchecker,andASCII character guide.HTML XHTML: The Definitive Guide (book)ChuckMusciano,Bill Kennedy,O’Reilly; ISBN: 059600026XLike most O’Reillybooks,gearedtowards programmers. Acomprehensive resource for HTML,but better yet,a guide tomakingHTMLworkwithXML—the “next big thing” in Webdevelopment.Voodoo’s Introduction to JavaScript (rummelplatz.uni-mannheim/~skoch/js/tutorial.htm)One of the original JavaScript tutorials,andstill excellent. Explains the“why” as well as the “how” of programming in JavaScript.HomeSiteThe mother of all HTMLediting programs. Allows search-and-replacethroughentire sites,andincludes manyother useful features.Downloada 30-daytrial version at www.allaire.com.
  • 164. Download other Visibooks for free at www.visibooks.com158
  • 165. Download other Visibooks for free at www.visibooks.com159HTML Tag ChartTask Tag ExampleSet up a Web page HTMLHEAD/HEADTITLE/TITLEBODY/BODY/HTMLHTMLHEADSignature, Meta tags, JavaScript,Style sheets go here/HEADTITLEThe page’s title goes here/TITLEBODYWhateveryouwant to appearonthescreengoes here/BODY/HTMLFormat textCreateaparagraph P This is aparagraph.Alignparagraph right; centerparagraphPALIGN=”right”/PPALIGN=”center”/PThis paragraph is centeredinthis cell by using theALIGN attribute.Maketextbold B/B This textis bold.Indenttext UL/UL This textis indentedCreatebulleted listULLI/UL• Listitem• ListitemCreatenumbered list OLLI/OL1. Item#12. Item#2
  • 166. Download other Visibooks for free at www.visibooks.com160Task Tag ExampleCreate a linkLinktoapagewithinsite A HREF=”x.html”/A This sentenceis linked toapageaboutXtopic.Createane-mail link AHREF=“mailto:you@x.com”/Ayou@x.comLinktoanexternal page AHREF=“http://www.x.com”/AThis sentenceis linked towww.x.com.Insert a graphicInsertgraphic IMG SRC=”x.gif”Alignagraphic rightorleft IMG SRC=”x.gif” ALIGN=”right”IMG SRC=”x.gif” ALIGN=”left”Textflows intothesideofthegraphicwhenit’s aligned rightorleft.Add vertical, horizontal spacearound agraphicIMG SRC=”x.gif” VSPACE=”x”IMG SRC=”x.gif” HSPACE=”x”Creates vertical and horizontalspacearound graphic thatnothing canoccupy.Remove/Add border IMG SRC=”x.gif” BORDER=”0”IMG SRC=”x.gif” BORDER=”1”Insert horizontal ruleCreate rule HRRemove 3-D effect, specifysizeHR NOSHADE SIZE=”1”
  • 167. Download other Visibooks for free at www.visibooks.com161Task Tag ExampleChange whole pageChangebackground color BODY BGCOLOR=”#cccccc” Pagewith grey backgroundChangelink, visited linkcolors BODY LINK=”#ff0000”VLINK=”#00ff00”Red linkGreenlinkChangepagemargins BODYTOPMARGIN=”0”LEFTMARGIN=”0”RIGHTMARGIN=”0”MARGINWIDTH=”0”MARGINHEIGHT=”0”Textand graphics onpagegorighttoits edges.Create a tableInserttable TABLETRTD/TDTD/TD/TR/TABLESpecify widths TABLE WIDTH=”100%”TRTDWIDTH=”20%”TDWIDTH=”80%”/TR/TABLE20% 80%Specify border TABLE BORDER=”0”Pad cells TABLE CELLPADDING=”16”Cell contentsareinset16 pixels fromedgeofcellsSpacecells TABLE CELLSPACING=”24” Cells areseparatedby 24 pixels
  • 168. Download other Visibooks for free at www.visibooks.com162Task Tag ExampleChangecell background color TDBGCOLOR=”#000000Insertbackground imageincell TDBACKGROUND=”x.gif”Employ framesCreateaframeset HTMLHEAD/HEADTITLE/TITLEFRAMESET ROWS=50,*FRAME NAME=topframeSRC=x.htmlFRAME NAME=bottomframeSRC=y.html/FRAMESET/HTMLInclude formsEstablish form FORMInserttextbox FORMINPUT TYPE=”text”Specify size INPUT TYPE=”text” SIZE=”20”Specify name INPUT NAME=”x”Insertcheckbox INPUT TYPE=”checkbox”Insertradiobuttons INPUT TYPE=”radio”Makeonly oneclickable INPUT TYPE=”radio”NAME=”radiobut”VALUE=”radio1”INPUT TYPE=”radio”NAME=”radiobut”VALUE=”radio2”
  • 169. Download other Visibooks for free at www.visibooks.com163Task Tag ExampleInsertdrop-downlist SELECT NAME=xOPTION/OPTIONOPTION/OPTIONOPTION/OPTION/SELECTSELECT NAME=xOPTIONFirst Choice/OPTIONOPTIONSecond Choice/OPTIONOPTIONThird Choice/OPTION/SELECTInsertcommentfield TEXTAREA NAME=x COLS=22rows=8/TEXTAREAInsertsubmitbutton INPUT TYPE=”submit”Changetextonbutton INPUT TYPE=”submit”VALUE=”your text here”
  • 170. Download other Visibooks for free at www.visibooks.com164Task Tag ExampleEmploy style sheetsCreatestylesheet Savefilewith .css extension. stylesheetname.cssCreatestyle .stylename{ }Specify fontfamily .stylename{font-family:”arial,sans-serif” }Specify fontsize .stylename{font-size:”32pt” }Specify fontweight .stylename{font-wight:”bold” }Specify fontcolor .stylename{color:”#0000ff” }Specify background color .stylename{background-color:”#cccc99” }Linktoastylesheet LINK REL=”stylesheet”HREF=”stylesheetname.css”Apply astyle Pclass=”stylename”H2class=”stylename”Createrollovereffects A:hover{color:#00ff00;text-decoration: underline}
  • 171. Download other Visibooks for free at www.visibooks.com165IndexBrowserInternet Explorer .................................................................................................11Netscape Communicator....................................................................................11viewing pages .......................................................................................................11Colorshexadecimal..........................................................................................................50link.........................................................................................................................52page.......................................................................................................................50table cells...............................................................................................................65Forms..............................................................................................................................102action...................................................................................................................108validation............................................................................................................154Frames..............................................................................................................................91frameset ................................................................................................................92Graphicsaligning .................................................................................................................38background........................................................................................................132capturing...............................................................................................................34copyright...............................................................................................................35formatting.............................................................................................................41inserting ................................................................................................................36rollover................................................................................................................142spacers.................................................................................................................135using as links ........................................................................................................47Home Pagecreating ...................................................................................................................4file name .................................................................................................................7Horizontal Rule............................................................................................................137JavaScript.......................................................................................................................141form validation..................................................................................................155Open New Window...........................................................................................150programming.....................................................................................................142rollovers..............................................................................................................149Linkse-mail....................................................................................................................31external sites .........................................................................................................33target .....................................................................................................................94to new page...........................................................................................................25Navigationbars........................................................................................................................76clues.......................................................................................................................27system....................................................................................................................44you are here..........................................................................................................46
  • 172. Download other Visibooks for free at www.visibooks.com166SoftwareNotepad...................................................................................................................4Source Code...................................................................................................................143copying................................................................................................................144modifying............................................................................................................146Style Sheets.....................................................................................................................111applying...............................................................................................................114creating................................................................................................................112link effects ...........................................................................................................117Tables................................................................................................................................58border....................................................................................................................62creating..................................................................................................................59formatting.............................................................................................................63tables within..........................................................................................................88width......................................................................................................................63TagA (anchor).......................................................................................................28BODY.................................................................................................................9FONT...............................................................................................................15HEAD.................................................................................................................7HTML................................................................................................................4IMG..................................................................................................................39META.............................................................................................................100P........................................................................................................................19TABLE..............................................................................................................59TITLE.................................................................................................................9Textaligning..................................................................................................................19centering ...............................................................................................................77changing color......................................................................................................18changing fonts......................................................................................................14changing size.........................................................................................................16changing weight ...................................................................................................17creating lists..........................................................................................................23indenting...............................................................................................................21Web fonts..............................................................................................................15Uploading.......................................................................................................................121FTP......................................................................................................................121Web Pageconsistent layout ..................................................................................................85layout.....................................................................................................................58margins................................................................................................................138proper file names .................................................................................................26title...........................................................................................................................8Web Server.....................................................................................................................123
  • 173. Download Visibooks for FreeAll Visibooks can be downloaded at www.visibooks.com.Visibooks believes that you shouldn’t have to rely on strangers’ reviews or skim at abookstore when deciding which computer book to buy. By putting our books online foryou to download and review, we make it easier to find the right book.Visibooks are free. Why buy a bound copy?Visibooks are more useful on paper than as digital files. If you’d like to trade a smallamount of money for a big chunk of time, purchase a bound copy of your Visibook:Print-It-Yourself Buy a Bound CopyPrinting Spend 1-2 hours printing it athome, or 30 minutes at work tryingnot to get caught using the officeprinter. Plus 1-2 hours to go toKinko’s, have it bound, then bringit back. Or 5minutes to pick up andsort pages that fell out after beingbound with a clip.2 minutes to orderBinding Spend $1.50 for 150 sheets ofpaper, plus $2 depletion ofprintercartridge, plus $8 for plastic combbinding.Less than $20 for a spiral-boundcopy, printed on heavyweight paperwith full-color cover.Total Spend 30 minutes to 4 hours.Spend $3.50 to $11.50.2 minutes, less than $25 shipped.Know someone who’d like to download Visibooks for free?Tell someone about Visibooks: www.visibooks.com/refer.html.Want to know when new Visibooks are published?Sign up to be notified via e-mail: www.visibooks.com/notify.html.
  • 174. Other books on Web publishing fromFrontPage2000 for Visual LearnersTeaches people how to build Web sites using FrontPage 2000. Addressesimprovements from previous versions.Dreamweaver 4 for Visual LearnersCovers both basic and advanced features of one of the easiest to use site-building programs.TheVisual Learner’s GuidetoManaging Web ProjectsGoes beyond the nuts-and-bolts of site-building to show people how toplan, organize, build and manage effective Web sites.

×