HTML - Only For Beginners

HTML Colors

2008-10-19T01:15:00.000-07:00

In html, it is very important to understand how colors are being treated or interpreted. The persons who standardize the html decided to use hexadecimal formatted colors for the browsers.

Don't panic, you do not need to memorize all those hexadecimal codes for each colors. The internet is so old that many website offer those hexed color codes in free. What important for now is for you to know that colors on the web are in hexadecimal format.

It's important to understand this format so you can play with it too, so let's begin:

This is an example of a hexadecimal formatted web color: #ffffff

Generally, a number (or sharp) sign is placed before the hex code.

Now, this hexadecimal color format is arrange based on the combination of the RGB colors: Red, Green and Blue.

Each colors takes two position on the hex-code, which will be #RRBBGG.

Also, you must learn that the heaxadecimal is written in this way:

0 1 2 3 4 5 6 7 8 9 a b c d e f

Hex color is based on 16, The colors will be adjusted to add as the count goes to the "f" value, and the colors will reduced when the count goes to zero.

It is much easier to remember this if you will recall what our elementary teacher said that the white color is the presence of all color, and black is the absence of all color.

With this, then the color white's hex code will be: #ffffff , or the rpesence of all color, and the black will be: #000000, or the absence of all colors.

Also, we can pull the green with this code: #00ff00 , since we turned-off all colors and except the green.

Red then will be: #ff0000
And blue will be: #0000ff

A combination of these three will give you different colors:

Yellow: #ffff00
Gold: #ffd700
Violet: #ee82ee

The Websafe Colors

If you have read other webmasters on other sites telling you about websafe colors, and advice you to stick on it, well, it is actually true. But I did not say that you should follow them, because the new generation of browsers today are so advance that they can interpret or decode any possible color combinations on the web.

But let's talk about the websafe colors so you may be informed. The websafe colors are colors with the strick combinations of 0,3,6,9,c & f characters. This is the proper format of hexadecimal color numbers. But as I have said, the advancement of browsers (Internet Explorer, Firefox, Chrome, etc.) can cater the most ambiguous color combination of an hex formatted web colors.

With this advance feature of the browsers, the websafe terms is now converted to a worry-free and coder-safe mentality.

What a relief, isn't it? Because im sure that no one wants an unexpected output for their website.

Now here's some useful web colors and their corresponding hex code:

HTML name	Hex code R G B
Red colors
IndianRed	CD 5C 5C
LightCoral	F0 80 80
Salmon	FA 80 72
DarkSalmon	E9 96 7A
LightSalmon	FF A0 7A
Crimson	DC 14 3C
Red	FF 00 00
FireBrick	B2 22 22
DarkRed	8B 00 00
Pink colors
Pink	FF C0 CB
LightPink	FF B6 C1
HotPink	FF 69 B4
DeepPink	FF 14 93
MediumVioletRed	C7 15 85
PaleVioletRed	DB 70 93
Orange colors
LightSalmon	FF A0 7A
Coral	FF 7F 50
Tomato	FF 63 47
OrangeRed	FF 45 00
DarkOrange	FF 8C 00
Orange	FF A5 00
Yellow colors
Gold	FF D7 00
Yellow	FF FF 00
LightYellow	FF FF E0
LemonChiffon	FF FA CD
LightGoldenrodYellow	FA FA D2
PapayaWhip	FF EF D5
Moccasin	FF E4 B5
PeachPuff	FF DA B9
PaleGoldenrod	EE E8 AA
Khaki	F0 E6 8C
DarkKhaki	BD B7 6B
Purple colors
Lavender	E6 E6 FA
Thistle	D8 BF D8
Plum	DD A0 DD
Violet	EE 82 EE
Orchid	DA 70 D6
Fuchsia	FF 00 FF
Magenta	FF 00 FF
MediumOrchid	BA 55 D3
MediumPurple	93 70 DB
BlueViolet	8A 2B E2
DarkViolet	94 00 D3
DarkOrchid	99 32 CC
DarkMagenta	8B 00 8B
Purple	80 00 80
Indigo	4B 00 82
SlateBlue	6A 5A CD
DarkSlateBlue	48 3D 8B
MediumSlateBlue	7B 68 EE

