Skip to content

Belajar HTML dan CSS, Bagaimana Perbedaannya?

HTML (HyperText Markup Languange)

HTML adalah sebuah kerangka dalam sebuah WEB. Sebagai contoh, kita ibaratkan sebuah Rumah.

Apakah kerangka dari rumah? Dinding, atap, dan pintu.

Apakah kerangkah dari HTML? Head, Body, Footer.

Contoh HTML code: <p><a href="titikkoma.net">Link></a></p>

CSS (Cascading Style Sheet)

CSS menggambarkan persentasi dari tampilan HTML. Yang termasuk didalamnya meliputi warna, huruf, tata letak dan lainnya. CSS code ada dalam tag <style type="text/css">...</style>

Mari kita gambarkan dalam sebuah rumah.

Gambaran sebuah rumah, kita butuh cat, perabotan dan akesoris.

Dalam CSS ada colors, fonts, size.

Contoh CSS code: .my-font{ color:midnightblue; font-size: 1.4em; }

Sekarang kita coba test menggunakan keduanya HTML dan CSS

Mengenal Tag HTML

Cara menuliskan tag adalah diawali dan diakhiri dengan kurung siku (<>)

contoh: <b>ini adalah text<b>

Tag diatas adalah contoh penggunaan Bold pada sebuah teks yang membuat teks tersebut jadi tebal/bold.

Beberapa contoh tag di HTML:

Paragraphs ( <p> text </p> )

Bolded text ( <b> text </b> )

Italicized text ( <i> text </i>)

Links ( <a href=“link here”>My linked text</a> )

Images ( <img src=“image_URL_here” alt=“Description”> )

Tentunya ada ribuan tag disini. Tetapi, ada beberapa tag lain yang tidak berdaya tanpa CSS. Contoh: <div ></div>, <section></section>

SPESIFIK TAG HTML

Dalam Tag HTML terdapat atribut class dan id. Apakah perbedaan Class dan Id?

CLASS, digunakan untuk menautkan banyak tag dibawahnya secara bersamaan. Kita dapat membuat class yang sama dalam sebuah halaman.

Contoh tag dengan class: <div class="font-blue">Ini teks.</div>

Tag div dengan class bernama “font-blue” akan membuat semua font yang ada dalam div tersebut bewarna biru. meskipun kita menambahkan tag lain didalamnya, warna font nya tetap mengikuti.

Membuat CSS dengan class:

<style type="text/css">
     .font-blue { color:blue; }
</style>

ID, ditargetkan untuk 1 tag saja. Tidak boleh ada ID yang sama dalam satu halaman.

Contoh tag dengan id: <div id="my-profile"></div>

Membuat CSS dengan id:

<style type="text/css">
#my-profile {

    color: green;
    width: 100%;
    background-color: #3097D1
}
</style>

Avatar

Hi I am Tiko.
Welcome to my Blog. Dapatkan review dan artikel menarik dari komik maupun bacaan untuk mengisi hari mu (entah berguna atau tidak). Tapi tetap jangan lupa Ibadah dan belajar ya adik adik.
Thank Kyu!

No comments yet.

Leave a Reply

Your email address will not be published. Required fields are marked *

SidebarComments (0)