Introduction to Multimedia. MMP100 Spring 2017 thiserichagan.com/mmp100

Transcription

1 Introduction to Multimedia MMP100 Spring 2017 thiserichagan.com/mmp100

2 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?

3 Lists Two types, Ordered and unordered All items inside must have an open and closed list item tag <li></li> Lists can be nested inside each other

4 Ordered Lists <ol> list elements </ol> Numbered lists, for when order matters Example: Cooking Pancakes Steps <ol> <li>in a large bowl, sift together the flour, baking powder, salt and sugar.</li> <li> Heat a lightly oiled griddle or frying pan over medium high heat. Pour or scoop the batter onto the griddle</li> </ol>

5 Unordered lists <ul> list elements </ul> When order of elements is not important Example: Cooking Pancakes ingredients <ul> <li>eggs</li> <li>butter</li> <li>milk</li> <li>flour</li> </ul>

6 Definition list Definition Lists <dl> <dt>html</dt> <dd>hypertext Markup Language</dd> <dt>css</dt> <dd>cascading Style Sheets</dd> </dl>

7 Nested lists Place lists inside one another <ol> <li>first step</li> <ul> <li>order doesn&#39;t matter</li> <li>since they both fall under step one</li> </ul> <li>second step</li> </ol>

8 Special Characters in HTML specialcharacters.php Some basic punctuation marks, but also includes other symbols (arrows, card suits, currency, etc).

9 Links Utilize the anchor tag <a> Href = Hypertext Reference 3 types Links to other pages on the web Links to other pages on the same site Links to specific parts of the page

10 Links to Other Pages <a href= >Google</a> Everything within the anchor tag will link to the website. Normally to link to the front page of other websites The absolute URL

11 Links to Other Pages Do not need to specify the url, just the Relative URL Index.html is your main page, other pages also on the same site <a href= about.html >About</a> <a href= contact.html >Contact</a>

12 links Will start up user s program Similar to websites, but starts with mailto: <a href= mailto:eric@thiserichagan.com > me</a>

13 Links on a new page Force the browser to open the link in a new page Sometimes used for links to other pages Common courtesy to let them know it will open a new window <a href= target= _blank > Facebook</a>

14 Links to Places on the Page Help navigate longer pages or pages split into specific sections id html attribute, which can be used on every html element # hash in front of your link name

15 Importance of File Structure Parent => Child relationship

16 Images <img> tag Attributes include src (where to find the image) Normally a relative url (ie image is on your site) alt (text about the image) Title (additional info to the browser <img src= images/cat.jpg alt= A picture of a cute cat I found on the internet. />

17 Size of Image Height & width attributes Specify in pixels <img src= images/cat.jpg alt= A cute cat on the internet. width= 600 height= 480 />

18 Image placement Images are an inline element, and can be placed next to text. Let s take a look at an example from the book:

19 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>

20 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

21 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

22

23

24 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

25 CSS CSS works by associating rules with HTML elements Two parts to a CSS rule: a selector a declaration Example: p { font-family: Arial;}

26 CSS declaration Sit inside { curly brackets } Two parts property value Example h1, h2, h3 { font-family: Arial; color: red;}

27 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

28 <style type="text/css > h1, h2, h3 { font-family: Arial; color: red;} </style>

29 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>

30

31 Beautiful examples! CSS can make your page!

32 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!

33 Selector Options Universal Selector * { } Targets all elements on the page Type Selector Matching element names h1, h2, h3 { } id Selector Matches id attribute #introduction { }

34 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

35 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)

36 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)

37 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

38 Assignment 2: 2 html pages on any topic you want! Please remember this is a homework assignment for school Must include: Headers, paragraphs, one list, AT LEAST 2 links per page (one should probably be navigation between them...) and 2 images