The official guide to HTML
The primary thing to keep in mind, the supermagic key, is that HTML is used for meaning and CSS is used forpresentation. HTML is nothing more than fancy structured content and the visual formatting of that content will come later when we tackle CSS. You might find different approaches elsewhere on the web but HTML Dog focuses on best practice from the outset and getting into the frame of mind of doing things the right way from the start will lead to much better results in the end.
Getting Started & Basic HTML
Notepad is a common text editor on Windows-based computers (usually found under the Programs > Accessories menu) and Mac OSX computers come bundled with TextEdit but any program that lets you fiddle with text will do.
Type this in to your text editor:
This is my first web page
Now create a folder called “html” wherever you like to save files on your computer and save the file as “myfirstpage.html”.
Be careful. It is important that the extension “.html” is specified - some text editors, such as Notepad, will automatically save it as “.txt” otherwise.
You also need to ensure that your file is being saved as plain text. TextEdit, for example, will start new files as “Rich text”, containing lots of formatting extras, by default. In such cases, go into the preferences and make sure you check the “Plain text” format option before creating a new file.
To look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome, Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.
Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.
We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Adobe Dreamweaver.
You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to “help” you.
If you’re serious about learning HTML, you should read through a tutorial such as this first, so that you at least have a basic understanding of what is going on.
Software programs such as these will never give you the same control over a web page as coding by hand.
If you do decide to use specialized code-editing software, we recommend one in which you are still coding by hand. They can, in fact, be helpful, especially the more advanced you become, in terms of code syntax highlighting and file management.
Type this in to your text editor:
This is my first web page
Now create a folder called “html” wherever you like to save files on your computer and save the file as “myfirstpage.html”.
Be careful. It is important that the extension “.html” is specified - some text editors, such as Notepad, will automatically save it as “.txt” otherwise.
You also need to ensure that your file is being saved as plain text. TextEdit, for example, will start new files as “Rich text”, containing lots of formatting extras, by default. In such cases, go into the preferences and make sure you check the “Plain text” format option before creating a new file.
To look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome, Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.
Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.
We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Adobe Dreamweaver.
You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to “help” you.
If you’re serious about learning HTML, you should read through a tutorial such as this first, so that you at least have a basic understanding of what is going on.
Software programs such as these will never give you the same control over a web page as coding by hand.
If you do decide to use specialized code-editing software, we recommend one in which you are still coding by hand. They can, in fact, be helpful, especially the more advanced you become, in terms of code syntax highlighting and file management.