Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 [Tutorial] General tutorial from www.dominickgatto.com
Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Printable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
Photoshop_User




, but put nothing in there.
WARNING- Browsers (MF excepted) will not show the borders around the cell.
To get around this, add a  .
There are a LOT of examples I could show for tables. I will post the specific examples later.
Lists:
There are three kinds of lists- unordered, ordered, and definition.
Unordered:
These are a list of items that are marked by bullets (usually small black dots).
Unordered lists start with the <ul> tag. Each item starts with a <li> tag.
PostPosted: Wed May 17, 2006 9:30 pm   Post subject: [Tutorial] General tutorial from www.dominickgatto.com

[QUOTE=Shadow Crest]I wrote this for www.accensiondesign.com. I hope you like it.
Also, I wrote this somewhere, but it is aimed for beginner's.
Pt. 1-
This part will explain what HTML is, and by the end, you will have a very basic HTML page!
I will assume that you know nothing about HTML.
What is HTML?
HTML, or HyperText Mark-up Language, is, essentially, the language that creates most web pages. More specifically, it is made up of tags, known as mark-up tags. These tags tell the web browser how to display the page.
Anyways, just a few concerns to clear up before we move on-
- HTML will work with any specific platform
- You do not need to be logged on the internet to write HTML
- All you need is Notepad, SimpleText, or any other notepad-like program
- This is NOT a computer language!!!
- You may use any browser to read HTML (some changes may be necessary, but I will not go into that detail in this lesson)
IMPORTANT!!!
It is fine to use a program like MS Word to create HTML, but you must save it as a .txt file. To do that, press file -> save as, and where it says "save as type," or something similar to that, choose text or .txt from that.
(You need not worry about this if you are using Notepad or similar; it saves it as a .txt by default)
-UPDATE!- Make sure that you are saving it ANSI encoding, or it will not work properly!
Your First Code!
All right, time to get something done, right?
First, open up Notepad or whatever program you are using. Now, type in the following text:
code:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Time to go through this in detail.
<html> tells your browser that it is the start of an HTML document. </html> tells your browser that it is the end of the HTML document.
<html> is always the first tag, and </html> is always the last tag. (There are exceptions, but for now, assume that it is always the first tag)
Anything between <head> and </head> is header information, and is not displayed in the browser window.
Anything between the <title> and </title> tags is the title of your document, and is displayed in the caption at the top-left of your browser.
Anything between <body> and </body> will be displayed in the browser.
Anything between and will be displayed bold.
Saving and displaying your work
When you save your file, in the file name, first put the name, such as myfirsthomepage, but following this, add a .html. Why? This needs to be done for "association,"which is how the computers tell different files apart. All files on the web follow a "name.suffix" (Remember that the filetype must be a .txt )
To show it to yourself, open your web browser, and choose File -> Open (Open File in MF). Choose your file, and you should see it. It probably doesn't look too good, but hey, we all got to start somewhere, right?
Next week, we begin learning some tags. I do have some homework for you, however. Click View -> Source (Or Page Source, or something like that). Study some HTML; it will help with the learning process.
Until then, see you!
-Shadow C.
(The next tutorial won't be as wordy, and will have more code to break it up a bit. Hang with me, OK?)
Pt. 2-
If you are a beginner, I hope you read part 1.
Anyways, you remember that, in the last lesson, a while ago, we created a simple HTML document. Today, we will make a bigger one, which will turn out a little bit better.
By the end of this lesson, you will know what the following are:
- Headers
- Paragraph tags
- Breaks
- Horizontal Rule
- Comments
Anyways, let's get to it!
Headers
Headings are, well, used for headings of sections. They can be defined with the <h1> to <h6> tags. <h1> is the largest heading, and <h6> is the shortest.
For example, open up notepad, create a file with the following code, and open it in the browser!
code:
<h1> A heading! </h1>
<h2> A heading! </h2>
<h3> A heading! </h3>
<h4> A heading! </h4>
<h5> A heading! </h5>
<h6> A heading! </h6>

See the difference?
Paragraphs and line breaks
When you want to create paragraphs, use the <p> tag.
code:
<p> Hi Mom! </p>
</p> I'm writing a tutorial today! </p>

Now, let's say that you want to put breaks in that paragraph to save a lot of space from <p> and </p> marks. Add a <br>!
code:
<p> Hey! <br> Look at this gigan<br>tic toy!</p>

Horizontal Rule
If you wish to separate sections, one way is to use the horizontal rule, <hr>
There is no closing tag.
Comments
Suppose you want to leave something for source readers. Use <!-- -->.
Try this code:
code:

<html>
<body>
<p> Hello, my name is Roger! <br>
<!-- No it's Not! -->
I rock!</p>
</body>
</html>

Quck Notes
Be aware that what you enter may look completely different between Firefox and IE. Some have small monitors, some large. Whatever you do, do not try to format the text by adding spaces and empty lines into the text.
HTML will truncate the spaces in the text, making spaces merely count as one.
DON'T use <p> to create line breaks!!! Use <br>! (Unless you want to make a list. If you do, bear with me, we will get to that later.)
You can use solely <p> and no end element, but for the new version of HTML, you should, as it will soon be required.
HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.
Summary
There, see, short and painless, like I promised. Next time, we will get into formatting!
Until then, practice! And remember to view source!
Pt. 3-
Hope you read the first two parts.
Here, we are going to learn all about formatting. By the end of this, you will know about:
- Basic Text Formatting
- Computer Output Tags
- Citations, Quotations, and Definition Tags
- Entities
- Links
NOTE: If you intend to learn about XHTML, much of this will be deprecated. If you plan on HTML only, this is a great chapter for design, and even for some basic design if you are going to learn CSS.
Anyways....
So you have played with the basics, and want to learn more? Here, we will make your webpage look better greatly, with formats.
Basic Text Formatting:
code:
<html>
<body>
<b>Bold I am</b>
<br>
<strong>
Time to break some concrete
</strong>
<br>
<big>
I'm Huge!
</big>
<br>
<em>
LOOK!!!
</em>
<br>
<i>
The Downward Spiral
</i>
<br>
<small>
I'm Tiny!
</small>
<br>
CO
<sub>
2
</sub>
<br>
2
<sup>
2
</sup>
</body>
</html>

Paste this and open it in a web browser. See some differences? If you ever used Word or Appleworks (or something similar, you have probably seen these, so I won't explain what they are, but not where the tags are located.
Here is a chart of many of them:
code:
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

Computer Output Tags:
Maybe you need to type in some code. These tags will help:
code:
<html>
<body>
<code>Notepad!</code>
<br>
<kbd>The keyboard</kbd>
<br>
<tt>Hot off the typewriter</tt>
<br>
<samp>A sample</samp>
<br>
<var>x = 5</var>
<br>
<p>
<b>Note:</b> These tags are often used to display computer/programming code.
</p>
</body>
</html>

Here is a complete list:
code:
<code> Defines computer code text
<kbd> Defines keyboard text 
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

Citations, Quotations, and Definition Tags
Want to put in an address, definition, quote, or citation? These are the tags to do so!
Examples:
Address
code:
<html>
<body>
<address>
John Doe<br>
5555 Deer Lane<br>
Walla-Walla<br>
Wyoming
</address>
</body>
</html>

Abbreviations and Acronyms:
code:
<html>
<body>
<abbr title="Shadow Crest">SC</abbr>
<br>
<acronym title="Nine Inch Nails">NIN</acronym>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
<p>This only works for the acronym element in IE 5.</p>
<p>This works for both the abbr and acronym element in Netscape 6.2.</p>
</body>
</html>

Backwards Text:
code:
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some meaningless Sentence
</bdo>
</body>
</html>

Quotes:
code:
<html>
<body>
Here comes a long quotation:
<blockquote>
Look at how long this is.  I like Pie.  I like Einstein.  I like AOE.  I like rambling.  I like wasting space.   
</blockquote>
Here comes a short quotation:
<q>
Survival of the Fittest
</q>
<p>
With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
</p>
</body>
</html>

Here is the list:
code:
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

Entities
Some characters, like <, are used in HTML and cannot be used directly. Therefore, entities were developed.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (Wink.
For example, the entity for < is &lt; or <
The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.
WARNING- Entities are case-sensitive.
A full list can be found here: http://accensiondesign.com/viewtopic.php?t=24
Links- (2-3-4)
This will involve a tag known as , which is used as an anchor. Here is the basic code:
code:
<a href="url">Text to be displayed</a>

The href is used to address the topic you are linking to. The words between are the hyperlink.
For example:
code:
<a href="http://www.accensiondesign.com/">To Accension Design!!</a>

To use an image as a link:
code:
<html>
<body>
<p>
You can also use an image as a link:
<a href="index.php">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>

Target Attribute:
WIth the target attribute, you can tell the browser where the linked document will open.
code:
<a href="http://www.accensiondesign.com/"
target="_blank">Visit Accension Design!!</a>

In this case, it will open in a new window!
Anchor Tag and Named Attribute:
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
Here is the syntax:
code:
<a name="label">Text to be displayed</a>

And here is an example:
code:
<a name="Rammstein">Rammstein section</a>

To link directly to the Rammstein section, add a # and the name of the anchor to the end of the URL.
Example:
code:
<a href="http://www.accensiondesign.com/html_links234.html#Rammstein">
Jump to the Rammstein Section</a>

A hyperlink from WITHIN the file "html_links234.html" looks like this:
code:
<a href="#Rammstein">Jump to the Rammstein Section</a>

Mailto:
Simple (must have mail installed):
code:
<html>
<body>
<p>
This is a mail link:
<a href="mailto:huntar30@gmail.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>

More complex:
code:
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?cc=huntar30@gmail.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>

Final Notes on Links:
Always add a trailing slash to subfolder references. If you link like this: href="http://www.accensiondesign.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.accensiondesign.com/html/"
Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs.
Well, that's all for this time! Play around a bit.
Next lesson: Tables, Frames, and Lists!
Pt. 4-
*Hopes you read the first three*
Today's lesson will focus on:
- Frames
- Tables
- Lists
In the last lesson, we learned how to format text, how to add special characters such as <, >, and @, and how to insert links. Today, we are going to learn how to format an entire page with frames, tables, and lists.
We are getting closer to the point where you can show me a web page of your own!
(Note: I'll try something different because there are people that think I am making this too hard. I will put what is necessary first, and optional (but still recommended!) next.)
Frames:
Suppose you want to put two or more HTML documents into one browser window. Frames allow you to do this. Each HTML document is called a frame, and each frame is independent of each other.
There are, sadly, disadvantages:
- You will have to keep track of more web documents
- It is difficult to print the entire page
Frameset tag:
The frameset tag, <frameset>, defines how to divide the window into frames. It can define a set of rows OR columns. The values of the rows/columns will indicate the amount of screen area that each will occupy.
(An example will come after the frame tag)
Frame tag:
The frame tag, <frame>, defines what HTML document will go into the frame.
Here is an example:
code:
<frameset cols="25%,75%">
<frame src="lefthand.htm">
<frame src="righthand.htm">
</frameset>

This is a frameset with two columns. Lefthand is in the left column, and it takes up 25% of the screen. Righthand takes up 75% of the screen, and is in the right column.
Notes-
A user can drag the frames if the borders are visible. To prevent this, you can add noresize="noresize" to the <frame> tag.
Also, older browsers may not use frames. To get around this, add the <noframes> tag.
Examples:
Mixed Frameset: (Mixed rows and columns)
code:

<html>
<frameset rows="50%,50%">
<frame src="frame_1.htm">
<frameset cols="25%,75%">
<frame src="frame_2.htm">
<frame src="frame_3.htm">
</frameset>
</frameset>
</html>

No resize:
code:
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>

Navigation Frames: (The file called "tryhtml_contents.htm" contains three links. The source code of the links:
Frame a<br>
Frame b<br>
Frame c)
code:
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="frame_1.htm"
name="showframe">
</frameset>
</html>

iFrame: (inline frame- a frame inside an HTML page)
NOTE- Older browsers may not support iframes. If they don't the iFrame won't appear.
code:
<html>
<body>
<iframe src="index.html"></iframe>
</body>
</html>)

Tables:
I believe you know how tables work: you want something organized neatly.
There are three tags you must know:
Defines a table
Defines a table row
is a table row, and each ends the row.
If you want a heading, add the <th>.
Add this to the code above after the
Defines a table cell
Now, here is how you use them:
code:
<html>
<body>
<table border="1">
<tr>
<td> Upper Left </td>
<td> Upper Right </td>
</tr>
<tr>
<td> Bottom Left </td>
<td> Bottom Right </td>
</tr>
</table>

Dissected-
The table defines the table, and border. If you have no border=, there will be no border. This may be desired sometimes, but usually, you want one.
Each
is a cell. Closing the
:
code:
<th> Positions </th>
<th> Another One </th>

Now look at it. See any differences?
To create an empty cell, create a
code:
<ul>
<li>Gallon of Milk</li>
<li>Two boxes of Cereal</li>
</ul>

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists:
This is also a list of items, but instead of an unordered list, is marked with numbers.
Ordered lists start with the <ol> tag. Each item also starts with a <li> tag.
code:
<ol>
<li> Go to the bush </li>
<li> Dig with a shovel </li>
<li> Pull out roots </li>
</ol>

Definition List:
This is not, repeat, NOT a list of items. It is a list of terms and the explanation of the term.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
code:
<dl>
<dt>Mud</dt>
<dd> A wet form of dirt </ddl>
<dt Mud pie </dt>
<dd> A pie made out of mud </dd>
</dl>

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.
More Examples of Lists:
Types of Ordered Lists:
code:
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> 
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> 
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> 
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> 
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol> 
</body>
</html>

Types of unordered lists:
code:
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul> 
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul> 
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul> 
</body>
</html>

Easy Nested List:
code:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

Complicated Nested List:
code:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

I hope that this is much easier to understand.
Next time, we will finally see your excellent pictures!
Pt. 5-
Yo mama so dumb she sent you here without reading the first four parts!
^ This isn't you, right? If it is, go away. If it's not, we will be learning about:
- Posting Images
- Creating Backgrounds (No more all-white backgrounds!)
Images:
Now, by now, you are probably sick of seeing only text in your examples, right? Now, we are going to spruce up your webpage with some images.
Images are defined by the <img> tag. It is an empty tag, meaning that it contains attributes only, and has no closing tag.
But if you have <img> only, you won't see the image! You need to add a src, which stands for source. The value is the image that you want to display.
For example:
code:
<img src="url">

This is the basic code for inserting images. The URL points to the location where the image is stored. An image named "banner.gif" located in the directory "images" on "www.accensiondesign.com" has the URL: http://www.accensiondesign.com/images/banner.gif.
The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
Alt Attribute:
This defines an alternate text for the image. You define it.
code:
<img src="banner.gif" alt="Accension Design!">

There are text-only browsers, and by posting the alt, you are telling them what they are missing. It is good practice to use it!
WARNING: If an HTML file includes ten images, it needs to load eleven files, and images take a long time to load. Be careful how you use them.
Also, DO NOT USE AN IMAGE SAVED AS A .bmp!!! These pictures take a LONG time to load, and may cause many potential visitors to leave. The average visitor will wait only seven seconds for the page to load before leaving.
More Examples:
(Feel Free to copy-paste these and see what they look like Wink)
NOTE!- Save a simple image first as "test.gif"
Aligning Images:
code:
<html>
<body>
<p>Note that bottom alignment is the default alignment</p>
<p>
An image
<img src ="test.gif"
width="48" height="48">
in the text
</p>
<p>
<img src ="test.gif"
width="48" height="48">
An image before the text
</p>
<p>
An image after the text
<img src ="test.gif"
width="48" height="48">
</p>
</body>
</html>

Floating Images:
code:
<html>
<body>
<p>
<img src ="hackanm.gif"
align ="left" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
</p>
<p>
<img src ="hackanm.gif"
align ="right" width="48" height="48">
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
</p>
</body>
</html>

Adjusting Images to different sizes:
code:
<html>
<body>
<p>
<img src="test.gif"
width="20" height="20">
</p>
<p>
<img src="test.gif"
width="45" height="45">
</p>
<p>
<img src="test.gif"
width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the
img tag.
</p>
</body>
</html>

HTML Backgrounds
NOTE!- All of this is deprecated in HTML 4.0 and XHTML.
Anyways, you are probably sick of pure white backgrounds by now, correct? Now, you can get your background any color you want!
All background color codes go directly into the <body> tag.
code:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Choose one. The first is hexadecimal (I'll get to this next lesson). The second is red, green, blue. The third is a color. All three are the same in that they will create black.
Now, try these codes:
code:
<html>
<body bgcolor="#d0d0d0">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.
</p>
</body>
</html>

code:

<html>
<body bgcolor="#ffffff" text="yellow">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.
</p>
</body>
</html>

Which would you prefer? Most likely, the first. Make sure, when you create backgrounds, that we can read the text without having to highlight it!
Background Images.
Virtually the same code as bfore, but instead of bgcolor=, use background=.
code:
<body background="banner.gif">
<body background="http://www.accensiondesign.com/banner.gif">

Also, if the image is less than the size of the page, it will repeat itself to fill the page.
NOTE- If you are using a background image, keep in mind-
* Will the background image increase the loading time too much?
* Will the background image look good with other images on the page?
* Will the background image look good with the text colors on the page?
* Will the background image look good when it is repeated on the page?
* Will the background image take away the focus from the text?
Good Background Images:
code:
<html>
<body background="background.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>

code:
<html>
<body background="paper.gif">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>

Bad Background Image:
code:
<html>
<body background="rock.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>

And that is all with images!
Next time, colors galore!
We are almost there!
Pt. 6-
Read the first five lessons you did. Read not, and set in motions bad things you did.
In this lesson, we will learn about:
-Colors
-Forms
Colors:
This will probably be the shortest section I write.
Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).
Plug these into a background code:
code:
  #000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

Altogether, there are 16,777,216 possible colors. Some browsers can't handle that much color. To cover this, there are 216 computer safe colors, which can be found here.
Your best bet for figuring out the best color- experiment! Seriously! Just make sure I can read the text, and that the colors aren't too far off....
Forms-
Most of this will be code, excepting the explanations.
These are areas that can contain form elements. Form elements are elements that allow the user to enter information in a form. A form is defined with the <form> tag.
The most used form tag is the <input> tag. The type of input is specified with the type attribute.
Here are the most common types:
Text Area-
If you want the user to type letters, numbers, etc. in a form, this is what to use!
code:
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

Note- The form itself is not visible, and most browsers have a 20 character width by default.
Radio Buttons:
These are used when you want the user to select one of a limited number of choices.
code:
<form>
<input type="radio" name="answer" value="yes"> Yes
<br>
<input type="radio" name="answer" value="no"> No
</form>

Only one option can be chosen.
Checkboxes:
If you want your user to click on one or more options from a set of choices, use this!
code:
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

Drop-down box:
Want a drop-down box for a user to choose from?
code:
<html>
<body>
<form>
<select name="pie">
<option value="apple">Apple
<option value="blueberry">Blueberry
<option value="pumpkin">Pumpkin
<option value="chocolate">Chocolate
</select>
</form>
</body>
</html>

Creating a button:
code:
<html>
<body>
<form>
<input type="button" value="Look!">
</form>
</body>
</html>

Frameset:
This is a border around the data with a caption:
No border, and your browser is too old.
code:
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
</body>
</html>

Submit Button:
When someone clicks on submit, it sends the content of the form to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
Try This:
code:
<form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

<input type="submit" value="Submit"> is the main thing to know, and it can be added to the other types above.
E-mail form:
code:
<html>
<body>
<form action="MAILTO:huntar30@gmail.com" method="post" enctype="text/plain">
<h3>This form sends an e-mail to Me.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

Finally over after all the code.
Next time, we will learn about creating a webpage!
Pt. 7-
Hey, you read the other six, right?
If no, look Rob, someone that will be utterly confused! Boot him!
If yes, come on in!
Anyways, here, I will just give some tips on how to build a web page, such as web hosts, design, and tips.
First off, by now, if you have read the other six tutorials, you should know enough by now to make a decent webpage. And you should congratulate yourself! Great job! To confirm this, I am giving you a 50 question test! Fail, and you are perma'd!
-jk
Nah, we just want you to get a webpage. But first, that file -> open, the only people that are going to see that are you and anyone else that looks at it! We need to get a place for you to host your site!
There are many places that offer many things, and many services in a "language" that you may not understand. For your first webpage, I recommend either freewebs or geocities. It is seriously all you need! Later, when you get better, you can learn about what the sites want.
Next is actually creating the site. First, draw a sketch of what you want your site to look like. Then, either in notepad or, if your host offers it, an HTML editor, create your page. Some places have an editor called What You See Is What You Get (WYSIWYG). Try to avoid using these!
HUGE things to remember-
-People are scanners, not readers. Either get their attention on the first sentence, or you may lose them.
-Less is more. Shorter is better. Keep things as short as possible. Break your information up.
-Navigation. Try to create a navigation structure that is common for all the pages in your Web. Keep the use of hyperlinks inside your text paragraphs to a minimum. Don't use hyperlinks inside text paragraphs to send your visitors to every random page of your Web. That will destroy the feeling of a consistent navigation structure. If you must use hyperlinks, add them to the bottom of a paragraph or to the navigation menus of your site.
-Try to keep download speed to a minimum. An average user will wait only 7 seconds before leaving. And test it over 56k speeds too.
-Feedback is good. Remember that. It can save your site.
Here are ten do's.
[list=]Keep graphics files small.
Keep text files small.
Design for easy reading.
Design for 256 colors (8-bit) and 640x480 resolution.
Use "ALT" tags on graphics.
Include contact information on every page!
Keep your site fresh.
Be generous.
Be backward compatible.
Test your site as visitors will see it.[/list]
Here are some things not to do:
    Excessively large graphics.
    Excessively tiny graphics.
    Too many animations.
    The Blink Tag.
    Requiring the use of plugins.
    Under Construction Signs.
    Bad Color Choice.
    Grammatical and Spelling Errors.
    Text that is too small.
    Text that is too large.
    Having a horizontal scrollbar in 640 x 480.
    Sounds that play automatically.
    Broken images.
    Broken links.
    Too much blank space between sections.
    Too little blank space between sections.
    Using abbreviations in sentences such as u for you.
    Frames that cut off part of a page horizontally.
    The whole page is written in capital letters.
    No paragraph breaks on long pages.
    Too many advertising banners.
    Slow server or too lengthy page.

Also, beware of copyright laws, unless you have the cash to pay for it.
Also remember that many people in many browsers on different systems may see your site. Remember to test your site in at least two major browsers.
Final Notes:
We are on the home stretch. The finish line is in sight!
I understand that some parts of my tutorials may have been hard, confusing, or you got lost. If that is so, tell me, and I will help you and update the tutorial!
Also, I plan to release other tutorials, but you all can tell me what you want first. Just make sure that:
- It is HTML related
- It has not been in one or my tutorials
- It has not already been posted
and I will be glad to write one!
Remember that HTML is always growing. You know much, but you do not know it all, and no one will probably know it all.
Soon, I will begin the beginner's guide to CSS. This will help you all out later.
To anyone that read this, thanks for reading, and I hope to see your website someday! To ROB, thanks for getting this some attention!
Good luck with the web design.
- Shadow Crest
XHTML for Dunces-
Before you read this, you should know HTML.
I know, there are those of you who want to make clean code websites that are similar to XML, because HTML can get messy. Enter XHTML, with the goal of eventually replacing HTML.
XHTML is very similar to HTML 4.01, but must be well-formed. I will discuss this after the why is answered. Why would XHTML be necessary?
Why?
Consider this code:
code:
<html>
<head>
<title My Webpage! </title>
<body>
<h1>My Webpage!
</body>
</html>

For many purposes, this would be fine, but some items, such as mobile phones, can not read "bad" HTML because they do not have the resources nor the power. They use some XML, which requires a well-formed document in which everything must be marked up correctly.
By combining XML and HTML, we get, XHTML! This allows the pages to be read by XML enabled devices and by browsers that are awaiting the switch to XML support.
"Well-Formed"
Most XHTML is similar to HTML 4.01.
The most notable differences are:
    XHTML elements must be properly nested
    XHTML documents must be well-formed
    ALL tag names must be in lowercase
    ALL XHTML elements must be closed

Examples (corrections are bolded):
Nesting:
WRONG!!!
code:
<b><i>w00t!<b><i>

Right!
code:
<b><i>w00t![b]<i><b>[/b]

Special note- Lists-
WRONG!!!
code:
<ul>
<li>Computer</li>
<li>Modem
<ul>
<li>Broadband</li>
<li>56k</li>
</ul>
<li>Speakers</li>
</ul>

Right!
code:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
[b]</li>[/b]
<li>Milk</li>
</ul>

Well-formed:
ALL elements must be nested within the <html>. Other elements may have children elements, but they must be in pairs and nested correctly within the parent element.
Example-
code:
<html>
<head>...</head>
<body>...</body>
</html>

Lower Case
WRONG!!!
code:
<BODY>
<P>Sand can be a very good item for one that is in need of a ... </P>
</BODY>

Right!
code:
[b]<body>[/b]
[b]<p>[/b]Sand can be a very good item for one that is in need of a ... [b]</p>[/b]
[b]</body>[/b]

ALL Elements (including empty elements) must be closed.
WRONG!!!
code:
<p> This is the best item ever!
<p> Anyone have some change?
To the Bat Cave! <br>
A rule! <hr>

Right!
code:
<p> This is the best item ever! [b]</p>[/b]
<p> Anyone have some change? [b]</p>[/b]
To the Bat Cave! [b]<br />[/b]
A rule! [b]<hr />[/b]

Note how <br>, though it does not need an end tag, the tag needs a /. The space is added for compatibility, and you should strive to add the space as well.
More Rules!
Attribute names must be in lowercase.
WRONG!!!
code:
<table WIDTH="100%">

Right!
code:
<table [b]width[/b]="100%">

Attribute values must be quoted
WRONG!!!
code:
<table width=100%>

Right!
code:
<table width=[b]"[/b]100%[b]"[/b]>

Attribute Minimilization = illegal
WRONG!!!
code:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

Right!
code:
<input checked[b]="checked" />[/b]
<input readonly[b]="readonly" />[/b]
<input disabled[b]="disabled" />[/b]
<option selected[b]="selected" />[/b]
<frame noresize[b]="noresize" />[/b]

"id" replaces "name"
WRONG!!!
code:
<img src="picture.gif" name="picture1" />

Right!
code:
<img src="picture.gif" [b]id[/b]="picture1" />

But wait! What if an older browser would show the above code exactly as shown? For now, you can use both the id and name element together, like this:
code:
<img src="picture.gif" id="picture1" name="picture1" />

Remember, id only or name and id are fine, name only is a nono.
Lang Attribute
This specifies the language of the document.
code:
<div lang="no" xml:lang="no">Heia Norge!</div>

If you use lang, you must use xml:lang.
Mandatory
ALL XHTML documents will have a !DOCTYPE declaration. (We'll get into this next.)
code:

<!DOCTYPE Doctype goes here>
<html xmlns="http://www.myweb.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
Body text goes here
</body>
</html>

DOCTYPE is not actually part of the XHTML document, so it does not need a closing tag.
xmlns is required.
DTD
code:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

This is an example of a basic XHTML document.
The three main parts:
-DOCTYPE
-Head
-Body
An example:
code:
[b]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/b]
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

The bolded is the DOCTYPE, the rest is HTML.
The Three Types
These:

    Specify the syntax of the webpage
    Specify the rules applying to the markup of certain documents, including a set of element and entity declarations.
    An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.

There are three types at the moment:
-Strict
-Transitional
-Frameset
Transitional is the most common.
Strict:
code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use for really clean markup, free of professional clutter. Use with CSS.
Transitional:
code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use when you need to take advantage of HTML's presentational features, and for browsers that don't understand CSS.
Frameset:
code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use if you want frames to partition the browser into two or more frames.
How to update your webpage
Alright, you read this, and you decide that XHTML sounds like a really good idea.
First, make sure that your site is "well-formed." Yes, that means correcting every incorrect tag. EVERY one of them1 Then, add the doctype to the top of each page.
One little warning- Newer browsers (like Internet Explorer 6) might treat your document differently depending on the <!DOCTYPE> declaration. If the browser reads a document with a DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and display differently than without a DOCTYPE.
Notes on the DTD
-The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets
-The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes
-The Frameset DTD includes everything in the transitional DTD plus frames as well
Modules
XHTML is simple, but large. FOr some purposes, it can be too large, or too simple.
Fortunately, The W3C (World Wide Web Consortium) created 28 modules. These can be used for simple purposes, or for larger purposes, such as for XML standards.
With modular XHTML, product and application designers can:
-Choose the elements to be supported by a device using standard XHTML building blocks.
-Add extensions to XHTML, using XML, without breaking the XHTML standard.
-Simplify XHTML for devices like hand held computers, mobile phones, TV, and home appliances.
-Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia).
-Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices).
The Modules are:
code:
Base Module Defines the base element.
Basic Forms Module Defines the basic forms elements.
Basic Tables Module Defines the basic table elements.
Bi-directional Text Module Defines the bdo element.
Client Image Map Module Defines browser side image map elements.
Edit Module Defines the editing elements del and ins.
Forms Module Defines all elements used in forms.
Frames Module Defines the frameset elements.
Hypertext Module Defines the a element.
Iframe Module Defines the iframe element.
Image Module Defines the img element.
Intrinsic Events Module Defines event attributes like onblur and onchange.
Legacy Module Defines deprecated* elements and attributes.
Link Module Defines the link element.
List Module Defines the list elements ol, li, ul, dd, dt, and dl.
Metainformation Module Defines the meta element.
Name Identification Module Defines the deprecated* name attribute.
Object Module Defines the object and param elements.
Presentation Module Defines presentation elements like b and i.
Scripting Module Defines the script and noscript elements.
Server Image Map Module Defines server side image map elements.
Structure Module Defines the elements html, head, title and body.
Style Attribute Module Defines the style attribute.
Style Sheet Module Defines the style element.
Tables Module Defines the elements used in tables.
Target Module Defines the target attribute.
Text Module Defines text container elements like p and h1.

I did not include the applet because you should not use deprecated elements.
Attributes
XHTML tags can use attributes, which may be found here.
Events
New to HTML 4.0- HTML could trigger events to happen in the browser, such as starting a Javascript. More events can be found here.
To Finish
This hopefully has taught you all that is necessary about XHTML, the DOCTYPE, and the "well-formed" document. Now help support this and use it in your webpage!
Hope you learn a lot!
-Shadow Crest[/QUOTE]



IMPORTANT

This is NOT MY TUTORIAL! I was given permission to post this tutorial on other sites, but must put who made it.

Created by: Shadow Crest

For more tutorials like this and more, join

http://www.dominickgatto.com/
Sponsor
Sponsor
Sponsor
sponsor
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Tell A FriendPrintable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 1 Posts ]
Jump to:   


Style:  
Search: