[Tutorial] General tutorial from www.dominickgatto.com

Photoshop_User · **Posted:** Wed May 17, 2006 9:30 pm

[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. This text is bold
</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 tag.

code:

Hi Mom! 
 I'm writing a tutorial today!

Now, let's say that you want to put breaks in that paragraph to save a lot of space from and marks. Add a !

code:

Hey! Look at this gigan tic toy!

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>
 Hello, my name is Roger! 

I rock!
</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 to create line breaks!!! Use ! (Unless you want to make a list. If you do, bear with me, we will get to that later.)
You can use solely 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>
Bold I am
 

Time to break some concrete

 
<big>
I'm Huge!
</big>
 

LOOK!!!

 

The Downward Spiral

 

I'm Tiny!

 
CO

2

 
2

2

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

Defines bold text
<big> Defines big text
 Defines emphasized text
 Defines italic text
 Defines small text
 Defines strong text
 Defines subscripted text
 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>
 
<kbd>The keyboard</kbd>
 
<tt>Hot off the typewriter</tt>
 
<samp>A sample</samp>
 
<var>x = 5</var>
 

Note: These tags are often used to display computer/programming code.

</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 
5555 Deer Lane 
Walla-Walla 
Wyoming
</address>
</body>
</html>

Abbreviations and Acronyms:

code:

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

Backwards Text:

code:

<html>
<body>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

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

With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.

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

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

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