Teach Yourself HTML5 & CSS 3: Week 3 Task 11 - Anchors Part 1

Transcription

1 Teach Yourself HTML5 & CSS 3: Week 3 Task 11 - Anchors Part 1 This week you will continue working with your brave-tin-soldier.html webpage investigating how you can alter the layering of elements in it. Next you will have a quick look at the title attribute and then start on an introduction to website anchors. Using Notepad++, open up your brave-tin-soldier.html webpage that you worked on last week. Refamiliarise yourself with how the three blocks were positonned and styled using absolute positioning, setting a width, borders and background colours, and adding some padding. Element Stacking Order While working through last weeks lesson you will recall that, on occasion, when using positioning, some of your data overlaps other data as shown on the right. The normal stacking order of webpage elements are determined by the order that they occur in your webpage code. Elements further down in your HTML code always sit on top of elements nearer the top of your code. Layering Elements When using positioning you can override the natural stacking order of elements in your webpages when they overlap using the z-index property in your CSS code. Follow this property with a number: positive or negative including zero. The higher the z-index number of a positioned element the further up in the layering it is over elements with lower z-index numbers. Only those elements that have CSS positioning properties applied to them can have a z-index number. If a positioned element is not given a z-index number then its default value is 0. Save a copy of your brave-tin-soldier.html file naming it as task11a.html Open task11a.html in Notepad++. Alter the <title> </title> text to Task 11a Alter your CSS division code property values so that: blk2 has a 50 pixel top value and a 200 pixels left value. blk3 has a 300 pixel top value and a 300 pixels left value. Save the changes to your code. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 1

2 Refresh and then view task11a.html in a browser. It should look like that shown on the right: Notice that the blue blk1 is below the red blk2 and these are both below the green blk3. This occurs because blk1 comes first in the HTML5 code followed by blk2 and blk3 last in your HTML5 code. Let s reverse the stacking order. Add z-index properties to your CSS code as follows: blk1: z-index: 3; blk2: z-index: 2; blk3: z-index: 1; Save the changes to your code. Refresh and then view task11a.html in a browser. It should look like that shown on the right: Notice that the blue blk1 is now above the red blk2 and these are both above the green blk3. This occurs because blk1 has a higher z-index of 3 and so is on top of blk2 which has a z-index of 2 and blk3 has the lowest z-index of 1. Titles Occasionally when you move your cursor over a webpage element you see a text label floating near your cursor describing that element. To do this you use the title = " " attribute within the tag s HTML5 code. The title = " " attribute is not CSS code it is an attribute included inside a tag. You do not use it in internal style sheet code nor in your in-line style sheet code (or even in external style sheet code which we have not covered yet). For example, suppose we wanted the text label "Ernie and Bert" to appear when a user moves their cursor over a paragraph about my dogs Ernie and Bert; the code would be: <p title = "About Ernie and Bert">Bert and Enrie are both 5 years old.</p> Include the title attribute in one of your paragraph tags. Save your document. Refresh and then view task11a.html in a browser. Move your cursor over the paragraph that includes the title attribute and let go of your mouse for a few seconds. Your title text should appear but notice what happens to your text after a few more seconds. If the title text does not appear then try a different browser. Are you using the latest version of your favourite browser? If not you should update it immediately so that you have the benefits of all the latest HTML5 and CSS 3 technologies. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 2

3 Important Notes: 1. Always supply alt, width and height attributes in image code. 2. The title attribute is not necessary but a nice touch. For SEO purposes always use it with images, succinctly describe what your image is about! 3. Using well-focused title attributes can assist your website ranking in some search engines. For SEO purposes you should always include the title attribute in image code. Question 1/ Why should you always supply alt, width and height attributes in image code? You can add the title = " " attribute to almost any webpage tag and the title text will appear when the cursor is moved over it. For example you could have different titles appearing when you move your mouse over different parts of your webpages including any paragraphs, divisions, any of the six size heading tags and most other tags (even horizontal lines). Include the title attribute within all three <div> tags as shown in the example below: <div class = "blk1" title = "Something about the first block"> </div> Save your addition. Refresh and then view task11a.html using a browser. Move your cursor over each of your divisions and wait for your title text to appear. Notice how, in the block where you have also included a title attribute inside the paragraph tag, that you get the paragraph title text when your cursor is over the paragraph element and you get the division title text when the cursor is just off the paragraph element but still inside the division element space. Include a title attribute with your image. Save, refresh and view in a browser and make sure your image title appears when your cursor moves over it. Your result should be similar to that shown on the right: Question 2/ Why should you keep your title text short? Anchors An anchor in a webpage is a marked spot where you can attach something in much the same way as an anchor is used to attach a boat to a spot in the sea or a lake. Anchors in webpages have two main uses: 1/ They mark spots where you want to place links to other webpages or to other types of documents. 2/ They mark a spot where you want a user to jump to when your user clicks on a link placed elsewhere in that webpage or even from links in other webpages or other websites. In the rest of this week s task you will investigate how to create and use anchors to link your webpages together using HTML5 code. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 3

