<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Sample Website</title>
<meta name="description" content="Demonstration website">
<meta name="keywords" content="sample,HTML,CSS,">
<meta name="author" content="MAS HTML class">
<style type="text/css">
body {
font-family: Arial,Helvetica,sans-serif;
width: 80%;
margin: auto;
}
img {
border-style: none;
}
h2 {
font-weight: bold;
text-align: center;
font-size: 1.3em;
}
.border {
text-align: center;
border-width: 1px;
border-style: solid;
border-color: blue;
padding: 5px;
}
</style>
</head>
<body>
<h2>Welcome to our sample website</h2>
<p class="border">We will demonstrate a number of HTML
coding techniques,
including images, links, and styled layout.</p>
<p style="text-align: right;">Thanks for visiting! Please <a href="mailto:hce@epix.net">email</a>
us.
<a href="mailto:hce@epix.net"><img height="48" width="48" alt="" src="mail.png"></a></p>
</body></html>
Monday, October 26, 2009
Monday, October 5, 2009
Handout & slides from 4th class
Both up at Scribd: the presentation and the handout on CSS box model.
Tuesday, September 29, 2009
File worked on in class
<html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
.span-green {
color:purple;
font-weight:normal;
font-style:italic;
font-size:2em;
background-color:pink;
}
-->
</style>
</head>
<body>
<div style="text-align:center;width:80%;">
<div style="width:1px; background-color:silver; padding:20px;float:left;">
<p class="this-style">Here <span class="span-green">three types</span> of paragraph style are identifed in the head.
</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="that-style">This is another style.</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="this-style">Many paragraphs can be styled the same <span class="span-green">without having to repeat the code</span>.</p></div>
<p class="other-style">You can create as many styles as you want. <a href="http://www.google.com">google</a>
</p>
</div>
</body>
</html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
.span-green {
color:purple;
font-weight:normal;
font-style:italic;
font-size:2em;
background-color:pink;
}
-->
</style>
</head>
<body>
<div style="text-align:center;width:80%;">
<div style="width:1px; background-color:silver; padding:20px;float:left;">
<p class="this-style">Here <span class="span-green">three types</span> of paragraph style are identifed in the head.
</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="that-style">This is another style.</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="this-style">Many paragraphs can be styled the same <span class="span-green">without having to repeat the code</span>.</p></div>
<p class="other-style">You can create as many styles as you want. <a href="http://www.google.com">google</a>
</p>
</div>
</body>
</html>
Span test
<html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
.span-green {
color:purple;
font-weight:normal;
font-style:italic;
}
-->
</style>
</head>
<body>
<p class="this-style">Here <span class="span-green">three
types</span> of paragraph style are identifed in the head.
</p>
<p class="that-style">This is another style.</p>
<p class="this-style">Many paragraphs can be styled the same
<span class="span-green">without having to repeat the
code</span>.</p>
<p class="other-style">You can create as many styles as you
want.
</p>
</body>
</html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
.span-green {
color:purple;
font-weight:normal;
font-style:italic;
}
-->
</style>
</head>
<body>
<p class="this-style">Here <span class="span-green">three
types</span> of paragraph style are identifed in the head.
</p>
<p class="that-style">This is another style.</p>
<p class="this-style">Many paragraphs can be styled the same
<span class="span-green">without having to repeat the
code</span>.</p>
<p class="other-style">You can create as many styles as you
want.
</p>
</body>
</html>
Saturday, September 26, 2009
Embedded style sheet 2
<html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
-->
</style>
</head>
<body>
<p class="this-style">Here three types of paragraph style are identifed in the head.
</p>
<p class="that-style">This is another style.</p>
<p class="this-style">Many paragraphs can be styled the same without having to repeat the code.</p>
<p class="other-style">You can create as many styles as you want.
</p>
</body>
</html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">
<!--
p.this-style {
text-align: center;
font-weight: bold;
}
p.that-style {
text-align: right;
color: blue;
font-family: monospace;
}
p.other-style {
color: red;
font-weight: normal;
font-family: sans-serif;
}
-->
</style>
</head>
<body>
<p class="this-style">Here three types of paragraph style are identifed in the head.
</p>
<p class="that-style">This is another style.</p>
<p class="this-style">Many paragraphs can be styled the same without having to repeat the code.</p>
<p class="other-style">You can create as many styles as you want.
</p>
</body>
</html>
Embedded style sheet 1
<html>
<head>
<title>Embedded Style Sheet</title>
<style type="text/css">
<!--
body {
background: yellow;
color: green;
}
p {
text-align: center;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p>The body and all paragraphs are controlled by a style sheet in the head section of the page.</p>
<p>
All paragraphs will have the same style...</p>
<p style="text-align:left;color:black;font-weight:normal">
...unless it's overridden, in this case by an inline style.</p>
</body>
</html>
<head>
<title>Embedded Style Sheet</title>
<style type="text/css">
<!--
body {
background: yellow;
color: green;
}
p {
text-align: center;
font-weight: bold;
}
-->
</style>
</head>
<body>
<p>The body and all paragraphs are controlled by a style sheet in the head section of the page.</p>
<p>
All paragraphs will have the same style...</p>
<p style="text-align:left;color:black;font-weight:normal">
...unless it's overridden, in this case by an inline style.</p>
</body>
</html>
Inline style demo
<html>
<head>
<title>Inline Style</title>
</head>
<body>
<p>This is a default paragraph.</p>
<p style="text-align:center;color:green;font-family:cursive;">
This paragraph is styled by a command in the tag.</p>
<p>The next paragraph reverts to default.</p>
</body>
</html>
<head>
<title>Inline Style</title>
</head>
<body>
<p>This is a default paragraph.</p>
<p style="text-align:center;color:green;font-family:cursive;">
This paragraph is styled by a command in the tag.</p>
<p>The next paragraph reverts to default.</p>
</body>
</html>
Subscribe to:
Posts (Atom)