HTML name	Hex code R G B
Green colors
GreenYellow	AD FF 2F
Chartreuse	7F FF 00
LawnGreen	7C FC 00
Lime	00 FF 00
LimeGreen	32 CD 32
PaleGreen	98 FB 98
LightGreen	90 EE 90
MediumSpringGreen	00 FA 9A
SpringGreen	00 FF 7F
MediumSeaGreen	3C B3 71
SeaGreen	2E 8B 57
ForestGreen	22 8B 22
Green	00 80 00
DarkGreen	00 64 00
YellowGreen	9A CD 32
OliveDrab	6B 8E 23
Olive	80 80 00
DarkOliveGreen	55 6B 2F
MediumAquamarine	66 CD AA
DarkSeaGreen	8F BC 8F
LightSeaGreen	20 B2 AA
DarkCyan	00 8B 8B
Teal	00 80 80
Blue colors
Aqua	00 FF FF
Cyan	00 FF FF
LightCyan	E0 FF FF
PaleTurquoise	AF EE EE
Aquamarine	7F FF D4
Turquoise	40 E0 D0
MediumTurquoise	48 D1 CC
DarkTurquoise	00 CE D1
CadetBlue	5F 9E A0
SteelBlue	46 82 B4
LightSteelBlue	B0 C4 DE
PowderBlue	B0 E0 E6
LightBlue	AD D8 E6
SkyBlue	87 CE EB
LightSkyBlue	87 CE FA
DeepSkyBlue	00 BF FF
DodgerBlue	1E 90 FF
CornflowerBlue	64 95 ED
MediumSlateBlue	7B 68 EE
RoyalBlue	41 69 E1
Blue	00 00 FF
MediumBlue	00 00 CD
DarkBlue	00 00 8B
Navy	00 00 80
MidnightBlue	19 19 70

HTML name	Hex code R G B
Brown colors
Cornsilk	FF F8 DC
BlanchedAlmond	FF EB CD
Bisque	FF E4 C4
NavajoWhite	FF DE AD
Wheat	F5 DE B3
BurlyWood	DE B8 87
Tan	D2 B4 8C
RosyBrown	BC 8F 8F
SandyBrown	F4 A4 60
Goldenrod	DA A5 20
DarkGoldenrod	B8 86 0B
Peru	CD 85 3F
Chocolate	D2 69 1E
SaddleBrown	8B 45 13
Sienna	A0 52 2D
Brown	A5 2A 2A
Maroon	80 00 00
White colors
White	FF FF FF
Snow	FF FA FA
Honeydew	F0 FF F0
MintCream	F5 FF FA
Azure	F0 FF FF
AliceBlue	F0 F8 FF
GhostWhite	F8 F8 FF
WhiteSmoke	F5 F5 F5
Seashell	FF F5 EE
Beige	F5 F5 DC
OldLace	FD F5 E6
FloralWhite	FF FA F0
Ivory	FF FF F0
AntiqueWhite	FA EB D7
Linen	FA F0 E6
LavenderBlush	FF F0 F5
MistyRose	FF E4 E1
Grey colors
Gainsboro	DC DC DC
LightGrey	D3 D3 D3
Silver	C0 C0 C0
DarkGray	A9 A9 A9
Gray	80 80 80
DimGray	69 69 69
LightSlateGray	77 88 99
SlateGray	70 80 90
DarkSlateGray	2F 4F 4F
Black	00 00 00

color's table source: Wikipedia

Basic HTML Tags

2008-10-11T22:03:00.000-07:00

Let us now proceed to the other very useful html tags that you as a future coder will need:

The <html> tag

As you create your web pages you will be using the html tag <html>. Actually you can create a web page without using this tag. Try opening a notepad and then type anything there, then save it with an .html or .html extension. If you will double click your saved file, it will open to your web browser.

So why would we be needing to use html tags anyway?

This is because we need to tell the browser that this is an html document. When the browser see the html tag <html> on the beggining of you webpage, then the browser will treat every following code to an html. This willmake your created page to be interpreted by the browser just the way you expect it to be.

The <head> tag

The head tag, from its name basically means that upon loading of you webpage on the browser, the browser will first look and load the codes inside the head tag before it interpret the succeeding code on the body of your webpage.

The basic function of this is that you can be assure that your Javascript Codes, Cascading Style Sheet Codes (CSS), your page's title and your other cannot-afford-to-be-loose codes will be loaded.

For example, if a certain part of your hyperlink uses a javascript for it to behave in a certain way you want then you need to be assure that the javascript function that it is using will be loaded FIRST before itself.

It is only logical to load a function parameter first before the code that will use it.

In this idea makes the <head> tag useful.

The <title> tag

The title tag <title></title> is placed inside the head tag <head></head>. From the word itself, the title tag is the container of your page's title, usually seen at then top of each browsers. You must include a single phrase that is meaningful enough to indicate your web page's content.

There's actually no special discussion about this tag, it is just a webpage's title containier, that's it.

The <body> tag

The body tag <body></body> is the main containner of your webpage. This is where most of your html code will reside. This is usually where the actions happens. The basic container of your website's elements.

I usually follow an html table with a width of 100% after a body tag <body>, this practice tells me that this whole window is my teritorry, which gives me flexibility to play inside the body tag.

The Image <img/> tag

The image tag <img/> violates the basic construction of an html tag, which must have an opening and a closing tag. But the image tag has no closing tag, but as you can notice, an slash character is place just before we close the imaage tag.

For example:

Actually, we can omit the slash character at the end area and our image will still be functional on our actual output. Though we can only do this on html pages because html is very forgiving on some human mistakes. for example, a column tag <td> will still function even you won't include its ending tag. But will not be tolerated on future generations, especially on the existence of XML.

With this idea, it is a good practice to include a slash character just before you end the tag of an image tag, just like the example above.

This is of course applicable only for those tags that will not be having closing tags, some of which are:

Image tag <img/>
Horizontal Rule tag <hr/>
Line Break tag <br/>

The Font <font> tag

The font tag is used when you need to manipulate the characteristics of a certain text or block of text. Though your texts will still be displayed without using this tag. But using this tag around your texts would be very functionaly since you can use this tags came with various attributes used to format your text's final display.

Example:

<font face="Verdana, Arial, Helvetica, sans-serif" color="00ff00" size="2">I have two green apple.</font>

I have two <font face="Verdana, Arial, Helvetica, sans-serif" color="00ff00" size="2">green</font> apple.

The code above will have the following output:

I have two green apple.

I have two green apple.

The Hyperlink Break
<a href=""></a> tag

I'm sure that you're pretty familiar on the hyperlink tag since it is used even on office applications. But if youre not, well, hyperlink simply are link texts or images that will redirect your current open page into other pages. If it is a text link, it is usually come in blue color.

Hyperlink usually makes themselves obvious when the mouse changes to a hand icon.

Now let's make some example: <a href="http://www.google.com">http://www.google.com</a>
<a href="http://www.google.com">Go to Google</a>
<a href="http://www.google.com"><img src="google_pic.jpg"/></a>

The code above will have the following output:

http://www.google.com
Go to Google

The Line Break <br/> tag

The line break tag literally means as it reads, it breaks lines. Each line breaks
tag makes the following elements to be displayed on the next line, so if you include two line breaks tag <br/><br/>, the succeeding elements will be displayed after the second line from the line where the line break occur.

This tag also has no end or closing tag that's is why it must be closed by a slash character.

Example:

This<br/>line has been<br/>breaked by<br/>the line<br/>break "<br/>" tag.

Output:

This
line has been
breaked by
the line
break "<br/>" tag.

The Horizontal Rule <hr/> tag

The horizotal rule, when used basically creates a horizontal lines on the page.

The Paragraph <p> tag

The paragraph tag is usually used when creating a paragraph. When used,html will automatically create line breaks before and at the end of the content inside the tag.
For example:

<p>This is a paragraph entry</p>
<p>This is an another paragraph entry</p>

The code below will have the following output:

This is a paragraph entry

This is an another paragraph entry

And again, the paragraph tag can be used without the closing tag and will be functional on some browsers. But writing its closing tag is a good practice that must be applied on every html tags. As I have said before, most browsers tolerate this bad practice, but the future version of browser will not most likely to cater this mistakes. So be very mindful to have a good programming practice on html coding to prevent unexpected output display.

The Heading <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags

The heading tag is used as a heading or as a subheading on a particular phrase, or sentence. When a text is enclosed from these tag, the text will be displayed in bold and in variable size depending on what number heading is used. <h1> to be the biggest font and <h6 to be the smallest.

These heading tag is generally used to emphasized a certain text of a webpage.

Example:

<h1>Number 1 heading tag</h1>
<h2>Number 2 heading tag</h2>
<h3>Number 3 heading tag</h3>
<h4>Number 4 heading tag</h4>
<h5>Number 5 heading tag</h5>
<h6>Number 6 heading tag</h6>

So that will be it for now, actually, html has so many different tags and attributes, but since this site was made only for the beginners, I'm so sure that the beginners won't be needing those advance tags like the input field <input type="text, password, checkbox, radio, etc." name="textbox's_name_here">, form <form name="" method=""> and etc.

Those tags are so advance that they will make the website as a dynamic or some database driven site. Using them will also require any programming skills like asp, coldfusion, php, jsp and etc..

This html tags, I showed to you is enough to assemble your own html website. Just create a table according to your needs. Code a table then trim your rows and columns, size them, put some image on your site and create some text-content inside those columns and rows.

Create your personal website as a practice page. This is what I did when I'm still learning html, it would give you many lesson and it will also be fun and inspiring too :)

