Scoroncocolo Tech Pages | How to Create a Web Page - Part One

Scoroncocolo TechPages

 only search Scoroncocolo

Windows Hacks and Facts

Cool Software.

XP and Vista tips and tweaks and lots of other geeky things for computer users

Blog Roll

LifeHacker


TechMeme


ReadWriteWeb


Online Tech Tips


How-To Geek


What's On My PC


Bill Mullins' Weblog - Tech Thoughts


evilfantasy's blog


AskBillFirst


 

Navigation

Home


Scoroncocolo's Intelligent Design


Goofing-off Page


The National Debt


The Beer Page


Me (Photo)


Contact Me




Recent Tech Page Posts

Internet Memes


How To Jailbreak an iPhone


Do You Speak Chinese?


Re-boot or Restore iPhone


Scan and Create QR Codes


Turn Off Google Search Plus


Popular, Free Smartphone Apps


Some Things I Didn't Know About the iPhone 4s


iPhone 4s Siri and Voice Activation


The A-Google-A-Day Game


Websites Blocked by China


Google's New What Do You Love


Google's New Me On The Web and Google Alerts


The Onion, Facebook and Literally Unbelievable.com


You Don't Need to Defrag Vista or Win 7 Hard Drives


Searching Google For Major News Stories Can Be Dangerous


Amazon Cloud Drive Music Player


Internet Explorer 9


Google Profile


Black Hat SEO Link Buying


Google Chrome 9 Browser


Listen To and Share Free Music With Mixtape.me


Go Mouseless - Use a Pc With Nothing But a Keyboard


Microsoft Windows 7 Keyboard Shortcuts


Microsoft Web Apps Vs Google Docs


Google Docs


Google Dashboard


Google Web History


HTML 5


Lock Down Your Facebook Privacy Settings


Firefox NoScript


Safe Web Browsing


Google's Free Services


Dropbox - File Storage, Syncing and Collaboration


Skydrive and Gladinet Cloud Desktop


Google Wave


Backup and Sync Files with SyncToy


Browsing the Web Inside a Sandbox


Windows Computer Tips and Tricks


Backup Your Music, Photos and Files for Free


StatCounter - Website Analytical Tool


Google PageRank


Long Tail SEO - How To Get More Hits to Your Blog


What Is SEO - SEO Do's and Dont's


Keyboard Shortcuts


What's the Best Web Browser?


Windows NotePad


Big Brother Is Watching


Windows Live Mesh


Vista's Flip3D and XP's WinFlip


Updating with Secunia and RadarSync


Live Sync


SkyDrive


What's Going On Behind Your Back


Vista Snipping Tool


Hide Files in JPEGs


Hide Files in Vista or XP


Input Director


Posted February 14, 2009

Bookmark and Share

How to Create a Web Page

The Basic Structure of a Web Document

HTML is an easy to understand language that is used to create Web pages. HTML (Hyper Text Markup Language) is written using tags which are American-English words or letters enclosed in the lesser than and greater than symbols on your keyboard. It's important to remember that almost all tags like the <p> tag which is the tag that Web Designdenotes a paragraph must be used with a corresponding closing tag. The closing tag for <p> is </p> which tells the Web browser that this is where this paragraph ends. All HTML documents (Web pages in in their coded form, which we are discussing here, are called HTML documents) must begin with <html>and end with </html> just like in the example code below. All HTML documents are divided into two sections: the head section and the body section. The head section of an HTML document begins with <head> and ends with </head> and the body section begins with <body> and end is with </body>. The head always rests on top of the body in an HTML document. Don't worry. We'll talk more about the head and body of HTML documents later on.

The following is a complete HTML document that will open as a Web page in any Web browser:


<html>

	<head>

<title>My Web Page</title>

	</head>

<body>

<p>This is my Web page</p>

</body>

</html>

That's it! That's all of the HTML code it takes to create a web page. Of course you'll need to get a domain name like ThisIsMe.com and you'll need to get some server space if you want to put your site on the Internet. But you don't need any of that to create Web pages. You can create all of your Web pages on your own computer and then when they look exactly the way you want them to look you can easily beam them up into cyberspace for all the world to see. You don't even need any software other than what you already have on your Windows or Mac computer. In Windows you can create all of your HTML documents with Windows NotePad. And notice I said NotePad and not WordPad. All versions of Windows comes with NotePad pre-installed. You may have to browse around for it. You Mac guys can use TextEdit that comes pre-installed on all Mac OSX machines. The reason we have to use these simplest of all text editors is that they automatically save document information in plain text (or ASCII) format.

