Html Basics and HTML Codes
Just some basic HTML codes to get your started. This page doesn't come close to listing all the HTML codes or
the newer page building codes, such as XML or CSS.
HTML Stands for Hyper Text Markup
Language and is the basic code that all web pages used to be built on. Most of them still
are, but many are going to Cascading Style Sheets (CSS) and scripting languages, such as PHP.
Blogs, for example, are made with a combination of CSS and PHP. CSS controls the look and the layout, while the
PHP controls the database management. Sound complicated? It is, but fortunately most of the is kept way in the
background. For example, you can go to www.Blogger.com and build a blog in 5 minutes, without knowing CSS from a hole in the
ground.
A nice website builder, XsitePro, allows you to build good looking sites without knowing a lick of code. This site,
Unixtools.com, was built entirely with XsitePro.
Of course, with a blog or a site you still need to come up with something to put on those pages, but
that's a lot easier than memorizing arcane CSS code.
The Codes:
Back to the HTML codes: Your most basic web page will be comprised of a list of HTML
tags. These tags are the codes which control how your page looks. While only the basic codes are covered
here, there are more complex html codes. Many more. Basically, every page will start
like this:
<html>
<head>This section contains codes which are not seen on your webpage</head>
<body>All the visible text on your page start here and ends with this tag: </body>
</html>
<title></title> This goes in the head section of your page. It's what you see at the extreme top
of your browser's window and it is not seen on the main page. For example, if you want the
title of you page to be My Awesome Brand New Webpage you would do this: <title>My Awesome Brand New
Webpage</title>
So now your page would look like this:
<html>
<head>
<title>My Awesome Brand New Webpage</title>
</head>
<body>All the text of your webpage goes here</body>
</html>
Some of the HTML Codes to markup your page are as follows: Generally you start the text with some tag
and end it with a /tag, like this <bold></bold>
<b></b> make the text between the tags bold. So I'll put some bold text
here, done like this: <b>bold text here</b>
<i></i> it's the same for italics. Sample italic text
<u></u> covers underlining. Usually underlining is for links, so my suggestion is
that you don't use underlining for any other purpose. By the way, when you make a link the text is
automatically underlined anyway.
<blockquote></blockquote> is for indenting a block of text. Quoting someone is a good
example.
You might insert the marvelous quote made by your favorite author in a blockquote section. it can be any
length, include all the other codes, and be as fancy or simple as you want. Just be sure to link to the
source if you're borrowing it from someone else's page.
<a href="Some URL">Some Text Here</a> Make a link. For example, if youi wanted to link to
this page (shameless plug!) you would use this code: <a
href="http://www.unixtools.com/html-codes.html">HTML Codes</a>, which will wind up looking like this:
HTML Codes
<p></p> makes a new paragraph and adds a blank line.
<br> the break tag just ends a line and starts a new one, but doesn't add a blank line, like
the <P> tag does.
<center></center> or
<p align=center></p> or
<div align=center></div> These just center your text on the page.
<right></right> This aligns it to the right,
alignment to the left is the default.
<font></font> Change the font and the colors and the size. You have to specify the color, size,
and style of font. For example:
- <font color=red>some text</font> makes for red text: some text in
red
- <font size=+2>some text</font> make the text two steps larger than the default text, like
this: some bigger text
- <font face="times new roman">some text</font> - this puts a new face on your text, in this
case it's times new roman font
- You can also combine all of the above, like this: <font face="times new roman" size=+3
color=red>some text</font> - Some big red times text
<ul></ul> Makes a bulleted list, like what you see above. Put <LI>in front of each item in
the list
<ol></ol> Make a numbered list, like this, again putting <LI> in front of each item:
- one
- two
- three
<h1></h1> Makes a title on your page, just like you see at the top of this page.
<h2></h2> Also a title, but with a smaller font.
<h3></h3> This is a subheading, used to separate sections on your page. Like this:
HTML Tables
<table></table> Makes a table. You'll need to add at least one row <tr></tr> and one
column <td></td>. Put them together and you get a table with one row and one column. Add border=1
to get a line around the table, like this:
<table border=1><tr>
<td>Put some text here</td>
</tr></table>
Three column table:
<table border=1><tr>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
</tr></table>
| Put some text here |
Put some text here |
Put some text here |
Three rows and three columns
<table border=1>
<tr>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
</tr>
<tr>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
</tr>
<tr>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
</tr>
</table>
| one |
two |
three |
| four |
five |
six |
| seven |
eight |
nine |
Make Your Web Page
Open up your copy of notepad or EMACS or any other text editor and play around with some of these
codes. Save the page as mypage1.html and use your browser to view it. Play around with the html codes
until you start to get a feel for how they work.
Keep in mind that the above list is very short. There are a ton of HTML codes and commands to
modify those codes. When combined with CSS you have total control over the look of your web page.
More
For more study you can find links to some html tutorials here.
Of course, if you want to get a nice, warm book to put on your desk while you learn this stuff then you can always
visit Amazon.com
If you just want to build websites and skip all the HTML (and CSS and PHP) codes then I highly
recommend XsitePro (which I used to build this site, and others.)
© 2007 Unixtools.com
| 
