|
|
|
|
Add Links to a Web Page with HTMLLinks or hyperlinks are those little underlined words on a web page that you click to go to another location. Hyperlinks are created using the anchor tag. The anchor tag in its most basic form looks like this: When the anchor tag is used as a hyperlink it looks like this: The name of the page your are going to is placed between the quotation marks. A short description or visible page name is placed between the tags. If we were going to page 2 it might look like this: You can also place pictures or images between the tags to create buttons on your web page. We've supplied three buttons for our demo site. The 3 pages we'll create for the site are index.html, about.html and friends.html. The Home page of your website should always be named index.html. This is by default the page that will open on your website when someone types your URL or domain name into a browser. Here is what the code looks like with our 3 anchor tags and button images. Notice that we set the anchor tags in a paragraph and gave the paragraph an id. We'll use the id links to correct some problems later. Notice also the line break tag which is used to break the lines of code and add space.
The line break tag looks like this: This block of code is going to be placed in the left cell under the code for the strawberry. The left cell will then look like this:
When you add an id attribute to an element on a web page it is defined in the style sheet by preceeding it's name with a pound sign. We named the paragraph that contains our link buttons links. Now we'll add 2 lines of code to the style sheet that will center the buttons and remove the text indent.
Now open the web page in your browser or click the refresh button to see your link buttons centered under the strawberry. The border is still there. BordersImages as Links Before we create our 3 pages let's add some borders and we're almost done with the template. Borders can be added using our style sheet. An example of the code is shown here:
This simple statement adds a solid border, red in color and 3 pixels in width. Other styles of borders that you can use are : dash, dotted, groove, inset and outset. all of these styles work in both IE and Mozilla browsers. there will be a slight difference in appearance between the two browsers. We're going to add an inset border to the body tag. This will the page the appearance of being dished out. We could just add the code to the existing definition of the body tag in our style sheet. to make it easier on you we'll just add a separate statement. Copy this line of code and paste it into the style sheet. Save the style sheet and look at the web page in your browser. Refresh if needed. Now we'll add an outset border to the images on the page to give them a raised appearance. this will cause a problem with our buttons and heading, but we'll soon learn the purpose of our id tags. Here is the code to add the outset border: Copy the code and paste it into the style sheet. Save the changes and look at your web page in the browser. Refresh if needed.
Now we can see the power of style sheets and the use of the id attribute. When we added the site heading we named the cell that it was located in heading. When we added the links we named the paragraph where they are located links. We can turn off the image borders in both of these locations with this simple statement: Notice the code addresses the image tag in both locations, #heading and #links. copy the code and paste it into the style sheet. Save the Changes.
That completes the body section of our template. Now we'll add some code to the head section and we'll be ready to create our pages. Head SectionThe head section and doctype tag of an HTML document contain information for browsers and search engines. The head section is a very important part of your HTML page. The most important and the very first tag that should appear is the title tag. Your title tag is one of the major tags used by search engines to determine the position of your website. It should contain the major keyword phrases that you want your site to be found for when people search on the net. Learn as much as you can about keywords and their use in web page content before you start adding text to your web pages. Add the code for the title tag directly below the opening Directly below the title tag add the code for your meta tags. These tags are also used by search engines. The description should contain a brief description of the content of your web page. You should also place your keyword phrases in these tags. Place your keyword phrases separated by commas in the keywords meta tag. Here's the code for your meta tags: When your head section is complete, save all changes and look at the page in your browser.
That completes Phase I of this tutorial. I recommend that you delete all of your work and start over. Work through the lessons until you see the connection between the tags on your web page and the entries in your style sheet. When you are comfortable Start Phase II Free Business Web HostingIf you are building a website for a business or organization, you can put it online for free at Microsoft® Office Live Small Business. You can create your website with HTML and upload it or use their tools and build it online. Take your business online with Microsoft® Office Live Small Business. Get started for FREE!
Create Web Sites without Learning Code
|
HTML Tutor HTML Editors Online Builder Tutorials Other Helps |
|
www.createasite.net ©2008 All Rights Reserved - Create a Site with HTML - Make a Free Website |
Add the code and save the web page. If you look at the page in your browser you will see that the buttons are arranged to the left and indented, they also display a border.. Let's add the code to the style sheet that will fix the alignment and indent problem. Borders will come next.
Copy the code and paste it into the style sheet. Save the changes.
There you go. Borders around our strawberry and any pictures we put on the page. Unfortunately there are also borders around our heading image and still on our buttons.
Open your web page in your browser. Refresh if needed. Voila!! No borders except where we want them.
