Staredit Network

Staredit Network -> Art & Images -> Learn Website Programming
Report, edit, etc...Posted by Puni(F) on 2005-04-15 at 14:23:24
Well, I just thought I would give a simple HTML tutorial, Since this week is going very slow with New's Post's... So yeah, Here it goes:

If you are running Windows, start Notepad.

If you are on a Mac start SimpleText.

In OSX start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this HTML codes probably won't work.



First, Once you open the wordpad, Or whatever you are using, You want to type/copy the following.

CODE
<html>
<head>
<title>My first Site</title>
</head>
<body>
This is where you type things...<b>This is bold..WOW</b>
</body>
</html>


Once you type all of that, You will wan't to save the document as (HTMLTraining.html) If you don't, The file will not save as a HTML document.
  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The text between the start and end tags is the element content
  • HTML tags are not case sensitive, <b> means the same as <B>
This is an HTML Element...

CODE
<b>Bold</b>

The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
CODE
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>


HTML automatically adds an extra blank line before and after a heading.

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.
Paragraphs

Paragraphs are defined with the <p> tag.

CODE
<p>This is a paragraph</p>
<p>This is another paragraph</p>


HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
CODE
<p>This <br> is a para<br>graph with line breaks</p>


The <br> tag is an empty tag. It has no closing tag.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
CODE
<!-- This is a comment -->


Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:
CODE
<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to Staredit:
CODE
<a href="http://www.staredit.net">Visit Staredit!!</a>
The line above will look like this in a browser:

[URL=http://www.staredit.net]Visit Staredit!![/URL]

[SIZE=7]The Target Attribute[/size]
With the target attribute, you can define  where the linked document will be opened.

The line below will open the document in a new browser window:
[code]<a href="http://www.staredit.net/"
target="_blank">Visit Saredit!!</a>


The Frame Tag
* The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
CODE
<frameset cols="25%,75%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>


Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
CODE
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>


Headings in a table
Headings in a table are defined with the <th> tag.
CODE
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>


Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
CODE
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>


Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
CODE
<ol>
<li>Isolated</li>
<li>Yoshi</li>
</ol>


Size
A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.
CODE
<form>
 <input>
 <input>
</form>


Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
CODE
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>


The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:
CODE
<img src="url">

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "http://scmapz.t-rh.com" has the URL: http://scmapz.t-rh.com/images/blop.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.

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

Bgcolor
The bgcolor attribute sets the background to a color. The value of this attribute can be a hexadecimal number, an RGB value, or a color name.
CODE
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background color to black.

[size=7]The HTML <font> Tag/size]
With HTML code like this, you can specify both the size and the type of the browser output :
CODE
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>

<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>


Edit: Added Image tags
Report, edit, etc...Posted by n2o-SiMpSoNs on 2005-04-15 at 20:02:38
WOAH nice job clapping.gif cool.gif i always was interested in this sort of thing but never knew how happy.gif nice work

How long did that take you to type out? how do you like use this HTML stuff and make it into a site?
Report, edit, etc...Posted by Oo.Mario.oO on 2005-04-15 at 20:05:16
Finaly i have been looking for a tortule to make a site thanks bro

and man that must of took forever to type that thing out blink.gif
Report, edit, etc...Posted by Puni(F) on 2005-04-15 at 22:02:12
To simpsons: Thank's, Took me a while, But it was worth it smile.gif

To mario: No problem... And yes it took 45 minutes to type out.


Once you make a website, You may want to use a free host, Before you upgrade, So you are elite at website programming...

Here are some links to "2" free sites.

http://www.t-rh.com <-- You have to post to get more and more space
http://www.t35.com <-- Just a little space.. Cant even hold 1 map.

ADDITION:
Uber Bump... showoff.gif
Report, edit, etc...Posted by RexyRex on 2005-04-15 at 22:08:52
Must have took forever.
Where is your site? mellow.gif
Report, edit, etc...Posted by n2o-SiMpSoNs on 2005-04-15 at 22:44:31
QUOTE(Puni @ Apr 15 2005, 09:02 PM)
http://www.t35.com <-- Just a little space.. Cant even hold 1 map.
[right][snapback]188673[/snapback][/right]


