Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 3

    Diunggah oleh

    dina mala
    5 tayangan33 halaman

    Judul Asli

    MODUL 3

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan33 halaman

    Modul 3

    Diunggah oleh

    dina mala

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 33

    MODUL 3

    HTML dan CSS

    1. HTML
    1.1. Pengertian
    HTML adalah singkatan dari HyperText Markup Language. HTML merupakan bahasa
    markup yang dijadikan sebagai standar dalam pembuatan halaman web. Dengan
    HTML kita dapat membuat halaman web yang tersusun sebagai blok menggunakan
    elemen-elemen HTML seperti tag dan atribut.

    1.2. Struktur HTML


    Sebuah halaman HTML memiliki ekstensi file .html. Dalam sebuah dokumen
    HTML terdiri dari blok-blok elemen HTML. Sebuah elemen HTML terdiri dari tag
    dan atribut HTML. Tag adalah individu dari struktur html, kita harus membuka dan
    menutup tag dengan garis miring seperti ini <h1> </h1>. Ada beberapa variasi dengan
    tag beberapa di antaranya adalah tag self-closing yang tidak perlu ditutup dan ada juga
    tag kosong yang bisa kita tambahkan atribut apa saja di dalamnya. Atribut adalah
    properti tambahan dari tag html yang mendefinisikan properti dari setiap tag html
    seperti width, height, control, loop, input, dan autoplay. Atribut ini juga membantu
    menyimpan informasi dalam meta tag dengan menggunakan atribut name, content, dan
    type attributes.

    Secara lengkap sebuah dokumen HTML memiliki struktur sebagai berikut:


    1. <!DOCUMENT html> : merupakan tag yang digunakan untuk menyimpan informasi
    versi dari HTML yang dibuat. Secara default versi html yang dimuat adalah versi 5.
    2. <html></html> : tag ini merupakan dasar dari elemen html. Tag <html> merupakan
    parent tag dari semua element dan tag html, bahkan tag <head> dan <body> juga
    merupakan child dari tag <html>.
    3. <head> : tag head digunakan untuk menyimpan informasi meta data, judul sebuah
    halaman, halaman CSS dan lain-lain. Atribut yang dimuat dalam tag ini tidak akan
    ditampilkan kepada pengguna. Hal tersebut karena tag yang ditulis dalam tag <head>
    digunakan sebagai referensi dan watermark dari penyusun dokumen html.
    4. <body> : tag body digunakan menampilkan semua data yang meliputi teks, gambar
    hingga hyperlink. Semua konten yang ada dan ditampilkan pada halaman html akan
    dimuat di dalam tag ini.

    1.3. Semantic Element


    Semantic element adalah sebuah cara untuk mendeskripsikan suatu struktur
    HTML agar mudah dibaca oleh manusia. Elemen HTML seperti <header>, <footer>
    dan <article>. Elemen-elemen termasuk semantic elemen karena mendiskripsikan
    tujuan dari beuah elemen dan jenis konten yang ada di dalamnya. Tujuan awal adanya
    semantic elemen adalah untuk membantu menata elemen karena pada awal
    perkembangan HTML banyak programmer yang menggunakan tabel dan div.
    Meskipun hal tersebut tidak sepenuhnya salah namun kurang mudah dibaca oleh
    programmer lain. Selain itu HTML semantic juga sangat bagus untuk SEO (Search
    Engine Optimize). Berikut perbandingan antara HTML non semantic dan HTML
    semantic.

    Pada gambar di atas HTML non semantic (kanan) akan terlihat lebih panjang dan
    kurang mudah dibaca daripada HTML semantic (kiri).
    Terdapat kurang lebih 100 elemen semantic, namun umunya yang dipakai adalah:
    • <article>
    • <aside>
    • <details>
    • <figcaption>
    • <figure>
    • <footer>
    • <header>
    • <main>
    • <mark>
    • <section>
    • <summary>
    • <time>

    1.4. Tag dan Atribut


    1.4.1. Tag
    a. Tag Dasar HTML
    1. Heading
    Heading merupakan tag yang digunakan untuk membungkus kalimat yang
    menjadi judul atau sub judul dalam dokumen HTML, dengan berbagai
    ukuran yang berbeda. Pada dasarnya untuk menyatakan suatu Heading,
    digunakan tag <hx> dimana x adalah level 1 sampai 6. Tag heading
    merupakan tag yang berpasangan atau tag yang memerlukan tag pembuka
    dan penutup.

    2. Paragraf
    Untuk membuat sebuah paragraf bisa menggunakn tag <p></p>. Sebuah
    paragraf selalu dimulai dari baris baru dan di browser akan otomatis
    menambahkan jarak atas dan bawah antara paragraf.
    3. Line Breaking
    Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu
    tidak berlaku dalam penulisan dokumen HTML. Seberapa banyak kita
    memencet tombol Enter, maka tidak akan dianggap sebagai enter. Dalam
    HTML tag line break dapat digunakan untuk membuat baris baru layaknya
    fungsi tombol enter pada keyboard. Line break menggunakan tag <br>
    tanpa pasangan.
    b. Text Formating
    Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan
    menyajikan informasi-informasi yang diperlukan. HTML juga
    mendefinisikan elemen khusus, untuk mendefinisikan teks dengan makna
    khusus. HTML menggunakan unsur-unsur seperti dan untuk memformat
    output, seperti teks tebal atau miring. Beberapa tag yang dapat digunakan
    unutk melakukan formatting text:

    • teks tebal (bold) : menggunakan tag <b></b>


    • teks penting (strong): menggunakan tag <strong></strong>
    • teks miring (italic) : menggunakan tag <i></i>
    • teks menekankan (emphasis) : menggunakan tag <em></em>
    • teks menandai (mark) : menggunakan tag <mark>
    • teks kecil (small) : menggunakan tag <small>
    • teks mencoret (delete) : menggunakan tag <del>
    • teks sisipan (insert) : menggunakan tag <ins>
    • pangkat dibawah (subscript) : menggunakan tag <sub>
    • pangkat di atas (superscript) : menggunakan tag <sup>
    c. List
    List/ daftar merupakan bentuk umum yang biasa kita gunakan untuk
    menampilkan daftar dengan urutan tertentu. Dalam HTML, dikenal dua
    istilah list : ordered list dan unordered list.
    1. Ordered List (daftar berurutan)
    Ordered list adalah suatu metode mengurutkan daftar dengan
    menggunakan angka, abjad dan angka romawi pada HTML. Dalam
    ordered list ini akan ada dua jenis elemen yang dibutuhkan yaitu <ol> yang
    merupakan singkatan ordered list dan <li> yang merupakan singkatan list
    item.

    2. Unordered List (daftar tidak berurutan)


    Unordered list adalah metode mengurutkan daftar dengan menggunakan
    symbol atau karakter spesial pada HTML. Nama lain dari unordered list
    sendiri adalah bullet list. Bullet atau onordered list ini umumnya
    digunakan apabila kita ingin membuat suatu daftar yang terlepas dari suatu
    urutan-urutan tertentu. Untuk list jenis ini, pembuatannya sangat mirip
    dengan Ordered list, hanya saja ada perbedaan pada jenis syntax yang
    digunakan dimana unordered list akan menggunakan <ul>.

    d. Table
    Tabel merupakan struktur yang digunakan untuk menampilkan informasi
    dalam bentuk baris dan kolom. pada HTML, untuk pembuatan tabel
    menggunakan tag <table>, dan menggunakan tag <tr> untuk membuat baris
    dan <td> untuk membuat kolom.
    Untuk lebih mudah memahami dalam pembuatan table pada HTML, berikut
    saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada
    HTML.
    Tag <table> merupakan tag pembuka dalam membuat sebuah table pada
    html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan
    dengan baik. <tr> atau dikenal dengan table row merupakan tag yang
    digunakan untuk membuat baris dalam table HTML. <td> atau dikenal
    dengan table data merupakan tag yang digunakan untuk membuat kolom
    dalam baris. Dan tag <th> untuk membuat table head atau bagian kepala pada
    table.
    e. Tautan/ Link/ Hyperlink

    Link atau hyperlink merupakan komponen utama dari HTML yang


    digunakan untuk menghubungkan antar elemen atau antar halaman. Link
    bisa diletakkan pada teks maupun gambar. Tag link memiliki ciri khusus
    akan merubah tag child-nya menjadi berwarna biru dan memiliki garis
    bawah jika digunakan untuk membungkus elemen teks. Umumnya tag link
    tidak bisa dipisahkan dari atribut berikut:

    Atribut Fungsi
    href Menuju url suatu page html
    name Memberikan nama pada bagian tertentu pada dokumen

    target Menunjukkan target ditampilkannya link


    title Menampilkan judul dari link ketika tag link disorot
    menggunakan kursor

    Selain digunakan untuk berpindah antar halaman html, tag link juga bisa
    digunakan untuk menuju section dari sebuah halaman html. Jika digunakan
    untuk menuju halaman lain atribut href pada link diisi nama halaman yang
    dituju, untuk menuju section dari satu halaman atribut href diisi dengan nama
    halaman yang sama dan ditambahkan ‘#nama_section’. Berikut ini contoh
    penulisan sintag link untuk sebuah section.

    f. Gambar
    Untuk menampilkan gambar dapat digunakan tag <img>. Secara teknis
    gambar tidak dimasukkan ke dalam sebuah halaman web, tetapi ditautkan ke
    dalam halaman web. Tag <img> meneyimpan referensi dari URL/ lokasi file
    gambar. Tag <img> tidak bisa terpisahkan dari atribut src dan alt. Atribut src
    (source) untuk menentukan URL/ lokasi gambar. Atribut alt (alternative)
    digunakan untuk menampilkan text label jika gambar gagal dimuat di
    halaman web.
    g. Tombol
    Untuk membuat sebuah tombol dalam sebuah halaman web dapat
    menggunakan tag <button></button>. Sebuah tombol adalah elemen yang
    dapat diklik untuk menjalankan aksi tertentu.

    h. Form dan Input


    Untuk membuat form/ formulir dalam sebuah halaman web digunakan tag
    <form></form>. Namun untuk membuat form yang fungsional dibutuhkan
    elemen lain seperti input, text area, select, radio, check box, maupun button.
    1. Input
    Tag <input> digunakan untuk membuat inputan pengguna yang
    interaktif. Input tag memiliki banyak jenis dan wajib menyertakan atribute
    type untuk menentukan jenis input. Terdapat berbagai jenis type input:
    Type Keterangan
    <input type="button"> Membuat input dengan tampilan seperti tombol
    <input type="checkbox"> Membuat input dengan tampilan checkbox/
    centang
    <input type="color"> Membuat input yang menampilkan color picker/
    pemilihan warna
    <input type="date"> Membuat input tanggal (thun, bulan, hari)
    <input type="email"> Membuat input dengan format email
    <input type="file"> Membuat input unutk memilih file
    <input type="hidden"> Membuat input yang tersembunyi/ tidak tampil di
    browser
    <input type="image"> Membuat input dengan gambar sebagai tombol
    submit/ mengirimkan form
    <input type="month"> Membuat input untuk bulan
    <input type="number"> Membuat input dengan format hanya angka
    <input type="password"> Membuat input yang dapat menyembunyikan nilai
    inputnya
    <input type="radio"> Membuat input dengan tampilan radio/ pilih salah
    satu
    <input type="range"> Membuat input untuk memilih rentang nilai
    <input type="reset"> Membuat tombol unutk melakukan reset/
    mengkosongkan form
    <input type="search"> Membuat text field yang digunakan unutk
    melakukan pencarian
    <input type="submit"> Membuat tombol untuk mengirimkan form
    <input type="tel"> Membuat input khusus format nomor telepon
    <input type="text"> Membuat inputan berupa text satu baris
    <input type="time"> Membuat input waktu
    <input type="url"> Membuat input dengan fromat URL/ Link
    <input type="week"> Membuat input memilih minggu dalam satu bulan

    2. Text Area
    Jika <input type="text"> digunakan unutk melakukan input tipe text satu baris
    maka untuk melakukan input multi baris dapat digunakan <textarea>. Input
    jenis ini dapat menampung jumlah karakter yang tidak terbatas panjangnya.

    3. Select
    Merupakan jenis input yang menampilkan daftar pilihan ke bawah. Tag
    <select> memerlukan child elemen <option> untuk menampilkan pilihannya.

    4. Label
    Tag <label> sebenarnya bukan merupakan elemen unutk menambil input dari
    pengguna. Tag label digunakan unutk memberikan label nama field input agar
    mempermudah pengguna dalam memahami field input.
    1.4.2. Atribut
    Penggunaan atribut bergantung pada jenis tag HTML yang digunakan. Secara
    umum ada beberapa atribut yang biasa digunakan:

    Atribut Tag Keterangan

    accept <input> Menentukan jenis file apa yang bisa diterima oleh
    server (hanya untuk type="file")

    action <form> Menentukan kemana form akan dikirmkan saat klik


    submit

    alt <area>, <img>, <i Menentukan label text jika elemen gagal ditampilkan
    nput>

    checked <input> Menentukan apakah <input> otomatis dipilih saat


    memuat pertama kali (untuk type="checkbox" or
    type="radio")

    class Global Attributes Menentukan nama class sebuah elemen

    colspan <td>, <th> Menntukan banyak kolom yang digabungkan

    data-* Global Attributes Digunakan unutk menyimpan suatu nilai khusus

    datetime <del>, <ins>, <ti Menentukan tanggal dan waktu


    me>

    disabled <button>, <fields Mematikan sebuah elemen/ input agar tidak bisa
    et>, <input>, digunakan
    <optgroup>, <opt
    ion>, <select>, <t
    extarea>

    for <label>, <output> Menentukan hubungkan antara label dan input

    height <canvas>, <embe Mennetukan tinggi susatu elemen


    d>, <iframe>, <i
    mg>, <input>, <o
    bject>, <video>

    hidden Global Attributes Menyembunyikan suatu elemen

    href <a>, <area>, <bas Menentukan URL suatu elemen


    e>, <link>
    id Global Attributes Menentukan id unik dari sebuah elemen

    max <input>, <meter> Menentukan nilai maksimal suatu elemen


    , <progress>

    maxlength <input>, <textare Menentukan panjang karakter maksimal sebuah elemen


    a>

    method <form> Menentukan jenis HTTP method sebuah form

    min <input>, <meter> Menentukan nilai minimal suatu elemen

    multiple <input>, <select> Menentukan apakah pengguna dapat memasukkan dua


    nilai atau lebih

    name <button>, <fields Menentukan nama elemen


    et>, <form>, <ifra
    me>, <input>, <m
    ap>, <meta>, <ob
    ject>, <output>, <
    param>, <select>,
    <textarea>

    placeholder <input>, <textare Menentukan deskripsi singkat


    a>

    readonly <input>, <textare Menentukan elemen hanya dapat dilihat


    a>

    required <input>, <select> Menentukan bahwa elemen form wajib diisi


    , <textarea>

    rowspan <td>, <th> Menentukan bentang baris pada tabel

    selected <option> Menentukan sebuah pilihan dipilih

    src <audio>, <embed Menentukan URL sebuah media


    >, <iframe>, <im
    g>, <input>, <scri
    pt>, <source>, <tr
    ack>, <video>

    style Global Attributes Menentukan iniline CSS sebuah elemen

    type <a>, <button>, <e Menentukan type elemen


    mbed>, <input>,
    <link>, <menu>,
    <object>, <script
    >, <source>, <styl
    e>

    value <button>, <input Menentukan nilai sebuah elemen


    >, <li>, <option>,
    <meter>, <progr
    ess>, <param>

    width <canvas>, <embe MEnentukan lebar sebuah elemen


    d>, <iframe>, <i
    mg>, <input>, <o
    bject>, <video>

    1.5. Meta Data


    Definisi metadata secara sederhana dapat diartikan sebagai data tentang data
    (data about data). Namun definisi tersebut masih belum lengkap karena metadata tidak
    sesederhana itu. Salah satu ciri dari metadata adalah data tersebut harus terstruktur.
    Jadi definisi yang tepat untuk menggambarkan metadata adalah data terstruktur
    tentang data (structured data about data). Definisi tersebut masih sederhana dan belum
    sepenuhnya menjelaskan lebih detail tentang metadata. Task Force on Metadata
    CC:DA (committee on cataloguing: description and access) dari ALA (American
    library association) menjelaskan secara lebih detail tentang metadata yaitu data yang
    terstruktur, ditandai dengan kode agar dapat diproses oleh komputer, mendeskripsikan
    ciri-ciri satuan-satuan pembawa informasi, dan membantu identifikasi, penemuan,
    penilaian dan pengelolaan satuan pembawa informasi tersebut.
    Metadata adalah informasi yang ditanam pada sebuah file yang isinya berupa
    penjelasan tetang file tersebut. Metadata ini mengandung informasi mengenai isi dari
    suatu data yang dipakai untuk keperluan manajemen file atau data itu nantinya dalam
    suatu basis data (Putu Laxman Pendit 2007). Jika data tersebut dalam bentuk document
    docx metadatanya berupa keterangan mengenai name file, content created, date last
    saved, content type, pages, word count, character count, line count, paragraph count,
    size, date created, date modified, date accessed, computer dan masih banya lagi. Jika
    dalam bentuk pdf metadatanya berupa name, type, foder path, size, date created, date
    modified, attributes, owner dan computer. Untuk jenis data gambar jpg, metadata
    mengandung informasi mengenai siapa pemotretnya, kapan pemotretannya, dan
    setting kamera pada saat dilakukan pemotretan. Untuk audio jenis mp3 bisa tambahan
    metadatanya berupa album, year, genre, length, bit rate dan rekaman yang dipakai
    lainnya. Untuk jenis video mp4 metadatanya bisa berupa seperti mp3 dengan tambahan
    frame width, frame height, date rate, total bitrate, frame rate, channels dan jenis
    perekam video lainnya. Metadata direkam komputer secara otomatis saat sebuah file
    dibuat, sehingga bisa diketahui kapan file dibuat, siapa user pembuatnya, berapa
    ukuran filenya, demikian juga ekstensinya. Namun demikian, metadata juga dapat
    disusun secara manual. Untuk mengedit dan membaca metadata sebuah file, digunakan
    software pengolah metadata.

    Adapun jenis metadata file antara lain :

    1. Metadata deskriptif

    Data yang dapat mengidentifikasi sumber informasi sehingga dapat digunakan


    untuk memperlancar proses penemuan dan seleksi. Cakupan yang ada pada data ini
    adalah pengarang, judul, tahun terbit, tajuk subjek atau kata kunci dan informasi
    lain yang proses pengisian datanya sama dengan katalog tradisional.

    2. Metadata administratif

    Data yang tidak hanya dapat mengidentifikasi sumber informasi tapi juga cara
    pengelolaanya. Cakupan dari data ini adalah sama dengan data deskriptif hanya saja
    ditambah dengan pembuat data, waktu pembuatan, tipe file, data teknis lain. Selain
    itu data ini juga mengandung informasi tentang hak akses, hak kekayaan intelektual,
    penyimpanan dan pelestarian sumber informasi.

    3. Metadata stuktural

    Data yang dapat membuat antara data yang berkaitan dapat saling berhubungan satu
    sama lain. Secara lebih jelas, Metadata ini digunakan untuk mengetahui hubungan
    antara berkas fisik dan halaman, halaman dan bab dan bab dengan buku sebagai
    produk akhir.
    Ada beberapa skema metadata file diantaranya sebagai berikut ini.

    1. Semantic

    Dalam kaitannya dengan metadata, semantik dapat diartikan sebagai makna kata.
    Lebih jelasnya adalah kesepakatan untuk membuat istilah yang digunakan untuk
    mewakili suatu makna. Selain itu, terkadang juga diberi keterangaan tentang status
    pada istilah tersebut.

    2. Content

    Dalam hal ini, konten bisa diartikan sebagai cara mengisi semantic. content tersebut
    bisa berupa peraturan untuk kriteria pengisian unsur skema atau peraturan untuk
    nilai-nilai unsur.

    3. Sintaksis

    Sintaksis dalam skema metadata dapat berarti sebagai machine readible (dapat
    dibaca mesin) atau dengan kata lain bahasa pemrogaman. Sehingga semantic dan
    content yang telah dibuat dapat dibaca oleh mesin.

    Berikut ini contoh metadata berdasarkan skema metadata :

    1. CDWA (Categories for Descriptions of Works of Art), skema untuk deskripsi karya
    seni.

    2. DCMES (Dublin Core Metadata Element Set), skema umum untuk deskripsi
    berbagai macam sumber digital.

    3. EAD (Encoded Archival Description), skema untuk menciptakan sarana temu


    kembali pada bahan kearsipan (archival finding aids) dalam bentuk elektronik.

    4. GEM (Gateway to Educational Materials), skema untuk bahan pendidikan dan


    pengajaran.

    5. MARC (Machine Readable Cataloguing), skema yang digunakan di perpustakaan


    sejak tahun 1960-an untuk membuat standar cantuman bibliografi elektronik.
    6. METS (Metadata Encoding and Transmission Standard), skema metadata untuk
    obyek digital yang kompleks dalam koleksi perpustakaan.

    7. MODS (Metadata Object Description Standard), skema untuk deskripsi rinci


    sumber-sumber elektronik.

    8. MPEG (Moving Pictures Experts Group) MPEG-7 dan MPEG-21, skema untuk
    rekaman audio dan video dalam bentuk digital.

    9. ONIX (Online Information Exchange), skema untuk data bibliografi pada penerbit
    dan pedagang buku.

    10. TEI (Text Encoding Initiative), skema untuk encoding teks dalam bentuk
    elektronik menggunakan SGML dan XML, khususnya untuk peneliti teks di bidang
    humaniora.

    11. VRA (Visual Resources Association), skema untuk deskripsi karya visual dan
    representasinya.

    2. CSS
    2.1. Pengertian
    Setelah Anda memahami dasar-dasar HTML, langkah selanjutnya disarankan untuk
    mempelajari lebih lanjut HTML dan CSS pada saat yang bersamaan. Ini karena HTML
    jauh lebih menarik dan menyenangkan untuk dipelajari ketika Anda menerapkan CSS,
    dan Anda tidak dapat mempelajari CSS tanpa mengetahui HTML. Jika HTML
    digunakan untuk mendefinisikan stuktur dan semantik konten anda. CSS digunakan
    untuk mengatur style tampilan. Contohnya, kita bisa memberikan warna, mengatur
    font, ukuran, jarak dari konten membagi kanvas tampilan menjadi beberapa kolom,
    menambahkan animasi dan memberikan dekorasi lainnya.

    2.2. CSS Syntax


    Untuk memahami contoh penulisan syntax CSS perhatikan gambar berikut.
    Gambar 1 Contoh Kode CSS

    Gambar 1 merupakan contoh penulisan sederhana CSS. Berdasarkan Gambar 1,


    struktur CSS setidaknya terdiri dari komponen selektor, property dan value.
    Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan
    langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada
    contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat
    dalam file HTML. jJika tag HTML yang ingin diberi style memiliki ID, anda dapat
    menuliskan nama ID tersebut dengan diawali tanda kress (#). Jika tag yang diberikan
    style memiliki kelas, maka penulisan selektor dilakukan dengan menambahkan
    karakter titik (.) dan diikuti nama kelas. Perhatikan contoh berikut ini.

    Gambar 2 Contoh Selektor dengan class dan ID Pada CSS

    Pada Gambar 2 baris 1 merupakan contoh penulisan selektor CSS menggunakan class.
    Penulisan CSS dimulai dengan simbol titik (.) dan diikuti nama kelas. Baris 8
    merupakan selektor CSS menggunakan ID.
    2.3. CSS Selector
    CSS selektor merupakan komponen pertama dari aturan penulisan CSS. Selektor akan
    mengalamatkan nilai properti dan aturan dari CSS pada elemen yang telah ditentukan.
    Contoh penulisan selektor sudah dijelaskan pada Gambar 2. Pada pembahasan
    sebelumnya kita sudah belajar bagaimana mengalamatkan selektor dengan beberapa
    cara. Sebagai contoh kita bisa memasangkan tag elemen HTML sebagai selektor,
    menggunakan kelas atau ID.

    2.3.1. Selector Lists


    Selektor list adalah cara menggabungkan komponen CSS yang sama dalam satu
    baris kode sehingga aturan bisa diterapkan dalam semua selektor. Perhatikan
    contoh berikut :

    Gambar 3 Contoh selektor Lists

    Pada Gambar 3 baik selektor h1 dan .special memiliki nilai properti yang sama.
    Karena memiliki nilai properti yang sama, penulisan CSS tersebut bisa diringkas
    dalam satu baris seperti gambar berikut.

    Gambar 4 Penulisan Selektor List


    Selain menggunakan pola penulisan pada Gambar 4, untuk memudahkan dalam
    pembacaan kode penulisan selektor list juga bisa dilakukan seperti contoh
    berikut.

    Gambar 5 Penulisan Selektor List

    2.3.2. Jenis-jenis selector


    Ada beberapa jenis selektor CSS yang biasa digunakan untuk melakukan
    penulisan CSS.
    1. Type, class dan ID selector
    2. Attribute selector
    3. pseudo-classes dan pseudo-element selector

    Type, class dan ID selector merupakan penulisan CSS dengan cara memberikan
    nilai properti pada tag HTML secara langsung. Sebagai contoh memberikan nilai
    properti CSS pada tag h1, atau pada kelas .article, dan pada id #unique.
    Perhatikan contoh berikut ini :
    Gambar 6 Type, .article dan ID selector

    Attribute selector digunakan untuk memilih elemen atribut yang spesifik. Atribut
    selector akan memilih elemen berdasarkan keberadaan atribut tertentu pada
    HTML. Sebagai contoh penulisan CSS attribute selecktor.

    Gambar 7 Attribute selector

    Dalam selector, terdapat berapa jenis deklarasi selektor. Adapun jenis deklarasi
    tersebut meliputi :
    1. Attribute Selector dengan nilai spesifik, merupakan attribute selector yang
    digunakan untuk memberikan properti CSS pada atribut dan nilai yang
    spesifik. Sebagai contoh, kita akan memberikan background kuning pada
    setiap tag link dengan atribute target blank. Perhatikan contoh berikut.

    2. Attribute selector menggunakan simbol ~. Attribute selector dengan simbol ~


    akan memberikan properti CSS pada attribut yang memuat value yang telah
    ditentukan. Sebagai contoh, kita akan memberikan border/garis pada elemen
    apapun yang memuat value “flower”.
    Apabila kita menjalankan skrip diatas, maka elemen yang memuat nilai “flower”
    akan mempunyai garis tepi, sedangkan elemen yang tidak memuat nilai “flower”
    tidak akan memiliki garis tepi.

    3. Attribute selector menggunakan simbol =. Dengan menambahkan simbol =


    pada attribute selector, kita bisa memberikan properti CSS yang sama pada
    elemen yang berbeda dengan spesifik nilai yang ditentukan dan diikuti
    karakter -. Perhatikan contoh berikut.

    Apabila skrip diatas dijalankan, maka setiap elemen yang mempunyai awalan
    (prefix) top dan diikuti karater – akan memiliki warna latar belakang kuning.
    4. Attribute selector dengan simbol ^. Selektor yang diikuti simbol ^ digunakan
    untuk memilih elemen HTML tertentu yang dimulai dengan nilai spesifik
    yang telah ditentukan. Berbeda dengan simbol -, semua elemen dengan nilai
    yang telah ditentukan akan memiliki properti yang sama. Perhatikan contoh
    berikut ini.

    Apabila skrip diatas dijalankan, semua element yang spesifik dengan awalan
    “top” akan memiliki latar belakang kuning.

    5. Attribute selector dengan simbol $. Apabila simbol – dan ~ digunakan untuk


    memberikan properti CSS dengan awalan yang sama. Simbol digunakan
    untuk memberikan properti CSS yang sama dengan akhiran nilai yang
    spesifik. Perhatikan contoh skrip berikut.
    Apabila skrip diatas dijalankan, setiap elemen HTML yang mempunyai nilai
    akhiran test akan mempunyai latar belakang kuning.

    6. Attribute selector dengan simbol *. Apabila simbol ~ digunakan untuk


    memberikan properti CSS dengan awalan yang sama. Simbol digunakan
    untuk memberikan properti CSS yang sama dengan akhiran nilai yang
    memuat nilai yang ditentukan. Perhatikan contoh skrip berikut.
    Apabila skrip diatas dijalankan maka setiap elemen yang memuat nilai “te”
    akan mempunyai latar belakang yang sama berwarna kuning.

    2.4. CSS Value dan unit


    Setiap properti yang digunakan dalam CSS memiliki tipe nilai yang mendefinisikan
    kumpulan nilai yang diperbolehkan untuk properti tersebut. Dalam spesifikasi CSS
    dan halaman properti, kita bisa melihat nilai dari masing-masing type CSS yang
    dikelompokkan dalam kurung kurawal seperti <color> atau <length>. Kita juga bisa
    menyebut CSS value dengan nama tipe data. Jenis nilai dalam CSS digunakan untuk
    mendefinisikan kelompok nilai yang diperbolehkan untuk mengisi sebuah tipe data.
    Sebagai contoh, untuk mengisi tipe data <color> dalam CSS kita bisa menggunakan
    fungsi rgb() atau nilai hex dan kode warna. Hal yang perlu kita garis bawahi dalam
    menentukan nilai CSS adalah, setiap nilai yang kita gunakan untuk mengisi tipe data
    <color> memiliki kompabilitas pada masing-masing browser. Berikut ini akan dibahas
    mengenai beberapa jenis value dan unit yang biasa digunakan dalam CSS.

    2.4.1. Numbers
    Ada beberapa jenis nilai angka yang sering kita gunakan dalam CSS. Perhatikan
    tabel berikut untuk memahami jenis nilai angka dalam CSS.

    Tipe data Deskripsi


    <integer> Semua bilangan seperti 1926 atau -55
    Tipe data <number> digunakan untuk merepresentasikan nilai desimal.
    <number> Tetapi tidak menutup kemungkinan tipedata <number> juga digunakan
    untuk untuk bilangan non desimal seperti 0.255, 128, atau -1.2.
    Tipe data <dimension> adalah tipe data bilangan yang diikuti oleh unit
    yang melekat pada nilai. Sebagai contoh 45deg, 5s, atau 10px. Tipe
    <dimension>
    data <dimension> terdiri dari <length>, <angle>, <time>, dan
    <resolution>.
    Tipe data <percentage> digunakan untuk mengisi nilai dengan
    mengambil pecahan nilai elemen lain. Sebagai contoh 50%. Nilai
    <percentage>
    percentage relatif terhadap kuantitas nilai komponen lainnya. Sebagai
    contoh , panjang sebuah elemen selalu relatif dengan nilai parent-nya.

    2.4.2. Lengths
    Dalam CSS ukuran dua jenis ukuran panjang, relative dan absolute.
    a. Absolute
    Panjang jenis absolute memiliki nilai yang selalu sama dan tidak bergantung
    pada nilai lainnya.

    Unit Nama Setara dengan


    cm Centimeters 1cm = 37.8px = 25.2/64in
    mm Millimeters 1mm = 1/10th of 1cm
    Q Quarter-millimeters 1Q = 1/40th of 1cm
    in Inches 1in = 2.54cm = 96px
    pc Picas 1pc = 1/6th of 1in
    pt Points 1pt = 1/72nd of 1in
    px Pixels 1px = 1/96th of 1in

    b. Relative
    Panjang jenis relative merupakan nilai CSS yang bergantung dengan lainnya.
    Seperti ukuran font elemen parent atau ukuran viewport.

    Unit Relative dengan


    em Font size of the parent, in the case of typographical properties
    like font-size, and font size of the element itself, in the case of
    other properties like width.
    ex x-height of the element's font.
    ch The advance measure (width) of the glyph "0" of the element's
    font.
    rem Font size of the root element.
    lh Line height of the element.
    rlh Line height of the root element. When used on the font-
    size or line-height properties of the root element, it refers to the
    properties' initial value.
    vw 1% of the viewport's width.
    vh 1% of the viewport's height.
    vmin 1% of the viewport's smaller dimension.
    vmax 1% of the viewport's larger dimension.
    vb 1% of the size of the initial containing block in the direction of
    the root element's block axis.
    vi 1% of the size of the initial containing block in the direction of
    the root element's inline axis.
    svw, svh 1% of the small viewport's width and height, respectively.
    lvw, lvh 1% of the large viewport's width and height, respectively.
    dvw, dvh 1% of the dynamic viewport's width and height, respectively.
    2.4.3. Percentages
    Dalam beberapa kasus, sebuah persentase diperlakukan sama dengan sebuah
    panjang. Bedanya sebuah persentase selalu bergantung pada nilai lainnya.
    Sebagai contoh jika kita memberikan nilai persentase pada width, akan
    menghasilkan lebar persentase dari parent-nya.

    2.5. The Box Models


    Segala yang ada di CSS memiliki kotak di sekelilingnya. Pemahaman mengenai
    permodelan merupakan kunci untuk membuat tata letak CSS yang kompleks.
    Pemodelan kotak pada dasarnya adalah kotak yang membungkus setiap elemen
    HTML. Hal tersebut meliputi margin, border, padding, dan konten itu sendiri. Berikut
    ilustrasi dari pemodelan kotak.

    Penjelasan:
    • Content
    Konten adalah dimana teks atau media ditampilkan

    • Padding
    Merupakan area sekitar konten dan transparan
    • Border
    Garis tepi yang mengelilingi padding dan konten

    • Margin
    Area di luar garis tepi dan transparan

    2.6. CSS Debugging


    Debugging pada CSS merupakan kegiatan untuk mencari tahu penyebab sebuah layout
    memiliki tampilan yang tidak sesuai. Langkah pertama dalam debugging CSS adalah
    dengan cara mengidentifikasi permasalahan utama. Secara umum terdapat beberapa
    masalah yang sering dijumpai:
    • Ukuran konten yang melebihi parent elemen/ overflow
    Hal ini bisanya terlihat dengan adanya scrollbar dan konten terdorong keluar
    dari viewport

    • Style bawaan browser yang tidak konsisten


    Bisa dilihat jika terdapat perbedaan/ perubahan tampilan unutk pernagkat dan
    browser berbeda

    • Style yang saling timpang tindih


    Terjadi jika bebrapa style saling menimpa satu sama lain yang menyebabkan
    tampilan menjadi tidak sesuai dengan yang diinginkan

    • Struktur CSS yang berubah karena perubahan DOM (Document Object Model)
    Terjadi ketika terdapat perubahan dalam DOM sehingga style atau class CSS

    Ketika dijumpai masalah pada CSS kita dapat menggunakan DevTools maupun
    inspect elemen bawaan browser. Secara default browser seperti Chrome, Edge,
    Firefox, dsb.

    Anda mungkin juga menyukai