HTML DAN CSS

 HTML DAN CSS

Pengertian HTML 

Hyper Text Markup Language (HTML) adalah kerangka yang membentuk dan mengatur bagaimana sebuah halaman web akan ditampilkan di browser. Untuk membentuk dan mengatur halaman tersebut kita menggunakan markah / tanda atau lebih umum disebut tag.

Tag HTML mempunyai tag pembuka dan penutup. Tag pembuka menggunakan simbol kecil dari (<) dan besar dari (>), begitupun dengan tag penutup, hanya saja untuk tag penutup di tambahkan slash.

Sejarah HTML

HTML diciptakan oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi pertama HTML dirilis oleh Tim Berners Lee pada tahun 1991, yang memiliki 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute (tag modifier) yang juga baru. Ketika bekerja dengan bahasa markup ini, Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p>  dan tag penutup </p>.

Fungsi HTML

Fungsi HTML

1.Menandai bagian-bagian website seperti navigation, main, footer, dan header.

2.Memberikan struktur dasar dan format untuk konten yang ditampilkan di peramban web.

3.Membentuk tautan dan navigasi.

4.Mengatur struktur konten, menyediakan semantik, dan memfasilitasi pembentukan formulir

Cara Kerja HTML

HTML bekerja dengan cara menandai suatu objek dengan kode pembuka dan penutup sesuai ketentuan yang ada. Kemudian web browser menerjemahkannya sesuai dengan kode yang tertulis, kemudian menampilkannya. Untuk membuat dokumen HTML, pengguna perlu membuat dokumen dengan format HTML pada aplikasi editor HTML, kemudian dokumen tersebut akan tersimpan dengan format html atau html Dokumen HTML yang sudah dibuat akan berisi berbagai komponen HTML yang menyusun berbagai bagian. File atau ekstensi HTML bisa dibuka dengan menggunakan berbagai browser.

Kelebihan HTML 

1.Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.

2.Dijalankan secara alami di setiap web browser.

3.Mudah dipelajari.

4.Open-source dan sepenuhnya gratis.

5. Rapi dan konsisten.

Kekurangan HTML

1.Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan 2.JavaScript atau bahasa backend, seperti PHP.

3.Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun 4.menggunakan elemen yang sama, seperti header dan footer.

5.Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.

Struktur HTML

- Tag html: Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung sudut (<...>), lalu di dalamnya berisi nama tag. Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain.

- Elemen: Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree. Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan beberapa atribut.

- Atribut: Atribut adalah kata kunci khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perilaku dari elemen. Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan atribut seperti elemen <a>, <img>, <video>, dll.

Pengertian CSS

CSS merupakan singkatan dari Cascading Style Sheets, CSS digunakan untuk menentukan gaya dari tampilan website yang akan kita buat sepeti tata letak halaman, warna, dan font. Semuanya dapat ditentukan oleh CSS, CSS bertujuan agar website telihat lebih menarik.
Pada dasarnya tanpa menggunakan CSS, tampilan website dapat terlihat menarik bahwa dengan bahasa HTML namun penggunaan HTML terbukti tidak efektif jika digunakan untuk design tampilan oleh karena itu CSS dan HTML tidak dapat dipisahkan satu sama lain.

Fungsi CSS

1.Secara umum CSS berfungsi  untuk mengatur halaman web berbasis HTML atau markup lainnya.

Mempercepat loading halaman WEB: Jika Anda mengatur tampilan website dengan CSS, kecepatan loading website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan. Dengan begitu, beban pada saat proses loading website lebih kecil.

2.Memudahkan pengelolaan kode: Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar belakang semua halaman website. Maka, cukup edit kode CSS terkait latar belakang, perubahan itu akan diterapkan di semua halaman.

3.Menawarkan lebih banyak variasi tampilan: CSS menawarkan lebih banyak style tampilan, sehingga Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa menggunakan CSS untuk membuat tombol dengan warna yang Anda inginkan, atau membuat menu dropdown CSS

Jenis -Jenis CSS

- Inline CSS: Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML. Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.

