Web Programming and Design

Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 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

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

CSS

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: <divstyle=”color: blue; ”></div>

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 In this example, all the h1 tags in the HTML document will be changed to blue h1 {color: blue;} Selector (HTML tag) Property Value

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

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;}

CSS Syntax • To change a specific HTML tag, we can give that tag a unique ID • All HTML ID’s must be unique (they cannot have the same name!) • They must start with a lowercase letter, they cannot start with a number • Then we can call the ID as a selector in our CSS • We must add a # before the selector so that CSS knows to look for an ID in our HTML document <h1 id=”myH1” >My Heading</h1> #myH1 {color: blue;}

CSS Syntax • We can also change a group of HTMl elements by giving the same class • Unlike ID, multiple HTML tags can have the same class • A class name must start with a lowercase letter and cannot start with a number • We must add a . before the class name in CSS, so that CSS knows to look for HTML tags with this class <h1 class=”blueText” >My Heading</h1> <p class=”blueText” >My Paragraph</p> .blueText {color: blue;}

CSS: Padding, margin, border

CSS Borders • The CSS border properties allow you to specify the style, width, and color of an element's border

CSS Margins • The CSS margin properties are used to create space around elements, outside of any defined borders. • CSS has properties for specifying the margin for each side of an element: • Margin-top • Margin-right • Margin-bottom • margin-left • All the margin properties can have the following values: • auto - the browser calculates the margin • length - specifies a margin in px, pt, cm, etc. • % - specifies a margin in % of the width of the containing element • inherit - specifies that the margin should be inherited from the parent element

CSS Padding • The CSS padding properties are used to generate space around an element's content, inside of any defined borders. • CSS has properties for specifying the padding for each side of an element: • Padding-top • Padding-right • Padding-bottom • padding-left • All the padding properties can have the following values: • length - specifies a padding in px, pt, cm, etc. • % - specifies a padding in % of the width of the containing element • inherit - specifies that the padding should be inherited from the parent element

CSS: Colour

CSS Colour • Colors in CSS are most often specified by: • A valid color name - like "red" • An RGB value - like "rgb(255, 0, 0)" • A HEX value - like "#ff0000" • rgb(red 0-255, green 0-255, blue 0-255) • #r8r1g8g1b8b1 - e.g. “#00ff00” is just green • Hex uses 0-9 and a-f You can find a list of supported colour names at: https://www.w3schools.com/colors/colors_names.asp And colour pickers at: W3schools Colour Picker: http://www.w3schools.com/colors/colors_picker.asp Palleton: http://paletton.com/

CSS: Animations

CSS Animations • An animation lets an element gradually change from one style to another. • You can change as many CSS properties you want, as many times you want. • To use CSS3 animation, you must first specify some keyframes for the animation. • Keyframes hold what styles the element will have at certain times.

CSS @keyframes Animations • When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. • To get an animation to work, you must bind the animation to an element. • You must also set a duration in seconds. Otherwise we won’t see the animation

CSS @keyframes Animations The following example binds the "example" animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow"

Important Links https://www.w3schools.com/colors/colors_names.asp http://www.w3schools.com/colors/colors_picker.asp http://paletton.com/

Web Programming and Design