11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer http://www.gerrykruyer.com TEACH YOURSELF HTML5 & CSS 3: Week 14 - Anchors Part 5 In this task you will continue working on the website you have been working on for the last four weeks. As part of this you will find out how to further style your graphic links section, find out how to add a link at the bottom of a webpage that takes you back to the top of that webpage. If there is time there you will also get an introduction to website hosting. Before you start this task properly: Open index.html webpage from your SPAN student folder to make sure that you can navigate to all linked webpages. These should be an image in every webpage except the homepage and each link should function like a button. All images, links and general page formatting for all four webpages should look similar because you removed all internal CSS code and instead applied an external style sheet to all four webpages. Your three graphic links should become partially transparent when you hover over them. If you are missing any files including the finished webpages from last week then get them from the Week 14 Resources link in my website. Open classic-authors.css in Notepad++ to remind yourself of the CSS code used on your four website pages. As we are approaching the end of this course it is a good time for some CSS revision: a. Change the background colour of the entire website to #C60 Note: #C60 is the shortcut code for #CC6600. If all three hexcode numbers are repeated you can use this shortcut method. b. Set H1 heading colour to #AA4D00 and the background colour to rgb(230, 206, 196) c. Include a dark blue solid border that is one pixel thick on your horizontal lines. d. Have the small background image that is shown on the right tile down the right side of each webpage in your website: (Download image from website: Week 13 resources images right-bkg.png) e. Include CSS code for the thumbs-section of your home page so that when you hover over any part of this section the border of the thumbs-section changes to gold inset and three pixels thick. f. Also include CSS code for the thumbs-section of your home page so that when you hover over any part of this section the squiggle image that you created in TYHTML5 & CSS 3 Week. 4 appears repeated over your thumbnail section. When hovering in the thumbs block but not on any of your three thumbnail images you should be able to see the squiggle image repeated around the thumbnails. When you are on a thumbnail image you should be able to see the squiggle repeated under the image because it is 50% transparent. g. Set the button text colour to always be set to lime no matter which pseudo-class code applies. (Hint: Take the colour out of each pseudo-class and add the lime colour in the general anchor code section.) h. Set the button padding to 6 pixels. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 1 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer i. Add a gradient background to your :link and :visited buttons. Add a flipped version of the gradient for your :hover buttons. Add a solid background colour for the :active state. The screen shot below shows the cursor hovering over the Emily Dickinson button. To create this effect follow these six steps and two extra points: Step 1. Open either Adobe Photoshop, Adobe Illustrator or PaintDotNet. You will be using one of these to create the two gradients. Each will be a flipped version of the other as shown on the right: and Step 2. Set your image size to 14 px x 50 px and use web resolution: 72 pixels per inch. Step 3. Photoshop: Set Color Mode: RGB colour; Background Contents: Transparent. Step 4. Set the primary/foreground to your chosen colour. Set the secondary/background to white and then setting the alpha value to zero as shown (using PaintDotNet) on the right: Step 5. Use a gradient tool to create one of the images. One end of your image should be solid colour and the other end fully transparent. Step 6. The other image is created by flipping the first image on the vertical. The solid colour for the :active pseudo-class should not use a background image. Use RBGA code, HSLA code or a colour name to optimise your transition time. The colour should match the colour in your gradient. You can use supplied backgrounds from my website if you like (btn-back1.png, btn-back2.png). Save your additions. View your three author webpages to make sure that all of your additions have been successfully applied. Your homepage should look like that shown on the right when hovering your mouse cursor over the Emily Dickinson button. When hovering over the Emily Dickinson thumbnail the homepage looks like that shown on the bottom-right with the thumbnail semi-transparent and the squiggle showing through and around the thumbnail. When your cursor is inside the thumbs-section block but not over a thumbnail then you should be able to see your squiggle image inbetween your three thumbnails. When you scroll down in your homepage the thumbnail graphic links should not move. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 2 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer In the advanced level web development course you may learn how CSS 3 code can be used to generate gradients without having to use separate image/illustration software. Applying Psuedo Class Styling on Tags other than Links You have already applied pseudo-class styling to your links/buttons. If you are using an up-to-date version of a web browser then you can also apply the CSS 3 :hover and :active pseudo-classes to other HTML5 elements. Try adding the following CSS code in your external style sheet just after the styling for your paragraph changing the colour if you like: p:hover { color: green; } Save the changes to classic-authors.css View your website pages in in a browser moving your cursor over the paragraphs. Your paragraphs should change to a green text colour or what ever colour you chose when hovering over them provided you are using an up-to-date browser. You could also use this technique on headings, spans, divs, blockquotes, anything to do with the box model such as border and background colours and even horizontal lines. Try using :active instead of :hover on your paragraphs and add a dark blue background colour to your paragraph attributes/value pairs. Save your additions. View your website in a browser. Move your cursor over a paragraphs and click your mouse-button down on it to make sure your :active pseudo-class CSS attributes/value pairs are being applied. Give your homepage graphic links section an orange background colour and yellow inset border when you hover your mouse over this section. Save your additions. View your homepage in a browser. Move your cursor over the graphic link section to make sure your :hover pseudo-class works. The :hover and :active pseudo-class effect can be a bit annoying when not used with links. This could even be considered unprofessional! My advice is to use these cautiously when not used with text and graphic links. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 3 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Using Anchors to Name Spots, Words and Images You can get a computer to remember spots, words or images in webpages. To do this you give each spot, word or image a unique name. Once you have named a spot, word or image in a webpage then you can use a link to jump to it using any of the four types of hyperlinks (text, graphic, image map or animated). To name a spot, word or image we use the anchor point code that we have already seen in this task but this time use the attribute name = "…" as shown in the following example: <a name = "start">Point 1</a> Here, the text “Point 1” has been given the name “start” and this data is stored in the computer’s RAM (RAM = Random Access Memory). Until you shut down the computer, the computer’s RAM will hold this information. With this data stored in RAM you could then create a hyperlink from some other point in a webpage to this point as shown in the example below. Note: When you use a hyperlink to surf to a named point you need to include the # symbol immediately before the name as shown below: <a href = "#start">Skip to first point. </a> Notes: 1/ The eight rules for naming anchor points are exactly the same as the rules for naming your external style sheets: i. Anchor names must begin with a letter of the alphabet. ii. Anchor names must only be made up of letters, numbers, dashes or the underscore symbol. iii. Do not include spaces in your anchor names! iv. For SEO ranking reasons avoid the use of the underscore symbol. v. Use the dash to separate words in an anchor name. vi. Only use lowercase letters - unless you do not care about your SEO ranking. vii. Anchor names should be no more than four or five words in length and no more than 50 characters. viii. Anchor names should relate to the context that the anchor is used for, they should be brief and specific to their use for SEO purposes. Use sensible anchor point names that make sense to you. (Other webpage developers should also be able to understand the purpose of your anchor names just by reading their names.) 2/ The opening and closing anchor tags do not need to have any text between them at all – this can be left unfilled as follows: <a name = "start"></a> 3/ Named points are case sensitive. This means that you have to make sure that your uppercase and your lowercase letters in the < a name = "…"> and < a href = "#…"> anchor tags exactly match each other. (refer to point 1vi above) If you have closed index.html in Notepad++ then open it up again. Between the opening <body> tag and the <div class = "navigation"> section place: <a name = "start"></a> on a line on its own. This is the very top of your homepage and it makes this code easier to find if you need to make changes later. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 4 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Next you will be creating a link that is placed using fixed positioning somewhere on the left of the homepage so that if a user of your page scrolled to the bottom of the page then by clicking on your link they would be taken back to the top of that webpage. At the very end of the <div class = "main"> … </div> section just before the </body> tag insert the following code to make a new division section: <div class = "up"> <p> <a href = "#start">Top</a> </p> </div> Save your addition. Next add the following to your external style sheet to position the link you just added. .up { position: fixed; top: 400px; left: 10px; background-color: transparent; } View index.html in a browser to make sure that everything looks fine. Scroll to the bottom of your homepage to make sure that your new link is fixed on the left and when you click on it your are taken back to the top of the homepage. There is an easy way to style this new link so that it uses exactly the same pseudo-class styling as your other navigation buttons. See if you can figure out how to do this. (Speak to Mr Kruyer if you want some help here.) Your homepage should now look like that shown on the right: Finally see if you can add your Top button to the other three webpages in your website. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 5 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Question 1. a) What does RAM stand for? b) What does ROM stand for? c) What is the difference between RAM and ROM? Question 2. When you read that something typed on computer is case sensitive what does this mean? Question 3. 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? If you have got this going then give yourself a pat on the back, jump up from your seat and shout out “Yahoo, I did it!” or nowadays perhaps “Google, I did it!”. Comments As a general rule you should be placing appropriate comments explaining throughout your your lines of HTML5 and CSS 3 code. Generally web developers place HTML comments around division blocks. The comments give brief details about what they do. This is shown in the code shown on the right for the navigation, thumbnails and main section: Remember: If any code is difficult to understand then add comments that explains what it does and/or how it works. Give as much detail as possible so that when in the future there is a need to make alterations to the website then it is easier for you, or anyone else working on it, to follow your logic. Place some useful comments in your HTML5 code. Save your additions to index.html and your other webpages. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 6 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Place comments in your external style sheet – you left a few blank lines for comments at the top. Add your name, date created and some sort of copyright notice. If you worked for a business then the company name would be added to the comments here too. I like to organise my style sheet code into sections for particular types of CSS code such as text (paragraphs, headings etc), navigation including navigation buttons, other types of links (page-up buttons, other links), image code etc. I delineated these sections with comments detailing the purpose of each section. This is especially important when you build long and involved style sheets. You should do this too! Your style sheet should be organised into sections that make sense to you. Add extra lines of comments at the start of each section of your CSS code. Save your additions to classic-authors.css Using a browser view your changes to make sure you cannot see the comments within the webpage. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 7 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer The Internet, Domain Names, IP addresses and Website Hosting The internet is really a whole lot of smaller computer networks (LANs, MAN's and WAN's) across the world in more than 140 countries linked together. World Wide Web exchange servers link these smaller networks together. You get access to these WWW servers through Internet Service Providers or ISP’s and they will charge you a monthly fee for access to the Internet. Watch a video on how the internet works. As you know, you need a browser on your computer (Maxthon, Explorer, Safari, Firefox, Chrome, Opera etc.) to view pages sent to your computer from another computer connected to the internet elsewhere in the WWW. In order to pass information between computers connected to the internet, each computer needs to have its own unique address on the Internet; just as you have you have your own unique home address: Eg Mary Brownside, 54 Happy Street, Preston, Victoria, Australia. A computers address is called its Internet Protocol address or IP address and this is a group of numbers separated by dots and the order of the numbers is a bit like writing your address in reverse order all on one line as shown below: Australia.Victoria.Thornbury.64_Clyde_Street.Kruyer.Gerry Country State Suburb Street Surname F-Name The Post Office probably would get a letter delivered to your home if it was addressed in this way and similarly webpages are delivered to your computer over the Internet using IP addresses. A typical IP address looks like this: 210.11.182.15 To find out the IP address of a computer connected to the Internet go to: http://www.whatismyip.com/ Question 4. What is the IP address of the computer you are currently using? Question 5. What is the IP address of the person using a computer nearest you? Notes: 1/ If the answer to the two previous questions was the same then it is because you are both using a proxy server. 2/ Try this at home to see what your IP address is there. It will be different to the IP address here. You can use IP addresses to navigate your way to particular computers on the internet but people find it difficult to remember sets of numbers. People are much better at remembering words and for this reason domain names were invented. A domain name is a unique name of a computer anywhere on the Internet that distinguishes it from all other computers using the internet. Each unique IP address matches up with a unique domain name. When you type in a website address, the domain name part of the address goes to a Domain Name Server or DNS. This server matches the domain name with an IP address and returns this to your browser. Your browser then tries to connect to this IP address. (It might not find that website address because the computer storing that webpage might be down or the owner of that website might have taken it down temporarily!) C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 8 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Some people think that domain names are website addresses but they are wrong! The domain name is only the bit after the http://www. part of a website address. For example SPAN’s website address is www.spanhouse.org/ however SPAN’s domain name is spanhouse.org and no other website in the world has that domain name. Question 6. Why can’t two different websites have the same domain name? Question 7. What is the website address of Google Australia? Question 8. What is the domain name of Google Australia? If you own a business and you want a website for it then you first need to get your own unique domain name. Go to www.google.com.au Search for “domain names” clicking on the these options: English, Australia, past year. Question 9. button, choosing “Advanced search” then choosing Find out how much it costs to get an Australian domain name for a made-up business of your own choosing. Eg plants-for-you.com.au Note: I want the cheapest price you can come up with! Once you have a domain name you then need to find a host server to store your website. This does not necessarily have to be with the same company that found you your domain name. Go to www.google.com.au Search for “website hosting” with the same criteria as in the previous search. Question 10. Find out how much it costs to get an Australian server to host your businesses website. Notes: 1/ 2/ I want the cheapest price you can come up with! What features do they offer you? Eg How much server space? Do they offer you webbased e-mail? How A Google Search Works Watch a Google video on how a Google search works. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 9 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Advertising Your Website Before you begin to advertise your site, you must ensure that: 1. Everything in your website looks and works perfectly. Testing is extremely important and should be extensive. Test your pages on both Apple computers using Safari and PC’s using at least Google Chrome, Mozilla Firefox and Microsoft Explorer. 2. You have used comments throughout your HTML5, CSS 3, JavaScript, MySQL, PHP, Java and XML code. (You will cover more of these webpage scripting languages if you take other web development courses at SPAN.) 3. You have included sensible and brief webpage titles in each webpage. 4. You have only used the six heading tags <h1> size down to <h6> size for headings and not for the size of text in paragraphs. Each webpage should include only one <h1> tag and then use subheadings. No matter what size heading, all heading should be as succinct as possible. 5. All of your <img> tags include appropriate alt = "…", width = "…" and height = "…"attributes. 6. If you or your company requires a copyright on your page then you should get this organised first. 7. You have added appropriate meta tags such as description. (This is part of the intermediate web development course at SPAN.) 8. Your webpage controls spiders appropriately. (This is part of the intermediate web development course at SPAN.) Question 11. List two ways in which you should test that your websites are working correctly when they are stored on a server. The next step to perform is to add your site to as many of the different search engines listings as possible. You do this because you can never be sure when a spider from a particular search engine company might visit your site to update their listings. Note: There is occasionally a cost involved with listing your website with a search engine. Listing with Google is free. The URL’s for listing your website with Yahoo! is: http://www.yahoo.com/docs/info/include.html There are many search engine companies and the more of them that you list your website with the better for you because more people will find out about what you have to say or sell. Find out how to list your websites with search engines. What is Google Data Centre? (Watch the video) Go to the Google Data Centre website: http://www.google.com/about/datacenters/ and explore for yourself. Question 12. What is the URL for Google? Question 13. Write down details about how you could list your website with Google. Question 14. Where is the closest Google Data Centre to you? C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 10 11 October 2014 Beginner Level HTML5 / CSS 3 Written by Gerry Kruyer Once you have set up a website you should send an e-mail to all of your friends, business partners and associates letting them know about you and your business. You could pay a company to advertise your page. You should also set up a Facebook/Google+ site etc. Include your URL and any other details on all of your stationary such as letterheads and business cards. There is a lot more for you to to learn concerning links, navigation, creating beautiful buttons and external style sheets using HTML5 and CSS 3 but you are still covering just the basics. You will leave things here this week and get back to these topics and much more in the intermediate and advanced HTML5 courses at SPAN. Back up everything that you have done in this class to your USB stick including any additions to your css 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 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 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 23rd October 2014. C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx Page 11
© Copyright 2024