Membuat Temp Ate Web Dengan CSS

Membuat Template Web
SMK Media Informatika

dengan CSS
Pemrograman Web
SMK MEDIA INFORMATIKA JAKARTA
Dibuat Oleh : Sunarya Ade Permana
Struktur Menu dan Layout
• Struktur menu atau navigasi yang akan dibuat adalah sebagai berikut:
Kontak
Home Profile Visi Misi Gallery
Kami
• Layout yang digunakan adalah sebagai berikut:

WRAPPER
HEADER
LOGO BANNER
MENU
CONTENT
LEFT MENU PAGE
FOOTER
Struktur File dan Folder
Buatlah Folder template dengan format Nama-Kelas Ex. Sunarya-X1
yang didalamnya terdapat urutan folder dan file yang akan dibuat:
1. Folder : image
 logo.png / logo.jpg
 dan gambar-lainya..
2. File : index.html
3. File : css.css
4. File : profile.html
5. File : visi-misi.html
6. File : gallery.html
7. File : kontak-kami.html
1. Membuat Tag HTML untuk index.html
1. <html>
2. <title>WELCOME TO WEBSITE SMK MEDIA INFORMATIKA</title>
3. <link rel="stylesheet" type="text/css" href="css.css" />
4. </head>
5. <body>
6. <div id="wrapper">
7. <div id="header">
8. <div class="logo">
9. <center><img src="image/logo.png" width="100px" height="100px" /></center>
10. </div>
11. <div class="banner">
12. <font size="4">YAYASAN PENDIDIKAN ARRAIS</font><br />
13. <font size="6">SMK MEDIA INFORMATIKA</font><br />
14. The First IT School at South Jakarta
15. </div>
16. </div>
17. <div id="menu">
18. <a href="index.html">HOME</a>
19. <a href="profile.html">PROFILE</a>
20. <a href="visimisi.html">VISI MISI</a>
21. <a href="gallery.html">GALLERY</a>
22. <a href="kontak-kami.html">KONTAK KAMI</a>
23. </div>
24. <div id="content">
1. Membuat Tag HTML untuk index.html Lanjutan…
25. <div class="left-menu">
26. <b><u>EXTERNAL LINK</u></b>
27. <ul class="external-link">
28. <li><a href="http://smk-mediainformatika.sch.id">SMK METIK</a></li>
29. <li><a href="http://metik.org">LPK METIK</a></li>
30. <li><a href="http://metikzone.blogspot.com">METIKZONE</a></li>
31. <li><a href="#">dst...</a></li>
32. </ul>
33. </div>
34. <div class="page">
35. <h2>SELAMAT DATANG DI WEBSITE SMK MEDIA INFORMATIKA</h2>
36. SMK Media Informatika adalah sekolah IT pertama di Jakarta Selatan, saat ini SMK Media Informatika
memiliki Jurusan :
37. <ul type="square">
38. <li>Teknik Komputer dan Jaringan</li>
39. <li>Multimedia</li>
40. <li>Rekayasa Perangkat Lunak</li>
41. </ul>
42. </div>
43. </div>
44. <div id="footer">© Sunarya Ade Permana 2013</div>
45. </div>
46. </body>
47. </html>
2. Membuat Tag CSS untuk css.css
1. body { 26. padding-bottom: 5px;
2. background-color: #999; 27. padding-left: 5px;
3. font-family: Georgia; 28. }
4. font-size: 12px; 29. #wrapper #header .banner {
5. } 30. float: left;
6. #wrapper { 31. height: 100px;
7. width: 980px; 32. width: 780px;
8. margin-top: 0px; 33. background-color: #FC0;
9. margin-right: auto; 34. padding-top: 40px;
10. margin-bottom: 0px; 35. padding-right: 10px;
11. margin-left: auto; 36. padding-bottom: 10px;
12. } 37. padding-left: 10px;
13. #wrapper #header { 38. text-align:center;
14. background-color: #F90; 39. }
15. float: left; 40. #wrapper #menu {
16. height: 150px; 41. background-color: #036;
17. width: 980px; 42. float: left;
18. } 43. width: 800px;
19. #wrapper #header .logo { 44. padding-left: 180px;
20. float: left; 45. }
21. height: 100px; 46. #wrapper #content {
22. width: 170px; 47. background-color: #F90;
23. background-color: #F90; 48. float: left;
24. padding-top: 20px; 49. width: 980px;
25. padding-right: 5px; 50. }
2. Membuat Tag CSS untuk css.css Lanjutan…
51. #wrapper #content .left-menu { 79. #wrapper #menu a:visited { 107. text-decoration: none;
52. background-color: #F90; 80. color: #000000; 108. }
53. padding: 10px; 81. background-color: #F90; 109. .foto-profile {
54. float: left; 82. } 110. float: left;
55. width: 160px; 83. #wrapper #menu a:hover { 111. margin-right: 10px;
56. } 84. color: #000000; 112. margin-bottom: 5px;
57. #wrapper #content .page { 85. background-color: #FC0; 113. }
58. padding: 10px; 86. }
59. float: left; 87. #wrapper #menu a:active {
60. width: 780px; 88. color: #000000;
61. background-color: #FFF; 89. background-color: #0099CC;
62. } 90. }
63. #wrapper #footer { 91. .external-link {
64. background-color: #036; 92. font-size: 12px;
65. padding: 5px; 93. }
66. float: left; 94. .external-link a:link {
67. width: 970px; 95. font-size: 12px;
68. text-align: center; 96. color: #FFF;
69. color: #FFF; 97. text-decoration: none;
70. } 98. }
71. #wrapper #menu a:link { 99. .external-link a:hover {
72. color: #000000; 100. font-size: 12px;
73. text-decoration: none; 101. color: #FFF;
74. margin: 1px; 102. text-decoration: underline;
75. padding: 5px; 103. }
76. float: left; 104. .external-link a:visited {
77. background-color: #0099CC; 105. font-size: 12px;
78. } 106. color: #FFF;
HASIL JADI
index.html
3. Membuat Tag HTML untuk profile.html
Untuk membuat profile.html gunakan index.html saja, dengan cara meng-copy dan paste lalu
rename menjadi profile.html. Kemudian pada tag <div class=“page”> …. </div> samakan seperti tag
html dibawah ini:
36. <h2>PROFILE SMK MEDIA INFORMATIKA</h2>
37. <div class="foto-profile"><img src="image/profile.jpg" width="200px" /></div>
38. <p>SMK Media Informatika adalah Sekolah SMK Pertama di Jakarta Selatan yang bergerak
dalam bidang teknologi informasi. Saat ini SMK Media Informatika telah memiliki 4 Lab Multimedia (MM)
dan Rekayasa Perangkat Lunak (RPL) dengan komputer sebanyak 160 unit. Sementara di jurusan Teknik
Komputer dan Jaringan (TKJ) tersedia 2 Lab dengan Jumlah Komputer sebanyak 80 Unit. didukung
dengan perlengkapan lab lainnya, seperti: infokus, printer, Scanner, dan Ruangan ber-AC.</p>
39. <p>Tahun Pelajaran 2013-2014 sekolah akan terus menambah dan melengkapi laboratorium komputer
yang menunjang pembelajaran yang akan mendukung keberhasilan belajar siswa. Dengan berpedoman
pada kurikulum 2013, SMK Media Informatika mengedepankan kegiatan praktik yang komposisinya lebih
dari 60% dari mata diklat produktif. Selain itu akses internet speedy unlimited menjadi sarana informasi
yang telah tersedia sejak sekolah didirikan tahun pelajaran 2006-2007. Kemudian pada tahun 2009
Badan Akreditasi Propensi Sekolah/Madrasah (BAPS/M) menetapkan bahwa SMK MEDIA INFORMATIKA
memperoleh Akreditasi dengan peringkat “A”.</p>
40. <p>Insyaallah di tahun 2014 ini akan segera direalisasikan fasilitas Lab Bahasa. SMK Media
Informatika 2014 ini sedang membangun gedung baru di Jl. Deplu Raya No. 99 Petukangan Selatan
Pesanggrahan Jakarta Selatan untuk meningkatkan pelayanan pendidikan.</p>
HASIL JADI
profile.html
4. Membuat Tag HTML untuk visimisi.html
Untuk membuat visimisi.html gunakan index.html saja, dengan cara meng-copy dan paste lalu
rename menjadi visimisi.html. Kemudian pada tag <div class=“page”> …. </div> samakan seperti tag
html dibawah ini:
36. <h2>VISI MISI SMK MEDIA INFORMATIKA</h2>
37. <center><img src="image/visimisi.jpg" width="200px" /></center>
38. <p><center>
39. <h2>VISI</h2>
40. "Mencetak tenaga ahli yang berbudi
41. pekerti, berakhlak mulia serta
42. professional untuk menghadapi
43. perkembangan Ilmu Pengetahuan dan
44. teknologi berstandar Nasional maupun
45. Internasional"
46. <h2>MISI</h2>
47. </center>
48. <ol type="1">
49. <li>Menamamkan kepada peserta didik agar memiliki akhlaq dan budi pekerti.</li>
50. <li>Membimbing peserta didik agar menjadi generasi muda yang menguasai ilmu pengetahuan dan
teknologi dan menghadapi era globalisasi</li>
51. <li>Meningkatkan mutu pendidikan yang relevan dengan ilmu pengetahuan dan teknologi</li>
52. <li>Meningkatkan kualitas dan kuantitas mutu kelulusan agar menjadi tenaga professional.</li>
53. </ol>
54. </p>
HASIL JADI
visimisi.html
5. Membuat Tag HTML untuk gallery.html
Untuk membuat gallery.html gunakan index.html saja, dengan cara meng-copy dan paste lalu
rename menjadi gallery.html. Kemudian pada tag <div class=“page”> …. </div> samakan seperti tag
html dibawah ini:
36. <h2>GALLERY SMK MEDIA INFORMATIKA</h2>
37. <table border="0" width="100%" cellpadding="2" cellspacing="2">
38. <tr>
39. <td><img src="image/1.jpg" width="100%" /></td>
42. </tr>
43. <tr>
44. <td>Nama Foto 1</td>
47. </tr>
48. <tr>
52. </tr>
53. <tr>
57. </tr>
58. </table>
HASIL JADI
gallery.html
6. Membuat Tag HTML untuk kontak-kami.html
Untuk membuat kontak-kami.html gunakan index.html saja, dengan cara meng-copy dan paste lalu
rename menjadi kontak-kami.html. Kemudian pada tag <div class=“page”> …. </div> samakan seperti
tag html dibawah ini:
36. <h2>KONTAK KAMI SMK MEDIA INFORMATIKA</h2>
37. <table width="100%" cellpadding="2" cellspacing="2" border="0">
38. <tr>
39. <td width="19%">Nama Lengkap</td>
40. <td width="2%">:</td>
41. <td width="79%"><input type="text" name="txtnmlengkap" size="50" /></td>
42. </tr>
43. <tr>
44. <td>Email</td>
45. <td>:</td>
46. <td><input type="text" name="txtemail" size="30" /></td>
47. </tr>
48. <tr>
49. <td>Jenis Kelamin</td>
50. <td>:</td>
51. <td>
52. <select name="txtjk">
53. <option>L/P</option>
54. <option value="L">Laki-Laki</option>
55. <option value="P">Perempuan</option>
56. </select>
6. Membuat Tag HTML untuk kontak-kami.html Lanjutan…
Untuk membuat kontak-kami.html gunakan index.html saja, dengan cara meng-copy dan paste lalu
rename menjadi kontak-kami.html. Kemudian pada tag <div class=“page”> …. </div> samakan seperti
tag html dibawah ini:
57. </td>
58. </tr>
59. <tr>
60. <td>No Telp.</td>
61. <td>:</td>
62. <td><input type="text" name="txtnotlp" size="30" /></td>
63. </tr>
64. <tr>
65. <td>Komentar</td>
66. <td>:</td>
67. <td><textarea name="txtkomen"></textarea></td>
68 </tr>
69. <tr>
70. <td> </td>
71. <td> </td>
72. <td>
73. <input type="submit" name="cmdsimpan" value="Simpan" />
74. <input type="reset" name="cmdbatal" value="Batal" />
75. </td>
76. </tr>
77. </table>
HASIL JADI
kontak-kami.html
Tugas Kelompok!!
 Kelompok Maksimal Dua Orang atau Sendiri.
 Soal: Buatlah Template Web SMK Media Informatika dengan CSS seperti tutorial diatas, tetapi
untuk Jenis Tulisan, Warna, dan Background Color harus berdasarkan kreasi kelompok
sendiri tidak boleh sama dengan contoh atau kelompok yang lainnya.
 Tugas di convert ke zip/rar
dengan format Kelas - Nama1 & Nama2.rar
Ex. X1 - Sunarya A P & Raka M N.rar
 Hasil convert zip/rar dikumpulkan lewat email dengan cara di lampirkan (Attach File)
Email : sunaryaap@gmail.com
Subjek Email : Tugas-PW-1314
Jika anda salah membuat Format File dan Subjek email maka saya anggap anda tidak
mengumpulkan tugas!!!
Waktu Pengerjaan Tugas 2 Minggu (3 Maret 2014 s/d 15 Maret 2014)

Membuat Temp Ate Web Dengan CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Temp Ate Web Dengan CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Template Web

SMK Media Informatika

• Layout yang digunakan adalah sebagai berikut:

LEFT MENU PAGE

Anda mungkin juga menyukai