Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 + BOOTSTRAP & MOBIRISE Khirulnizam Abd Rahman ( Kerul.net ) FSTM, KUIS. Materials at bit.ly/html5000
TRAINING OUTLINE  HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation wi...
HTML5  HTML5 – refers to the modern day of HTML which promotes native handling of video & audio & animation without havin...
HTML5 IMAGE HANDLING  <img src="pic_mountain.jpg" alt="MountainView" style="width:304px;height:228px;">  Use width 100% ...
HTML5 NATIVEVIDEO <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.o...
HTML5 NATIVE AUDIO <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Y...
LOCATION MAPS 11/8/2016 http://blog.kerul.net 7
BLOCK <DIV> 11/8/2016 http://blog.kerul.net 8
HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 9
HTML RESPONSIVE LAYOUT  What is Responsive Web Design?  Responsive Web Design makes your web page look good on all devic...
VIEWPORT  <meta name="viewport" content="width=device-width, initial-scale=1">  The viewport varies with the device, and...
HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 12
HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 13
BOOTSTRAP  A HTML framework supports responsive web design to provide one time webpage development for smartphone, tablet...
BOOTSTRAP  Download framework from getbootstrap.com  OR use the CDN 11/8/2016 http://blog.kerul.net 15
BOOTSTRAP -SETTING > Copy the CSS script to the project folder. > OR we can use CDN server 11/8/2016 http://blog.kerul.net...
BASIC BOOTSTRAP LAYOUT  Try it here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ default&stacked=h 11/8/2...
BOOTSTRAP FORM 11/8/2016 http://blog.kerul.net 18
BOOTSTRAP GRID SYSTEM 11/8/2016 http://blog.kerul.net 19
BOOTSTRAP GRID SYSTEM DESKTOP 11/8/2016 http://blog.kerul.net 20 Banner Footer Main Content Sidebar
BOOTSTRAP GRID SYSTEM MOBILE 11/8/2016 http://blog.kerul.net 21 Banner Footer Main Content Sidebar
FREE STARTBOOTSTRAP.COM  Example https://startbootstrap.com/ 11/8/2016 http://blog.kerul.net 22
SAMPLE1 – ICITM2016 11/8/2016 http://blog.kerul.net 23
SAMPLE2 - SMARTSOLAT 11/8/2016 http://blog.kerul.net 24
MOBIRISE  Mobirise – a free web design studio that support HTML5 & Bootstrap’s famous ‘block’ design. 11/8/2016 http://bl...
MOBIRISE  Done with the talking, lets walk the talk… ;) 11/8/2016 http://blog.kerul.net 26
SELECTTHEME 11/8/2016 http://blog.kerul.net 27
11/8/2016 http://blog.kerul.net 28
Select block 11/8/2016 http://blog.kerul.net 29
11/8/2016 http://blog.kerul.net 30
11/8/2016 http://blog.kerul.net 31
MOBIRES- CHANGING IMAGE 11/8/2016 http://blog.kerul.net 32
MOBIRES-TEXT EDITING 11/8/2016 http://blog.kerul.net 33
11/8/2016 http://blog.kerul.net 34
11/8/2016 http://blog.kerul.net 35
THANKYOUVERY MUCH  Newton keep asking, Why apple FALL from tree?  Everybody asks silly questions before becoming a star…...
Upcoming SlideShare
Loading in …5
×

Html5 + Bootstrap & Mobirise

1,214 views

Published on

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.

Published in: Internet
License: CC Attribution-NonCommercial License
no profile picture user

  • Be the first to comment

Html5 + Bootstrap & Mobirise

  1. 1. HTML5 + BOOTSTRAP & MOBIRISE Khirulnizam Abd Rahman ( Kerul.net ) FSTM, KUIS. Materials at bit.ly/html5000
  2. 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. 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. 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. 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. 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
  7. 7. LOCATION MAPS 11/8/2016 http://blog.kerul.net 7
  8. 8. BLOCK <DIV> 11/8/2016 http://blog.kerul.net 8
  9. 9. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 9
  10. 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. 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. 12. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 12
  13. 13. HTML RESPONSIVE LAYOUT 11/8/2016 http://blog.kerul.net 13
  14. 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. 15. BOOTSTRAP  Download framework from getbootstrap.com  OR use the CDN 11/8/2016 http://blog.kerul.net 15
  16. 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. 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
  18. 18. BOOTSTRAP FORM 11/8/2016 http://blog.kerul.net 18
  19. 19. BOOTSTRAP GRID SYSTEM 11/8/2016 http://blog.kerul.net 19
  20. 20. BOOTSTRAP GRID SYSTEM DESKTOP 11/8/2016 http://blog.kerul.net 20 Banner Footer Main Content Sidebar
  21. 21. BOOTSTRAP GRID SYSTEM MOBILE 11/8/2016 http://blog.kerul.net 21 Banner Footer Main Content Sidebar
  22. 22. FREE STARTBOOTSTRAP.COM  Example https://startbootstrap.com/ 11/8/2016 http://blog.kerul.net 22
  23. 23. SAMPLE1 – ICITM2016 11/8/2016 http://blog.kerul.net 23
  24. 24. SAMPLE2 - SMARTSOLAT 11/8/2016 http://blog.kerul.net 24
  25. 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. 26. MOBIRISE  Done with the talking, lets walk the talk… ;) 11/8/2016 http://blog.kerul.net 26
  27. 27. SELECTTHEME 11/8/2016 http://blog.kerul.net 27
  28. 28. 11/8/2016 http://blog.kerul.net 28
  29. 29. Select block 11/8/2016 http://blog.kerul.net 29
  30. 30. 11/8/2016 http://blog.kerul.net 30
  31. 31. 11/8/2016 http://blog.kerul.net 31
  32. 32. MOBIRES- CHANGING IMAGE 11/8/2016 http://blog.kerul.net 32
  33. 33. MOBIRES-TEXT EDITING 11/8/2016 http://blog.kerul.net 33
  34. 34. 11/8/2016 http://blog.kerul.net 34
  35. 35. 11/8/2016 http://blog.kerul.net 35
  36. 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

×