Create Your First Webpage

Posted on
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

Auto-calculate your Splinterlands Assets/Income

Posted on Post a Comment
Image
  Keep track of your Splinterlands assets or income by using this tool: http://kagkaghair.herokuapp.com/spl/calculate All you have to do is key in your username in Splinterlands.  The values are rough estimates only, exchange rates are fetch from coingecko and your DEC, CREDITS and CARDS are from Splinterlands API. The values are in PHP and computed using the following method: DEC value is computed by multiplying your DEC to its rate in peso. CARDS value is calculated by adding all your cards using the last price from the market (which is in dollar) then it is multiplied to dollar to peso exchange rate. SPS value is computed by multiplying your SPS to its rate in peso. CREDITS is computed by dividing it in 1000 and multiplying to dollar to peso exchange rate.
Read more

Creating a Simple Button for Demo

Posted on Post a Comment
This is the result: Live Demo And the code for this is: For CSS Mark-Up, Paste is before  ]]></b:skin> a.demo{   background:skyblue;   padding:5px 20px 5px 20px;   text-align:center;   font-family: Arial;   font-size:18px;   border:#e1e1e1 1px solid;   -webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;   box-shadow: 0 8px 6px -6px black;   color:#e1e1e1; } a:link.demo,a:visited.demo{   text-decoration:none;   } a:active.demo {text-decoration: none;color:gray;padding:4px 20px 4px 20px;} a:hover.demo {text-decoration: none;box-shadow:none; } and this is how we use it. For HTML Mark-Up  <a class="demo" href=" LINK OF THE PAGE HERE " title="see it live">Live Demo</a> Every time we use this button just define the link by putting " class="demo" " just like the above example. You can customize the background, font and color ...
Read more

Splinterlands: Water Deck for Beginners

Posted on Post a Comment
Image
Splinterlands has been fun for me!  I love strategy games, coming from NarutoArena way back 2000s, this NFT game is enjoyable. Being a beginner, to get your rank up from Bronze III to Bronze II is hard compared to Bronze II to I. I guess because in B3 the only ruleset is Standard (no restrictions except mana costs) making it hard to select/build your splinter in battle.  In this post, I'll be sharing my water deck. I rented the cards below. Summoner : Alric Stormbringer +1 Magic to splinters and just 3 mana cost. This makes this summoner great. Tank :  Lobstradamus   For its hit points at 9 and ability to reduce damage from melee and range attacker, and just 6 mana cost this is a great tank although it is slow. Adding the +1 magic from Alric, you have 2 direct damage per attack. Support: Venari Wavesmith   This card adds armor to friendly monsters (plus +2 direct damage per turn), although it has 5 mana cost having this gives your low HP splinters protection fr...
Read more