Test on Thursday on material in chapters 1 - 4.
The test will include matching, short answer, writing some XHTML - know about writing a table and other items. Be sure to know about the levels of network architecture, how domain names are resolved and other important items from all chapters.
Take a look at http://people.umw.edu/~ernie/cpsc104/planets.html
Dave Raggett's Introduction to HTML
take a look at http://people.umw.edu/~ernie/cpsc370k/style1.html
HTML has been the language standard for Web page creation since the early 1990s. It is a language composed of special symbols called tags that mark various text elements on a page and influence the way that the elements are interpreted or displayed. For example, the HTML tag <p>…</p> when applied to text causes a blank line to be displayed before and after the text when it is rendered by a browser. HTML is non-proprietary which means that it can be processed and rendered by browsers and tools by any vendor who chooses to create such a tool. Various aspects of HTML have changed over the years and the World Wide Web Consortium (W3C) sets standards for HTML use. The current W3C HTML specification is version 4.01 which was recommended in December 1997.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title> Trierra.org – Supporting Island Ecologies </title>
</head>
<body>
</body>
</html>
Delimit logical paragraphs by providing white space surrounding the block |
<p> … </p> |
Create a bulleted list of items |
<ul> …</ul> |
Create an ordered (numbered) list of items |
<ol> …</ol> |
Create a list of definitions |
<dl> …</dl> |
Delimit a block of preformatted text; the text will be rendered exactly as it is typed within the document |
<pre> … </pre> |
Insert a line break |
<br /> |
Create a division within the page |
<div> …. </div> |
Heading |
Markup |
h1 |
<h1>Here’s an H1 Heading</h1> |
h2 |
<h2>Here’s an H1 Heading</h2> |
h3 |
<h3>Here’s an H1 Heading</h3> |
h4 |
<h4>Here’s an H1 Heading</h4> |
h5 |
<h5>Here’s an H1 Heading</h5> |
h6 |
<h6>Here’s an H1 Heading</h6> |
Look at the source for the page with URL http://trierra.org
The <div>…</div> tags are used to create logical divisions within a page. Used on it’s own, the div tag does not alter the appearance of the text on the screen. However, it allows us to group text, images and links together into a logical division within the page. We can use the id tag (discussed below) and style sheets as (discussed later in this chapter) in conjunction with the div tag to control the appearance of various areas on a page.
Note that this tag is not split into two parts; the beginning and end of the tag appear within the same set of angle brackets. Because of this, the symbol / appears before the closing angle bracket. While not strictly required in XHTML, Web developers are encouraged to place a space before the / symbol; this helps older browsers to render the markup correctly.
width
The width of the image expressed as a number of pixels or a percentage of the screen width.
width= “35%”
height
The height of the image expressed as a number of pixels or a percentage of the screen height.
height=300
alt
Specify text that will be rendered in place of the image in the event that the page is viewed in a browser that does not display images. In many browsers, this text is also displayed in a small pop-up label when a user holds her mouse over the image for a few seconds.
alt= “Image of a river”
longdesc
The location of a separate page containing a lengthy description of the image that will be displayed if the page is viewed on a browser that does not display images.
longdesc= “anotherpage.html”
A specific example of an image tag with options is:
<img src = “island.jpeg” width= “100%” alt= “Image of an island.” />
Attribute |
Example Usage |
Effect |
border |
<table border= “2”> … </table> |
Create a border around the table as well as a border around each individual cell in the table. Setting the border to “0” creates a table with no visible border. |
cellpadding |
<table cellpadding= “10”> … </table> |
Control the amount of space within each cell of the table. |
cellspacing |
<table cellspacing= “15”> … </table> |
Control the amount of space between the cell borders. |
width |
<table width= “50%”>…</table> |
Control the width of the table on the page. The value can be expressed as a percentage of the total width of the page as shown or can be expressed in pixels as <table width = “200”> … </table> |
caption |
<caption> … </caption> |
Creates a caption (or title) associated with a table. The caption tag must immediately follow the opening table tag. |
Example Markup |
Effect |
<a href= “fileLocation”> link text </a> |
Create a link to the file at “fileLocation” using the text “link text” and open the file in the same browser window |
<a href= “fileLocation” target= “_blank”> link text </a> |
Create a link to a file at “fileLocation” with the text “link text” and open the new file in a separate browser window. This attribute is valid in XHTML Transitional and Frameset but not in XHTML Strict. |
<a href= “fileLocation”> <img src= “graphicFileName” alt= “text description”> </a> |
Create a link to a file at “fileLocation” and use the image found at “graphicFileName” as the link. |
The use of style sheets makes a lot of sense. The formatting instructions for elements on a page are usually specified in an external style sheet document. For example, a style sheet might include instructions on the type of font and text color to display for all text within <h1> … </h1> tags. The style sheet makes it easy to make consistent changes on a single page or across many pages included in the same Web site because all of the formatting instructions are in one place and the developer does not need to search through multiple documents line by line to make changes. Any documents that are associated with the updated style sheet will automatically change in appearance when rendered.
The syntax for defining a style is as follows:
selector {property : value}
For example if you would like all paragraphs within your page to use courier font and for the font to be blue, you could use the statement
p { font-family: courier; color: #0000FF; }
Property
Characteristic
Example Values
background
background-color
#FF0000
background-image
“islands.jpeg”
background-repeat
repeat, repeat-x, repeat-y, no-repeat
font
font-family
arial, courier, “showcard gothic”
font-size
x-small, small, medium, large, x-large, xx-large
font-style
normal, italic, oblique
font-weight
normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
text
color
#FFC0CB
text-align
left, right, center, justify
Table 4.6 Example characteristics.
Remember the div tag and the id attribute discussed in the earlier sections of the chapter? You can assign style properties for any named division within a page! The syntax for specifying style properties for a division is
#divisionName { property : value; }
The style associated with a div tag can only be applied to one division within the page. This is because XHTML requires that each id associated with a block element (like div) be unique. If the same style should be applied to multiple areas of the page, the style should be defined using a class rather than by using the id attribute; this will be discussed in the next section. An example of a style sheet that could be used to assign a unique style to each division within markup for the trierra page.
body { margin: 0; padding: 0; }
p { margin-top: 0; }
#wrapper { min-width: 400px; width: 100%; }
#outer {
border-left: 165px solid #FFFFFF; /*left column background */
border-right: 200px solid #FCF5F5; /*right column background */
background-color: #FAFAFA; /*center column background*/
}
#inner { margin: 0; width: 100%; }
#header {
background-color: #FFFFFF;
color: #901602;
border-bottom: 1px dotted #CCCCCC;
}
#header h1 { font: 150% Georgia; text-align: right; margin-right: 1em; }
#menu {
width: 150px;
margin-left: -160px;
float: left;
position: relative;
padding-left: 5px;
}
#menu h3 {
width: 150px;
color:#621313;
background-color: transparent;
margin-bottom: 0;
padding-bottom: 4px;
}
#photoColumn {
width: 200px;
margin-right: -200px;
float: left;
position: relative;
}
#content { float: left; width: 100%; position: relative; }
#footer { background-color: #F4F4F4; width: 100%; position: relative;
border-top: 1px dotted #b1b1b1; }
Figure 4.10 Example external style sheet: the style sheet for Trierra.org. http://trierra.org/trierrastyle.css
Take a look at the CSS info at W3 Schools
Know about tidy.
Some examples of forms
- simple feedback form
- appointment with ackermann
- comments to ernie