4 Creating Anchors To create an anchor you firstly need to have a spot in your webpage where you want to place your anchor. This spot can be a bit of text, an image or anything else. If you are using that spot as a link, then the text or image should be something sensible that your webpage user would automatically know was a link (more about this later!) To mark your anchor spot you use the following anchor tag: <a> </a> where the three dots are replaced with either text or image code. The a is short for anchor. Hypertext Links A hypertext link (or hyperlink or link) is an anchor that you can click on with your mouse pointer. When you click on a hyperlink, you are taken to another webpage anywhere on the World Wide Web or even to another spot on your current webpage, or it might download a file that the link is connected to. This file might be a text, sound, graphic, video, animation file or even an evil virus! When you click on a link you are web surfing or just surfing. A hyperlink is sometimes called a Hotspot and there are four basic types: 1 Text 2 Graphic Usually underlined with a blue font colour but this can be changed using CSS. It may change colour/style and even shape using advanced CSS 3 code when clicked on. Outlined in a frame or in a button shape. When you run your cursor over a graphic link, the URL appears in the status bar at the bottom of the browser window. 3 Image Map A graphic or image with multiple links depending on which part of the graphic or image is clicked. 4 Animated, Highlighted, Pop-Down Menus, Scrolling Menus, Animated Buttons etc. These are normally written in a website programming language called JavaScript. (You may be interested in taking a JavaScript coding course at SPAN sometime in the future if enough people want to enrol in it.) Quite often, a hyperlink is a link to another one of your webpages that is also located in the same directory or folder as the current page that you are looking at and in this case the grouping of webpages is called a Website. The first page is called the Homepage and it contains links to the rest of the site. Some servers require you to name your homepage with their default file name of index.htm or index.html however this is not always the case. Many servers require you to name your homepage with their default file name of index.php. PHP is a server-side website programming language that runs on a web server. It produces HTML5/CSS 3 webpage code from PHP code and then sends that code from the web server over the internet to user s computers. If your server requires you to have a homepage with a.php extension then all you have to do is change your homepage file extension from.html to.php just before you upload it to your server. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 4

5 If your homepage code is only in HTML5 or CSS 3 code then the PHP processor does not need to make any changes to it. If this is the case then the PHP processing server will automatically change the.php extension back to.html when someone around the world downloads your homepage to their computer. Consult with your ISP if you are not sure about what type of file extension you should use with your homepage. (You may be interested in taking a PHP website coding course at SPAN sometime in the future if enough people are interested in enrolling in it. You would have to complete the Levels 3 and 4 Web Development courses first.) Nowadays when you surf to the homepage of a website, you do not see the index.html part of the URL (or website address) in your browser s address bar because the host server automatically opens up the default file in the URL which is usually index.html Question 3/ What is a URL? Give details. This week and over the next couple of weeks you will be creating a website made up of four webpages: a homepage with links to three webpages: i. Your brave-tin-soldier.html webpage. ii. Your webpage containing some text from one of the following authors: L. Frank Baum, Edgar Rice Burroughs, Lewis Carroll, Jack London, Herman Melville, Jules Verne or H. G. Wells. iii. Your emily-dickinson.html poetry webpage. Before we can continue, make sure that you have all three webpages in your SPAN student drive space. If your are missing any one of these files then let Mr Kruyer know. First you will create the skeleton of the homepage. The following is a layout diagram of what your homepage could end up looking like: Navigation section Properties: position: absolute top: 1em left: 10% width: 80% Transparent background, no borders, links spaced out evenly Main section Properties: position: absolute top: 5em left: 10% width: 80% Transparent background, no borders, centered heading, left-justified text horizontal lines centered and 80% of available block space Open up your folder from the SPAN student drive and locate your template.html file. Using Notepad++ open up template.html C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 5