Now, let me show you how easy it is to turn the above HTML document into a Web page right on your Desktop.

  • Right-click your Desktop and when the menu appears, place your mouse over New and in that sub-menu click Text Document.

  • A Windows NotePad Document will appear so type a name for it like MyWebPage.txt.

  • Now, click it open and either type or Copy and Paste the above HTML code into it and save it and close it.

  • Now, click it open again and then click on File and then instead of Save, click Save As...

  • When the Save As... box opens, type MyWebPage.html and click the save button on the right side of the box.

Your done! You've created a Web page. The Icon for your new Web page is now on your Desktop. How to Create a Web PageClick it and it will open in Internet Explorer or whatever you use as your default Web browser. How to Create a Web Page Here's what it looks like in my default browser - FireFox. It will probably look slightly different in your browser whether your default browser is FireFox, like mine, or Microsoft's Internet Explorer or any number of terrific browsers that are free to download and use like Google's browser named Chrome. The important thing for now is to understand the basic structure of the above code. Notice how everything is wrapped between the html opening and closing tags. Notice that the opening and closing head tags contain nothing for now but the title of our Web page. And notice how the opening and closing body tags contain all of the content of our Web page. But the Web page, itself, looks a little cheesey, doesn't it? Actually, it looks a lot cheesey. So let's dress it up some. We'll add some stuff to the basic code we started with. Notice that the new code below is the same as the above code but we've just added some stuff to it.




<html>

	<head>

<title>My Web Page</title>

	</head>

<body style="background-color:orange;"> 

<p "style="background-color:black; color:red; text-align:center;"> 
This is my Web page</p>
<h1>This is an h1 heading</h1> <h2>This is an h2 heading</h1> <h3>This is an h3 heading</h1> <h4>This is an h4 heading</h1> <h5>This is an h5 heading</h1> <h6>This is an h6 heading</h1> </body> </html>

I've colored blue all of the changes that were made to the code to make them stand out. If you use the instructions in the black box above to turn this code into a Web page, you'll see that the page looks much different now. How to Create a Web PageHow were these changes made? First of all, we added a style to the body tag that caused the background of the entire page to turn from white (the default background color) to orange. The body section of an HTML document is the only part of the document that shows when the page is displayed. The head section is used mostly to give the browser more information about how to display the page. The only thing in the head section of the document that shows up on your Web page is the information between the title tag and the closing title tag. Your title will appear on the browser title bar. The second change we made to the HTML code is to apply a style to our paragraph tag that gives the paragraph its own background color, in this case - black. That style also caused the text to be colored red and moved to the center of the page. Don't worry if the styles codes look a little confusing. We'll talk more about styles in the next post. Finally, we placed all six HTML heading tags on the page. You might use the h1 tag for your most important heading and then one or two of the smaller heading tags thereafter. When I made this page, I used the h2 tag to give it a title at the top of the page which is How to Create a Web Page. Just beneath that, I used an h3 tag to display a sub-title - The Basic Structure of a Web Document.

When I get around to putting up the next post about creating Web pages, I'll show you how to put images on your pages like the ones I have on this page. I'll also show you how to put links on your pages, like the ones I have on the left side of this page, that will allow you to send your readers to other pages on the Internet. In the meantime, experiment with the code we've already got working. Try changing the colors, for instance. Oh, I need to tell you one very important last thing. That icon setting on your Desktop that will open our document in a Web browser - you can edit it! Just right-click it and the click edit and Notepad opens with the code displayed. Make any changes or additions you want and save them and close Notepad and then click on the icon on your Desktop and see what your changes look like. Oh, and another very important last thing. You can look at the HTML code for any Web page. To look at the code for this page, for example, just click the View tab (next to the File and Edit tabs) and then click Source or better yet, hold down the Ctrl key and type the letter u.

Add this page to your Favorites and keep checking back so you won't miss "How to Create a Web Page - Part Two".

Thanks For Visiting the Tech Pages

Please add this page, or better yet my Home Page, to your Favorites and keep checking back. This page is a work in progress. how to create a Web pageI intend to edit it and add to it from time to time. In the meantime, if you have any ideas about how I could enhance the content of this page, please email me about it.


If you see anything in this post that needs to be corrected, email me about that, as well. I'll make the changes and make sure you get credit for spotting my mistakes. If you have any questions or comments about anything in this post or any other posts on the Tech Pages, email me at sjh@scoroncocolo.com and I will get back to you.


Don't forget to visit my Home Page at Scoroncocolo.com . And if that's how you got here in the first place, hit your Back button and look around. You can read my other Tech Pages posts by going to my home page and looking for them there. You can also look on the left side of this page and click on any of my Previous Posts.

To make this page and all of the other of my Tech Pages easy to find, type Ctrl + d to bookmark me and come back once a week or so and see what's new.

blog comments powered by Disqus
About - Services - Portfolio - Contact Us - Home Page

Copyright © Scoroncocolo 2008