Staten Island Techincal Highschool

Using Html For The Www, tutorial and such

Track this topic | Email this topic | Print this topic

Xeogears13

Posted: Jan 13 2005, 08:00 PM

Administrator

Group: Admin
Posts: 10
Member No.: 1
Joined: 11-January 05

Using HTML for the WWW

Anything in green is user changable.
Since certain people can't control themselves in public, I couldn't get through all the tagging I wanted to... and I don't want to have to do it next week so it's up here if you ever want to see it, or learn HTML. The HTML is not really necessary to memorize because FrontPage will take care of most tags since all you have to do is drag and drop images, text and such.

HTML stand for Hyper Text Markup Language. HTML code is written with all different tags. Tags are placed in between '<', '>' (angle brackets), and are closed with </tag>. When you open a tag with a '<' you write down the tag's name. There are a few hundred HTML tags you can use (font, table, img, a, b, i, u, s). After the tag you enter a 'parameter' (I know I called it a variable in the club, but I was wrong, sorry =P). The parameter further defines the tag (ex. color further defines font by changing it's color). Parameters then have variables (forget the stuff I said on thursday xD). The variable tells the parameter is conditions and the parameter then send them to the tag.
It gets easier with examples:

CODE

text

result: text

CODE

text

result: text

Parameters and their variables that share the same tag can be stacked. This makes it easier to look at, and much cleaner since you only opened one font tag you only need to close 1. Take a look:

CODE

text text text

result: text text text

Now that we can see the HTML syntax, the rest it just learning new tags and how to use them.

>> Coding Tips
1. Always try to code in lowercase. W3C has been stressing thise and saying that they plan to move to all lowercase coding. I doubt the browsers will allow the change, but try to create good habbits.
2. Use spaces and things carefully to show formatting and make things easier to read. Try writing:

CODE

TEXT

not:

CODE

TEXT

See how much easier it is to read. *ahem, Bobby.

>> Starting an HTML document
Open up notepad and save it as index.html
index.html is the file name that a server looks for when it accesses a folder. So instead of typing http://www.geocities.com/xeogears13/index.html all I have to type is http://www.geocities.com/xeogears13/ , thats how domain names work ;)
All HTML documents start out with the <html>. It's pretty self explanatory, all it does it say "Hey broswer, read this as HTML." You then type the <head> tag. The <head> tag hold all preloaded data like the title, java formatting and such. (<title>Robert Moakler online</title>). After all preloaded data is put into the <head> tag, close it with </head>. Then we move onto the <body> tag. This tag allows us to put in all the data we want our user to see on the main part of the page. You would put pictures, fonts and links in here. You close it with a </body>. Then type </html> to show the end of yourpage coding.

CODE

<html>
<head><title>ROFFLECOPTERS are attacking the emo ones!</title></head>
<body>
Today 12,000 emo people where sliced by teh blades of a

ROFFLECOPTER 
"AAAAAAAAAAAAAaa" is what all the emos said as the ROFFLECOPTERS fell from the sky with there burning blades of doom. It sliced many people and um.... ZZZZZZzzzzzzzzzzzzzzz
</body>
</html>

result: http://home.ripway.com/2005-1/237932/site01.html

>> Usefull Tags
Here is a list of some tags you may want to use. You can use this to look back upon, or whatever, I don't really care...

CODE

Text to be formatted
^Formats text face, color and size.

<a href="http://www.google.com">Link text to be shown here</a>
^Creates a link to google.com

<img src="http://www.imagehost.com/image1.jpg">
^Creates an image (image1.jpg on imagehost.com. Note, that .bmp files will not show, and ome .png files will not appear the way you see them in IE. Also, always look for a host that allowed remote linking of image (ripway.com) and NEVER take an image from someone elses webspace, always upload it to your server.

<strike>Bold, Italic, Underlined, and Striked-Out text here</strike>
^Created bold, italic, underlined, and striked-out text.

 
^Adds an enter/return

You paragraph here
^I never did like the paragraph function of HTML, it has weird spacing and such, I preffer .

<body bgcolor="color" text="color" link="color" alink="color" vlink="color">
^Sets the defualt background, font, normal link, active link, and visited long color.

<right>Aligned right text</right> <left>Aligned left text</left> <center>Aligned center text</center>
^Just shows how to align text.

-More to come.

« Next Oldest | Help | Next Newest »

DealsFor.me - The best sales, coupons, and discounts for you