Alat dan Bahan -- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya -- Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai icon pada list Cara Kerja Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini 1. Buatlah folder baru bernama Praktikum9 dan pastikan anda menyimpan semua file percobaan di praktikum ini pada folder tersebut 2. Buat folder css dan images 3. Simpan semua file gambar yang diperlukan pada file images 4. Buka teks editor pilihan anda 5. Ketikkan semua kode yang ada pada tiap percobaan 6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi.html 7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada Save as Type menjadi All Files 8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML. Petunjuk Praktikum Teknologi Web MMB PENS Dwi Susanto S.ST MT Percobaan Percobaan 1 : Mengatur Tampilan Tipe List Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html
Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html Simpan kode CSS ini di folder css dengan nama contoh.css Coding file HTML disimpan dengan nama index1.html- Coding file CSS disimpan dengan nama contoh.css-
Output dari index1.html 1. Pada font-family; arial dan verdana adalah macam/nama dari font face, sedangkan sans-serif adalah jenis dari font. 2. Font pada syntax h1 dan h2 memiliki warna yang sama 3. Font pada syntax p memiliki warna yang berbeda dari h1 dan h2 Percobaan 2: Menggunakan CSS Eksternal Simpan file berikut dengan nama percobaan2.html
Simpan file berikut pada folder css dengan nama style.css Coding file HTML disimpan dengan nama index2.html- Coding file CSS disimpan dengan nama style.css- - Output dari index2.html Percobaan 3: Internal CSS
Coding file HTML disimpan dengan nama index3.html- Output dari index3.html
- Percobaan 4: Inline Style Coding file HTML disimpan dengan nama index4.html-
1. Inline style lebih praktis dibanding Internal dalam konteks pengaturan sederhana. Output dari index4.html Percobaan 5: Urutan Penerapan Style dari CSS Pada percobaan ini, perhatikan urutan penerapan aturan dari CSS. Perhatikan penerapan pada paragraf yang tanpa id dan dengan atribut id. Setelah berhasil keluar hasilnya, silahkan anda coba hapus pada p#intro dan perhatikan hasilnya
Coding file HTML disimpan dengan nama index5.html- Output dari index5.html
Setelah p#intro dihapuskan, hasilnya akan seperti ini: 1. Pada Tampilan Hasil yang menyertakan p#intro tulisan pada tag p#intro menjadi 2X lipat 2. Sedangkan ketika p#intro dihapuskan ukuran tulisan menjadi normal atau sama dengan <p> lainnya Percobaan 6: Inheritance Perhatikan style yang diatur di body, yang selanjutnya dipakai oleh semua elemen. Coba anda rubah style pada bagian.page dengan menentukan jenis font yang baru. Coding file HTML disimpan dengan nama index6.html-
Output dari index6.html 1. Tampilan body tidak lagi sama karena adanya perubahan konten. Percobaan 7: Multiple Stylesheet Pada percobaan ini, silahkan anda perhatikan, apakah style yang diterapkan pada halaman berasal dari file mystyle.css ataukah yang dari satu file dengan halaman web tersebut. Simpan dengan nama mystyle.css
Coding file CSS disimpan dengan nama mystyle.css- Selanjutnya buat file html seperti dibawah ini: Coding file HTML disimpan dengan nama index7.html-
Output dari index7.html 1. File output yang terpampang berasal dari mystyle.css, hal ini bisa dilihat dari adanya konten h3 file css border-bottom: 1px solid black; Percobaan 8: Comments & Foreground Color Perhatikan cara penulisan warna pada percobaan ini. Output dari index8.html- 1. Color name menggunakan penulisan manusiawi atau sesuai penulisan yang benar untuk menentukan warna. 2. Hex code color menggunakan penulisan kode hex warna untuk menentukan warna. 3. RGB value menggunakan penulisan dengan koden RGB Color untuk menentukan warna
Percobaan 9: Background Color Coding file HTML disimpan dengan nama index9.html- Output dari index9.html
1. Pemberian konten background-color pada tiap tag memberikan warna pada masing-masing hasil outputan tag. Percobaan 10: Transparansi pada background Pada percobaan ini perhatikan perbedaan background antara paragraph pertama dan kedua Coding file HTML disimpan dengan nama index10.html-
- Percobaan 11: Transparansi pada background Output dari index10.html
Percobaan 12: Transparansi pada background Output dari index10.html
Output dari index10.html