Posts

CSS - Zidni Ilma (2023102003)

Image
  CSS, atau Cascading Style Sheets, adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan format dari dokumen yang ditulis dalam bahasa markup seperti HTML. Pada awalnya CSS dikembangkan oleh  W3C (World Wide Web Consortium)  pada tahun 1996 untuk mengatasi keterbatasan HTML dalam mendesain tampilan halaman web. Sebelum adanya CSS, semua pengaturan gaya harus dilakukan langsung di dalam markup HTML, yang membuat proses pengeditan menjadi rumit dan tidak efisien. Dengan CSS, pengembang dapat menulis satu set aturan gaya yang dapat diterapkan ke banyak halaman, sehingga mempercepat proses pengembangan dan meningkatkan konsistensi desain. Dalam pembuatan website, CSS berfungsi dalam: 1.       Mempercepat Loading Halaman Web: Dengan menggunakan CSS, pengembang dapat menuliskan satu set aturan gaya yang dapat diterapkan ke banyak halaman sekaligus. Ini mengurangi jumlah kode yang perlu dimuat, sehingga mempercepat waktu loadin...

Tabel di HTML dan CSS - Zidni Ilma (2023102003)

Image
Latihan Membuat Tabel dengan Menggunakan HTML dan CSS      Tabel di HTML digunakan untuk menyusun data dalam bentuk baris dan kolom. Ini sangat berguna untuk menampilkan informasi yang terstruktur, seperti data statistik, daftar produk, atau jadwal. Sedangkan untuk membuat tampilannya lebih menarik digunakanlah CSS.      Contohnya saat ingin membuat tabel daftar nilai siswa berikut:  Format folder yang diperlukan Kode html yang digunakan Kode CSS yang digunakan pada file style.css  Tampilan akhir File selengkapnya dapat diakses melalui  GitHub . Terimakasih atas perhatiannya!  

Image Map - Zidni Ilma (2023102003)

Image
 IMAGE MAP DI HTML Image map dalam HTML berfungsi sebagai navigasi ketika suatu area dalam gambar diklik. Area-area ini terhubung ke halaman web yang berbeda, sehingga ketika pengguna mengklik area tertentu, mereka akan diarahkan ke halaman web yang telah ditetapkan sebelumnya. Contoh: Kode di atas membuat sebuah area berbentuk poligon pada gambar : "Porsche 911 GT3 RS.jpeg"  Ketika area ini diklik, pengguna akan diarahkan ke gambar: "Porsche 911 GT3 RS Moodboard.jpeg". Penjelasan: <img src="Porsche 911 GT3 RS.jpeg" usemap="#image-map">: src="Porsche 911 GT3 RS.jpeg": Menentukan gambar yang akan digunakan sebagai dasar peta. usemap="#image-map": Menghubungkan gambar dengan peta yang akan didefinisikan. <map name="image-map">: Mendefinisikan sebuah peta dengan nama "image-map". Pemilihan area menggunakan bentuk poligon melalui https://www.ima...

Image dan Picture HTML - Zidni Ilma (2023102003)

Image
     Saat membuat halaman web, gambar adalah elemen visual yang sangat penting. Mereka tidak hanya mempercantik tampilan, tetapi juga dapat menyampaikan informasi dengan lebih efektif. Dalam HTML, ada dua elemen utama yang digunakan untuk menyisipkan gambar: <img> dan <picture>. Meskipun keduanya digunakan untuk tujuan yang sama, yaitu menampilkan gambar, namun keduanya memiliki fungsi dan kegunaan yang berbeda. Image      Elemen <img> adalah cara paling sederhana untuk menambahkan gambar ke dalam halaman HTML. Elemen ini berfungsi seperti sebuah bingkai yang akan diisi dengan gambar yang kita tentukan.  Image memiliki atribut utama yaitu: src: Menentukan alamat (URL) dari file gambar yang ingin ditampilkan. alt: Menyediakan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat atau jika pengguna menggunakan pembaca layar. Teks ini sangat penting untuk aksesibilitas. width dan height: Mengatur lebar dan tinggi gambar da...

Block dan Inline dalam HTML - Zidni Ilma

Image
       Dalam dunia pengembangan web, pemahaman yang mendalam tentang elemen block dan inline sangatlah penting. Keduanya merupakan fondasi dalam mengatur tata letak (layout) suatu halaman web. Mari kita bahas lebih lanjut mengenai perbedaan dan karakteristik masing-masing elemen ini. 1. Elemen Block Elemen block adalah elemen yang selalu memulai baris baru dan mengambil seluruh lebar wadah (container) tempatnya berada. Elemen block digunakan untuk membagi konten menjadi bagian-bagian yang berbeda, seperti header, paragraf, dan daftar. Karakteristik Utama Elemen Block: Memulai Baris Baru: Setiap elemen block akan memulai pada baris baru, sehingga memisahkan diri dari elemen lainnya. Mengisi Seluruh Lebar: Elemen block akan selalu berusaha mengisi seluruh lebar wadah induknya. Macam-macam elemen block: a.      Struktur: <div>, <header>, <footer>, <nav>, <section>, <article> b. ...

Style, Formatting, dan Komentar HTML - Zidni Ilma (2023102003)

Image
Style, Formatting, dan Komentar      HTML, sebagai bahasa pembentuk struktur dasar sebuah halaman web, tidak hanya terbatas pada penempatan teks dan gambar. Kita juga bisa mengendalikan tampilan dan format elemen-elemen di dalamnya. Namun, HTML semata tidak cukup untuk menciptakan tampilan yang menarik dan informatif. Di sinilah CSS (Cascading Style Sheets) berperan sebagai style yang memungkinkan kita mengatur tampilan elemen, dan formatting yang digunakan untuk memberikan penekanan pada teks. CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengatur tampilan dokumen HTML. Dengan CSS, kita bisa mengubah warna, ukuran, font, dan banyak lagi aspek visual dari sebuah elemen HTML. Cara menggunakan CSS yaitu dengan dengan menambahkan atribut style langsung ke elemen HTML. CSS memiliki banyak properti, antara lain: Selector: Element selector: Memilih semua elemen dengan nama tag tertentu (misalnya, p, div). ID selector: Mem...

Input dalam Formulir HTML - Zidni Ilma (2023102003)

Image
Formating Formulir HTML dengan menggunakan Input Dalam pengembangan web, formulir HTML adalah komponen penting dalam pembuatan halaman web interaktif. Elemen ini memungkinkan pengguna memasukkan informasi yang diperlukan, seperti nama atau alamat email, yang kemudian dapat dikirimkan dan diproses oleh server. Elemen penting dalam form adalah input. Elemen input memungkinkan pengguna untuk memasukkan berbagai jenis data, mulai dari teks sederhana hingga file. Elemen input memiliki banyak macamnya, antara lain: 1.      Input Color Input warna dalam form HTML memungkinkan pengguna untuk memilih warna secara visual dari sebuah palet warna. Fitur ini sangat berguna dalam aplikasi yang membutuhkan personalisasi tampilan, seperti desain tema, pemilihan warna latar belakang, atau penyesuaian warna teks. Untuk membuat input warna, kita menggunakan elemen input dengan tipe color. Berikut sintaks dasarnya. Contoh: Ketika halaman ini dibuka, akan muncul sebuah kotak ...