 |
 |
 |
 |
 |
 |
 |
 |
||||||
 |
 |
 |
|
||||||||||
 |
 |
|
|||||||||||
 |
 |
|
|||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
 |
 |
|
|||||||||||
 |
|
||||||||||||
 |
 |
 |
|
||||||||||
 |
|
||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Have you ever wondered how people make their text bolded, italicized, and underlined and even having coloured text, inserting images, links etc. in HTML? Look no further, because Celes the teacher is here to teach you all you need to know about basic page tags to spice up your page.
All tags start with < and ends with />. The computer identifies these so it knows what commands you are issuing. Without these, your text will be all garbled and it won't look too pretty.Paragraph Breaks Tags
I think the most basic page tag is the paragraph break tag. In normal documents you would hit the "Enter" button to make a new paragraph, but in HTML, hitting the "Enter" button won't do you any good. The tag to make paragraph breaks is:
Replace TEXT with whatever you want to write. The text between the <p></p> tags will be a paragraph, so if you wish to make another paragraph, all you have to do is insert this tag again. This tag comes in useful to organise all your content in a neat heap.Line Breaks Tags
The line break tag works so that you can add a sentence right under another sentence. If you wanted to shorten your first sentence so that it doesn't continue until it makes another line, you can use this tag to make a sentence below the first sentence without using the <p></p> tags. The tag to make paragraph breaks is:
Everytime you start a new sentence add the <br></br> tags. For this tag, you don't have to add a </br> tag! Simple huh?Making Text "Fancier"
Everyone should know these tags. They are simple, basic, easy, and they will spice up your text. You should try to remember these because they will come in handy. Some of them include: (Replace "This tag will make your text ----" with your own text)
<b>TEXT</b> will give you TEXT
<i>TEXT</i> will give you TEXT
<u>TEXT</u> will give you TEXT
<del>TEXT</del> will give you
TEXT<marquee></marquee>
<center>
This tag will make your text centered in the middle of the page. </center><tt>TEXT</tt> will give you TEXT
<font size="2">TEXT</font> will give you TEXT. Change the number to change the size.
<font color="#7FFF00">TEXT</font> will give you TEXT. Change the colour hex code to your liking.You can even combine these tags to make another style. For example you can combine the underline tags and the bold tags to get this.
Inserting Images
Let's say you want to insert an image to show your visitors, like a picture of a beach or something. Use this tag to insert your image:
Replace "imagename" with the name of the file and "filetype" with the type of file the image is saved as. (ex. .gif, .bmp etc.) It would look something like this:
Look! I inserted an image with the image tag!
Linking to Other Sites
To link to another person's site using a text link, use this tag:
<a href="http://websiteURL">TEXT</a> (ex. Aureus)
When you click on the text, it will lead to the person's site that you linked to.You can even use an image as a link instead of using a text link. The tag would look like this:
So when you click on the button, it will lead you to the person's site that you linked to in the same window.Do you see a teeny border around the image? You can get rid of that by adding border="0" after the " after the image file type. You will still get the same effect, but without the border:
You can still click on this image and it would still lead you to the linked site, but without the ugly border. If you want to leave it there, be my guest!If you want the link to open up in a new window, add target="_blank" after the " after the URL. Works for both text and image links.
You can also have little messages on your image show up when you hover over a link (image and text). The tag will look like this:
for text links
for image links
EX. Rainbow Drops
Add a title="yourmessage" tag after your " after the URL with a space. So when you hover over the link, your message will show up! Just like magic, isn't it.
Emailing Links
To have someone send you an email by clicking a link, add this tag:
to get this
Replace TEXT with something like "email me" or "click here" or something.
Emailing links can also work with images.
I hope this tutorial helped you lots! I spent a long time writing this tutorial, so I would appreciate it if you provided a link back to me if it helped you in any way. If you have any questions about this tutorial, don't hesitiate to email me.
Aureus and all content © 2004-2007 to Celes. All Rights Reserved. No part of this site may be duplicated, altered, claimed, sold, changed, or in any way or form without permission from the owner. You may view the credits here. Thank you so much Chie for hosting me!