how to learning to html programming part 3
3) Lesson 7: Creating Lists
We've just about learned everything there is to know about text formatting, but there's still one very important thing that we have to learn: Lists.
Lists are everywhere. We post them on our refrigerators and take them to the grocery store. Lists are a very efficient way to organize information. Naturally, HTML has a few tags to help you make lists. HTML has not 1, not 2, but 3 different types of lists that you can add to your pages! They are the ordered, unordered, and definition lists.
Ordered lists are exactly what the name implies: lists that follow a numerical order. Ordered lists begin with the <OL> tag and end with a </OL> tag. When we want to put an item into this list, we need to put a <LI>, or list item tag before that item.
Here's an example of the ordered list syntax:
What do I need from the store today?<p>
<OL>
<LI>Bread
<LI>Cheese
<LI>Milk
<LI>Butter
</OL>
And heres how it looks to our viewers:
What do I need from the store today?
Bread
Cheese
Milk
Butter
Sure thing, but what if we do'nt want our list items to be numbered? That's when we use Unordered Lists. These are also called Bulleted Lists. Bulleted lists begin with the <UL> tag, and end with the </UL> tag. They look exactly like ordered lists, except the item numbers are replaced with special characters called bullets. Here's an example of how bulleted lists are used:
The Tutorial Underground is:<p>
<UL>
<LI>Cool!
<LI>Free!
<LI>Informative!
</UL>
And here's how it would look to Joe Browser (our viewer!):
The Tutorial Underground is:
Cool!
Free!
Informative!
Think that's cool? Try adding the TYPE attribute to the UL tag! With the TYPE attribute, we can change the type of bullet that we want to use! The TYPE attribute takes three arguments: "disc", "square" or "circle". So our new <UL> tag with a circle bullet would look like this: <UL TYPE="circle">. The TYPE attribute can also be used in the <OL> tag to change from numbers to letters (capital[TYPE="A"] or small[TYPE="a"]), or roman numerals (uppercase[TYPE="I"] or lowercase[TYPE="i"]). If we want to make an ordered list with uppercase roman numerals, it looks like this:
<OL TYPE="I">
The <LI> tag also has an attribute: VALUE. With the VALUE attrbute, we can change the value of a list item! Take a guess, what result would the following code result in:
<OL TYPE="A">
<LI VALUE="2">Think hard now!
</OL>
If you guessed "B. Think hard now!" you're right? Why? Check out the combination of the TYPE and VALUE attributes!
Heres a little trick: we can start an ordered list with any number (or letter, if we use TYPE) with the START attribute. It looks like this:
<OL START="3">
<LI>This is item number 3! </OL>
And to our viewers at home, it looks like this:
This is item number 3!
The last list that we can use is the Definition List. Definition lists are normally used when we need to define terms. The definition list starts with the <DL> tag and ends with the </DL> tag. Each term to be defined in a definition list uses the <DT> or Definition Term tag. Every definition in a definition list needs a <DD>, or I do'nt know what DD stands for :) tag in front of it. It probably looks alot like this:
<DL>
<DT>HTML <DD>Hypertext Markup Language
<DT>XML <DD>eXtensible Markup Language
</DL>
Our friend Joe Browser see's it like this:
HTML
Hypertext Markup Language
XML
eXtensible Markup Language
Note that you can create really cool effects if you use the formatting tags inside of lists. It's really neat when you have Bold terms and Italic definitions (in my opinion anyway)!
Great! Now we can list all our family members and their cats on our page! What's next? Click here for the next lesson!
Lesson 8: Adding Images to our Pages
Well, text is very important, but it can only take you so far. I'm sure that up until now, if anyone has seen your pages they're asking "Where are the pictures?". Yeah, I know Uncle Bob is dying to see the latest picture of you and the family on your website, so this lesson is about adding images to your pages.
Putting images on a web page is simple. It's probably even simpler than it was for you to get the certain image onto your computer! The <IMG>, or Image tag is used when we want an image on our web page. When we use <IMG>, we do'nt need to close it with a </IMG>. To tell the browser where to load this image from, we use the SRC, or source, attribute. It looks alot like this:
<IMG SRC="jussmall.gif">
And it loads on to the page, just like this:
Note that we can use relative linking just like with in the <A> tag, like SRC="../jussmall.gif" if the image was in the directory above the current one, or SRC="pictures/jussmall.gif" if the image was in the pictures directory.
Because some browsers do'nt load images, and some people turn them off, we need a way to show them what this image is. The solution? The ALT attribute! ALT is an optional (but highly recommended) attribute. When a browser does'nt load an image, or when they are turned off, the text in ALT will be shown instead. In our <IMG> tag it's used a little like this:
<IMG SRC="mypic.gif" ALT="Check this out - It's a picture of me!">
Need more control over your image's positioning? Try using the ALIGN attribute in it! The ALIGN attribute can be used to put an image in the left, right, middle, top, or bottom of a page. Is this more choices than you're used to? Let me explain. If we add ALIGN="top" to our <IMG> tag, the browser will align the top of our image to the top of the current line. ALIGN="bottom" aligns the image to the bottom of the current line, and ALIGN="middle" aligns our image to the middle of the current line. Aligning our image to the left or right aligns it to the left margin, or right margin of the page. Got it? Ok, here's a little pop quiz. What will the following code do?
<IMG SRC="myimg.jpg" ALT="My image!" ALIGN="left">
If you said it adds the image myimg.jpg to the current page with alternate text "My image" and left aligns it, you're wrong! Heh heh, just a joke, you're correct ;).
All right! The image looks great but...Hey! What's this border doing around my picture? Oh yeah! We forgot about the BORDER attribute!
The BORDER attribute takes a number as an argument. This number will be the width of the border around your image. Quick, how do we get rid of the border with the BORDER attribute? Easy, we just set <IMG SRC="myimg.gif" BORDER="0">!
Yuuup, we've got an image on the page. But wait: why does the browser wait to load the image before displaying the rest of the page? Well, the browser does'nt automatically know how big your image is. You can give it this information (and make your pages load faster!) with the WIDTH and HEIGHT attributes. We give to the WIDTH and HEIGHT attributes the width and height of our image in pixels. So it looks like this:
<IMG SRC="newimg.gif" ALT="A new image" HEIGHT=120 WIDTH=200>
Another benefit of specifying the WIDTH and HEIGHT in the <IMG> tag is that you can make sure that the proper space is left for your image, even if the viewer has images turned off.
Is the space around your image a little cramped? Try adding the HSPACE and VSPACE attributes to your <IMG> tag. These attributes add horizontal and vertical spacing around your image.
Want an image for the background of your page? Try adding the BACKGROUND attribute to the <BODY> tag. It's used a little like the SRC attribute to the <IMG> tag. Here's and example:
<BODY BACKGROUND="mybackground.gif">
This would take mybackground.gif, and tile it in the background of our page. Be warned though, use the wrong background image and your viewers may be straining to see your text!
Think you're an HTML wizard? Ok hotshot, how do we make images into clickable links? Easy...surround them with an anchor tag! For example:
<A HREF="lesson9.html">
<IMG SRC="nextlesson.gif">
</A>
Results in this (click on it!):
In this post if you are see in this post 📪 learning more html programming
Plze see next post
If you are learning to next html programming
And thanks for watchiwatching
Plze Watching next post
Share it this did not now about theses knowledge plze share to our friends and thANks
We've just about learned everything there is to know about text formatting, but there's still one very important thing that we have to learn: Lists.
Lists are everywhere. We post them on our refrigerators and take them to the grocery store. Lists are a very efficient way to organize information. Naturally, HTML has a few tags to help you make lists. HTML has not 1, not 2, but 3 different types of lists that you can add to your pages! They are the ordered, unordered, and definition lists.
Ordered lists are exactly what the name implies: lists that follow a numerical order. Ordered lists begin with the <OL> tag and end with a </OL> tag. When we want to put an item into this list, we need to put a <LI>, or list item tag before that item.
Here's an example of the ordered list syntax:
What do I need from the store today?<p>
<OL>
<LI>Bread
<LI>Cheese
<LI>Milk
<LI>Butter
</OL>
And heres how it looks to our viewers:
What do I need from the store today?
Bread
Cheese
Milk
Butter
Sure thing, but what if we do'nt want our list items to be numbered? That's when we use Unordered Lists. These are also called Bulleted Lists. Bulleted lists begin with the <UL> tag, and end with the </UL> tag. They look exactly like ordered lists, except the item numbers are replaced with special characters called bullets. Here's an example of how bulleted lists are used:
The Tutorial Underground is:<p>
<UL>
<LI>Cool!
<LI>Free!
<LI>Informative!
</UL>
And here's how it would look to Joe Browser (our viewer!):
The Tutorial Underground is:
Cool!
Free!
Informative!
Think that's cool? Try adding the TYPE attribute to the UL tag! With the TYPE attribute, we can change the type of bullet that we want to use! The TYPE attribute takes three arguments: "disc", "square" or "circle". So our new <UL> tag with a circle bullet would look like this: <UL TYPE="circle">. The TYPE attribute can also be used in the <OL> tag to change from numbers to letters (capital[TYPE="A"] or small[TYPE="a"]), or roman numerals (uppercase[TYPE="I"] or lowercase[TYPE="i"]). If we want to make an ordered list with uppercase roman numerals, it looks like this:
<OL TYPE="I">
The <LI> tag also has an attribute: VALUE. With the VALUE attrbute, we can change the value of a list item! Take a guess, what result would the following code result in:
<OL TYPE="A">
<LI VALUE="2">Think hard now!
</OL>
If you guessed "B. Think hard now!" you're right? Why? Check out the combination of the TYPE and VALUE attributes!
Heres a little trick: we can start an ordered list with any number (or letter, if we use TYPE) with the START attribute. It looks like this:
<OL START="3">
<LI>This is item number 3! </OL>
And to our viewers at home, it looks like this:
This is item number 3!
The last list that we can use is the Definition List. Definition lists are normally used when we need to define terms. The definition list starts with the <DL> tag and ends with the </DL> tag. Each term to be defined in a definition list uses the <DT> or Definition Term tag. Every definition in a definition list needs a <DD>, or I do'nt know what DD stands for :) tag in front of it. It probably looks alot like this:
<DL>
<DT>HTML <DD>Hypertext Markup Language
<DT>XML <DD>eXtensible Markup Language
</DL>
Our friend Joe Browser see's it like this:
HTML
Hypertext Markup Language
XML
eXtensible Markup Language
Note that you can create really cool effects if you use the formatting tags inside of lists. It's really neat when you have Bold terms and Italic definitions (in my opinion anyway)!
Great! Now we can list all our family members and their cats on our page! What's next? Click here for the next lesson!
Lesson 8: Adding Images to our Pages
Well, text is very important, but it can only take you so far. I'm sure that up until now, if anyone has seen your pages they're asking "Where are the pictures?". Yeah, I know Uncle Bob is dying to see the latest picture of you and the family on your website, so this lesson is about adding images to your pages.
Putting images on a web page is simple. It's probably even simpler than it was for you to get the certain image onto your computer! The <IMG>, or Image tag is used when we want an image on our web page. When we use <IMG>, we do'nt need to close it with a </IMG>. To tell the browser where to load this image from, we use the SRC, or source, attribute. It looks alot like this:
<IMG SRC="jussmall.gif">
And it loads on to the page, just like this:
Note that we can use relative linking just like with in the <A> tag, like SRC="../jussmall.gif" if the image was in the directory above the current one, or SRC="pictures/jussmall.gif" if the image was in the pictures directory.
Because some browsers do'nt load images, and some people turn them off, we need a way to show them what this image is. The solution? The ALT attribute! ALT is an optional (but highly recommended) attribute. When a browser does'nt load an image, or when they are turned off, the text in ALT will be shown instead. In our <IMG> tag it's used a little like this:
<IMG SRC="mypic.gif" ALT="Check this out - It's a picture of me!">
Need more control over your image's positioning? Try using the ALIGN attribute in it! The ALIGN attribute can be used to put an image in the left, right, middle, top, or bottom of a page. Is this more choices than you're used to? Let me explain. If we add ALIGN="top" to our <IMG> tag, the browser will align the top of our image to the top of the current line. ALIGN="bottom" aligns the image to the bottom of the current line, and ALIGN="middle" aligns our image to the middle of the current line. Aligning our image to the left or right aligns it to the left margin, or right margin of the page. Got it? Ok, here's a little pop quiz. What will the following code do?
<IMG SRC="myimg.jpg" ALT="My image!" ALIGN="left">
If you said it adds the image myimg.jpg to the current page with alternate text "My image" and left aligns it, you're wrong! Heh heh, just a joke, you're correct ;).
All right! The image looks great but...Hey! What's this border doing around my picture? Oh yeah! We forgot about the BORDER attribute!
The BORDER attribute takes a number as an argument. This number will be the width of the border around your image. Quick, how do we get rid of the border with the BORDER attribute? Easy, we just set <IMG SRC="myimg.gif" BORDER="0">!
Yuuup, we've got an image on the page. But wait: why does the browser wait to load the image before displaying the rest of the page? Well, the browser does'nt automatically know how big your image is. You can give it this information (and make your pages load faster!) with the WIDTH and HEIGHT attributes. We give to the WIDTH and HEIGHT attributes the width and height of our image in pixels. So it looks like this:
<IMG SRC="newimg.gif" ALT="A new image" HEIGHT=120 WIDTH=200>
Another benefit of specifying the WIDTH and HEIGHT in the <IMG> tag is that you can make sure that the proper space is left for your image, even if the viewer has images turned off.
Is the space around your image a little cramped? Try adding the HSPACE and VSPACE attributes to your <IMG> tag. These attributes add horizontal and vertical spacing around your image.
Want an image for the background of your page? Try adding the BACKGROUND attribute to the <BODY> tag. It's used a little like the SRC attribute to the <IMG> tag. Here's and example:
<BODY BACKGROUND="mybackground.gif">
This would take mybackground.gif, and tile it in the background of our page. Be warned though, use the wrong background image and your viewers may be straining to see your text!
Think you're an HTML wizard? Ok hotshot, how do we make images into clickable links? Easy...surround them with an anchor tag! For example:
<A HREF="lesson9.html">
<IMG SRC="nextlesson.gif">
</A>
Results in this (click on it!):
In this post if you are see in this post 📪 learning more html programming
Plze see next post
If you are learning to next html programming
And thanks for watchiwatching
Plze Watching next post
Share it this did not now about theses knowledge plze share to our friends and thANks
Comments
Post a Comment