Web Analytics Made Easy -
StatCounter
Cara Membuat Website Kalian Responsive (Sudah Dengan Source Kode Tinggal Copas) - Website
Wed. Jun 19th, 2019

Cara Membuat Website Kalian Responsive (Sudah Dengan Source Kode Tinggal Copas)

  1. Tujuan Praktikum
  • Dapat mebuat contoh implementasi dari CSS Responsive.
  • Membuat dokumen CSS / implementasi media ke browser.
  • Mengetahui cara mebuat navigasi responsive mengunakan css.
  • Mengetahui ukuran layar dektop dan mobile untuk bias membuat web yang responsive.
  1. Manfaat Praktikum

Mahasiswa dapat membuat web yang responsive dengan mengunakan html dan juga css, sehingga tampilan template web lebih menarik dan interkatif, tidak hanya bisa di gunakan untuk perangkat dektop saja tetapi juga bisa digunakan untuk perangkat mobile.

  1. Teori singkat

Responsive web design adalah suatu halaman web di mana tapilannya akan cocok, rapi dan tetap dan enak dilihat jika di akes dari perangakat apapun dengan rosulusi layar yang berbeda Misalnya, ketika anda mengakses blog ini dengan perangkat (PC/HP/Tablet) yang berbeda, anda akan melihat tampilannya berbeda karena menyesuaika dengan layar. Secara umum, sebuah halaman web tidak bisa menyesuaikan tampilannya sendiri dengan resolusi layar perangkat yang mengaksesnya.

  1. Source code program
  • html
1.  <!DOCTYPE html>

2.  <html>

3.  <head>

4.     <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ //>

5.     <meta name=”viewport” content=”width=device-width, initial-scale=1″/>

6.     <link rel=”stylesheet” type=”text/css” href=”style.css” />

7.     <link rel=”stylesheet” type=”text/css” href=”style1.css”>

8.     <title>Materi Responsive</title>

9.  </head>

10.<body>

11.   <div class=”navigation”>

12.         <ul>

13.               <li class=”current”><a href=”#”>Home</a></li>

14.               <li><a href=”#”>Profile</a></li>

15.               <li><a href=”#”>Data</a></li>

16.               <li><a href=”#”>Contact</a></li>

17.         </ul>

18.   </div>

19.   <div class=”wrap”>

20.         <div class=”content”>

21.               <p><h3>Materi Pembelajaran Responsiv</h3></p>

22.         </div>

23.               <p>Melakukan Kegiatan tugas dan lainnya dengan baik dan benar</p>

24.               <h3>Bertujuan Untuk</h3>

25.               <p>

26.                     –     Dapat mebuat contoh implementasi dari CSS Responsive.

27.               </p>

28.               <p>

29.                     –     Membuat dokumen CSS / implementasi media ke browser.

30.               </p>

31.               <p>

32.                     –     Mengetahui cara mebuat navigasi responsive mengunakan css.

33.               </p>

34.               <p>

35.                     –     Mengetahui ukuran layar dektop dan mobile untuk bias membuat

36.               </p>

37.               <p><h3>Manfaat Praktikum</h3></p>

38.               <p>

39.                     Mahasiswa dapat membuat web yang responsive dengan mengunakan html dan juga css, sehingga tampilan template web lebih menarik dan interkatif, tidak hanya bisa di gunakan untuk perangkat dektop saja tetapi juga bisa digunakan untuk perangkat mobile.

40.               </p>

41.   </div>

42.   <center>

43.   <div>

44.         <div class=”sidebar”>

45.               <h3/>Gambaran Responsiv</h3>

46.                     <p class=”column-1″><img src=”screenshot_1.png” height=”240px” width=”240px”><img src=”screenshot_2.png” height=”240px” width=”240px”><img src=”screenshot_3.png” height=”240px” width=”240px”></p>

47.                     Gambar 1

48.                     <p class=”column-1″><img src=”screenshot_1.png” height=”240px” width=”240px”><img src=”screenshot_2.png” height=”240px” width=”240px”><img src=”screenshot_3.png” height=”240px” width=”240px”></p>

49.                     Gambar 2

50.                     <p class=”column-1″><img src=”screenshot_1.png” height=”240px” width=”240px”><img src=”screenshot_2.png” height=”240px” width=”240px”><img src=”screenshot_3.png” height=”240px” width=”240px”></p>

51.                     Gambar 3

52.         </div>

53.   </div>

54.</center>

55.<center>

56.   <footer>

57.         <p>Copyright &copy;Dedy Hermawan</p>

58.   </footer>

59.</center>

60.</body>

61.  </html>

 

  • css
1.  .navigation{

2.     margin: 20px 0 0 0;

3.  }

4.

5.  .navigation ul{

6.     margin: 0;

7.     padding: 0;

8.  }

9.

10..navigation li{

11.   margin: 0 5px 10px 0;

12.   padding: 0;

13.   list-style: none;

14.   display: inline-block;

15.   display: inline;

16.}

17.

18..navigation a{

19.   padding: 3px 12px;

20.   text-decoration: none;

21.   color:green;

22.   line-height: 100%;

23.}

24.

25..navigation a:hover {

26.   color: #000000;

27.

28.}

29.

30..navigation .current a{

31.   background: #555555;

32.   color: #ffffff;

33.   border-radius: 5px;

34.  }

 

  • css
1.  @media screen and (max-width: 500px){

2.     .navigation{

3.           position: relative;

4.           min-height: 36px;

5.           margin-bottom: 10px;

6.     }

7.

8.     .navigation ul{

9.           width: 180px;

10.         padding: 5px 0;

11.         position: absolute;

12.         top: 0;

13.         left: 0;

14.         border: solid 1px #aaaaaa;

15.         background: #fff url(home.png) no-repeat 10px 11px;

16.         border-radius: 3px;

17.         box-shadow: 0 1px 2px rgba(0,0,0,.3);

18.   }

19.

20.   .navigation li{

21.         display: none;

22.         margin: 0;

23.   }

24.   .navigation .current{

25.         display: inline-block;

26.   }

27.

28.   .navigation a{

29.         display: block;

30.         padding: 5px 5px 5px 32px;

31.         text-align: left;

32.   }

33.

34.   .navigation .current a{

35.         background: none;

36.         color: #666;

37.   }

38.   .navigation ul:hover {

39.         background-color:grey;

40.   }

41.   .navigation ul:hover li {

42.         display: block;

43.         margin: 0 0 5px;

44.   }

45.   .img img{

46.         max-width: 10px;

47.         float:none;

48.         padding: 1%;

49.   }

50.

51.   p{text-align:justify;

52.   }

53.

54.   .sidebar .column-l{

55.         display: block;

56.   }

57.

58.   .sidebar img{

59.         width: 50px;

60.         height: 50px;

61.         display: 2px;

62.         padding-left: 20px;

63.   }

64.

65.}

 

  1. Hasil program/screenshoot
  • Ketika di jalankan di browser dektop

 

  • Ketika di jalan ke di browser mobail

 

  1. Kesimpulan

Kesimpulannya adalah jika template di jalankan pada layar yang mempunyai resolusi besar maka script akan otomatis mungunakan css yang pertama dan jika template di jalankan pada layar yang mempunyai resolusi yang kecil maka script html akan otomatis menggunakan script css yang kedua.

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *