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


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: Memilih elemen dengan ID tertentu (misalnya, #myHeading).
    • Class selector: Memilih elemen dengan class tertentu (misalnya, .myClass).
    • Universal selector: Memilih semua elemen (misalnya, ``).
  • Property:
    • Font: font-family, font-size, font-weight.
    • Color: color, background-color.
    • Text: text-align, text-decoration.
    • Box model: margin, padding, border.
    • Layout: float, position, display.
    • Dan masih banyak lagi.
  • Value:
    • Warna: red, blue, green, hex code (#FF0000), RGB (rgb(255, 0, 0)).
    • Ukuran: px, em, rem, %.
    • Lainnya: inherit, initial, unset.

Warna sendiri memiliki tipe kode yaitu:

  1.  Hexadecimal (HEX): Kode warna ini terdiri dari enam karakter yang dimulai dengan tanda pagar (#). Contohnya, #FF0000 mewakili warna merah. Kode ini dibagi menjadi tiga bagian, masing-masing mewakili nilai untuk merah, hijau, dan biru (RGB) dalam format heksadesimal.
  2.  RGB (Red, Green, Blue): Format ini menggunakan tiga nilai numerik untuk menunjukkan intensitas warna merah, hijau, dan biru. Misalnya, rgb(255, 0, 0) juga menunjukkan warna merah.
  3.  RGBA: Ini adalah variasi dari RGB yang menambahkan komponen alpha untuk transparansi. Contohnya, rgba(255, 0, 0, 0.5) menunjukkan warna merah dengan setengah transparansi.
  4.  HSL (Hue, Saturation, Lightness): Model ini mendefinisikan warna berdasarkan hue (warna), saturasi (kecerahan), dan lightness (kecerahan). Contohnya, hsl(120, 100%, 50%) mewakili warna hijau.
  5.  HSLA: Mirip dengan HSL tetapi juga menyertakan komponen alpha untuk transparansi. Contoh: hsla(240, 100%, 50%, 0.7) untuk biru dengan transparansi 70%4.
  6.  Nama Warna: HTML dan CSS juga mendukung penggunaan nama warna standar seperti "red", "green", dan "blue". Ada sekitar 140 nama warna yang telah ditentukan.

Contoh kode menggunakan warna nama

output kode diatas


Contoh kode menggunakan kode RGB

Warna yang dihasilkan dengan kode warna RGB (72, 131, 156)

Dalam mempermudah memilih warna kita juga dapat menggunakan colour picker dari www.w3schools

Setelah memilih warna akan ditampilkan kode Hex, RGB, CMYK, HSV dan HSL

Formatting list

Formating list dalam HTML adalah cara menyusun dan mengatur tampilan dari daftar-daftar item dalam sebuah halaman web, bentuknya ada tiga macam yaitu:

1. Daftar Berurutan (Ordered List) <ol>

  • Tipe Nomor: Selain menggunakan angka standar, kita bisa mengubah tipe nomor yang digunakan dengan atribut type:
    • type="A": Huruf kapital (A, B, C, ...)
    • type="a": Huruf kecil (a, b, c, ...)
    • type="I": Angka Romawi kapital (I, II, III, ...)
    • type="i": Angka Romawi kecil (i, ii, iii, ...)
  • Mulai dari Angka Tertentu: Atribut start digunakan untuk memulai penomoran dari angka tertentu.

Contoh: 

Code

Output







2. Daftar Tak Berurutan (Unordered List) <ul>

  • Tipe Bullet: Selain bulatan standar, kita bisa mengubah tipe bullet dengan atribut type:
    • type="disc": Bulatan (default)
    • type="circle": Lingkaran
    • type="square": Kotak

Contoh:

Input

Output

3. Daftar Deskripsi (Description List) <dl>

  • Struktur: <dl> adalah wadah utama, <dt> untuk istilah, dan <dd> untuk definisi.
  • Gunakan untuk: Mendefinisikan istilah dan memberikan penjelasan, membuat glosarium, atau menampilkan metadata.

Contoh:

Input

Output

Komentar HTML

    Komentar dalam kode sangat penting untuk meningkatkan keterbacaan dan memudahkan dalam pemahaman kode, terutama saat kode menjadi lebih kompleks. Komentar tidak akan ditampilkan di halaman web, tetapi hanya terlihat dalam bentuk teks di file html tersebut.

    Untuk membuat komentar dalam HTML, kita bisa menggunakan tanda  <!-- ---> atau block kalimat yang akan dijadikan komentar lalu tekan Ctrl+space. Contoh:



Untuk lebih lengkapnya dapat diakses melalui Github

 

Comments

Post a Comment

Popular posts from this blog

Entitias HTML - Zidni Ilma (2023102003)

Image
 ENTITITAS HTML Pernah penasaran bagaimana karakter-karakter spesial seperti tanda kutip, tanda lebih besar, atau simbol mata uang bisa muncul dengan rapi di halaman web? Rahasianya terletak pada entitas HTML. Dengan menggunakan entitas, kita bisa memastikan tampilan halaman web kita selalu sempurna sesuai yag kita inginkan. Entitas HTML sendiri adalah representasi kode khusus yang digunakan untuk mewakili karakter-karakter yang memiliki makna khusus dalam bahasa HTML. Dengan menggunakan entitas, kita dapat memastikan bahwa karakter-karakter tersebut ditampilkan dengan benar di halaman web, tanpa mengganggu struktur HTML itu sendiri. Fungsi Entititas dalam HTML: Mencegah Kesalahan Interpretasi, Karakter-karakter seperti < dan > memiliki makna khusus dalam HTML (sebagai tag pembuka dan penutup). Jika kita menggunakan karakter-karakter ini secara langsung tanpa entitas, browser akan menganggapnya sebagai bagian dari struktur HTML, bukan sebagai ...
Read more

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 ...
Read more

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...
Read more