Modul V - Praktikum Desain Web (new)

MODUL PRAKTIKUM DESAIN WEB Semester III Oleh: Abdi Pandu Kusuma, S.Kom., M.T Muhammad Faried Rahmat, S.ST., M.Tr.T Nama : NIM : Kelas : FAKULTAS TEKNOLOGI INFORMASI PROGRAM STUDI TEKNIK INFORMATIKA UNIVERSITAS ISLAM BALITAR BLITAR

MODUL V CASCADING STYLE SHEET (CSS) LANJUTAN ( Pertemuan ke-5 ) 1. Class Selector dan Atribut ID pada CSS. a. Class Selector CSS Dengan menggunakan class selector, kalian dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalkan kalian ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka: p.right {text-align: right} dan p.left {text-align: left} Aturan Class selector: 1) Jangan memberi nama class dengan angka, 2) Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (\"). b. Atribut ID pada CSS. Aturan penamaan ID: 1) Dapat mengandung huruf, angka, atau karakter garis bawah, 2) Karakter pertama harus berupa huruf atau karakter garis bawah, 3) Diawali dengan tanda #, 4) Jangan memberi nama id sama dengan value, 5) Jangan memberi nama id dengan tag html kemudian diikuti tanda #. PRAKTIK 1 : 1. Ketikkan script berikut:

2. Simpan dengan nama latihan_css1.html 3. Jalankan dengan web browser. 4. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 2. Text Styling. Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan text styling CSS: Property Deskripsi Values color direction Mengeset warna teks color line-height Mengeset arah teks ltr letter-spacing rtl text-align Mengeset jarak antar garis normal text-decoration number length text-indent % text-shadow text-transform Menambah atau mengurangi normal jarak antar karakter length unicode-bidi white-space Mengatur teks agar rata kanan, left word-spacing kiri, tengah, atau kanan-kiri pada right elemen center justify Menambah dekorasi pada teks none underline overline line-through blink Mengindentasikan baris pertama length teks pada elemen % none color length Mengontrol huruf pada elemen none capitalize uppercase lowercase normal embed bidi-override Mengeset bagaimana ruang putih normal di dalam elemen ditangani pre nowrap Menambah atau mengurangi normal jarak antar kata length PRAKTIK 2 :

1. Ketikkan script berikut 2. Simpan dengan nama latihan_css2.html 3. Jalankan dengan web browser 4. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 3. Pseudo Element Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan pseudo element CSS: Pseudo-element Kegunaan :first-letter Menambahkan style spesial pada huruf pertama sebuah teks :first-line Menambah spesial style pada baris pertama sebuah teks :before Menyisipkan suatu konten sebelum elemen :after Menyisipkan suatu konten setelah elemen PRAKTIK 3: 1. Ketikkan script berikut : 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 4. Font Styling

Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan font styling pada CSS: Property Deskripsi Values font Mengeset semua properti untuk font-style font-family font(huruf) dalam satu deklarasi font-variant font-size font-weight font-size/line-height font-size-adjust font-family font-stretch caption icon font-style menu font-variant message-box small-caption status-bar Prioritas list untuk font family family-name dan/atau generic pada suatu generic-family elemen Mengset ukuran dari font xx-small x-small small medium large x-large xx-large smaller larger length % Menspesifikasi aspek nilai untuk none sebuah elemen yang akan number mempertahankan tinggi-x dari font pilihan pertama Memadatakan atau melonggarkan normal font-family yang digunakan wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded Mengeset style dari font normal italic oblique Menampilkan teks dalam small- normal caps font atau normal font small-caps

font-weight Mengeset ketebalan huruf normal bold bolder lighter 100 200 300 400 500 600 700 800 900 PRAKTIK 4: 1. Ketikkan script berikut : 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 5. Background Styling Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan background styling pada CSS: Property Deskripsi Values background Mengeset semua properti background-color background-attachment background dalam satu deklarasi background-image background-repeat background-color background-attachment background-position Mengeset kondisi posisi scroll background; antara dapat discroll fixed atau tidak dapat digerakkan dalam halaman Mengeset warna latar background color-rgb suatu elemen color-hex

color-name transparent background-image Mengeset sebuah gambar menjadi url(URL) background-position sebuah background none background-repeat Mengeset posisi background top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos Mengeset apakah/bagaimana repeat background akan diulang repeat-x repeat-y no-repeat PRAKTIK 5: 1. Ketikkan script berikut : 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya!

6. List & Marker CSS Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan list & marker CSS: Property Deskripsi Values list-style Mengeset semua properti untuk list-style-image sebuah list dalam satu deklarasi list-style-type list-style-position list-style-position list-style-type Mengeset gambar sebagai list- list-style-image item marker marker-offset Mengeset dimana list-item none marker ditempatkan pada list url Mengeset tipe dari list-item marker inside outside none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha auto length

PRAKTIK 6 : 1. Ketikkan script berikut: 2. Simpan dengan nama praktik6.html 3. Jalankan dengan web browser. 4. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 7. Table Styling. Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan table styling CSS: Property Deskripsi Values border-collapse border-spacing Mengeset apakah border tabel collapse pada collapse caption-side satu border atau terpisah sesuai standar separate empty-cells table-layout HTML Mengeset jarak yang memisahkan border sel length length (khusus untuk model separate-border) Mengeset posisi dari judul tabel top bottom left right Megeset apakah sel kosong ditampilkan pada show tabel atau tidak (khusus untuk model hide separate-border) Mengeset algoritma yang digunakan untuk auto menampilkan sel tabel, baris, dan kolom fixed

PRAKTIK 7: 1. Ketikkan script berikut 2. Simpan dengan nama praktik7.html 3. Jalankan dengan web browser 4. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 8. Border Styling Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan Border styling CSS: Property Deskripsi Values border Mengeset semua properti untuk border-width border-bottom 4-border (yang tertutup) dalam border-style border-bottom-color border-bottom-style satu deklarasi border-color border-bottom-width Mengeset semua properti untuk border-bottom-width border-color bottom-border (yang bawah aja) border-style dalam satu deklarasi border-color Mengeset warna dari bottom- border-color border Mengeset style dari bottom border-style border Mengeset ketebalan dari garis thin bottom-border medium thick length Mengeset warna dari Color keseluruhan border

border-left Mengeset semua properti untuk border-left-width border-left-color border-left-style left-border (yang kiri aja) dalam border-style border-left-width satu deklarasi border-color border-right border-right-color Mengeset warna dari left-border border-color border-right-style border-right-width Mengeset style dari left-border border-style border-style Mengeset ketebalan dari garis thin left-border medium border-top thick border-top-color length border-top-style border-top-width Mengeset semua properti untuk border-right-width border-width right-border (yang kanan aja) border-style dalam satu deklarasi border-color Mengeset warna dari right- border-color border Mengeset style dari right-border border-style Mengeset ketebalan dari garis thin right-border medium thick length Mengeset style dari keseluruhan none border hidden dotted dashed solid double groove ridge inset outset Mengeset semua properti untuk border-top-width top-border (yang atas aja) dalam border-style satu deklarasi border-color Mengeset warna dari top-border border-color Mengeset style dari top-border border-style Mengeset ketebalan dari garis thin top-border medium thick length Mengeset ketebalan dari thin keseluruhan border; terdapat medium empat jenis ketebalan thick length

PRAKTIK 8: 1. Ketikkan script berikut : 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 9. Padding Styling Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan padding styling pada CSS: Property Deskripsi Values Padding Mengeset semua properti untuk padding-top padding-bottom padding (bloknot) padding-right padding-left dalam satu deklarasi padding-bottom padding-right padding-left padding-top Mengeset pad bagian bawah dari length elemen % Mengeset pad bagian kiri dari length elemen % Mengeset pad bagian kanan dari length elemen % Mengeset pad bagian atas dari length elemen %

PRAKTIK 9: 1. Ketikkan script berikut : 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 10. Positioning Styling Berikut ditampilkan dalam tabel bentuk-bentuk pengaturan teks pada browser menggunakan positioning styling pada CSS: Property Deskripsi Values Bottom clip mengeset sejauh mana pojok bawah auto left elemen di atas atau di bawah dari pojok % overflow bawah parent element length position Mengeset bentuk dari elemen. Elemen shape diclip menjadi bentuk ini, dan ditampilkan auto Mengeset sejauh mana pojok kiri dari auto elemen di kiri/kanan tepi kiri parent % element length Mengeset apa yang terjadi jika konten dari visible elemen melebihi area elemen hidden scroll auto Menempatkan elemen dengan posisi static, static relative, absolute, atau fixed relative absolute fixed

right Mengeset sejauh mana pojok kanan dari auto top elemen di kiri/kanan dari pojok kanan % vertical-align parent element length Sets how far the top edge of an element is z-index above/below the top edge of the parent auto element % Sets the vertical alignment of an element length Sets the stack order of an element baseline sub super top text-top middle bottom text-bottom length % auto number PRAKTIK 10: 1. Ketikkan script berikut : 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! 11. Tail Wind CSS Tailwind CSS merupakan framework CSS yang memiliki sifat ‘Utility First’ dalam membangun desain antarmuka khusus dengan cepat. Yang dimaksud dengan ‘utility-first’ adalah tailwindcss menyediakan banyak utility class yang dapat digunakan untuk membuat custom desain tanpa harus menulis CSS. Berbeda ketika menggunakan css biasa kita harus

menulis css untuk memberikan tampilan yang lebih menarik, dengan menggunakan taildwind style css yang dibutuhkan untuk komponen web sudah menyatu dengan html kita. Berikut contoh perbedaan CSS biasa dengan Tailwind CSS : CSS STANDART TAILWIND CSS Dengan tailwindcss, kita tidak perlu menulis CSS untuk menentukan style dari button, cukup menggunakan utility class seperti bg-purple-500, text-white dll. 12. Instalasi dan Konfigurasi Tailwind CSS Berikut beberapa spesifikasi yang perlu disiapkan pada Tailwind CSS, diantaranya: ✓ Tailwind CSS IntelliSense ✓ PostCSS Terdapat beberapa cara untuk melakukan instalasi Tailwind CSS ke dalam sebuah project Web : a. Install Taildwind CSS Secara Online dengan CDN. ✓ Silahkan buka url berikut ini https://tailwindcss.com/docs/installation/play-cdn ✓ Silahkan copy bagian <script src=\"https://cdn.tailwindcss.com\"></script>

✓ Selanjutnya, ketikkan coding bagian seperti pada gambar berikut: Hasilnya: b. Install Taildwind CSS Secara Offline. 1) Buka Visual Studio Code 2) Klik menu terminal > New Terminal 3) Ketik npm init

Hasil 4) Ketik Perintah npm install –D tailwindcss 5) Tunggu hingga proses download file tailwindcss berhasil dilakukan 6) Berikut tanda ketika file asset tailwind css telah terunduh secara utuh. Terdapat folder baru bernama node_modules yang berisi file asset tailwind css. 7) Selamat anda telah melakukan instalasi / konfigurasi Tailwind CSS secara online melalui CDN maupun Offline dengan menggunakan Tailwind CLI. Silahkan lanjutkan pada modul praktikum selanjutnya. PRAKTIK 11. 1. Silahkan buat file baru dengan nama praktik11.html lalu ketik code dibawah ini:

2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! PRAKTIK 12. 1. Silahkan buat file baru dengan nama praktik12.html lalu ketik code dibawah ini: 2. Jalankan dengan web browser 3. Jelaskan kesimpulan kalian setelah mengamati hasilnya! TUGAS PRAKTIKUM: Buatlah tampilan web sederhana (5 halaman saja) dengan tema suasana di sekitar tempat tinggal kalian yang terdapat penggunaan class selector, atribut ID, text styling, font styling, background styling, dan pseudo elements!