|
|
HTML Reference v1.50
--------------------------------------------------------------------------------
HTML Terms:
attribute - an additional name/value pair
added to a tag
bg - background
comment tag - a tag in the form <!-- comment --> ignored by
the browser
hypertext link - a string of text defined by
<a>...</a> tags which leads to another site
syntax - the basic sequence of the HTML code
tag - an HTML object used to define a specific format or another
object
text - any characters within <p>...</p> tags
--------------------------------------------------------------------------------
A Basic HTML document:
<html>
<head>
<title>My HTML Document</title>
</head>
<body bgcolor="#FFFFFF">
<p>This is some text.</p>
</body>
</html>
What it all means:
*All HTML tags are found within
"<" and ">" i.e.
<html>...</html> and <p>...</p>
*The " / " in the HTML tags defines a closing tag
*All HTML attributes are in the form:
<tag attribute="value"> such as <body bgcolor="#FFFFFF">
*HTML Colors: All are preceded by a pound sign (#)
#000000 = Black
#FFFFFF = White
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue
*The Title of your HTML document is defined
by <title>...</title> tags
*The <html>...</html> tags define the document as an
HTML document
*The <head>...</head> tags contain the title and
<meta>** tags
** The <meta> tag does NOT require a </meta> tag for closing. Their content is used only by search engines and is not displayed on your Web site. All meta tags follow the syntax: <meta name="value" content="value">.
Here are some important meta tags you may use.****** This site is one where I strongly recommend viewing its source code. This is how I learned a lot of the HTML that I use.
1.<meta name="keywords" content="enter_your_keywords_here">
2.<meta name="distribution" conent="global">
3.<meta name="robots" content="noindex">
4.<meta name="author" content="your_name_here">Replace enter_your_keywords_here in Example 1 with keywords to describe your new WWW site's content. This <meta> tag also can improve your search engine placement, which is very important if you want to increase your "hits" to your site.
Example 2 states that your site will be available to anyone in the world, even if the people in a particular country do not speak the language in which the site is written, i.e. a site written in English can be viewed in a non-English-speaking country.
Example 3 declares that a particular page is not to be listed in a search engine.
Example 4 declares the author of the WWW site.
*The <body>...</body> tags contain the main section of the HTML document. It may contain:
<p>
<font>
<img>
<a>
<i>
<b>
<u>
<script>
<marquee>
<blink>
<code>
<kbd>
<cite>
<span>
<table>
<form>
<hr>
<object>
<!-- ... -->and almost any other tags.
The <p>...</p> tags
The syntax for <p>...</p> is:
<p>text_here</p> or <p align="left_center_or_right">...</p>
Example 1:
...
<p>text_here</p>Example 2:
<p align="center">This is centered text</p>
The <font>...</font> tags:
The syntax is:
<font attribute1="value" attribute2="value">...</font>
Example 1:
<p><font color="#000000" face="Times New Roman">text</p>
Example 2:
<p><font color="#000000" face="Times New Roman" size="5">This is black, size 5 text in Times New Roman</font></p>
The <img> tag
The syntax is:
<img src="http://www.domain.com/path/filename.ext">
There is no closing tag for <img>
Example 1:
To insert an image into an HTML document from "stuff.com" in the directory "images" and saved as "pic.jpg" you would enter:
<img src="http://www.stuff.com/images/pic.jpg">
The <script>...</script> tags
The syntax is:
<script language="name_of_language">...</script>
Example 1:
<script language="JavaScript">
function xxx( ){
window.alert("This is how the script tag is used.");
}
</script>In order for a script to execute properly, you must include a statement that tells it to execute, such as <body onload="xxx( )">rest_of_document</body>
The <form>...</form> tags
The syntax is:
<form name="name" method="POST" action="mailto:email@server.net">...</form>
The <input>...</input> tags are placed within the form tags
Example 1:
<form name="my_form" method="POST" action="mailto:www@http.com" enctype="text/plain">
<input type="select">
<option>What computer language is used here?</option>
<option>HTML</option>
<option>Java</option>
<option>C++</option>
<option>XML</option>
<option>Perl</option>
</input>
<input type="submit" value="Submit">
</form>
The <hr> tag
The sytax is:
<hr color="#xxxxxx">
-------------------------------------------------------------------------------
Examples:
<font> :
Blue Text
BIG TEXT
Tiny Text
<p align="left|center|right">
LEFT
CENTER
RIGHT
ADVANCED TECHNIQUES
Integrating CSS into HTML:
In order to predefine HTML tags (and therefore eliminate the need for some of those extra attributes), you may use CSS to simplify the source code. Begin any CSS statement using the following syntax:
<style type="text/css"><!--
CSS code here
--></style>---------------------------------------------------------------------------------------
Example: Customizing Font Color in CSS
In this example, you will learn to manipulate font colors within CSS.
Code: (with comments)
<style type="text/css"><!-- Anything in this tag will not be displayed
FONT {color: #FFFFFF; size: 8;}
--></style>
<!-- This code defines all text as white, 8-point text. -->In addition to using CSS to format a specific tag for an entire document, you can also create different classes of tags by using the class attribute (i.e. <a class"new" href="whatever">123</a>). This example would create a new class of <a> tags called "new". To specify it in CSS, use A.NEW, instead of just A to denote that the following set of attributes is for that class only.
Using Layers
HTML documents can consist of more than just two "dimensions." Using the <div> tags, one can define a system of layers which instructs the browser to interpret some content as being "on top" of the rest. For example, the following code places "sephiroth1.gif" on the top layer, 30 pixels from the left edge, and 33 pixels from the top of the page. <div> elements may also consist of tables, links, text, or a combination thereof. Keep in mind though, that you need to be careful not to cover anything else up.
<div id="Layer1" style="position:absolute; left:30px; top:33px; width:740px; height:85px; z-index:1"><img src="http://members.cyberz.net/lew5423/sephiroth1.gif"></div>
Neo Draconian's "Top 10 Examples of Bad Web Design"
10. Missspelled wordz ( and other typos )
9. Yellow Text on White Backgroud
8. Everything about the <blink> tag
7. Images that take 10 minutes to load
6. These is a well example of bad grammar
5. Script errors
4. Overpowering images
3. Text that is the same color as the background (select that one!)
2. HTML code that appears on the page
1. 404 - File Not Found ( That includes when somebody fails to upload their image files )
------------------------------------------------------------------------------
Avoid the above and you most likely will have a good Web Site.
Also, DO NOT TYPE IN ALL CAPITALS!!! This is the equivalent to shouting on the World Wide Web.