Creating Your First Web Page | HCDE537

Let’s take a look at creating your first Web Page!

View: http://students.washington.edu/sinkum/create-your-first-webpage/

Download: http://www.sccc.premiumdw.com/examples/create-your-first-webpage.zip

Step One: Get Your Index File

When you log into your web server, you will see a default index.html file that we can “get” and use to start building our first web page:

Get Your Index File

Step Two: Add a !Doctype

You will need to add a !doctype to your file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Copy and paste the above !doctype into your index file:

Add a !Doctype Into Your Page

Step Three: Add Your Content Type

You will need to add a content type into your index file:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Copy and paste the above “Content-Type” into your index file:

Add A Content Type Into Your Page

Step Four: Replace the Style Sheet

Let’s replace the existing embedded style sheet in your index file:

<style type="text/css" media="all">
* { margin: 0; padding: 0; border: 0; }
body {
background-color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
h1 {
width: 500px;
font-size: 32px;
line-height: 32px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 50px;
border-bottom: 1px solid #000000;
}
h2 {
width: 500px;
font-size: 21px;
line-height: 21px;
font-style: normal;
padding-top: 8px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 50px;
}
p {
width: 500px;
font-size: 14px;
line-height: 21px;
letter-spacing: 0px;
text-align: justify;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 50px;
}
</style>