Unix Tools
unix tutorials, unix security, unix help


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:


<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>


<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:


<title>My Awesome Brand New Webpage</title>


<body>All the text of your webpage goes here</body>


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

  • one
  • two
  • three

<ol></ol> Make a numbered list, like this, again putting <LI> in front of each item:

  1. one
  2. two
  3. 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>

 Put some text here

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>

 Put some text here Put some text here  Put some text here 

Three rows and three columns

<table border=1>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>
<td>Put some text here</td>

 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.


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