Downloaded 116 times
Uploaded byIvano Malavolta
4,500 views
HTML5 and CSS3 Refresher
The document contains a large amount of HTML code, including elements such as headers, footers, navigation, articles, and multimedia sources like audio and video. It also includes JavaScript functions for geolocation and web worker processes, as well as CSS styling for various elements. Additionally, media queries are present for responsive design across different devices.
Related topics:
More Related Content
What's hot
Viewers also liked
![[2016/2017] RESEARCH in software engineering](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fivano01seresearch-161220160404-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Modeling behaviour via UML state machines [Software Modeling] [Computer Scie...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f05statemachines-170306092754-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Similar to HTML5 and CSS3 Refresher
More from Ivano Malavolta
![[2017/2018] AADL - Architecture Analysis and Design Language](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fivano04saaadl-171122165132-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[2017/2018] Introduction to Software Architecture](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fivano02softwarearchitecture-171120182731-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[2017/2018] Architectural languages](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fivano03salanguages-171122083931-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Requirements engineering with UML [Software Design] [Computer Science] [Vrije...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f02requirements-180213083117-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Object-oriented design patterns in UML [Software Design] [Computer Science] [...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f04designpatterns-180228160652-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Modeling behaviour via UML state machines [Software Design] [Computer Science...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f05statemachines-180306225932-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Modeling objects interaction via UML sequence diagrams [Software Design] [Com...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f06sequencediagrams-180314152521-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Modeling and abstraction, software development process [Software Design] [Com...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f01intro-180206151252-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[2017/2018] Agile development](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fivano05agiledevelopment-171123214423-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f03structuremodeling-180219151135-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![How Maintainability Issues of Android Apps Evolve [ICSME 2018]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2ficsme2018-180928081558-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
HTML5 and CSS3 Refresher
- 5.
- 6. – – –
- 7.• – – – – –
- 8.
- 10.
- 13.• –• –• –• –
- 14.<!DOCTYPE html><html><head> <title>Title</title> </head> <body> … </body></html>
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 22.
- 24.
- 25.<input type="search"><input type="number"><input type="range"><input type="color"><input type="tel"><input type="url"><input type="email"><input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"><input type="datetime-local">
- 26.– <input type="text“ autofocus>– <input type="text“ placeholder=“your name”>
- 27.
- 28.<audio><audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported</audio> sources
- 30.play() pause() load()currentTime ended volume…
- 31.<video><video width="320" height="240"controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Not Supported</video> sources
- 33.play() pause() load()currentTime ended volume…
- 34.<video><iframe width="560" height="315" src="http://www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>
- 35.
- 39.
- 41.function getLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log(„no geolocalization‟); }}function showPosition(position) { console.log(position.coords.latitude); console.log(position.coords.longitude);}
- 43.
- 47.
- 48.
- 49.
- 51.
- 54.
- 55.
- 56.
- 57.var worker =new Worker(“worker.js”);
- 58.$(„#button‟).click(function(event) { $(„#output‟).html(“starting”); worker.postMessage(“start”);});worker.onmessage = function(event) { $(„#output‟).html(event.data);}
- 59.onmessage = function(event){ if(event.data === “start”) { var result; // do something with result postMessage(result); }}
- 61.
- 63.
- 64.
- 65.selector { property: value; property2: value2, value3; ...}
- 66.body { background-color: red;}div { background-color: green;}
- 67.h1, h2, h3{ background-color: red;}
- 68.div {list-style-image: url(image.png); list-style-position: inside; list-style-style: circle;}
- 69.div {background:url(img.png), url(img2.png); background-size:80px 60px; background-repeat:no-repeat; background-origin:content-box;}
- 70.div {background-color: blue; background-color: rgba(0, 0, 255, 0.2); background-color: hsla(240, 100%, 50%, 0.2);}
- 71.div { background: -webkit-gradient(linear, right top, left bottom, from(red), green));}linear right-top left-bottom from to
- 72.p {color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; word-spacing: 10px;}
- 73.p {text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word;}
- 75.
- 76.• a { color: red; }• #redLink { color: red; }• redLink { color: red; }
- 77.• • • • target• target= "_blank“•
- 78.• "https”• ".pdf”• “mobile“• • •
- 79.
- 81.div {width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red;}
- 82.div {border-image:url(border.png) 30 30 round;}
- 83.
- 84.div {display: none;}
- 85.
- 86.div.hidden {visibility: hidden;}visible, collapse, inherit
- 87.box:•• box-orient#div { display: box; box-orient: horizontal;}
- 88.
- 89.box-pack box-orient: horizontal; box-pack: end;
- 90.box-align box-orient: horizontal; box-align: center;
- 91. widthbox-flex #box1 { width: 100px; } #box2 { box-flex: 1; } #box3 { box-flex: 2; }
- 92.
- 99.
- 100.@font-face {font-family: NAME; src: url(Dimbo.ttf); font-weight: normal; font-style: normal;}
- 101.NAMEdiv {font-family: NAME;}
- 103.
- 109.• – all• –• –• –
- 110..imageThumbnail {width; 200px; transition: all ease-in 3s;}.zoomed { position: absolute; left: 0px; top: 0px; width: 480px;}$(„.imageThumbnail‟).addClass(„zoomed‟);
- 111.div {animation: test 5s ease-in;}
- 112.
- 113.@keyframes test{0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}
- 115.• – –• – –• – –
- 116.
- 117.
- 118.• <link rel=“stylesheet” href=“style.css” media=“screen” />• @media screen { div { color: red; } }
- 119.
- 121.@media screen andorientation: portrait
- 123.@media screen and(max-device-width: 480px){ /* your style */}
- 124.@media screen and(color), handheld and (color) { /* your style */}
- 125.@media not (width:480px){ /* your style */}
- 126.@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */}
- 127.@media only screenand -webkit-min-device-pixel-ratio: 2@media only screen and (device-width: 768px) and (orientation: landscape)@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
- 129.• – –• – –
- 130.• –• –• –
- 131.• –•