Introduction to HTML and CSS Part 2

Welcome back!

Last time we covered a lot of information about HTML. It was very basic information and really sets the standard for what we are going to do today. Today we are going to learn some more about HTML. Become more in depth and more aware of how a HTML document really works.

So let’s go ahead and get started. We will analyze your <meta> tag first and some of the information that is within it that is rather important.

The <meta> tag goes within your <head> tag above your <title> tag. Wfithin in it is the information that web crawlers use to determine what to display when a keyword that applies to your webpage is searched for. It’s one of the ways you are ranked in search engines (That is however apart of SEO or Search Engine Optimization, and I don’t cover that in this tutorial) it also contains this”

<meta charset=”UTF-8″>

“What is UTF-8?” I’m sure you’re asking yourself that right now. Let me break it down for you:

UTF stands for UCS Transformation Format 8-bit, this encoding format represents all Unicode characters. (In the near future look for UTF-16 which shows support for non-Roman alphabets such as Arabic, Japanese Ideographs and Korean Ideographs to name a few)

Moving on to some code for the day’s lesson. We are going to look at Headings, Block quote, Horizontal Rule, And Lists. So let’s go ahead and get started with headings.

You can chance the way headings are shown within your page. It’s quite simple actually all you have to do is throw in <h1> and boom! It’s larger! Usually <h1> is the largest of all the tags and it goes all the way to <h6> which is the smallest.

html21

As you can see in the above image I have ordered the <h1>  tag within <body> tag. You don’t have to put these in order nor do you have to use all of these at the same time. I was just showing what each one looked like within the editor.

Next is Block Quotes. Block Quotes allow us to make quotations in a document.

html22

The arrow is the above image is what a block quote is supposed to look like when it is used in a HTML document. Don’t forget to always close your tags.

Horizontal rules are the next item. A horizontal rule is a straight line through a document. We call these rules on the page. It would look like the following:

html23

But there is more with this <hr> tag. You can throw some cool styling stuff right next to it. It would look like this:

<hr width=”45% size=”3″ align=”left” noshade=”noshade”>

The image below shows the <h1> tags the <blockquote> and the <hr> tag:

html24

The next and final part is a bit tricky and takes a lot of time getting used too. Lists. There quite a few different types of lists they are:

  • Numbered Lists
  • Bulleted Lists
  • Definition Lists

To break that down further there are two kinds of list categories:

  • Ordered Lists
  • Unordered Lists

So let’s take a look at each set of lists. First we will start with Numbered Lists there are three parts to this list:

  • Ordered list element <ol> this makes it a numbered list
  • List item elements <li> this marks each item

So let’s take a look at how this is set up:

html25

So as you can tell by the above image that <ol> starts the list and every time you wish to add a list item you put it between the <li></li> tags.

The next kind of list is a bulleted list.

You use the <ul> which is unordered list item to start it after that you would use the <li> tag. It would look like something below:

html26

As always make sure that you close your tags after you are finished with them.

The final list item is Definition Lists <dl> holds the definitions (dl=Definitions List). <dt> defines a term in list (DT=Definition term). <dd> defines a definition for a term (DD=Definition list definition)

You start it with <dl> and end with it </dl> as in the following image it shows you how to properly use the <dl> tag:

html27

Save it all up and open it up in your browser and you should see the following:

html28

1) Numbered List

2) Bulleted List

3) Definition List

The last and final thing about lists to know is how to Nest lists. All you have to do is include the list with in your document as follows:

html29

This is what it will look like in your browser:

html30

So as you can see it really does look really nicely done!

That’s it for today’s lesson more will be covered in my next tutorial!

If you have any questions please feel free to ask away!

Looking for quality phpBB Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Keith Pottratz

Keith Pottratz

Hello My Name is Keith Pottratz. I have been working with computers for over a decade. It's my personal hobby something that I love and enjoy doing. I went to school for Computer Science, and have spent many years self teaching my self various things. I have ton's of experience in HTML,CSS, PHPBB,CPanel,CMS software, blogging software and various other systems and enviroments. My favorite thing to do though is backend developing. I find it to be a growing and ever evolving beast and I love learning about it. I look forward to giving as much knowledge as I can and help.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 × 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>