Create Your First Webpage

This is my first time to create a "tutorial" about webpage. Although I'm not that good but I'll give all my knowledge and techniques on this post and try to explain it as easy as it should be. haha
Some of my works here: Click Me

So let's start with the basic, mostly webpage has HEADER, CONTENT AREA, SIDEBAR and FOOTER.

1. Open Notepad ( you may use Wordpad or Dreaweaver)
<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
    </head>
<body>
CONTENTS WILL APPEAR HERE
</body>
</html>
Just copy the code above,it's a start. Save it as "samplepage.html". Now the explanation for this,


  • All the codes that are present from <head> to </head> won't display on the browser except for the title that is visible on the browser's title bar.
  • All the texts, images, videos, etc will be visible on the browser if it is place inside the <body>....</body> even the invalid codes.
  • Each HTML element should always have a closing tag, otherwise it won't work. In some case "<br>" will work but it is much better to use "<br/>". Notice that each element has a "partner", for <head>  there is </head>.
    • <br/> is more like a next line or enter when in MSWord 
2. Centering the page.
<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
    </head>
<body>
<center>CONTENTS WILL APPEAR HERE
</center></body>
</html>
 If you will not set it on center, the default placement will be on the left. Later, I'll teach how to place it on right, left and center with another method. "<center>...</center>" tags may be obsolete but still effective. hehehe

3. Adding the Header, Content Area, Sidebar and Footer
Let's remove the text "CONTENTS WILL APPEAR HERE" first. 
<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
    </head>
<body>
<center>
<div id="main">
<div id="header"/>
<div id="content"/>
<div id="sidebar"/>
<div id="footer"/>
</div> 

</center>
</body>
</html>
 Explanation, if you just want it. hehe

  • Notice that div with the id header, content, sidebar and footer were enclosed with the div main, it means that all the elements inside the div id main can be manipulated. Let's say for example: 

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
    </head>
<body>
<div id="main" align="center">
<div id="header"/>
<div id="content"/>
<div id="sidebar"/>
<div id="footer"/>
</div>
</body>
</html>
 Delete the "<center>.. </center>" tags. All the element inside the "main" div will be centered because of the align="center" property. If you save it and browse it, you will notice that it's blank.

Now, let's define the main header, content,sidebar and footer div or division. Here comes the CSS.

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
</style>
    </head>
<body>
<div id="main" align="center">
<div id="header"/>
<div id="content"/>
<div id="sidebar"/>
<div id="footer"/>
</div>
</body>
</html>

Ooops! Let's do the body first.


<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{background-color:#e1e1e1;}</style>
    </head>
<body>
<div id="main" align="center">
<div id="header"/>
<div id="content"/>
<div id="sidebar"/>
<div id="footer"/>
</div>
</body>
</html>

Save it, you will see that the background changes from white which is the default to gray. Next,

Let's do the main division

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}

</style>
    </head>
<body>
<div id="main">
<div id="header"/>
<div id="content"/>
<div id="sidebar"/>
<div id="footer"/>
</div>
</body>
</html>

Notice that I removed the "align="center" property, the other way to center the page is to use margin . I advice to use "%" value for height rather than fixed like on width. This will be the progress of your page:
Let's do the Header division
 <html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-color:#f3f3f3;
margin: -10px auto 0;
}
p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
}

</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
</div>

<div id="content"/>
<div id="sidebar"/>
<div id="footer"/>
</div>
</body>
</html>

We have to remove the end tag of the header div first. From this "div id="header"/>" to "<div id="header> .....</div>".  We have to do it to add another elements inside the header division, like the text "I AM THE HEADER" which define through CSS. Meanwhile...
after styling the header div
Next is the sidebar and content area.


<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-color:#f3f3f3;
margin: -10px auto 0;
}
div#content{
width: 75%;
height: 100%;
float:right;
background-color:white;
}
div#sidebar{
width: 25%;
height: 100%;
float:left;
background-color:lightblue;
}

p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
}
p.contenttext{
text-align:justify;
padding: 10px;
font-size: 14px;
}
p.sidebartext{
text-align:justify;
padding: 10px;
font-size: 12px;
}

</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
</div>
<div id="content">
<p class="contenttext"> This is a sample content text.</p>
</div>
<div id="sidebar">
<p class="sidebartext"> This is a sample sidebar text.</p>
</div>

<div id="footer"/>
</div>
</body>
</html>

Just like what we did as the header. The float property is used to place the content on the right  and the sidebar on the left. This should be output now...
after styling sidebar and content area
 and now the Footer:

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-color:#f3f3f3;
margin: -10px auto 0;
}
div#content{
width: 75%;
height: 100%;
float:right;
background-color:white;
}
div#sidebar{
width: 25%;
height: 100%;
float:left;
background-color:lightblue;
}
div#footer{
width:800px;
height:100px;
background-color:#afafaf;
position:relative;
margin:0 auto;
}

