January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Meta Tags

Meta tags don’t do anything to the content presented in the browser window, but search engines use them to catalog 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, which is then used in conjunction with them to apply meta data.

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 web page description in its search results.

The reason why meta tags used to be so important was because they were relied on by search engines to build a profile of a web page. The keywords meta data was used extensively, for example. Nowadays, however, most search engines use the actual content of the page itself.

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 attribute should rarely be used (although see charset note, 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.

The charset attribute can be used as a shorthand method to define an HTML document’s character set, which is always a good thing to do. <meta charset="utf-8"> is the same as <meta http-equiv="content-type" content="text/html; charset=utf-8">.


<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">
    ...

Tables: rowspan and colspan

Tables may have seemed complicated. Visualizing a two-dimensional grid from one-dimensional lines of code can be quite difficult.

Well, it gets trickier. All thanks to the rowspan and colspan attributes. 


<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>

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

See the Pen Table Example 1 by Nicholas D’Angelo (@ndangelo) on CodePen.

Assignment

  1. Create a table with six rows.
  2. Vary the width of the table data for each row (use rowspan, and refer to the embedded codepen example.
  3. Create three table headers (the example uses three.)
  4. Use column span to create table data cells.
  5. Note: rowspan is the height of the column. Column span is the width of the cells.
  6. Fill the cells with at least three images. The rest can be filled with text.
  7. Use CSS to style the table for easy viewing.
  8. This can be challenging, take your time.

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 td element — 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 3×4, 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29