HTML Part 2: More text layouts
Images
You can reference images from other web hosts, or you can upload an image to your GitHub repository and reference that.
First we will reference an image hosted on Wikipedia
The code for inserting images is: <img src="URL OF IMAGE" alt="DESCRIPTION OF IMAGE" >
In the example above, the image src is https://upload.wikimedia.org/wikipedia/commons/3/39/Europe_biogeography_countries.svg
You will notice that the image fills the width of the content area. This is okay for this exercise. Later we will look at how to modify the width settings of the image.
2. Description lists
Description lists are good for giving definitions
- soliloquy
- In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
- monologue
- In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
- aside
- In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.
The code for inserting description lists is similar to that for ordered and unordered lists. But it uses three tags: <dl> ... </dl>, which opens and closes the list. Then <dt>...</dt>, which inserts the description term. Inside the dt tag you insert the description definition tag to provide the description: <dd>...</dd>
To get the code for this, visit the W3Schools entry for description lists.
3. Tables
Tables are an orderly way to present information.
Here is an example of a simple verb table:
| Infinitive | Past simple | Past participle |
|---|---|---|
| to go | went | gone/been |
| to have | had | had |
| to come | came | come |
The code for inserting tables is similar to that for description lists. But tables include three tags: <table> ... </table>, which opens and closes the table. Then <tr>...</tr>, which inserts a row into the table. Inside the first tr tag (i.e. The first table row) you insert the table header tag which will display the head for each column: <th>...</th>. The humber of th tags you include determines the number of columns your table has.
For example: In the first two columns of the table above, the first row code is like this: <tr><th>Infinitive</th><th>Past simple</th></tr>
To insert another row, use <tr>.
Then, insert cells into the row using the <td> tag, which means table data.
So, in our two column table above, we would add: <tr><td>to go</td><th>went</td></tr>
This may seem very complicated, so the best place to get the basic table code is, visit the W3Schools entry for tables. Copy the code there and experiment.
4. Superscript
Now for something easier. The superscript tag is useful for formatting the date.
Example: My birthday is on the 25th of May 2001.
To make the 'th' a superscript (i.e. half the size of the numbers 25 and floating at the top of the 5), simply place <sup> ... </sup> around the 'th'
5. Accented and Non-Latin Characters
GitHub pages use the UTF-8 Character set. This means you can type accented letters directly into your page and it will display correctly
Examples:
- jabłko
- Доброе утро
- 你好
However, if you recall, in order for screen reading software to pronounce the words correctly, you need to add the <lang="X"> attribute to the tag, where X is the abbreviated language code.
For example: In the list above, the tag for the Polish word is <li lang="pl">, where pl is the abbreviated language code for Polish. The language code for the Russian word is "ru" and for the Chinese word "zh-Hans". A full listing of the language codes is provided on the W3Schools Website.