Web Design (5) Navigation (1)

Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder “My Web Sites”. And then, within that, create a new ‘Navigation’ website folder.

Now … Move into your ‘navigation’ website folder a copy of the “blank.html” file, (hold down Ctrl when moving the file) which is in your “Web Site Resources” folder and rename the “blank.html” file, “index.html”

Next …. Move into your website folder another copy of the “blank.html” file, and rename it, “about.html” Move into your website folder yet another copy of the “blank.html” file, and rename it, “dickens.html”

Now, back to Brackets! Select ‘Open Folder’ from the drop-down box and find your ‘navigation’ website folder in Windows Explorer Now, below your ‘navigation’ website name in the drop-down box should now be both the ‘index.html’ file and your new ‘about.html’ file

Moving between web pages To achieve this, we need ‘hyperlinks’ Hyperlink - a link from a hypertext document to another location, activated by clicking on a highlighted word or image. Hyperlinks use the anchor tag:

The Anchor Tag In ‘index.html’ enter this code: About Us In Live Preview, what do you notice about the inner text (‘About Us’)? About Us (blue and underlined) (About Us will turn purple if the linked has already been clicked.)

href About Us If is a tag, what is ‘href’ ? A tag attribute The href attribute tells the browser where to navigate to if the hyperlink is clicked on.

Moving back About Us This hyperlink on your index.html page should take the user to your about.html page….. But how to move back from the about.html page to the index.html page? Now experiment with code to achieve this! Home

Other uses of hyperlinks To visit other web sites, for example: Chepstow U3A Web Design Group To send an , for example: (Recipient)

In order to retain the current page By default a hyperlink navigates away from the current page in order to open up the target page (URL (Universal Resource Locator) destination). It is possible to change this using the target attribute within the Anchor tag. target= “_blank” Chepstow U3A Web Design Group

An exercise On the about.html page enter the hyperlink to the Web Design Group website. Chepstow U3A Web Design Group Try this without the target attribute And see what happens in Live Preview. Then do the same with the target attribute. target= “_blank” Do you see the difference?!

Exercise Now create hyperlinks between the 3 webpages: home, about and dickens. Check validation and Live preview.

In your website there are now 2 types of URL Absolute URLs which provide the full URL for the document, including the protocol ( domain name & pathname. Absolute URLs are necessary when pointing to a document on the Web (i.e. not on your own server) Relative URLs which describe the pathname to a file relative to the current document; here protocol and domain name are unnecessary. Relative URLs are used when linking to another document on your own site