<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>
Tuesday, September 29, 2009
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>
Friday, September 25, 2009
Materials from 3rd class
The handout was this trifold from DeepX, a company that's since gone out of business. I will put up a simpler CSS cheat sheet once I write it! The presentation is here (you can view and/or print from Scribd).
Tuesday, September 22, 2009
Testing file
Here is Walt's sample HTML file for his future reference:
<html>
<head>
<title>Montrose Firewood, Inc.</title>
</head/>
<style type="text/css">
<!--
body {
background-color:silver;
}
p.thiskind {
text-align:center;
}
p.thatkind {
color:blue;
font-family:Arial;
font-size:xx-large;
}
a:link {
text-decoration:none;
}
a:active {
color:yellow;
}
a:hover {
color:red;
text-decoration:none;
font-size:200%;
background:yellow;
}
-->
</style>
<body>
<p class="thiskind"
here is my centered para
</p>
<p class="thatkind"
here is my left-aligned para
</p>
<h1>Locust Wood Special!</h1>
<hr>
<ul>
<li>16 inch!</li>
<li>Split clean!</li>
<li>Seasoned!</li>
</ul>
<h> € 50 per face cord <h>
<hr>
<p><i><b>Good Night!</i></p></b>
<a href="mailto:wkostyk@gmail.com">Email Walt</a>
<br>
<br>
<a href="http://theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=0530&end=058F">Visit my website</a>
<br>
<img src="sunset.jpg" height = "250" width="350"
<br>
<br>
<table border=2>
<tr>
<td>233</td>
<td>456</td>
</tr>
</table>
<p style="font-weight:bold;color:red; text-align:right; background-color:aqua">
Test Paragraph #1
</p>
</body>
<html/>
<html>
<head>
<title>Montrose Firewood, Inc.</title>
</head/>
<style type="text/css">
<!--
body {
background-color:silver;
}
p.thiskind {
text-align:center;
}
p.thatkind {
color:blue;
font-family:Arial;
font-size:xx-large;
}
a:link {
text-decoration:none;
}
a:active {
color:yellow;
}
a:hover {
color:red;
text-decoration:none;
font-size:200%;
background:yellow;
}
-->
</style>
<body>
<p class="thiskind"
here is my centered para
</p>
<p class="thatkind"
here is my left-aligned para
</p>
<h1>Locust Wood Special!</h1>
<hr>
<ul>
<li>16 inch!</li>
<li>Split clean!</li>
<li>Seasoned!</li>
</ul>
<h> € 50 per face cord <h>
<hr>
<p><i><b>Good Night!</i></p></b>
<a href="mailto:wkostyk@gmail.com">Email Walt</a>
<br>
<br>
<a href="http://theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=0530&end=058F">Visit my website</a>
<br>
<img src="sunset.jpg" height = "250" width="350"
<br>
<br>
<table border=2>
<tr>
<td>233</td>
<td>456</td>
</tr>
</table>
<p style="font-weight:bold;color:red; text-align:right; background-color:aqua">
Test Paragraph #1
</p>
</body>
<html/>
Copy and paste for class
Sample code with a link:
I'm using a "convert special characters" page.
<html>
<head>
<title>Test Web Page</title>
</head>
<body>
<p>Here's a <b>paragraph</b> with a <a href="http://www.cuteoverload.com">link</a>.</p>
<img src="image.jpg" height="50" width="50">
</body>
</html>
I'm using a "convert special characters" page.
Tuesday, September 15, 2009
Unicode HTML entities
The chart I'm going to hand out in class tonight only covers the basic HTML entities. With Unicode you can do thousands more. Check out these tables!
➨ ✄ ✈
➨ ✄ ✈
Saturday, September 12, 2009
First class
The first class was lots of fun--thanks, everyone!
As promised, here are the documents from class: the presentation, document structure handout, and tag handout. You can find them all together in the Scribd group I set up for the class. If anybody needs them in PDF format, just send me an email.
As promised, here are the documents from class: the presentation, document structure handout, and tag handout. You can find them all together in the Scribd group I set up for the class. If anybody needs them in PDF format, just send me an email.
Monday, September 7, 2009
Welcome to HTML/CSS
I'll be posting lectures and helpful links here. Welcome aboard! Past posts are from the 4-week Intermediate Web Design class I taught in Spring 2008. We will be covering most of the same material, but in more depth.
Subscribe to:
Posts (Atom)