6 Save this in your SPAN student drive folder as index.html Alter the <title> </title> section to: Classic Texts & Poetry Include the following internal style sheet. To help with your layout borders are showing in each section: <style type = "text/css"> body background-color: rgba(135,234,0,0.3); div.navigation position: absolute; top: 1em; left: 10%; width: 80%; border: 1px solid orange; background-color: transparent; padding: 1em; div.main position: absolute; top: 5em; left: 10%; width: 80%; height: 2em; border: 1px solid blue; background-color: transparent; h1 p hr </style> font-size: 1.4em Tahoma, Arial, sans-serif; text-align: center; color: #D8005F; color: brown; font: 1em "Courier New", "Times New Roman", serif; color: cyan; width: 80%; height: 2px; C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 6

7 Also include the following in the <body> </body> section: <body> <div class = "navigation"> <p>navigation section</p> </div> <div class = "main"> <p>main section</p> </div> </body> Save the additions to index.html The code above contains two divisions each given a class name. Each of these divisions is positioned to produce two blocks as shown in the previous layout diagram using the techniques you learnt in last week s lesson. View index.html in a browser to make sure that it is set out correctly. If there are any layout problems or other bugs then fixed these and resave your webpage. Before you insert any links in the navigation section I want you to add some text in the main section. Within the main division add the following: A heading something along the lines of Classic Authors but I am sure you can come up with something more original. A centered horizontal line underneath the heading A paragraph or more about why you enjoy the three authors featured in your website. Next, just so that you have sufficient text so that you are forced to use the scroll-bar to read it all, I want you to add paragraphs of Lorem Ipsum dummy latin text to fill more that one maximised browser window. (You may need to paste the same text over and over a few times.) Another horizontal line at the end of the webpage. Save your additions. View index.html in a browser to make sure that your text and horizontal lines have shown up. You will be using the same layout as index.html for all four of your webpages. The navigation section will be the exactly same for all four webpages. This means that the navigation section will contain four links rather than three because one link will be a link to index.html. This link is usually placed first in a list of links. To insert a link in a page, the page that it will link to must already have been created. This is why I got you to check that all three webpages that you had previously created are still there in your SPAN student drive space. To use an anchor as a link you include a href = " " attribute in the anchor tag as shown: <a href = " "> </a> href is short for hypertext reference and the code placed between the double-quotes is the URL of the webpage that you want to jump to when you click on the link. This can be either an absolute webpage address or a relative webpage address: C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 7

8 An absolute webpage address is a full web address starting with For example the SPAN homepage web address is: and so a link from your index.html to the SPAN homepage would look like this: <a href = " </a> with the three dots between opening and closing tags replaced with text or image code. When linking to a homepage on a server using absolute addressing, you usually do not have to include the index.php or the index.html part of the URL. This is why I have not included it in the SPAN website address. You could use and this would work too. A relative webpage address is an address to a file that is saved on the same server or computer drive space as the current webpage. For example, if you have a webpage stored somewhere in your computer s drive then you can link to it from any other webpage or other types of files that are saved in your computer. These files do not necessarily have to be in the same folder as the current webpage. A link from index.html to another file called brave-tin-soldier.html which are both stored in the same folder would look like this: <a href = "brave-tin-soldier.html"> </a> with the three dots between opening and closing tags replaced with text or image code. When you click on a link to go to another webpage and then hit the BACK button on your browser s tool bar, you are returned back to your original anchor point in your original webpage. The three dots between the opening and closing anchor tags are replaced with either text that the user will see on their screen and can click on, or with the code for an image or an animation. Look at the following three examples: Eg 1. <a href = "brave-tin-soldier.html">hans Christian Andersen</a> This uses relative addressing and will produce a text hyperlink to a document called brave-tinsoldier.html The hyperlink will be blue in colour and will be underlined. The text for the hyperlink is Hans Christian Andersen. When you click on this link and before letting go of your mouse button, it may turn red before going to brave-tin-soldier.html. An active link is the terminology used whilst pressing down on a link. When you click on your browser s back button and surf back to your original webpage you will probably find that your original link is now purple indicating that this link is now a link that you have clicked on before. This is called a visited link. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 8