p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
}
p.contenttext{
text-align:justify;
padding: 10px;
font-size: 14px;
}
p.sidebartext{
text-align:justify;
padding: 10px;
font-size: 12px;
}
p.footertext{
text-align:center;
font-size: 10px;
margin-top: 50px;
}

</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
</div>
<div id="content">
<p class="contenttext"> This is a sample content text.</p>
</div>
<div id="sidebar">
<p class="sidebartext"> This is a sample sidebar text.</p>
</div>
</div>
<div id="footer">
<p class="footertext">2012. All Rights Reserved. mattmorz.</p>
</div>

</body>
</html>

Notice that we moved the footer division from main division. This is to place it below the main division and not  to overlap. We have now created a simple webpage.
after styling all the divisions
 Let's play with it, I mean beautify it! :D

Add links below the header:

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-color:#f3f3f3;
margin: -10px auto 0;
}
div#content{
width: 550px;
height: 100%;
float:right;
background-color:white;
}
div#sidebar{
width: 250px;
height: 100%;
float:left;
background-color:lightblue;
}
div#footer{
width:800px;
height:100px;
background-color:#afafaf;
position:relative;
margin:0 auto;
}
p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
}
p.contenttext{
text-align:justify;
padding: 10px;
font-size: 14px;
}
p.sidebartext{
text-align:justify;
padding: 10px;
font-size: 12px;
}
p.footertext{
text-align:center;
font-size: 10px;
margin-top: 50px;
}


div.links{
margin: -30px 0 0 0;
background-color:#333;
}

div.links a{
padding: 0 20px 0 20px;
text-decoration: none;
color: white;
}

div.links a:hover{
text-decoration: none;
color: black;
border-top:2px solid #343434;
background-color:white;
}


</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
<div class="links">
<a href="#"> Home</a>
<a href="#"> About</a>
<a href="#"> Contact</a>
<a href="#"> Gallery</a></div>
</div>

<div id="content">
<p class="contenttext"> This is a sample content text.</p>
</div>
<div id="sidebar">
<p class="sidebartext"> This is a sample sidebar text.</p>
</div>
</div> <div id="footer">
<p class="footertext">2012. All Rights Reserved. mattmorz.</p>
</div>
</body>
</html>
Now, let's use image as header and not just color. We have to create a new folder, place the HTML file on it then create another folder inside and name it images and place all the images there.


<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-image:url(images/header.png);
margin: -10px auto 0;
}

div#content{
width: 550px;
height: 100%;
float:right;
background-color:white;
}
div#sidebar{
width: 250px;
height: 100%;
float:left;
background-color:lightblue;
}
div#footer{
width:800px;
height:100px;
background-color:#afafaf;
position:relative;
margin:0 auto;
}
p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
color:white;
font-family:Arial;
}

p.contenttext{
text-align:justify;
padding: 10px;
font-size: 14px;
}
p.sidebartext{
text-align:justify;
padding: 10px;
font-size: 12px;
}
p.footertext{
text-align:center;
font-size: 10px;
margin-top: 50px;
}
div.links{
margin: -30px 0 0 0;
background-color:#333;
}
div.links a{
padding: 0 20px 0 20px;
text-decoration: none;
color: white;
}
div.links a:hover{
text-decoration: none;
color: black;
border-top:2px solid #343434;
background-color:white;
}

</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
<div class="links">
<a href="#"> Home</a>
<a href="#"> About</a>
<a href="#"> Contact</a>
<a href="#"> Gallery</a></div>
</div>
<div id="content">
<p class="contenttext"> This is a sample content text.</p>
</div>
<div id="sidebar">
<p class="sidebartext"> This is a sample sidebar text.</p>
</div>
</div> <div id="footer">
<p class="footertext">2012. All Rights Reserved. mattmorz.</p>
</div>
</body>
</html>

