05/11, 2007
HTML/XHTML: Building Your First Page
HTML is easy. Really, it is. Like many things, it’s easy to get but takes time and practice to master. My goal is to get you started down the right path to HTML enlightenment.
No need to worry about getting fancy at this point. Let’s get your feet wet by starting in the shallow end of the pool. Don’t worry about all those people splashing around in the deep end. You’ll be there with them in time. Just ease your way in for now.
HTML, or Hyper Text Markup Language, is the language of the web. It’s the basis of everything that you can see on the Internet. You can create HTML pages using any number of editors or tools such as the ever-popular Adobe Dreamweaver. But if you really want to be good at it I suggest opening Notepad and start plugging away. After all, it is much more fulfilling to actually know what you are doing and doing it rather than telling a program to do it for you. Trust me, this will pay off for you in the end.
Got Notepad open yet? Ready to start plugging away?
All web pages that you create will have the same basic structure. Copy and paste the code below into Notepad. Replace “Page Title” with whatever name you want your page to be. This is what gets displayed in the very top left of your browser. It is also what your page will be labeled as when it gets bookmarked by all of your adoring fans.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Hello world!</p>
<p>Welcome to my awesome web page!</p>
</body>
</html>
Take a look at the tags and let me explain what’s going here:
First off, keep in mind that all tags that get opened must be closed at some point. These tags bookend information. They explain what is what in the page.
The <HTML> tag tells all browsers (Internet Explorer, FireFox, etc.) that this is a web page. All pages begin with this tag. There is more information that can go in this tag but we save that for another tutorial.
Following the open <html> tag is the <head> tag. This is the area where your title goes. It is also where you put other instructions to the browsers such as where your CSS and script files are located. You can also put in META information here. META information usually sends information about your page to browsers and search engines. Again, this is all something that you can worry about later.
Inside of the <head> tags will be your <title> tags.
After the </head> tag you will put a <body> tag. Now we get to the meat of the page. This is where all of your page content goes. Notice the <p> and </p> tags surrounding “Hello World!” and “Welcome to my awesome web page!”? These are paragraph tags and they are probably the most used formatting tags. Everything between these tags go in the same paragraph. When you view your page in a browser, you will notice the spacing between these two statements. Cool, right?
Ready to look at your work? Cool. Almost there. Before we do that we will need to finish up by closing the remaining open tags. After all of your content you will need to close the body tag (</body>). Then you will need to close the opening html (</html>).
That’s it! You have created a web page. Now let’s save it and view it. In Notepad, click on “File” and then choose “Save As”. Let’s assume that this will be the home page of your site. All home pages are called either “home” or “index” followed by a .htm or .html. I, personally, always use “index.html”. You can decide for your self what you prefer. Save that file somewhere on your computer.
Now go double-click on that file and it should open up in your default browser. Now sit back and bask in your creative glory!
Check back for more tutorials. Things will get a lot more interesting and exciting. I promise.
Web designer from Houston, TX who intends to make the world a better place... one post at a time.