Jump to content
xisto Community
Sign in to follow this  
iGuest

Basic HTML Tutorial

Recommended Posts

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.adobe.com/special/errorpages/404.html; 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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.