↑
Top 

week 2

Uses of CSS: uses eg background colour, background images, formatting text, borders, padding, heading 

“Design is the method of putting form and content together.” Paul Rand

Setting properties to elements in CSS is easy, however, a number of ways that you can do it can confuse people, let's take the humble addition of colour to an element, as you can see from the example below this can be achieved in a number of ways.

body {
    background-color: yellow;
}

h1 {
    background-color: #00ff00;
}

p {
    background-color: rgb(255,0,255);
}

Lets start with the first option, here we have declared that the colour shall be yellow!, this is a simple selection as it is only yellow, but let's consider the shade and hue of yellow that we want is it custod yellow or dandelion yellow, these are not recognised by browser compilers so we use another approach to this.

Hexadecimal colour codes, these use numbers that when used can offer a staggering 16,777,216  that is MASSIVE!! We use the hexadecimal numbering system that counts to 16 as in the grid below.

Number	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Hex Number	0	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f

 

Many look at this and say well it's only 15, NO IT IS NOT! Why? we count zero as a value!

The final option for the colour coding is the use of the RBG scale. RGB uses the three primary colours used in on any visual display unit, Red, Green and Blue. These colours combined on a monitor can present 16,777,216 using an 8-bit channel. 

The three numerical fields within the brackets correspond to Red (values up to 255), Green (values up to 255),  Blue(values up to 255).

So having used the different implementations it can be that you use each of these to implement some style to an element.

background images,

A good source to use to demonstate this can be found on W3Schools using the following link. W3Schools Bacground Image using CSS

formatting text,

 

borders,

 

padding,

heading

What happens when you create the following?

Remember how we save the content that we create for the web must be lowercase, and the first page must always be called index

styles,

 

positioning elements,

 

creating columns.

 

 

Create each of these examples and make notes on how they affect the formatting.Try altering the values and make notes on how this alters the formatting.

 

 

CSS & It's Implimentation

Starting with Javascript

We shall begin with the creation of the simple point of adding text to a web page. In the code snippet below you will notice a familiar structure of HTML.

It all starts with the opening tag of script.

 

Nowadays the recommendation is that scripts are placed either externally or at the bottom of the source code, (as above) this is due to the loading times of some scripts impacting the load time of the page content.

Here is an example of External JS linking

Lecture 6 Java 5 Example
Lecture 7 Java 5 Example
Lecture 8 Java 5 Example
A Prompt box that reads the user input and outputs information based on the input

 

Using our CodeCademy games

 

Try creating your name using the following examples, It is like "etch a sketch"

Follow the leader. Using the HTML editor of your choice (preferably not Dreamweaver) follow the instructions of the creation of a simple DIV web page.

CAN YOU SPOT THE ERRORS?

 

Now that you have had some guidance to the creation of a simple template, use the websites of w3Schools and CSS-Tricks to extend your template. Remember to keep saving, and, CHECK YOUR CODE FOR MISTAKES!!

 

Time to explore, using your CodeCademy login navigate through to the Javascript area and work through the tutorials up to the Rock, Paper, Scissors example

 

Cool Projects in Java, HTML and CSS

 

In 1994, Berners Lee founded the World Wide Web Consortium at the Laboratory for Computer Science (LCS) at the Massachusetts Institute of Technology in Boston.

The information covered on this page covers the knowledge and understanding linked to the criterion in the table below.

 

Last Updated
2018-04-16 13:27:00

---

Links to Learning Outcomes		Links to Assessment criteria
LO 1 Understand the fundamentals of cascading style sheets (CSS)		P1 explain how HTML files access CSS P2 explain the features of the box model for CSS M1 assess different implementation styles of CSS

---

English and Maths Coverage

---

Stretch and Challenge

---

Homework

---

How 2's Coverage

---

Equality and Diversity Calendar

Files that support this week

 

---

Democracy: | Rule of Law: | Mutual Respect: | Individual Liberty: | Acceptance of Difference: | College Values:

Week 1←
PrevWeek 2←
PrevWeek 3←
Prev→
Next→
Next