PDA

View Full Version : [Tutorial] Intro to HTML


xilica
05-21-2002, 06:09 PM
Hey everyone,


In this tutorial you need to have the following:

note: I used Microsoft Internet Explorer 6



1. A text editor such as NotePad (note: Microsoft Word or WordPad will not work).
2. A browser such as Internet Explorer or Netscape.



HTML stands for "Hyper Text Mark-up Language



HTML is made up of mark-up "tags"


In this tutorial you wil learn the following mark-up "tags":





<html>
<head>
<title>
<body>
<u>









While you are working with this tutorial you can type of
these examples and play around with them in NotePad.
This is where you will be editing the source for your webpage.


<html> This tag states that the wether or not the webpage is in HTML. You have to have to this tag for
every webpage.

<head> This tag displays information that doesn't
show on the webpage.

<title> This tag displays the title on your web browser.
If you look at the top bar at this website it
says "CoderForums". If you were making a webpage
on cars, for example, you would probably put "Car Webpage"
on the title.

<body> This tag tells you where to put
everything you want in the webpage. This is
where you type text for the webpage or would insert s
omething else.

<u> This tag represents a word or words that you want
to underline.

[i] This tag represents a word or words you want
to italicize.

[b] This tag represents a word or words you want
to bold.


This tag moves a word or words down to the next line. For example, lets say you want to type three things, each
one on a seperate line. You will use this to break of each
of them which makes them fit on there own line.



This tag makes a bunch of text you have typed a paragraph.


Now that you understand the commands I will write a sample webpage on the commands you just learned to help clear
up any confusions.


<html>
<head>
<title> CoderForums </title>
</head>
<body>


<u>CoderForums</u> is the place to be.
They have [b]MANY subforums on most of the [i]popular programming languages of today.
CoderForums is cool for a bunch of reason, but here are a few:

Friendly staff
Quality help
Friendly members
</p>
</body>
</html>


That is only a sample on what you can do with what you have just learned. As you see there are opposite tags that have
a </> in it. These are just to let HTML know that you are done performing what you want with these tags. You have to
have them. Also note that the "tag"
does not have a
close on it;
is an example of one of the few "tags" that
does not need a closing tag.

I hope this clears up any questions on how HTML works and its structure.

By the way, if you want to try these tags out yourself and you don't have a webpage to view them on, then no problem.
All you have to do is write your HTML code in NotePad and save it. Then open up your browser and go to File-->Open and open
the saved HTML document. Usually in Microsoft Windows the extension is (*.htm) or (*.html).

Please feel free to post any constructive critism or any errors you have received while working with these "tags" in HTML.

DukeofNukes
05-21-2002, 07:31 PM
Originally posted by xilica
1. A text editor such as NotePad (note: Microsoft Word or WordPad will not work).


It's quite possible and realtively simple to use Word as a surprisingly powerful code editor by writing your own template and macros for it; before switching to Jext (which rocks, by the way), I used one Word template for HTML and another for Java. Just remember to force it to save with the proper extension, that's all.

xilica
05-21-2002, 07:33 PM
You are correct. But notepad is easier. Also i assumed in this tutorial to get newbies on HTML directed in the easiest path for writing it.
Again thank you, I always like CONSTRUCTIVE critism.

Seph
05-21-2002, 07:42 PM
please delete

xilica
05-21-2002, 07:44 PM
Yes, but most web pages are not that long... do you know what the size limit is?

Nafae
05-21-2002, 07:52 PM
i was using the text area of dreamweaver, and jtext. The webpage I used to run was too large to be held within notepad, plus it's pretty hard to see hundreds of lines of code when it isn't color coded by tag.

xilica
05-21-2002, 07:55 PM
Correct Nafae,
Programs like DreamWeaver or Frontpage have drag and drop tools for web pages but also they have a place to edit the HTML if you want to program it that way.

