Teach Yourself HTML5 & CSS 3: Level 2 - Week 1 Task 9 Foreground Images

Size: px

Start display at page:

Download "Teach Yourself HTML5 & CSS 3: Level 2 - Week 1 Task 9 Foreground Images"

Osborn Evans
6 years ago
Views:

1 Teach Yourself HTML5 & CSS 3: Level 2 - Week 1 Task 9 Foreground Images In the Level 1 course in weeks 3 and 4 of TYHTML5 & CSS3 you looked at inserting images in the background of a webpage. This week we will investigate embedding images in the foreground of a webpage. We will also cover horizontal lines in detail. I think it is important to stay organised so if you have not already done so create a Level 1 folder inside your SPAN server space and then Place all of your Level 1 course files and folders into your Level 1 folder. Create a Level 2 folder inside your SPAN server space for all of the files and folders that you will create in this Level 2 course. Create an images folder inside your Level 2 folder. Make a copy of your Level 1 HTML template and place it in your Level 2 folder. (You can get a copy of the last Level 1 version of template.html from my website if you have misplaced or misfiled your copy.) It should be set up like this: <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>describe your webpage here in no more than 4 words</title> </head> <style type = "text/css"> </style> <body> Your content goes here </body> </html> Points to remember: 1/ Never change this template.html file unless I tell you to. (Very occasionally we will be making additions!) 2/ The template.html file saves you some typing time whenever starting a new webpage. 3/ When opening template.html in Notepad++ (or whatever webpage creation application you prefer to use) as a starting point for a new webpage, immediately save it with a different name; a name that reminds you of what that webpage is about. 4/ Don t forget your webpage file naming rules that you learnt in the Level 1 course. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 1

2 Internet File Naming Rules If you want all people around the world to be able to view your webpages, and also for SEO purposes, follow a few simple rules when naming your webpages, your folders, your images and any other files: File names must begin with a letter of the alphabet. A file name may only be made up of letters, numbers, dashes or the underscore symbol. Do not include spaces in your file names! Avoid the use of the underscore symbol. Use the dash to separate words in a file name. Use only lowercase letters. File names should be no more than four or five words in length and no more than 50 characters. A file name should relate to the contents of the file. The homepage of a website stored on a server should generally be named index.html or index.php Foreground Images Before you start the rest of this task properly: Choose one of the seven authors from: Find a colour or colourised image of your author using Google Images. (You can also get your author s image from Mr Kruyer s website). Save the image in your Level 2\images folder. Rename the image with a sensible name making sure that the file extension does not change. Embedded Images To insert an image (or animation) into the foreground of a webpage you use the <img> tag. As you would expect the corresponding closing tag is </img>. Since you do not place anything between the opening and closing image tags you can shorten <img></img> to <img>. The <img> tag can include a number of attributes and we will deal with each of these separately. You already know from Level 1 TYHTML5 & CSS 3: Week 3 that in coding webpages you can use four types of image files:.png,.jpg,.svg and.gif. To include any one of the four types of image files in your webpage you tell a browser where the image is stored and the name of the image by including the src = " " attribute inside the image tag as shown below: <img src = " "> where the dots are replaced with the image source code. The image source code can use either of two types of locations: a. ABSOLUTE ADDRESS LOCATIONS b. RELATIVE ADDRESS LOCATIONS C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 2

3 We will look at both types of address locations by using examples. a) Absolute Address Locations: <img src = " This code means that: There is a.gif image called Emily_Dickinson that is stored in a directory called images. This images folder is inside a folder called poetry and this is stored on a computer (called a web server) located in America (because the.org has no country code after that so you know it is in the USA). The computer location or domain name is wiredforbooks.org. This is an internet address and is always written in lower case letters. The www part indicates to the browser that the file is a webpage found on the World Wide Web. The part indicates that you can download the image using Hypertext Transfer Protocol. Altogether, the code is called a Universal Resource Locator or URL for short. With absolute addressing you explicitly specify where on the World Wide Web the image is found. Question 1/ Question 2/ Question 3/ What does www stand for? What does.org stand for? What does.com stand for? Question 4/ a. What do the initials ISP stand for? b. What does an ISP do? Question 5/ Question 6/ Question 7/ What is img short for? What is src short for? Write the HTML code to produce an image called star.jpg in your webpage. This is stored in a directory called images that is stored on a computer somewhere in Australia and the world wide web address is C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 3

