The following are demonstrations of the main tags for layout design.

See W3 Schools - HTML

This is a level 3 heading - 'h3'

This is a paragraph - 'p'

This is a paragraph ...
with an example of a line break - 'br'

avatar

This an image reated with image source tag - 'img src="" '

 

The previous was a spacer paragraph using the 'escape' non-breaking space command - ' '

This paragraph uses 'strong' to create bold text.

Links are created with action hyperlink reference - 'a href="" '

The navigation is created using 'nav' and unordered list - 'ul' items - 'li'.

The divider tag - 'div' - is used to create blocks within a page.
Combined with the 'class="" ' and 'id="" ' tags, different blocks can be created and styled.

There are a multitude of tutorials on YouTube - so you really can't go wrong
unless you try to be too fancy at the start - be simple at first and understand each element.


This section demonstrates the use of columns, cards and lists

Cards are created with user-defined classes for 'row', 'column' and 'card'.

Unordered List - 'ul' tag

List items are displayed in 'li' tags. The symbols can be hidden or shown

  • Item 1
  • Item 2
  • Item 3

Ordered List - 'ol' tag

List items are displayed in 'li' tags. The numbers can be hidden or shown

  1. Item 1
  2. Item 2
  3. Item 3
guitars

Info Box EG

These are Ibanez 'bird' acoustic guitars from 1972. My first 12-string was one of these. I now have a Yamaha 12-string guitar.


The following are demonstrations of some the main CSS for layout formatting elements.

See W3 Schools - CSS

CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
Using the tag names and class/id names, add attributes for each.

Check out and watch the video @ CSS Introduction

Check out the style.css for this page.

Follow the guides - use this as a reference.


Now try the test - to get your sticker, you need to get 8/10 or more. Retry as necessary.

You should now have the basic skills to create your own webpage.

See Challenge "Webpage" - 8XP