HTML5 Bootstrap Mobirise Guide
•Télécharger en tant que PPTX, PDF•
1 j'aime•1,939 vues
http://KOKUIS.my/html5 HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser. . Bootstrap – A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop. . Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (9)
Similaire à HTML5 Bootstrap Mobirise Guide
Similaire à HTML5 Bootstrap Mobirise Guide (20)
Plus de Khirulnizam Abd Rahman
Plus de Khirulnizam Abd Rahman (18)
Dernier
Dernier (20)
HTML5 Bootstrap Mobirise Guide
- 1. HTML5 + BOOTSTRAP & MOBIRISE Khirulnizam Abd Rahman ( Kerul.net ) FSTM, KUIS. Materials at bit.ly/html5000
- 2. TRAINING OUTLINE HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser. Bootstrap – A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop. Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design. 11/8/2016 http://blog.kerul.net 2
- 3. HTML5 HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without having to install additional plugins to browser. <!DOCTYPE html> 11/8/2016 http://blog.kerul.net 3
- 4. HTML5 IMAGE HANDLING <img src="pic_mountain.jpg" alt="MountainView" style="width:304px;height:228px;"> Use width 100% to support responsive layout design. 11/8/2016 http://blog.kerul.net 4
- 5. HTML5 NATIVEVIDEO <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> 11/8/2016 http://blog.kerul.net 5
- 6. HTML5 NATIVE AUDIO <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> 11/8/2016 http://blog.kerul.net 6
- 9. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 9
- 10. HTML RESPONSIVE LAYOUT What is Responsive Web Design? Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen 11/8/2016 http://blog.kerul.net 10
- 11. VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1"> The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. 11/8/2016 http://blog.kerul.net 11
- 12. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 12
- 13. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 13
- 14. BOOTSTRAP A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet and desktop. 11/8/2016 http://blog.kerul.net 14
- 15. BOOTSTRAP Download framework from getbootstrap.com OR use the CDN 11/8/2016 http://blog.kerul.net 15
- 16. BOOTSTRAP -SETTING > Copy the CSS script to the project folder. > OR we can use CDN server 11/8/2016 http://blog.kerul.net 16
- 17. BASIC BOOTSTRAP LAYOUT Try it here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ default&stacked=h 11/8/2016 http://blog.kerul.net 17
- 19. BOOTSTRAP GRID SYSTEM 11/8/2016 http://blog.kerul.net 19
- 20. BOOTSTRAP GRID SYSTEM DESKTOP 11/8/2016 http://blog.kerul.net 20 Banner Footer Main Content Sidebar
- 21. BOOTSTRAP GRID SYSTEM MOBILE 11/8/2016 http://blog.kerul.net 21 Banner Footer Main Content Sidebar
- 22. FREE STARTBOOTSTRAP.COM Example https://startbootstrap.com/ 11/8/2016 http://blog.kerul.net 22
- 23. SAMPLE1 – ICITM2016 11/8/2016 http://blog.kerul.net 23
- 24. SAMPLE2 - SMARTSOLAT 11/8/2016 http://blog.kerul.net 24
- 25. MOBIRISE Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design. 11/8/2016 http://blog.kerul.net 25
- 26. MOBIRISE Done with the talking, lets walk the talk… ;) 11/8/2016 http://blog.kerul.net 26
- 32. MOBIRES- CHANGING IMAGE 11/8/2016 http://blog.kerul.net 32
- 36. THANKYOUVERY MUCH Newton keep asking, Why apple FALL from tree? Everybody asks silly questions before becoming a star… 11/8/2016 http://blog.kerul.net 36