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 will be discussed later.

Inline elements

Bold <strong></strong>

The'strong'element is an inline elebment that will bold the text contained with the syntax. the text is called the child node

Example

Lorem ipsum, dolor sit amet consectetur adipisicing elit. At maiores pariatur eius sapiente exercitationem molestias voluptas sunt blanditiis alias illum nihil cum amet, assumenda ut. Eius eos accusantium dolores qui.

Italics <em></em

The 'em' element is an inline element that will italise / empasise the text contained within the syntax. The text is call the child node.

Lorem ipsum, sit amet consectetur adipisicing elit . Animi non ab dolorum explicabo vero aut repudiandae dolor quas expedita doloremque! Vero cum excepturi adipisci delectus quidem quos laudantium perspiciatis soluta.

Insert images

images are aslo inline elements. there are a couple of ways to insert and imagge. The easiest way is to reference an image from the internet directly. Be careful as you may not have copyright permission to publish this in this manner.

this is a KookaburraKookaburra birdpicture.

Local path reference

Cheetah picture
Win this Cheetah picure

David used a pearl image.

David used a paspaley pearl raffle promo graphic

Creating a link

a hyperling (links) are a clickalbe reference to take the viewer from one page to another.

Example

Here is a link to a really cool live active cyber security threat tracker

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

Here is a link to a really cool live active cyber security threat tracker that will open in a new tab

Block-level elements

Block level elemens occupy the entire width of the containing element. For example, a paragraph below has the width of the window as it's containing element, so will take the entire width, even if its does not use it.

Example

This text will occupy an entire row.

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

This text is within the 'div' element.

Structural mark-up elements

Structural elements are syntax that define setctions within our mark=up document. Elements like 'hearder', 'nav', 'main' and 'footer' are frequently used.