Introduction to Multimedia MMP100 Fall 2015 profehagan@gmail.com thiserichagan.com/mmp100 9/16/2015
Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax! Any mistakes? Check your file names! Any spelling errors, spaces, or weird characters? Check your file paths and extensions! Are your files there? Are they the right type? Did you save the most recent changes?
Corrections Absolute vs. Relative location! About.html vs. C://documents/myname/about.html Resizing images evenly Aspect ratio! Spot checking links! <a href= "http://www.google.com"> WRITE TEXT HERE</a>
Recap Lists ol, ul, li,dl Links <a href= url.html > Images <img src= filename.jpg >
FTP recap I received a fair amount of homework in the correct format, thank you! However, not everyone seemed to understand, so I am going to cover FTP and Filezilla again. Ask your questions now. FOR HOMEWORK TO BE CONSIDERED COMPLETED, IT MUST BE UPLOADED ONLINE. HOMEWORK DOES NOT COUNT IF YOU JUST E-MAIL ME THE FILES
Filezilla Uses FTP protocol Host name: mmp.bmcc.cuny.edu User name: Given to you (firstname.lastname) Password: Given to you You use this to log into your account (server space) and upload your files
What does the URL look like Lets say you create a folder for homework two named hw2 inside of your main folder. You also place a homepage (index.html) inside of this folder. The link to your website page (http) will be http://mmp.bmcc.cuny.edu/username/hw2 This is what should be e-mailed to me, for every assignment this semester.
File structure and extensions THESE MATTER! Just like if we move our directories around (folders) or save it in a different place, we can break stuff! Consistency will help! RESTful architecture (fancy way of saying organized structures) for our files and multiple websites will make it easier, I will demonstrate
Any questions about FTP? Or what is required for all homework from here on out?
One final (for now) Html Element <div> Groups a set of elements together Hold sections of the page Example: <div id= header > <img src= header.jpg alt= header goes here > <ul> <li><a href= index.html >Home</a><li> <li><a href= about.html >About<a></li> </ul> </div>
Dreamweaver Let s open it up and take a look It writes the code for you! But, this is not necessarily a good thing.
The moment you have all been CSS! waiting for Cascading Style Sheets Style cascades down the page (applies to all elements specified) Whichever style is lower applies to the rest of the document
CSS explained Control elements of the boxes Width and Height Borders (color, width, style) Background color and images Positions in browser window Text Typeface Size Color Italics, bold, uppercase, lowercase, small-caps
CSS CSS works by associating rules with HTML elements Two parts to a CSS rule: a selector a declaration Example: p { font-family: Arial;}
CSS declaration Sit inside { curly brackets } Two parts property value Example h1, h2, h3 { font-family: Arial; color: red;}
External vs Internal CSS External a secondary document which holds all of your styles This is best, since if you have multiple pages with the same style and you want to change something, its in one place This will show up next class (one thing at a time) Internal css styles inside the same page as your html structure elements Normally placed inside <head> tag <style> element
<style type="text/css > h1, h2, h3 { font-family: Arial; color: red;} </style>
Internal style <!DOCTYPE html> <html> <head> <title>css Beginning</title> <style type="text/css"> h1, h2, h3 { font-family: Arial; color: red;} </style> </head> <body> <h1>see the color change</h1> <p> This is unaffected</p> <h2>we only told the headers</h2> <h3>so they are the only ones that change</h3> <p>paragraphs still have default formatting</p> </body> </html>
Beautiful examples! http://spyrestudios.com/awesomesubmissions-css-awards/ http://www.awwwards.com/ http://www.michelbergermonkey.com/ CSS can make your page!
Back to learning CSS Selectors! Determine which parts of the text get the formatting specified Can be as specific or vague as you want The more specific or lower style takes over/ gets implemented! CSS selectors are CASE SENSITIVE!
Selector Options Universal Selector * { } Targets all elements on the page Type Selector Matching element names h1, h2, h3 { } id Selector Matches id attribute #introduction { }
Selector Options continued Class Selector class html attribute makes elements part of a type.note { } = all elements with a class attribute of note Example:.note { } All elements with a class of note Also specify html element + class Example: p.note { } Only paragraph elements with a class attribute of.note
Selector Options Continued Child Selector Continued Matches element that is a direct child Example: li>a { } (links that are in list elements) Descendant Selector Matches element that are any descendent (not just immediate) Example: p a { } (links inside any paragraph element)
Continued Continued Continued Continued etc Adjacent Sibling Selector Matches an element that is the next sibling of another Example: h1 + p { } (heading one followed by a paragraph, only the first paragraph is targeted) General Sibling Selector Matches an element that is a sibling of another (doesn t have to be immediate next) Example: h1~p{ } (would apply to all paragraphs after a <h1> header)
What happens when multiple rules apply? The Last Rule takes over (if two selectors are identical) Specificity takes over (if one is more specific than another) You can add!important after any property value to indicate it is more important than other rules
<!DOCTYPE html> <html> <head> <title>how CSS Rules Cascade</title> <style type="text/css"> * { font-family: Arial, Verdana, sans-serif;} h1 { font-family: "Courier New", Courier, monospace;} i { color: green;} i { color: red;} b { color: pink;} p b { color: blue!important;} p b { color: violet;} p#intro { font-size: 100%;} p { font-size: 75%;} </style> </head> <body> <h1>potatoes</h1> <p id="intro">there are <i>dozens</i> of different <b>potato</b> varieties.</p> <p>they are usually described as early, second early and maincrop potatoes.</p> </body> </html>
ASSIGNMENT #3: Make corrections to your code! You are welcome but not required to add information, but you need to correct the websites (and meet the minimum requirements from last week s assignment) Style the TWO PAGES you made for homework assignment #2! Internal CSS Text elements (spacing, font, etc) Color, but this will be covered more in-depth next week Consistency, make me believe this is the same person making one website for a reason