HTML : Mengenal dan Belajar Menggunakan Class dan Id pada HTML

Assalamualikum Wr. Wb.

create-script - haii gaesss...pada kesempatan kali ini saya akan sharing mengenai Class dan Id beserta cara penggunaannya. sebelumnya, apa sih itu Class dan Id?, bagaimana cara menggunakannya?.....baiklah, supaya tidak penasaran. mari kita simak pembahasan berikut ini...

A. PENDAHULUAN

Pengertian

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

Latar Belakang

jaman sekarang ini, tampilan dalam pembuatan website sangat dibutuhkan, karena, tanpa diberi tampilan tambahan, website tersebut akan terlihat kurang. disini saya akan sharing tentang cara mengatur tampilan, terutama menggunakan Class dan Id

Maksud dan Tujuan

agar dapat menggunakan Class dan Id

Hasil yang Diharapkan

dapat menggunakan Class dan Id dalam pembuatan sebuah Website.

B. ALAT DAN BAHAN

Text Editor
Web Browser

C. PEMBAHASAN

Class dan Id dapat digunakan sebagai penanda dalam tag html. penanda disini berarti untuk memberi tanda pada tag HTML yang ingin di atur tampilannya. untuk apa kita perlu memberi penanda?, karena agar kita dapat memanipulasi menggunakan CSS atau juga JavaScript.

Mengenal Class dan Id pada HTML

Perbedaan Penanda Class dan Id adalah, jika Class dapat dipanggil dengan cara menggunakan tanda titik (.) pada awal nama penandanya. kemudian Id dipanggil oleh CSS atau JavaScript dengan menggunakan cara memberikan tanda pagar (#) pada awal penandanya. disini, Class memiliki keunggulan, yaitu, Class dapat diberikan pada banyak elemen HTML, dan dapat dipanggil sekaligus. sedangkan Id hanya dapat bekerja pada satu penandaan saja, dan dapat dipanggil dengan satu elemen saja.

Praktek

Ketikkan Script berikut menggunakan Text Editor Anda :

<!DOCTYPE html>
<html>
<head>
    <title>Create-Script</title>
    <style>
            color: orange;
    font-family: sans-serif;
    text-align: center;
}

.pertama{
    padding: 50px;
    width: 100px;
    color: #fff;
    margin: 10px;
    background: red;
}
.kedua{
    padding: 50px;
    width: 100px;
    color: #fff;
    margin: 10px;
    background: green;
}
.ketiga{
    padding: 50px;
    width: 100px;
    color: #fff;
    margin: 10px;
    background: blue;
}

#idpertama{
    width: 400px;
    color: #fff;
    background: blue;
    padding: 50px;
}
    </style>
</head>
<body>
    <h1>Mengenal dan Belajar Menggunakan Class dan Id pada HTML.</h1>
    <div class="pertama">Div Pertama Kotak Berwarna Merah</div>
    <div class="kedua">Div Kedua Kotak Berwarna Hijau</div>
    <div class="ketiga">Div Ketiga Kotak Berwarna Biru</div>
    <div id="idpertama">Id Pertama</div>
</body>
</html>