1 - Introduction
By now you've considered taking a dive into the world wide web and creating your own site,
whether as a hobbyist or a developer/designer hopeful. Either way this tutorial will teach
you the dead basics of the markup language known as HTML.
HTML is, first and foremost, not a programming language. HTML is an acronym for Hyper Text
Markup Language, meaning it's a markup. Think of a markup as a structure system, organizing
elements into proper sections that make logical sense, and you have a base idea of HTML.
We start with tags. A tag has an opening and closing, inside these tags are elements and
various text that can be considered as contained.
The most basic tag we can start with is the <html> tag. Notice how each tag begins with a <
and ends with a >, denoting a tag, the text inside is what function the tag performs, as
well as its attributes, such as <html bgcolor="white">. In this case it encompases an HTML
document and sets the background color to white (We will discuss how to do this more
effectively in CSS in a later tutorial.) This is the start of all of your documents.
The closing tag is fairly simple as well, </html>. The difference is that the closing tag
contains a slash which signifies a closing to the browser. Some tags are self closing but
don't worry about that for now, we'll get into that a little later.
2 - Your first page
So now we know about the <html> tag, but that's just the beginning, there are multiple tags
meant to mark up your page and create structure. We'll start off with a bit of code:
<html> <head> <title>Hello World!</title> </head> <body> <h1>My Title</h1> <p>My text. Welcome to the world of the web!</p> </body> </html>
Copy and save this in notepad, click save and change the "Save As Type" to all files and
name it "mypage.html". Go ahead and open it for reference.
No doubt you're scratching your head as to the function of these tags but I wager that you
know enough english to recognize some of the words in the tags. Well here we go, a step by
step as to every tag:
<html> - The start of every html document and also the close.
<head> - The header, not to be confused with a site header or banner area. This header
contains information that needs to be loaded at the second the site is visited such as
scripts and other such resources as well as a title.
<title> - The title is the text you see in the header of your browser window.
<body> - The body is where all your content belongs
<h1> - There are tags labeled h1 to h6, and they are known as the header tags. It will
display a larger font but is ONLY to be used as a header, not a method of bolding text, this
will be discussed later.
<p> - The paragraph tag. Just as in standard writhing for each new paragraph you write you
need a new tag to signify a line break.
If you haven't already, take a look at your page by clicking on it where you saved it.
3 - Linking
In the web you could easily put all your information on one page, but how effective would it
really be? Assuming by some miracle you get users to stay on your site for more than 2
seconds it wouldn't last much longer with a scroll bar to infinity. This is where linking
comes into play.
Links are made with the <a> tag with an attribute of href which points to the page you wish
to link to, such as this for google:
<a href="http://google.com">Google</a>
Href is set equal to the site you wish to link to, and the text between the <a> tags is the
text that appears as the hyperlink on your pages.
Be warned though you need to include http:// on any external page, some servers would assume
www.google.com points to a file on your server instead of addressing it as an actual page.
4 - Images
Text and links are great, but without images the web would be quite boring to say the least.
This is where we get to the <img> tag.
The <img> tag has an attribute of src which points to the file to display, such as this:
<img src="google.png" alt="google" height="50px" width="50px" />
Now there are some new attributes that you may not recognize, and surely you recognize the
odd ending of the tag instead of a closing tag. This is called a self closing tag, which is
denoted by a /> at the end of the tag. It wouldn't make much sense to have a start and a
stop of an image now would it?
Other attributes are:
alt - The alternate text to be displayed on mouseover or in case of the image not displaying
properly.
height/width - Literally the height/width of the image. I would strongly encourage you to
always add the actual height and width of images because if the image breaks the replacing
filler will take up the same amount of space which will prevent discrepancies in your
designs if an image fails to load. While you can specify dimmensions other than the actual
image size it is strongly discouraged because it takes the same time for the image to load
even if you downsize it, you're safer using photoshops save for web and downsizing through
there.
5 - Final notes
With this we close the first part of basic HTML, the second part should be out the day after
this is released and it will discus further how to structure your documents with the <div>,
<ul>, <ol>, and other such tags. Until next time!
MultiQuote
| 