Section 1:
Introduction to HTML
Paragraph 1: HTML stands for HyperText Markup Language. It's the fundamental structural language of web pages.
Paragraph 2: HTML is quite easy to learn. All you have to remember is to write your code carefully, making sure you open and close tags correctly. These are tags <h1> </h1> <p> </p>. However, some tags do not close. E.G. The code for making a single line break is <br>. It looks like
this.
And this.
A horizontal line is <hr>, which looks like this:
Section 2:
Basic text formatting with HTML
Other useful formatting tags are:
<strong> </strong>for creating bold text<em> </em>for creating italic text<u> </u>for creating underlined text. It is generally used for indicating errors (e.g. rong spelling)
Section 3:
Making lists with HTML
You will notice that in Section 2 above, I used a bullet list to layout the points.
There are two types of list you can make: unordered lists (bullets), and ordered lists (numbers).
The HTML for unordered lists (bullets) is this:
<ul> <li>First item </li> <li>Second item </li> </ul>
Here is an example of a to-do list:
- Check my email.
- Do some research.
- Do my homework.
The HTML for ordered lists (numbers) is this:
<ol> <li>First item </li> <li>Second item </li> </ol>
Here is an example of my top three favourite books:
- A Short History of Tractors in Ukrainian.
- The Curious Incident of the Dog in the Night-Time.
- Sophie's World.
So that's it for lists for now.
Section 4:
Inserting links in your HTML
It's easy to insert a link. But before you do, it's important to understand the difference between relative and absolute links.
Absolute Links
An absolute link uses the full URL address of the page you want to link to. This is necessary if you are linking to a page outside of your own website.
For example: suppose you want to link to the W3Schools HTML Tutorial. Here is the web address: https://www.w3schools.com/html/html_basic.asp. And I want the link text to read: visit the W3Schools HTML tutorial
Here is the code for inserting this link:
<a href="https://www.w3schools.com/html/html_basic.asp"> visit the W3Schools HTML tutorial</a>
In the above code, you put the URL of the site inside double-inverted commas after href=
You then write the words for the link between the > and the </a> tags
Here is the result: visit the W3Schools HTML tutorial
Relative Links
Relative links are used to link to pages or assets (e.g. images and files) that are within the file structure your own website. We won't cover this yet, as it can be slightly complicated.
So that's a brief introduction to links.
Section 5: Homework
For homework, I'd like you to edit your GitHub page
Make three sections using the H1 heading style, as follows:
- Section 1: Write a paragraph describing yourself (e.g. where you come from, what you are studying, how long you have lived in London. And include a link to your QMplus Hub Page for SML209 (the text for the link should read: 'Visit my QMplus Hub page'.
- Section 2: Write a bullet list of three things you have to do.
- Section 3: Write a numbered list of three of your favourite things.
Finally put a horizontal line between each section, like this:
When you have finished, post the link to your github website on your QMplus Hub Journal.
Good luck!