Inserting tables in KompoZer is as simple as clicking the table icon in the toolbar. However, getting a symmetrical table proved to be a little more complicated. I promised in class that there must be a way to do it and that I would find out; mission accomplished!
The trick is to create your table first, then click inside the top left cell. Right-click and choose Table Cells Properties.
If you want a symmetrical table, click the box next to Width, type the desired width (50 if you have 2 columns, 33 for 3, 25 for 4, etc.) and click the drop-down to choose "%of table." Click Apply. Then click the "Next" button under Cell at the top and do the same thing for the next cell until everything in the top row has been covered. That's it!
For a fixed-width table, do the same thing but type in the pixel width for each top cell and leave the default at "pixels".
Monday, November 2, 2009
Second project file (last class)
<!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">
html,body{margin:0;padding:0}
body{font: arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h2{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{width:700px;margin:0 auto}
div#navigation{float:left;width:350px;height:100px;}
div#extra{float:right;width:350px;height:100px;}
div#footer{clear:both;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Welcome to our sample website</h2>
</div>
<div id="content">
<p class="border">We will demonstrate a number of HTML
coding techniques,
including images, links, and styled layout.</p>
<p>Thanks for visiting!</p>
</div>
<div id="navigation">Navigation links go here</div>
<div id="extra"><a href="mailto:hce@epix.net">Email us.</a>
<a href="mailto:hce@epix.net"><img alt="" src="mail.png" height="48" width="48"></a></div>
<div id="footer">Copyright 2009</div>
</div>
<!-- close div wrapper -->
</body></html>
<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">
html,body{margin:0;padding:0}
body{font: arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h2{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{width:700px;margin:0 auto}
div#navigation{float:left;width:350px;height:100px;}
div#extra{float:right;width:350px;height:100px;}
div#footer{clear:both;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Welcome to our sample website</h2>
</div>
<div id="content">
<p class="border">We will demonstrate a number of HTML
coding techniques,
including images, links, and styled layout.</p>
<p>Thanks for visiting!</p>
</div>
<div id="navigation">Navigation links go here</div>
<div id="extra"><a href="mailto:hce@epix.net">Email us.</a>
<a href="mailto:hce@epix.net"><img alt="" src="mail.png" height="48" width="48"></a></div>
<div id="footer">Copyright 2009</div>
</div>
<!-- close div wrapper -->
</body></html>
Monday, October 26, 2009
Project file we worked on in class
<!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>
<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 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>
Subscribe to:
Posts (Atom)