mis 425 lecture 3 – html 5 and css instructor: martin neuhard ([email protected])
TRANSCRIPT
Lecture Agenda• Lecture 2 Recap• Assignment 1 Recap• HTML 5.0
– Tags– Browser Support– Standard Browsers / Versions
• CSS Cascading Style Sheets– 3 ways to insert style sheets– External– Internal– Inline
• Homework -- Find a website you like, why you like it, what you would like to learn to do.
Lecture 2 Recap
• Introduced HTML Elements– Navigation– Tables – Bulleted Lists
• Introduced Styles– CSS Cascading Style Sheets– Text styles
Assignment 1 Recap
What am I looking
For?
-4 panes-Multiple Pages-Multiple Colors-External absolute links-Internal relative links
HTML 5.0• Perks
– Developers can now drop content into a page using ‘audio’ and ‘video’ tags– Simplified linking permits greater control over various elements via
JavaScript, allowing customization for a better end user experience.– The ‘canvas’ option offers a true alternative to Flash – HTML5 designed for desktop and mobile device browsers
• Cons– Net yet full adopted, IE is still behind in its support
• Introduction of tags– Audio Tag– Video Tag
Browser Support
• Browsers do support previous versions of HTML and HTML tags.
• Backwards compatibility is importantSCORE
Chrome 21 » 437
Maxthon 3.4.1 » 422
Opera 12.00 » 385
Safari 6.0 » 376
Firefox 14 » 345
Internet Explorer 9 » 138
Based on 500 point scale
Browser Support
Audio/Video Tags
• Allow you to embed audio/video directly into a page
• Can have controls or be played automatically• Allows the object to be interacted with much
more readily (via styles and or javascript)
Audio Tag Example
<audio controls="controls"> <source src="media/soulbuilder.mp3" /> Your browser does not support this audio control </audio>
Video Tag Example
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type=“video/mp4" /> Your browser does not support the video tag.</video>
Styles
External Styles
• An external style sheet is most useful when it is applied and entire Web Site. This allows changes to be made in 1 place.
<head><link rel=“stylesheet” type=“text/css” href=“lecture_3_e1” />
</head>
Create a CSS File link to example
• Open Notepad• Save File as lecture_3_e1.css
• Open lecture_2_e1.html• Save File as lecture_3_e1.html• Insert code below <html> and above <body>
h1 {color: red}a {color: gray; font-weight: bold}
<head><link rel=“stylesheet” type=“text/css” href=“lecture_3_e1” />
</head>
Internal Styles
• An internal style sheet should be used when a single document has a unique style.
• You define internal styles in the head section of an HTML page, by using the <style> tag.
<head><style type="text/css">p {font-weight:bold;}</style>
</head>
Add Internal Styles
• Open lecture_2_e1.html• Below the <html> tag and above the <body>
tag
• Save the file as lecture_3_e1.html
<head><style type="text/css">p {font-weight: bold;}</style>
</head>
Inline Styles
• This is the least effective method, it loses the advantage of change once, effect many
• To use inline styles you use the style attribute in the relevant tag.
<li style=“font-family: courier new;”>Relative</li>
Homework
• Remember, no classes on Tuesday next week!• Please find a website that you really like, tell
me what elements you like about it and let me know if there is anything you think is “cool” and would like to learn about.
• Email this information to [email protected]
Question and Answer