Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Basic HTML Tutorial


17 replies to this topic

#1 Guest_Fatal-Fatality_*

  • Guests

Posted 07 November 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:
<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:
<font color=color or hex>WORD OR SENTENCE(S)</font>
Font Size:
<font size=1-7>WORD OR SENTENCE(S)</font>
Font Color and Size:
<font color=color or hex><font size=1-7>WORD OR SENTENCE(S)</font></font>
Scrolling Text: (From Right to Left)
<marquee>WORD OR SENTENCE(S)</marquee>
Insert Image:
<img src="http://LINK.COM/DIR/IMAGEFILE.EXT">
Link:
<a href="http://LINK.COM/">LINK TEXT OR LINK AGAIN</a>
Image Link:
<a href="http://LINK.COM/"><img src="http://LINK.COM/DIR/IMAGEFILE.EXT"></a>
Audio Embed:
<embed src="http://LINK.COM/DIR/FILE.EXT" hidden="true/false" loop="true/false/# of times" autostart="true/false">
Video Embed:
<embed src="http://LINK.COM/DIR/FILE.EXT">
Crossout Text:
<strike>TEXT</strike>

A Template to edit:
<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)

#2 Guest_SSR_*

  • Guests

Posted 07 November 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.

#3 Guest_Meeko_*

  • Guests

Posted 07 November 2004 - 09:17 PM

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

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


Quote

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

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

#4 Guest_Fatal-Fatality_*

  • Guests

Posted 08 November 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

#5 Guest_Winbots_*

  • Guests

Posted 09 November 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:

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

it should be:

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


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

<HTML>



</HTML>


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:

<HTML>

<HEAD>

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

</HEAD>

</HTML>


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

<HTML>

<HEAD>

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

</HEAD>

<BODY>

This is my very cool web page!

</BODY>

</HTML>


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

<HTML>

<HEAD>

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

</HEAD>

<BODY BGCOLOR="black">

This is my very cool web page!

</BODY>

</HTML>


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

<HTML>

<HEAD>

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

</HEAD>

<BODY BGCOLOR="black">

<FONT COLOR="white">

This is my very cool web page!

</FONT>

</BODY>

</HTML>


ok that's better :D
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:

<HTML>

<HEAD>

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

</HEAD>

<BODY BGCOLOR="black">

<FONT COLOR="white">

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

</FONT>

</BODY>

</HTML>


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

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

</FONT>

</BODY>

</HTML>


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

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

</FONT>

</BODY>

</HTML>


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

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

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

you can email me <A HREF="mailto:Cobi@winbots.org">here</A>

</FONT>

</BODY>

</HTML>



#6 Guest_Nazrin_*

  • Guests

Posted 10 November 2004 - 02:12 PM

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

#7 Guest_abcde_*

  • Guests

Posted 10 November 2004 - 02:38 PM

Simple things you didn't mension:

<i>To make your text Italic</i>
<b>To make your text bold.</b>
<u>To underline yout text</u>


#8 Guest_Fatal-Fatality_*

  • Guests

Posted 10 November 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! :)

#9 Guest_skyglow1_*

  • Guests

Posted 13 November 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....ukehosting.com/

Look at the source code to see.

skyglow1

#10 Guest_odirima_*

  • Guests

Posted 16 November 2004 - 05:31 PM

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

Thanks :)

#11 Guest_skyglow1_*

  • Guests

Posted 17 November 2004 - 05:44 AM

THe code for inserting a flash given by dreamweaver is:

<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="32" height="32">

	<param name="movie" value="FILEPATH">

	<param name="quality" value="high">

	<embed src="FILEPATH" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="WIDTH" height="HEIGHT"></embed></object>

Correct me if I'm wrong because I'm not too sure about flash.

skyglow1

#12 Guest_welbis_*

  • Guests

Posted 19 November 2004 - 12:58 AM

exclude from the display:

<!--hello-->



Tables

PS THIS IS NOT VALID CODE - just a reference

<html> ------open html

<body> ------open body



<table> -----open table

<tr> ---------- open row

<td> ---------- open column

</td> ---------- close column

</tr> ---------- close row

</table> -------close table





</body> ------close body

</html> -------close html




Sooo...you can do this (inside <body>and </body>)


<table width="800px" height= "500px" border="1px">

<tr>

<td width="800px" height="100px"> THIS IS A HEADER </td>

</tr>



<tr>

<td width="100px" height="400px"> THIS IS A NAVIGATION BAR BELOW THE HEADER ON THE LEFT</td>

<td width="700px" height="400px"> THIS IS A CONTENT AREA BELOW THE HEADER BUT TO THE RIGHT OF THE NAV BAR</td>

</tr>

</table>



#13 Guest_geancanach_*

  • Guests

Posted 22 November 2004 - 01:00 AM

some stuff for forms


<form method="GET" enctype="No Method used" action="formscript.php"> <----start form

<select name="dropdown"> <--- start dropdown box

  <option selected value="value1">choice1</option>  <---- dropdown box option 1 (default)

  <option value="value2">choice2</option> <---- dropdown box option 2

</select>  <--- end dropdown box

<input type="checkbox" name="" value="checkthis"> <---- a checkbox

<input type="radio" name="" value="select1">  <--- a radio button

<input type="text" name="" value="textvalue">  <--- a textbox

<input type="password" name="" value="yourpass">  <---- a password box

<input type="hidden" name="undisplayed" value="noshow">  <--- hidden text

<textarea name="text" rows="15" cols="25">  <--- start text area

</textarea>  <--- end text area

<input type="submit">  <--- a submit button

<input type="reset">   <--- a reset button

</form>   <---- end form



#14 Guest_MCK9235_*

  • Guests

Posted 22 December 2004 - 02:14 PM

Links
Tag: <a> stands for anchor.

<a href="yourdomain.tld">MY site!</a>

Mailto:

<a href="mailto:you@domain.tld">E-Mail Me!</a>



#15 Guest_skyglow1_*

  • Guests

Posted 22 December 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

#16 Guest_MCK9235_*

  • Guests

Posted 22 December 2004 - 07:09 PM

Inserting JS

<html>

<head>

</head>

<body>

<script language="javascript etc">

window.alert("Hola!");

</script>

<!-- End JS -->

</body>

</html>

Adds JS to your site.
<!--
starts a comment
-->
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:

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



#17 Guest_DSadmin_*

  • Guests

Posted 01 January 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... :D

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


<META name="Author" content"AUTHORS NAME HERE">

<META name="keywords" content"KEYWORDS, HERE, SEPARATED, BY, COMAS">

<META http-equiv="Content-Type" content"CODE TYPE YOU USE LIKE PHP  AND HTML">


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.... :D

Example:

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

#18 Guest_Crazy Photon_*

  • Guests

Posted 22 February 2005 - 04:47 PM

Unordered lists:

<ul>

    <li>Element

    <li>Element

    <li>Element

</ul>

Ordered lists:

<ol>

    <li>Element

    <li>Element

    <li>Element

</ol>





Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users