Lecture Summaries class 8

Prepared by: Anthony Larrain

These notes serve as an outline to the lecture, they are not intended to be complete. Attend class to get more details.

More on Images

Recall the two most common file types for web images are:

jpg

gif

We use the img tag(the image tag) to display images in our webpages.

The image tag has several attributes.

src width height alt align

Note: Thanks to CSS we should avoid the align attribute

Suppose I have an image file river2.jpg in the same directory as my html document with width 400 and height 152. Suppose my HTML file had the following code

<img src="river2.jpg" width="400" height="152" alt="A picture of a river in the smokey mountains"> A river in the smokey mountain, taken summer 1985

The webpage would display

A picture of a river in the smokey mountains

Note: the image is placed in the normal flow of the document and the text continues next to the image along the bottom of the image
We can use CSS to float the image to the left OR right and make the text wrap around the image.
See Examples beforefloat.html, float1.html and float2.html
To center an image we have to use the HTML div tag.
See Example centerimage.html

HTML `div` tag

The div tag defines a division within a web page. The div tag allows individual sections of an HTML page to be styled.

HTML `table` tag

The table tag allows you to arrange text and graphics into multiple rows and columns.
Tags used in creating tables.

The tr tag creates the rows of the table.
The td tag creates the data cells. A data cell can contain text, images, lists, paragraphs, horizontal rules, tables, etc.
The th tag creates headings.

The size of a table and its cells automatically adjust to fit the data. We can control the size of a table using the width attribute. You can specify the value for the width in percentages or pixels

See Example table1.html. Don't forget to view the source.

Notice: the headings are centered horizontally, and the data in the data cells are left justified. We can control the alignment by using the align attribute or writing a style.
See Examples table2.html Or table3.html Don't forget to view the source.

Notice: the text is against the left edge of the cell. We can control the spacing by placing the cellpadding attribute. inside the table tag. We can also control the spacing between the cells by using the cellspacing attribute.
See Example table4.html.
With proper alignment and spacing we can eliminate the borders.

See Example table5.html. Notice, I also decreased the padding and spacing.

Same as table5.html just adding some more stylestable6.html.
We can control the width of each column by placing the width attribute inside the first rows td tags

See Example table7.html. Remember view source

We can also use tables for layout. Note this is an area of debate. W3C recommends using CSS for layout. We will not directly code CSS for layout, for simple layout we will use tables.
See Example table8.html.
Notice: I am using the valign attribute in the second td tag