Basic HTML Guide
Written by: Lisa
(c) Neo Luv
Introduction to HTML
So, you want to learn some things about HTML right? First off, HTML stands for HyperText Markup Language. Sounds difficult? It's not.
The Basics
HTML can do a lot of cool things, but there are a few important basics that you need to know. In this guide you'll learn how to : create links, create image links, remove image link borders, create bullets, display images, align text and images, work with font features like bold, italics, underline, and strikethrough, create scrolling text, change font face, font color, and font size, and much more.
Creating Links
So you want to link to another page, but you don't know how? The code is very easy.
<a href="YOUR URL GOES HERE">Link Text</a>
What does that mean? In the blue is the basic format, and you don't change anything about that code. In the red is where you put the URL of the page (http://www.neo-luv.com). In the black is the text of the link. You might want to make it say Visit Neo Luv. This is what your code looks like all together: Visit Neo Luv
Viewing Images
You want to put an image you like on your page, but you don't know how. This is the code:
<img src="YOUR IMAGE URL">
The code in the blue tells your
computer to look for that image and display it. The code in blue should be the
image URL, so it tells the computer exactly what image you want. For example,
I'd put in http://www.neo-luv.com/images/xneoluvfrozen.gif. This is what
your overall code would come out to look like:
Creating an Image Link
If you ever wanted to have your site link to an image, this is how you can do it using HTML!
<a href="YOUR
WEBSITE URL"><img src="YOUR
IMAGE URL" border="0"></a>
The code in the blue tells your computer to create a link to a website, find an
image, make the image link to the website, and remove the extra border
(optional). The code in the red should be replaced by 1. Your website URL
(http://www.neo-luv.com) and 2. Your image URL (http://www.neo-luv.com/images/xneoluvfrozen.gif).
You're overall code would look like this:
Working with Fonts and Features
Change your font size :
<font size="number">
Replace number with a number. Examples:
1 2
3 4 5
6 7 etc.
Change your font color : <font color="color">
Replace color with the color of your text such as:
blue, red,
green, yellow,
orange, black, pink,
purple, lightblue,
mediumpurple, hotpink,
and MUCH more.
Change your font face: <font face="font face"> Replace font face with the name of your favorite font, such as papyrus. Your final product would look like this : Hello, this is a sample.
Change your font style:
For bold text: <b>
My Text </b>
For Italic text: <i>
My Text </i>
For underlined text:<u>
My Text </u>
For strikethrough text: <strike>
My Text </strike>
For all text: <b><i><u><strike>
My Text </b></i></u></strike>
Create Scrolling Text
Ever wonder how they get that text to scroll across the page? It's very easy!
<marquee> My Text That Scrolls </marquee>
This is what it looks like :
Create Bullets
Need to keep things in order? Try having a bullet list!
<ul>
<li> Bullet 1
<li> Bullet 2
<li> Bullet 3
</ul>
This is what it looks like:
I hope this covers most of your questions. For more information visit lissaexplains.com and neopets.com. Thanks for reading!!