In-class examples.
Find and fix all mistakes
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<title>A very simple web page -- CSci 1001</title>
<body>
<!-- heading element -->
<h2>A very simple web page</h1>
<!-- This is a paragraph. You can use p tag for a paragraph -->
<p>Welcome to your <em>first web page in this course! In this
course you will learn:</p></em>
<!-- this is an unordered list: -->
<ul>
<li>How to mark the contents of your pages using HTML
<li>How to set appearance of different elements in your pages using
CSS
<li>How to add dynamic elements to your web pages using Javascript.
</ul>
Helpful tips
<!-- this is an ordered, or numbered, list: -->
<ol>
<li>You can see the <abbr title=Hypertext Markup
Language>HTML</abbr> code of the page (it's called <dfn>the
source</dfn>).</li>
<li>The source code of your page should look <boldface>neat</boldface> and
<em>organized</em>, this way it's easier to read and to change if
needed.</li>
<!-- below is an example of an anchor tag <a> used for linking one
web page to another
href is an attribute of the tag, and http://www.w3.org/TR/xhtml-basic/
it's value
-->
<li>While most modern browsers don't require compliance with XHTML,
<cite>W3C</cite> recommends to follow <href="http://www.w3.org/TR/xhtml-basic/">this specification</a>.</li>
</ol>
<h4>General advice</h4>
<p>It helps to take a outdoor walk while thinking about HTML. In
Morris you can find some nice views:</p>
<!-- the file winter_walk.jpg is in the folder images -->
<!-- alt attribute is used for browsers that don't show images or for
visually disabled -->
<p><img "images/winter_walk.jpg" height="400" ></p>
</hr>
</html>
</body>
What is the result of css fomatting of this page?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="example.css" />
<title>A sample web page</title>
</head>
<body>
<h1>A web page about me</h1>
<p>
Hi, this is my web page about myself. I was
born <a href="https://maps.google.com/">somewhere</a> <a href="http://www.timeanddate.com/calendar/">at
some point</a>.
</p>
<p>
This is a picture of me when I was little:
<img src="littleme.jpg" alt="A picture of me" height="200" width="300" />
I was a <strong>very</strong> cute baby.
</p>
<h2 class="important">My hobbies</h2>
<p>
I have a lot of hobbies:
</p>
<ol>
<li>Gardening</li>
<li>Soccer</li>
<li class="important">Astronomy</li>
</ol>
<h2>My pets</h2>
<p>
I am very fond of my pets, they are fun to play with or to watch. In have quite a few:
</p>
<ul>
<li>A <a href="http://en.wikipedia.org/wiki/Goldfish">goldfish</a></li>
<li class="important">A cat</li>
<li>I had a pet butterfly at some point, but then it flew away.</li>
</ul>
<p id="theend">
And that's all you need to know about me.
</p>
</body>
</html>
body {
background-color: #FFDAB9; /* PeachPuff */
color: #191970; /* MidnightBlue */
}
a {
font-style: italic;
}
li a {
font-size: large;
}
.important {
background-color: #FF7F50; /* Coral */
}