HTML Attributes

2008-10-02T21:57:00.000-07:00

So let's study html attribute. As I have said before, html attributes creates behavior for html tags. Every tags could have their own attributes, but some tags could use same attributes. For example, the table tag <table> and the column tag <td> both have the "width" attribute:

But of course you should only use logical attributes for every tag, otherwise it will only be ignored by the browser. For example, it is so wrong to write a "valign" attribute to a column tag since it only uses the "align" tag. Column tag can only align your content on horizontal basis which are: left, right, center.

"align" attribute is used to a column tag <td> while "valign" is used on the row tag <tr>

This could comprehend more if you could see some examples:

<table border="1" width="50%" height="100px">
     <tr valign="middle">
          <td align="center">
               This is a centered text
          </td>
     </tr>
     <tr>
          <td>
               This area will have the default settings
          </td>
     </tr>
</table>

The code above will have the following output:

This is a centered text

This area will have the default settings

So that will be for html attributes for now, i believe that you got the idea about attributes. Lets proceed to the other lessons:

More About HTML Table

2008-09-29T21:23:00.000-07:00

Okay lets get deeper on HTML tables now.

As I have said on the early part, html have tags and attributes. In order to declare or specify the behaviour of a certain html table's part, you will be needing to manipulate its attrbutes.

Here are some most commonly used table tags:

