Nothing is more frustrating than reading pages and pages and pages about programming before you actually get your hands dirty. So without further adeu, let's write our very first HTML page. I'm going to assume you are, at least, computer literate enough to create directories and files and open them in some sort of editor.
Step 1 - Create a directory for your code
Create a new directory for your code. Call it "development" if you fancy - it has a nice ring to it after all!
Step 2 - Open a text editor
Open your text editor. If you are using Windows, then open Notepad (you can do this rather quickly by holding down the Windows Key and 'r' and then, in the "Run" box that comes up type "notepad.exe" and hit Enter). If you are OSX, then open TextEdit.
Step 3 - Write the HTML
Type the following in to your text editor
<html> This is my first HTML page </html>
Step 4 - Save your work
Save the file into the directory you created in step 1. Call it "index.html".
Step 5 - Open it in the browser
Use Windows Explorer or Finder to navigate to the directory and then double-click on the "index.html" file you create. Your default browser should open and you should see something similar to this:
Summary
This might seem like a very simple first HTML page - and it is! However, even in the smallest snippet of code above, we've learned a lot:
Code is just text
The first thing we learned is that HTML code is just text, and that it can be written in the most basic of text editors. You don't need any special tools, though it has to be said, some text editors make creating HTML easier - we will explore these in the future.
Code has a syntax
All code has a syntax. To put it another way, code can be considered a language, a little bit like music in a way. There are specific ways of writing things that make a piece of text HTML rather than just a piece of text. When we are dealing with HTML, our syntax uses "tags". Tags are simple - in the above example <html> and </html> are the tags. Tags are enclosed in the "greater than" and "less than" signs and usually have some other text between them. Tags usually have an opening tag and a corresponding closing tag - somewhat akin to writing a sentence - you start with a capital letter and end with a full stop (or other punctuation). Notice how the second tag has a forward slash before the "html" part - this signifies that we are closing the tag or ending the sentence.
Code has a vocabulary
All code has a vocabulary - be it the simplest HTML page through to the most complex piece of C code. All code has a vocabulary - these are often called keywords or reserved words. The vocabulary of the code tells the computer what to do with your code. In the above example, we used only one keyword - "html" - this told the web browser to treat our code as an html page.
Extra credit
It might not seem like much at the moment, but you have taken the first step towards creating your own website from scratch. Now it's time to for you to experiment - code is about practice, so even at this stage it is important to practice what you know. Here are a few ideas to play with:
- Change the text from "This is my first HTML page" to something else and see what happens (hint, you need to hit reload/refresh on your browser to see the changes
- Change the tags (the parts that say "html" to something else and see if there is any effect.
- Create a new file and try to type the above example from memory.
- Rename index.html to something else. Does it have any effect? If so, what?
- Change the file extension of index.html and see if that has any effect. If so, what? You might need to change your Windows Explorer options to "show file extension" to do this.
