Learning HTML for Duke of Edinburgh

For the skills part of my Duke of Edinburgh award I am learning how to code in HTML.

HTML stands for Hyper Text Markup Language. This means it is a language for marking up (describing) how a document should look in a web browser.

It is my goal to master the basics of HTML and to learn a bit about CSS - Cascading Style Sheets which is a technology for adding styling (sizes, colours, borders, padding etc) to the document to make it look nicer.

This page is about learning HTML, I have also created some other pages about my interests such as Marine Biology and Roman History.

I leant a lot from the Mozilla MDN website

Basic HTML

HTML uses tags to describe a document. Tags usually have an opening tag, some content in between, and a closing tag.

For example a the div tag is used to mark up a paragraph of text.

<div>

The text inside the div tags

</div>

The closing tag has a / (slash) followed by the opening tag name.

Some tags have parameters. In HTML these are called attributes. For example

<img src="image.png">

The img tag needs a src attribute to tell it where to find the image.

The structure of a HTML document

<!DOCTYPE html> - this is a HTML document

<html> - opening html tag

    <head> - opening head tag

       head contents  - this contains information about the document that is not part of the document such as its title

    </head> - closing head tag

    <body> - opening body tag

        body contents  - this is where the HTML document is described

    </body> - closing body tag

</html> - closing html tag

Here is an image

Here is a table of information about capital cities

Tables are useful for laying our data in rows and columns. The tr tag adds a row, the th tag is for header columns, and the td tag is for table cells.

City	Country	Population	Size	GDP
London	England	9 Million	607 Square Miles	£496 Billion
Berlin	Germany	3.6 Million	344 square miles	£132 Billion
Rome	Italy	4.3 Million	496 Square Miles	£80 Billion

Here is an ordered list

Banana
Apple
Strawberry

Here is an unordered list

Banana
Apple
Strawberry

Changing font family, size, colour

This font is called Arial

This font is called monospace

This font is called Tangerine and is loaded from Google Fonts

You can change colours within a sentence using styled span tags

You can change the text and background colours using "color" and "background-color" styles

		8px Text 
		16px Text 
		24px Text 
		32px Text 
		40px Text 
		48px Text 
	

		Font weight bold 
		Font style italic
		Superscript Text 
		Bold Text 
	

Text Alignment

You can change the horizontal alignment of text using text-align style.

Left Aligned
Text

Centred
Text

Right Aligned
Text

Justified text changes the spacing between words so that there are no gaps on the left and right of the text.

You can nest divs inside each other by putting the inner div inside the contents of the outer div tag

This is the outer div

This is the inner div