Attribute	Value	Description
bgcolor	rgb(x,x,x) #xxxxxx colorname	Tells the background color of the table
border	pixels	The border width of the table.
cellpadding	pixels %	The space between the cell walls and contents
cellspacing	pixels %	The space between cells
rules	none groups rows cols all	Displays the vertical and horizontal grid of the table. Note: Can only be used if the "border" attribute is specified, otherwise - no effect!
width	% pixels	Specifies the width of the table
background	(image's link location) pixels	Image background of the table

The table has also a feature function that enables the heading to automatically displayed in bold, which emphasize it. Though you can achieve the same display by using the <font> tag or with the <b> tag. But just to inform you, you can use the <th> (table heading) tag instead of <td> tag, for example:

<table border="1">
     <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
           <th>Heading 3</th>
     </tr>
</table>

Heading 1	Heading 2	Heading 3

In relation, the <tr> and the <td> tag also have its own attribute, One of the most useful and common atrribute of the <tr> tag is the "valign" attribute, for example:

This specify the vertical alignment of a certain row, remember that the <tr> tag is a row tag.

MERGING CELLS IN HTML TABLE

The column tag's <td> "rowspan" and "colspan" is used to merge cells in an html table. This table's attribute is one of the most useful among web developers. It offers great flexibilty that enables web designers to develop layouts that would match to their needs.

Example:

<table border="1">
     <tr>
          <th>
               Column 1
          </th>
          <th>
               Column 2
          </th>
          <th>
               Column 3
          </th>
     </tr>
     <tr>
          <td rowspan="2">
               Row 1 Cell 1
          </td>
          <td>
               Row 1 Cell 2
          </td>
          <td>
               Row 1 Cell 3
          </td>
     </tr>
     <tr>
          <td>
               Row 2 Cell 2
          </td>
          <td>
               Row 2 Cell 3
          </td>
     </tr>
     <tr>
          <td colspan="3">
               Row 3 Cell 1
          </td>
     </tr>
</table>

Now here's the output of the code above:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

Didn't that makes our html table flexible? You should remember this two things as they will be very useful as long as you create tables in html.

So that's about the html table tag, lets take a look on other html tags on the next page.

Introduction

2008-09-28T21:17:00.000-07:00

Do you have zero knowledge on html? or are you a total beginner in using html?

If yes is your answer to any of the questions above then tutorial is just right for you, HTML - Only for begginers is designed to cater html beginners to help them from commonly confused html terms designing techniques.

As you may have already seen (well, I suppose that you had seen a html source code of any web page), html codes are a little intimidating with all that new characters or tags and code environment. I learned html from my self alone, I will say that I did it in a hard way, reading books and dreamweavers help page and most especially,scanning and downloading actual examples of running web pages on the net. Though, I learned everything I know from myself about html, looking back then, how I wish that there are friendly sites like this that is really made for total begginers.

Though I saw some tutorial sites before who teach html for begginers, but their pacing was too fast for a beginners. I don't know exactly how can I explain the difference of their site with this one that I created, but all I know is that I made this tutorial site, according to what I had felt when I was still on the learning stage of my html world.

As a computer engineering student back then, and having a background on some programming language. I already have some knowledge about computer logic, syntax and tags. But I understand, that not all who want to learn html have the same background like me. So this site will teach you and will deal to you like you're a total beginner with zero to very low knowledge on html. Sounds good right? yeah, the exact tutorial I wished I had before.

So relax, and throw all your fear about learning html. If you thought and if you heard that hml is so hard to learn, then you are totally wrong. Html is as easy as drawing a face on a paper, all you need to do in drawing a face is to know the difference between the nose, eye, mouth and etc, and learn to position them in the right place. In html all you need to know is to know the (very simple) code that creates columns, rows, lines and etc. and to learn to position them on the right place, all according to your needs and desire.

So, are we all set? Let's begine with the introduction on the next page...

Learning Tables' Basic

2008-09-25T00:03:00.000-07:00

HTML or HyperText Markup Language is the language for web pages. It is the language which browsers (Internet Explorer, Mozilla’s Firefox, etc.) used to interpret and enables to display a certain webpage. Generally, a webpage is composed of table and nested tables (tables inside the tables). Though the existence of XML had made the usage of table, still as a beginner, I think that learning the purpose and the essence of using a table is a very important step you need to take.

When I still do not know how to create a web page my initial question is how did they know how to place a certain part on this area on this side? Only to know later on that an html web page is composed of tables with columns and rows like this:

Webmasters (persons who create web page) also modify the table according to their need:

First of all, html are composed of various tags, but for now we will first discuss the tags in creating tables, columns and rows.

<table> This is the tag for creating a table
<tr> This is the tag used in creating a row
<td> This is the tag used in crating a column

What you see above are the start tags, every tags have start and end tag. Though there are some tags that do not require end tags, which we can discuss on the future, but for now we will use html elements or tags that use start and end tags to avoid confusion. What we are trying to do in our initial step is to use the basic principle of html, so lets begin.

If you want to create a table you will need to use the table <table> tag, relatively if you want to create column you will use the column <tr> tag, and of course, the same goes with the row <td> tag.

Now here’s a basic composition or code structure of a table with columns and row with it:

<table border="1">
     <tr>
          <td>
               This is where you place your web page’s content (images, videos, text, etc.)
          </td>
     </tr>
</table>

The output for our html code at the top will be:

This is where you place your web page’s content (images, videos, text, etc.)

As you can see, we just created a basic table with one column and with one row. First thing first, the actual output of the code we created will be:

This is where you place your web page’s content (images, videos, text, etc.)

As you can see, the table is not visible. By default the table’s border is set to zero unless specified by the user. So I just placed a border to show a table with one column and one row.

I just added an attribute to our table tag <table> for it to have a border, which is:

<table border="1">
     <tr>
          <td>
               This is where you place your web page’s content (images, videos, text, etc.)
          </td>
     </tr>
</table>

Html is composed of different tags, but on how you would want a certain tag to be displayed will be its attribute’s job. Different tags have their own attributes, in common people’s term, attributes is people’s characteristics.

For example, html tag could be represented by people’s hair, so it is easy to know that most people have a hair tag. But on what color, style or length will be the hair tag’s attributes, which would be:

Using real html tag, it could be:

As I have said, different tags have its different attributes. We will discuss them in detail in future discussion, but for now it is useful to first understand the relationship of tags and their attributes.

It is of course the same principle applied to the column <td> and the row <tr> tags.

It is important to know that you should create a logically defined table, meaning that a basic table must have an equal numbers of columns in each rows, or vice-versa. For example:

This is a basic rule of creating a table, in the figure above all columns have three rows and all rows have four columns.

But this doesn’t give much flexibility to a webmaster doesn’t it? What if you need to create a table like this:

1 – Your website’s banner
2 – Navigation links area
3 – Display window

In this case, webmaster use an attribute colspan=”” for the column tag . So, let’s convert the display above into its corresponding html code:

Oh, by the way, as you had noticed on our examples, some of our codes are indented. This is because a good coder must have a good habit of indenting his codes, in this way a coder can easily identify his tags. Since a complete webpage would consist numbers of tag combinations, indenting a tag would enables a coder to pinpoint a tag’s start and ending point. This is called proper nesting of tags, nesting means putting a tag inside a tag, for example:

As you can see, the row tag <tr> is nested inside the table tag <table> and the column tag <td> is nested inside the row tag <tr> and the table tag <table>. What you can see on the above html code are a very simple example of nested tags.

So we are done on the surface of html, let’s go to a more detail discussion on the next topics.

HTML Editor

2007-10-28T21:20:00.000-07:00

I personally believe that the best way to learn things is doing it hands-on.

So let us do it.!

Please care to browse at the bottom part, where our window is wider.
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
V
( Only Works in IE )
Input Window

Output Window: