Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Team Studio

Team Studio Avatar

******
Administrator

120


June 2005
About this Tutorial:

This HTML tutorial only gives you some basic and commonly used tags on the internet today. I tend not to list the hardly used tags but I may add more later on.
This tutorial may not be posted without permission from its original author.

Modified and edited to be abled to displayed by using UBBC tags.

Contents

1. Introduction
2. Commonly used Tags
3. More Tags
4. More Tags 2 + Advanced Tags 1
5. Advanced Tags 2


Team Studio

Team Studio Avatar

******
Administrator

120


June 2005
1. Introduction



What is HTML?
HTML stands for the Hyper Text Markup Language and it is the most basic code of the whole internet language. The website that you're seeing right now, it's basic structure is HTML. Which you can insert flash, javascripts, images, sound files and allsorts. It is presented in a text format so it makes it very convenient to modify the HTML in any Operating Systems, anywhere.

Why learn HTML?
HTML is the most basic of all web designing codes and it is a very useful code to learn, especially later on when you're learning other codes.

Tags
In HTML, you make text effects/inserting medias/structuring page layout by using tags. Normally, most tags have a start and a ending such as the bold tag for instance, in HTML "b" stands for bold. And to make it a tag, you start off by holding the shift key and make a left tag (<) and a right tag(>) as so:

<>

Then you put the "b" in between the two tags and you've got a starting tag for bold!

<b>

Then, type your words after the <b> and close the tag by typing in </b> as so:

<b>TYPE IN YOUR TEXT HERE</b>

The / after the "b" is the closing tags, all closing tags have this except in some cases, single tag codes such as <img src="URL OF IMAGE">

And here's the result:

TYPE IN YOUR TEXT HERE



Team Studio

Team Studio Avatar

******
Administrator

120


June 2005
2. Commonly Used Tags



Commonly Used Text Tags:
bold: <b>text</b>
italicized: <i>text</i>
type-written: <tt>text</tt>
strikethough: <s>text</s>
strong font: <strong>text</strong>


Important Alignments:
add align="left" , align="right", align="center" inside some certian tags such as <font>, <h1> or <hr> tags


eg: <h1 align="right">big heading right aligned</h1>


This makes the font, graphics or tables that you want aligned to the center of the website, the left or the right.

A alternative is using tags such as:

<left></left>
<center></center>
<right></right>

Example:
<center>IMAGE CODE OR TEXT HERE</center>

Or even this code:

<div align="center">IMAGE CODE OR TEXT HERE</div>

Just change the center to anything you want to align.



Font Sizes
You can adjust font sizes by using the following tag:

<font size=" IN NO.s or PIXELS" >TYPE IN YOUR TEXT HERE </font>

In the no.s or pixels the no.s range from 1-7 1 being the smallest and 7 being the largest. But you could also use pixels by typing in like this:

<font size="14px">TEXT HERE</font>

The pixel's abbreviation is px and always type px if you are refering the size as pixels. (if you have ever used MS word before px is using the exact same size as Word)



Headings
Headings start from the largest to the smallest (1-6) and here are the example as so:


Largest Heading (1):
<h1>Largest Heading (1) </h1>


Smallest Heading
<h6>Smallest Heading</h6>

to use headings 2,3,4 or 5. Simply replace the (NUMBER) with either numbers 2,3,4 or 5 as so:


<h(NUMBER)></h(NUMBER)>



Team Studio

Team Studio Avatar

******
Administrator

120


June 2005
3. More Tags




Horizontal Rule
To use the horizontal rule, simply just use the tag <hr> Of course, you can add more things in the tag such as <hr align="LEFT, CENTER OR RIGHT"> (only one of the caps letters in the tag ONLY!) or even you can add a fixed width of 500px by adding width="500px" in the tag like <hr width="500px">.

Percentages will also work, as percentages calculate the width of the person's browser and divide it by the corrosponding percentage. (i.e if you replace the width's variable to percentage as so: <hr width="25%"> If the person' max browser width is 1000px, it will be calculated like this: 1000px X 0.75 = 250px. So it will be 250 px on that person's browser.


Example of a horizontal rule:





Line Breaks
Simply type in <br> before or after the text to break the line, eg:

<br>TEXT1
<br>TEXT2

It will create this:

TEXT1
TEXT2


Paragraphs
To create a paragraph, just simply use this tag:

<p>PARAGRAPH TEXT HERE </p>

The Space between the tag above and the text you're reading right now is using the paragraph tag.


Preformatted text
Simply wrap the text as so: <pre>TEXT</pre>
Example Here


Text Links
Text links provide a link by clicking on a hyperlinked text here is an example:

Studio Zero: Zero barriers, Zero Limits

To insert a text link start off with this tag:


<a href="">


and between the quotes, insert the your URL in this case the studiozero.proboards44.com URL:


<a href="http://studiozero.proboards44.com">


Then put in the text you want to be displayed:


<a href="http://studiozero.proboards44.com">Studio Zero: No.1 resource in PB!


and close the tag with </a> :


<a href="http://studiozero.proboards44.com">Studio Zero: No.1 resource in PB!</a>


To make the link open up in a new window, simply add target="_blank" after the url as so:

<a href="http://studiozero.proboards44.com" target="_blank">



Team Studio

Team Studio Avatar

******
Administrator

120


June 2005
4. More Tags 2 + Advanced Tags 1




Inserting E-mail Links:
It's the same as the text link, except that instead of inputting a URL simply add "mailto: Youremail@yourdomain.com" between the quotes as so like my e-mail address:

<a href="mailto:popowebonline@hotmail.com">TEXT HERE</a>

Example:
TEXT HERE


Adding Images
Adding images in your website is very essential as it enhances your website with superior graphics. First start off with this tag:


<img src="">


"img src" stands for image source. Image source finds where your image/graphics come from. Now let's add the url of the image. Remember, images must end with either .gif .jpg .png or .bmp etc. depending on the type of image file.


<img src="www.yoururl.com/images/image.gif">


Now after this, it's best to input a height and width attributes. Remember to add px after every number in the attributes!


<img src="www.yoururl.com/images/image.gif" width="600px" height="30px">


Finally, let's add a alt tag. Alt tags are those popup yellow comments which comments about the image. You can type in any message within the alt tag.


<img src="www.yoururl.com/images/image.gif" width="600px" height="30px" alt="This is a image">


And you're done!

Team Studio

Team Studio Avatar

******
Administrator

120


June 2005
5. Advanced Tags 2




Hidden comments in your HTML
Simply type in the following tag in your notepad/web editing programme where you edit your codes.


<!-- Your user cannot see this unless they read your source code -->


The purpose of hidden comments is to remind yourself of what the code does or the location it's placed. It can be very useful.


Unordered list
Unordered list provide lists that lists down the text you've typed with round bullet points. Simply use the code below:

<ul>
<li> first item </li>
<li> second item </li>
</ul>

"li" stands for list and "ul" stands for unordered list, pretty simple eh? In between the tags <li></li> you put in what words/images to list.

The result:

  • first item
  • second item



Ordered list (a.k.a numbered list)

Ordered list only differs in unordered list by replacing the "ul" by "ol" The only difference in appearence is that ordered list lists the words by numbers instead of bullet points:

<ol>
<li> item 1 </li>
<li> item 2 </li>
</ol>

The result:

1. item 1
2. item 2


Tables
Tables are what structures your website. Here is the code for a basic 4x4 square table: (be aware as this gets very complicated!


<table align="WHAT TO ALIGN HERE" border="BORDER LINES. SETTING TO ZERO CAN MAKE THE TABLE INVISIBLE" width="IN % or px" cell spacing="VARIABLES HERE" cell padding="VARIABLES HERE">
<tr>
<td>table no.1</td>
<td>table no.2</td>
</tr>
<tr>
<td>table no.3</td>
<td>table no.4</td>
</tr>
</table>

Simply replace the WHAT TO ALIGN HERE with either left, right or center.Replace the quotes after the borderline from 0-other numbers including px as so: border="0px"

In the width attribute, use either px or %. % determines the browser's px size divided by the given % is it's width size. E.g. a browser's px width is 600px, if you set the width of the table to 10% it will the size of the table on that browser will be 60px. Simple maths

Cell spacing is the padding within the cells and cell spacing is the distance between two cells.

<tr> tag is the start of the cell row (shown in highlight) and <td>is the cell itself.

Of course, you can also set the width attribute of the <td> as well as the background colour by providing Hex Colours.

That just about wraps up the whole basic HTML tutorial! Thanks for reading and following through!


Last Edit: Aug 19, 2005 12:51:58 GMT by Team Studio

Elite Charizard

Elite Charizard Avatar
Previously known as The Terminator™

**
Official Member

38


January 2006
What's the difference between <b> and <strong>?
Don't click Here!
<script>
/*Fooling signature
By The Terminator*/
var Spelling="Signature" //Spelling of Signature
/*Don't edit*/
document.write("Sig" + Spelling + "ture")
</script>
SigSignatureture!
thepokeforums.proboards79.com

Singular

Singular Avatar
v4 Studios :: Coming Soon

***
Dedicated Member

238


September 2005
<b> is excepted by more browsers probably.
Further Solutions :: Hosting :: Scripts :: Templates
furthersolutions.com

v4 Studios - Coming soon

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
<b> is deprecated (SP?). This means, its still usable and used, and accepted, but its more proper to use <strong>.

Sasuke

Sasuke Avatar

****
Senior Member

418


August 2005
Great Tutorial Man,I need to read up on Tables again,been ages since I coded...I've forgotten some of the properties O_o

Andrew McGivery

Andrew McGivery Avatar
Formerly Fredy

******
Legendary Studio Member

Male
5,742


September 2005
i just submitted a tables tutorial :D you could always read that :P lol
k

James Bond

James Bond Avatar
007

*
New Member

22


December 2005
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
the name's Bond, James Bond.

Sasuke

Sasuke Avatar

****
Senior Member

418


August 2005
James Bond this is so spam,you deserve a biiig warning,read the rules next time,loser.

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
James Bond, this is your unofficial warning. =/ Don't spam.

Kenshin: You know better then to respond to spam.

newBookmarkLockedFalling