9 Eg 2. <a href = " & Ernie s webpage</a> This uses absolute addressing and will produce a text hyperlink to a document on the World Wide Web called bert-and-ernie.html. When using this type of link, you must include the part before the www part of the website address or else the link will not work! The linked page is stored on an Australian web server called some_isp. You know the webpage belongs to a company because the website address includes.com in it. You know it is an Australian website because the website address includes.au in it. As before, the hyperlink will be underlined, blue before clicking on it and red while clicking on it and purple when you return to that webpage. The text for the hyperlink is Bert & Ernie s webpage. Eg 3. <a href = "about-bert.html"> <img src = "images/bert.png"> </a> This link code uses relative addressing. Since there is image code rather than text between the opening and closing anchor tags, it will result in a graphic hyperlink to a document called about-bert.html. The hyperlink graphic also uses relative addressing. The graphic is stored in an images folder and is called bert.png. This means that the images folder, the linking webpage (called about-bert.html) and the original webpage containing the link are all stored in the same place. There will be a blue border around the image to indicate that it is a link. You can remove or change the border by using CSS code as demonstrated in the following code which uses in-line CSS: <a href = "about-bert.html"> <img src = "bert.png" style = "border-style: none;"> </a> The image code above should include two extra attributes: width and height. You would not include an alt attribute because it is treated as link code rather than image code. Adding an alt attribute could lead to confusion for a vision impaired person. Question 4/ Explain the difference between links that use absolute addressing and links that use relative addressing? When you move your cursor over a link, your cursor will change from an arrow to a hand. Next we add our links. The first will be a link to index.html If you have closed index.html open it up using Notepad++ Insert a text hyperlink in the <div class = "navigation"> section of this document using the method shown in Eg 1 above as follows: 1. Remove the navigation section text but leave the opening and closing paragraph tags there. 2. Between the opening and closing paragraph tags type your anchor code and include a hypertext reference attribute: 3. Add the path to index.html as follows: <p><a href = ""></a></p> <p><a href = "index.html"></a></p> C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 9

10 4. Add sensible link text such as Home as follows: Save your addition to index.html <p><a href = "index.html">home</a></p> View index.html in a browser. Before you click on your link note its text colour. It should be blue. It should also be underlined indicating that it is a link. Click on your link. You may think that nothing has happened because the link takes you to the index.html page however now it should be purple indicating that it is a visited link. It should still be underlined. Next you will add a link to brave-tin-soldier.html 5. Immediately after the link to your homepage and before the closing paragraph tag add a space to separate the links and then type your anchor code and include a hypertext reference attribute: <p><a href = "index.html">home</a> <a href = ""></a></p> 6. Add the path to brave-tin-soldier.html as follows: <p><a href = "index.html">home</a> <a href = "brave-tin-soldier.html"></a></p> 7. Add sensible link text such as Hans Christian Andersen as follows: <p><a href = "index.html">home</a> <a href = "brave-tin-soldier.html">hans Christian Andersen</a></p> Save your addition to index.html View index.html in a browser and make sure that your Hans Christian Andersen link works by clicking on it. It should take you to your brave-tin-soldier.html webpage. Click on your browser s back button. You should be back at index.html Repeat steps 5, 6 and 7 above for a link to your emily-dickinson.html webpage. Save your addition to index.html View index.html in a browser and make sure that your Emily Dickinson link works by clicking on it. Repeat steps 5, 6 and 7 above for a link to your webpage about one of L. Frank Baum, Edgar Rice Burroughs, Lewis Carroll, Jack London, Herman Melville, Jules Verne or H. G. Wells. Save your addition to index.html View index.html in a browser and make sure that your link works by clicking on it. At the moment the only way to get back to your homepage is by clicking your browser s back button. If your website was left like this it would be considered quite amateurish. To overcome this you need to have a navigation section at the top of each of your four webpages and you will find out how to do this and more next week. Question 5/ Explain the difference between a webpage and a website. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 10

11 Back up everything that you have done in this class to your USB stick. You should do this at the end of every class that you take here at SPAN so that you have a backup of your files and so that you can revise what you have covered at home over the coming week. Have you been saving your work to the SPAN student drive every 10 minutes? Have you backed up all of your work at the end of this lesson to your USB thumb drive including your images folder? Show your webpage to Mr Kruyer for assessment. Also hand in the answers to the questions next week. Due Dates: All questions from this task and your four page website should be completed by Thursday 25 th September C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task11\TYHTML11.docx Page 11