Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction to Computing I Lesson 6
Review of Last Week Open notepad. Open notepad. Create a Ordered List, with an Unordered Contents, exactly like below. Each company name will link to it’s web page and sport companies’ links will open in a seperate but the same window, and also news companies’ links will open in a seperate window than sport companies... Don’t forget square bullets! Create a Ordered List, with an Unordered Contents, exactly like below. Each company name will link to it’s web page and sport companies’ links will open in a seperate but the same window, and also news companies’ links will open in a seperate window than sport companies... Don’t forget square bullets! 1. Sport Companies Adidas Adidas Nike Nike 2. News Companies BBC BBC CNN CNN
Review of Last Week Color the text Sport Companies to dark blue: # Color the text Sport Companies to dark blue: # Color the text News Companies to dark red: # Color the text News Companies to dark red: # Add logos of these companies to your html file where the name of the companies will be under the image, these should be included in the link. Add logos of these companies to your html file where the name of the companies will be under the image, these should be included in the link. Where are logos? Use Google to find them! ( Where are logos? Use Google to find them! (
<html><head> Image Map Image Map </head><body><ol> Sport Companies Sport Companies Adidas Adidas Nike Nike News Companies News Companies CNN CNN BBC BBC </ol></body></html>
Image Map You can define a region on your image as clickable. You can define a region on your image as clickable. Add usemap=“mapname” parameter to your image. Add usemap=“mapname” parameter to your image. Add a tag to your html where name of map tag is “mapname”. Add a tag to your html where name of map tag is “mapname”. Three kinds Three kinds Rectangle Rectangle Circle Circle Polygon Polygon
Image Map </map> Parameters of map: Parameters of map: Name: name of image map. Name: name of image map. Parameters of area: Parameters of area: Shape: shape of area: rect, circle, poly Shape: shape of area: rect, circle, poly Coords: coordinates (next slide) Coords: coordinates (next slide) Alt: Alternative text. Alt: Alternative text. Href: link. Href: link.
Shape Coordinates Shape types and coordinates: Shape types and coordinates: shape=rect coords="left-x, top-y, right-x, bottom-y" shape=rect coords="left-x, top-y, right-x, bottom-y" shape=circle coords="center-x, center-y, radius" shape=circle coords="center-x, center-y, radius" shape=poly coords="x1,y1, x2,y2, x3,y3,..." shape=poly coords="x1,y1, x2,y2, x3,y3,..." X Y
Add an image map to your html Add above image to the top of your page and display it. Add above image to the top of your page and display it. Add a map tag to somewhere in body of your html, with a name “logosmap”. Add a map tag to somewhere in body of your html, with a name “logosmap”. </map> Add a parameter to your image to use this map: Add a parameter to your image to use this map:usemap=“#logosmap"
Add an image map to your html Add a rectangle with coordinates “3, 3, 96, 74” with alternative text “Adidas Web Site”, with a link and target to Sports window. Add a rectangle with coordinates “3, 3, 96, 74” with alternative text “Adidas Web Site”, with a link and target to Sports window. See if it works. See if it works. Do the same thing to get the following result. Do the same thing to get the following result. </map>
</map>
Tables Below everything, we will create a table to put the 4 of the company images in table of 3 rows x 2 columns, and use the top row as header to state if the column is sport company or news company. Below everything, we will create a table to put the 4 of the company images in table of 3 rows x 2 columns, and use the top row as header to state if the column is sport company or news company.
Tables You can add tables to your web pages. You can add tables to your web pages. You can display any data in tabular form You can display any data in tabular form Today, except from layers and css, most of the pages’ layouts are done by tables. Today, except from layers and css, most of the pages’ layouts are done by tables.
Tables... : All table event happens in between these tags. Attributes: border, width, height, cell padding, cell spacing.... : All table event happens in between these tags. Attributes: border, width, height, cell padding, cell spacing.... : Creates row in table.... : Creates row in table.... : Creates column in a row.... : Creates column in a row.... : Creates column headings.... : Creates column headings.... : Creates table header.... : Creates table header.
2 x 2 table <html> 2x2 table example Following is an example for "2x2 table" RED #FF0000 BLUE #0000FF 2x2 table example Following is an example for "2x2 table" RED #FF0000 BLUE #0000FF
Table border Change your html code to: border=a number (thickness)
Create a 4x4 table
Height and Width Change your html code to: OR height=a number (size in pixels) a number% (size in percentage of the container) width=a number (size in pixels) a number% (size in percentage of the container)
Caption Add under tag: Color Table Color Table
CellSpacing Change your html code to: cellspacing = number (distance between cells)
Cellpadding Change your html code to: cellpadding = number (distance between cell content and cell walls )
Column Headings Add under tag: COLOR HEX. VAL. COLOR HEX. VAL. Table headers are good for hearing disabled aiders.
Align Table Change your html code to: align=right left center
Align Row Change your html code to: BLUE #0000FF BLUE #0000FF align=right left center
Align Cells Change your html code to: RED #FF0000 RED #FF0000 align=right left center
Table Background Color Change your html code to:
Row Background Color Change your html code to: BLUE #0000 FF BLUE #0000 FF
Cell Background Color Change your html code to: RED #FF0000 RED #FF0000
Rowspan and Colspan a a b b c c d d </table>
EOL