You are on page 1of 6

Creating a simple website with HTML and CSS

The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means
DOCument TYPE). In this case, it is HTML version 5. For the CSS the version type here will be a mix
or CSS 2 & 3

Words within < and > are called tags and, as you can see, the document is contained within the
<html> and </html> tags. Between <head> and </head> there is room for various kinds of
information that is not shown on screen. So far it contains the title of the document, but later we
will add the CSS style sheet there, too.

The <body> is where the actual text of the document goes. In principle, everything in there will be
displayed, except for the text inside <!-- and -->, which serves as a comment to ourselves. The
browser will ignore it.

Of the tags in the example, <ul> introduces an Unordered List, i.e., a list in which the items are
not numbered. The <li> is the start of a List Item. The <p> is a Paragraph. And the <a> is an
Anchor, which is what creates a hyperlink.

Using either brackets, Adobe edge code, HTML kit or notepad ++.

1. Start with your basic html code. This provides the skeleton of your website.

<!DOCTYPE html>

<html>
<head><title>my first page</title>
</head>
<body>

<h1>Welcome to my site</h1>

<p>Lorem psum dolor sit amet, consectetur adipiscing elit. Quisque congue nulla a neque tincidunt,
et gravida purus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at erat sit amet
velit rutrum hendrerit nec rutrum tincidunt.</p>

</body>
</html>

2. Save your 1st page as index.html. We will now add a navigation bar and footer to the website.

<!DOCTYPE html>

<html>
<head><title>my first page</title></head>
<body>

<ul>
<li><a href=index.html>Home</a></li>
<li><a href=about.html>Home</a></li>
<li><a href=contact us.html>Home</a></li>
<li><a href=work.html>Home</a></li>
<li><a href=news.html>Home</a></li>
</ul>

<h1>Welcome to my site</h1>

<p>Lorem psum dolor sit amet, consectetur adipiscing elit. Quisque congue nulla a neque tincidunt,
et gravida purus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at erat sit amet
velit rutrum hendrerit nec rutrum tincidunt.</p>

<p>copyright &copy. All rights reserved</p>

</body>
</html>

3 For this exercise an external style sheet will be used. Before creating any CSS or linking the style
sheet, you need to section the HTML code with div ids. Div ids help identify the CSS elements
you want to style.

<!DOCTYPE html>

<html>
<head><title>my first page</title></head>
<body>
<div id="page">

<div id="navigation">
<ul>
<li><a href=index.html>Home</a></il>
<li><a href=about.html>Home</a></il>
<li><a href=contact us.html>Home</a></il>
<li><a href=work.html>Home</a></il>
<li><a href=news.html>Home</a></il>
</ul>

<div id="content">
<h1>Welcome to my site</h1>

<p>Lorem psum dolor sit amet, consectetur adipiscing elit. Quisque congue nulla a neque tincidunt,
et gravida purus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at erat sit amet
velit rutrum hendrerit nec rutrum tincidunt.</p>

<div id="footer">
<p>copyright &copy. All rights reserved</p>
</div>
</div>
</body>
</html>

4 To add an image to your page, you add the image to your HTML and a class instead of an id
<!DOCTYPE html>

<html>
<head><title>my first page</title></head>
<body>
<div id="page">

<div id="navigation">
<ul>
<li><a href=index.html>Home</a></il>
<li><a href=about.html>Home</a></il>
<li><a href=contact us.html>Home</a></il>
<li><a href=work.html>Home</a></il>
<li><a href=news.html>Home</a></il>
</ul>

<div id="content">
<h1>Welcome to my site</h1>

<p>Lorem psum dolor sit amet, consectetur adipiscing elit. Quisque congue nulla a neque tincidunt,
et gravida purus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at erat sit amet
velit rutrum hendrerit nec rutrum tincidunt.</p>

<div class=image>
<img src =castle.jpg alt=image of a castle width = 500px height =300px/>
</div>

<div id="footer">
<p>copyright &copy; All rights reserved</p>
</div>
</div>
</body>
</html>

5 Create a new page in either brackets, Adobe edge code, html kit, note pad++. Create a new
page, save this page as mystylesheet.css. Return to your HTML page and type this into your head
section.

<!DOCTYPE html>

<html>
<head><title>my first page</title>
<link rel="stylesheet" href="mystylesheet.css" type="text/css"/>
</head>
<body>
<div id="page">

<div id="navigation">
<ul>
<li><a href=index.html>Home</a></li>
<li><a href=about.html>Home</a></li>
<li><a href=contact us.html>Home</a></li>
<li><a href=work.html>Home</a></li>
<li><a href=news.html>Home</a></li>
</ul>

<div id="content">
<h1>Welcome to my site</h1>

<p>Lorem psum dolor sit amet, consectetur adipiscing elit. Quisque congue nulla a neque tincidunt,
et gravida purus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at erat sit amet
velit rutrum hendrerit nec rutrum tincidunt.</p>
<br>
<p>
Lorem psum dolor sit amet, consectetur adipiscing elit. Quisque congue nulla a neque tincidunt, et
gravida purus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at erat sit amet
velit rutrum hendrerit nec rutrum tincidunt.</p>

<div class=image>
<img src =castle.jpg alt=image of a castle width = 500px height =300px/>
</div>

<div id="footer">
<p>copyright &copy. All rights reserved</p>
</div>
</div>
</body>
</html>

6 In your CSS page you can add this to your page.

body
{
font-size:14px; color:#000;
font-family:helvetica,sans-serif;
}

7 You can create a large background in Photoshop and add it to your CSS using

background-image:url("background1.png");

8 You can either add no repeat or repeat the background image and fix the image size so it fills
the page and does not skew.

background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
margin: 0;
}

9 For your page to stand out from the background you can add.

#page {
max-width:960px;
min-width:720px;
margin:10px auto 10px auto;
padding:20px;
background-color:#fff;

10 To style the navigation bar add

ul#navigation{
width:680px;
padding:15px;
margin:0px auto 0px auto;
border:1px solid #000;
border-width:1px 0;
text-align:left;
list-style:none;

ul#navigation li{
display:inline;
margin:0px 3px;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

11 These properties style your links and mouse over.

a{
color:#000;
text-decoration:none;
padding:6px 18px 5px 18px;
}

a:hover,a.on
{
color:#ccc;
background-color:#fff;
}

12 Next to add layout properties to your content

#content {
width: 680px;
padding: 15px 15px 15px;
margin:0px auto 0px auto;
}

13 Add positioning to your image

.image{
text-align:center;
padding: 10px;
}

14 Next will be your footer. You can either centre your footer or align it to the left or right

#footer{
text-align:center;
margin: 10px auto 10px auto;
padding: 15px 10px 15px 10px;
}

15 As you enter new changes to your style page, please save your page each time. You can copy
and paste the HTML to each of your other pages. Your page should be finished, you can add
more text and images to your site and position them with CSS.

Using the HTML & CSS code given above, your web pages should look similar to this. I
have added an image as my title, images that links to social media and an image
slider.