|
|
|
HTML Basics
| HelpYourNeopet : HTML/CSS Help : HTML Basics |
|
Click to jump to the appropriate section in the guide:
1. What is a tag?
2. Basic text manipulation
3. Adding images
4. Adding links
5. Horizontal line
6. Scroll Boxes or Textareas
7. Moving/scrolling text
8. Adding a background
1. What is a tag?
Tags are an element; they mark the beginning and the end so that the browser knows how to display your page. Elements include text manipulation like bold, underline and itallic and making tables as well as a whole range of other things.
To begin a tag you would type something like: <tag> and to end it you would type the same tag again but with a slash: </tag>. Tags that have optional attributes are started and ended like this: <tag align=left> </tag> you dont have to include the attribute in the closing tag.
2. Basic Text Manipulation
Bold, itallic, underline, superscript, subscript, paragraphing, starting a new line, changing size, changing colour, headings and aligning text.
<p> Starts a new paragraph
<b> Makes text bold
<i> Makes text itallic
<sup> Makes text appear in superscript
<sub> Makes text appear in subscript
<br> Starts a new line (just like pressing Enter or Return on your keyboard)
<center> Centers text or objects
<p align="left"> Aligns the entire paragraph element to the left (can replace with center or right)
<font color="orange"> Makes text blue
<font size="+2"> Enlarges text two sizes from the default browser setting. (Eg: if the browsers default was 10pt then your text would appear in size 14pt)
<h1> Creates a heading size one (one is the largest there's also two and three
<div align="right"> Divide, new section, good for aligning text without starting a new paragraph like in the example below.
Using the above tags you can do pretty much everything you want to do in your shops, guilds, petspages or webpages excluding some of the more advanced stuff like tables, adding links and adding images.
EXAMPLE
At seven the next morning the telephone rang.
Slowly I swam up from the bottom of a black sleep. I already had a telegram from Jay Cee stuck in my mirror, telling me not to bother to come into work but to rest for a day and get completely well, and how sorry she was about the bad crabmeat, so I couldnt imagine who would be calling.- exerpt from The Bell Jar by Sylvia PlathThe HTML would look something like this:
<p>At seven the next morning the <i>telephone</i> rang.<br>
Slowly I swam up from the bottom of a <b>black</b> sleep. I already had a telegram from Jay Cee stuck in my <font color=green>mirror</font>, telling me not to bother to come into work but to rest for a day and get completely well, and how sorry she was about the bad <u>crabmeat</u>, so I couldnt imagine who would be calling. <div align=right>- exerpt from The Bell Jar by Sylvia Plath</div>
3. Adding images
Adding images, aligning images and wrapping text around images.
<img src="URL"> Adds the images at the URL specified
EXAMPLE ONE: Inserting an image
The HTML would look something like this:
<img src="http://images.neopets.com/creatives/neopets_88x31.gif">EXAMPLE TWO: Aligning an image and wrapping text
The HTML would look something like this:
<p><img src="http://images.neopets.com/items/codestone7.gif" align="left"> This is one of the images that you can use to link to the Neopets site. It is part of the Neopet referral program and when you collect the code and put it on your site the image doesn't just link to Neopets.com it has a special part including your username that tells the Neopets Team that you were the referrer allowing you to be rewarded with cool stuff.
4. Adding links
Adding text links, adding image links, making links open in a new window.
<a href="URL">LINKED TEXT</a> Creates a link to the specified URL.
EXAMPLE ONE: Inserting a text link
Click here to go to Neopets!The HTML would look something like this:
Click <a href="http://www.neopets.com">here</a> to go to Neopets!EXAMPLE TWO: Inserting an image link
The HTML would look something like this:
<a href="http://www.neopets.com"><img src="http://images.neopets.com/creatives/neopets_88x31.gif"></a>EXAMPLE THREE: Making links open in a new window
Click here to go to Neopets!The HTML Would look something like this:
Click <a href="http://www.neopets.com" target="newpage">here</a> to go to Neopets!
5. Horizontal Line
Adding and manipulating a horizontal line
<hr>
EXAMPLE ONE: Inserting a horizontal line
The HTML would look something like this:
<hr>EXAMPLE TWO: Changing the width of a horizontal line
The HTML would look something like this:
<hr width="50%">EXAMPLE THREE: Changing the size of a horizontal line
The HTML would look something like this:
<hr size="10">EXAMPLE FOUR: Changing the colour of a horizontal line
The HTML would look something like this:
<hr color="hotpink">
6. Scroll Boxes or Textareas
Textareas are a very good way to post code for banners. When you input the code for the banner into the textarea the banner doesn't display on your page the code displays.
NOTE: The difference between a scrollbox and a textarea is that one can be typed in (textarea) the other (scrollbox) cannot
EXAMPLE ONE: Inserting a scrollbox
The HTML would look something like this:
<ilayer name="box"><div id="box" style="width:210; height:100; overflow:auto; border: 1px solid red;"> Text to appear in scrollbox</div></ilayer>
EXAMPLE TWO: Inserting a textarea
The HTML would look something like this:
<textarea rows="3" cols="50">Text/code to appear in textarea</textarea>
7. Moving/scrolling Text
Moving or scrolling text is a good way to draw peoples' attention and can also be a good way to present news and updates with the credit scroll effect/direction
EXAMPLE ONE: Adding scrolling text
The HTML would look something like this:
<marquee>Scrolling/moving text</marquee>EXAMPLE TWO: Adding scrolling text
The HTML would look something like this:
<marquee direction="up" width="200" height="100" bgcolor="aliceblue"> Scrolling/moving text is a great way to display updates:<br>
<ul><li>Point one</li>
<li>Point two</li>
<li>Point three</li>
<li>Point four</li>
<li>Point five</li>
<li>Point six</li></ul></marquee>EXAMPLE THREE: Changing the speed
The HTML would look something like this:
<marquee scrollamount="1">Scrolling/moving text</marquee>
note: 1 is the slowest and 10 is too fast to read - experiment!
8. Adding a background
How to add either an image or a coloured background to your page.
EXAMPLE ONE: Adding a colour background
The HTML (for the whole page) would look something like this:
<body bgcolor="aliceblue>EXAMPLE TWO: Adding an image background
The HTML (for the whole page) would look something like this:
<body background="http://images.neopets.com/pets/80by80/pteri_red_happy.gif>
Three out of four people make up 75 per cent of the worlds population.
|
Page design by ladee_sarah | 
|