4 b) Relative Address Locations: Example 1: Example 2: <img src = "emily.png"> This code means that there is a.png graphic called emily that is stored in the same directory as your webpage code. <img src = "images/emily-dickinson.jpg"> This code means that: There is a.jpg graphic called emily-dickinson that is stored in a folder called images. That images folder is stored in the same directory as your webpage code. When we talk about relative addressing we mean that everything is found in the same folder or relative to the folder where the HTML code for the webpage is stored. The relative addressing code that you use to indicate that you go up one folder level from the webpage code is../ To go up two folders levels you use../../ and so on. You might use this if, for example, you ran a number of related websites on a server, each with their own folder but you had a single images folder for all of those sites as shown below: <img src = "../images/gadget1.png"> Question 8/ Briefly explain the difference between absolute and relative addressing. Open Notepad++ and then open your template file that you called template.html Save your webpage in your SPAN Level 2 folder naming it: task9-yi.html recall that yi is replaced with your initials. Change the <title> text to the name of your author. Within the <body> </body> section place a <h1> </h1> heading using the book title. Centre your heading using internal CSS code. Copy ten paragraphs of text (by clicking on <p> and sliding your mouse to 10) about your author from: (You can also get the text from Mr Kruyer s website). Place your ten paragraphs of text underneath your <h1> </h1> heading. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 4

5 Insert the photo of your author (which you saved in your images folder) somewhere in the middle of the second paragraph of your text using relative addressing. as shown in red coloured text below: <body> <h1>the War of the Worlds</h1> <p>and all about him--in the rooms below, in the houses on each side and across the road, and behind in the Park Terraces and in the hundred other streets of that part of Marylebone, and the Westbourne Park district and St. Pancras, and westward and northward in Kilburn and St. John's Wood and Hampstead, and eastward in Shoreditch and Highbury and Haggerston and Hoxton, and, indeed, through all the vastness of London from Ealing to East Ham--people were rubbing their eyes, and opening windows to stare out and ask aimless questions, dressing hastily as the first breath of the coming storm of Fear blew through the streets. It was the dawn of the great panic. London, which had gone to bed on Sunday night oblivious and inert, was awakened, in the small hours of Monday morning, to a vivid sense of danger.</p> <p>unable from his window to learn what was happening, my brother went down and out into the street, just as the sky between the parapets of the houses grew pink with the early dawn. The flying people on foot and in vehicles grew more numerous every moment. "Black Smoke!" he heard people crying, and again "Black Smoke!" <img src = "images/herbert-george-wells.jpg"> The contagion of such a unanimous fear was inevitable. As my brother hesitated on the door-step, he saw another news vender approaching, and got a paper forthwith. The man was running away with the rest, and selling his papers for a shilling each as he ran--a grotesque mingling of profit and panic.</p> <p>and from this paper my brother read that catastrophic dispatch of the Commander-in-Chief:</p> Save the addition to your webpage. View your webpage in a browser to make sure your ten paragraphs show up and your image has appeared in the middle of the second paragraph. Notice that the bottom of your image is aligned with the baseline of the text that it sits between. You will find out how to get around this next week. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 5

Open your image in Adobe Photoshop or Paint.

(I always set the sample size at the top of the screen to 5 x 5 Average). Paint.Net: Use the Color Picker tool to click on a major dark colour.

Photoshop or on the right side of the Colors box in Paint.Net.

Net Using CSS and your RGB colour code, set the background colour of your webpage body to this colour.

6 Open your image in Adobe Photoshop or Paint.Net and sample one of the major darker colours in your photo: Photoshop: Use the Color Sampler Tool which is under the Eyedropper Tool to click on a major dark colour. (I always set the sample size at the top of the screen to 5 x 5 Average). Paint.Net: Use the Color Picker tool to click on a major dark colour. Make sure the Colors window is open More>> button shown on the right: and click on the Note down the RGB colour code for this sample from the Info tab that pops up in Photoshop or on the right side of the Colors box in Paint.Net. In my image the R value is 81, G is 25 and B is 11 so the CSS RGB colour code is: rgb(81, 25, 11) Adobe Photoshop Paint.Net Using CSS and your RGB colour code, set the background colour of your webpage body to this colour. Now use the Color Sampler Tool to sample one of the major lighter colours in your photo like the skin and note this down. Using CSS and your RGB colour code; set the text colour of your heading and paragraph to this colour. Save your changes. Refresh task9-yi.html in a browser to make sure your ten paragraphs show up, your image appears in the middle of the second paragraph and your paragraphs are formatted as expected. Your webpage should look similar to that shown on the right: C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 6

