Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3

http://www.gerrykruyer.com Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3 In this task you will continue working on the website you have been working on for the last two weeks. This week you will find out how to format your anchors using anchor pseudo-classes and turn them into buttons. You will also ensure that you include images of each of your three authors in their webpages and format each of them in an identical way using your external style sheet. Before you start this task properly: Open your index.html webpage from the SPAN network folder to make sure that you can navigate to all linked webpages. They should all be formatted in exactly the same way because you removed all internal CSS code. Instead you had applied an external style sheet to all four webpages. If you are missing any webpages then get them from the Week 5 Resources link in my website. You will need to rename them. If you have not updated your template.html file last week then get this from the Week 5 Resources link in my website. Open index.html using Notepad++ to refamiliarise yourself with how the link to your external style sheet was made. Also refamiliarise yourself with how the four text links in your navigation section were created. Open classic-authors.css in Notepad++ to remind yourself of the CSS code used on your four website pages. If you are missing this then get it from the Week 5 Resources link in my website. You will need to rename it including the extension. External Style Sheets and Webpage File Naming Conventions The purpose of creating webpages and indeed whole websites is to place these pages on an ISP server so that others around the world, using the Internet, can view your website. On your computer you are running your favourite browser: MS Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Apple Safari, Maxthon Cloud Browser etc. These browsers are run using your operating system: MS Windows 8.1, MS Windows 7, MS Vista, Apple Mac OS-X, Linux Ubantu etc. Other people around the world may very well be using a different type of web browser and operating system to the one you use. If you want all web surfers to be able to view your webpages then you need to follow eight simple rules when naming your external style sheets, webpages, folders, your graphic files and other files: 1. File names must begin with a letter of the alphabet. 2. Do not include spaces in your file names! 3. A file name may only be made up of letters, numbers, dashes or the underscore symbol. 4. For SEO purposes avoid the use of the underscore symbol. 5. Use the dash to separate words in a file name. 6. Use only lowercase letters. 7. File names should be no more than four or five words in length and no more than 50 characters. 8. A file name should relate to the contents of the file. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 1

Also do not forget to add the file type extension when using Notepad++ or Notepad:.html or.htm.css for your webpages for your external cascading style sheets and when you are ready to up-load your homepage to a server:.php,.html or.htm for your homepage extension on loading it up to a web server. As stated earlier this is dependent on your web server rules. File names should remind you of what is contained in that file. For example qwerty.css would not be a suitable name for an external style sheet if it were being used to format a webpage on cats. Perhaps a better name for that file would be cats.css For more on web file naming conventions: http://howto.websitespot.com/file-naming-conventions/ Hypertext Link Colours Normally a link in a webpage is blue before you click on it, red whilst you are clicking on it and purple after you have clicked on it and then revisited that page. You can change your hypertext link colour from blue to any other colour by using CSS code using what are known as pseudo-classes. There are many types of CSS 3 pseudo-classes (and pseudo-elements) which will be covered in an advanced SPAN course in HTML5/CSS 3 but for now here are five pseudo-classes that you will find useful when applied to CSS link code: a:link a:visited a:focus a:hover a:active This changes the appearance of webpage links that have not been clicked on. This changes the appearance of visited links. This changes the appearance of a focused link. (Using the Tab key to navigate to that link.) This changes the appearance of a link when you move your mouse over the link. This changes the appearance of a link when you click down on it without letting the button go. Important to know: If you use more than one link state at a time in your CSS code then they must appear in the following order: :link, :visited, :focus, :hover and :active. (Pseudo-class mnemonics: Star Wars fans: LoVe Frogs Happy Lord Vader s Former Handle Anakin) C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 2

Look at the following CSS code to see how these pseudo-classes are used noting the order that they are placed: a:link background: yellow; color: green; text-decoration: underline; a:visited background: orange; color: lime; text-decoration: overline; a:hover background: red; color: purple; text-decoration: underline overline; a:active background: purple; color: red; Include the four CSS pseudo-classes (:link, :visited, :hover, :active) shown above placing the code at the end of your external style sheet. Alter the colours if you want to but leave the text decoration as it is. Save the changes to classic-authors.css Now view one of your sites webpages in a browser. Look at how the links are decorated. Move your mouse over your links but do not click on them yet. See what happens to the way the links are decorated when you move your mouse over them. Now click down on a link but do not let go of the mouse button keep it down. You should be able to see the :active pseudo-class styling. Now click on one of your links and then go back to the index.html webpage and look at how this :visited pseudo-class is styled. Question 1/ Of the five link based pseudo-classes that you have learnt so far, what order should they be placed in your CSS 3 code if more than one is used? C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 3

