Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Size: px

Start display at page:

Download "Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3"

Hannah Wilcox
6 years ago
Views:

1 Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows dual boot and automatically start with Linux; it is therefore necessary to explicitly select the Windows 7 option) 2. Login with studente as your username and pass as your password. Then, in the dialog box that will appear, provide your actual username and password 3. Your home is the X: drive all your files must be saved there (or in subdirectories of the X: drive) 4. At the end of the class, please logout, restart the computer and boot to Linux Steps: 1. In a folder of your choice, create the following HTML 5 file (name it index.html): <!DOCTYPE html> <html> <head> <title>my HTML 5 page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <header id="header"> <h1>this is the Header</h1> </header> <nav id="menu"> <h2>this is the navigation bar</h2> </nav> <article id="main"> <h2>this is the main content</h2> <img src="im1.jpg" /> <p>this is a paragraph</p> <video id="myv" src="ironman.webm" width="720" controls="controls"> Sorry, your browser does not support the VIDEO tag </video> <audio src="bach.mp3" controls="controls"> Sorry, your browser does not support the AUDIO tag </audio> </article> <aside id="sidebar"> <h3>this is the sidebar</h3> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </aside> <footer id="footer"> <h4>this is the footer</h4> </footer> </body> </html>

2 2. Download the four files bach.mp3, bodybg.jpg, im1.jpg and ironman.webm from the address to the same folder where there is index.html 3. In the same folder where there is index.html, create the file style.css with the following content and check the result (if possible, use Google Chrome or another browser that fully supports HTML 5 and CSS 3 ): body { background: #fff; color: #000; font-family: Arial, sans-serif; h1, h2, h3, h4, p { padding: 10px; img { width: 100%; height: auto; #container { width: 960px; margin: 0px auto; #header { width: 960px; float: left; background: #21aabd; color: #fff; #menu { width: 960px; float: left; background: #888; color: #fff; #main { width: 720px; float: left; background: #eee; #sidebar { width: 200px; float: right; background: #dfdfdf; #footer { width: 960px; float: left; background: #666; color: #fff; #myv { width: 720px 4. At the end of the file style.css add the following content, and check the result (now the page is responsive ): /** Media Queries (min-width: 768px) and (max-width: 980px) { #container { width: 748px; margin: 0px auto; #header { width: 748px; #menu { width: 748px; #main { width: 510px; #sidebar { width: 210px; #footer { width: 748px; #myv { width: (max-width: 767px) { #container { width: 100%; margin: 0px auto; #header { width: 100%; #menu { width: 100%; #main { width: 100%; #sidebar { width: 100%; #footer { width: 100%; #myv { width: 100%

3 @media (min-width: 1200px) { #container { width: 1170px; #header { width: 1170px; #menu { width: 1170px; #main { width: 700px; #sidebar { width: 420px; #footer { width: 1170px; 5. In the HTML file, substitute the content of the <nav> tag with the following list: <li> <a href="">menu 1</a> <li><a href="">menu 11</a></li> <li><a href="">menu 12</a></li> <li><a href="">menu 13</a></li> </li> <li> <a href="">menu 2</a> <li><a href="">menu 21</a></li> <li> <a href="">menu 22</a> <li><a href="">menu 221</a></li> <li><a href="">menu 222</a></li> <li><a href="">menu 223</a></li> </li> </li> 6. At the end of the CSS file add the following style definitions, and check the result: #menu ul { padding: 0px; margin: 0px; #menu li { position: relative; float: left; list-style: none; margin: 0px; padding: 0px; #menu li a { width: 100px; height: 30px; display: block; text-decoration: none; text-align: center; line-height: 30px; background-color: #666666;

4 color: white; border: 1px solid white; #menu li a:hover { background-color: red; #menu ul ul { position: absolute; top: 30px; visibility: hidden; width: 100px; #menu ul li:hover ul ul { z-index: 20; visibility: hidden; #menu ul li:hover ul { z-index: 10; visibility: visible; #menu ul li:hover ul li:hover ul { z-index: 20; visibility: visible; left: 6em; top: 10px;; 7. In the CSS file, progressively add the style definitions of the following points; also, add the corresponding <div> elements at the beginning of the <article> section 8. Rollover button with transition: #rolltr a.tr { font-weight: bold; padding: 5px 10px; background: #00ff00; box-shadow: 3px 3px 4px #999; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-transition: background 1.0s ease, color 1.0s linear; -moz-transition: background 1.0s ease, color 1.0s linear; -o-transition: background 1.0s ease, color 1.0s linear; transition: background 1.0s ease, color 1.0s linear; #rolltr a.tr:hover { background: #ffff00; color: #ff0000; box-shadow: 6px 6px 8px #999;

5 <div id="rolltr"> <a href="#" class="tr">press me!</a> 9. Other transition (box width change): #tr2 { width: 100px; height: 100px; background: red; transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s; -o-transition: width 2s; box-shadow: 6px 6px 8px #999; #tr2:hover { width: 300px; <div id="tr2"> What do you think about this effect? 10. Font. From download the font Walt Disney Script by clicking the on the right (alternatively, download another font, from this or any other website offering free fonts). Save the zip file in the same folder where there is index.html and unzip the four files with extension.eot,.svg,.ttf and.woff. Then use the font for the content of the <div> with { font-family: "Walt Disney Script"; src: url("wds eot?") format("eot"), url("wds woff") format("woff"), url("wds ttf") format("truetype"), url("wds svg#waltdisneyscript") format("svg"); font-weight: normal; font-style: normal; #myfont { font-family: "Walt Disney Script"; font-size: 3em; <div id="myfont"> In the end, thanks to CSS 3, fonts can be treated as external resources!

6 11. Two-dimensional transformation with transition: #tr2d { width: 200px; height: 100px; background-color: yellow; transition: all 2s; -moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; #tr2d:hover { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); <div id="tr2d"> What do you think about this effect?

<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} set font family for entire Web page