Generally using colours from the main image in a webpage is a nice touch provided your webpage text still stands out. You will improve on this as you go through the rest of this lesson. Notes: 1.

7 Generally using colours from the main image in a webpage is a nice touch provided your webpage text still stands out. You will improve on this as you go through the rest of this lesson. Notes: 1. When placing images in a webpage it is best to keep your images fairly small for fast downloading into your user s web browser. 2. A user never wants to scroll across or down to see an entire image. 3. Generally if an image is larger than ¼ of the browser window space then it is way too large. 4. Always leave room for plenty of text without having to scroll down to see all the text and images. 5. There does not seem to be any standard size for images in webpages, however you do see some common sizes: 240 x 160 pixels is a very popular small format. Bigger images are usually around 460 pixels wide. You usually do not see anything bigger than this. Website design trainers/teachers will tell you to not go any larger than this. If you wanted to display a complicated graphic of some technical equipment or a scientific concept then perhaps I could see the need to go to a larger size say 800 pixels wide but otherwise you would not use this image size at all in a webpage. Thumbnails are usually 100 pixels wide. Square thumbnail are usually 75 pixels wide. Image Alternatives For Vision Impaired People Often when you are waiting for webpage images to download, you see a description of the image in its place. To do this you use the alt = " " attribute inside your <img> tag. For example, suppose we wanted the text "My dogs Bert and Ernie" to appear while waiting for the image of Bert and Ernie; the code would be: <img src = "max.png" alt = "My dogs Bert and Ernie"> It is always a good idea to supply the alt = " " attribute just in case there are problems with a browser finding your image. This is also a very useful attribute to add for people that are vision impaired - they get your alt image description on a Brail printer device instead of your image. There are also screen readers for the blind and these read out all of your text as well as the alt text in places where you are using an image. For SEO purposes keep your alt text brief and specific to the image. Include the alt = " " attribute with text that succinctly describes your image in your image code. Refresh your webpage in your browser. If you have a slow internet connection and look closely, you will see your alt text flash up before your image appears. If your document was loaded onto some server on the other side of the world then this would become more obvious as you would have to wait a little while for your image to download and while you are waiting you would see your alt text. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 7

8 Notes: 1/ I expect you to always include an alt = " " attribute in your HTML image tag code. This is also the recommendation from the W3C! 2/ If you really do not want any alternative text for reasons such as the image is only used for webpage beautification and is not really important then the W3C suggests you use alt = "" 3/ Image search engines such as Google Images use the alt text to catalogue your images. If you do not include the alt = " " attribute in your image tags then the SEO rankings for both your webpages and your images will be lowered. 4/ For SEO purposes give your images sensible names using the same rules that you are using to name your webpages. Horizontal Image Alignment At the moment my image is sitting three quarters of the way across from the left of the webpage but your image may be closer to the left or right edge of the webpage it all depends on where in the text you placed your image. With CSS you have control over where your image sits. For now we will only look at placing images on the left or right of the browser window. To place an image on the left or right of a browser window you could use either in-line styling which you covered last week or you could add a class attribute to your image and then use CSS code. Both methods use the float attribute. Look at the following in-line code: <img src = "images/herbert-george-wells.jpg" alt = "Image of H. G. Wells" style = "float: right;"> Here the image would be floated to the right side of the browser window leaving the text to flow around the image. Alter your image code to include the in-line style shown above. View your webpage in a browser. Your image should be on the right side of the browser window. Hmm This could look better. Place your image at the very beginning of the paragraph just after the <p> tag. Save and view in a browser. Ahh much better. Alter your image code to the following: <img src = "images/herbert-george-wells.jpg" alt = "Image of H. G. Wells" style = "float: left;"> View your webpage in a browser. Your image should be on the left. I think I prefer the image on the right so move it back there. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 8

