| |
|
|
HTML Directory
| |
|
This guide is not completed yet. It will be done asap. And please do not steal any of my work, including this guide. I am typing this whole chunk by myself, letter by leter
Chapter 1: Basics of HTML 
Chapter 2: HTML Rules
Chapter 3: Using HTML
Chapter 4: Formatting
Chapter 5: Background
Chapter 6: Hyper Links
Chapter 7: Multimedia
Chapter 8: Scrolling Elements
Chapter 9: HTML Entities
Chapter 10: Lists
Chapter 11: Image Maps
Chapter 12: Frames
Chapter 13: Tables
Chapter 14: Meta Tags
Chapter 15: Colors
|
| |
|
| |
|
|
Chapter 1: HTML Basics
| |
Back to Directory
|
What is HTML?
HTML stands for HyperText Markup Language. It is the standard publishing language of the World Wide Web. So is HTML easy? Yup, I learn it by myself and so do millions.
HTML Tags Structure
This section is important and tells you more about the structure of HTML.
HTML are tags, and tags are classified into 2 types, the Start tag, and the End tag. These 2 type tags often are used together as a pair.
An example of a Start HTML tag is this <b>
An example of a End HTML tag is this </b>
Every single HTML tag is enclosed by < and >
Notice that the End tag has a slash / added right before the element and after the opening bracket? Start tags often need to be closed by the corresponding End tag, like this:
<b>This tag is the Bold tag</b>
Easy? Good, on to the next one. Tags have elements, and most have attributes, and each attributes have some values. Sounds confusing? Look at this example:
<a href="example.html"gt;This element aligns stuff</a>
a is the element, href is the attribute and example.html is its value.
Take note of the order, element comes first, then whichever attribute, follows by the equal sign, then the double quotes enclose the value of that attribute.
What if I have more than 1 attribute? Attributes need not have a particular correct order to it. For example:
<img src="html.gif" width="50px" height="100px"> is the same as
<img src="html.gif" height="100px" width="50px">
Wait a minute! There are no closing tags for this!
Yes, thats correct, img tags currently do not need to be closed, though that will most probably change in the near future.
How do I know which tag needs to be closed, and which not to? Well, thats like asking, which tag has which attributes and what values. Most of these are common senses... which comes with experience :)
Tags that need to be closed usually encloses something, like the bold (b) tag mention above. The values usually makes sense to its attribute, like the align attribute, it aligns elements that it encloses. Want it to be center? Then the value is center
Left? Value is left.
HTML Document Structure
Now you know how the tags are like, so if you are to use all these tags to make a webpage, how is it going to be structured like? Take a look at the example of a simple webpage below:
<![CDATA[
<html>
<head><title>Title of the webpage</title></head>
<body>
This is the body of the webpage
<!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script> </body>
</html>
]]>
<html> and <html> encloses the whole HTML webpage. You must use this before using any html.
<head> and </head> encloses the head part of the webpage. The head contains the title tag.
<title> and </title> encloses the title of the webpage. This is displayed at the top of your web browser. The title of this webpage is NeoAegis ~ HTML Help
<body> and </body> encloses the body of the webpage. This practically includes every HTML tag except for some that has to be inside the head. (more into this later on)
The tags mentioned in this section is important and is neccessary for every single valid html document.
What to put inside the head tags?
There are a few tags that can only be used within the head tags. This includes the title tag, meta tags (see Chapter 14: Meta Tags), and opening of external files.
What are external files? Files that are not part of the webpage, it is a seperate document that you opens to influence the webpage opening it. Examples are .css and .js files, CSS and Javascript files respectively. This is usually for the intermediate level, so don't bother too much about it right now.
|
| |
|
| |
|
|
Chapter 2: HTML Rules
| |
Back to Directory
|
There are some guidelines when using HTML. Ok, most are not important currently, but when W3C introduces XHTML, it will be.
Huh? W3C? XHTML? W3C (World Wide Web Consortium) is the organisation that creates HTML and can be considered like a ruling body of HTML. They make the rules and redefine HTML over the years. Therefore, there are different versions of HTML, the most recent one is HTML 4
Different versions have slightly different HTML tags. Why so? W3C deprecates HTML tags that are no longer useful due to the introduction of the Casading Style Sheet (CSS) that overlaps these tags. Therefore old tags are no longer used and new ones are introduced.
So what is XHTML? It stands for Extensible HTML and will be replacing HTML 4. To accomodate this change, its better for you to follow XHTML rules in case your webpage runs into problems in the future. Below are the rules
- No overlapping
Tags must be nested, like this <b>Italics<i>is nested</i>in Bold tag</b>
Overlapping is this: <b>Opening Bold<i>but closes</b>italics first</i>
- Lower case for elements and attributes
<b> is not the same as <B> - uppercasing cannot be used
- Values for attributes must be double quoted
<img src="pic.gif">> is correct. Single quotes are also not allowed
- All tags must be closed
<p>This tag closes</p><p>It is correct</p>
<p>This tag never closes<p>It is wrong
- Entity must be in lower case (see Chapter 9: HTML Entities)
Correct Example:
Wrong Example: &NBSP;
|
| |
|
| |
|
|
Chapter 3: Using HTML
| |
Back to Directory
|
Ready to learn HTML now? Nope, not yet. 1 important tool in using is the Notepad.
What? Not FrontPage? Yes, I know FrontPage is much easier, but you probably will learn more from using Notepad.
To open the Notepad, go to Start -> All Programs -> Accessories -> Notepad
This program is easy to use, you should have no problem, but I could recommend you to run the program, click the 'Edit' tab, and on the 'Word Wrap'. This makes life easier as you need not scroll up and down and left and right! Just up and down... phew
Another feature of Notepad, view any webpage, click the 'View' tab, and click on 'Source' and the Notepad pops up. There is a whole chunk of HTML tags in it, thats the HTML tags of the webpage you are viewing. You can look at it and learn from it. (thats how I did it)
PS: DO NOT copy others work, that includes copying their webpage HTML, it is illegal
|
| |
|
| |
|
|
Chapter 4: Formatting
| |
Back to Directory
|
This chapter is about formatting text. Bold, italics, etc. Apply your basics when using these. Remember that these tags need to enclose the text that you want to format. Therefore, the Start and End tags are needed and they comes in pairs that are the same. For example:
<b>These text are formatted bold</b>
The End tag is the same as the Start tag, except for the / that comes before the element b
Now you are ready to go, the table below shows all tags that format text. Only the Start tag is shown, but of course, you should know the End tag right?
| Tag | Description |
|---|
| <b> | Bold Text |
| <big> | Big Text |
| <tt> | Teletype Text |
| <i> | Italics Text |
| <small> | Small Text |
Attributes for these:
id, class, title, style, dir, lang
You most probably don't need to know what these attributes are at this point, as it is unlikely that you will use them right now.
|
| |
|
| |
|
|
Chapter 5: Background
| |
Back to Directory
|
There are 2 main types of background, image background and colored background. You use the <body> tag for both.
Background Colors
To change the background color, you use the <body> and the bgcolor attribute.
<![CDATA[
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
]]>
Notice the different values for the 3 tags above, they all do the same thing, changing the background color to black. To know more, see Chapter 15: Colors
Background Image
Most sites do not use this attribute, if they do, the image is a simple tile-type image. Do not use complex wallpapers as background image, the loading time is slow, and it usually makes reading text diffcult.
<body background="http://www.freewebs.com/neoaegis/blah.gif">
Background Combinations
<body bgcolor="#000000" background="http://www.freewebs.com/neoaegis/blah.gif">
This tag makes the background filled with black, and with the image blah.gif, this is useful as the background image loads slower than the color, so you might want your visitors to see the correct thing right at the start.
For example, if you have a blue bubbles image as your background, you might want to set your background color as blue so that before the image loads, the blue part is loaded already. This is important if the image cannot load.
Deprecated
Unfortunately, the attributes I mention above for the <body> tag will no longer be in use for XHTML. See Chapter 2: HTML Rules for details. What this means in short is that you need to use CSS.
|
| |
|
| |
|
|
Chapter 15: Colors
| |
Back to Directory
|
Colors are an important aspect of HTML and CSS. You need to know how to select colors to make your webpage more attractive. And mind you, it is not the usual blue, red, green, purple, etc type we are talking about.
Hex Colors
Hex colors, or hexadecimal colors, is make up of the # (hex sign) followed by 6 hexadecimal values. For example, black will be #000000.
If you do not know about hexadecimal, here is a quick rundown. Hexadecimal is a 16-base digit, from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 0 is smallest, F (15) is biggest.
Now, you know about RGB right? Red (R), Green (G), Blue (B). In Hex colors, this is the RGB form, #RRGGBB. So lets say, we want a red color, we will want to eliminate the GGBB values by setting it to 0000 (zero value). We want the red part, so lets set it to FF (biggest value). What we get is #FF0000.
Mixing in Hex
For Black, it is #000000, for White, it is #FFFFFF. Notice that the 'whiter' it is, the bigger the values, and the 'blackier' it is, the smaller the value. Alright, so what if you want a light red color? >#FF6666
You can mix in other colors, like say, purple, which is red plus blue. #FF00FF.
A full amount of red (FF) is mix with a full amount of blue (FF). Want a more redish purple? Use #FF0066
Color Names
There are alot of color names, but only these 16 are allowed in W3C latest HTML versions.
aqua, black, blue, fuchsia, gray, green, lime, maroon
navy, olive, purple, red, silver, teal, white, yellow
Other Color Names
These are the other color names that still can be used, but not advisable. You are better off using Hex.
| Color Name | Hex Color | Color Name | Hex Color | Color Name | Hex Color |
| AliceBlue | #F0F8FF |
AntiqueWhite | #FAEBD7 |
Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
Azure | #F0FFFF |
Beige | #F5F5DC |
| Bisque | #FFE4C4 |
Black | #000000 |
BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
BlueViolet | #8A2BE2 |
Brown | #A52A2A |
| BurlyWood | #DEB887 |
CadetBlue | #5F9EA0 |
Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
Coral | #FF7F50 |
CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
Crimson | #DC143C |
Cyan | #00FFFF |
| DarkBlue | #00008B |
DarkCyan | #008B8B |
DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
DarkGreen | #006400 |
DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
DarkOliveGreen | #556B2F |
Darkorange | #FF8C00 |
| DarkOrchid | #9932CC |
DarkRed | #8B0000 |
DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
DarkSlateBlue | #483D8B |
DarkSlateGray | #2F4F4F |
| DarkTurquoise | #00CED1 |
DarkViolet | #9400D3 |
DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
DimGray | #696969 |
DodgerBlue | #1E90FF |
| Feldspar | #D19275 |
FireBrick | #B22222 |
FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
Fuchsia | #FF00FF |
Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
Gold | #FFD700 |
GoldenRod | #DAA520 |
| Gray | #808080 |
Green | #008000 |
GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
HotPink | #FF69B4 |
IndianRed | #CD5C5C |
| Indigo | #4B0082 |
Ivory | #FFFFF0 |
Khaki | #F0E68C |
| Lavender | #E6E6FA |
LavenderBlush | #FFF0F5 |
LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
LightBlue | #ADD8E6 |
LightCoral | #F08080 |
| LightCyan | #E0FFFF |
LightGoldenRodYellow | #FAFAD2 |
LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
LightPink | #FFB6C1 |
LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
LightSkyBlue | #87CEFA |
LightSlateBlue | #8470FF |
| LightSlateGray | #778899 |
LightSteelBlue | #B0C4DE |
LightYellow | #FFFFE0 |
| Lime | #00FF00 |
LimeGreen | #32CD32 |
Linen | #FAF0E6 |
| Magenta | #FF00FF |
Maroon | #800000 |
MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
MediumOrchid | #BA55D3 |
MediumPurple | #9370D8 |
| MediumSeaGreen | #3CB371 |
MediumSlateBlue | #7B68EE |
MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
MediumVioletRed | #C71585 |
MidnightBlue | #191970 |
| MintCream | #F5FFFA |
MistyRose | #FFE4E1 |
Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
Navy | #000080 |
OldLace | #FDF5E6 |
| Olive | #808000 |
OliveDrab | #6B8E23 |
Orange | #FFA500 |
| OrangeRed | #FF4500 |
Orchid | #DA70D6 |
PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
PaleTurquoise | #AFEEEE |
PaleVioletRed | #D87093 |
| PapayaWhip | #FFEFD5 |
PeachPuff | #FFDAB9 |
Peru | #CD853F |
| Pink | #FFC0CB |
Plum | #DDA0DD |
PowderBlue | #B0E0E6 |
| Purple | #800080 |
Red | #FF0000 |
RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
SaddleBrown | #8B4513 |
Salmon | #FA8072 |
| SandyBrown | #F4A460 |
SeaGreen | #2E8B57 |
SeaShell | #FFF5EE |
| Sienna | #A0522D |
Silver | #C0C0C0 |
SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
SlateGray | #708090 |
Snow | #FFFAFA |
| SpringGreen | #00FF7F |
SteelBlue | #4682B4 |
Tan | #D2B48C |
| Teal | #008080 |
Thistle | #D8BFD8 |
Tomato | #FF6347 |
| Turquoise | #40E0D0 |
Violet | #EE82EE |
VioletRed | #D02090 |
| Wheat | #F5DEB3 |
White | #FFFFFF |
WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
YellowGreen | #9ACD32 |
|
|
| |
|
|
