Cert 4 Web Design Cluster; Week 8.

Week 8 was a week of no offical classes because it was a extended Easter break. So I spend most of the time understanding how divs work and how to give them a location on my web site thought it would only take 2 days to learn in how to set divs up properly well a full week later have a a bet of a better under standing in how to use divs but I would not say that I was competent with them.

div stands for Divisions, they can be broken into two elements a “class” or a “id”.

Id’s div’s are unique element identifier which can only be used once for only one specific div element and use “#” in CSS style sheet, and is written in HTML id=“id name element”.

Example:

HTML:

<div id=“firstBox”>… content …</div>

CSS:

#firstBox{

… css stylings …

}

Class’s div’s or not unique element they can be used on multiple elements. Multiple class’s can be used on one one element. The “.” is used in CSS style sheet to call up the class in CSS, and is written as class=“class name element” in HTML.

Example:

HTML:

<div class=“content”>… content …</div>

CSS:

.content{

… css stylings …

}

Found some helpful examples and tutorials on youtube. By using colour blocks to locate and set up the web site.

Example 1:

https://www.youtube.com/watch?v=kGA9RIFiyIE ; by ob wex, Introducing Divs And Controlling them with classes and IDs.

In this tutorial four exact same sized colour blocks are used and how to place them side by side and change the colour of each block.

Using div class and id, in these example.

Class (.)is used to set the sizes of the boxes as the multiple element use. Each box is give the same size of height 150px and width of 150px, a border thickness 5px and a colour of black. Are floated to the left so each box do not set under one and other. But set beside one and other in a row and margin of 20px is used to have a gap between each for boxes.

Id (#) is used is to give each box its own colour element.

The finished produced looks like this:

The Hypertext Markup Language code:

The Cascading Style Sheet Code:

Example 2:

https://www.youtube.com/watch?v=Xv1gLAJAz-U ; by Ferney Manrique, Styling DIV’s using CSS techniques. PART4.

This video example shows how id vid’s can be used in setting out the layout location of content on the web page in how it will be presented. How this is done is by giving each section a colour a size of height and width and a location by using float or margin in where the content will placed.

  • A div wrapper is used to enclose all the other div elements to group the elements in layout to keep them all in the same column.
  • Orange is the banner id div for the site name and a logo to be located.
  • Light green is the navigation menu location.
  • Tan is the left hand column floated to the left.
  • Pink is the main content of the web site which uses a margin left of 220px so it does not sit behind the left hand column.
  • Blue grey is the right hand column which is floated to the right.
  • Dark green is used for the footer.

The finished produced looks like this:

The Hypertext Markup Language code:

The Cascading Style Sheet Code:

Example 3:

https://www.youtube.com/watch?v=2sxz1duInsk ; by Juan Di Diego, How to build a web page div structure in under 10 minutes.

Example 3 was a good example in how to set out HTML and CSS in text editor page and style sheets. By using comments in your HTML to describe sections of your web page and the use of id div’s to set size and location of page layout material content.

The finished produced looks like this:

The Hypertext Markup Language code:

The Cascading Style Sheet Code: