Borough of Manhattan Community College Intro to Multimedia - MMP100 / SEC.900_6281 http://www.iraworks.com/bmcc Instructor: Ira Epstein iraSec900fall2018@.com Class 14 / Wednesday / 10-24-18 1) Attendance and Announcements ...... 9:00-9:10 a) Due at midnight: The Midterm / Graffiti Project b) Download – this week’s assets folder 2) Fonts & Web Design – 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 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 (command/c) the html (1) Paste (command/v) 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 this (but referencing your fonts): iv) Below that find the first reference to font-family (1) Paste this code into your CSS. If intended for the body 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:25 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; text-decoration: none; } c) About “visited” and Clearing Browser History – to update link styling i) The “visited” state may require that the browser history is cleared 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) TWO Samples ...... 10:25-10:30 a) The HTML SAMPLE – note how the Google Fonts get “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 2 3 Buddhism Home 4 5 6 7 8 9 10 HOME   

11 TEACHINGS    12 BOOKS    13 14

Buddhism

15 16

At Home in the Real World

17

Lorem ipsum dolor...

18
Meditation…fog of mental habits.
19

Lorem ipsum dolor...

20 21 22

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:" New", Courier, monospace; 9 font-size: 48px; 10 color: #ffffff; 11 background-color: #1c85a5; 12 padding: 0 5px 5px 5px; 13 width: 240px; 14 font-family: 'Lobster', cursive; 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 }

5) FOR NEXT MONDAY ...... 10:30-10:40

DUE: Wednesday 10/31 Visit Google Fonts and use their fonts as described below. Also use your CSS page to create the four link states. As follows: 1. Download the class14-assets.zip from my web site a. Inside it is the homework-assets folder, b. Rename this folder: Sec900Class14-FirstnameLastname

2. Use Google Fonts as follows: a. Visit Google Fonts, https://fonts.google.com/ b. Select Pathway Gothic One as your default (or choose a font of your own). You’ll apply this to your body tag in the CSS, so most of your text will use it c. Select Lobster for your h1 tags (or choose a font of your own) d. In all 3 html pages insert the html code (provided by Google Fonts), into each section (before the link to your style sheet) e. In your CSS, style both body{ } and h1{ } with the specific CSS (provided by Google Fonts). Use Pathway for your body. Use Lobster for your h1. [Or, if you selected different fonts use those] 3. * ALSO (!), in your CSS, style your link state colors as described in this handout 4. Zip your folder a. The zip will be named: Sec900Class14-FirstnameLastname.zip b. Send it as an email attachment – to [email protected] – with the subject line, Sec900Class14-FirstnameLastname

➢ OPTIONAL READING: explore https://developers.google.com/fonts/

© Ira Epstein 2018