1 / 22

Web Programming and Design

This plan covers the next 4 weeks of the course, including HTML tags, CSS, JavaScript, and creating a portfolio site. Learn to structure websites using HTML markup, style with CSS, and add interactivity with JavaScript.

lofton
Download Presentation

Web Programming and Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  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. 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

  4. CSS

  5. 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>

  6. 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

  7. 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

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

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

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

  11. CSS: Padding, margin, border

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

  13. 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

  14. 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

  15. CSS: Colour

  16. 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/

  17. CSS: Animations

  18. 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.

  19. 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

  20. 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"

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

More Related