Introduction to mark-up

HOME

Basics

The Paragraph tag <p></p>

This 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' elemet is an inline ele,et that will bold the text contained within the syntas. The text is called the child node

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Italics <em></em>;

The 'em' element is an inline ekement that will italisise/ emphasise the text contained within the syntax. The text is valled the child node.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inserting images

Images are also inline elemets. There arre a couple of ways to inset an image. The easiest way is to reference an image from the internet directly, Be carefil as you may not have copyright permission to publish this in this manner.

Remote path reference

local Path reference

Creating a link

A hyoerlink are cliclable reference to tale the viewer from one page to another.

Example

Here is a link to a really coll live active cyber-security threat tracker.

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

Here is a link to a really coll live active cyber-security threat tracker.

Blcok-level elements

Blcok-level elemnts occpuy the entire width of the containing element. For example, a paragrapg below has the width of the window as it's containing element, so will take the entire width, even if it does not ust it.

Example

This text will coccupy an entire row

This text will appear om it's won new row below

This text is within the 'div' element

Structual mark-up elements

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