Welcome to Webmaster Resources 101
Webmaster resources, forums, articles & tools.
Our Network:
HTML Tutorial - Getting Started With HTML
[ About This Author :: Request Reprint :: Print Article :: Tell A Friend ]
HTML Tutorial - Getting Started With HTML
By Ben Sinclair
http://www.webmaster-resources101.com
{PAGE0}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
The purpose of this tutorial is to teach you the basics on how to create your own Webpages. So here we go...
HTML stands for the HyperText Markup Language. HTML is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML. With HTML and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! HTML files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.
Before you start your page, there are a few things you may need. Firstly, a HTML Editor, but if you don't have one of these, which you probably don't have, you can just use Notepad. That's what I normally use. All that a HTML Editor does is supply you with all the HTML stuff that you can use, but after you study all my tutorials you probably won't need one. But just in case you want to check out the HTML editor that I use from time to time, go to: http://www.coffeecup.com
With HTML you can have bold and italicized, [font size=+2]Larger[/font] and [font size=-2]Smaller[/font], or it could look like Typewriter Text. You can even [font color=red]color[/font] it!
What you've just read in text, two paragraphs above, will look like this in HTML:
With HTML you can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look like <tt>Typewriter Text</tt>. You can even <font color="red">color</font> it!
HTML code for this looks like a lot of gobbledygook, doesn't it?.
So what do these "<" and ">" things do and what are they called? They're called "lesser than" and "greater than" and when you place a certain word within these, you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Most opening tags require a closing tag, but not all do. Tags make up the entire structure of a HTML document.
Here is an example:
<b>This Is Your Text</b>
<b> = Opening Tag
</b> = Closing Tag
Page #2 - Document Structure & Heading Tag
Page #3 - Line Tag & Paragraph Tag
Page #4 - Break Tag & Font Tag
Page #5 - The Bold, Italic And Underlined Tag Linking Text And Images 5
Page #6 - List Tags
Page #7 - Table Tag
Page #8 - Frame Tag
Page #9 - Color Chart
{PAGE1}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
OK, now let's get started with your first Webpage.
First open up your HTML Editor or Notepad.
Here is an example of a basic HTML Document Structure...
<html>
<head>
<title>This is Ben's Web page</title>
</head>
<body>Body goes here</body>
</html>
Note: It doesn't really matter how you set out your html page (I just like to be neat).
The title tag is seen at the top of your page above File, Edit, View etc.
Most of your information goes in the body tag.
One of the tags that you can use in the body is called a heading tag.
The first one is called <H1>. This makes your font really big.
The last one is called <H6>. This makes your font really small.
Every heading gets smaller and smaller but there are only 6 of them.
{PAGE2}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
Ever wondered how you got a line on a page? Well this is how.
Just simply write <hr> and this is what it looks like:
To create the above line was really easy, wasn't it?
You can also change the height and width and color of it by typing this:
Or this:
<hr width="10%" size=4 color="red">
There are many choices from which you can choose the type, size and color of lines that you can produce in HTML. Experiment and see how you go.
This is the code to get an image on your page:
<img src="pic.gif">
You can also change the width and height of the image. Also you can get a message in a little box when you put your mouse over the image:
<img src="pic.gif" width="100" height="100" align="center" alt="hello">
Place the pointer of your mouse on this image to see what the message looks like.
The paragraph tag looks like this: <p>.
You can also align your paragraph by typing this: <p align="center">, <p align="right"> or <p align="left">
And remember to end the paragraph with: </p>
Here is an example of a paragraph in HTML code:
<p>Mr Man went for a walk.</p> <p>Then he went home.</p>
And this is what it looks like on the Webpage:
Mr Man went for a walk.
Then he went home.
{PAGE3}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
The break tag looks like this: <br>
Instead of putting the text on a new paragraph, it puts it on the line underneath.
Here is an example of a break in HTML code:
Hello people<br>Bye people
And this is what it looks like on the page:
Hello people
Bye people
Here is an example of the Font Tag in HTML code:
<font color="red" face="courier new" size=+1>This font's color is red, type is Courier New and size is +1</font>
{PAGE4}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
You already know what these tags are from the first page:
Bold Text - <b>
Italic Text - <i>
Underlined Text - <u>
This is how you link text to a page:
<a href="page.html">Link Here</a>
This is how you link text to a website:
<a href="http://www.domainname.com">Link Here</a>
This is how you link an image to a page:
<a href="http://www.domainname.com"><img src="pic.gif></a>
And this is how you link to an email message:
<a href="maito:someone@someplace.com">Click here to email me!</a>
And don't forget the </a>
This is how you change the background color to a different color:
<body bgcolor="blue">
And this is how you change the background to an image:
<body background="pic.gif">
Note: The above code is put in with the body tag.
{PAGE5}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
Here is how you get bullet points next to your words:
Here is an example of bullet points in HTML code:
<ul>
<li>red</li>
<li>blue</li>
<li>pink</li>
<li>green</li>
<li>purple</li>
</ul>
And this is what it looks like on the page:
- red
- blue
- pink
- green
- purple
Here is how you make a simple Definition List:
Here is an example of a Definition List in HTML code:
<dl>
<dt>Pavement
<dd>Something used for paths for people to walk on.
<dt>Incredible
<dd>Hard to believe.
<dt>Dangerous
<dd>A possible cause of harm or injury.
</dl>
And this is what it looks like on the page:
- Pavement
- Something used for paths for people to walk on.
- Incredible
- Hard to believe.
- Dangerous
- A possible cause of harm or injury.
{PAGE6}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
What are tables used for?
Tables are used to make data a lot easier to interpret or to just give your document a more professional image.
<table border=4>
<tr>
<th>What are tables used for?</th>
</tr>
<tr>
<td>Tables are used to make data a lot easier to interpret or to just give your document a more professional image. </td>
</tr>
</table>
Here is what it would look like on the page:
[table border=4]
Tables are one of the most challenging things to code with HTML. It isn't very hard, it just takes a while to get used to it. Tables start with the <table> tag, and usually contain the border=n(number) attribute within the opening tag. If the border=0, than the table's border is invisible. Usually when you do not use the border attribute, the table border will become invisible. This is useful when you want to align text in rows and columns, but don't want a table border around it.
border=1 is a thin border, border=2 is a little thicker, border=3 a little more thicker and so on. The table MUST end with a </table> tag, or the table will not appear at all!
[table border=0]
As you can see in the above example there is no border at all.
And here is the HTML code:
<table border=0>
<tr>
<td>This table has a border of 0.</td>
</tr>
</table>
This table has a border of 3. It is the same code as above, but you change the <table border=0> to <table border=3>
[table border=3]
Each row within the table is defined by the opening <tr> tag and the optional </tr> closing tag. Within each table row are table cells, which are defined by the <td> opening and </td> closing tags. Most table rows contain more than one cell. Many times, you will need a heading for a column of cells of the first row. To do this, you will use the <th> opening and </th> closing tag. The table heading tag makes the text in that cell BOLD and CENTERED. You only need to use the heading cells when necessary.
Here is an example of a table with multiple rows and columns...
Heading A
Heading B
Heading C
Cell A
Cell B
Cell C
Cell D
Cell E
Cell F
[table border=2]
Here is the HTML code:
<table border=2>
<tr>
<th>Heading A</th><th>Heading B</th><th>Heading C</th>
</tr>
<tr>
<td>Cell A</td><td>Cell B</td><td>Cell C</td>
</tr>
<tr>
<td>Cell D</td><td>Cell E</td><td>Cell F</td>
</tr>
</table>
But what if you want your table to look like the following?
Heading A
Heading B
Heading C
Cell A & D
Cell B
Cell C
Cell E
Cell F
[table border=2]
Here is the HTML code:
<table border=2>
<tr>
<th>Heading A</th><th>Heading B</th><th>Heading C</th>
</tr>
<tr>
<td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td>
</tr>
<tr>
<td>Cell E</td><td>Cell F</td>
</tr>
</table>
Notice how the rowspan=2 attribute was added. This allows that cell to span two rows. If you want a cell to span more than one column then use the colspan=n attribute.
Also, you may wish to use the ALIGN and VALIGN attributes to align the contents of cells.
If you wish to change the horizontal alignment of the contents of a certain cell, add ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT to the opening <td> tag.
If you wish to change the vertical alignment of the contents of a cell, use the VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM attributes. You may also want to try out the WIDTH=n% attribute, to change the width of a table or a cell.
Here is an example of ALIGN attributes within a table...
Left Alignment
Center Alignment
Right Alignment
Left Alignment Center Alignment Right Alignment
Here is the HTML code:
[table border="1"]
{PAGE7}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
What are Frames?
Frames are a way to divide the browser screen into two or more separate pages. This will allow easier navigation under some circumstances. Often frames are used to add a side menu bar to a website where the constant back and forth clicking would become awkward in a single page.
In the following example, the side menu bar allows the user to just click in the side menu bar, and their choice loads into the main window.
Example: Side Menu Bar
This is what the index.html will look like:
<html>
<head>
<title>title here</title>
</head>
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
<noframes>
Your browser does not support frames.
<a href="frameless_main.html">Please visit the frameless page.</a>
</noframes>
</html>
Notice that there is no actual <body> coding. It is common courtesy, however, to place a <noframes> area after the frameset, but this is completely optional. This <noframes> area only displays in browsers that are not able to show frames. If you create a special page for those without frames, you may be doubling your work. It is best, with effort and practice, to create a page, in this case, main.html, that will work in both frames and noframes browsers.
Then your noframes would read:
<noframes>
Your browser does not support frames.
<a href="main.html">Please visit the frameless page.</a>
</noframes>
About <frameset> and <frame>
The frameset tag is used to declare multiple frames. As you can see in our first example, the menu bar side, there was one frameset. It read:
<frameset cols="15%,85%">
This tells the browser that we are creating a column of framed pages, the first one is to take up 15% of the total browser screen, and the second is to take up 85% of the total browser screen. Then we introduced <frame>, which is what actually loads the pages. Each frame must have a src, which is short for source, such as src="some_page.html". So, because we used two framed areas within the frameset, we need two frame tags, each of them to load a page.
<frameset cols="15%,85%">
<frame src="menu_bar.html' name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
If we would like to add a third column, we would need to add a third size definition in the cols(columns) so that all the columns would add up to 100% and add another frame tag inside the frameset.
Here is an example:
<frameset cols="15%,70%,15%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
<frame src="side_bar.html" name="rightwindow">
</frameset>
Click Here to view.
Likewise, we can use a rows definition instead of a columns definition. If we wanted the menu to be a bottom menu bar, we would do something like this:
<frameset rows="80%,20%">
<frame src="main.html" name="mainwindow">
<frame src="menu_bar.html" name="bottommenu">
</frameset>
Click Here to view.
If you wanted the menu at the top, just switch it around:
<frameset rows="20%,80%">
<frame src="menu_bar.html" name="topmenu">
<frame src="main.html" name="mainwindow">
</frameset>
Special Linking with Frames
Okay, so let's go back to our original example, the side menu bar.
Here is the original source for index.html
<html>
<head>
<title>title here</title>
</head>
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
</html>
Now we are going to need to create our menu_bar.html page, and our main.html page. Each of these must be edited separately. Both pages are almost exactly like a regular HTML page, except that there is an advanced linking option called the target attribute. If you added regular links in menu_bar.html and clicked on them, each page would load into the small, side frame! To get around this, you'll want to add a target attribute to each link that you want to load in the main window.
Here is the source for menu_bar.html:
<a href="cats.html" target="mainwindow">Load cats</a>
<a href="dogs.html" target="mainwindow">Load dogs</a>
<a href="birds.html" target="mainwindow">Load birds</a>
When you click on any of the above links, they will end up loading in the larger window instead of the smaller window.
If you wanted to change the menu, to say cats instead of dogs from the main window, you could do something like <a href="cats.html" target="sidemenu">Load cats into the side menu bar</a> in main.html.
There are three important target attributes you should be aware of:
target="_blank" - link is loaded into a new blank browser window and your old window stays open.
target="_self" - link is loaded into the frame that the link was clicked in. This is the default selection. Leave it out if you want.
target="_top" - link is loaded into the current full browser window and all the frames disappear. This leaves the new linked page to occupy the entire window.
Special attributes of <frame>
There are two special attributes you should be aware of for the <frame> tag.
Let's go back to the side menu example.
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
If you wanted to lock in the sidemenu frame (the menu bar frame) so that the user couldn't resize it, add the words noresize to the frame you want to lock:
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu" noresize>
<frame src="main.html" name="mainwindow">
</frameset>
This does not prevent you from changing the pages inside the windows, it just prevents the user from modifying the frame size when the page loads.
You can also have no frame border by typing in this:
<frameset cols="15%,85%" frameborder="NO" border="0">
<frame src="menu_bar.html" name="sidemenu">
<frame src="main.html" name="mainwindow">
</frameset>
The other useful attribute is scrolling. If you always want a scrollbar to appear in the main window. Add scrolling="yes". If you don't want a scrollbar? Add scrolling="no". If it doesn't bother you either way then add scrolling="auto".
Here is an example:
<frameset cols="15%,85%">
<frame src="menu_bar.html" name="sidemenu" noresize>
<frame src="main.html" name="mainwindow" scrolling="yes">
</frameset>
More Advanced Frames
You can embed a frameset anywhere there is a frame if you want to split that section further. Want a special, fixed area for your logo graphic at the top of the menu bar?
Try this:
<frameset cols="15%,85%">
<frameset rows="20%,80%">
<frame src="logo.html" noresize>
<frame src="menu_bar.html" name="sidemenu" noresize>
</frameset>
<frame src="main.html" name="mainwindow" scrolling="yes">
</frameset>
Here is something to think about. How would you get four even frames in two rows?
You could do:
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
Three even columns?
<frameset cols="33%,33%,33%">
<frame>
<frame>
<frame>
</frameset>
How about three rows, the first one 1/4 of the screen, the second 1/2 of the screen, and the third 1/4 of the screen?
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame>
</frameset>
Same as above, but the very bottom frame split into two equal columns? old...
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame><-- replace this
</frameset>
new...
<frameset rows="25%,50%,25%">
<frame>
<frame>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
</frameset>
There you are! Now you know how to create frames!
{PAGE8}-------------------------------------------------------------------
Note: This is a tutorial I wrote when I was learning
HTML. It might come in handy for you too :D
-------------------------------------------------------------------
Next we have a very useful tool called a color chart. Click Here to view and then read the instructions below.
The codes appear in numbers and letters rather than just the name of the color itself. With HTML you have the choice to either write the name of the color or use the HTML code. However, you will find that the HTML code will be more accurate.
This is a Javascript chart and if you are unable to access the colors with your browser you can go to this Website: http://www.visibone.com/colorlab/
{PAGE9}
Other Related Material:
Discuss this in our Webmaster Forums
About The Author:
Ben Sinclair
http://www.webmaster-resources101.com
Ben Sinclair is the Webmaster of [url=http://www.webmaster-resources101.com/]Webmaster Resources 101[/url] and [url=http://www.webmaster-forums101.com/]Webmaster Forums 101[/url].
Ben Sinclair
http://www.webmaster-resources101.com
Ben Sinclair is the Webmaster of [url=http://www.webmaster-resources101.com/]Webmaster Resources 101[/url] and [url=http://www.webmaster-forums101.com/]Webmaster Forums 101[/url].
| Go To Top | This article has been read 3282 times. |
[ About This Author :: Request Reprint :: Print Article :: Tell A Friend ]
Web Hosting
Searching for the best web hosting? HostGator is highly recommended!
Web Hosting
» Web Hosting Australia
» Domain Names
» ASP.NET Hosting
Software
» MAS 90
Software
» Wedding Directory
» Church Rostering Software