Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html

TUGAS PRAKTIKUM 2 1

DWI SETIYA NINGSIH 2103157025

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

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html

Coding file HTML disimpan dengan nama –index1.html-

Simpan kode CSS ini di folder “css” dengan nama contoh.css

Coding file CSS disimpan dengan nama –contoh.css-

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Output dari index1.html

Analisis: 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

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Coding file HTML disimpan dengan nama –index2.html-

Simpan file berikut pada folder css dengan nama style.css

Coding file CSS disimpan dengan nama –style.css-

Output dari index2.html

Analisis: -

Percobaan 3: Internal CSS

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Coding file HTML disimpan dengan nama –index3.html-

Output dari index3.html

Analisis:

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

-

Percobaan 4: Inline Style

Coding file HTML disimpan dengan nama –index4.html-

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Output dari index4.html

Analisis: 1. Inline style lebih praktis dibanding Internal dalam konteks pengaturan sederhana.

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

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Coding file HTML disimpan dengan nama –index5.html-

Output dari index5.html

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Setelah p#intro dihapuskan, hasilnya akan seperti ini:

Analisis: 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

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-

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Output dari index6.html

Analisis: 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

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Coding file CSS disimpan dengan nama –mystyle.css-

Selanjutnya buat file html seperti dibawah ini:

Coding file HTML disimpan dengan nama –index7.html-

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Output dari index7.html

Analisis: 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-

Analisis: 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

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Percobaan 9: Background Color

Coding file HTML disimpan dengan nama –index9.html-

Output dari index9.html

Analisis:

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

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-

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Analisis: Output dari index10.html

Percobaan 11: Transparansi pada background

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Output dari index10.html

Percobaan 12: Transparansi pada background

TUGAS PRAKTIKUM 2

DWI SETIYA NINGSIH 2103157025

Output dari index10.html