Class 8 / Friday / 3-23-18 1) Attendance and Announcements
Total Page:16
File Type:pdf, Size:1020Kb
Borough of Manhattan Community College Intro to Multimedia - MMP100 / SEC.903_18322 http://www.iraworks.com/bmcc Instructor: Ira Epstein [email protected] Class 8 / Friday / 3-23-18 1) Attendance and Announcements ..................................................................... 9:00-9:10 a) Note Re. The Midterm: The midterm is due at midnight tonight. Are you ready? b) Vacation dates: March 30 – April 8th / No school i) We resumee – WEDNESDAY 4/11 (following a friday schedule) c) Download – this week’s assets folder 2) Web Fonts – compared/advanced .................................................................... 9:10-9:40 a) Web Safe Fonts – the “old school” method, listed (and limitations discussed) b) Web Based Fonts – web libraries discussed (like Google Fonts, Font Squirrel, etc.) c) Google Fonts – how to use them i) Browse https://fonts.google.com/, select a font (or more), and click the + sign ii) Go to the bottom of your window and click the black bar iii) In the embed section, select and copy the html (1) Paste this code into the head section of every page. Put it right before the link to your own style sheet (2) It will look something like (but referencing your fonts): <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'> iv) Below that, find the first reference to font-family (1) Paste this code into your CSS. If intended for the body tag it would look like: body{ font-family: ‘Raleway’, sans-serif; } v) Repeat (iv) above for each additional font that you selected 3) Link “States” – using link, visited, hover, and active ..................................... 9:40-10:30 a) These are the 4 link states, and they MUST be styled in the order listed below– i) link (not yet clicked): ii) visited (a link that was already followed), iii) hover (a link currently rolled over), and iv) active (a link that is currently being clicked on) b) Sample CSS – NOTE there should be NO SPACE before or after the colon in the 1st line! a:link{ color: red; } c) About “a:link” and Clearing Browser History – to update link styling i) To change the color of the “link” state you must clear the browser history. [This renews the links that have already been clicked, so that the browser won’t continue to show the visited state’s colors. You’ll then see the “fresh” link colors.] ii) For Chrome – (1) Use the top right corner menu> More Tools> Clear Browsing Data (2) Check “Browsing History,” and click “Clear Browsing Data” 4) Break ................................................................................................................... 10:30-11:00 5) Navbars – Vertical Navbars / introduced ......................................................... 11:00-11:35 a) Using a div <div>, an Unordered List (ul), and list items <li> for links i) The HTML <div class= “nav-container”> <ul> <li><a href=“index.html”>HOME</a></li> <li><a href=“http://www.cnn.com”>NEWS</a></li> </ul> </div> ii) The CSS – See the CSS in today’s assets folder (this code isn’t included in 7, below) 6) Assisted Lab/Optional – last hand for the midterm projects ......................... 11:35-12:25 7) TWO Samples ..................................................................................................... 12:25-12:30 a) The HTML SAMPLE – note how google fonts gets “connected” in the head section b) The CSS SAMPLE – see how the 4 link states are styled & how Google fonts are used index.html 1 <html> 2 <head> 3 <title>Buddhism Home</title> 4 <meta charset="utf-8"> 5 <link href=https://fonts.googleapis.com/css?family=Lobster|Pathway+Gothic+One rel="stylesheet"> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 9 <body> 10 <a href="index.html">HOME</a> 11 <a href="teachings.html">TEACHINGS</a> 12 <a href="books.html">BOOKS</a> 13 14 <h1>Buddhism</h1> 15 <img src="images/buddha-statue.jpg" class="rt-responsive"> 16 <h2>At Home in the Real World</h2> 17 <p>Lorem ipsum dolor...</p> 18 <div class="mydiv">Meditation…fog of mental habits.</div> 19 <p>Lorem ipsum dolor...</p> 20 21 </body> 22 </html> style.css 1 body{ 2 margin: 50px 15% 50px 15%; 3 background-color: #b7dbe6; 4 font-family: 'Pathway Gothic One', sans-serif; 5 color:#1c85a5; 6 } 7 h1{ 8 font-family: 'Lobster', cursive; 9 font-size: 48px; 10 color: #ffffff; 11 background-color: #1c85a5; 12 padding: 0 5px 5px 5px; 13 width: 240px; 14 /*next line spreads the letters out*/ 15 letter-spacing: 4px; 16 } 17 h2{ 18 font-size: 36px; 19 } 20 .rt-responsive{ 21 max-width:100%; 22 height: auto; 23 float: right; 24 margin:15px 0 15px 15px; 25 } 26 p{ 27 text-align: justify; 28 } 29 a{ 30 font-size: 24px; 31 font-weight: 600; 32 text-decoration: none; 33 } 34 a:link { 35 color: #1c85a5; 36 } 37 a:visited { 38 color: #a9951a; 39 } 40 a:hover { 41 color: #ffffff; 42 } 43 a:active { 44 color: #f1f084; 45 } 46 .mydiv{ 47 font-size: 26px; 48 width:240px; 49 border: solid 5px #ffffff; 50 padding: 36px; 51 margin: 20px 50px 30px 0; 52 float:left; 53 } 8) FOR NEXT CLASS .............................................................................................. 12:30-12:40 a) See next page DUE: Wednesday 4/11 Please have fun and get some rest! Have a great spring break – with no HW! 1. NOTE: I am no longer accepting late work for classes 1 – 4. 2. However: if you’re behind, this is a final extension for the following assignments: a. Class 5 (given 3/2) – see the handout online b. Class 6 (given 3/9) – see the handout online c. The midterm is due tonight: 3/23 3. The Class 5 and 6 assignments will not be accepted after 4/11. Extensions for any prior work have already expired. ➢ OPTIONAL READING: explore https://developers.google.com/fonts/ © Ira Epstein 2018 .