The best way to learn how to create websites is to dive right in and get your hands dirty with code. Sure, there are a lot of do it yourself programs out there and a lot of (What you see is what you get or WYSIWYG for short) programs as well. But if you really want to learn this stuff properly, you have to know how to code.
I’m not entirely against using a program to assist you in coding and in fact, I usually use Adobe Dreamweaver to assist me. Other free programs like notepad++ (for windows) and textmate (for mac) are very helpful in assisting with coding. The best features of these advanced text editors, and the main reason why I use them, is that they use color coding for different parts of the code and they also alert you when there is an obvious error in your syntax. However, if you really want to code in plain text with no assistance whatsoever, you can always just use Microsoft Notepad.
The first thing you need to do is open your text editor and start typing the following code:
Start Code: (Do not type this line in your text editor)
<!DOCTYPE html>
<html lang =”en”>
<head>
<meta chaset=”UTF-8″>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>This is my very first web page, I coded this all by hand</p>
</body>
</html>
End code. (Do not type this line in your text editor)
Now, save this file as “my_first_webpage” (without the quotes).
Note: Before you click save, be sure to make sure the file type is saved as an html or htm file. To do this, you first need to check something. Go into your folder settings in the control panel (start>control panel>folder options). Then select “view” and scroll down to the line that says “Hide extensions for known file types” and uncheck this box if it’s not already unchecked, click OK to save changes. Now go back to your text editor and in the box where the file name is, delete the “txt” extension at the end of the file name, and type “html” or “htm” at the end making sure not to remove the dot (between the extension you just typed and the file name). Finally, change the file type to “all” in the lower drop down box and after choosing where to save the file (and remembering where you saved it), click on “Save”.
Note: Some text editors will have “html” listed in the file type drop down menu, so all you need to do in this case is select it.
Now open up your folder or directory where you saved the file and just double click the file name. It should open up in a browser window and you should see the heading “My First Web Page” in the top right hand side of your screen. You should also see the text you wrote (This is my very first web page, I coded this all by hand) under the heading in smaller writing.
If you are seeing this, congratulations, you just created your first web page by hand coding.
If you don’t see this, you may have to right click on the file name and select open with > Internet Explorer, Firefox, Chrome, Safari, Opera, or whichever browsers you have installed. Then you should see the above.
Explanation of code:
Doctype is declaring the type of documnt, in this case it’s an html5 document.
html lang is declaring which language the page is written in, in this case, English.
head, is the start tag for the header section. This is where important information goes to tell the browser to run this code first as it is most important.
meta chaset tells the browser which character encoding to use, in this case UTF-8 which is the latest encoding for most web pages.
title Is the title of your page. Whatever is in this tag, will appear in the very top of your browser window. It’s important that the title is relevant to the page content, because search engines, such as Google, use this information to find pages for the search words the user types into the search bar.
body is the main body of your web page, it will contain everything that is to be displayed to the user.
h1 stands for heading one and will produce a very large heading. Use h2, h3, h4, h5, h6 etc. for smaller headings. The larger the number, the smaller the text.
p stands for paragraph, and is used to separate blocks of text just as in a word document.
End of lesson 1.
