August 28, 2023 by admin
HTML/CSS Reference for DMET 155/355
See the Pen albers by Nicholas D’Angelo (@ndangelo) on CodePen.
Text: Abbreviations, Quotations, and Code
The basics of defining text using paragraphs (as well as emphasis and line breaks) and headings was covered in the HTML Beginner Tutorial. And for the same reason we use p and h1, h2, etc, there are a number of other tags we should also use to specifically represent other text-types, such as abbreviations, quotations, and computer code.
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 the title 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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</q>. It said:</p>
<blockquote cite="https://ndangelo.com">
<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>
Citations
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>My tax bill</cite>, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</q>.</p>
Code
code is used to represent any form of computer code. 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>provide</var> = true;</code> to the <code>planet</code> subroutine and then type <kbd>Help</kbd> into the console, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium <samp>Help!</samp> error sit voluptatem.</p>
Preformatted text
pre is preformatted text and is unusual in HTML tags in 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>
<div id="intro">
<h1>Some heading</h1>
<p>Some paragraph paragraph thing thing thingy.</p>
</div>
</code></pre>
As an example, pre and code are used extensively throughout this site. The code blocks, such as the one above, are code elements inside pre elements. In-line references to tags and properties are simply code elements, often inside a elements to link to the reference section.
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 oflinkorstyleelements,- 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. It can be quite difficult to visualize a two-dimensional grid from one-dimensional lines of code.
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 (Advanced)
- Create a table with six rows.
- Vary the width of the table data for each row (use rowspan, and refer to the embedded codepen example.
- Create three table headers (the example uses three.)
- Use column span to create table data cells.
- Note: rowspan is the height of the column. Column span is the width of the cells.
- Fill the cells with at least three images. The rest can be filled with text.
- Use CSS to style the table for easy viewing.
- 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.