1. Web Programming and Design
MPT Senior Cycle
Tutor: Tamara
Week 5

2. Plan for the next 4 weeks:
Introduction to HTML tags, creating our template file
Introduction to CSS and style
Introduction to JavaScript
More advanced JavaScript
Portfolio Site

3. Web Design Competition
There will be a competition for the best designed website!!
Theme: “Your Hero”
To enter: Simply upload your website into a folder named competition on your Public_html

4. <tagname>Some Content in here….</tagname>
HTML Reminder
HTML stands for Hyper Text Markup Language
HTML allows us to describe and define the structure of our website using markup
All the elements in a web page are represented in tags <tag>
Example of HTML elements include: headings, paragraphs, images, videos
Nearly all HTML tags come in pairs with an start and end tag <tag> </tag>
The Browser will not display these tags, instead it will use the tags to render the web page
<tagname>Some Content in here….</tagname>
Defines the type of element
The stuff that gets displayed
Close off the element

5. h1 {color: blue;} CSS Reminder Selector (HTML tag) Property Value
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen
It allows us to change the style or appearance of our web page
CSS contains a selector and property, value pair
The selector is the HTML tag you would like to style
h1 {color: blue;}
In this example, all the h1 tags in the HTML document will be changed to blue
Selector (HTML tag)
Property
Value

6. JavaScript Variable Reminder
We can assign a variable to hold a data type value
We must be careful with our variable names:
Use a meaningful name for your variable, and each variable should have a unique name
Never start your variable name with a capital letter, number, or symbol
Do not use keywords, or special reserved words for your variable name
JavaScript is case sensitive so pay special attention to capital letters and spellings
How we create a variable:
var x = 1;
Always finish the line with a ;
We use the keyword var to tell JavaScript we are making a variable
Next we make a name for our variable
Then we use = to assign a value
Then we give a value

7. JavaScript Function Syntax Reminder
function myFunction(argument){
Code goes here…….. }
We have to use the special keyword function
Using arguments is optional
All code needs to be contained in { }

8. JavaScript Event Reminder
HTML events are "things" that happen to HTML elements. Events can be caused by the user or by the browser. JavaScript can "react" to these events.
Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page

9. JavaScript DOM Reminder
We can use the DOM model to change style and change the content within HTML tags
We can also add HTML to the inside of HTMl tags
document.getElementById("myH1").style.color = "red";
document.getElementById(“myH1”).innerHTML = “New Heading”;

10. JavaScript Conditional Reminder

11. JavaScript for loop syntax
To create a for loop we must use the keyword for
Then we setup three statements within ( ) before describing the block of code we want to repeat
Statement statement statement all separated by ;
for (setup var; condition; increase var){
// block of code to repeat }
Keyword for