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
<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
CSS
Where to write our CSS? <div style=”color: blue; ”></div> 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>
h1 {color: blue;} What is CSS? 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
h1 {color: blue; text-align: center;} 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
h1 {color: blue;} 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;}
<h1 id=”myH1” >My Heading</h1> 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;}
<h1 class=”blueText” >My Heading</h1> 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_name s.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/