Basic HTML Tutorial

Fatal-Fatality

Nov 7 2004, 09:04 PM

Here is some basic HTML... I will give an example doc first, and then break it down. Also, will give some extras that could make your page fun and interesting!

Example Doc:

CODE

<HTML>

<title>Page Title</title>

<BODY> <body bgcolor=background color><body text=Main Text>

<center><h1>Title Of Article</h1></center><br>

Text....

</BODY>

</HTML>

This will generate something like this:
Title Of Article(This Centered)
Text.....

Here are some basic tags:

Font Color:

CODE

<font color=color or hex>WORD OR SENTENCE(S)</font>

Font Size:

CODE

<font size=1-7>WORD OR SENTENCE(S)</font>

Font Color and Size:

CODE

<font color=color or hex><font size=1-7>WORD OR SENTENCE(S)</font></font>

Scrolling Text: (From Right to Left)

CODE

<marquee>WORD OR SENTENCE(S)</marquee>

Insert Image:

CODE

Link:

CODE

<a href="http://LINK.COM/">LINK TEXT OR LINK AGAIN</a>

Image Link:

CODE

Audio Embed:

CODE

Video Embed:

CODE

Crossout Text:

CODE

A Template to edit:

CODE

<HTML>

<title>Page Title</title>

<BODY><body bgcolor=black><body text=red>

<center><h1>Page Template</h1</center><br>

<font color=blue><font size=4>Welcome, here is a template anyone can make, this was designed for <strike>dummies</strike> new Webmasters wanting to learn HTML!</font></font><font color=green> Have Fun, and Good Luck!</font><br><br>-Thanks<br><br>-Fatal-Fatality

</BODY>

</HTML>

If I forgot anything, let me know!

(sticky by whizz)

SSR

Nov 7 2004, 09:16 PM

That kindda helps with special effects on your html website, but i need html instaltion tutorials i ahvent found any yet that i know what their talking about. Every tutorial website gives genral stuff never step by step stuf they say do this and that, they dont tel you where to do it. but thanks for the tutorials they will help on my website i wil be sure to check back here when i get my site running i found alot of useful ones. thanks again.

edited: oh this is a poll? i voted yet even though i knew some of them, and knew how to like use al of them, but the way i kenw how to do it wasnt as fast as using these html scripts.

Meeko

Nov 7 2004, 09:17 PM

I know most of this stuff, but a few things helped me out, thanks man.

If you don't mind, I'd like to contribute.

QUOTE

CODE

<font color=color or hex>WORD OR SENTENCE(S)</font>

You can find hex color codes here. http://www.december.com/html/spec/color.html

Fatal-Fatality

Nov 8 2004, 09:28 PM

No problem, like I said, if you can add anything, please do, and good luck in your further HTML, PHP, etc. scripting!

-Fatal-Fatality

Winbots

Nov 9 2004, 03:22 AM

ok, im going to approach this abit different. im going to give you a step by step tutorial on how to make a simple webpage:

first things first, every html tag is enclosed in

every tag must be closed before a parent tag is closed. ex:

CODE

<HTML><BODY></HTML></BODY> (INCORRECT)

it should be:

CODE

<HTML><BODY></BODY></HTML> (CORRECT)

every webpage should be enclosed in the HTML tag, so:

CODE

the invisible part of the webpage should be enclosed in the HEAD tag, the most common tag that goes inside the HEAD tag is the TITLE tag which is what is displayed in the browser bar, so:

CODE

the part that you see should be enclosed in the BODY tag, and any text in the BODY tag will appear as text, so:

CODE

BUT I WANT MY BACKGROUND TO BE BLACK!!!
well then you will do the following:

CODE

GRR! NOW I CANT SEE MY TEXT!
your text is black too!

Well I want it white...
ok, then add the FONT tag with the COLOR set to white

CODE

ok that's better
I want the text 'This is my very cool web page!' to be big like a header
then use a H# tag where # is the header number from 1 to 6, where 1 is biggest and 6 is smallest. like such:

CODE

What about a line across the page?
use the HR tag, like:

CODE

now i want a link!
ok... use the A tag with HREF set to the link you want it to go to... like such:

CODE

now i want a new line
use the BR tag where ever you want a newline (note hitting enter will NOT start a new line):

CODE

<HTML>

<HEAD>

<TITLE>My Cool Web Page!</TITLE>

</HEAD>

<BODY BGCOLOR="black">

<FONT COLOR="white">

<H1>This is my very cool web page!</H1>

<HR>

<A HREF="http://winbots.org/">my other very cool website!</A><BR>

my other cool text..<BR>

and my other line...

</FONT>

</BODY>

</HTML>

now i want to do just one more thing... i want a link to my email
ok it works like a reguler link except instead of http://www.mydomain.com, you do mailto:myemail@mydomain.com.

CODE

Nazrin

Nov 10 2004, 02:12 PM

it really helps me....(when I inserting HTML in my site..)

abcde

Nov 10 2004, 02:38 PM

Simple things you didn't mension:

CODE

<i>To make your text Italic</i>

CODE

CODE

<u>To underline yout text</u>

Fatal-Fatality

Nov 10 2004, 08:51 PM

thanks guys, I was kind of rushed, any more input, please give it, the more that people know, the better the websites!

skyglow1

Nov 13 2004, 06:53 AM

What I really suggest is using coding style layout of code. Like for every new thing that is nest in soemthing else, you press tab or 2 spaces for margin like this how I do it on my site:

http://www.skyglow1.freenukehosting.com/

Look at the source code to see.

skyglow1

odirima

Nov 16 2004, 05:31 PM

i had a code how to insert a flash animation but i forget it...
someone can give me?

Thanks

Latest Entries

Crazy Photon

Feb 22 2005, 04:47 PM

Unordered lists:

CODE

<ul>

<li>Element

<li>Element

<li>Element

</ul>

Ordered lists:

CODE

<ol>

<li>Element

<li>Element

<li>Element

</ol>

DSadmin

Jan 1 2005, 05:00 AM

Well i saw u hadn't mentioned META tags, so here goes:

(i'm not a code guru so i'm not sure how to explain it and stuff...) :shock:

Meta tags tell searches and gots (i think they do) the author of the site, keywords, and content type like html php and stuff. They can tell more stuff but i don't know what that is...

Example: (this would be between the HEAD tags of a page)

CODE

This should help your site rakings is search engines and stuff. :mrgreen:

Hope it helps :wink:

Edit: The paragraph tag, <p>. Well it makes paragraphs....

Example:

CODE

<p>THIS IS A PARAGRAPH</p>

<p>THIS IS ANOTHER PARAGRAPH</p>

<p>AND THIS IS A PARAGRAPH ASWELL</p>

well, i think thats it...

MCK9235

Dec 22 2004, 07:09 PM

Inserting JS

CODE

<html>

<head>

</head>

<body>

<script language="javascript etc">

window.alert("Hola!");

</script>



</body>

</html>

Adds JS to your site.

CODE

<!--

starts a comment

CODE

-->

ends a comment
the text inbetween is tottally ignored, the browser sees a <!-- and it skips it.
Doctypes
Although not required for your site to be considered valid it must have a doctype here is the HTML 4 transitional one:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

skyglow1

Dec 22 2004, 07:04 PM

If you want to make sure you have correct html on your page, use this HTML verifier and put the link of your website into it:

http://validator.w3.org/

skyglow1

MCK9235

Dec 22 2004, 02:14 PM

Links
Tag: <a> stands for anchor.

CODE

Mailto:

CODE

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE