World Best Free Tips and Trick

Tuesday, December 30, 2014

learn html for intermediate :Tables: rowspan and colspan

The following code is similar to that in the Tables page of the HTML Beginner Tutorial:


<table>
    <tr>
        <th>Column 1 heading</th>
        <th>Column 2 heading</th>
        <th>Column 3 heading</th>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
    </tr>
    <tr>
        <td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

Header cells

The first difference is that the td tags of the first row have been replaced with th tags. Whereas atd is a standard data cell, th is a header cell. As with td elements, these must be enclosed insidetr elements.

Spanning columns and rows

colspan and rowspan attributes have also been used in some of the td tags. If you look at this code in a browser, you will see that on the second row there are now two cells instead of three, the second cell spanning the second and third column. The colspan attribute, which means “column span” will span the cell over the number of cells that is specified. This means, in this example, that there is no need for a third tdelement - two cells are merged into one.

The rowspan attribute is similar to colspan, except, obviously, it will span across rows rather than columns. Again, the cells that it spans should be removed. In this example, because it spans over the fourth row, there are only two cells in that row.

As with the simpler 3x4, 12-cell table, the numbers on these tables with merged cells should also add up. Although there are only 10 cells in this example, there are 2 spans.

learn html for intermediate :meta tag

Once upon a time, many eons ago, when the Internet was just a small number of cardboard boxes attached to each other with string, meta tags were the town criers of the Internet… erm… town.

Meta tags don’t do anything
to the content that is presented in the browser window, but they are used by the likes of search engines to catalogue information about the web page.

There is one meta tag which can be used as many times as you desire inside a head element and they can contain the attributes charset,name, http-equiv, and content.

When the name or http-equiv attribute is used, the content attribute is then used in conjunction with them to apply meta data itself.

Names

The name attribute can be anything you like. The most commonly used names are author,description, and keywords. author is used to explicitly state one of the HTML page’s authors and description is often used by search engines (such as Google) to display a description of a web page in its search results.

HTTP Equivalents

The http-equiv attribute can be used instead of the name attribute and will make an HTTP header, which is information sent to the server where the web page is held. The attributeshould rarely be used (although see charsetnote, below) but the value can be:

content-type, an encoding declaration, defining what character set is being used,
default-style, the preferred stylesheet from a selection of link or style elements,
or refresh, which defines how often (in seconds) a page automatically refreshes or if it should automatically redirect to another page. Not great for accessibility.


<head>
    <title>Air conditioners? YEAH conditioners!</title>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="3"><!--not recommended for sane people-->
    <meta name="description" content="This is my really, really, REALLY exciting web page about air conditioners">
    ...

learn html for intermediate :Text: Abbreviations, Quotations, and Code

The basics of defining text using paragraphs (as well as emphasis and line breaks) and headingswas covered in the HTML Beginner Tutorial. As, ad computer codend for the same reason we use `p` and `h1`, `h2`, etc, there are a number of other tnags we should also use to specifically represent other text-types, such as abbreviations, quotation

.Abbreviations

abbr is used to markup an abbreviation, a shortened form of a word or phrase.

The expanded phrase that the abbreviation represents can be defined in the value of thetitle attribute. This is optional but recommended.

<p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

Quotations

blockquote and q are used for quotations.blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.

If the source of the quotation can be found on the Web, the cite attribute can be used to point to its origin.


<p>So I asked Bob about quotations on the Web and he said <q>I know as much about quotations as I do about pigeon fancying</q>. Luckily, I found HTML Dog and it said:</p>

<blockquote cite="http://www.htmldog.com/guides/html/intermediate/text/">
    <p>blockquote and q are used for quotations. blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.</p>
</blockquote>

Blockquotes work very nicely with the HTML5 elements figure and figcaption, enabling a nice, semantic way to group a quotation with a citation:


<figure>
    <blockquote>[Big old quotation about evolution]</blockquote>
    <figcaption>Charles Darwin</figcaption>
</figure>

But let’s not get carried away with that here - see the article about Sectioning for more.

Citations

Just to make things nice and confusing, as well as a cite attribute, there is also a cite tag. This can be used to define the title of a work, such as a book.


<p>According to <cite>the Bible</cite>, after six days God said <q>screw this for a lark, I'm having a nap</q>.</p>

Code

code is used to represent any form of computercode. Further, var can be used for variables(which could be a variable in anything, not just in code - it could be a variable in an equation, for example), samp for sample output, and kbd(keyboard) for user input.


<p>If you add the line <code><var>givevaderachuckle</var> = true;</code> to the <code>destroy_planet</code> subroutine and then type <kbd>ilovejabba</kbd> into the console, the big bad green Death Star laser will etch <samp>Slug Lover!</samp> on the planet's surface.</p>

Preformatted text

pre is preformatted text and is unusual in HTML tags that it takes notice of every character in it, including the white space (whereas other elements will ignore a consecutive space or a line-break, for example). It is most commonly used for blocks of code, where spacing, such as indentations, can be relevant.


<pre><code>
&lt;div id="intro"&gt;
    &lt;h1&gt;Some heading&lt;/h1&gt;
    &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

learn html for intermediate : span and div

HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (pmakes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all. This might sound about as useful as
a foam hammer but they are actually used quite extensively in conjunction with CSS.

They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributesclass and id to associate the element with aclass or id CSS selector.
The difference between span and div is that aspan element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element isblock-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.


<div id="scissors">
    <p>This is <span class="paper">crazy</span></p>
</div>

div and especially span shouldn’t actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word “crazy” and the class “paper” is adding italics for visual emphasis, then, for richer, more meaningful content, the code might look like this:


<div id="scissors">
    <p>This is <em class="paper">crazy</em></p>
</div>

If you haven’t got a clue about classes and ID’s yet, don’t worry, they’re all explained in the CSS Intermediate Tutorial. All you need to remember is that span and div are “meaningless” tags.