html-javascript-for-visual-learners-tutorial


html-javascript-for-visual-learners-tutorial

 

HTML and JavaScript for Visual Learners 1810 Monument Avenue, Suite 100 Richmond, VA 23220 www.visibooks.com HTML and JavaScript for Visual Learners Published by Visibooks, LLC, Richmond, VA Copyright Suggestions If you have a suggestion on how to improve this book, send it to improvementsvisibooks.com. If we use it, well send you a complete set of all published Visibooks and post your name in the Acknowledgements of the next edition. Trademarks and Disclaimer Visibooks is a trademark of Visibooks, LLC. All brand and product names in this book are trademarks or registered trademarks of their respective companies. Visibooks makes every effort to ensure that the information in this book is accurate. However, Visibooks makes no warranty, expressed or implied, with respect to the accuracy, quality, reliability, or freedom from error of this document or the products described in it. Visibooks makes no representation or warranty with respect to this books contents, and specifically disclaims any implied warranties or fitness for any particular purpose. Visibooks disclaims all liability for any direct, indirect, consequential, incidental, exemplary, or special damages resulting from the use of the information in this document or from the use of any products described in it. Mention of any product does not constitute an endorsement of that product by Visibooks. Data used in examples are intended to be fictional. Any resemblance to real companies, people, or organizations is entirely coincidental. International Standard Book Number: 0-9707479-2-6 First Edition You have permission to post this book on a Web site, e-mail it, print it, or pass it along for free to anyone you like, as long as you make no changes or edits to its contents or digital format. Make as many copies as you want. However, the right to sell this book, whether in digital or bound form, is strictly reserved to Visibooks, LLC. Download other Visibooks for free at www.visibooks.com Table of Contents Introduction ............................................................................................... 1 HTML Basics.................................................................... 3 Create a home page..............................................................................4 Create the home page......................................................................................................4 View the page in a browser ............................................................................................11 Format pages and text.........................................................................14 Change fonts...................................................................................................................14 Change text size.............................................................................................................16 Change text weight ........................................................................................................17 Change text color ...........................................................................................................18 Align text.........................................................................................................................19 Indent text.......................................................................................................................21 Create lists......................................................................................................................23 Create links tonew pages...................................................................25 Step 1: Create a new page .............................................................................................25 Step 2: Link to the new page........................................................................................28 Create e-mail and external links.......................................................... 31 Create an e-mail link......................................................................................................31 Link to an external site ..................................................................................................33 Insert and align graphics....................................................................34 Capture a graphic from the Web...................................................................................34 Insert a graphic...............................................................................................................36 Align a graphic................................................................................................................38 Format a graphic.............................................................................................................41 Create a basic navigation system........................................................ 44 Link back to the home page ..........................................................................................44 Link pages to each other ...............................................................................................45 Use graphics as links.....................................................................................................46 Use graphics as links.....................................................................................................47 Change page, link colors ....................................................................50 Change background color of page ................................................................................50 Change link colors..........................................................................................................51 Change link colors..........................................................................................................52 Download other Visibooks for free at www.visibooks.com Layout & Navigation...................................................... 57 Lay out pages using tables.................................................................58 Create a table.................................................................................................................58 Create a table.................................................................................................................59 Format a table ................................................................................................................63 Create a table-based home page .................................................................................67 Create new table-based pages......................................................................................73 Create navigation bars........................................................................76 Create a navigation bar for a home page ....................................................................76 Create a navigation bar for a main section page ........................................................79 Add subsections tosite......................................................................82 Insert a table for content and subsection links..........................................................82 Create subsection pages...............................................................................................84 Place tables within tables...................................................................88 Link toan external siteusing frames................................................... 91 Interactivity...................................................................99 Insert META tags.............................................................................. 100 Create forms .................................................................................... 102 Use style sheets................................................................................ 111 Create a style sheet......................................................................................................112 Apply a style sheet.......................................................................................................114 Create link effects with style sheets...........................................................................117 Upload sites toa Web server..............................................................121 Advanced Layout.......................................................... 131 Employ background graphics............................................................ 132 Employ spacer GIFs ...........................................................................135 Insert a horizontal rule......................................................................137 Specify page margins....................................................................... 138 Download other Visibooks for free at www.visibooks.com Practical JavaScript......................................................141 Enable rollover graphics....................................................................142 View source code..........................................................................................................143 Copy source code .........................................................................................................144 Modify source code......................................................................................................146 Open new windows...........................................................................150 Validate form input............................................................................153 Validate form input............................................................................154 See how it works ..........................................................................................................154 Insert the validation script..........................................................................................155 Modify the <FORM> tag.................................................................................................156 Additional Resources ..............................................................................157 HTML Tag Chart .......................................................................................159 Index.......................................................................................................165 Download other Visibooks for free at www.visibooks.com Download other Visibooks for free at www.visibooks.com 1 Introduction Welcome toHTML and JavaScript for Visual Learners. If youve never useda Visibookbefore,youll findthat it contains several hundred illustrations,withcomparativelylittle text. It presents essential tasks, breaks themdown intosteps,then walks you throughthemwith illustrations. What youll learn Youll learn howtouse HTMLtocreate a solid,attractive Website thats easyto navigate. Youll alsolearn howtoupload it toa Webserver. You wont become an expert in Web publishingthat takes practice andreal- worldexperience. But you will learn the fundamentals of site-building,andget a goodfoundation on whichtobuild professional-level skills. Additional resources for acquiring expert- level HTMLandJavaScript skills are foundat the endof this book. How youll learn it This bookhas five sections: HTMLBasics, Layout & Navigation,Interactivity, AdvancedLayout,andPractical JavaScript. At the endof eachtaskandsection are practice exercises. Dont worryif you cant workthroughthe whole bookin a dayor two. Take your time,andtrytodothe practice. You can check your workagainst examples postedon the Web. Follow thesteps ! Seetheresults Download other Visibooks for free at www.visibooks.com 2 Before you begin Before you begin,its important that you knowWindows well. A working knowledge of Windows makes it mucheasier tolearn HTML andJavaScript. You shouldbe familiar with: ? Howdirectories work ? Windows Explorer ? Basic wordprocessing Make sure you can performthe following tasks: ? Create a folder on your computers harddrive ? Create a folder within a folder ? Copya paragraphfromone document andpaste it intoanother. If you have trouble doing this,set aside a couple of hours tolearn Windows basics. Have a friendor co-worker whois proficient with computers walkyou through Windows Explorer,creating folders andbecoming familiar withfile extensions. You shouldalsopractice using the Cut,Copy,andPaste commands in a standardwordprocessing program. When you can dothese things on your own,youre readyto learn HTMLandJavaScript. Download other Visibooks for free at www.visibooks.com 3 HTML Basics In this section, youll learn how to: ? Create a home page ? Format text ? Create links to new pages ? Create e-mail and external links ? Insert graphics ? Create a navigation system ? Change page and link colors Youll build a site that looks like this: Download other Visibooks for free at www.visibooks.com 4 Create a home page Create the home page 1. Open a browser,suchas Internet Explorer or Netscape Navigator. 2. Open the programNotepad. Dothis byfirst clicking the button on the taskbar,then Programs,then Accessories,then Notepad. 3. At the top of the Notepadscreen,type: <HTML> Tip:<HTML> is a tag. Tags are instructions to a Web browser. This particular instruction lets the Web browser know that what follows is a Web page, written in HTML. Tags can be written in upper-case or lower-case lettersit doesnt matter which. <HTML>, <html>, or <HtMl> are all fine. Download other Visibooks for free at www.visibooks.com 5 4. Save the file. 5. When the Save As windowappears,select the C:\ drive in the Save in drop-down list. 6. Create a newfolder byclicking on the icon. Download other Visibooks for free at www.visibooks.com 6 7. Name the newfolder Dogs, then double-clickit soit appears in the Save in box. 8. In the File name textbox,type index.html. 9. In the Save as type drop-down list,select All Files. When youre done,the windowshouldlooklike this: Download other Visibooks for free at www.visibooks.com 7 10.Save the page byclicking on the Save button. 11. Belowthe <HTML> tag,type: <HEAD> <!--Created by Your Name--> </HEAD> Tip: The <HEAD> section contains information that doesnt show up on the page when it is viewed in a browser. Note the closing </HEAD> tag: in HTML, you must give the browser instructions to end something as well as start it. Home page file names All Webpages have a .html extension (or .htm). All home pages have the file name index.html. index.html comes up automaticallywhen the address of a domain or directorywhere its locatedis typedintoa browser. For instance,if you gotowww.visibooks.com,the home page appears automatically. Thats because its file name is index.html. If the file name of the Visibooks home page was homepage.html,youdhave totype www.visibooks.com/homepage.html toget it toappear. The Microsoft exception: Toget your home page tocome up automaticallyon a Webserver running Microsofts Internet Information Server as its operating system,give your home page the file name default.htm. Download other Visibooks for free at www.visibooks.com 8 Tip: <!--Created by Your Name--> is called a comment. Whatever text is between the dashes wont show up on a browsers screenits only visible if someone views the pages HTML code. You need to include the ! for this to work. 12.Belowthe </HEAD> tag,title the page AHome Page About Dogs byusing <TITLE> tags: <TITLE> A Home Page About Dogs </TITLE> Tip: Note that the text AHome Page About Dogs is not a tag. It is text surrounded by tags. The <TITLE> tags tell the browser what to do with the text: make it the title of the page. Download other Visibooks for free at www.visibooks.com 9 13.Belowthe </TITLE> tag,add: <BODY> </BODY> Tip: Anything you want to be visible in a browsers main window, put between the <BODY> and </BODY> tags. Page titles The title of a Webpage describes the page. Its what appears in a browsers Historylist. The title alsoshows upas a linkwhen a page comes upin a searchengine. If all your pages have discrete,descriptive titles,theyll be easier for people tofind. The page title shows upin the top,or title, bar of the browser usedtoviewit. The title of this page is Dogs. Download other Visibooks for free at www.visibooks.com 10 14.Belowthe </BODY> tag,close the </HTML> tag. When youre finished,the code shouldlooklike this: 15.Between the <BODY> and</BODY> tags,type the words: Dogs Home Page 16. Save the page. Download other Visibooks for free at www.visibooks.com 11 View the page in a browser 1. Gotothe browser andon its menu bar,clickFile,then Open. Tip: If youre using Netscape Communicator instead of Internet Explorer, click Open Page,then Choose File. 2. When the Open windowappears,clickthe Browse button. Download other Visibooks for free at www.visibooks.com 12 3. When the newwindowappears,navigate tothe Dogs folder in the Look in drop-down list,then select the home page: index.html. 4. Clickthe Open button,then the OK button. The page should come upin the browser andlooklike this: You have createda home page titled?A Home Page About Dogs.? The home pages file name is index.html. It is locatedin a folder calledDogs on the C:\ drive. Download other Visibooks for free at www.visibooks.com 13 Practice: Create a home page A. What is the correct file name for a home page? B. Why is there a special file name for home pages? C. Why is it important that the home pageand all other pages in a Web sitehave accurate titles? D. What is the difference between a pages title and its file name? Answers A. index.html B. 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 browsers History list. D. A page title appears in the Title bar at the top of the browser. Its plain text, such as The Smith Family: Vacation Pictures, that makes it easy for people to keep track of a page. A pages file name, such as vacpics.html, is how the computer keeps track of it. Download other Visibooks for free at www.visibooks.com 14 Format pages and text Change fonts 1. In front of the words Dogs Home Page, insert a <FONT> tag withthe attribute FACE=?arial?: <FONT FACE=?arial?>Dogs Home Page</FONT> 2. After the words,close the <FONT> tag: <FONT FACE=?arial?>Dogs Home Page</FONT> Tip:Think of an attribute as a sub-instruction to the browser. In this case, the <FONT> tag tells the browser that text will be changed, and the FACE attribute tells it how to change, specifying the Arial typeface. Download other Visibooks for free at www.visibooks.com 15 3. Viewthe page in the browser. Clickthe browsers Refresh button, andthe page shouldlooklike this: Tip: If a page doesnt look like its supposed toor nothing shows up at allcheck the HTML code youve written. You might have left out a quote or made some other small mistake. Something that seems insignificant can wreck a page: <FONT FACE=?arial> Web fonts When text is viewedon a computer,onlyfonts installedon the computer can be seen. For instance,if someone createda page that specifiedthe Tekton font,almost noone viewing it would see it in Tekton because veryfewcomputers have that font installed. Computers without Tekton woulddisplaytext in the default font: Times New Roman. All Windows computers have the Arial font installed. Windows 95 andlater computers have Verdana. Macintoshes have Helvetica,the font that Arial is basedupon. Tocover all bases,specifymultiple fonts: <FONT FACE=?verdana,arial,helvetica?> Missing endquote() Textis inthe Arial font Download other Visibooks for free at www.visibooks.com 16 Change text size 1. In Notepad,addthe SIZE=?+4? attribute tothe <FONT> tag: <FONT FACE=?arial? SIZE=?+4?>Dogs Home Page</FONT> 2. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 17 Change text weight 1. In Notepad,addthe <B> tag in front of the words Dogs Home Page andclose it after them: <FONT FACE=?arial? SIZE=?+4?><B>Dogs Home Page</B></FONT> Tip: Wheninserting multiple tags, arrange them in mirror-image order. The tags and text above are a good example: since it starts with the <FONT> tag, it ends with the </FONT> tag. Tags that arent arranged in mirror-image order can cause display problems in some browsers. 2. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 18 Change text color 1. 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 shouldshowup red. 3. Change the text color toblack,then save the page. <FONT FACE=?arial? SIZE=?+4? COLOR=?black?> Download other Visibooks for free at www.visibooks.com 19 Align text 1. Beneaththe present text andtags,insert a <P> tag tobegin a new paragraph. 2. Beneaththe <P> tag,insert the tag <FONT FACE=?arial? SIZE=?-1?> andthe words ?These are my favorite breeds 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 my favorite breeds of dog: </P> Download other Visibooks for free at www.visibooks.com 20 Tip: Usually a <P> tag requires no closing </P> tag in HTML, but in this case the ALIGN=?right? attribute is used. The closing </P> tag after the paragraph keeps the browser from right-aligning whatever 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 a <P> tag generates, use the <BR> tag. Putting a <BR> or Break tag between two lines of text will bump the second line down to the next line: <FONT FACE=?arial? SIZE=?+4?><B>Dogs Home Page</B></FONT> <BR> <FONT FACE=?arial? SIZE=?-1?>These are my favorite breeds of dog: Download other Visibooks for free at www.visibooks.com 21 Indent text 1. Belowthe text,These are myfavorite breeds of dog:, insert three newparagraphs: <P>Chesapeake Bay Retriever</P> <P>German Shepherd</P> <P>Yorkshire Terrier</P> 2. Enclose these paragraphs in UnorderedList tags toindent them: <UL> <P>Chesapeake Bay Retriever</P> <P>German Shepherd</P> <P>Yorkshire Terrier</P> </UL> Download other Visibooks for free at www.visibooks.com 22 3. 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 the closing </FONT> tag is inserted. Download other Visibooks for free at www.visibooks.com 23 Create lists 1. Withthe three breeds of dog,replace the <P> and</P> tags with <LI> tags togenerate bullets in front of the text that follows: <UL> <LI>Chesapeake Bay Retriever <LI>German Shepherd <LI>Yorkshire Terrier </UL> 2. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 24 Practice: Format pages and text A. Why are the most common font choices Arial, Verdana, and Helvetica? B. What kinds of computers have the font Arial installed? Which have Helvetica instead? 1. Change the title of the home page toMy 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 page shouldlooklike this: Answers A. Those are the fonts that most Windows computers have installed. B. Windows computers have Arial, Macs have Helvetica. Download other Visibooks for free at www.visibooks.com 25 Create links to new pages Step 1: Create a new page 1. In Notepad,change the title of the page toChesapeake Bay Retrievers, then take out all the tags andtext between the <BODY> 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. Download other Visibooks for free at www.visibooks.com 26 4. Beneaththe <BODY> tag,type Chesapeake BayRetrievers. This is the page heading. Make it verdana,bold,size +3: <BODY> <FONT FACE=?verdana? SIZE=?+3?><B>Chesapeake Bay Retrievers</B></FONT> </BODY> File names for the Web Most Webservers are Unix- or Linux-based,whichdont deal cleanlywithspaces in file names. For instance if you name a file fido page.html,it mayshowupin the URLbox of the browser as fido%20page.html. Also,Webservers are case-sensitive,sokeeping file names lower-case eliminates a potential source of mistakes. Make all file names in a Websitepages,graphics and folderslower-case,withnospaces. Correct file name: german.html Incorrect: German Shepherds.html Download other Visibooks for free at www.visibooks.com 27 5. Save the page. Providing navigation clues with text size The heading of the Chesapeake BayRetriever page is made one size smaller than the heading of the home page. Thats because the 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 home pages heading helps showpeople where theyare in the site. Dogs ChesapeakeBay Retrievers Download other Visibooks for free at www.visibooks.com 28 Step 2: Link to the new page 1. Open the home page (index.html) in Notepad. In front of the first item,Chesapeake Bay Retriever,insert an anchor tag. Then close the anchor tag : <LI><B><A HREF=?chesapeake.html?>Chesapeake Bay Retriever</A></B> How an anchor tag works Anchor tags create a clickable linktoanother page. A pagewith this filename is linkedtothesewords. <a href=?filename.html?>New Page</a> Download other Visibooks for free at www.visibooks.com 29 2. Save the home page andviewit in the browser. The words Chesapeake Bay Retriever shouldbe a link,andthe page shouldlooklike this: 3. Click on the Chesapeake Bay Retriever link. The Chesapeake BayRetriever page shouldappear in the browser. Download other Visibooks for free at www.visibooks.com 30 Practice: Create links to new pages A. Why should file names be lower-case and free of spaces? B. Why should the headings on section pages (Chesapeake Bay Retrievers, German Shepherds) be smaller than the heading of the home page? 1. Create newpages for German Shepherds andYorkshire Terriers. Page Title File Name German Shepherds German Shepherds german.html Yorkshire Terriers Yorkshire Terriers yorkshire.html 2. On the home page,linkthe words German Shepherd and Yorkshire Terrier totheir pages. 3. On the home page,remove the words Home Page after Dogs. 4. On the Chesapeake BayRetriever,German ShepherdandYorkshire Terrier pages,put the page headings in the same font andweight as the home page (Verdana; bold). 5. Make the page headings of these pages one size smaller than the heading on the home page,just like on the Chesapeake Bay Retriever page. 6. Save all pages andclickon the home pages links tomake sure they work. Answers A. 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. Download other Visibooks for free at www.visibooks.com 31 Create e-mail and external links Create an e-mail link 1. In a newparagraphbeneaththe list,type the sentence For more information, contact infovisibooks.com. 2. Surroundthe e-mail address withanchor tags,but insteadof linking it toa Webpage,use the mailto commandtolinkit toan e-mail program: For more information, contact <A HREF=?mailto:infovisibooks.com?> infovisibooks.com</A> Download other Visibooks for free at www.visibooks.com 32 3. Save the page. When you viewit in the browser,it shouldlooklike this: How e-mail links work When someone goes toa Website andclicks on an e-mail link, its supposedtoopen the e-mail programon that persons computer andinsert the address intoa newmessage. If the persons e-mail programisnt configuredcorrectly,this wont work. Thats whye-mail links shoulduse the e-mail address as a link: sopeople can enter the address manuallyif theyhave to. Download other Visibooks for free at www.visibooks.com 33 Link to an external site 1. In Notepad,adda newsentence after the last one. Type the sentence,Please also visit www.dogs.com. 2. Surroundthe Webaddress www.dogs.com withthese anchor tags tolinkit tothe external Website: <A HREF=?http://www.dogs.com?>www.dogs.com</A> Tip: For an external link to work, you must type http:// as part of the Web address. 3. Save the page. 4. Previewthe page in the browser,then clickon the linktosee if it links tothe external site www.dogs.com. 5. Close the browser. Download other Visibooks for free at www.visibooks.com 34 Insert and align graphics Capture a graphic from the Web 1. Open a newbrowser window. 2. Gotothe Website www.visibooks.com/dogpics. 3. Place your cursor on top of the picture of the Chesapeake Bay Retriever,then clickwithyour right mouse button. Rightmouse button Download other Visibooks for free at www.visibooks.com 35 4. ClickSave Picture As. 5. When the Save Picture windowappears,select the ?Dogs? folder in the Save in drop-down list. 6. Create a newfolder within Dogs calledgraphics. 7. Double-clickon the graphics folder soit appears in the Save in drop-down list. 8. Clickthe Save button tosave the graphic inside the graphics folder. Tip: Creating this separate sub-folder to hold your sites graphics makes the site easier to organize and update. Download other Visibooks for free at www.visibooks.com 36 Insert a graphic 1. In Notepad,open the Chesapeake BayRetriever page,file name chesapeake.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 theres a path. For the image source, the tag first points to the graphics folder, then to the file name of the image within it. folder graphic Download other Visibooks for free at www.visibooks.com 37 4. Save the page,then viewit in the browser. It shouldnowlooklike this: Download other Visibooks for free at www.visibooks.com 38 Align a graphic 1. In a newparagraphbelowthe graphic,type in: Chesapeake Bay Retrievers love water. If you throw tennis balls in the water, these dogs will chase them and bring them back until your arm falls off. Download other Visibooks for free at www.visibooks.com 39 2. Save the page andviewit in the browser. The page shouldlooklike this: 3. GobacktoNotepadandaddthe ALIGN=?left? attribute tothe <IMG> tag: <IMG SRC=?graphics/chessie.gif? ALIGN=?left?> Download other Visibooks for free at www.visibooks.com 40 4. Save the page andviewit in the browser (just clickthe Refresh or Reload button). It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 41 Format a graphic 1. In the Chesapeake BayRetriever page,addthis ALT attribute tothe <IMG> 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 a graphic represents. Alt text alsoallows searchengines toindex visual content. Download other Visibooks for free at www.visibooks.com 42 4. Save the page andviewit in the browser. It shouldnowlooklike this: 5. Move your cursor ontothe graphic. The Alt textan alternative text description of the graphicshouldpopup. The text shouldbe alignedwiththe topof the graphic. Tip: If you know the dimensions of a graphic, you can make it load faster 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 a horizontal spaceof 12 pixels aroundthegraphic thatnothing canoccupy A Borderof 1 creates a1-pixel borderaroundthegraphic Download other Visibooks for free at www.visibooks.com 43 Practice: Insert graphics A. Why should you specify Alt text for each graphic you insert? 1. Gotowww.visibooks.com/dogpics. Save the German Shepherds graphic in C:\dogs\graphics withthe file name shepherds.gif. 2. Save the Yorkshire Terrier graphic in C:\dogs\graphics withthe file name yorkie.gif. 3. Insert shepherds.gif intothe German Shepherds page in a new paragraphbelowthe heading. 4. Insert yorkie.gif intothe Yorkshire Terriers page in a new paragraphbelowthe heading. 5. On the German Shepherds page,type German Shepherds are smart dogs in a paragraphbelowthe graphic. 6. On the Yorkshire Terriers page,type Yorkshire Terriers are cute in a paragraphbelowthe graphic. 7. On bothpages,align the text tothe side of the graphic,as on the Chesapeake BayRetrievers page. 8. On bothpages,give the graphic a border of 1,vspace of 4,and hspace of 12. 9. On all three Dog pages,put all paragraphtext (not the main headings) in the arial font,witha size of -1. Answers A. Alt text makes it easier for vision-impaired people to understand a pages content, and makes it easier for search engines to catalog it. Download other Visibooks for free at www.visibooks.com 44 Create a basic navigation system Link back to the home page 1. In Notepad,open the Chesapeake BayRetrievers page, chesapeake.html. 2. Type the wordHome in a newparagraphbeneaththe first paragraph. 3. Enclose it in anchor tags that linkit backtothe home page: <A HREF=?index.html?>Home</A> Tip: Remember, index.html is the file name for the home page. 4. Save the page,andviewit in the browser. The wordHome should nowbe a link,andthe page shouldlooklike this: 5. On the German Shepherds page,create a linkbacktothe home page. Dothis the same wayyou createdthe linkfor the Chesapeake Bayretriever page. 6. On the Yorkshire Terriers page,create the same sort of linkbackto the home page. Download other Visibooks for free at www.visibooks.com 45 Link pages to each other 1. In Notepad,open the Chesapeake BayRetrievers page. 2. Following the Home link,type: | Chesapeake Bay Retrievers | German Shepherds | Yorkshire Terriers 3. Make the words Chesapeake Bay Retrievers boldto showsite users You are here. 4. Linkthe words German Shepherds tothe German Shepherds page: <A HREF=?german.html?>German Shepherds</A> 5. Linkthe words Yorkshire Terriers tothe Yorkshire Terriers page. Download other Visibooks for free at www.visibooks.com 46 6. Save the page andviewit in the browser. It shouldlooklike this: Showing you are here Asites navigational systemshouldshowpeople twothings: where theyare,andwhere theycan go. Toshowpeople where theyare,make the linkcorresponding tothe current page intoplain text. This lets users knowthat if theycant gotothat page,theymust be looking at it. Home | Chesapeake Bay Retrievers | German Shepherds | Yorkshire Terriers Youarehere Making the text boldreinforces the you are here message. Download other Visibooks for free at www.visibooks.com 47 Use graphics as links 1. In Notepad,open the home page. Belowthe bulletedlist of links,in a newparagraph,insert the Chesapeake BayRetriever,German ShepherdandYorkshire 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 tothe Chesapeake BayRetriever page: <A HREF=?chesapeake.html?><IMG SRC=?graphics/chessie.gif?></A> 3. Save the page,then previewit in the browser. When you clickon the Chesapeake BayRetriever graphic,it shouldtake you tothe Chesapeake BayRetriever page. 4. GobacktoNotepadandaddthe BORDER=?0? attribute tothe first image tag: <A HREF=?chesapeake.html?><IMG SRC=?graphics/chessie.gif? BORDER=?0?></A> Download other Visibooks for free at www.visibooks.com 48 5. Save the page andviewit in the browser again. The blue link border aroundthe Chesapeake BayRetriever graphic shouldbe gone: Download other Visibooks for free at www.visibooks.com 49 Practice: Create a navigation system A. Whats a good way to show site users You are here? Task: Tomake your Dogs site looklike the site at www.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 Terriers 3. Make the words German Shepherds bold. 4. Linkthe words Chesapeake Bay Retrievers and Yorkshire Terriers totheir corresponding pages. 5. Save the page. 6. Using the same system,create navigation links for the Yorkshire Terriers page. Then save the page. 7. On the home page,linkthe German Shepherds graphic tothe German Shepherds page. Dothe same for the Yorkshire Terriers graphic. 8. Take out the linkborders of these graphics. 9. When finished,previewyour Dogs site in the browser. It should looklike the site at www.visibooks.com/dogs. Answers A. Make the link corresponding to the current page bold, and plain text (no longer a link). Download other Visibooks for free at www.visibooks.com 50 Change page, link colors Change background color of page 1. 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 of the page shouldnowbe pale yellow. Hexadecimal colors The ffffcc that stands for pale yellowis a hexadecimal color. Hexadecimal colors allowyou tospecifycolors more preciselythan you can withwords. For example,you coulduse the attribute BGCOLOR=yellow in the bodytag andthe page backgroundwouldturn bright yellow,but if you used BGCOLOR=pale yellow,that wouldnt work. For shades of color,hexadecimals must be used. Theywork like this: Computers showcolor as a mix of red,green andblue. In hexadecimal colors,the first pair of letters or numbers signify red,the secondpair signifygreen,andthe thirdpair signify blue: Red Green Blue ff ff cc Download other Visibooks for free at www.visibooks.com 51 Hexadecimal colors, continued The color values gofromthe maximumamount of color (ff) tonocolor at all (00): Max Mid-range None ff cc 99 66 33 00 Navyblue wouldbe shown in hexadecimals as nored(00),no green,(00),anda little bit of blue (66): 000066 Alist of hexadecimal color codes is postedat: www.webmonkey.com/reference/color_codes Download other Visibooks for free at www.visibooks.com 52 Change link colors 1. In the home page,addthe attribute LINK=?#ff0000? tothe <BODY> 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 in the browser. Download other Visibooks for free at www.visibooks.com 53 3. Save the page andviewit in the browser. The links on the page shouldeither be redor green. Consistent link colors Linkcolors shouldbe consistent throughout a Website. If the links on one page are red,theyshouldbe redon everypage. Learning that redequals link once is mucheasier for people than having tofigure out the linkcolor for eachpage or section of a site. Download other Visibooks for free at www.visibooks.com 54 Practice: HTML Basics Task: Tocreate a Website about cats that looks like the site at www.visibooks.com/cats. 1. Create a newhome page andtitle it The Wonderful World of Cats. 2. Save it in a newfolder on the C:\ drive calledCats: C:\Cats 3. Make the heading of the page readThe Wonderful World of Cats. 4. Belowthe main heading on the home page,insert a bulletedlist: House Cats Alley Cats Big Cats 5. Make these items arial,witha size of -1. Download other Visibooks for free at www.visibooks.com 55 6. Linkeachlist itemtoa newpage about it. For instance,link House Cats toa newpage about house cats withfile name housecats.html. 7. On each of these new pages, put a descriptive heading at the top of the page. For instance, the words ?House Cats? at the top of the house cats page. 8. Put the main headings of all four pages in the Arial font. Make thembold. Give the home pages heading a size of +3. Give the headings of the other pages a size of +2. 9. On eachpage,write a descriptive sentence or twoin a new paragraphbelowthe main heading. Make it arial,witha size of -1. 10.Gotowww.visibooks.com/catpics andget the three cat graphics there. Put themin a folder calledgraphics within the C:\Cats folder. Download other Visibooks for free at www.visibooks.com 56 11.Insert the appropriate graphic on eachof the 3 pages between the main 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,andto eachother. 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 visitedlink color orange. 16.Previewthe site in the browser. It shouldlooklike the site at www.visibooks.com/cats. Download other Visibooks for free at www.visibooks.com 57 Layout & Navigation In this section, youll 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 frames Youll build a site that looks like this: Download other Visibooks for free at www.visibooks.com 58 Lay out pages using tables Tables and Web page layout Almost all professional-qualityWebsites are laidout using tables. Just like a spreadsheet has cells that contain numbers,a table on a Webpage has cells that contain links,graphics,and text. The lines on this page clearlyshowits layout withtable cells: cell cell cell Download other Visibooks for free at www.visibooks.com 59 Create a table 1. Create a newfolder on the C:\ drive calledTravel. 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.htmland all necessary tags: <HTML> <HEAD> <!--Created by Your Name--> </HEAD> <TITLE> Traveling Down South </TITLE> <BODY> </BODY> </HTML> 3. Youre going tocreate a simple one-row,two-cell table that looks like this: links content 4. The first step is tobegin the table. Belowthe <BODY> tag,begin your table withthe <TABLE> tag: <BODY> <TABLE> 5. Belowthe <TABLE> tag,start a rowwiththe <TR> (Table Row) tag: <BODY> <TABLE> <TR> Download other Visibooks for free at www.visibooks.com 60 6. In the table row,start the first cell withthe <TD> (Table Data) tag: <BODY> <TABLE> <TR> <TD> 7. After the <TD> tag,type the wordlinks, then close the cell withthe </TD> tag: <BODY> <TABLE> <TR> <TD>Links</TD> Youve createdthe first cell in the row: links content 8. Nowcreate the secondcell in the rowbyadding a <TD> tag,the wordContent,andclosing the cell witha </TD> tag: <BODY> <TABLE> <TR> <TD>Links</TD> <TD>Content</TD> links content Download other Visibooks for free at www.visibooks.com 61 9. Finishthe table byclosing the rowwitha </TR> tag,then closing the table withthe </TABLE> tag: <BODY> <TABLE> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE> Download other Visibooks for free at www.visibooks.com 62 10.You have set upthe basic table. Tomake it possible tosee the table outlines in a browser,addthe attribute BORDER=?1? tothe <TABLE> tag: <BODY> <TABLE BORDER=1> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE> 11.Save the page,then viewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 63 Format a table 1. Nowyoull extendthe table. In Notepad,addthe WIDTH=?100%? attribute tothe <TABLE> tag: <BODY> <TABLE BORDER=1 WIDTH=?100%?> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE> 2. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 64 Percentage vs. fixed-width tables When laying out a page using a table,set the tables widthat 100%. That way,the contents of the page can stretchtofill the whole monitor,regardless of the monitors resolution. If you want it tofit a fixed-widthtable on all monitors,youre limitedtoa table 580 pixels wide: 640 pixels width of low- resolution monitor - 20 pixels browseroffset: the distancethatpage contentis indented fromthesides ofthe browser - 40 pixels 20 forthe vertical scroll bar, plus 20 extra = 580 pixels width available fortable Creating pages withfixed-widthtables offers precise control, but wastes space on higher-resolution monitors:  Page:laid out using a table 580 pixels wide  Monitorusedtoview page:1280 pixels wide Download other Visibooks for free at www.visibooks.com 65 3. Remove the table border byspecifying BORDER=?0?: <BODY> <TABLE BORDER=?0? WIDTH=?100%?> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE> 4. Make the first cell light greybyadding the attribute BGOLOR=?#CCCCCC? tothe first <TD> tag: <BODY> <TABLE BORDER=?0? WIDTH=?100%?> <TR> <TD BGCOLOR=?#CCCCCC?>Links</TD> <TD>Content</TD> </TR> </TABLE> 5. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 66 6. Youll notice that the wordLinks is right up against the edge of the left-handcell. Toadda 16-pixel margin between the edge of the cells andtheir contents,addthe attribute CELLPADDING=?16? tothe <TABLE> tag: <BODY> <TABLE BORDER=?0? WIDTH=?100%? CELLPADDING=?16?> <TR> <TD BGCOLOR=?#CCCCCC?>Links</TD> <TD>Content</TD> </TR> </TABLE> 7. Toeliminate the spacing between cells,addthe attribute CELLSPACING=?0? tothe <TABLE> tag: <BODY> <TABLE BORDER=?0? WIDTH=?100%? CELLPADDING=?16? CELLSPACING=?0?> <TR> <TD BGCOLOR=?#CCCCCC?>Links</TD> <TD>Content</TD> </TR> </TABLE> 8. Save the page andviewit in the browser. It shouldlooklike this: Cell Padding creates acushion of pixels betweentheedgeof thecell andwhats insideit. Cell Spacing is the spacebetweencells. Inthis case, 0 pixels Download other Visibooks for free at www.visibooks.com 67 Create a table-based home page 1. Create a folder calledgraphics inside the Travel folder on your harddrive. 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 wordContent withthe heading Traveling South. Give the heading a size of +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 you've got a couple of weeks for vacation, you might want to visit the South. Richmond, Williamsburg, and Charleston are all beautiful cities. Make the text arial,size -1. Download other Visibooks for free at www.visibooks.com 68 6. In the left-handcell,replace the wordLinks withthe names of this sites main sections: Richmond,Williamsburg andCharleston. Separate themwith<P> tags andput themin the arial font,at size -1. The code for the page can looklike this: Download other Visibooks for free at www.visibooks.com 69 7. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 70 8. Tobring the left-handcells content tothe top of the cell,addthe attribute VALIGN=?top? tothe first <TD> tag. (Tocover all bases,addthe attribute tothe second<TD> tag as well): <TABLE BORDER=?0? WIDTH=?100%? CELLPADDING=?16? CELLSPACING=?0?> <TR> <TD BGCOLOR=?#CCCCCC? VALIGN=?top?> <FONT FACE="arial" SIZE=?-1?> Richmond <P> Williamsburg <P> Charleston </FONT> </TD> <TD VALIGN=?top?> <FONT FACE="verdana" SIZE=?+3?><B>Traveling South</B></FONT> <P> <IMG SRC="graphics/uva.gif"> <P> <FONT FACE="arial" SIZE=?-1?>If you've got a couple of weeks for vacation, you might want to visit the South. Richmond, Williamsburg, and Charleston are all beautiful cities.</FONT> </TD> </TR> </TABLE> Download other Visibooks for free at www.visibooks.com 71 9. Tocontrol the widths of the table cells,addthe attribute WIDTH=?20%? tothe first <TD> tag,andthe attribute WIDTH=?80%? tothe second: <TABLE BORDER=?0? WIDTH=?100%? CELLPADDING=?16? CELLSPACING=?0?> <TR> <TD BGCOLOR=?#CCCCCC? VALIGN=?top?> <FONT FACE="arial" SIZE=?-1? WIDTH=?20%?> Richmond <P> Williamsburg <P> Charleston </FONT> </TD> <TD VALIGN=?top? WIDTH=?80%?> <FONT FACE="verdana" SIZE=?+3?><B>Traveling South</B></FONT> <P> <IMG SRC="graphics/uva.gif"> <P> <FONT FACE="arial" SIZE=?-1?>If you've got a couple of weeks for vacation, you might want to visit the South. Richmond, Williamsburg, and Charleston are all beautiful cities.</FONT> </TD> </TR> </TABLE> Download other Visibooks for free at www.visibooks.com 72 10.Save the page andviewit in the browser. It shouldnowlooklike this: Download other Visibooks for free at www.visibooks.com 73 Create new table-based pages 1. 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. Download other Visibooks for free at www.visibooks.com 74 5. 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) and place 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 wordHome belowthe words in the left-handcell. When youre done,the page shouldlooklike this: Download other Visibooks for free at www.visibooks.com 75 Practice: Lay out pages using tables A. 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 at www.visibooks.com/travel. 1. Create pages for Williamsburg andCharleston just like the Richmond page. Get the graphic andtext for the Williamsburg page at www.visibooks.com/travelpic/willpic. Get the Charleston graphic andtext at www.visibooks.com/travelpic/charlpic. 2. Using the words Richmond,Williamsburg,Charleston,and Home in the left-handcell of eachpage,linkall the pages in this Website toeachother. TIP: Dont 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 and hspace of 12 pixels. Give eachgraphic appropriate Alt text. 5. When youre done,previewthe site in the browser. It shouldlook andworklike www.visibooks.com/travel. Answers A. Fixed-width tables waste space and make pages look a bit sparse when viewed on higher-resolution monitors. Download other Visibooks for free at www.visibooks.com 76 Create navigation bars Create a navigation bar for a home page 1. Create a folder calledTravel West on your harddrive at C:\Travel West. 2. Create a home page titledTraveling West for Vacation. Save it in the Travel West folder. 3. Between the <BODY> and</BODY> tags,create a table withone rowand3 cells in the row: <TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> 4. Give the <TABLE> tag these attributes: WIDTH=?100%? Border=?0? CELLPADDING=?4? CELLSPACING=?0? 5. In the tables first cell,enter the word?California.? In the secondcell,?The Rockies,? andin the thirdcell,?The Midwest.? 6. Make eachcell 33% wide (except for the middle one,whichhas to be 34%: their summust equal the table widthof 100%). Download other Visibooks for free at www.visibooks.com 77 7. Center the words in eachcell with<CENTER> tags: <TD WIDTH=?33%?> <CENTER> California </CENTER> </TD> <TD WIDTH=?34%?> <CENTER> The Rockies </CENTER> </TD> <TD WIDTH=?33%?> <CENTER> The Midwest </CENTER> </TD> 8. Change the text in eachcell toarial,size -1,andchange the backgroundcolor of all cells tolight grey(#cccccc). 9. When youre done,previewthe page in the browser. The table shouldlooklike 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 the sights of California, the natural wonders of the Rockies, and the cities of the Midwest. Download other Visibooks for free at www.visibooks.com 78 12.Make the newparagraphverdana,size -1 andsave the page. 13.Viewthe page in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 79 Create a navigation bar for a main section page 1. 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 with4 cells insteadof 3. Tip: Dont 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 the California cell bright yellow(BGCOLOR=?#ffff00?) toshow You are here. 4. When youre done,save the page andviewit in the browser. The table shouldlooklike this: 5. Linkthe wordHome tothe home page (<A HREF=?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. Download other Visibooks for free at www.visibooks.com 80 Practice: Create navigation bars Task: Tomake your Travel West site looklike the site at www.visibooks.com/travelwest. 1. Create a newblankpage andsave it withthe file name midwest.html. It will be The Midwest page,but leave it blankfor right now. 2. Create a newpage withfile name rockies.html. This is The Rockies page. Title it ?Nature in the Rocky Mountains.? Make its navigation bar table exactlylike that of the California page. 3. Change the You are here yellowbackgroundcolor fromthe California cell toThe Rockies cell. 4. LinkCalifornia,The Midwest andHome totheir respective pages. 5. When youre done,previewthe page in the browser. It shouldlook like this: Download other Visibooks for free at www.visibooks.com 81 6. Repeat this process withthe California andMidwest pages so theyve got functioning navigation bars that showyou are here. 7. Gotothe home page andin the navigation bar,linkThe Rockies andThe Midwest totheir respective pages. 8. Make all text that corresponds tothe current page bold. (Example: make The Rockies boldon The Rockies page.) 9. When youre done,previewthe site in the browser. It shouldlook like the site at www.visibooks.com/travelwest. Download other Visibooks for free at www.visibooks.com 82 Add subsections to site Insert a table for content and subsection links 1. In Notepad,open the California page in the Traveling West Web site. 2. Belowthe navigation bar table,addanother table that has one row andtwocells 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 California section: The Golden Gate Bridge <P> Highway 101 <P> Big Sur Download other Visibooks for free at www.visibooks.com 83 5. In the right-handcell,put the heading Places to visit in California. Belowthe heading,in a newparagraph,type the sentence : When in California, be sure to see the Golden 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. Make the paragraphbeneaththe heading verdana,size -1. 9. When youre done,save the page andpreviewit in the browser. The page shouldlooklike this: Download other Visibooks for free at www.visibooks.com 84 Create subsection pages 1. Create newblankpages for subsections The Golden Gate Bridge, Highway101 andBig Sur: Page Title File Name The Golden Gate Bridge Seeing the Golden Gate Bridge goldengate.html Highway 101 Driving Highway 101 highway101.html Big Sur Staying in Big Sur bigsur.html 2. Copythe tables fromthe California page andpaste themintothe Golden 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 isn't golden--it's actually orange. 5. Make it verdana,size -1. Download other Visibooks for free at www.visibooks.com 85 6. Linkthe words California,Highway 101,andBig Sur totheir respective pages. Leave The Golden Gate Bridge as plain text to showyou are here. 7. When youre done,save the page andviewit in the browser. It shouldlooklike this: Consistent page layout Copying tables fromone page andpasting themintonew pages ensures that all pages share the same layout. This consistencymakes site navigation easier: nomatter which page in the site is being viewed,a person knows where the pages links andcontent will be. Download other Visibooks for free at www.visibooks.com 86 Practice: Add subsections to site A. Whats the best way to keep tables consistent from page to page? Task: Tomake your Travel West Website lookandworklike the one at www.visibooks.com/travelwest2. 1. Open the California page in Notepad. LinkThe Golden Gate Bridge,Highway101 andBig Sur totheir respective pages. 2. Open the Golden Gate Bridge page. Copybothtables fromthe page. 3. Paste these tables intothe Highway101 page. 4. On the Highway101 page,linkthe words The Golden Gate Bridge tothe Golden Gate Bridge page. Get ridof the anchor tags aroundHighway 101 soit shows as plain text. 5. Change the Highway101 pages heading anddescriptive text beneathit soit looks like this: Download other Visibooks for free at www.visibooks.com 87 6. Format the Big Sur page soits layout andnavigation are consistent withthe Golden Gate Bridge andHighway101 pages. Heading: Staying in Big Sur Paragraph: There are many excellent hotels right on the ocean in Big Sur. 7. Save all pages. 8. When youre done creating all the pages in the California section of this site,previewit in a browser. It shouldlookandworklike www.visibooks.com/travelwest2. Answers A. Copying and pasting tables from one page to another. Download other Visibooks for free at www.visibooks.com 88 Place tables within tables 1. In Notepad,open the Golden Gate Bridge page (goldengate.html). 2. In front of the paragraphbelowthe main heading,begin a new table with: 2 rows 1 cell in eachrow WIDTH=?200? CELLPADDING=?8? Tip: To create a table with more than one row, just begin a new row after ending the one above it: <TR> <TD> </TD> </TR> <TR> <TD> </TD> </TR> Note: the widthis a number200whichrenders the widthin pixels 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 the words andmake thembold. Download other Visibooks for free at www.visibooks.com 89 5. In the bottomcell,type the sentence: The Golden Gate bridge is covered with enough paint to coat four battleships. 6. Make the text arial,size -1. 7. Save the page andviewit in the browser. When youre done,it shouldlooklike this: 8. Make the text in the topcell white. Dothis byadding the COLOR=?#ffffff? attribute tothe <FONT> tag: <FONT FACE="arial" SIZE=?-1? COLOR=?#ffffff?> <B>A Whole Lot of Paint</B> </FONT> Download other Visibooks for free at www.visibooks.com 90 9. 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 shouldlook like this: Download other Visibooks for free at www.visibooks.com 91 Link to an external site using frames How touse frames Frames are a waytoput more than one Webpage at a time on a computers screen: 2=CA 2=CA  2=CA!    Alive example of frames can be seen at www.visibooks.com/frames. Manysites that usedframes have noweliminatedthem, returning tosingle-page layouts. Thats because frames have serious drawbacks: ? Frames are difficult toupdate. Everyscreen involves three 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 annoyinglyin more than one place. However,frames are useful for one thing: theyallowa user to get backtoa site withone clickwhile clicking throughother sites linkedtoit. An example of this can be seen in the external links at www.charuhas.com/sites.html. The following exercise demonstrates howtouse frames to provide convenient links toexternal sites. Download other Visibooks for free at www.visibooks.com 92 1. On the Golden Gate Bridge page,in a newparagraphbelowthe first one,type: Visit the Web site for the Golden Gate bridge at www.goldengate.org. www.goldengate.org will be linkedtothe frameset page. 2. Create a newblankpage withfile name framesetgg.html. This will be the frameset page that holds twoother pages. 3. Insert this HTMLcode intothe newblankpage: <HTML> <HEAD></HEAD> <TITLE>Golden Gate Frameset</TITLE> <FRAMESET ROWS="50,*"> <FRAME NAME="topframe" SRC="backtogg.html"> <FRAME NAME="bottomframe" SRC="http://www.goldengate.org"> </FRAMESET> </HTML> Download other Visibooks for free at www.visibooks.com 93 Tip: The ROWS=?50,*? attribute in the <FRAMESET> tag tells the frameset to make the top frame 50 pixels high, and to allow the bottom frame to fill in the rest of the available space beneath it. The top frame will contain the link back to the Golden Gate Bridge page. The bottom frame will contain an external site: www.goldengate.org. Link back to the Golden Gate Bridge page  The goldengate.org site will display here  4. Save framesetgg.html. 5. Create a newpage withfile name backtogg.html. This is the page that 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 tolink backtothe Golden Gate Bridge page: <A HREF=?goldengate.html? TARGET=?_top?>Back to the Golden Gate Bridge page</A> Download other Visibooks for free at www.visibooks.com 94 Tip:The TARGET=?_top? attribute enables linking to a page outside of the current frame Clickhere Gotonew pageoutsideframe Back to the Golden Gate Bridge Page Golden Gate Bridge Page which avoids clicking on the link and having the page come up in the same frame: Clickhere Pagecomes up insameframe Back to the Golden Gate Bridge Page Golden Gate Bridge page 8. Make the linkarial,size -1,andbold. 9. Save the page. Download other Visibooks for free at www.visibooks.com 95 10.Open framesetgg.html in the browser. It shouldlooklike this: 11.Clickon the Back to the Golden Gate Bridge page link. It shouldtake you backtothe Golden Gate Bridge page. Download other Visibooks for free at www.visibooks.com 96 Tip: To make the frameset look more crisp and clean, try using the following attributes in framesetgg.html: <HTML> <HEAD> </HEAD> <TITLE>Golden Gate Frameset</TITLE> <FRAMESET ROWS="28,*" FRAMEBORDER=?0?> <FRAME NAME="topframe" SRC="backtogg.html" MARGINWIDTH=?12? MARGINHEIGHT=?4? SCROLLING=?NO? NORESIZE> <FRAME NAME="bottomframe" SRC="http://www.goldengate.org? MARGINWIDTH="12" MARGINHEIGHT="12" SCROLLING=?AUTO? NORESIZE> </FRAMESET> </HTML> Download other Visibooks for free at www.visibooks.com 97 Practice: Layout & Navigation A. Why is it important that navigational links stay in the same place and order on pages throughout a Web site? B. What is the minimum number of files that must be used to make a frameset work? Task: Make your Travel West Website lookandfunction like the one at www.visibooks.com/travelwest3. 1. Layout the Rockies page using tables soit looks like the California page. Heading for the Rockies page: Nature in the Rocky Mountains 2. Create pages for three subsections of The Rockies main section: Streams Snow Rock Formations 3. Make sure that these pages are linkedandlaidout just like the Golden Gate Bridge,Highway101 andBig Sur pages. Page File name Heading Streams streams.html Mountain Streams Snow snow.html Snow in the Rockies Rock Formations rocks.html Rock Formations Download other Visibooks for free at www.visibooks.com 98 4. Repeat this process withthe Midwest section of the site. The subsections of the Midwest section are: St. Louis Chicago DeMoines Page File name Heading Midwest midwest.html Cities of the Midwest St. Louis stlouis.html St. Louis Chicago chicago.html Chicago DeMoines demoines.html DeMoines 5. On the Chicagopage,insert a one-row,one-cell,fixed-widthtable 200 pixels wide,withcell padding of 4. Color it pale yellow (BGCOLOR=?#ffffcc?). 6. In this table,put the sentence,?In the past, Chicago was home to Al Capone, Mayor Daley, and the nation?s biggest stockyards.? 7. On the St. Louis page,linktothe external Website www.stlouis.comusing frames. Paragraph for St. Louis page: Find out what?s going on in St. Louis at www.stlouis.com. 8. When youre done,open the Travel West site in the browser. It shouldlookandfunction like the one at www.visibooks.com/travelwest3. Download other Visibooks for free at www.visibooks.com 99 Interactivity In this section, youll learn how to: ? Insert META tags ? Create forms ? Format text with style sheets ? Employ templates ? Upload sites to a Web server Youll build a site that looks like this: Download other Visibooks for free at www.visibooks.com 100 Insert META tags 1. 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 sites contents: <HEAD> <!--Created by Your Name--> <META NAME=?description? CONTENT=?This is the Travel West Web site. It contains information about vacationing in California, the Rockies and the Midwest.?> </HEAD> META tags METAtags are HTMLtags that can include a description of the page,as well as keywords that provide clues toits content. METAtags make a page easier tofindandindex bysearch engines. METAtags dont showupon a Webpage. Rather,theyreside unseen in its HTMLcode. Download other Visibooks for free at www.visibooks.com 101 3. Beneaththe description meta tag,insert a new<META> tag for its searchkeywords: <HEAD> <!--Created by Your Name--> <META NAME=?description? CONTENT=?This is the Travel West Web site. It contains information 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> Download other Visibooks for free at www.visibooks.com 102 Create forms 1. Create a newpage withfile name infoform.html. 2. Title the page Request for Information andsave it in the Travel West folder on your harddrive. 3. Belowthe <BODY> tag,type the sentence: Fill out the following form to get more information about traveling West: 4. Belowthe sentence,insert a <P> tag,then insert a <FORM> tag: <BODY> Fill out the following form to get more information about traveling West: <P> <FORM> </BODY> 5. Belowthe <FORM> tag,create a table with4 rows and2 cells in eachrow. Make the width50%,give it cellpadding of 4,anda border of 1. Download other Visibooks for free at www.visibooks.com 103 6. 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 withan <INPUT> tag: <TR> <TD>Name:</TD> <TD><INPUT TYPE=?text? NAME=?name? SIZE=?20?></TD> </TR> Tip: The TYPE of this input is text, which makes it a textbox. The NAME of this input is name, which is how the server knows that its where people enter their name. The SIZE is 20 characters the length of the textbox. Download other Visibooks for free at www.visibooks.com 104 9. 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, andname the input textbox next toE-mail email. <INPUT TYPE=?text? NAME=?address? SIZE=?20?> 11.Save the page andviewit in the browser. It shouldnowlooklike this: Textinputbox Download other Visibooks for free at www.visibooks.com 105 12.In the last rows right-handcell,insert a submit button,<INPUT TYPE=?submit?>. Use the VALUE attribute tospecifythe text displayedon the button: <TR> <TD>E-mail:</TD> <TD><INPUT TYPE=?text? NAME="email" SIZE=?20?></TD> </TR> <TR> <TD></TD> <TD><INPUT TYPE=?submit? VALUE="Send me info"> </TD> </TR> </TABLE> 13.Save the page andviewit in the browser. When youre done,the page shouldlooklike this: Download other Visibooks for free at www.visibooks.com 106 14.Remove the border fromthe table andalign the text in the left- handcells tothe right. <TD><P ALIGN=?right?>Name:</TD> 15.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 the rows beneath will assume the same widths. 16.Save the page,viewit in the browser,andit shouldlooklike this: Download other Visibooks for free at www.visibooks.com 107 17.Open the home page in Notepadandadda newparagraph: Get more information about Western Travel mailed to you 18.Linkthis sentence toinfoform.html. 19.Save the page andviewit in the browser. It shouldlooklike this: 20.Clickon the linksentence. It shouldbring upthe page withthe form. Download other Visibooks for free at www.visibooks.com 108 Making a form work Tomake a formwork,an action must be assignedtoit. Toadd an action toyour form,addthe ACTION attribute tothe <FORM> tag. Consult withyour Webserver administrator tospecifywhat action you shouldassign. For example,an action for a form might looksomething like this: <FORM METHOD=?POST? ACTION="http://www.yourdomain.com/cgi- bin/formmail.pl?> This tells the formtopost its data toa programcalled formmail.pl on at yourdomain.com. This programmight take the formdata ande-mail it towhomever you choose. Download other Visibooks for free at www.visibooks.com 109 Practice: Create forms 1. Create a newpage withfile name favoritesform.html. Title it My Favorite Places. 2. Insert a form,then insert a table withfour rows andtwocells in eachrow. Fill the cells withthe text andformobjects seen below: Tip: The HTML code for a drop-down list looks like this: <SELECT NAME="select"> <OPTION>First Choice</OPTION> <OPTION>Second Choice</OPTION> <OPTION>Third Choice</OPTION> </SELECT> The HTML code for radio buttons looks like this: <input type="radio" name="radios" value="radio1" checked> This is radio button 1 <br> <input type="radio" name="radios" value="radio2"> This is radio button 2 Drop-down list Radio buttons Download other Visibooks for free at www.visibooks.com 110 3. Put these values in the drop-down list: California The Rockies The Midwest 4. When finished,save the page andpreviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 111 Use style sheets The pros and cons of style sheets Style sheets are a flexible,powerful tool for laying out and formatting Webpages. Theyalloweverypage in a site toget displayinstructions fromjust one style sheet. For instance,if you createda 1,000 page Website using style sheets,andyou wantedtochange the linkcolor on everypage, youdonlyneedtochange the linkcolor on one style sheet. Without style sheets,youdhave tochange 1,000 individual pages. Style sheets can alsocreate displayeffects. An example of this is at www.visibooks.com. When you roll your cursor over links, theybecome underlinedif youre viewing the page withthe Internet Explorer browser. Thats the disadvantage of using style sheets: theyre interpreteddifferentlybyeachbrowser. Astyle sheet-based page viewedin Internet Explorer maylookdifferent than it does in Netscape Navigator or other browsers. Download other Visibooks for free at www.visibooks.com 112 Create a style sheet 1. 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. Its a file that gives Web pages formatting instructions, but isnt ever seen. It contains no HTML, 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 for the .bodytext style: .bodytext " " " " The type of text tobe formatted. font- family " " " " The fonts in whichthe text shouldbe displayed. First the computer looks for Courier New,then Courier,then a monospacedfont. The quotes in Courier New allow the computer to read font names with spaces. font-size " " " " The size of the text. Unlike in HTML,style sheets 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 directly behindthe text. Download other Visibooks for free at www.visibooks.com 113 4. Save format.css. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 114 Apply a style sheet 1. In Notepad,create a newhome page andput it the CSS Site folder. 2. Title the home page Style Sheet Demo Page. 3. Belowthe <BODY> tag,type the text CSS Site. Make it a size 1 heading using <H1> tags: <BODY> <H1>CSS Site</H1> 4. In a newparagraphbeneathit,type the sentence,Cascading Style Sheets are a powerful andflexible tool for formatting Webpages: <BODY> <H1>CSS Site</H1> <P>Cascading Style Sheets are a powerful and flexible tool for formatting Web pages</P> 5. Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 115 6. Belowthe <HEAD> tag,adda <LINK> tag that points to format.css: <HTML> <HEAD> <LINK REL="stylesheet" HREF="format.css"> </HEAD> <TITLE>Style Sheet Demo Page</TITLE> 7. In the <P> tag,addthe CLASS attribute that points tothe .bodytext style: <P CLASS="bodytext">Cascading Style Sheets are a powerful and flexible tool for formatting Web pages.</P> 8. Save the home page andviewit in the browser. It shouldlooklike this: The home pages <LINK REL="stylesheet" HREF="format.css"> tag referredtoformat.css for formatting instructions. The paragraphon the page referredtothe .bodytext style on format.css for formatting instructions. Download other Visibooks for free at www.visibooks.com 116 Tip: To use the same stylesheet to format pages throughout a site, just insert the same <LINK> tag in each Web page. For instance, if there were 100 pages in the CSS Site, they could all contain the same <LINK REL="stylesheet" HREF="format.css"> tag and format body text the same way by using the <P CLASS=?bodytext?> tag. Download other Visibooks for free at www.visibooks.com 117 Create link effects with style sheets Cascading style sheets Style instructions can be containedwithin a Webpage itself, without referring toa separate style sheet. These instructions will override those of the style sheet,hence the termCascading Style Sheets: Aninstructionina pages text <FONT COLOR=?#ff0000?> This is red text.</FONT> overrides astyle instructionforthepage <STYLE TYPE="text/css"> .greentext { color: ?#00ff00? } </STYLE> <BODY> <P CLASS=?greentext?> This is green text. which overrides astyle instructionforthesite. <LINK REL=?stylesheet? HREF=?format.css?> </HEAD> <BODY> <P CLASS=?bodytext?> This is blue text. The following exercise employs an in-page style. Download other Visibooks for free at www.visibooks.com 118 9. In the CSS Site folder,open the home page in Notepad. 10. Belowthe <HEAD> tag,replace this: <LINK REL="stylesheet" HREF="format.css"> withthis: <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} --> </STYLE> 11.Belowthe present paragraph,adda newparagraph: A good resource for learning more about style sheets is Webmonkey. 12.Linkthe wordWebmonkey tothe external site http://www.webmonkey.com. Also,make the wordWebmonkey bold. 13.Save the page andrefreshit in the browser. When you put your cursor on the wordWebmonkey,it shouldchange fromredand plain togreen andunderlined. " Download other Visibooks for free at www.visibooks.com 119 Practice: Using style sheets 1. 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} --> </STYLE> withthe original <LINK> tag: <LINK REL="stylesheet" HREF="format.css"> Download other Visibooks for free at www.visibooks.com 120 5. Addthe CLASS=?heading? attribute tothe <H1> tag. <H1 CLASS=?heading?> 6. Save the home page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 121 Upload sites to a Web server 1. DownloadWS_FTPLE andinstall it. 2. Open the program. You shouldsee an initial Session Properties window. It shouldlooklike this: FTP FTPstands for File Transfer Protocol,a waytotransfer files between computers over the Internet. Uploading a site toa Webserver requires special FTPsoftware. The most popular programusedtouploadanddownloadWeb pages froma server is WS_FTP. The LE version is free andcan be downloadedat www.download.comor www.tucows.com. The Proversion costs $39.95,andcan alsobe foundat the Web site of the companythat makes it,www.ipswitch.com. Beloware instructions for uploading files using the free LE version. Download other Visibooks for free at www.visibooks.com 122 3. Clickthe Newbutton. 4. In the Profile Name textbox,enter the name of your upload process,suchas Upload my Web site. 5. In the Host Name/Address textbox,enter the name or IPaddress of 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 Host Name or IPAddress of your Web server. The Web server administrator can also supply your User ID and Password. 6. Leave the Host Type set at Automatic detect,andinput your User ID andPassword. 7. Checkthe Save Pwd checkbox,then clickthe Apply button. The Session Properties windowshouldnowlooksomething like this: Download other Visibooks for free at www.visibooks.com 123 8. Clickthe OK button,andafter your Webserver is contactedthe WS_FTPwindowwill appear. It shouldlooksomething like this: 9. At the top of the left-handLocal System window,double-clickon the green arrowicon togoupin the file hierarchy. Double-click it 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 the public_html folder,or the folder that leads toyour site on the server. Yourcomputer Web server Download other Visibooks for free at www.visibooks.com 124 12.You shouldnowsee your Webpages on your computer andon your 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 you send over will replace the old versions with the same file name. Download other Visibooks for free at www.visibooks.com 125 Practice: Interactivity Create a new home page and site 1. Create a newhome page titledWorld Dances. Save it at C:\Dance. 2. Create a home page for the site that looks like this: Tip: Get the graphics and text for this page at www.visibooks.com/dancing. 3. At the bottomof this andeveryother page in the site,put an e-mail linktoinfoworlddance.org. Download other Visibooks for free at www.visibooks.com 126 Create main section pages 1. Linkthe words American,Latin,andEuropean in the navigation bar tonewmain section pages on American,Latin,andEuropean dance,respectively. Tip: Get the images and text for these pages at www.visibooks.com/dancing. The American dance page shouldlooklike this: 2. Make the Latin andEuropean pages lookconsistent withthe American dance page. Download other Visibooks for free at www.visibooks.com 127 Create subsection pages 1. On the American dance page,linkthe words Lindy Hop and Foxtrot tonewsubsection pages on those dances. The LindyHop page shouldlooklike this: Tip: Get the images and text for this and the other subsection pages at www.visibooks.com/dancesub. 2. Make the Foxtrot page lookconsistent withthe LindyHoppage. 3. Create the subsection pages Tango,Merengue,andSalsa for the Latin section. 4. Create the subsection pages Waltz andContra Dancing for the European section. Download other Visibooks for free at www.visibooks.com 128 META tags 1. 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. Download other Visibooks for free at www.visibooks.com 129 Creating forms 1. On the home page,insert a formthat looks like this: 2. When youre done,previewthe whole Website in the browser. It shouldlooklike the site at www.visibooks.com/worlddancing. Download other Visibooks for free at www.visibooks.com 130 Download other Visibooks for free at www.visibooks.com 131 Advanced Layout In this section, youll learn how to: ? Employ background images ? Employ spacer GIFs ? Insert a horizontal rule ? Specify page margins Youll create a page that looks like this: Download other Visibooks for free at www.visibooks.com 132 Employ background graphics 1. Open Notepad. 2. Create a newpage withall necessaryHTMLtags anda two-cell table: Rows: 1 Cells: 2 Width: 100 Percent Border: 0 Cell Padding: 18 Cell Spacing: 0 3. Save the file on your computers Desktop withthe file name advlayout.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. Download other Visibooks for free at www.visibooks.com 133 6. Gotowww.visibooks.com/advlayout/picsandsave techtool.gif on your computers Desktop. Insert it in the left-handcell. 7. Gotowww.visibooks.com/advlayout/picsandsave bkgd.gif on your computers Desktop. Make it the backgroundof the right- handcell using the BACKGROUND attribute: <TD WIDTH=?90%? BGCOLOR="#000099" BACKGROUND=?bkgd.gif?> 8. In the right-handcell,type the text,The Magazine for People Who 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.gif begins repeating. It repeats because background graphics tile to fill all available space in a cell. The cell is 136 pixels tall: 100 pixels for techtool.gif, plus 36 for Cell Padding (18 pixels at the top and bottom of techtool.gif). bkgd.gif is only 123 pixels tall; therefore, theres 13 pixels of space left to fill. To fix this, use an image editing program like Photoshop, Fireworks or Paint Shop pro to make the background image 136 pixels tall. Download other Visibooks for free at www.visibooks.com 134 12.Belowthe first table,insert a three-cell table witha widthof 100% andcellpadding of 4. Its border andcellpadding shouldbe 0. Make the cells equal widthandcolor themblack. 13.In the first cell,enter the text,Laptops. In the second,Cell Phones, andin the third,PDAs. Make the text white andcenter it withing the cells. 14.Save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 135 Employ spacer GIFs 1. Gotowww.visibooks.com/advlayout/pics andsave spacer.gif on your computers 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 and height of 1. <TD WIDTH="10%" BGCOLOR="#000099"><IMG SRC="spacer.gif" WIDTH="100" HEIGHT="1"></TD> Tip: 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 to bright yellow(#ffff00). Why use spacer GIFs? Spacer GIFs are usedtostretchtable cells toan exact width. Theyare transparent,sotheyremain invisible regardless of the cells backgroundcolor. Aspacer GIF is usedin the exercise below. It keeps the widthof the left-handcell constant,regardless of the size or resolution of the screen usedtoviewit. Download other Visibooks for free at www.visibooks.com 136 5. Put text in the right-handcell sothe page looks like this when viewedin the browser: 6. Set the browser tohighresolution1024x768 pixels. The page shouldlooklike this: Notice howthe left-handcells in the topandbottomtables staythe same width,regardless of the widthof the browser usedtoview them. Download other Visibooks for free at www.visibooks.com 137 Insert a horizontal rule 1. Belowthe text in the right-handcell,insert a <P> tag,then the tag for a horizontal rule: You can read our product reviews and also offer your own opinions and observations on high tech products. <P> <HR> 2. This generates a 3-Drule. Togive it a cleaner look,addthe attributes NOSHADE andSIZE=?1? tothe <HR> tag: <HR NOSHADE SIZE=?1?> 3. Place text belowthe horizontal rule soit looks like this when viewedin the browser: Download other Visibooks for free at www.visibooks.com 138 Specify page margins 1. In the <BODY> tag,addthe LEFTMARGIN,RIGHTMARGIN, TOPMARGIN,MARGINWIDTH andMARGINHEIGHT attributes. Give themall a value of zero: <BODY LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> Tip: The LEFTMARGIN, RIGHTMARGIN, and MARGINWIDTH (along with TOPMARGIN and MARGINHEIGHT) attributes are redundant to account for browser differences: Internet Explorer recognizes LEFTMARGIN, RIGHTMARGIN and TOPMARGIN, while Netscape Navigator recognizes MARGINWIDTH and MARGINHEIGHT. 2. Specifya backgroundcolor of white (#ffffff) for the cell containing the pages text. Specifya backgroundcolor of darkblue (#000099) for the page itself. Download other Visibooks for free at www.visibooks.com 139 3. Save the page andviewit in the browser. When youre done,it shouldlooklike this: Download other Visibooks for free at www.visibooks.com 140 Practice: Advanced layout 1. Give the navigation table (the one withLaptops,Cell Phones and PDAs) five cells. 2. Put |characters (on the same keyas the backslash\ character on your keyboard) in the cells surrounding the one that contains Cell Phones. 3. Give the cells withthe |characters a widthof 1%,andcenter the | characters within the cells. 4. Color the |characters white. When youre done,the page should looklike the one at www.visibooks.com/advancedlayout: Download other Visibooks for free at www.visibooks.com 141 Practical JavaScript In this section, youll learn how to: ? Enable rollover graphics ? Open new windows ? Validate form input Youll incorporate functions that look like this: Creating rollover graphic links Opening new windows Validating forms Download other Visibooks for free at www.visibooks.com 142 Enable rollover graphics What is JavaScript? JavaScript is a programming language that sits in the HTML code of a Webpage. Its not an industrial-strengthlanguage like C++,Java,or Perl thats usedtoprogramWebservers. Rather,JavaScript is usedtoperformsimple functions within Webpages. The following section shows you howtoemployJavaScripts three most useful functions. It wont teachyou howtowrite programs in JavaScript. Learning a programming language is just that: learning a newlanguage,whichcan take months or years tomaster. Rather,youll learn howtoobtain functioning JavaScript scripts andmodifythemtodowhat you want. This approachis fast andeffective. There are thousands of JavaScript scripts available for free on the Webthat perform anything youdwant todoin a Webpageall you have todo is customize them. Working with source code Sometimes youll see a Webpage andsaytoyourself,I wonder howtheydidthat? Byviewing the pages HTMLand JavaScript source code,you can findout. You can alsocopysource code,paste it intopages youre working on,andmodifyit. Since thats soeasytodo,source code for Webpages isnt usuallycopyrighted. The following exercise shows you howtocopy,paste,and modifyan existing JavaScript toput rollover graphic links on your Webpages. Download other Visibooks for free at www.visibooks.com 143 View source code 1. Create a folder on your harddrive calledrollover, at C:/rollover. 2. Using the browser,gotowww.visibooks.com/advancedlayout. 3. Viewthe pages source code byclicking View,then Source. Download other Visibooks for free at www.visibooks.com 144 Copy source code 1. Acopyof Notepadwithadvancedlayout(1) in the title bar will appear. Select all the HTML,then copyit. 2. Create a newblankpage in Notepadandpaste all the copied HTMLcode intoit. 3. Save the page at C:\rollover as index.html. 4. Create a folder within the rollover folder calledgraphics: C:\rollover\graphics. 5. Gotowww.visibooks.com/rolloverpics. Capture all six graphics there andsave themin the graphics folder. Download other Visibooks for free at www.visibooks.com 145 6. Gotowww.visibooks.com/rollover. The graphics in the navigation bar are rollover links: 7. Viewits source code andhighlight all the code between andincluding the <SCRIPT> and</SCRIPT> tags. Its between the <HEAD> and </HEAD> tags: 8. Copythis JavaScript code. 9. Paste the JavaScript code between the <HEAD> and</HEAD> tags in index.html. Download other Visibooks for free at www.visibooks.com 146 Modify source code 1. Youll notice that the names of the graphics specifiedin the JavaScript (laptops2.gif,laptops.gif, cellphones2.gif) dont correspondwiththe names of the graphics in your graphics folder. Modifythe source code tospecifythe correct file names for your graphics: 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"; Graphics thatsit there when cursoris off link Graphics thatpop up when cursoris onlink Download other Visibooks for free at www.visibooks.com 147 2. Gobacktowww.visibooks.com/rollover in the browser,andview the pages source code. Scroll down until you see the code for the secondtable,the one that defines the blacknavigation bar. 3. Highlight andcopythe anchor tag withthe onMouseOver and onMouseOut attributes,the closing anchor tag (</a>),andthe image tag inside them. It links tolaptops.html: 4. In index.html,get ridof the twocells withthe |characters in them. Download other Visibooks for free at www.visibooks.com 148 5. Paste the anchor tags andthe image tag theyenclose into index.html sotheyreplace the wordLaptops: From this: <TD WIDTH="33%" BGCOLOR="#000000"><CENTER><FONT FACE="arial" SIZE="-1" COLOR="#ffffff">Laptops</FONT></CENTER></TD> To this: <TD WIDTH="33%" BGCOLOR="#000000"><CENTER><A HREF = "laptops.html" onMouseOver = "imgOn('img1')" onMouseOut = "imgOff('img1')"><IMG SRC="graphics/laptops.gif" WIDTH="120" HEIGHT="20" BORDER="0" name="img1" alt="Laptops"></a></CENTER></TD> 6. Change the file name for the graphic being linkedfrom laptops.gif toyour graphic: lap.gif. 7. Save index.html andviewit in the browser. It shouldworklike this: Download other Visibooks for free at www.visibooks.com 149 Practice: Enable rollover graphics 1. In the navigation bar of index.html,replace the words Cell Phones andPDAs withrollover graphics. Use the graphics cellbright.gif,cell.gif,pdabright.gif andpda.gif. Tip: Modify the anchor tag and image code in the first cell for use in the other two. <A HREF = "laptops.html" onMouseOver = "imgOn('img1')" onMouseOut = "imgOff('img1')"><IMG SRC="graphics/lap.gif" WIDTH="120" HEIGHT="20" BORDER="0" name="img1" alt="Laptops"></A> 2. When youre done,save the page andviewit in the browser. It shouldlooklike this: Download other Visibooks for free at www.visibooks.com 150 Open new windows 1. 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 andcopythe JavaScript code between the <HEAD> and</HEAD> tags. 4. Paste it belowthe <META> tags in index.html: Download other Visibooks for free at www.visibooks.com 151 5. Change the JavaScript code sothat it opens infoform.html in the newwindow: From this: <SCRIPT LANGUAGE="JavaScript"> function Contact() { OpenNewWindow = window.open('contact.html','help','toolbar=n o,location=0,directories=no,status=yes,menub ar=0,scrollbars=yes,resizable=yes,width=300, height=350'); } </SCRIPT> To this: <SCRIPT LANGUAGE="JavaScript"> function Contact() { OpenNewWindow = window.open('infoform.html','help','toolbar= no,location=0,directories=no,status=yes,menu bar=0,scrollbars=yes,resizable=yes,width=300 ,height=350'); } </SCRIPT> Tip: JavaScript is not HTMLits a programming language. It works better without quotes around values. Also, dont change the case of words in a script that works. JavaScript is, unlike HTML, case- sensitive. Download other Visibooks for free at www.visibooks.com 152 6. Viewthe source code again at www.visibooks.com/newwindow. 7. Findthe anchor tag between the <BODY> and</BODY> tags that refers tothe JavaScript function Contact(). <FONT FACE="arial" SIZE="+1"><B><A HREF="javascript:Contact()">Open new window with form inside</A></B></FONT> Tip: A function is a job performed by a program. The one above is named Contact(). Its job is to open the window that allows people to contact Visibooks. 8. Copythe anchor tag,then paste it intoindex.html soit links the secondsentence tothe From this: <A HREF="infoform.html">Get more information about Western travel mailed to you</A> To this: <A HREF="javascript:Contact()">Get more information about Western travel mailed to you</A> 9. Save index.html andviewit in the browser. Download other Visibooks for free at www.visibooks.com 153 10.Clickon the linkedsentence. Anewwindowshouldpopupwith the 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=n o, location=0,directories=no,status=yes,menubar =0, scrollbars=yes,resizable=yes, width=300,height=350') Changeto status=no togetridof thestatus baratthe bottomof thewindow Changewidth and heightvalues to changesizeof window inpixels Download other Visibooks for free at www.visibooks.com 154 Validate form input See how it works 1. 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 window shouldappear. When you enter your name andclickthe button, another alert windowshouldappear that reads,Please input your address. This alsoworks withthe e-mail input. Download other Visibooks for free at www.visibooks.com 155 Insert the validation script 1. Viewthe source of the page at www.visibooks.com/validate,and copythe 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 } } //--> </script> Tip:Heres a diagram that explains the if statement variables:  if (document.info.address.value=="") 2. Paste it between the <HEAD> tags in infoform.html. Comment tags hide thescript fromolder, non- JavaScript capable browsers sothey dont display it Stands for pageitself Nameof form Identifies inputfield Denotes blankfield Download other Visibooks for free at www.visibooks.com 156 Modify the <FORM> tag 1. Adda NAME attribute tothe <FORM> tag. Name the forminfo: <FORM NAME="info" METHOD=?POST? action="http://www.yourserver.com/cgi- bin/formmail.pl"> 2. Addthe attribute ONSUBMIT tothe <FORM> tag. Tell the form that when the submit button is clicked,performthe function return validate(): <FORM NAME="info" METHOD=?POST? ONSUBMIT="return validate()" action="http://www.yourserver.com/cgi- bin/formmail.pl"> 3. Save the page. Notice howthe JavaScripts if statement input variables have the same name as the forms 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 } } //--> </script> <TABLE WIDTH=50% CELLPADDING=4 BORDER=0><TR><TD WIDTH=5%><P ALIGN=right>Name:</TD> <TDWIDTH=45%><INPUT TYPE=text NAME="name" SIZE=20></TD></TR><TR> <TD><PALIGN=right>Address:</TD> <TD><INPUT TYPE=TEXT NAME="address" SIZE=20> </TD></TR><TR> <TD><PALIGN=right>E- mail:</TD><TD><INPUT TYPE=text NAME="email" SIZE=20> </TD></TR><TR><TD></TD><TD><INPUT TYPE=submit VALUE="Send me info"></TD></TR></TABLE> 4. Viewinfoform.html in the browser. It shouldlookandworklike the format www.visibooks.com/validate. Download other Visibooks for free at www.visibooks.com 157 Additional Resources Webmonkey (www.webmonkey.com) Ahow-tosite for people building Websites,filledwithexcellent tutorials 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. It includes a goodstyle sheet guide at projectcool.com/developer/reference/css_style.html. Web Review (www.webreview.com) Asharpandinformative site for Webdevelopers,withsections on Authoring,Design,Development,E-Commerce,Multimedia,and Back-EndWebserver Programming. HTMLHelp (www.htmlhelp.com) Goodresource site withlots of information on style sheets andHTML technical standards. Includes online tools suchas an HTMLvalidator, linkchecker,andASCII character guide. HTML & XHTML: The Definitive Guide (book) ChuckMusciano,Bill Kennedy,OReilly; ISBN: 059600026X Like most OReillybooks,gearedtowards programmers. A comprehensive resource for HTML,but better yet,a guide tomaking HTMLworkwithXMLthe next big thing in Webdevelopment. Voodoos 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. HomeSite The mother of all HTMLediting programs. Allows search-and-replace throughentire sites,andincludes manyother useful features. Downloada 30-daytrial version at www.allaire.com. Download other Visibooks for free at www.visibooks.com 158 Download other Visibooks for free at www.visibooks.com 159 HTML Tag Chart Task Tag Example Set up a Web page <HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> </HTML> <HTML> <HEAD> Signature, Meta tags, JavaScript, Style sheets go here </HEAD> <TITLE> The pages title goes here </TITLE> <BODY> Whateveryouwant to appearonthe screengoes here </BODY> </HTML> Format text Createaparagraph <P> This is aparagraph. Alignparagraph right; center paragraph <PALIGN=right></P> <PALIGN=center></P> This paragraph is centered inthis cell by using the ALIGN attribute. Maketextbold <B></B> This textis bold. Indenttext <UL></UL> This textis indented Create bulleted list <UL> <LI> </UL> ? Listitem ? Listitem Createnumbered list <OL> <LI> </OL> 1. Item#1 2. Item#2 Download other Visibooks for free at www.visibooks.com 160 Task Tag Example Create a link Linktoapagewithinsite <A HREF=x.html></A> This sentenceis linked toapage aboutXtopic. Createane-mail link <A HREF=mailto:youx.com></A> youx.com Linktoanexternal page <A HREF=http://www.x.com></A> This sentenceis linked to www.x.com. Insert a graphic Insertgraphic <IMG SRC=x.gif> Alignagraphic rightorleft <IMG SRC=x.gif ALIGN=right> <IMG SRC=x.gif ALIGN=left> Textflows in tothesideofthegraphic whenits aligned rightorleft. Add vertical, horizontal space around agraphic <IMG SRC=x.gif VSPACE=x> <IMG SRC=x.gif HSPACE=x> Creates vertical and horizontal spacearound graphic that nothing canoccupy. Remove/Add border <IMG SRC=x.gif BORDER=0> <IMG SRC=x.gif BORDER=1> Insert horizontal rule Create rule <HR> Remove 3-D effect, specify size <HR NOSHADE SIZE=1> Download other Visibooks for free at www.visibooks.com 161 Task Tag Example Change whole page Changebackground color <BODY BGCOLOR=#cccccc > Pagewith grey background Changelink, visited linkcolors <BODY LINK=#ff0000 VLINK=#00ff00> Red link Greenlink Changepagemargins <BODY TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> Textand graphics onpage gorighttoits edges. Create a table Inserttable <TABLE> <TR> <TD></TD> <TD></TD> </TR> </TABLE> Specify widths <TABLE WIDTH=100%> <TR> <TDWIDTH=20%> <TDWIDTH=80%> </TR> </TABLE> 20% 80% Specify border <TABLE BORDER=0> Pad cells <TABLE CELLPADDING=16> Cell contents areinset 16 pixels from edgeofcells Spacecells <TABLE CELLSPACING=24> Cells are separated by 24 pixels Download other Visibooks for free at www.visibooks.com 162 Task Tag Example Changecell background color <TDBGCOLOR=#000000> Insertbackground imageincell <TDBACKGROUND=x.gif> Employ frames Createaframeset <HTML> <HEAD></HEAD> <TITLE></TITLE> <FRAMESET ROWS="50,*"> <FRAME NAME="topframe" SRC="x.html"> <FRAME NAME="bottomframe" SRC="y.html"> </FRAMESET> </HTML> Include forms Establish form <FORM> Inserttextbox <FORM> <INPUT 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> Download other Visibooks for free at www.visibooks.com 163 Task Tag Example Insertdrop-downlist <SELECT NAME="x"> <OPTION></OPTION> <OPTION></OPTION> <OPTION></OPTION> </SELECT> <SELECT NAME="x"> <OPTION>First Choice</OPTION> <OPTION>Second Choice</OPTION> <OPTION>Third Choice</OPTION> </SELECT> Insertcommentfield <TEXTAREA NAME="x" COLS="22" rows="8"></TEXTAREA> Insertsubmitbutton <INPUT TYPE=submit> Changetextonbutton <INPUT TYPE=submit VALUE=your text here> Download other Visibooks for free at www.visibooks.com 164 Task Tag Example Employ style sheets Createstylesheet Savefilewith .css extension. stylesheetname.css Createstyle .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} Download other Visibooks for free at www.visibooks.com 165 Index Browser Internet Explorer .................................................................................................11 Netscape Communicator....................................................................................11 viewing pages .......................................................................................................11 Colors hexadecimal..........................................................................................................50 link.........................................................................................................................52 page.......................................................................................................................50 table cells...............................................................................................................65 Forms..............................................................................................................................102 action...................................................................................................................108 validation............................................................................................................154 Frames..............................................................................................................................91 frameset ................................................................................................................92 Graphics aligning .................................................................................................................38 background........................................................................................................132 capturing...............................................................................................................34 copyright...............................................................................................................35 formatting.............................................................................................................41 inserting ................................................................................................................36 rollover................................................................................................................142 spacers.................................................................................................................135 using as links ........................................................................................................47 Home Page creating ...................................................................................................................4 file name .................................................................................................................7 Horizontal Rule............................................................................................................137 JavaScript.......................................................................................................................141 form validation..................................................................................................155 Open New Window...........................................................................................150 programming.....................................................................................................142 rollovers..............................................................................................................149 Links e-mail....................................................................................................................31 external sites .........................................................................................................33 target .....................................................................................................................94 to new page...........................................................................................................25 Navigation bars........................................................................................................................76 clues.......................................................................................................................27 system....................................................................................................................44 you are here..........................................................................................................46 Download other Visibooks for free at www.visibooks.com 166 Software Notepad...................................................................................................................4 Source Code...................................................................................................................143 copying................................................................................................................144 modifying............................................................................................................146 Style Sheets.....................................................................................................................111 applying...............................................................................................................114 creating................................................................................................................112 link effects ...........................................................................................................117 Tables................................................................................................................................58 border....................................................................................................................62 creating..................................................................................................................59 formatting.............................................................................................................63 tables within..........................................................................................................88 width......................................................................................................................63 Tag <A> (anchor).......................................................................................................28 <BODY>.................................................................................................................9 <FONT>...............................................................................................................15 <HEAD>.................................................................................................................7 <HTML>................................................................................................................4 <IMG>..................................................................................................................39 <META>.............................................................................................................100 <P>........................................................................................................................19 <TABLE>..............................................................................................................59 <TITLE>.................................................................................................................9 Text aligning..................................................................................................................19 centering ...............................................................................................................77 changing color......................................................................................................18 changing fonts......................................................................................................14 changing size.........................................................................................................16 changing weight ...................................................................................................17 creating lists..........................................................................................................23 indenting...............................................................................................................21 Web fonts..............................................................................................................15 Uploading.......................................................................................................................121 FTP......................................................................................................................121 Web Page consistent layout ..................................................................................................85 layout.....................................................................................................................58 margins................................................................................................................138 proper file names .................................................................................................26 title...........................................................................................................................8 Web Server.....................................................................................................................123 Download Visibooks for Free All Visibooks can be downloaded at www.visibooks.com. Visibooks believes that you shouldnt have to rely on strangers reviews or skim at a bookstore when deciding which computer book to buy. By putting our books online for you 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 youd like to trade a small amount of money for a big chunk of time, purchase a bound copy of your Visibook: Print-It-Yourself Buy a Bound Copy Printing Spend 1-2 hours printing it at home, or 30 minutes at work trying not to get caught using the office printer. Plus 1-2 hours to go to Kinkos, have it bound, then bring it back. Or 5minutes to pick up and sort pages that fell out after being bound with a clip. 2 minutes to order Binding Spend $1.50 for 150 sheets of paper, plus $2 depletion ofprinter cartridge, plus $8 for plastic comb binding. Less than $20 for a spiral-bound copy, printed on heavyweight paper with full-color cover. Total Spend 30 minutes to 4 hours. Spend $3.50 to $11.50. 2 minutes, less than $25 shipped. Know someone whod 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. Other books on Web publishing from FrontPage2000 for Visual Learners Teaches people how to build Web sites using FrontPage 2000. Addresses improvements from previous versions. Dreamweaver 4 for Visual Learners Covers both basic and advanced features of one of the easiest to use site- building programs. TheVisual Learners GuidetoManaging Web Projects Goes beyond the nuts-and-bolts of site-building to show people how to plan, organize, build and manage effective Web sites.

PARTAGER SUR

Envoyer le lien par email
1034
READS
3
DOWN
0
FOLLOW
5
EMBED
DOCUMENT # TAGS
#html  #html5  #javascript  #tutorial 

licence non indique


DOCUMENT # INDEX
WEB 
img

Partagé par  joloe56

 Suivre

Auteur:
Source:Non communique