Introduction to HTML II Adding Colour By default browsers display documents in black text on a white or grey background HTML authors can however embed colours into documents easily. This can be done by adding attributes to the <body> tag. The attributes which can be altered are: bgcolor colour of background to page text colour of the text link colour of text for unvisited links vlink colour of text for visited links alink colour of text for links at moment user clicks on them © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Colours are usually specified as RGB (Red, Green, Blue) combinations. Each element of the RGB triple is a hexadecimal number between 00 and FF (the decimal equivalents are from 0 to 255). They are preceded by the # symbol. So, for example, #000000 indicates, no red, no green and no blue - this combination gives black. #FF0000 means the strongest red, no green, no blue. #FFFFFF gives white. All other values in between give us different colours. The best way to pick appropriate colours and get their RGB equivalents is using some image-processing software like PhotoShop or Paint Shop Pro (we’ll deal with this in about 2 lectures time). © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 The HTML specification makes life a little easier by supported 16 widely understood colour names as below. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 So we can use the colour names instead of the RGB values if we wish. So, for example, <body bgcolor = red text = black link = white vlink = maroon alink = fuchsia> Be careful that colours match! In the example above black text on a red background will probably be unreadable. If you use colors that aren’t part of the basic 16 e.g. <body bgcolor = “#2387E2” text = black> then you can’t be guaranteed the colour will display on someone’s else’s monitor/browser the way it does on yours! A word of warning ! These attributes of the <body> tag are deprecated in HTML 4 ! You should really use CSS instead (see later) © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Embedding Images HTML of course allow us to do more than just text. We can embed images into our document if these images are stored in an image file format like JPEG or GIF. We use the <img> tag to do this. The attributes of this tag specify the file which contains the image (the src attribute), information about how to align the image on the screen (the align attribute), and information about the size of the image (height and width attributes). To include an inline image <img src = “image_name.gif”> Syntax for referring to image files is the same as for hyperlinks. It is a good idea to use the height and width attributes e.g. <img src = “image.gif” height =100 width=100> These numbers are in pixels and again can be determined from your image processing software. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 If you don’t give height and width, the browser will display the image at the correct size, but will be unable to assign appropriate screen space and hence format the document before the image is loaded … slows things down. If you give the wrong size and width then most browsers will stretch or shrink the image to fit the size specified. Not a good idea !! The alignment attribute can be used to specify how the image is aligned with respect to the surrounding text. The available options are as follows top, center, bottom, left, right Top, middle and bottom will align the first line of the following text with the top, middle or bottom of the image. So for example, if we use © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 <p><img src = “test.gif” align = top> This is the following text. Take careful note of how the text is aligned with the image</p> we get This is the following text. Take careful note of how the text is aligned with the image Using <align = middle> will align the top line of text with the middle of the image and the rest will follow after and using <align = bottom> will align the first line of text with the bottom of the image. The two pictures overleaf illustrate this. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 This is the following text. Take careful note of how the text is aligned with the image This is the following text. Take careful note of how the text is aligned with the image © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 If however, you want the text to flow, unbroken, around the image then use <align=left> or <align = right> to get the following results. This is the following text. Take careful note of how the text is aligned with the image. This is the following text. Take careful note of how the text is aligned with the image. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 We can also use vspace and hspace attributes with this tag in order to force vertical and/or horizontal spacing around the image. If we just want an image on it’s own, centered, with no text, then we could use: <p align = center> <img src=“dog.gif”> </p> Another important attribute to make use of when embedding images is the alt attribute When a page is loading up, the most time-consuming part is loading the images because they have much bigger file sizes than ASCII text files. If however, you have included height and width attributes for your images then, the browser can go ahead and load the page, format it leaving blank boxes for the images. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 The text can be rendered at that stage and the user can start reading before the images are loaded. The alt tag specifies text to display in lieu of the image before it loads. This also means that users who choose to browse with images turned off (or indeed users with browsers which don’t support images) will know what is contained in the image. So for example, <img src = “dog.gif” alt = “Picture of Dog”> (should also have height and width in above). © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Background Graphics We can use an attribute of the <body> tag called background to specify the name of an image file which is used as a background image to the page. For example we might pick a wood texture as a background. Such a background might make the text difficult to read however so be careful. Suppose the file above is stored as “wood.gif” then the syntax is <body background=“wood.gif”> © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 It doesn’t matter what size the background image is because the browser will automatically tile it so that it fills the whole screen. The smaller the better however since it will then load quicker. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Fonts HTML provides a <font> tag which allows us to specify certain attributes of localised pieces of text. Among the attributes are size, colour and face. colour allows you to set the colour for a piece of text (this will override the overall text colour attribute from the <body> tag). size allows you to change the size of a piece of text. This can be done in absolute terms by giving a number between 1 and 7. This will be mapped to appropriate font sizes by the browser. Alternatively you can specify the size of the font relative to a basefont size which is specified by the author using the <basefont> tag. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 So if I set the basefont size to 4 using <basefont = 4> and then use the following <font size = -2> Text is size -2</font> <font size = +2> Text is size +2</font> I would get The same effect is got by <font size = 2> Text is size 2 </font> <font size = 6> Text is size 6 </font> Text is size -2Text is size +2 Text is size 2Text is size 6 © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Most browsers also support a face attribute with the font tag. This allows us to specify the font in which the text should be rendered. The problem with this is that if the user at the other end does not have the font in question installed on their system then it will default to something else anyway and you will have no control over what it looks like. So, for example we can say <font face = “Times New Roman”> some text</font> Once again be warned! The font tag is deprecated in HTML 4 and we should really use styles instead. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Watch out for the following! 1. Overlapping Tags Don’t do things like this: <b> This is a <dfn> bad </b> idea </dfn> on some browsers’, this will be okay, on some of them it won’t. Pair up your tags instead. 2. Avoid embedding tags inside anchors e.g. don’t do this <a href = “dest.html><H1> Destination </H1><a> most browsers will handle this okay but it is not part of the spec so there’s no guarantee …. © Hugh McCabe 2000 Web Authoring Lecture 3
© Hugh McCabe 2000 Web Authoring Lecture 3 Forced Line Breaks The <br> tag can be used to force a line break. It does not have to be closed off. Comments You can place comments in HTML using the following syntax <!-- your comment here --> © Hugh McCabe 2000 Web Authoring Lecture 3