9 How To Speed Up Downloading Of Webpages Containing Images In the old days when most internet users used dial-up, it was very important to have your webpage code optimised for a speedier download from your server. This is not as important nowadays with more people having a broadband internet connection, however there might still be people around the world that use dial-up so it is just as important to minimise download time as it ever was! Interesting Points: In 2014, 2% of Americans used dial-up at home, according to the Pew Research Internet Project. In contrast, 70% had broadband. (Ref: Read this article and the interesting comments below it. Look at the Australian statistics for dial up vs broadband from the A.B.S. What I find really interesting if you press the Play button below the graph: notice that not only are the dial-up rates going down but so are the Cable/Fibre rates. List of countries by number of broadband Internet subscriptions. If your page has an image in it then you can speed up the download time for your users by providing the width and height of your image (in pixels) within your CSS code. To do this you firstly need to find out the exact width and height of the image in pixels. Follow one of these choices to find this out: PC Right-clicking on the image Properties Details Mac Click on the image File Get Info Details are in the More info list. From Adobe Photoshop Image Image Size From Paint.Net Image Resize To supply the width and height of an image in your HTML5 code you add both a width and a height attribute immediately after the src attribute as shown in the following example. Important: 1/ Width and height measurements must be in pixels. 2/ With all attributes inserted into any HTML tag there are double-quotes around the value. In this case we add double quotes around the width and the height values. 3/ The width and height measurements do not include px after them. 4/ Do not follow the attribute name with a colon, use an equals sign as shown below. You are not using CSS code here it is pure HTML5 so no colon. The following in-line code uses width and height attributes: <img src = "images/herbert-george-wells.jpg" width = "231" height = "251" alt = "Image of H. G. Wells" style = "float: right;"> Here the image would be floated to the right side of the browser window leaving the text to flow around the image. The image is exactly 231 pixels wide and 251 pixels high. The image downloads quicker than before because the browser knows how much space to set aside for the image. Also the browser can fill in the text whilst the image is downloading so that your users can start reading while waiting for the image. Without the width and height attribute the browser guesses how much space to set aside for the image, adds text, then starts downloading the image continuously re-arranging the text until the image is fully downloaded. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 9

10 Find out the width and height of your image in pixels. Alter your image s in-line style code to include the width and height attribute/value pairs as shown in the example above. View your webpage in a browser. Your image should still be on the right-side of the browser window. Since you are not downloading our webpages from an external server or using dial-up you probably did not notice any difference in how quickly your image rendered in your webpage but it was slightly faster! Image Resizing Although I do not recommend that you do this unless you are using.svg graphics, you can alter your image size with a browser. Try altering the width and height of the image in your HTML5 code to a width of 400 pixels and height of 300 pixels. Save your change. View your webpage in a browser. This should re-size your image but it may appear stretched or squashed. Change the width and height values back to what they were originally and save the change. Notes: 1/ Although you can resize images by using the width and height attributes in your CSS image code it is not recommended because it will slow the downloading of your webpage. It is best to resize your images in Photoshop, Paint.Net or some other image editing software package first, save and then use these in your code. 2/ If you use this method to enlarge your images then they lose resolution and can become pixelated unless you are using.svg graphic images. 3/ You can use a percentage (%) amount of the browser window for the width and height attribute. 4/ You can set just the width or just the height and the browser will adjust the other value proportionately. You may be thinking that your text is way too close to your image. Using CSS code there are many features that can be adjusted to alter the spacing around your image as well as adding and formatting borders. This will be covered in next week s task. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 10

11 Inserting Horizontal Lines You can draw horizontal lines anywhere in a webpage by using the <hr> tag. The closing tag would be </hr> and since there would be nothing between the opening tag and closing tag it is fine to use <hr>. <hr> can be used almost anywhere within the <body> </body> of an HTML document but be careful when inserting a horizontal line in the middle of text such as in a paragraph. The reason for this will be demonstrated in the following example: Place a horizontal line somewhere in the middle of your first paragraph. Save your change. View your webpage in a browser. There should be a horizontal line in the middle of your first paragraph. The text above the line should be formatted according to the CSS style that you used on your paragraph but the text below the line will not be formatted in this way. To fix this up you could place a </p> before a <hr> and a <p> after the <hr> but I think it is better not to place horizontal lines in the middle of a paragraph. Place a horizontal line after your heading and another after the last paragraph. Save your change. View your webpage in a browser. All paragraphs should now be formatted nicely again and you should have two neatly placed horizontal lines. You can use CSS code to style your horizontal lines and since you would probable want to style all of your lines the same way then the best way to do this would be to use either internal style sheet code or external style sheet code (which we have not covered yet) rather than using in-line CSS code. To alter the colour of all horizontal lines you would include styling for your <hr> tags as follows where I have changed the horizontal line border-colour to orange: <style type = "text/css"> body background-color: rgb(99, 74, 227); p </style> hr color: rgb(244, 191, 163); border-color: orange; Alter your CSS style sheet code so that it now alters your horizontal lines to a red border colour. View your webpage in a browser. All lines should now be a red colour. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 11

12 You can use the same CSS code to alter the width and height of your horizontal lines and this works on almost all browsers. As stated above, the best way to use this would be in an internal or external style sheet as shown below: <style type = "text/css"> body background-color: rgb(99, 74, 227); p hr </style> color: rgb(244, 191, 163); border-color: red; width: 50%; height: 5px; Alter your webpage CSS style sheet code so that it now alters your horizontal lines so that the width is 80 percent of your browser width and 10 pixels high. View your webpage in a browser. All lines should be 80% of your browser width and ten times as thick as earlier. Notes: 1/ Just as you can float your images to the left or right of the browser window, you can do the same with your lines and this works in most of the latest browsers but not in some older versions of browsers. 2/ The height attribute does not work with the <hr> tag in older browsers. Alter your webpage CSS style sheet code so that it now alters your horizontal lines so that the background colour of the line is a different colour to the border. View your webpage in a browser. All lines should now have a different coloured centre. Copy the squiggle.png from your Level 1\images folder to your Level 2\images folder. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 12

13 Alter your CSS code to use the image as a background inside your horizontal lines. Your code should look similar to this: hr border-color: red; width: 80%; height: 10px; background-color: orange; background-image: url(images/squiggle.png); View your webpage in a browser. You should be able to see your image in the centre area of your lines. If your image has transparent sections, you will see your background colour behind the image. Reduce the background code to a single line using the shortcut method you learnt a few weeks back. Save your change. View your webpage in a browser. It should look exactly the same. Besides altering the border colour of your horizontal line, you can also alter the border width and even the style of that border. Alter the CSS code for your horizontal lines to include two extra lines as follows: hr border-color: red; border-width: 10px; border-style: solid; width: 80%; height: 10px; background: orange url(images/squiggle.png); View your webpage in a browser. You should be able to see your image in the centre area of your lines. If your image has transparent sections, you will see your background colour behind the image. Your border should be a solid red line and 10 pixels thick. The border style could take any of the following nine values: none, solid, double, groove, ridge, inset, outset, dotted or dashed. Try each of these border-style values with the CSS code for your horizontal line remembering to save your code before viewing in a browser. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 13

14 There is a shortcut way of reducing the border-width, border-style and border-color attributes into a single line of CSS code. Simply use border as the attribute and the list of attributes you would like as shown in the following CSS code where the border width is 8pixels, the border style is dotted and the border colour is green: hr border: 8px dotted green; width: 80%; height: 10px; background: orange url(images/squiggle.png); Use the shortcut border code shown above in your code. Save the change. View your webpage in a browser. It should look much like the one shown on the right: There are many other CSS 3 options you could apply to your horizontal lines as well as to images and indeed any of your webpage elements. You will find out about that in the next HTML5/CSS 3 lesson which looks at element formatting and positioning. If you have some time to experiment, see if you can add an interesting border around your image using CSS code similar to that you just used on your horizontal lines. If you have more time to experiment, see if you can add an interesting border around your entire webpage. Still more time? See if you can add borders around your paragraphs and, if you can do this, then see if you can add a border around just one of your paragraphs. 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 backed up all of your work at the end of this lesson to your USB thumb drive including your images folder? Have you been saving your work to the SPAN student drive every 10 minutes? Show your webpage to Mr Kruyer for assessment. Due Dates: All questions from this task and task9-yi.html should be completed by next week s class. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\learning-tasks\level-2\tasks\task9\TYHTML9.docx Page 14

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