HTML and html5

1. HTML and html5 Matt Brendzel GA Boston Programs Producer William Neely CEO, Piecewise.com

2. HTML and CSS Objectives Download the labs zip from session 2 Head element Body element FTP Web design fundies CSS syntax Basic CSS props Time permitting • Colors, images, and project

3. HTML and CSS HTML template Go to template Notes The root or "home" file is named "index.html" Images are stored in an "images" folder CSS goes in a "css" folder In future lessons, JavaScript will go in a "js" folder, fonts in "fonts" folder, etc All directories should be lowercase, without spaces or other illegal characters

4. Html and css Page Layout & CSS Background Divs and IDs Div: A box element that holds content; division ID: A unique attribute that can be used to select a particular element for manipulation or styling -Page layout example

5. HTML and CSS What is css? Examples General Assembly • http://generalassemb.ly/ ZenGarden • Launched 2003 • Show off what could be done with CSS • http://www.csszengarden.com/?cssfile=/213/213.css&page=0 • http://www.csszengarden.com/?cssfile=/212/212.css&page=0 • http://www.csszengarden.com/?cssfile=/210/210.css&page=0 • http://www.csszengarden.com/?cssfile=/207/207.css&page=0

6. HTML and CSS What is css? Responsive design Controlled by CSS • http://Sweethatclub.org Targeting basic elements • Tags • IDs

7. CSS syntax

8. HTML AND CSS Fonts Font-size • Px, ems,percentage Font-family • Helvetica, Arial, Verdana etc • Multiple defines • serifs • Quotes on names with spaces Font-style • Italic, oblique Font-weight • 100-900, bold, bolder Color • Hex, rgb (a), name • http://www.w3schools.com/cssref/css_colornames.asp

9. Html and css Font face For non supported fonts @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

10. HTML and css FTP Filezilla-project.org Connect using • Sftp://studio.generalassemb.ly • User: student • Pw: yellowpencil Create folder (first initial, last name) Create folders c01, c02 Upload cookie monster to c01

11. HTML and CSS Inheritance Inherited attributes • From parent Examples • color • font (and related properties) • letter-spacing • line-height • list-style (and related properties) • text-align Non-inherited • Defined • inherit Examples • background • Border • display • float and clear • height and width • margin (and related properties) • min- and max-height and -width • outline ROT: Would I want it to be inherited?

12. HTML and CSS Source Order Where “Cascading” comes from Last attribute Unless !important

13. Html and css Travel blog Find three travel pictures, upload to Duplicate: http://blog.flickr.net/en

14. HTML AND CSS Colors RGB (A) • Additive • RGB 0-255 • Rgba(255,255,255,0.5); where “a” is opacity Hex • Same as RGB • Divide value by 16 for first num • Second num is remainder • 0-9,A-F (10-15) • First 2- Red,Second 2- Green,Last 2- Blue CYMK http://www.colorpicker.com/

15. HTML and css Image file types GIF (Graphics Interchange Format) • 256 colors • Image transparency • Good for moving images • JPG (Joint photographic experts group) • Compressable • No transparency • Good for normal, non transparent images PNG (portable network graphic) • Transparency • Best for photographs • SVG (Scalable vector graphic) • Good for responsive design

16. Html and css Project Start thinking of a site you would want to create

17. Html and css Homework Band Website (submitted for a grade by class #04: Students will create a website for their favorite band. Requirements: 3 page website (suggestion: develop the first page before proceeding)  Use the various HTML elements and CSS properties introduced  Use both HTML <img> elements and CSS background images Include at least 1 YouTube or Vimeo video Include a Google Map on the band's tour page Upload this project to the server via FTP