Creating Web Pages at UTK (4)
Lists and tables
Cascaded Style Sheets (CSS)
Cascaded Style Sheets (CSS's) are an alternative method for defining
how you want a web page to appear in a browser. This typically
gets merged in with ordinary HTML.
As an example, let's have
<html>
<body bgcolor="ffffff" text="000000">
<style
type="text/css">
this will define some things
h3 {color: red;
}
this says everything in this size should be red
h4 {color: green;
}
all h4 font size should be green
h2 {color: blue;
}
h2 font size will be blue
h1 {color: purple;
}
h1 font size will be purple
</style>
...
...
<h3> this is a test
</h3>
this text should appear in red
There are two examples of this on my CS 100 page: 1st example
2nd
example--with borders
Aligning text. There are various ways:
style="text-align:center;" centers the text:
e.g. <h3 style="text-align:center;"> this is sample text
</h3> would center that text. left and right
are two other options (there are more).
<img src="mypic.jpg" align="right"> right-aligns this image.
It can get much more complex. w3schools has tutorials.
-------------------------------------------------------------------------------
LISTS. <UL> and </UL> surround an unordered
list--elements have "bullets" beside them.
Within this list, <LI> and </LI> (that's ell-eye, not
ell-one) surround an element
<OL> and </OL> surround an ordered list--you get numbers
rather than bullets by each list element.
<LI> and </LI> surround list elements.
<UL style="list-style-type: square"> uses CSS to say you want
square bullets in an unordered list
<OL style="list-style-type: lower-roman"> will use lower-case
roman numerals rather than numbers;
upper-roman gives you upper-case roman numerals. example with
lists
------------------------------------------------------------------------------------------------
TABLES. These can get very complex--See w3schools examples.
We'll give you some of the basic stuff here. Tables are usually
adjusted to fit a browser page, but you can also make them a particular
size, cover 80% of the page width, things like that.
Tables have rows, columns, and cells. A cell is where a row
and column in the table meet.
<table> and </table> are the tabs that define and surround
a table.
<tr> (for table row) and </tr> tell HTML where a row starts
and ends
<th>
is for table header cell </th> these cells get bold
type fonts automatically
<td> is for an ordinary cell </td>
<table border="5" bordercolor="teal"> says we want borders around
all cells, 5 pixels wide and colored teal (the default border is gray)
<table cellpadding="10"> pads 10 pixels between the cell contents
and borders
<td width="100"> makes this cell 100 pixels wide. <table
width="100"> makes all cells 100 pixels wide.
<td height="15"> makes the cell 15 pixels high, with the same
option as above for <table>
NOTE: setting a cell's width makes all other cells in that column
this same width.
<caption>this is my table</caption> adds a caption to
the top of the table.
<caption align="bottom"> this is my table</caption> puts
the caption at the bottom of the table.
<td bgcolor="ff00ff"> makes a cell the specified color.
Ditto <th>. Doing this for <table> colors all cells
in the table.
<tr style=background-color:green;"> makes all cells in this row
green.
<td><img src="myicon.jpg"> puts a picture in the cell.
<table background="mypattern.jpg"> gives a background to all
cells.
<td style="width: 20%;"> makes for a skinny cells that adjusts in
width as you adjust the browser window width.
<table style="font-family: arial; font-size: 18pt; font-weight:
bold; text-align: left;">
picks a font family, size, bold-faced, and aligns left in cells.
Example from my
CS 100 page of tables
<table style="width:100%;"> makes the table was wide as the
browser window.