HTML basics - HTML & XHTML tutorial
- Added: Jul 20th, 2005
- Level: Easy
- Author: Melfina
- Reads: 26,534
- Description: An introduction on HTML. How to use it and its basic structure.
Introduction
HTML stands for HyperText Markup Language. To follow this HTML tutorials we just need Notepad or a similar program. We write our code in this program and save it as page.html.
We can save our files as either *.html or *.htm, they're exactly the same, so it doesn't matter which one you use.
In a site, with the use of HTML, we can put different kinds of elements such as text, images, animations, audio and video, image maps... Which we couldn't do in an plain text file
Basic Knowledge
Most HTML markups have the following structure: <markup>. Depending on the markup we're using, we may need to state when it's closed or not, something like this: </markup>.
An example code (closed one):
Another example code (not closed):
These tags will only be readable by the browser, not by the visitor, that means, if you write <p><i>Hello there</i></p>
, the browser will read that piece of code, but people will only see Hello there on the page.
HTML makes no difference between uppercases and lowercases as for the markups. Both <img>
and <IMG>
are the same, still, we will use lowercases. Why? we will be following the HTML standards, this way, we will be prepared and used when we decide to use newer languages such as XTML.
It does make a difference in values, for example, <img src="image.gif">
is not the same as <img src="Image.GIF">
. If the image file uses no uppercases, and we use them in the code (as in the example), the image won't show.
The multiple spaces, line breaks, etc of our code are ignored. When we view our page, we will only see ONE space, no matter how many we put in our coding. However, spaces are used in the coding just to make everything clearer, specially useful when we have a lot of coding in our page.
Page structure
The first thing we need to write on our HTML page is its basic structure, the part that will be the same for every page we make, we don't just code a design on a blank page, we need to write that structure first.
Every part of this structure has it's own function, depending on what we want to add on the page we will position it on the body or the header of the page.
- We start with <html>: this states the html document starts.
Because we're starting an HTML document aren't we?
- The next section in our HTML document is the "hidden" part of our page. Example: Page title, Meta tags, CSS... The tag used is <head>
- Inside the head tag, we can put the title of our page. This title will show at the top of our browser window, and on the taskbar. We write itlike this: <title>My site title</title>
- The final section is where our current page content, design and whatever we want to put goes. We start it with <body>
Our final part of the HTML structure is closing the body and html tags:
</body> </html>
Now, I'm giving you the complete basic html structure you will use for your pages:
<head>
<title>My site title</title>
<body>
All your content, design and coding will go here
</body>
</html>
The rest of the coding is up to you, depending on what you want to do. We're done with the basics, you may read the next tutorial now
If you like this tutorial why not digg it or add to del.icio.us?
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.