Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Objectives To understand what is the Background Color. To enable to set the Tiled-Image Background. To understand the Text and Link Colors. Create a solid color background for a web page. Calculate the hexadecimal code for a color value. Change the color of text and hypertext link items. Create a textured background from a graphic file.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Background Color The easiest and fastest way to change the background of the page is to decide what color you want it to be and use the one of the syntax below. Eg: or

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Tiled-Image Background To produce a graphical background for your page, you have to specify an image file that will be tiled by browser. To create a tiled-image background, use the BACKGROUND attribute, followed by the file name or URL that points to your image file. Make sure the image is a gif type. Attribute should be placed inside the opening of body Eg: or Note : For local drive, directory or forlder for image should start with “file:///C:/.../filename.gif”

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Try this… Example for BACKGROUND IMAGE

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Image Formats There are two kind of images that your web browser can deal with:- inline images and external images. To be displayed on Web page, your images should be in GIF or JPEG format, (Currently.png) Inline images are images that appear directly on the web page and are loaded when you load the page itself. External images are images that are not directly displayed when you load a page. They are only downloaded at the request of your reader, usually on the other side of a link.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Inline Images in HTML Inline images are specified in HTML using the tag (no ending tag). The SRC attribute indicates the filename or URL of the image you want to include, in quotes. The path name to the file uses the same rules as path names in links to other documents. i.e.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Inserting images from different location An image from a folder: An image from a website <img src=" w3schools_green.jpg" alt="W3Schools.com" width="104" height="142" /> Note : For local drive, directory or forlder for image should be img src =“file:///C:/.../filename.gif”

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Wrapping Text Next to Image You can put any HTML text after an aligned image, and the text will be wrapped into the space between the image and the margin. Browsers will fill in the space with text until the bottom of the image, and then continue filling in the text beneath the image. The values to be used are:- –align=“left”  aligns an image to the left margin –align=“right”  aligns an image to the right margin. i.e. :-

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Try this… Wrapping text next to image You can put any HTML text after an aligned image, and the text will be wrapped into the space between the image and the margin. Browsers will fill in the space with text until the bottom of the image, and then continue filling in the text beneath the image. For local drive, directory or forlder for image should be img src =“file:///C:/.../filename.jpg”

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design Adding Space around an Image Type <img src=“image.location” where image.location indicates the location on the server of your image. If desired, type hspace=“x” or vspace=“y” where x and y are spaces to add around your image. Add other image attributes as desired and type the final />. Tips You do not have to add both hspace and vspace at the same time.

ALL RIGHTS RESERVED No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology Worldwide Faculty of Information and Communication Technology BIE1313/BPROG1203 | Web Design End of Lecture