- Internal CSS: Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman. Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.

- External CSS: External CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.

Cara Kerja CSS

- Seleksi Elemen: Pertama, Anda memilih elemen atau kelompok elemen tertentu pada halaman web yang ingin Anda gayakan. Selektor CSS digunakan untuk menargetkan elemen ini. Contoh selektor: p (untuk elemen paragraf), .header (untuk elemen dengan kelas "header"), #title (untuk elemen dengan id "title").

- Deklarasi Properti: Setelah elemen atau kelompok elemen ditargetkan, Anda mendeklarasikan properti-properti gaya yang ingin diubah. Properti ini bisa berupa warna, ukuran font, tata letak, jarak, dan lain-lain. Contoh deklarasi: color: blue;, font-size: 16px;, margin-top: 10px;.

- Pengaplikasian Gaya: Setelah deklarasi properti gaya ditentukan, Anda menerapkan gaya ini pada elemen atau kelompok elemen yang sesuai dengan selektor. Gaya ini dapat diterapkan langsung pada elemen dalam HTML menggunakan atribut style, atau melalui elemen

Kelebihan CSS

- Mempermudah dan mempersingkat dalam pembuatan dan pemeliharaan dakumen web

- Fleksibel dalam penggunaannya dan interaktif serta nyaman dipandang

- Dapat digunakan pada semua browser

- Ukuran file kecil sehingga bandwidth yang dibutuhkan otomatis lebih kecil

Kekurangan CSS

- Ada beberapa browser lama tidak kompatible dengan CSS.

- Di butuhkan waktu yang cukup lama dalam mendesain dan membuatnya

- Harus Tahu dalam penggunaannya.

- Tidak semua browser dapat mengartikan kode CSS dengan cara yang sama, sehingga tampilan pada web dengan CSS terlihat baik pada browser yang satu, tetapi berantakan di browser yang lain.

Fitur HTML

1. HTML menawarkan lebih dari 100 tag untuk mendefinisikan elemen dasar halaman web

2. Bahasa markup didukung oleh semua browser web utama yang berjalan pada OS apa pun

3. HTML menggunakan struktur pohon untuk mengatur konten halaman web

4. Aspek penting dari HTML adalah menggunakan tautan untuk menghubungkan beberapa halaman ke situs web

5. Sebagian besar pengembang front-end menganggap HTML mudah dipelajari dan dipahami.

Fitur CSS

1. CSS menawarkan berbagai deklarasi dan properti berbeda untuk menata halaman

2. Keuntungan utama CSS adalah memisahkan desain dari konten halaman web. CSS dapat  dihubungkan ke HTML melalui beberapa metode: inline, internal, atau eksternal..

3. Pemilih memungkinkan Anda menargetkan elemen atau grup elemen apa pun dalam file HTML

4. Deklarasi CSS menggunakan format pasangan kunci-nilai untuk menentukan properti gaya yang berbeda

Perbedaan HTML Dan CSS

• Jenis bahasa : HTML adalah bahasa markup. CSS adalah bahasa lembar gaya.
• Persyaratan : Anda memerlukan HTML untuk membuat halaman web dasar, tetapi penggunaan CSS bersifat opsional. Namun, halaman tersebut pada dasarnya akan berupa teks biasa.
• Ketergantungan : Anda dapat menanamkan kode CSS langsung ke markup HTML, tetapi Anda tidak dapat menanamkan HTML ke dalam kode CSS.
• Arsitektur : HTML menggunakan tag penutup untuk menentukan elemen halaman web individual sedangkan CSS menggunakan sintaksis blok untuk penyeleksi dan deklarasi.
• Kesesuaian : HTML distandarisasi di seluruh browser web, sedangkan CSS memiliki interpretasi yang sedikit berbeda di dalam Firefox, Chrome, Internet Explorer, dan browser lainnya.
• Kurva pembelajaran : HTML jauh lebih mudah dipelajari karena CSS memiliki banyak keanehan berbeda yang harus ditangani di berbagai browser.

Source : https://blog.teamtreehouse.com/css-vs-html