Web Fundamentals: The developing (Web) Story

 

Lab Purpose

The purpose of this lab is to establish a development environment for your web work. Having good tools -- and understanding how they work -- provides significant advantage to a web developer. We will look at some more complicated tools along the way, but we will begin with a simple editor and a small browser set.

Our goals include:

Lab Description

This is our beginning foray into the web. At first, you won't even put your finished work on the web (that's our next lab!). You'll complete this lab and we will just review it. But make sure you save a copy, because in the very next lab we create a class course page, add this lab to it as a link, and publish it to a department server. However,  first things first.

As an overview, you are going to copy and paste some code into a simple editor. If you are using Windows, your editor should be Notepad++. If you are a Mac user, TextEdit is a fine tool. Once you have copied the HTML source code into your editor, you'll make a simple edit to the code and save your file. Each step along the way, you'll view your file in both the Windows and Mozilla browsers. Finally, you will validate your file using a free online validation tool. Remember, this is our first and last lab. After this, we are on the web, baby!

Lab Deliverables

Lab Directions

 

<!doctype html>
<head>
<meta charset="utf-8">
<title>Title of page goes here</title>
<!-- Author: JoeBlow Student -->
<style type = "text/css">
body {
width:760px;
margin:5px auto;
border-radius:15px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
</style>
</head>

<body>
<h1>My first valid HTMl5 File</h1>

<p>
Nooooooo! The semester can't be starting already!
</p>
</body>
</html>

 

 

Lab DeBrief