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 */
}

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.