chapter 4 bie1313/bprog1203 | web design prepared by mohamed abdulkarim / mike ng ah ngan

Chapter 4BIE1313/BPROG1203| Web design

Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan

ALL RIGHTS RESERVEDNo 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.




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: <body style="background-color:yellow">

or <body style="background-color :#1078E1; "> or <body style="background-color: rgb( 149, 206, 145); ">




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:

<body backgound=“flower.gif”>or

<body background=“FolderForImages/flower.gif”>

Note :For local drive, directory or forlder for image should start with

“file:///C:/.../filename.gif”




Try this…

<html><head><title>Example for BACKGROUND IMAGE</title></head>

<body background=“ImageFolder/sunflower.gif”>

</body></html>




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.




Inline Images in HTML

• Inline images are specified in HTML using the <IMG/> 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. <img src=“butterfly.gif" alt=“butterfly" width="33" height="32" />




Inserting images from different location

• An image from a folder:<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" />

• An image from a website<img src="http://www.w3schools.com/images/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”




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. :- <img src=“star.gif” align=“right”>




Try this…

<html><head><title>Wrapping text next to image</title></head><body><img src=“fruit.jpg” align=“right”><p>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.</p>

</body></html>

For local drive, directory or forlder for image should be img src =“file:///C:/.../filename.jpg”




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.




End of Lecture

chapter 4 bie1313/bprog1203 | web design prepared by mohamed abdulkarim / mike ng ah ngan

Documents