On 12.06.06, In HTML is a great way to self code your website or any other content you might have and create a webpage to broadcast to the world. Some prefer builders programs.
HTML is a great way to self code your website or any other content you might have and create a webpage to broadcast to the world. Some prefer builders programs, free and paid such as webs.com which is a free builder but for those that like to create their own here i will explain a little how.
What you will need:
1. notepad or textedit
Im using Sublimtext 2 as my html editor.
What we will have to start is a blank page with basic html tags.
Open your text imput program and create new file. Once created add the basic html code like this.
This is your basic plain page without any content added. Now save to your desktop the file as mysite.html or whatever you choose. I purposely left out the close </head> and the </title> because we will get to that next.
Now that we have a basic page, Lets call it something.
Between the <title>tag create a name or phrase or basicaly anything you want</title> like that.
Save.
Now go to your desktop and double click on the mysite.html.
You shou see this: With whatever you named your site as.
Next we will add a header. This will be the top and first actuall content on your newly created page.
Between the <head>tag type in here what you want your heading to say</head>
Save.
Next you want to add some elements. Lets change the background color.
Below the <head> tag lets c add some style.
Add:
<style type=”text/css”>
body{
margin:0;
padding:10px 0 0 0;
text-align:center;
background-color:#117722;
background-repeat:repeat-x;
background-position:top left;
background-attachment:;
}
</style>
This allows you to change the color of the back ground. If you know the color codes cool, for those that dont just type in the color name in (background-color:the color you choose goes here;).
Save.
Now you can actually see your creation unfold right in front of you from your actions.
Now its time to add our self updated time and date widget.
Add this:
<div id=”layout_row1″>
<div id=”sys_region_1″ style=”margin:0px; padding:5px; vertical-align:top; line-height:normal; min-width:100px” class=”zone_top” ><div id=”I1414″ style=”display:block;clear: both;text-align:center;” class=”HTML_Default”>
<div id=”I1414_html”><b><script type=”text/javascript”>
tday =new Array(”Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”);
tmonth=new Array(”January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”);
function GetClock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
if(nyear<1000) nyear=nyear+1900;
if(nhour == 0) {ap = ” AM”;nhour = 12;}
else if(nhour <= 11) {ap = ” AM”;}
else if(nhour == 12) {ap = ” PM”;}
else if(nhour >= 13) {ap = ” PM”;nhour -= 12;}
if(nmin <= 9) {nmin = “0″ +nmin;}
document.getElementById(’clockbox’).innerHTML=”"+tday[nday]+”, “+tmonth[nmonth]+” “+ndate+”, “+nyear+” “+nhour+”:”+nmin+ap+”";
setTimeout(”GetClock()”, 1000);
}
window.onload=GetClock;
</script>
<div id=”clockbox”></div>
And your end result will look like this:
There is way more you can do from here but here is your basic html page with self updated time and date widget.
if you found this helpful follow me on twitter or on facebook.
Thanks for reading.
