In this class we go deeper into the corking of CSS and look and the novelties in HTML 5, more specifically concerning the integration of media files, creation of forms, and optimisation for responsive design
2. CSS
• Cascading Stylesheets
• To apply layout to a HTML page, in a way that clearly separates
layout from content
• Selectors: indicate to what you want to apply formatting
• Cascading: Styles are inherited
• 3 ways to implement:
• Inline styles
• In the HTML Header
• In a separate CSS file
3. CSS Selectors
• Any HTML Element
• body
• h1
• p
• a
• li
• …
• id selector: #myparagraph1 #mainimage
• class selector: .citation .french .highlight
4. CSS Box Model
• The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
6. CSS Examples
• Inline styles
• <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
• In Header Element
• <head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
14. HTML color codes
• http://www.w3schools.com/colors/colors_picker.asp
• http://htmlcolorcodes.com/color-picker/
15. Forms
• Forms are an easy way to implement interactivity on a
website
• You need 2 pages (you can combine it in one):
• the actual HTML page with Form elements
• A server-side or client-side script that will parse the form
17. Form Example Code
<form id="form1" name="form1" method="post"
action="processthisform.php">
<p>
<label for="Name">Name</label>
<input type="text" name="Name" id="Name" />
</p>
<p>Study programme:
<select name="Programme" id="Programme">
<option value="1">Master of Arts in Cultural
Studies</option>
<option value="2">Master of Arts in History</option>
<option value="3">Master of Science in Information
Management</option>
</select>
</p>
23. HTML 5
• Main features
• Back to HTML
• Semantic elements
• Graphics
• Multimedia
• New API’s
• Obsolete tags removed
• Optimized for Mobile
• Increased importance of JavaScript
• HTML5 Canvas
24. What you need to learn
• HTML Box Model & CSS
• Understand the HTML DOM
• HTML Forms
• Javascript & jQuery
27. Graphics
• Canvas
• Drawing graphics on the fly using Javascript
• SVG
• You can now directly define SVG graphics in HTML
28. Multimedia
• Video tag
• <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• Audio tag
• <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
• Iframe tag for Youtube
• <iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>