back to Week 14

The example below is a simple XHTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>

<p> Stuff </p>
<p> More stuff </p>

</body>

</html>

Here's some more frequently used tags ( from week 2 )

<br /> Line Break
<h1> Headings
<img src="image.jpg" /> Inserting an image
<strong> Bold text
<ul> Unordered List
<a href="http://www.website.com"> Link to a webpage
<p> Paragraphs

CSS

What is CSS?

CSS Syntax

This is an example of how to put CSS in the head of your html code:

<style type="text/css">
p{ background-color:#FFF; padding: 2em; color:#999; width:500px; }
</style>

Or , put a link to a separate .css file:

<link href="382.css" rel="stylesheet" type="text/css" />

CSS Code:

@charset "UTF-8";
/* CSS Document */
/*
this is a comment
*/
body{
background-color:#000000;
color:#CCCCCC;
font-family: Taco Box, Helvetica, Arial, sans-serif;
font-size:12px;
line-height: 1.5em;
}

img{
padding:1px;
border:2px solid #CCC;
}

h1{color:red;background-color:#FFF;text-align:center;font-family:"Arial Black", Gadget, sans-serif;font-size:24px;}
h2{color:#F00; font-family:"Arial Black", Gadget, sans-serif; font-size:18px;}
h3{color:#F00; font-family:"Arial Black", Gadget, sans-serif;}

p{
background-color:#FFF;
padding: 2em;
color:#999;
width:500px;
}

a:link{color:#FFF; font-weight:bold; text-decoration: underline;}
a:visited{color:#FFF; font-weight:bold; text-decoration: underline;}
a:active {text-decoration: underline; font-weight:bold; color: #000;}
a:hover{color:#F00; background-color: #000; text-decoration: none;}

ul{
text-align:center;
list-style:circle;
width:10em;
}

li{
background-color:#FF0000;
padding: 1em;
/* display: inline; */
}


More with CSS:
<!-- comments within html tags --> and /* comments within css */

changing the background with CSS

CSS styles can be applied to general page elements, CSS Classes, or an ID:

img { border: 0px; }
this applies to every image tag in the HTML document

.classy { color: red; }
this applies to a CSS class called classy.
<span class="classy" > Example of classy red text </span>

#about { background-color: #ccc; }
This rule applies to just the specific element that has an ID value of about:

<p id="about"> About stuff goes here </p>

Working with div tags

<style type="text/css">
#body{
background-color:#CCC;
background-image:url('images/bg.gif');
font-family: Helvetica,Arial, sans-serif;
color:#333;
text-align:center;
font-size:12px;
line-height: 1.4em;
}
#wrapper{
width:700px;
background:#EEE;
padding:10px;
padding-left:100px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
</style>
<div id="wrapper">
The div tags go in the body of your html page
</div>

Insert swf files without Adobe

<!-- INSERT FLASH SWF -->

<object data="file.swf" type="application/x-shockwave-flash" width="..." height="...">
<param name="movie" value="file.swf">

<!-- If flash is not installed -->
<p>You need Adobe Flash Player to view this content</p>
</object>

You need Adobe Flash Player to view this content


Flash Review :

// MAKE A LINK TO ANOTHER HTML PAGE:

my_btn.addEventListener(MouseEvent.MOUSE_DOWN, myHandler);
function myHandler(evt:Object):void {
navigateToURL(new URLRequest("http://www.adobe.com/devnet/flash/"), "_self");
}
Look at source: vineyardesigns.com/tutorials

Another eaxample:
http://tiger.towson.edu/~cbrown31/FinalProject/index.html

back to Week 14