Links

On the fourth week, we delved deeper into link and how to utilize them properly. To link to a files, webpages and e-mails to your Web Page you must first know exactly where the files or information you are linking to are located . This is why organization is important when adding links to in HTML, so that we can efficiently program our links and efficiently update them when required. So when we create a link to a CSS document it goes in the Head portion of the HTML document, while the links that your users will interact with go in the Body.Web_06.pngWebsites often put the most impotent links to content on their site in the Navigation (nav) bar but it is also common to have links for the user through the webpage. To create a link you need to wrap whatever you are linking, weather its text or an image in <a></a> tags. There are 5 main types of links:

  1. # is used to ether make a dummy link or just link to another area on that same page.
  2. Link to an internal webpage or document using href
  3. Link to an external webpage using the same href method but instead of diging down into your won files just link to a URL directly in the href. <a href=”http://”></a&gt;
  4. Link to your e-mail address by entering “mailtome:” followed by your e-mail adress. you need <a href=></a>
  5. Embed a link. to You Tube videos, Google Maps, or music you can ether link to the video externally using theĀ <a></a> tags or you can Embed them onto your website to keep the users from moving to another page. All you need to do is locate the “Embed” link on the home website of the desired video and you will get a J qury link that you just need to copy and paste into any HTML tag like <div> or <section>.

One thing to take note of when working with anchor tags is that they are inline objects so when styling them, they won’t allow you to add a height and width to them without adding a “display:block;” or “display:inline-block” attribute to those tags.

Adobe Dreamweaver provides a few options to make linking to and managing content on your computer easier. By clicking on Site up in Dreamweaver’s Drop Down Menu, you can select the New Site option to create a live link to your documents within Dreamweaver.Web_08.pngJust make sure to click on the little folder icon to find the correct directory. Once you’ve found the folder you want to link to, click “Choose” and then make a name for your new Site and click “Save.”Web_09.pngThis is handy for linking because you can just click on the Properties tab bellow to expand it and with your mouse and simply drag and drop to your desired document. Dreamweaver will automatically create a link around any text or images you have highlighted.Web_10BMix and match these methods to make your site as easy for the user to navigate as possible. Then once you’re finished just link your site to a server so that your can share your site with the world wide web.

http://www.lufatest.com/humber/gdpw/gordan/canadian_waters/index.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s