Captions

The caption tag allows you to specify sayings for your platforms. This is not an feature of the desk tag; it’s a separate factor used after the desk tag, but before the first desk row. Here is the first part of the desk markup:
<table border="3" align="right" bgcolor="#999">
<caption>This is a "cat's game" of tic-tac-toe.</caption>
<tr>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>

Opening and ending caption labels encompass the real textual content you want to screen as a caption for the desk. By standard, the caption is arranged at the top-center of the desk. Two CSS qualities are useful in modifying the caption alignment:

text-align Use this to modify whether the textual content is arranged eventually left, right, or middle on whatever part it is placed.
caption-side Use this to specify on which part the caption should be placed (top, right, base, or left).

With those qualities in thoughts, can you determine how to arrange a caption along the base of a desk, and then set the textual content to be right-aligned along that edge? reveals a visible example:
                                 

and the following code provides the answer.

caption {text-align: right; caption-side: bottom;}

TIP

You can also use extra style qualities to sketch more interest to a caption, such as creating it strong or different colours.

Background Images

The background-image residence can be included to your design piece to utilize an picture to the whole desk qualifications. The background-image residence performs the same when used to a desk as it does used to other website things. This means it instantly do it again from eventually left to right, top to base. However, you can use the other qualifications qualities mentioned in Part 6 (such as background-repeat and background-attachment) to modify the saying alternatives if preferred.
Adding a qualifications picture is one way you could obtain a uneven or designed desk qualifications, as shown:
                                    

This only requires a small repeating image, such as the following:

                                                        

and a bit of code added to your style sheet:

table {background-image: url('images/stripes.gif');}

Colors

To change the qualifications shade of an whole desk, you can add the qualifications shade property to your design piece, using the desk tag as the selector. The following example reveals how this might look in an inner design piece, say the desk you are style is the only desk on the site.
table {background-color: #999;}

                                   
But what if you did have several tables on your page? Be aware that using the preceding code would cause all tables on the page to be rendered with the same background color. To create specific styles for each table on a page that included multiple tables, you might use classes:
.table1 {background-color: #999;}
.table2 {background-color: #333;}

Then, you would referrals the category name (without the period) from the starting desk tag, as in

<table class="table1">
Depending on which technique makes the desk, the qualifications shade you specify may or may not appear within the region. Analyze your webpages in several surfers to be sure.

Basic Alignment

As mentioned in the past part on pictures, you can use the flow residence to cause a desk to be arranged to the right or eventually left of any around textual content. If only one desk prevails on the site, you can even use the desk tag as your selector, like that provided next:

table {float: right;}
The following representation reveals our tic-tac-toe desk arranged to the right of the screen, with textual content streaming around it on the eventually left. The finish resource of the site is also right here to give you a better idea how the design piece impacts the desk design.
<tr>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td>XXX</td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
</tr>
<tr>
<td>XXX</td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td>XXX</td>
</tr>
</table>
</head>
<body>
<table>
<tr>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
</tr>
<tr>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
</tr>
<tr>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
<td><img src="images/o.gif" alt="O" width="19" height="19" /></td>
<td><img src="images/x.gif" alt="X" width="19" height="19" /></td>
</tr>
</table>
<h1>Tic-Tac-Toe</h1>
<p>There are many places online where you can play tic-tac-toe, either
by yourself or with other Web users. Visit <a href="http://dir.yahoo.
com/Recreation/Games/Puzzles/Tic_Tac_Toe/">Yahoo Games</a> for a list
of some hot tic-tac-toe games.</p>
<p>A game like this one, in which no one wins, is often called a cat's
game. There are many theories as to why it is called that, but my
personal favorite is this: In many other games it is called a scratch
game when no one wins. Since cats scratch, you can see where the
phrase "cat's game" might have originated.</p>
</body>
</html>

                                  

Width and Height

When I first presented platforms, I described preparing out the dimension your platforms beforehand. This is particularly essential if the desk you are developing needs to fit within a established quantity of area on your web page. In “the old times,” we used top and dimension features in the desk tag to specify the preferred measurements for platforms. While that exercise is looked down upon by the W3C now, you can still obtain the same outcomes by including the top and dimension qualities to your design piece. If you never specify them in your value, the technique selects the dimension depending on the quantity of articles within each cellular and the quantity of available area in the screen.
Let’s say I want to involve that tic-tac-toe activity in my website, but I only had an available area on my web page that calculated 200 p large by 200 p high. Because platforms often “grow” according to the quantity of articles in them, I might want to control the top and dimension my desk, to prevent it increasing out of that 200 × 200–pixel area I specific for it. I could do so by specifying the measurements in my design piece. Offered there was only one desk tag on my web page, I could even use desk as my selector.
table {width: 200px; height: 200px; border: 3px solid black;}

In this case, I would specify an overall dimension for my desk, one that must not change if the technique screen were bigger or lesser.
                                    

Cell Padding and Spacing

When the region are noticeable for a desk, it’s simpler to see how much area is around the articles and in between the tissues. Two features can be included to the desk tag, so that you can management those kinds of areas.

cellpadding Space between the articles within the cellular and the sides of that cell


cellspacing Space in between each of the person cells

First, cellpadding impacts the quantity of area between the articles and the side of the cellular. When the region are noticeable, improving the cellular cushioning can provide additional shield area around the textual content, so that it does not run into the region.
Second, cellspacing impacts the quantity of area between each of the tissues in the desk. While not situated in the real tissues, this area can be improved to allow for a rain gutter between several tissues, just like the empty area between content in a paper.
The principles for both of these features should be indicated in p, as a whole variety higher than 0. A value of 0, in impact, changes off the cellular cushioning or cellular space, producing the tissues to buttocks up against one another.

The following representation reveals two illustrations of different cellpadding and cellspacing principles.
         
In the first desk, the boundary is 5 p large, the cellpadding is 15 p large, and the cellspacing is 5 p large. This makes a rather large shield location around the cellular articles, but a bit of space in between each of the tissues.
<table border="5" cellpadding="15" cellspacing="5">
When those principles are changed in the second desk, so the cellpadding is 5 p large and the cellspacing is 15 p large, the area between the tissues is improved while the area around the textual content in each cellular is decreased.
<table border="5" cellpadding="5" cellspacing="15">

The rules Attribute

The guidelines feature can be used to specify those inner region of a desk that should be shown. As with the shape feature, this feature only works if you have specified a boundary dimension higher than zero. When the guidelines feature and the boundary feature are both specified, the guidelines feature requires priority in surfers that assistance it.
            


Several possible principles are available for the guidelines features, as detailed in Table:

                 


The following representation reveals how the technique reveals the tic-tac-toe desk when the guidelines are set to “none” and the shape is set to “box” (with a boundary dimension 3).
                                             

The frame Attribute

The shape feature identifies which of the exterior region around the desk will be shown. Several possible principles are available for this feature, as described in Table:
                      

You can use this feature many periods in 1 desk, so you could, for example, convert on only the top and left-hand part region. The value to do this might look like the following:
                          

The border Attribute

Even if you eventually want your desk region to be unseen, an excellent way to see how your desk is forming up while you are developing it is to convert on all the desk region momentarily. You can do so by including the boundary feature to the desk tag and specifying a whole variety higher than zero.

<table border="3">
Changing the boundary dimension to “3” for my tic-tac-toe desk allows you see more clearly where each cellular starts and stops because it changes on all the inner and exterior region. The bigger the variety you specify, the wider the region become.
                                       

Borders

Tables, by characteristics of their style, have inner and exterior region. By standard, most surfers set the boundary dimension to zero, making them unseen. However, region can be quite useful for platforms of record information, for example, where it’s necessary to see the content to comprehend the information better. The key is knowing the three features relevant to the use of these region.

Formatting Tables

You may have discovered by now that all the textual content in a desk seems to be arranged to the eventually left part of each cellular. This, and many other functions of a desk, can be quickly personalized with a few desk functions or a design piece.

 Borders

 Width and Height

 Basic Alignment

 Colors

 Background Images

 Captions

Cell Content

You can involve nearly any form of articles in a desk cellular that you might involve elsewhere on a website. This articles should be entered in between the buying and selling td labels for the appropriate cellular. All labels used to structure that articles should also be provided between the td labels.
TIP
Want to involve a clear cellular with no content? Kind the value for a nonbreaking area (&nbsp;) between the buying and selling td labels, and your cellular will appear clear. If you have a lot of clear tissues, you could add empty-cells: show; to the design announcement for your desk tag.
If we come back to our tic-tac-toe activity, the following is the markup for that desk.
<table>
<tr>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
</table>

If you were to make a primary HTML web page with this value, preserve it, and review it in your technique, you would see something like the following:
                                              
By standard, the dimension each cellular is only as huge or as little as the articles of the cellular. If you entered three Xs or Os in each cellular and included a phrase in the middle cellular, the desk would modify to look like that proven next:
                                                     
After a certain number of character types, the technique may place the articles. This means it prevents publishing on that range and carries on on the next range. This usually does not happen until the table operates up against another factor within the page or visits the side of the window. The standard point at which the articles parcels differs according to the technique.

Table Structure

You need to know about four basic table tags, as described next:
          

With these tags in mind, you can create both basic and complex table structures according to your needs. Say you want to create a basic table structure, such as the following:

                   

Your value might look like that proven next:

<table>
<tr>
<th>Popular Girls’ Names</th>
<th>Popular Boys’ Names</th>
</tr>
<tr>
<td>Emily</td>
<td>Jacob</td>
</tr>
<tr>
<td>Sarah</td>
<td>Michael</td>
</tr>
</table> 

Opening and ending desk labels encompass the entire area of code. This informs the technique that everything inside these labels is supposed to be in the desk. And there are buying and selling tr labels for each row in the desk. These encompass td or th labels, which, in turn, contain the actual content to be shown by the technique.

 

Create a Basic Table Structure

First, choose how huge you want your desk, or in this situation, how huge you want your tic-tactoe activity. Keep in mind, p are the systems of evaluate on the screen; ins or ins will not get you far in HTML. In the starting, it’ll probably be useful for you to create out your measurements on your paintings. Do not fear, though. Nothing you are doing now is set in rock. You are going to be able to create changes later as required.

                                                
After preparing out the size of the desk, it’s a chance to get began operating on the desk framework in HTML.

Understand the Concept and Uses of Tables

Even though you might not identify the language, you have certainly seen platforms in other printed or digital records. Actually, throughout the course of this guide, I’ve used platforms to give purchase to certain areas that might otherwise be complicated. Quite simply, a desk is a area of details, damaged up into content and/or lines of prevents, known as tissues.

Those of you who use Microsoft Word may be familiar with a menu item in that program called Table that enables you to create tables just like those used in web pages. Microsoft’s word processor isn’t the only one with tables. Most word processors are capable of letting you format content in tables.

TIP

When considering whether or not to use a desk in a website, first think of how you would provide that same details in a conventional term handling system. If you would use a desk in the phrase brand, you likely should use one in your website as well. If not, consider another technique of introducing that details in your website.

Another way of a desk, either printed or electronic, is the worksheet. Along these collections, you might think about a desk as a huge item of collections papers, where you get to choose the dimension the tissues that will carry the details.

To make choices about how big or small your tissues and desk should be, you need to do a little preparing. Even though HTML platforms are designed in electronic records, the best way to strategy out platforms is to use a pad and papers when you are first studying. As you become more acquainted with the framework of a desk, you may be able to strategy it in your go without first illustrating it.

Let’s first consider what a desk would look like for a easy tic-tac-toe activity.

1. Sketch a huge box on your sheet of papers.

2. Split that box into three content and three collections.

3. Place an X or an O in each of the bins, departing no bins clear.

Following these actions will probably get you certificates with a illustrating just like my own.

                                                 

Now, think about you want to change this tic-tac-toe activity into a website. How would you do that? You have already discovered that in HTML, you cannot basically tab over to the next pillar and kind an X as you might in a worksheet program. You can, however, use a desk to lay out the tic-tac-toe game’s framework.

Using Tables

At this point in the guide, you have made it through many of the primary labels used to make websites. The next few sections deal with content that can seem a bit more complex than what you just discovered. Do not fear, though, because even the advantages battle with these principles when they first start.

Horizontal Navigation

What if you desired to screen the routing bar side across the site instead of top to bottom down the page? The reason details run down the site by standard is that they are block-level components in HTML.

As above described, block-level components instantly complete the available space.

With that in mind, we can easily create a record screen side by specifying it should be shown as an inline factor instead of a block-level factor with display: inline. Following figure reveals a very basic unordered record, with a style piece used to turn it into a horizontally routing bar.
                      
The list code looks like the following:
<ul id="navlist">
<li class="active">Home</li>
<li><a title="LINK: About Us" href="aboutus.html">About Us</a></li>
<li><a title="LINK: Services" href="services.html">Services</a></li>
<li><a title="LINK: Clients" href="clients.html">Clients</a></li>
<li><a title="LINK: Contact Us" href="contactus.html">Contactus</a></
li>
</ul>

And the style sheet looks like that shown next:
                 

Vertical Navigation

Probably the most typical purpose for enjoying with the structure of a record is to use it as a routing bar. Consider the routing bar proven in below determine. It certainly does not look like:
                                      

a list; in fact, it looks more like a lot of visual control buttons. There are region splitting the hyperlinks, and the colours even change when you shift your rabbit over the hyperlinks.

The real HTML value used to make that record is proven next:
            
Observe how the HTML for the record looks the same as the details formerly designed in the starting of this part. Actually, every bit of the design is obtained through the design piece, which looks like this:
          

Customize the Entire Layout

What if you desired to absolutely modify the structure of your record so that it no more seemed like the common record with principal points and indentations? In the last, website writers have used platforms (such as those designed in term handling applications or spreadsheets) to carry each “item” in an infrequent record. But design linens provide an often neglected technique of quickly modifying the structure of a record, whether that indicates simply eliminating the principal points and indents or going so far as to swap the whole thing from straight to horizontally.

Customize the Spacing

As you know, the HTML record labels indent each record product by standard. Unfortunately, the actual quantity of that indent does differ a bit according to the technique. Fortunately, there are CSS qualities for changing the indent. Two qualities side and cushioning in particular impact the place around each product in your record, and around the record in common.

When connected to the ul or ol tag, the side home impacts the place around the entire record. But when it is used with the li tag instead, the side home varies the place around each individual record product.

The cushioning home requires the quantity of buffer-space around the textual content in the record product, before the side of the record product is achieved. Take a look at the following designs to help picture how this works (first, I’ll show you a visible manifestation of a record with some extra place, then the value used to make that example).
                                  
                                
It is worth noting that whenever you change the space around your details and list items, you must analyze your pages in Online Traveler and another standards-compliant internet browser like Chrome or Opera. Unfortunately, Online Traveler 6 and 7 have had trouble properly showing details with changed space. IE 8 guarantees to fix this situation, but until the majority of your website visitors no longer use IE 6 or 7, you are going to need to value and analyze for both surfers.

Customize the Bullets

Change the Principal points For example, think you desired to make a record on a website in which each product was beat by an picture of a celebrity. You could add an picture tag to the starting of each product in a description record to obtain this kind of thing, such as with the following code:
<dd><img src="star.gif" width="12" height="12" alt="star">The World
Wide Web Consortium was created in 1994</dd>


But what if you had 20 products in your list? Including that lengthy img tag to every record product would be boring. A more effective substitute is to swap to an unordered record (one with principal points, by default) and use a design piece in the headlines of your web page to modify the frequent topic to the picture of your option.

The following value and representation display how this might work:
<style type="text/css">
li {list-style-image: url(star.gif);}
</style>

                       

TIP
For the best outcomes, select pictures that are about the same top as the textual content in each record product.

Style Lists

While there is no design piece home for actually developing information which is still done with HTML, as you just acquired there are three qualities that can be particularly useful in design information. Below desk provides information. Observe that all three qualities can only be used to structure information, and no other HTML components. Lastly, each home is acknowledged only by the most latest editions of the well-known surfers.
        

Combine and Nest Two or More Types of Lists

You can also use another record within itself or even one form of record within another form of record. Everytime you use a record within another record, you are nesting details. Perhaps the best example for stacked details is an summarize like those designed for a school assignment.

I. Introduction
II. Aspect 1
A. Description
B. Examples
1. Referrals One
2. Referrals Two
III. Aspect 2
IV. Summary
                                                

Can you think about what the HTML value would look like for the before outline? The best remedy would be to use a sequence of stacked requested details as proven in the following representation and value.
<ol type="I">
<li>Introduction</li>
<li>Part I
<ol type="A">
<li>Description</li>
<li>Examples
<ol type="1">
<li>Reference One</li>
<li>Reference Two</li>
</ol>
</li>
</ol>
</li>
<li>Part 2</li>
<li>Summary</li>
</ol>

As I described before, you can also nesting one form of record within another kind. For example, you could involve a bulleted record in the information record to give further explanation to a information description. Look at the following representation and value to see what I mean.
<dl>
<dt><b>Morning</b></dt>
<dd>Corinna wakes up around 7:00.</dd>
<dd>Change her diaper and dress her.</dd>
<dd>Feed her breakfast. Some of her favorites are:
<ul>
<li>Waffles</li>
<li>Oatmeal</li>
<li>Cereal</li>
<li>Fruit</li>
</ul>
</dd>
</dl>

Use Definition Lists

The third form of record you can make in HTML is known as a description record. As its name indicates, you might use a description record to demonstrate conditions and their descriptions. For example, in the following record, the phrase is detailed on the first range, and then the description is on the range below the phrase.

W3C
The Community Large Web Range was designed in 1994 to create requirements and methods for the Community Large Web.

HTML
Hypertext Markup Terminology is the publishing language used to make records for the Community Large Web.
A description record performs just like this one, where you use HTML labels to recognize the conditions and descriptions for each of the record products.
                                
The code to create the page shown in the preceding illustration looks like this:
<dl>
<dt>W3C</dt>
<dd>The World Wide Web Consortium was created in 1994 to develop
standards and protocols for the World Wide Web.</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language is the authoring language used to
create documents for the World Wide Web.</dd>
</dl>

You can use more than one dd for each dt if you need to; the technique will just basically indent each range below the dt.

Use Unordered Lists

The second form of record is just like the first, except unordered details never use statistics or characters. As the name indicates, unordered details never depend on purchase for significance. These details use principal points to come before each record product. The following is an example of an unordered list:

Red
Green
Blue
 You still use the li tag to recognize each product in the record, but instead of starting with the ol tag, unordered details start with the ul tag.
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>


Aside from that, the value used to make the first two kinds of details is almost similar. Actually, you can even use the kind feature here to modify the design of the principal points. Three possible alternatives are available for topic style:

disc Usually shown as a little, filled-in circle


circle Usually shown as an start circle


square Usually shown as an start (Mac) or filled-in (Windows) square
Initially, all unordered details standard to the dvd design, which is usually showed as a little, loaded in range. However, if you nesting unordered details that is, if you involve an
unordered record in another unordered record the standard value changes.

Use Ordered Lists

An requested record is one in which each product is beat by a variety or mail. For example:
My preferred fruit are

raspberries
strawberries
apples
If you want to make the past record on a website, you should use an requested record. Here is what the HTML value would look like:

Observe I do not include any statistics in my record. This is because I used the ol tag to tell the technique this is an requested record. When surfers see requested details, they know to place a number in front of each record product.
                                    
The standard form of requested list uses Persia statistics, but you can use the kind feature to modify that. This desk determines the different types of requested details you can make with the kind attribute:
               
To modify the form of requested record, add the kind feature and its value to the starting ol  tag.
<ol type="I">
<li>Introduction</li>
<li>Understanding the Medium</li>
<li>Basic Page Structure</li>
</ol>

Creating Lists

Details are everywhere on your fridge, in schoolbooks, next to the phone, on charges, and in a lot of other records. Which is why there happens to be unique set of labels just for developing lists. This part specializes in the three different kinds of lists possible in HTML:

Ordered lists
Unordered lists
Definition lists
Lists are especially useful in websites to highlight brief items of details. Keep that in thoughts when you make your lists, and try to involve brief words, instead of long words, in each record product.

Finding Plug-ins

We've described before that it's never a great concept to involve any products on your Website that need a plug-in (such as Display or RealAudio) without also offering a weblink to the plug-in. You don't want to believe that your guests will have the necessary application to perspective your web page because they might not.

Microsoft usually considers that the technique itself should contain enough value to run any programs, programs, and included products without running plug-ins, and it uses ActiveX manages to deal with these kinds of activities. Netscape, however, confirms with the concept that surfers should be lighting and plug-ins should be used to deal with outside activities. Partly because of this perception, Netscape preserves one of the best plug-in records on the Web at http://browser.netscape.com/ns8/community/plugin.jsp.

 Below Desk details the HTML labels that were described in this session.

HTML Tag

<embed>

</embed>
Netscape's nonstandard, although mostly reinforced, tag for such as audio and movies.

<noembed>

</noembed>
Netscape's tag that provides an change technique of installing the video for surfers that don't identify the <embed> tag.

<object>

</object>
W3C's recommended, although mostly in need of support, tag for such as audio and movies.

Adding Sound and Video

Used properly, audio and movies can significantly boost the articles in your Websites. Think about a Website about Dr. Martin Luther Master, Jr. that didn't involve something about his well-known "I Have a Dream" conversation. The textual articles of the conversation is going, but the shipping is what made it so highly effective. You can add audio and movies to your own Websites using some HTML labels you've already acquired.
This session talks about several techniques for including audio and movies. You should know that the one technique that is sure to work with every technique on every foundation is also the simplest: the <a> tag..
<a href="http://www.americanrhetoric.com/mp3clips/
politicalspeeches/mlkihaveadream35348.mp3">
Listen to the I Have a Dream speech.</a>


When your guests press on the circumstances Pay attention to the I Have a Fantasy conversation, the mlkihaveadream35348.mp3 pc information computer file will obtain to their pcs and begin suffering from. If the guests do not have the appropriate plug-in to focus on the audio movie, the technique should immediate them to retain information mention later. It will not, however, immediate them to obtain the appropriate plug-in. You will need to provide that information on your web page.

Video areas can be managed in exactly the same way:
<a href="http://www.lucidcafe.com/library/96jan/96jangifs/MLK628Video.ram">
Watch a video of Dr. King's greatest speech.</a>

<embed> tag
Netscape designed a new tag known as <embed> to allow you to involve a audio or movie on a Website. Windows Internet Traveler internet browser also allows this non-standard tag. The following example reveals how the <embed> tag works to add a movie.
<p>Click the video to see a clip from the IMAX movie Journey
  into Amazing Caves.</p>
   <embed src="C:\Documents and
    Settings\qc04818\Desktop\Amazing_Caves_720.wmv"
    width="360" controls="true" autostart="true"
    loop="false">
     <noembed>
      <a href="C:\Documents and
      Settings\qc04818\Desktop\Amazing_Caves_720.wmv">
      Click for a surprise.</a>
     </noembed>
    </embed>
<p>You will need the <a href="http://www.microsoft.com/
     windows/windowsmedia/download/
     AllDownloads.aspx?displang=en&qstechnology=">
     Windows Media Player</a> to see this clip.</p>

The technique shows the user interface for the media device you use, as shown in below Figure. You can add size and top features to the <embed> tag to management the size of the movie still. The <noembed> tag provides an change way for visitors to download the movie if their technique doesn't identify the <embed> tag.
          

Observe that I've provided four features for the <embed> tag in this example: size, manages, autostart and hook. Width places the size of the movie. It is not necessary to set the top since the movie will size the picture proportionally. Controls guarantees that the movie gamer manages are provided. Autostart, which you can set to real or incorrect, informs the technique whether to begin enjoying the movie instantly upon running the web page. The hook feature informs the technique how many times in a row to play the movie before avoiding. You can set the hook feature to any whole number.

Another feature you can set is autorewind. This feature is instantly set to real, but if for some reason you don't want to go back the movie after it performs, you can set it to incorrect. The invisible feature conceals the gamblers VCR manages from the person. Covering the manages gives you, the creator, more control over the use of the movie, but may irritate your guests if they are prohibited to turn your movie on or off.

<object> tag
The <embed> tag is nonstandard, which indicates that the W3C doesn't identify it as a genuine HTML markup tag. The W3C wants that Website designers involve audio and movies using the <object> tag.
<p>Click the video to begin playing.</p>
    <object classid="C:\Documents and
    Settings\qc04818\Desktop\Amazing_Caves_720.wmv">
</object>
    <a href="C:\Documents and
    Settings\qc04818\Desktop\Amazing_Caves_720.wmv">Surprise!</a>

The <object> tag also comes with lots of features that you can set to help management the use of the video in your Website. You can add a boundary around the item by using the overall look feature and establishing the value to 1. The <object> tag also has an autostart and autorewind feature.

Padding and Margins

The area “Quotation Prevents and Textual content Boxes” in Part 4 talks about how to use the cushioning and edge qualities to add empty place within and around an element’s region. Those same qualities edge and cushioning can also be used to pictures to specify the place around an picture on one, two, three, or all four factors.
For example, think you desired to add a little prevent of place on the eventually left part of an picture, but you do not want to add any place on the right part because that part suits completely with another picture. If you included the edge eventually left home to your design piece or within your img tag, you could add place only on the eventually left part.
<img src="photo.jpg" width="200" height="200" style="margin-left: 25px;" />


Centering
By this point there can be probably a big question still staying about pictures and positioning . . . how to center?! While there is not a “center” property for pictures, there is a technique you can use to middle an picture on the page or within a section. The key can be found in changing the way we refer to “centering” a component in reality what we’re doing is making its eventually left and right sides exactly equal.

First, we must tell the technique to display the picture as a prevent factor. In CSS, prevent elements will instantly fill the entire available space. So if an picture becomes a prevent factor, its sides will grow until they reach the sides of the technique window.
Next, if you tell the technique to make both the eventually left and right sides the same, you will, in effect, middle the picture. The following is an example of the code you might use to middle an picture. First, the style sheet:
           
Then, add the name of the category (in this case it’s “centered”) to the img tag. Determine reveals the outcome in the technique.
         
No matter how wide (or narrow) the technique window is opened, the image remains centered side.
<img src="art-turtle.gif" alt="Drawing of a Turtle" class="centered" />

Floating Groups of Images

Sailing Categories of Pictures Think you had a web page with lots of images, maybe one with pictures of each personnel in a company. If all of images were the same size, it would be very easy to use the flow property and let the technique instantly place them in wrinkles across the site. The following value reveals one way to achieve this process, by putting each of images (and their associated with captions) into individual divs.
<div class="thumbnail">
<img src="jsmith.gif" alt="Jeff Smith, CEO" /><br />
<p>Jeff Smith, CEO</p>
</div>
<div class="thumbnail">
<img src="mclark.gif" alt="Mary Clark, CFO" /><br />
<p>Mary Clark, CEO</p>
</div>
<div class="thumbnail">
<img src="ldaniels.gif" alt="Laura Daniels, CTO" /><br />
<p>Laura Daniels, CTO</p>
</div>

hen you would add the announcement for that thumbnail category to your design sheet:



The float: eventually left code informs the technique to put the first picture next to the eventually left edge of the site. Then, each following picture with the float: eventually left design follows suit and rests in a row next to the first picture, until it gets to the right edge of the technique. If the technique is start wide enough for all the sailed pictures to fit in a single row, they will do so. If the user has the technique screen start only enough for two pictures to fit in a row, then the staying pictures will begin a new row within the first row (starting again near the eventually left margin).
This is the true meaning of a “liquid layout” in web design, because the site is able to grow or reduce according to the technique screen size. Compare below two results to see an example of this sailing concept in action.

A very simple design sheet allows these three photos to flow next to each other on the page:
                          

That same style sheet lets the internet browser move the images according to the width of the internet browser window:

                                     

Clearing Floats

Occasionally you are going to experience an example in which you actually need to quit or obvious a flow. One example might include the same scenario I just used an picture sailed to the right of a few sentences of textual content.

Suppose you desired to crack the lengthy passage up into two sentences, and then you only desired the first passage to place around the picture. The staying passage would then take up the whole size of the site. To achieve this, you have to “clear the float” by including the obvious home to the area in concern, such as:
<p style="clear: right;">Remaining paragraph of text. . .</p>

This causes the passage to be “pushed down” until it is below the base of the sailed picture, like this:
                                         
Possible values for the clear property are left, right, both, or none

Floating an Image Within Text

The flow property basically informs the technique to position the sailed element closest whatever technique edge is specified, and then flow the rest of the page’s articles around it. To say it another way, articles instantly runs along the right part of a left-floated picture, and to the eventually left part of a right-floated picture. For example, if you had a long passage of text and wanted to position an picture in the upper-right corner of that passage, like this:


you could use the flow home on that picture, and set the value to “right” to tell the technique to keep the picture on the right part of the textual content. Possible principles for the flow home are eventually left, right, or none.

<img src="jsmith.gif" alt="John Smith, CEO" width="100" height="116"
style="float: right;" /> 

Floats

Whenever pictures appear within a area of textual content, you may want to improve the positioning so that the picture drifts within the textual content circulation instead of above or below it. While the text-align home mentioned in Part 4 performs for primary positioning of textual content,
it does not arrange pictures.

Borders

You might have noticed that many linked images have borders around them. This happens because all linked images automatically have borders, just as all linked text automatically has underlines. The earlier HTML specifications allowed for a border attribute, which was used to specify the size of an image’s border, as in the following example:
<img src="map.gif" width="575" height="328" alt="Click your state"
usemap="#usa" border="0" /><br />Click the state in which you
currently live.


The value of the border function is indicated in p, where the conventional is 1 for connected images and 0 for nonlinked images. If you preferred to make it greater, you would use a larger wide range, such as 4. In this example, the value is 0. This changes the border off definitely, developing it hidden.
With that said, the W3C on the border function and now wants that you change the display of location with style sheets. One objective for this is that style sheets offer significantlymore control over your location. For example, if you have several images on your website and wish to turn the location off for all of them, instead of such as “border=0” to each of the img brands on the website, you can add the following value to the page’s style sheet:
img {border-width: 0;}


Actually, you could use border-style: none; instead of border-width: 0; and it would also create the boundary unseen. Extra design piece qualities relevant to region are detailed next.

border-width Manages the dimension the region, independently (border-left-width, borderright dimension, and so on) or as a whole (border-width). Principles can be specified long systems (0 or 1, for example) or key terms (thin, wide, or medium).

border-color Manages the border’s shade by specifying between one and four values. When you specify one value, that shade is set for all four boundary sides. When two values are specified, the top and base sides take on large in the first value and the eventually left and right sides take on the second. When three values are specified, the top is set to the first, the eventually left and right are set to the second, and the end is set to the third. When four values are set, the top, right, base, and eventually left sides are set, respectively, as in the following example: img {border-color: #ccc #666 #333 #999;}. To specify a value for only one part, add the side’s name (top, base, right, or left) to the home, as in “border-top-color.”

border-style Changes the design of the boundary. Alternatives include:
none
dotted
dashed
double
solid
groove
ridge
inset
outset
As you can see, another highly effective element of the boundary qualities is that they can be changed either as a whole (so that all four sides look the same) or independently. To improve you will independently, you basically add the part requirements (top, base, right, or left) to the boundary home, after “border” and before any last typical. To provide you an concept how this is done, consider the following example and Determine. Here, I’ve designed a category known as “headshot” and then set the boundary qualities in my design piece.

.headshot {border-style: double;
border-left-style: none;
border-right-style: none;
border-width: 10px;
border-left-width: 0px;
border-right-width: 0px;
border-color: #C00;}

After including that design announcement to my design piece, I can add the category referrals to my img tag to finish the process.
<img src="jsmith.gif" alt="John Smith, CEO" class="headshot" />