Mid Term - Project X
Step 1 -- Home
Step 2 -- Main Tags
Step 3 -- Attributes
Step 4 -- External Css
Introduction
List of Main Tags
Introduction
Now we are on to making our website. Below me are the main tags to make objects in your website.
You have seen that with every tag, example <head> there is an ending tag example </head> .
However there are special exceptions. Don't freak out just yet, I will tell you them. For now, they are
rare and few. For now, look over them and get comfortable. These will stick with you till the end.
Main Tags
- <p> </p>
- This tag stands for paragraph. In here is your small section of text. Just anything you want to
type goes in here. Though once you end it, you must remember to also end your tags. Don't worry
that it is plain black text for right now. Later, in Step 3 we will add colors, size, and all the
fun things. Below is an example of a paragraph.
My name is Krysten!
<p>My name is Krysten!</p>
- <a> </a>
- This tag is similar to the <p> tag, however you can make links with this. The 'A'
stands for anchor. Add the ' href="" ' and you have yourself a link my friend. Below is
an example of the link. Don't forget to end the tag.
Yahoo!
<a href="http://www.yahoo.com">Yahoo!</a>
- <h1> </h1>
- This tag allows your text to be larger. It becomes a header. As you see it is called h1. These
headers range from h1, the largest, and h6, the smallest header. This also has an end tag.
Hello
Hello
<h1>Hello</h1> <h6>Hello</h6>
- <em> </em>
- This tag empasizes the text, or makes it into italics. Really nice to use when you want to get
your text across without making it larger than life. End this tag as well.
Hello
<em>Hello</em>
- <strong> </strong>
- This tag will really get our point across. It makes your words bold and stands our against the
small normal font of the other text. Works wonders when it is urgent, works just as well as
red text.
Hello
<strong>Hello</strong>
- <div> </div>
- Remember how <p> allowed you to change text, well this little tag will allow you to
change anything in this layer of pie. Think of it as the crust. You can add things to it, move
it all around without ever messing up your filling, or your other body text. By now you will
remember to close it, also, you will want to name these, just to remember what you put in them.
Hello
<div name="Greetings">Hello</div>
- <ol> </ol>
- Ahhh, now onto lists. Despite how much these little buggers can complicate things, lots of tags
just to make one list. They are fun, and just to let you in on a secret, I used lists to make
this website easier for you to understand. Don't you just love how it lines up? The ol stands
for ordered list, which allows for there to be numbers, or letters to mark the order of the list.
- Apples
- Bananas
<ol>
<li>Apples</li>
<li>Bananas</li>
</ol>
- <ul> </ul>
- Bet you got confused and wanted to hit me because I snuck in the <li>. Don't worry, we
will talk about that in one moment, but first let me explain the other main type of list. The ul
stands for unordered list, which means instead of numbers, little bullets appear giving you a
small list of things without order.
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
- <li> </li>
- Now we get down to the what <li> means. It stands for listed item. What item do you want
in either of your lists. You must end these as well. One <li> stands for one item, so if
you want 5 items you need 5 <li>. They go right between the tags of the type of list you
want. You begin the list naming which tyep you want, ol or ul and then you add your li for what
items you want in the list, then you finish the list by ending the tag of the type of list.
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
- <br />
- Now here is the tough one. It doesn't have an ending tag. A single tag allowing a break from one
line down to the next line. This will be your favorite, and most used tags. You won't remember
how you lived without it. Don't forget to place your paragraph tags around your text.
Hi my name is
Krysten
<p>Hi my name is <br />
Krysten </p>
- <img src="" />
- This is the last main tag I am going to show you. This also has no ending tag and allows the
designer to place up an image on their website. As you can see the img stands for image. Then it
is followed by a src="", which means the source of the image. If you have it in the same folder
as your page, simple place the name of your img inside the tag like so.
<img src="fox.jpg" />
Continue to Step 3 -- Attributes
Created by Krysten Allen, 02/24/2009