170 likes | 312 Views
HTML and html5. William Neely CEO, Piecewise.com . 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. HTML and CSS. HTML template. Go to template
E N D
HTML and html5 William Neely CEO, Piecewise.com
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
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
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
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
HTML and CSS What is css? Responsive design Controlled by CSS • http://Sweethatclub.org Targeting basic elements • Tags • IDs
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
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'); } Fontsquirrel.com
HTML and css FTP Filezilla-project.org Connect using • Sftp://studio.generalassemb.ly • User: student • Pw: yellowpencil • Port number 22 Create folder (first initial, last name) in FEWDBOS2 Create folders c01, c02 Upload cookie monster to c01
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?
HTML and CSS Source Order Where “Cascading” comes from Last attribute Unless !important
Html and css Travel blog Find three travel pictures, upload to Duplicate: http://blog.flickr.net/en
HTML AND CSS Colors RGB (A) • Additive • RGB 0-255 • Rgba(255,255,255,0.5); 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 • #FFF CYMK http://www.colorpicker.com/
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
Html and css Project Start thinking of a site you would want to create
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