gish
05-22-2002, 11:34 AM
Originally posted by xilica
Yes, but most web pages are not that long... do you know what the size limit is?

I do no know the limit...but I create web sites/applications with well over 3000 lines of code....notepad would go nuts trying to open this much code......


:geek:

DukeofNukes
05-22-2002, 11:47 AM
Originally posted by gish
notepad would go nuts trying to open this much code......


Not to mention that 3000 lines of code would be damn near unreadable in notepad, given the extremely limited formatting options.

gish
05-22-2002, 11:51 AM
Originally posted by DukeofNukes


Not to mention that 3000 lines of code would be damn near unreadable in notepad, given the extremely limited formatting options.

TRUE that!!!! go crosseyed trying to read!!!

imported_Gryphon
05-22-2002, 02:23 PM
Check out www.ultraedit.com for a great text editor. This is what I use to code my sites.

Strike
05-22-2002, 02:49 PM
www.vim.org

Good for coding, well .. anything.

xilica
05-22-2002, 04:17 PM
what is the limit in frontpage or dreamweaver for the number or lines or characters?

xilica
05-23-2002, 12:36 AM
If you typed in the HTML correctly, here is what it should look like:

http://www.tmstadium.com/extrastuff/HTMLWebPage.jpg

mangeli
05-28-2002, 04:55 PM
Originally posted by xilica
what is the limit in frontpage or dreamweaver for the number or lines or characters?

I don't think there is a limit in Dreamweaver.

At least I never ran in to one.

xilica
05-28-2002, 05:05 PM
Originally posted by mangeli


I don't think there is a limit in Dreamweaver.

At least I never ran in to one.

mangeli: do you have dreamweaver? if you do the instructions or manuel should say.

mangeli
05-28-2002, 05:09 PM
Originally posted by xilica


mangeli: do you have dreamweaver? if you do the instructions or manuel should say.

I do not have dreamweaver. I do most of my coding in wordpad or pico (I haven't mastered the keys in vi yet... :( ) however, the times that I have used and abused dreamweaver, I never ran in to a problem. And I have coded some fairly long pages.

imported_Phil
05-30-2002, 10:50 PM
There are many other HTML tags that you can use on top of the ones that xilica used such as <hr>, <table>, <td>, <tr>, <a name="" href="" etc.

I also do not use Dreamweaver or any other WYSIWYG editors for my websites. I use edit plus 2.

Heywood
09-02-2002, 02:23 AM
Wow, a lot of criticism for that one statement.. but understand why he said it. You can't have something that jumbles up the data, it has to be something like Vim or notepad, and chances are, a beginner is not going to be writing some gigantic page that notepad cannot open.

And I still say beginners should not use dreamweaver (and nobody should use frontpage). If you want to truly learn the language, stay away from the wysiwyg's, because to be truly powerful, and create great sites, you still always need to hand manipulate the code at one time or another. I use DW now, but I am constantly going in and out of code-view, and "tweaking" the html.


I still say the first thing you should do when tackling any kind of program, is purchase (or decide on an editor, for you lucky linux users) a good programmers editor. One that does Syntax highlighting. My favorite, Ultra-Edit, is only 30 bucks. Its money well spent on a good editor.

But anyway, just had to say that. Good tutorial, by the way.

raven
12-27-2002, 02:39 AM
In my time using Frontpage I haven't come across a limit in it either, at least not in Frontpage 2002. Frontpage 2000 or other older versions may have a limit but I haven't seen one in 2002.

a_priebe47
04-23-2003, 12:52 AM
I found this site to be extremelu useful in my HTML studies.
HTML Goodies! (http://htmlgoodies.com)

kryptech.net
10-06-2003, 06:15 PM
continued if you want to include an image you would use the tagname.jpg and to use SSI you would use

gold_dragon
12-09-2003, 04:26 PM
I would expect the limit would be the amount of memory you have. I don't know why notepad as a limit but it is pretty bad that it does.