Instead of background-color property, we use background-image. This should be our output now:
after adding links and image in the header
Let's add an image on the content division.

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-image:url(images/header.png);
margin: -10px auto 0;
}
div#content{
width: 550px;
height: 100%;
float:right;
background-color:white;
}
div#sidebar{
width: 250px;
height: 100%;
float:left;
background-color:lightblue;
}
div#footer{
width:800px;
height:100px;
background-color:#afafaf;
position:relative;
margin:0 auto;
}
p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
color:white;
font-family:Arial;
}
p.contenttext{
text-align:justify;
padding: 0 10px 0 10px;
font-size: 14px;
font-family:Arial;
}
p.sidebartext{
text-align:justify;
padding: 10px;
font-size: 12px;
}
p.footertext{
text-align:center;
font-size: 10px;
margin-top: 50px;
}
div.links{
margin: -30px 0 0 0;
background-color:#333;
}
div.links a{
padding: 0 20px 0 20px;
text-decoration: none;
color: white;
}
div.links a:hover{
text-decoration: none;
color: black;
border-top:2px solid #343434;
background-color:white;
}
img.contentimg{
padding:10px;
float:left;
}
h1{
padding-left:10px;
margin-bottom:-5px;
font-size: 30px;
color:#343434;
font-family:Arial;
}
</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
<div class="links">
<a href="#"> Home</a>
<a href="#"> About</a>
<a href="#"> Contact</a>
<a href="#"> Gallery</a></div>
</div>
<div id="content">
<h1>Sample Title</h1>
<img class="contentimg" src="images/content.png" width="150"
height="150"/>

<p class="contenttext"> Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="sidebar">
<p class="sidebartext"> This is a sample sidebar text.</p>
</div>
</div> <div id="footer">
<p class="footertext">2012. All Rights Reserved. mattmorz.</p>
</div>
</body>
</html>

Study the image tag,you can define its width and height through CSS or inside it's tag. We have also added h1 tag and define it through CSS.
after adding h1 tag and img on the content div
Let's and image gallery on the sidebar just show on how to use table tags.
<table>
     <tr>
         <td>content here</td>
      </tr>
</table>
tr is for the row and td is the table cell where you can put the contents. You can add multiple td in a tr depends on what you want and need.

<html>
   <head>
      <title>YOUR TITLE GOES HERE</title>
<style type="text/css">
body{
background-color:#e1e1e1;
}
div#main{
width: 800px;
height:100%;
background-color:#343434;
margin: -10px auto 0;
}
div#header{
width:800px;
height: 100px;
background-image:url(images/header.png);
margin: -10px auto 0;
}
div#content{
width: 550px;
height: 100%;
float:right;
background-color:white;
}
div#sidebar{
width: 250px;
height: 100%;
float:left;
background-color:lightblue;
}
div#footer{
width:800px;
height:100px;
background-color:#afafaf;
position:relative;
margin:0 auto;
}
p.headertext{
text-align:center;
padding: 35px;
font-size: 35px;
margin: -10px auto 0;
color:white;
font-family:Arial;
}
p.contenttext{
text-align:justify;
padding: 0 10px 0 10px;
font-size: 14px;
font-family:Arial;
}
p.sidebartext{
text-align:justify;
padding: 10px;
font-size: 12px;
}
p.footertext{
text-align:center;
font-size: 10px;
margin-top: 50px;
}
div.links{
margin: -30px 0 0 0;
background-color:#333;
}
div.links a{
padding: 0 20px 0 20px;
text-decoration: none;
color: white;
}
div.links a:hover{
text-decoration: none;
color: black;
border-top:2px solid #343434;
background-color:white;
}
img.contentimg{
padding:10px;
float:left;
}
h1{
padding-left:10px;
margin-bottom:-5px;
font-size: 30px;
color:#343434;
font-family:Arial;
}
</style>
    </head>
<body>
<div id="main">
<div id="header">
<p class="headertext"> I AM THE HEADER</p>
<div class="links">
<a href="#"> Home</a>
<a href="#"> About</a>
<a href="#"> Contact</a>
<a href="#"> Gallery</a></div>
</div>
<div id="content">
<h1>Sample Title</h1>
<img class="contentimg" src="images/content.png" width="150" height="150"/>
<p class="contenttext"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="sidebar">
<h1>Images</h1>
<p class="sidebartext">These images below are just samples.</p>
<table align="center">
      <tr>
         <td><a href="#" title="sample image 1"><img src="images/sidebar.jpg"/ width="150" height="150px"></a></td>
      </tr>
<tr>
         <td><img src="images/sidebar1.jpg"/ width="150" height="150px"></td>
      </tr>
<tr>
         <td><img src="images/sidebar2.jpg"/ width="150" height="150px"></td>
      </tr>
</table>

</div>
</div> <div id="footer">
<p class="footertext">2012. All Rights Reserved. mattmorz.</p>
</div>
</body>
</html>
 This shows on how to create an image link by using this tag:
<a href="link here" title="any text here"><img src="path of the image" width="number in px" height="number in px"></a>
 Current output,
after using table on the sidebar
 I guess that's it! Play with CSS, it's harmless.
Download the source code here: Click Me
Download the W3Schools Offline for your reference here:Click Me

Questions? hehe..Just drop a comment or use the contact page.

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Add/Subtract Single Digit Number in Assembly Language