Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Size: px

Start display at page:

Download "Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh"

Georgina Walsh
5 years ago
Views:

1 Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

2 Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction to CSS and style Introduction CSS Animations Combining HTML, CSS to make a portfolio site

3 Recap of last weeks work

4 How to view your Website:

5 What you will need? We will write our code using a text editor such as Notepad++, Sublime or Text Wrangler We will then test our code in a Browser such as Google Chrome, Mozilla Firefox, Internet Explorer For Homework: Download and install a text editor on your personal machine

7 What is HTML? 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 The Browser will not display these tags, instead it will use the tags to render the web page

8 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

9 HTML Structure Only white is visible (rendered) in browser, the grey does not structure and is a template for every web page

10 CSS

11 Where to write our CSS? 3 Places the Style can go We can write all our CSS in an external CSS file and link it to our HTML document We can write our CSS within <style> tags in the <head> tag of our HTML document We can write our CSS inline. That is within the HTML tags: <div style= color: blue; ></div>

12 What can we do with CSS? Change Colour Change Spacing Change the Font Change the Layout Change the Size of things We can give things Borders And much more.

13 What is CSS? 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

14 CSS Syntax The declaration block is contained within { } there can be multiple declarations within these { } A declaration must include a style property and a value, they are separated by : A CSS declaration always ends with a ; Declaration Declaration h1 {color: blue; text-align: center;} Selector (HTML tag) Property Value Property Value

15 CSS Syntax In the below example all text within h1 (heading) tags will be displayed in the browser in blue But what if we did not want to change all the h1 elements? Perhaps we only wanted to change one h1 tag to display blue To write a comment in CSS we use /* comment written here */ h1 {color: blue;}

16 CSS: Colour

17 CSS Colour There are a few ways of selecting colour. Today we will use the colour name You can find a list of supported colour names at:

18 Important Links

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

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan