First things first:
We will be creating our first web page fairly quickly. But, we just need to quickly cover a few things first.
There are, basically, three ways you can create a web page:
1. By using a template or CMS (Content Management System)
2. By using an HTML editor like FrontPage or Dreamweaver
3. By hand-coding your HTML in a text editor like Notepad
Templates / CMS
A design template for web sites is just that, a template. It provides a designer all of the code (HTML / CSS) file(s) needed to build a single page or multi-page web site. All you do is add your content, change the colors used, add images, etc. You can customize it to reflect you or your company’s branding. Website design templates can be found in various formats, and some are free and some you have to pay for. Web site templates can be very useful. It allows the experienced web designer and the novice to create a website quickly and easily.
The same thing can also be said for Content Management Systems. These give you a platform to design any kind of web site, whether you want a blog (WordPress) or an e-commerce site. The major names in the CMS world are Drupal, Joomla, and WordPress, though there are others. You can choose a theme that best matches what you want your site to be and you can extend your site via plugins as well. All of the work you do is through a dashboard. Once you add your logo and some content, you are good to go. All of the hard part (coding) is done behind the scenes for you, though knowing some basic HTML and CSS is still a good thing when creating pages, among other tasks.
Some other things about CMSs is the fact that they give you an easy installation process. Point your browser to the install file and your off. But, you will need to create a database and there might be times you might have to go “under the hood” to accomplish some task. For now we will stick to hand-coding our page (see below.)
HTML editors
HTML editors are just like a word processor. They provide you with features that make it easy to create forms, lists, and tables. Some also provide you with a list of all of the HTML tags that you will be learning about shortly. The ease of use of most HTML editors has its draw backs too. You might find yourself having to think about things, like, “How do I create a table?” as compared to coding the table yourself. When learning to create a web page, it is probably better to do it by hand, so you can get to where you can code a web page “blind-folded.”
Hand-coding your HTML
Hand-coding means you type in the HTML code yourself. This is the approach we are going to use here, because it’s the quickest way to learn how to create web pages, and it is arguably the best way because you have the most control over what you’re doing.
Now that we know the advantages of hand-coding web pages, let’s jump into just the bare minimum of theory, then we will create our first web page!
What is HTML?
HTML or HyperText Markup Language is the building block of web pages. The “Markup” in HTML is referred to as tags. These tags tell web browsers what and how to display things on the web page. Tags are placed in and around text and images (along with other things) that you want to have appear in your web pages.
HTML has a lot of tags (HTML5 will be introducing some new tags and also removing some) that the web designer can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HTML page, it knows the tags from the normal text.
Tags are typically words or abbreviations of words placed between angled brackets.
So for example, we want to create a paragraph of text, we would use the paragraph tag:
<p>This is a paragraph.</p>
Tags
You may have noticed that HTML tags come in pairs; HTML has an opening tag and a closing tag. The only difference between the opening and closing tags is that the closing tag contains an extra forward slash.
Some example HTML tags that might make things clearer:
<p>Creates a paragraph.</p> <b>Makes text bold</b> <i>Makes text italic</i> <table>Creates a table</table>
HTML tags are not just for placing and formatting text. HTML tags can be used to include other things like: images (photos), animation, embed video, Flash, and audio.
The Structure Behind Our Web Page
An HTML page is divided into two major sections:
1. The head
The
<head>section contains underlying information about the page which does not get displayed in the web page, except for the title of the page. It does, however, have an affect on how the web page is displayed.
2. The body
The
<body>section contains all the stuff that appears on the actual web page when opened in a web browser. We are talking about the actual text, images, flash movies, and so on that people will see.
The head and the body sections of a web site are marked in the HTML page with their respective tags:
<head> </head> and <body> </body>.
If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, by using the HTML tag:
<html></html>
The html tag, and like all tags it must have a start tag and an end tag, as shown above. Every web page must begin and end with the HTML tag, otherwise the web browser will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional.
So the bare-bones HTML page must have these tags and in this order:
<html>
<head>
<title>Title of your page</title>
</head>
<body>
</body>
</html>
Creating Your First Web Page
One of the best ways to learn something is to actually do it, so don’t worry if things are not too clear for you right now, as we build the web page, things will start to clear up.
First, let’s write some HTML code
Open up a text editor, like Notepad (Windows), or any other text editor you prefer, and type this:
<html>
<head>
<title>Your first web page</title>
</head>
<body>
<h2>Hand coding web pages is easy!</h2>
<p>I didn't think hand-coding a web page could be this much fun.</p>
</body>
</html>
Save your work using your text editor’s ‘Save as’ function and name the file mypage.html.
You can choose any name you want, as long as you do not have spaces in them, i.e., ‘my page.html’ is no good but ‘mypage.html’ is OK. The name has to end with either .html or .htm; by ending the file name this way you are telling the computer that this is a web page and that it should use a web browser to view it.
Do Not use symbols such as: $, %, ^, & in your page names. Stick to standard letters and numbers.
In Notepad, please save the file as UTF-8.
Next, open your work with your favorite web browser. You should be able to double-click on the file or open it up with your web browser by going to its “File” menu, then select “Open file” and select your page.
Congratulations! You should be able to see your page. If you don’t see anything, then compare what you typed with the original (see the link below) and just go over the process again. Did you forget to close out a tag? Or is there a typo? I bet it is something simple. Keep at it and you will be coding like a pro in no time.
If you’re not sure if what you created is looking like it’s supposed to, you can check out the final page and compare it with your own. My Webpage Example
Conclusion
Now that you know how to create a web page, next we will start to build a web site.