Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD)
323.4 Use graphics and objects on Web Page (7 hrs) 323.4.1 Insert foreground features 323.4.2 Modify image attributes 323.4.3 Create Layout with background image 323.4.4 Change background colour of a web page 323.4.5 Insert Different objects on a web page
HTML Images In HTML, images are defined with the <img> tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text"/>
HTML Images (cont) Images may be used on web pages in several ways: As a simple image: an image can be used on a web page as it is used in print, as a static image that adds information, such as company logo or an illustration As a link: an image can be used as a link to another document by placing it in the anchor element.
HTML Images (cont) As an imagemap: an imagemap is a single image that contains multiple links ( hotspots ) that link to other documents
Insert Images & Image as Links You can easily insert pictures located in other folders, or even pictures that are located on other websites: Example: <img src="images/logo.png" /> Example: <img src="http://www.html.net/logo.png" />
Images as Links Images can be links: Example: <a href="http://www.html.net"> <img src="logo.png" /></a>
Alternative Attribute The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute: Example 5: <img src="logo.gif" alt="html.net logo" />
Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="pulpit.jpg" alt="pulpit rock" width="304" height="228" /> Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
HTML Image Tags Tag <img /> <map> <area /> Description Defines an image Defines an image-map Defines a clickable area inside an imagemap
E X E R C I S E
What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents. CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things.
What is CSS? (cont) HTML can be used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. CSS also helps to create a more consistent look for your website design throughout.
HTML vs CSS HTML is used to structure content. CSS is used for formatting structured content.
Advantages of CSS Control layout of many documents from one single style sheet (just one!) More precise control of layout Apply different layout to different media-types (screen, print, etc.) Numerous advanced and sophisticated techniques
Basic CSS syntax Let's say we want a nice red color as the background of a webpage: <body bgcolor="#ff0000"> Using HTML we could have done it like this: body {background-color: #FF0000;} With CSS the same result can be achieved like this:
Basic CSS Syntax Sample
Applying CSS to a HTML Document There are three ways you can apply CSS to an HTML document: 1. Inline method 2. Internal method 3. External Method
Applying CSS to a HTML Document (cont) Method 1: In-line (the attribute style) One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this: <html> <head> <title>example</title> </head> <body style="background-color: #FF0000;"> <p>this is a red page</p> </body> </html>
Inline Method Tag Final Result
Applying CSS to a HTML Document (cont) Method 2: Internal (the tag style) Another way is to include the CSS codes using the HTML tag <style>. For example like this: <html> <head> <title>example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> </body> </html> <p>this is a red page</p>
Applying CSS to a HTML Document (cont) Method 3: External (link to a style sheet) The recommended method is to link to a so-called external style sheet. An external style sheet is simply a text file with the extension.css. Like any other file, you can place the style sheet on your web server or hard disk.
Applying CSS to a HTML Document (cont) For example, let's say that your style sheet is named style.css and is located in a folder named style. The situation can be illustrated like this:
Applying CSS to a HTML Document (cont) To create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code: <link rel="stylesheet" type="text/css" href="style/style.css" /> Notice how the path to our style sheet is indicated using the attribute href. The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags. Like this: <html> <head> <title>my document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>
Hexadecimal Color Palettes The W3C HTML 4.01 specification defines 16 named colours:
E X E R C I S E
Extra Information Other CSS styles and format is available in.pdf format. CSS_tips_lessons.pdf
Dreamweaver Activity Insert foreground features Modify image attributes Create background color of a web Insert objects on a web page
References http://www.w3schools.com/html/html_images. asp http://www.html.net/tutorials/html/lesson9.ph p http://www.html.net/tutorials/css/lesson1.php http://www.html.net/tutorials/css/lesson2.php