Buttons You can make your text links look like clickable buttons that change depending on their state (never visited, visited, hovered over with your mouse, made active by clicking down not letting go of your mouse-button). In previous tasks you created borders, added padding and added margins around blocks such as images and positioned DIV elements. Now that you know how to apply pseudo-classes on links and what you already know about borders margins and padding you will apply this to add interesting borders around each of your pseudo-class links. Follow these general points: Set the text-docoration to none as this just does not look good when combined with added borders. Use the border: shortcut method in your CSS 3 code to keep your code as brief as possible. Border colours can be any suitable colours you like with a border width of 4 or 5 pixels wide. Do not choose the same border colour as your background colour. Set buttons to have an outset style border when the cursor is not over a button. When clicking down on any button set theborder to look like an inset border When hovering over a button but not clicking down on it give the button a solid border. Need some big hints? Hint 1/ Add the following line to the pseudo-class :link code at the bottom of your external style sheet: a:link background: yellow; color: green; border: 4px outset brown; Hint 2/ Add the following line to the pseudo-class :visited code at the bottom of your external style sheet: a:visited background: orange; color: lime; border: 4px outset brown; Hint 3/ Add the following line to the pseudo-class :hover code at the bottom of your external style sheet: a:hover background: red; color: purple; border: 4px solid black; C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 4

Hint 4/ Add the following line to the pseudo-class :active code at the bottom of your external style sheet: Save your additions. a:active background: purple; color: red; border: 4px inset brown; Refresh your website in your browser. You should now have links that look like buttons. Play with the buttons in your website to see how they look and work. Look closely at each of the four hints above and notice that in each of them there is duplication of the property/value. Your CSS 3 code can be made even shorter if you remove this repeated code from each of the four pseudo-classes and instead use the following below all of this code: a Any property/value pair placed between the curly brackets here is applied to all four of the anchor (link) pseudoclasses in your CSS 3 code and will definitely be applied to all four of them because it is placed after them in your CSS code. Place this CSS code underneath the four pseudo-class link states in your external style sheet. View your website buttons in your browser. They should operate and look exactly the same as before. Your buttons could be further improved by adding some padding between the button text and the border as well as adding a small margin to the right of each button. Add three or four pixels of padding to your anchor code and five pixels of extra margin space to the right of each button using the code shown below: a padding: 3px; margin-right: 5px; Save the addition to your CSS 3 code. View your website in a browser to make sure you like the changes. I think that the text size for all of your links could be increased slightly and changed to bold. Add code for this. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 5

If you think that your buttons could be further improved then make other alterations but remember to save your changes. If you want to add more links try adding two extra links in the navigation area: 1/ to SPAN s website ( http://spanhouse.org/ ) and 2/ to Mr Kruyer s website ( http://www.gerrykruyer.com/ ). For consistency you will have to add code for these two links to each of your website pages. Remember to save your changes. The added links should be styled in exactly the same way as your other four links. For consistency you want all of the webpages about the three authors to look the same. Each of your three author webpages should have an image of the author included in it and these images should be placed in the same position at the start of the first paragraph of text in the main division. You may need an image of Emily Dickinson in your images folder. You can get this from my website. Add image code for the image of Emily Dickinson at the very beginning of the first bit of text inside the first paragraph in the main division of your emily-dickinson.html webpage. Make sure that you are using width = " ", height = " " and alt = " " attributes in your image tag. Include the title = " " attribute as well for SEO purposes. View emily-dickinson.html in a browser to make sure that you can see the image of Emily Dickinson. Do not worry about the position of the image at the moment as you will fix this up in a moment. Also make sure your other two author webpages have their images placed in the same spot and all use the four attributes: width, height, alt and title. You want all of your images to float on the right. Add CSS code to your external style sheet to do this. Check out the position of your images. Hmm it would look better with a bit of a margin to the left and perhaps below your images. Also it might look better if you had an inset border of about 15 pixels thick with your own choice of border colour around each image. Add CSS code to your external style sheet to do these two things using a shortcut method if possible. View the images in your webpages in your website to make sure everything looks fine so far. Add a mountboard effect around your images by including some padding. Colour the mountboard to whatever colour you like by including an image background colour. Save the addition to your CSS 3 code. View your website in a browser to make sure you like the changes. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 6

Your four webpages should look similar to the screen shots below. (You may have added two extra links.) Bonus activity: Include CSS anchor code in your external style sheet so that each link is styled in some way when you focus on it when using the Tab key. Hint: Remember that the code must be placed in the correct order in relation to your other anchor pseudo-classes. Back up everything that you have done in this class to your USB stick including any additions to your css file and images folders. 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 drive space 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 and css 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 9 th October 2014. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task13\TYHTML13.docx Page 7