Creating Your First Web Page | HCDE532 | Students of Premium Design Works

HCDE532 » Creating Your First Web Page

Now that you have set up your server space, Let’s take a look at creating your first Web Page!

My First Web Page

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

Code: https://github.com/msinkula/HCDE598/tree/master/create-your-first-webpage

Step One: Login To Your Server

When you log into your web server, you will see a default index.html file that we will over-write when building our first web page:

Get Your Index File

Step Two: Create a New HTML5 Page

You can use Dreamweaver to create a new HTML5 page for you by choosing File > New:

Create a New Document in Dreamweaver

You will then want to create a “Blank” HTML page with the DocType set to HTML5:

Create a Blank HTML5 Page

Once you create this page, you should see a blank HTML5 page in your code pane:

Code for a Blank HTML5 Page

You can then save this new file as your “index.html” file:

Save as “index.html”

Step Three: Add Some Content

You can now add some content to your page between the body tags.

Lectures:

The Building Blocks of HTML | HCDE532 | Students of Premium Design Works
The Basics of HTML & CSS | HCDE532 | Students of Premium Design Works

I will be using the whole kitchen sink for my content:

<h1>Mike Sinkula's First Web Page!</h1>
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.</p>
<p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h3>Header Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>

See Also:

HTML Elements | W3 Schools
HTML Links | W3 Schools

Get Some:

Step Four: Create an Internal Style Sheet

Now that we have added our markup for our content, it is time to give it a proper presentation.

Lectures:

The Anatomy of CSS | HCDE532 | Students of Premium Design Works
Styling Text with CSS | HCDE532 | Students of Premium Design Works

Therefore, let’s create an embedded/internal style sheet in your index file:

<style type="text/css" media="all">

* { margin: 0; padding: 0; }

body {
background-color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

h1 {
width: 620px;
font-size: 36px;
line-height: 36px;
margin-top: 25px;
margin-bottom: 20px;
margin-left: 50px;
border-bottom: 1px solid #000000;
}

h2 {
width: 620px;
font-size: 24px;
line-height: 24px;
padding-top: 8px;
margin-bottom: 2px;
margin-left: 50px;
}

h3 {
width: 620px;
font-size: 18px;
line-height: 18px;
padding-top: 8px;
margin-bottom: 2px;
margin-left: 50px;
}

p {
width: 620px;
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
margin-left: 50px;
}

ol, ul {
width: 620px;
font-size: 16px;
line-height: 24px;
padding-left: 40px;
margin-bottom: 10px;
margin-left: 50px;
}

</style>