on air

Creating Your First Web Page.

back home » webtutorials » Creating Your First Web Page.


Scenario.

It's always the pride of every beginner to be able, creating the first web page all alone.

I'm quite sure before starting this tutorial. You've learned enough about HTML and CSS to take you along.

Basic Knowledge.

What you'll initially need to think of before starting to create your first web page is the <DOCTYPE> DTD. And the size of the document you are about to create.

Fixed Width.

The width of a web page must always be defined to avoid it expanding automatically. Which may cause it displaying an unforeseen layout format in a browser.

[ Preferably in percentage (%) ].

Auto Height.

Usually, the height of a web page has never been a problem. Because of the natural col length acceptance in browsers which allows document's content to travel downwards instead of floating over the fixed width. [Allow Auto Height].

Convert Pixel Width To Percentages.

It's essential using percentage these days in creating web pages. This way your site pages will scale more better on different devices and will be more friendly than using pixels.

You can use http://responsv.com/flexible-math/ to do your conversion easily.

Example Web Page.

Now let's see how we'll put what we've learned into working.

The illustration below indicates an HTML5 document with a head section CSS declarations that formats an ID, P, Body, Ol, H1, H3 and a DIV elements in the HTML document.

Study Illustration below carefully.

<!doctype htm>
<html>
<head>
<title>My First Web Page.</title>
<style type="text/css">
<!--
/*CSS starts here*/
#container { 
width:550px; 
height:auto;
margin: 0px auto;
}
#mainContent { 
width:97%; 
height:auto;
margin: 0px auto;
padding:0px 10px;
border:#ededed solid 1px;
background-color:#000;
}
body {background-color:#484848;
}
p {font-family:Verdana, Arial, Helvectica;
font-size: 1em;
color: #FF0;
}
ol {
list-style-type:none;
margin-left:0px;
padding-left:5px;
}
h1 {font-family:Verdana, Arial, Helvectica;
text-align:center;
font-size:2em;
text-decoration:underline;
color:#FFF;
}
h3 {font-family:Verdana, Arial, Helvectica;
font-size:1.4em;
text-decoration:underline;
color:#FFF;
}
div.imagine {
margin:0px auto;
width:100%; height:auto;
} /*CSS ends here*/ --> </style> </head> <body> <div id="container"> <div id="mainContent"> <h1>My First Web Page Heading.</h1> <p>This paragraph is all about my first web page. With a head section, CSS that formats the HTML elements here within.</p> <p>And another paragraph followed by an image placed in a centered DIV container.</p> <div class="imagine"> <!--For the image to display in a browser, the source [src="xxx"] should follow the path as described below, and the image folder must contain an image name, webpage.gif.
--> <img src="images/webpage.gif" alt="my first web page"> </div> <h3>List of HyperLinks</h3> <p>Below are list of links you may love to visit.</p> <ol> <li><a href="http://ghanachild.com">Ghanachild</a></li> <li><a href="http://google.com">Google</a></li> <li><a href="http://yahoo.com">Yahoo</a></li> <li><a href="http://bing.com">Bing</a></li> </ol> </div> </div> </body> </html>

Practice Rewriting The Code Above.

You may try to rewrite the code into your NOTEPAD, save it under your chosen name .html or .htm and preview in a browser of your choice. You may also use my direct preview to see how the code will look in a browser.

Note: You can copy, paste and save it as describe above. However, trying to rewrite the code yourself will strengthen your skills of creating your pages with a pride.

Create Your First Web Page.

Clicks4UrMind

Man will give you worldly powers, and make you feel on top of all, note this is temporally and could be redrawn at anytime sending you back to the ground floor of life. However, the Lord Almighty, the one and the only rightful ruler of the Universe, blesses everlastingly.

Brain

Knowledge is Power, but Power is not Knowledge. Wisdom is the truthful Power that identifies the Knowledge within the man. And only, I repeat 3x. Only the almighty God has the power to bless the man with his Wisdom forever.

To achieve the Lord's blessings, cease not praying daily, asking for his Wisdom, and you'll be blessed abundantly...

 

SPYERA PHONE

Spyera Phone

Spyera Phone version is software that you install on a smart phone to monitor everything happening on the phone. After installation, SPYERA secretly records events (sms, call history, phone book, location, emails, What's App messages, IM, Facebook Chat, Skype, See photos taken and many more...) that happen on the phone and delivers these information to a web account, where you can view these reports 24/7 from any Internet enabled computer or mobile phone. SPYERA also allows you to listen to the surroundings of the target mobile , listen to the phone conversation and to know the location of the device.


Please, Kindly Donate What You Can, Enabling Us Pay Hosting And Domain Costing, And Do More.

Please Donate