The ultimate html resource About the Double-Underlined Links INTRODUCTION home | about | non-technical introduction newsletter archive | PRIMERS html| MySpace html| ad banners| perl & cgi| asp| javascript| database - sql| HTML & GRAPHICS TUTORIALS getting started| backgrounds| buttons| browser specific| colors| forms| frames| html 4.01 tags| html 4.01 ref| image maps| tables| web graphics| BEYOND HTML asp| cascading style sheets| css keyword ref| cgi scripting| dhtml/layers| dot net| java applets| javascript| javascript keyword ref| javascript script tips| php| security| vb script keyword ref| webmaster tips| webmaster projects| webmaster toolbox| xml| general reference pieces| the master list| NEED HELP? discussion boards| mentors| technology jobs| WEB DEVELOPMENT earthwebdeveloper.com| javascripts.com| Become a Partner Search Clipart.com: Clipart Photos Fonts Web Art internet.commerce HTML Goodies : Beyond HTML : Reference Pieces: So You Want To Set Up Your First Site, Huh? HTML GOODIES TO GO NEWSLETTER Other Related Newsletters So You Want To Set Up Your First Site, Huh? By Joe Burns ...use these to jump around or read it all [Putting A Site TogetherThe HREF Links] [In Site vs. Off Site Links] [Directory Structure] [Internal Links] [To Use Full URL, Or Not] [What If I Do Use the Full URL?] [Are There Exceptions To This?] [The Home Page Links]      Answering a ton of email every day allows me to keep an eye on when the new batch of HTML writers come into the fold. The questions I receive always become more and more difficult, and then all of a sudden...they become much simpler. The new group of people has arrived.      What's more, in my constant want to write tutorials on new and more difficult topics, I forget to create more beginning-level tutorials. In that vein, I offer this tutorial. Putting A Site Together      Lately, I've been getting a lot of email asking about setting up a site with numerous internal pages. For example, let's say you create a homepage. We'll call it homepage.html.      You then create three more pages: links.html (A page of your favorite links) photos.html (A page of your favorite photos) story.html (A page with one of your best stories)      At the moment they are just sitting on your hard drive (or floppy disc) and now you want them to become a site. Homepage.html will offer links to the three other pages. That'll be your first site. Good. Now, how do you do it? The HREF Links      First off, I'm assuming you already have a place to post these pages.      So, now you have a place for your files. This "place" you have been given is actually a small section of a hard drive on a server somewhere. In computer terms, you have a directory where you can place your files. Think of this directory like an equal to a floppy disc. It's a contained area where the pages, and all the images that go on those pages will be housed.      This is important to remember when you're writing the links that will connect these four pages together. In Site vs. Off Site Links      You've probably already read through Primer Four - Creating Links. If not - give it a once over pretty soon. It'll give you the basic format of a link. Now let's talk about the pages you'll link to.      First off, let's attach to a page outside of your site. Here's the basic format: <A HREF="http://www.htmlgoodies.com">Click Here</A>      Note the address above is a full URL. ("URL" stands for Universal Resource Locator. It's a fancy way of saying "web address") It starts with that http thing and ends with that .com deal. It's a full address.      Now let's look at what I call an internal link. This is a link that stays within your own site. One of your pages is calling for another one of your pages. We'll say this is a link from your homepage.html to links.html. Remember that from above? Here's the format: <A HREF="links.html">Click Here</A>      Notice I'm only calling for the page, without the full address attached. Why? Well, because I don't need it. To make the point a little stronger, let's look at the directory structure of web addresses. Directory Structure      For the sake of continuing this discussion, and because I love to hear myself talk, let's take this little fantasy of mine a bit further. You purchase an account on a server called www.joeserver.com. When you sign up for your account, you choose the login "schmoe". This means that, most likely, your email address will be schmoe@joeserver.com and your web site address will be http://www.joeserver.com/~schmoe. The little squiggly line thing (~) is called a tilde. It tells the server, "There is one directory on this server called 'schmoe'- find it."      When you use your File Transfer Protocol (FTP) program to upload files to your new server, you will upload into the directory that was set aside for you - in this case, schmoe.      So you upload your homepage.html page into your directory. The address of that page is now http://www.joeserver.com/~schmoe/homepage.html.      See the slash I added and then the name? I do that because the homepage.html page is now inside your directory called schmoe.      Think of a directory structure as one item being inside of a larger item. For example, a word is inside of sentence, is inside of a paragraph, is inside of a page, is inside of a chapter, is inside of a book. If this were written in directory structure format, it would look like this: Book/chapter/page/paragraph/sentence/word      It gets smaller as you move to the right, each is inside the previous. Take this URL for example: http://www.server.com/users/pages/ohio/joe.html      In that URL, the page "joe.html" is inside a directory called Ohio, is inside a directory called pages, is inside a directory called users, is on a server called server.com.      That's why the page homepage.html is at the end of the address above. Make sense? Internal Links      Now we put together a site in your own directory. Once again, you have a homepage called "homepage.html" and three sub-pages that you want to link to from homepage.html. They are "links.html," "photos.html," and "story.html". First off, you need to to FTP, or "upload" all four pages to your directory. Now, here's the first link on homepage.html that will call up your links.html page. <A HREF="links.html">Click Here</A>      Notice I am only calling for the page by its name. I am not using the full address.      Now, I could use the full address. There's no reason why I couldn't. If you followed along with the discussion above, you'll remember that since the file was uploaded into the schmoe directory, its full address would be http://www.joeserver.com/~schmoe/links.html. So why not use it? To Use Full URL, Or Not To Use Full URL      If you are linking to a page off of your site, then you must use the full URL. The reason is that you are leaving your own directory. In fact, the chances are really good that you are leaving your server all together. Because of that, you need to offer your HREF command the full address to the new site.      But when you're staying within your own site, as we are above, you need only call for the page name. You see, your directory is a closed home for all of your pages. If you only call for a page or an image through its name minus the full address, what happens is that the server looks for the page or the image inside the same home that houses the page that called for it. In other words, servers will search a page's home directory by default. That's good to know when you create your links. It means you only have to use the page's name minus the full URL. What If I Do Use The Full URL?      Always playing the rebel, huh? The answer is that your internal links might run slower. You see, if you use the full address, what happens is that when your user clicks on a link, a full search process begins. First the server is located, next the directory is located, then the page is located. Whereas, if you use only the name, the search is already at its destination. The server simply searches itself. Slick, huh? The Home Page Links      So what is written onto homepage.html to link the pages together? This: <A HREF="links.html">Click Here for My Favorite Links</A> <A HREF="photos.html">Click Here for My Photos</A> <A HREF="story.html">Click Here for My Best Story</A>      Now you're all linked up. Hey! You made more than a couple of pages. You linked them all together. You made a site.   Enjoy!   [Putting A Site Together] [The HREF Links] [In Site vs. Off Site Links] [Directory Structure] [Internal Links] [To Use Full URL, Or Not] [What If I Do Use the Full URL?] [Are There Exceptions To This?] [The Home Page Links] Back to the HTML Goodies Home Page Tools: Add htmlgoodies.com to your favorites Add htmlgoodies.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.x Receive news via our XML/RSS feed

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization IBM Solutions Brief: Go Green With IBM System xTM And Intel HP eBook: Simplifying SQL Server Management IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out Microsoft PDF: Top 10 Reasons to Move to Server Virtualization with Hyper-V Microsoft PDF: Six Reasons Why Microsoft's Hyper-V Will Overtake Vmware Microsoft Step-by-Step Guide: Hyper-V and Failover Clustering Intel PDF: Quad-Core Impacts More Than the Data Center Intel PDF: Virtualization Delivers Data Center Efficiency Go Parallel Article: PDC 2008 in Review Microsoft PDF: Top 11 Reasons to Upgrade to Windows Server 2008 Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms

PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008 Go Parallel Article: Q&A with a TBB Junkie IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails IBM eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers HP eBook: Guide to Storage Networking MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Attend the IBM Service Management World Tour--Register now! Video: Intel Launches Data Center Efficiency Initiative Intel Podcast: Talking vPro Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action

Go Parallel Video: Performance and Threading Tools for Game Developers Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IBM e-Kit: Reduce Complexity and Cost with BladeCenter Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Acresso Download: Try InstallShield 2009 Microsoft Download: Silverlight 2 SDK Access Crystal Reports for Eclipse Basic Edition (Free) 30-Day Trial: SPAMfighter Exchange Module

IBM Energy Efficiency e-Kit Shows You How to Reduce Costs Red Gate Download: SQL Toolbelt Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Developer Runtime (Windows) MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

VMware Online Virtualization Forum: Learn about the benefits of a virtual infrastructure, network with industry experts--Register today! Demo: Dual-Core Intel Itanium 2 Processor IBM IT Innovation Article: Green Servers Provide a Competitive Advantage

Microsoft Article: Making Designer/Developer Collaboration a Reality MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES