Basic HTML!

[joelatics]

So you're wondering how the heck to add messages to your headers, and what on earth HyperText Markup Language is? Well, you came to the right place!
I'll give you the rundown on the basics in the next few posts!

KtF
Joe

[joelatics]

Ok, these are the absolute basics.
When I post 'tags', you put the text in the middle, for example:

<tag>TEXT GOES HERE</tag>

Now, <tag></tag> aren't actual tags, but there's 3 important rules there already: as a rule, ALL tags come in pairs, ALL tags begin with < and end with > , and all second (closing) tags have a '/' before the place where the actual letters go in it.
Got it?
No?
Here's some examples.
<b>TEXT GOES HERE</b> - These tags make the text bold.
See? You put the tags around the text, and the tags begin and end with < and > , and the second tag has a / before the letter(s)
Here's some more examples:
<i>TEXT GOES HERE</i> - These make the text italic
<u>TEXT GOES HERE</u> - These make the text underlined

That's enough for now!

KtF
Joe

[joelatics]

Here are some more tags for you to play with:
<h1>TEXT</h1> - Makes a heading.
<h2>TEXT</h2> - Makes a sub-heading
<h3>TEXT</h3> - Makes a sub-sub-heading
<h4>TEXT</h4> - Makes a sub-sub-subheading (and so on!)
<small>TEXT</small> - Makes the text smaller


<ul>TEXT<ul> - Makes bullet points - see <li>

<ol>TEXT<ol> - Same as <ul>, but numbered instead of with bullet points.

<li>TEXT</li> - A list item for <ul> and <ol> - makes a bullet point for <ul> , and a number for <ol>.

For example: If you were making bullet points about me (for some scary, bizarre reason!), you'd put:

<ul>
<li> He's called Joe
<li> He ends all his posts with KtF, Joe
<li> He is an Oldham Athletic supporter
</ul>

Which would look something like this:

• He's called Joe
  
• He ends all his posts with KtF, Joe
  
• He is an Oldham Athletic supporter
  

If you want to make a numbered list, you simply replace <ul> and </ul> with <ol> </ol>, so it looks like this:

<ol>
<li> He's called Joe
<li> He ends all his posts with KtF, Joe
<li> He is an Oldham Athletic supporter
</ol>

Which would come out looking like this:

1. He's called Joe
2. He ends all his posts with KtF, Joe
3. He is an Oldham Athletic supporter.

That's your lot for now!

KtF
Joe

[joelatics]

Namely, <br /> and <hr />

These cheeky beggars can cause some trouble if you don't understand them!
These are the only 2 tags (that I can think of) which only have 1 tag used.

So what do they do?

<br /> gives a line break. So you dont just hit enter and carry on? you're asking? No, sorry!
Whenever you want a new line, you have to put in <br />
For example, if I wanted to write

Mary had a little lamb ,
Its fleece was white as snow;
And everywhere that Mary went,
The lamb was sure to go.

I'd have to put:

Mary had a little lamb ,
<br /> Its fleece was white as snow;
<br /> And everywhere that Mary went,
<br /> The lamb was sure to go.

Got it?

<hr /> works exactly the same, but it puts a horizontal line in.
So if I wanted to put:

Mary had a little lamb
___________________________________________________
Its fleece was white as snow;

___________________________________________________
And everywhere that Mary went,

___________________________________________________
The lamb was sure to go.

___________________________________________________

I'd have to put:

Mary had a little lamb ,
<hr />
<br /> Its fleece was white as snow;
<hr />
<br /> And everywhere that Mary went,
<hr />
<br /> The lamb was sure to go.
<hr />

(We inculde the <br />'s because we still want line breaks!)

Simple, really!

KtF
Joe

[joelatics]

OK, we'll take these one at a time.

LINKS
How do you link to another webpage in HTML?
Simple enough:

<a href="URL of webpage">Text to display</a>

(The a stands for "anchor", and the href is short for "hypertext reference", which tells your browser where the link leads to.)

So to link to google, we put:
<a href="http://www.google.com">Google</a>
(NEVER forget the http://!)
(Of course, the text could say Chimp if you wanted it to, not just plain old google!)
(If you wanted to link to google with 'Chimp' as the text, you'd do
<a href="http://www.google.com">Chimp</a>, it still goes to google!)

MOVING TEXT

Simple really - just use the tags <marquee></marquee> for a medium speed scroll to the left!
Ah, I hear you say, what it we want it to go faster, slower, or a different direction?
Well, this is why <marquee> is called the 'evil' tag...
I'll tell you anyway!
Change the direction
It's pretty simple to change direction:
<MARQUEE DIRECTION=LEFT>Blah.</marquee>
<MARQUEE DIRECTION=RIGHT>Blah.</marquee>
<MARQUEE DIRECTION=UP>Blah.</marquee>
<MARQUEE DIRECTION=DOWN>Blah.</marquee>

Easy enough!

Change the speed!
Simple again!
<MARQUEE SCROLLAMOUNT=x>
Really easy, the higher x is, the faster it scrolls! Normally it goes at 6, so to get it slower, go for a number between 1 and 5.

Have fun with marquee!

<MARQUEE BEHAVIOR=SCROLL>
This is the default, making the content scroll off the edge, then come back on the other side!

<MARQUEE BEHAVIOR=SLIDE>
This is the same, except that when the first part of the content reaches the left edge of the page, it stops without scrolling off.

<MARQUEE BEHAVIOR=ALTERNATE>
This is the best one, it makes the content bounce off each edge!

For examples of the above, try this link!

Centering
"But I don't want my beautiful HTML in the corner" I hear you cry...
No worries!
There's a simple tag to solve it!
It goes like this:
<center>
</center>

Put EVERYTHING you want centered in between the two tags!
EVERYTHING, including any other tags!

More in a mo!

KtF
Joe

[joelatics]

Ah, yes. Images.
They're actually quite difficult...
Let's get straight on it!

So, you want a big picture of the oldham athletic badge on your website? Cool!

Firstly, HOST THE IMAGE YOURSELF!
Go to www.imageshack.us , click the URL button, and enter the URL (which you get from right clicking on the image, and clicking properties) where it says to!
Done that?
Good ;D
Next, you get the URL, and put it into the tag.


<img src="http://www.chaddertonparkfc.co.uk/events/oldham_athletic.gif" alt="Up the Blues!" />
(Notice that I've hosted it myself!)

You put the image URL in the ""'s after the <img src=
bit.

What does the alt=
do?
That is the text displayed when you put your mouse over the image. In this case, it would say 'Up the blues'!

Cool!
That's some really hard coding you're getting onto!

But how to link the image to somewhere?

<a href="http://www.erniecooksey.com/showscreen.php?site_id=38&screentype=site&screenid=38">
<img src="http://www.chaddertonparkfc.co.uk/events/oldham_athletic.gif" /></a>

Like that. In this case, it links to the page of Ernie Cooksey, who used to play for us, and tragically died at 28 this June.

You put the image URL in the normal place (after the <img scr=" and before the second ") and the link after the <a href=" but before the second " .


Got it?
I'm very impressed if you have!
Try re-reading it if you don't!

KtF
Joe

[Trublu]

Just a small note: if you have an attribute within a tag (attributes are the things that define a tag, they usually come in the form attribute name= attribute definition), the definition should always be in quotes. This is new to XHTML. Also with XHTML, <b></b> tags have been changed to <strong> </strong>

Good job, Joe.

[joelatics]

Finally, you may not quite understand this tutorial, due to wording etc, which is absolutely fine!
I had to go through several tutorial websites myself before I got a basic grasp on HTML, so here's some links that could help you!

html.net/ - HTML.net. I learn almost all I know from there!
www.htmlcodetutorial.com/ - Good site, with lots of examples!
www.w3schools.com/html/default.asp - Another tutorial site.
support.proboards.com/index.cgi?board=programming&action=display&n=1&thread=19040 - ProBoards support, lots of good links there!

Thanks Trublu ;D

KtF
Joe

[Triad]

Namely, <br /> and <hr />

These cheeky beggars can cause some trouble if you don't understand them!
These are the only 2 tags (that I can think of) which only have 1 tag used.

You forgot:
<input [attributes] />
<meta [attributes] />
<link [attributes] />

Nice tutorial though.