Professional Diploma in

Web Design

SUMMARY NOTES
Module 1, Lesson 2: Web Design Foundations
Contents

Why Do We Comment In Our Scripts? ......................................................................................................................... 3

Let’s Talk Tags ............................................................................................................................................................. 3
The Position Property ................................................................................................................................................. 4
HTML Breakdown: ...................................................................................................................................................... 5
CSS Syntax Explained .................................................................................................................................................. 7
Completed Site: .......................................................................................................................................................... 9
Why Do We Comment In Our Scripts?

− Commenting is used to explain what your script is doing/supposed to do.

− Comments can be used as place marks for where you would like to change or add
something.
− It comes in handy if you are sick or ask someone to help you at work.
− Most importantly it allows anyone viewing your scripts to be able to understand them.

Let’s Talk Tags

Tag Description

<footer> Details such as copyrights

<img> Allows the use of Images

<div> Allows the addition of sections

<table> Allows the creation of Tables

<tr> Creates Table Rows

<th> Creates Table Headings

The Position Property

Property Name Description

Static This is the default position and will be positioned in the regulatory order.

Relative Defines the elements new position with help form elements such as top.
Bottom, left & right.

Fixed This means it stays in the same place even when the page is scrolled
through. This prevents empty space on the page.

Absolute This element allows you to place the element anywhere on the web page, by
using the elements top, bottom, left & right.

Sticky This is a mixture of fixed and relative. This is based on the users scroll.

Introduction To Color Codes

− Color codes are used to format color in a way that computers can read.
− The most commonly codes used are Hex Color Codes made up of 6 digits.
− The three primary color are Red, Green and Blue.
− This hex code (RGB) represents Red, Green & Blue
by mixing the highest intensity of one color with the
lowest intensities of the other two you can create
any desired color.
HTML Breakdown:

Aligns the table to the middle of the screen.

Tr represents Table Row
Th represents Table Heading

Row one of the table:

Minecraft | Open World | R400 |Xbox One|

Row two of the table:

Fifa 16 | Sports | R800 | Playstation |

Row three of the table:

Tomb Raider | Adventure | R600 | PC |
 Div defines a segment within an HTML
document. Containers are used to establish
the width for the layout. You can add
elements within the containers and will be
affected by the container’s width. A
container is a <div> element with a
class=“container. All elements within the
<div> container will be affected.

Footers can hold information such as links,

company details, copyright & additional links to
pages/social media.
CSS Syntax Explained

CSS Segment Explanation

− This links the background image through
the CSS.
− No-repeat prevents the image from
being shown multiple times.

− Color: white; This sets the text colour to

white.
− Text-shadow: This allows you to add a
shadow behind text.
− Font-family; Allows you to customise the
font.
− Text-align: centre; Moves text to the
centre of a site.
− Font-size:25px; Sets the font to 25 pixels
− Margin-top:10%; Sets the top margin of
an element.
− 10% - specifies the top margin as a
percentage of the containing element.

− Border-collapse: collapse; This drops the

table border for a more streamline look.
− Width: 60%; Sets the table width to 60%
of the webpage size.

− Background-color:#6BBE30; this selects

a custom color by using the eyedropper
tool.

− Padding creates space around the

selected element.
− The nth-child selector allows you to
choose an element based on their order.

− The . class before container selects

elements with specific attributes.

− Position fixed ensures that the position

of the element will remain the same
even when users scroll.
− Width: 100% sets the width to cover the
complete section of the screen.
Completed Site: