Pengenalan HTML dan CSS

HTML

Mungkin itu yang pertama kali muncul dipikiran temen-temen setelah mendengar istilah HTML.

Sederhananya, HTML (Hypertext Markup Language) merupakan suatu bahasa pemrograman yang digunakan untuk membangun sebuah halaman website atau aplikasi website.

Jika temen-temen ingin menjadi web developer yang profesional, temen-temen wajib banget untuk mendalami HTML, soalnya HTML merupakan komponen website yang utama. Ketika kita menggunakan bahasa ini, temen-temen menggunakan struktur kode sederhana seperti tag dan attribute untuk membangun halaman website. Misalnya, temen-temen membuat suatu paragraf dengan menempatkan enclosed text diantara tag pembuka <p>  dan tag penutup </p>. sebagian besar elemen bahasa ini memiliki tag pembuka dan penutup yang menggunakan systex <tag></tag>. 

CSS

Cascading Style Sheet merupakan bahasa pemrograman yang biasa digunakan oleh seorang Front-End Developer. Bahasa pemrograman ini memiliki hubungan dengan HTML karena kegunaan dari bahasa CSS yaitu untuk mendesain tampilan depan website seperti mengatur warna teks, jenis font yang digunakan, baris antar paragraf, dan jenis background yang akan di pakai.

Anatomy CSS

Dalam bahasa pemrogram CSS terdapat yang namanya Anatomy. Dimana di dalamnya terdiri dari selector, property dan value.

Sebagai contoh :    Selector {Property : Value;}    ,    h1 {Color : blue;}

syntax diatas menunjukan bahwa tag h1 yang ada pada dokumen HTML akan diwarnai dengan warna yang bernilai biru.

Font Styling

Font styling merupakan syntax yang digunakan untuk membentuk gaya dari suatu font seperti jenis font, ukuran font, ketebalan font, dan jarak antar paragraf.

Font styling memiliki beberapa Property seperti :

• Font-Familiy
• Font-Size
• Font-Weight
• Font-Variant
• Font-Style
• Line-height

Text Styling

Text styling dan font styling berbeda. jika font stying digunakan untuk mengatur gaya font, text digunakan untuk mengatur gaya dari text. Penggunaannya seperti merubah warna text, mengatur format paragraf atau text, memberi identitas pada paragraf atau text, mengatur dekorasi text, mengatur spasi antar kata hingga mengubah jenis huruf menjadi besar, kecil ataupun kapital.

Text styling memiliki beberapa Property seperti :

• Color
• Text-align
• Text-indent
• Text-decoration
• Text-transform
• Letter-Spacing
• Word-Spacing

Background

Background atau latar belakang disini memiliki beberapa property seperti :

• Backgorund-Color, latar belakang website hanya berupa warna
• Backgorund-Image, latar belakang halaman website berupa gambar
• Backgorund-Position, posisi gambar pada latar belakang
• Backgorund-repeat, jenis pengulangan gambar pada latar belakang

CSS Layouting

Css Layouting merupakan teknik untuk mengatur tata letak halaman web. Tujuannya agar halaman yang dibuat terlihat rapih dan menarik untuk dipandang. Dalam css layouting terdapat beberapa aspek seperti Display, Dimensi dan Overflow, Box Model, Margin, Padding & Border

- Display

"Setiap" tag pada HTML berada du dalam sebuah Kotak. Properti display pada CSS mengatur perilaku dari kotak tersebut.

• Inline (Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat, elemen ini tidak dapat diatur tinggi dan lebarnya)
• Inline-Block (memiliki perilaku dasar seperti inline namun inline-block dapat diatur tinggi dan lebarnya)
• Block (Elemen HTML yang secara default menambahkan baris baru ketika dibuat, elemen ini dapat diatur tinggi dan lebarnya)

- Dimensi dan Overflow

Dimensi memiliki dua property yaitu width(digunakan untuk mengatur lebar) dan heigh (digunakan untuk mengatur tinggi)

Overflow adalah property css yang digunakan untuk mengatur prilaku elemen yang memanjang kebawah atau keluar dari parentnya.

terdapat empat value dalam overflow :

• Visible (value default)
• Auto (css secara otomatis menambahkan scroll ketika kontennya melebihi batas)
• Hidden (kontennya akan disembunyikan apabila melebihi batas)
• Scroll (menambahkan scroll namun lebih lengkap dari value Auto)

- Box Model

CSS box model terduru daru margin, border, padding dan content.

www.w3schools.com

• Margin, area transparan di sekitar kotak dan diluar border

    Property dalam margin terdapat

    - Margin-Top

    - Margin-Bottom

    - Margin-Right

    - Margin-Left

• Border, batas sekeliling content dan padding

    Border memiliki beberapa style :

    - Solid (Batas berbentuk tebal)

    - Doted (Batas berbentuk titik-titik bulat)

    - Dished (Batas berbentuk garis-garis)

    - Double (Terdapat dua batas)

• Padding, area transparan di dalam kotak, biasanya digunakan untuk menambahkan jarak sebuah kotak dengan tulisan didalamya

• Content, Text atau gambar yang berada di dalam box