Introduction to mark-up

Basics

The Paragraph tag <p></p>

The paragraph tag is syntax that wraps paragraphs in need code blocks. Paragraphs are block level elements, which we will discuss later.

Inline elements

Bold <strong></strong>

The 'strong' element is an incline element that will bold the text contained within the syntax. The test is called the child mode.

Example

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum!

Italics <em></em>

The 'em' elements is an inline element that wll italisise / emphasise the text contained within the syntaxt.

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Inserting images

Images are also inline elements. There are a couple of ways to insert an image. The easiest way is to reference an image from the internet directly.

This is a kookaburra picture.

Local path reference

Win this dog

Creating a link

A hyperlink (links) are a clickable reference to take the viewer from one page to another.

Example

Here is a link to a really cool life active cyber security threat detector.

The target attributes to a link anchor 'a' syntax tells the browser how to handle the new page. Default (left blank) opens it in the current window. targets="_new" opens it in a new tab.

Here is a link to a really cool life active cyber security threat detector.

Block-level elements

Block level elements occupy the entire width of the containing element.

Example

This text will occupy an entire row.

This text will appear on it's own new row below.

Structural mark-up elements

Structural elements are syntax that define sections within our mark-up document. Elements like 'header', 'nav', 'main' and 'footer' are frequently used.