I am starting a new series for the one who wishes to learn how to use HTML 5 and CSS 3.
In this series I will cover the basics of HTML 5 what it is and how it is used. I will go over basic terminology and how to use this to make your sites better. I will then show how CSS and HTML combine to make amazing webpages!
So let’s get started. Before we start this tutorial I wish to have you pick your favorite text editor. I use Notepad ++ for this tutorial because it allows you to select the code you are writing in and highlights the code parts for you so you don’t get confused with what you’re coding or writing in. Here is the website to download Notepad ++ http://notepad-plus-plus.org/.
So let’s start with some basic terminology and then I will go into basic code structure in HTML.
HTML or HyperText Markup Language (HTML from here on out), is what holds everything on your page together. It holds the images, texts, tables, animations all together on one page for easy viewing. HTML relies on simple text files which is what the web was created on. It allows for universal viewing across all platforms (IE: Mac, Linux/Unix, Windows) Each webpage you create uses its own set of special instructions specify what is on the page and how it should look and behave.
CSS or Cascading Style Sheets (CSS from here on out), manage the page presentation, they also determine how the page behaves and is shown. It is broken up into various sections that allow the creator to specify different attributes and styles to particular sections of a webpage. Within your HTML you can specify what CSS file to use.
Ok so let’s look at a very basic HTML file which is show in the image below:
As you can see there is much that is going on here. But I promise it’s not that hard to understand! Let’s break this down so you can better to understand this!
First let me make a note:
Elements are what make your HTML page work without them you have nothing. These elements are made up of tags.
Within HTML there are 2 types of Elements:
- elements with content made up of a tag pair and text sitting between the opening and closing of that pair of tags.
- Elements that insert something into a page using a single tag
You will see the tag’s as follows:
<tag> : this tells the browser “open tag”
</tag> : this tells the browser “close tag”
The content is the stuff between the tags.
So let’s move on to the what each tag does in our HTML document:
- <!DOCTYPE html> This tells your browser what doctype it is using.
- <html lang=”en”> This represents the root of HTML doc. Language is always specified no matter what.
- <head> This represents a collection of metadata ( I will explain later in more detail) You will also specify <meta> tag here and the <title> tag which shows the title of your page in your browser. We also specified <style> tag here and this will change the colors and fonts of your webpage just like CSS will.
- <body> This tag represents the main content of the webpage.
- <p> This is the paragraph tag. It will put any information that you put here into a paragraph.
- You will always close your webpage with the following
Now let’s save our HTML file in Notepad ++
So click file save as and you will be prompted with the following:
Notice in this that I am saving my file as test.html It makes it so that you can launch this in your browser from your local machine.
You can save this as two different file extensions (A file extension is the piece of the file at the end of it after the period so .exe or .html or .jpeg) .htm or .html
.htm is an old file extension from back in 8.3 DOS days and can still be used on servers today. 8.3 DOS on supported 8 characters in a file name so the file name plus the extension.
.html is most widely used and is recommended for you to use now to avoid confusion.
There you have it a very basic HTML introduction. Part two will be next!
If you have any questions or concerns please ask!