Site icon Sir Codex

Beginners’ HTML – Part 3

Sir Codex
Welcome to Part 3 of the tutorial! At the end of Part 2, I left you with a challenge. So let’s first explore the solution.
Challenge Solution

The challenge I set last week was for you to add some links to the pages we’d created, so that users could navigate easily between our 3 pages. We had three pages – the main page, the links page and the pictures page.

On the main page, you should have added some code that looks something like this:

  Favorite Links 
  
 
  Pictures

On the links page, you should have something similar to:

  Main Page 
  
 
  Main Page 
  
 
  Favorite Links

So now, if you load any one of these pages into your browser, you’ll see that you (and your visitors!) can easily move between the pages.

Tables

Everything you read has structure to it, from that boring shopping list in your pocket, to the latest magazine on your desk. Just like these items, HTML pages should have a structure. I’m sure you could manage to construct a shopping list without too much trouble, but how about a magazine? If we use HTML in the way its original creators intended, the amazing, graphics-intensive sites we see today wouldn’t be possible – all we’d be able to produce would be plain, dull pages.

Tables make up the basic layout of almost every Web page in existence today. On the main page of SitePoint.com, I counted 34 separate tables, all embedded within each other. This shows just how important tables are to both the design and the content elements of a Web page.

To create a table, you will need to use the

tag, along with its corresponding
tag. There are a number of optional attributes you can specify in the tag but these are not necessary (yet!).

Once you have the

tag in place, the next tag you need is the tag. The tag creates a table row, which can contain one or more cells (or columns) of information. To create these individual cells, which can contain almost any other HTML element, you can use the
tag. You can make as many cells as you want, but each row of the table should have the same number of cells as all the others. So let’s take a look at a basic table: 
 
   
     
     
     
   
   
     
     
     
   
   
     
     
     
  
 
      Name 
     
      E-Mail Address 
           
      Phone Number 
    
 
      Joe Bloggs 
       
      joe.bloggs@hotmail.com 
     
      555 1234 
    
 
      John Smith 
     
      john.smith@yahoo.com 
     
      555 4321 
    

Now, I know that looks confusing, so let’s go through it section by section. First, we have the

tag, which is followed by 3 seperate table rows. Let’s take a closer look at one of these rows: 
  
             

First we have the

tag, which starts the new row. We then have a tag, which ends the table cell, ready for another one. Then there are two more cells, followed by the end of the row.

That example will produce a table like this:

     Name          E-Mail Address          Phone Number    
tag, which starts a new cell within that row. In this cell can be anything at all, but in this case it contains a bolded title, “Name”. This is followed by the closing
Name E-Mail Address Phone Number
Joe Bloggs joe.bloggs@hotmail.com 555 1234
John Smith john.smith@yahoo.com 555 4321

As you can see, it has 3 rows and 3 columns (or cells) in each row.

Table Size

By default, a table will be just large enough for the elements it contains to fit within it, but no bigger or smaller. You can change this default using various ‘height’ and ‘width’ attributes. You can specify a height or width either in pixels, or in percentage of the browser window. For example:

  • will create a table of height 500 and width 247
    • will create a table that’s as wide as the screen, but only as high as it needs to be to contain the elements it holds

    Now here’s a challenge for you. Add another row to the example table we looked at above, listing another made-up person’s contact details. The answer is on the next page.

    Tables Challenge Solution

    Your new table (with one more row) should look something like this:

                                                                                                         
           Name              E-Mail Address              Phone Number      
           Joe Bloggs              joe.bloggs@hotmail.com              555 1234      
           John Smith              john.smith@yahoo.com              555 4321      
           James Bond              jamesbond@yahoo.com              857 4630    

    If it doesn’t look like that, then go back to the previous page and look at the example of a single row again, then try to add another row. If you got it right, then well done!

    Tables can include practically any other HTML tag or element, for example, images or links. Let’s take a look at another example – a price list of a shop that sells chairs.

      
    
    Chairs  
    
    
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
    
      
          Title  
          
          Picture  
          
          Price  
        
      
          Small Chair  
          
          small chair  
          
          $39.99  
        
      
          Large Chair  
          
            
          
           $99.99  
        
      
    

    For some practice, take a look at that code and see if you can work out how many rows it has, and how many cells there are within each row. Once you’ve done that, read on…

    Again, there are 3 rows (the header row, then one for the small chair and one for the large chair), and 3 cells (name, picture and price) in each. For one last practice, try to add an extra cell in each row into that table for the size of the chair. Remember, you need to add the right tags in each row, otherwise it won’t work.

    The completed table should look something like this:

      
    
    Chairs  
    
    
      
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
    
      
          Title  
          
         Picture  
          
          Price  
          
          Size  
        
      
          Small Chair  
          
            
          
          $39.99  
          
          2 feet  
        
      
          Large Chair  
          
            
          
          $99.99  
          
          4 feet  
        
      
    
    Reader Feedback

    Just as I was getting ready to finish the tutorial, I got an email from Marie, who had read the earlier parts of the tutorial and had a question regarding the tag. She wanted to know where she could find a chart or list of commonly used hexadecimal color codes. To clarify that, you might remember that font colors usually use a sequence of numbers and letters, eg: would represent black.

    While you can use names like “red” or “blue” for common colors, for different colors or shades you need to use these color codes. I’ve had a look around for a chart or diagram, and the best I could find was this one. I hope that helps to answer your question Marie!

    Where to now?

    Now that you have a basic understanding of HTML and the concepts that surround it, it’s time to expand on that knowledge a little. There are plenty of aspects you can learn about – to do that, I recommend you take a look at Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days, by Laura Lemay.

    Or you could learn about some other languages that help make the Web what it is. Try some tutorials on server-side languages, which give you more power and flexibility than HTML could ever give, and probably more than you imagine possible:

    You could also take a look at a client-side language, which allows you to create various clever and useful effects in the visitor’s browser:

    This section now concludes the series – I hope it has been beneficial to you and that you’ve picked up plenty of HTML along the way. As you’ve probably guessed, there’s a lot still to learn, but this tutorial should provide you with the basic knowledge and understanding required to go further. Please visit the SitePoint Community Forums with any questions, or feel free to email me with any comments or suggestions you might have.

    Source Link: http://www.sitepoint.com/beginners-html-3/