i tried using your tut to try crap on that site and it didnt work to well http://n2o-simpsons.t35.com/
Report, edit, etc...Posted by RexyRex on 2005-04-15 at 22:51:38
Ack.
Stupid heads!
http://www.hostmatrix.org
Report, edit, etc...Posted by LegacyWeapon on 2005-04-16 at 00:47:06
QUOTE(n2o-Simpsons @ Apr 15 2005, 10:44 PM)
i tried using your tut to try crap on that site and it didnt work to well http://n2o-simpsons.t35.com/
[right][snapback]188824[/snapback][/right]
Make sure you make the extension of the file .htm or .html
Report, edit, etc...Posted by Puni(F) on 2005-04-16 at 01:07:09
Yes, As stated at the top of the tutorial.
Report, edit, etc...Posted by BeeR_KeG on 2005-04-16 at 11:51:32
I'd have to say that http://www.hostmatrix.org isn't the best hsot if you plan on your site to grow. 20Mb as a starter package sin't a lot. My site is around 3MB~4MB and you can see that it's pretty empty. You may have PHP, MySQL and all those neat stuff, but you probably won't be able to use them to their full extent because of low space and bandwith.

QUOTE
HM Basic: 10 HM Reputation Points
Webspace: 20 Mb
Data-transfer: 200 Mb
1 Email Accounts
1 Ftp accounts
1 Sub domains
1 MySql/Postgresql Databases

HM Package 1: 50 HM Reputation Points
Webspace: 50 Mb
Data-transfer: 500 Mb
10 Email Accounts
10 Ftp accounts
10 Sub domains
10 MySql/Postgresql Databases

HM Package 2: 100 HM Reputation Points
Webspace: 100 Mb
Data-transfer: 1000 Mb
20 Email Accounts
20 Ftp accounts
20 Sub domains
20 MySql/Postgresql Databases

HM Package 3: 150 HM Reputation Points
Webspace: 150 Mb
Data-transfer: 1500 Mb
50 Email Accounts
50 Ftp accounts
50 Sub domains
50 MySql/Postgresql Databases

HM Package 4: 200 HM Reputation Points
Webspace: 200 Mb
Data-transfer: 2000 Mb
Unlimited Email Accounts
Unlimited Ftp accounts
Unlimited Sub domains
Unlimited MySql/Postgresql Databases


http://www.t35.com is good if you want a starter site and won't be uploading big files. They have a 250KB file size limit for free packages and they will soon be upgrading to 500Kb, but still I plan on having more downlaods and bigger files are on the way. If you don't plan on having big files these are the people to go with. They have excellent support service and hosting service.

If you have the time and patience to post in a forum in exchange for hosting this is the way to go. http://www.t-rh.com . You got PHP and MySQL and all that neat stuff that most of us(like me) don't know how to use since we only know HTML and CSS, but we plan on learning. You start with 500MB space and 10Gb of bandwith per month which is way more than what the biggest free package of hostmatrix has to offer. If you plan on going big for free this is the way to go.

QUOTE
TRH Novice

500 MB Disk Space
10 GB Bandwidth/month
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

50 posts to activate


TRH Basic

750 MB Disk Space
15 GB Bandwidth/month
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

+50 posts upgrade (100 Posts Total)


TRH Standard

1 GB Disk Space
20 GB Bandwidth/month
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

+50 posts upgrade] (150 Posts Total)


TRH Extra

5 GB Disk Space
25 GB Bandwidth/month
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

+75 posts upgrade (225 Posts Total)


TRH Professional

10 GB Disk Space
30 GB Bandwidth/month
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

+75 posts upgrade (300 Posts Total)


TRH Ultimate

15 GB Disk Space
Unmetered Bandwidth
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

+75 posts upgrade (375 Posts Total)


TRH Extreme

Unlimited GB Disk Space
Unmetered Bandwidth
Unlimited MySQL DBs
Unlimited Postgre DBs
Unlimited Email Accounts
Unlimited FTP Accounts
Unlimited Subdomains/Parked/Add-ons
cPanel X 10 and Fantastico Deluxe

+200 posts upgrade (575 Posts Total)
Report, edit, etc...Posted by Puni(F) on 2005-04-16 at 12:07:06
Yea, I already have the T-RH Novice hosting package, It's better than t35 hosting... And you can get unlimited for just posting in there forum.
Report, edit, etc...Posted by SkiLLz on 2005-04-16 at 15:27:32
biggrin.gif Your pretty friendly, not many people spend that much time typing stuff like that!
Report, edit, etc...Posted by Puni(F) on 2005-04-16 at 15:53:08
Yea, It did some while to type, But it was worth it smile.gif.. As long as there are more website programmers out there.
Report, edit, etc...Posted by ShadowBrood on 2005-04-16 at 20:01:31

Web Glossary
Web Hosting
Web Quality

Basic HTML Tags
Previous Next


Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.

(You can find more examples at the bottom of this page)

These selections hint that this was copied from a website and code boxes were added.
Next Page (1)