Teori Teori HTML CSS

-

TEORI TEORI HTML DAN CSS



Pembukaan

Selamat Datang Di Warung Mang Zuckerberg, Kali Ini Kita Akan Membahas Tentang HTML Dan CSS. Seperti Yang Kalian Lihat Dijudul Kali Ini Kita Akan Membahas Tentang Teori Teori Dari HTML Dan Juga CSS Langsung Saja Kita Masuk Ke Materinya.


Aplikasi

Untuk Software Dan Aplikasi Yang Digunakan Ada Beberapa Diantaranya:
  • Visual Studio Code ( Desktop )
  • Notepad ++ ( Desktop )
  • Code Editor ( Mobile )
Itulah Beberapa Aplikasi Yang Dapat Digunakan Dalam Pembuatan Layout Dalam HTML Dan CSS.


HTML

Apa Itu HTML?

HTML (Hypertext Markup Language) adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web.

File HTML diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser.

Halaman halaman HTML terdiri atas serangkaian tags (bisa disebut juga elements), Tag tersebut yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.

Tag Pembuka Diawali Dengan <tag>

Sedangkan Tag Penutup Diawali Dengan </tag>

Berikut contoh kode dari susunan atau struktur HTML:

See the Pen Untitled by PallZuckerberg (@pallzuckerberg) on CodePen.

Untuk Hasilnya Anda Bisa Klik Result Yang Ada Di Kolom Diatas.



CSS

Apa Itu CSS?

CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman. 


Contoh Penulisan Script Di CSS

Dalam CSS terdapat beberapa atribut dalam menyeleksi suatu elemen, dapat menggunakan class, id, dan value.



See the Pen Untitled by PallZuckerberg (@pallzuckerberg) on CodePen.

Untuk Hasilnya Anda Bisa Klik Result Yang Ada Di Kolom Diatas.


Metode Stylesheet

Ada Beberapa Metode Stylesheet di CSS Diantaranya 

  • Internal Style
  • External Style
  • Inline Style
Internal Style
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>.
Internal CSS juga dikenal dengan sebutan Embeded CSS.
Tag <style> bisa ditulis di dalam tag <head>, bisa juga ditulis di dalam tag <body>. Namun kebanyakan orang menulisnya di dalam <head>.

Kelebihan Internal CSS

  • Mudah dalam melakukan editing tiap halaman website
  • Tidak perlu melakukan upload file CSS karena masuk dalam file HTML
  • Class dan ID bisa dipakai oleh internal stylesheet
  • Mudah saat memperbaiki error CSS website

Kekurangan Internal CSS

  • Kurang efisien untuk penggunaan beberapa halaman website yang sama karena Anda harus menuliskan ulang.
  • Performa website menjadi lebih lambat karena setiap halaman memiliki CSS sendiri.
  • Ukuran file menjadi lebih besar karena setiap halaman memiliki CSS sendiri.



See the Pen Internal Style by PallZuckerberg (@pallzuckerberg) on CodePen.

Untuk Hasilnya Anda Bisa Klik Result Yang Ada Di Kolom Diatas.


External Style


Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis di dalam file khusus yang berekstensi .css.


Kelebihan External CSS

  • Ukuran file HTML menjadi lebih kecil
  • Penulisan kode HTML menjadi lebih rapi
  • Loading website menjadi lebih cepat
  • File CSS bisa digunakan untuk beberapa halaman website berbeda

Kekurangan External CSS

  • Tidak cocok untuk halaman website yang membutuhkan halaman custom
  • Halaman website rawan berantakan saat file CSS gagal load dengan sempurna sehingga tampilan website berantakan.

Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML.
Ada dua cara yang bisa kita lakukan:

  1. Menggunakan tag <link>
  2. Menggunakan @import


1. Menggunakan Tag <link>

<link rel="stylesheet" type="tex/css" href="style.css">

Jika Kita Menggunakan Cara 1 Maka Hasilnya Akan Menjadi Seperti Dibawah Ini

See the Pen Eksternal 1 by PallZuckerberg (@pallzuckerberg) on CodePen.

Untuk Hasilnya Anda Bisa Klik Result Yang Ada Di Kolom Diatas.


2. Menggunakan @import

<style type="text/css">
@import "style-ku.css";
</style>

Jika Kita Menggunakan Cara 2 Maka Hasilnya Akan Seperti Dibawah Ini

See the Pen Eksternal 2 by PallZuckerberg (@pallzuckerberg) on CodePen.

Untuk Hasilnya Anda Bisa Klik Result Yang Ada Di Kolom Diatas.


Inline Style

Inline CSS adalah memasukan kode CSS yang ditulis secara langsung pada setiap atribut HTML. Jadi setiap atribut memiliki style CSS yang berbeda tergantung kebutuhan .

Inline CSS ini kurang efisien dikarenakan satu atribut memiliki stylenya tersendiri sehingga tidak cocok untuk 

3. Inline Style

<h1 style="color:orange; font-family: arial;">Qwords.com</h1>



See the Pen Untitled by PallZuckerberg (@pallzuckerberg) on CodePen.

Untuk Hasilnya Bisa Klik Result Yang Ada Di Kolom Diatas.


Layout Menggunakan HTML Dan CSS


Setelah Mengetahui Teori tentang HTML dan CSS Maka Kita Bisa Mencoba Menggambungkannya Untuk Membuat Layout Dari HTML dan CSS Tersebut Dibawah Ini Adalah Contoh Layout Yang Dapat Kalian Buat Dengan Menggabungkan 2 Bahasa Pemrograman Diatas.

See the Pen Untitled by HippoStalker (@HippoStalker69) on CodePen.

Untuk Hasilnya Bisa Klik Result Yang Ada Di Kolom Diatas.


HTML TAG

Sekarang saya ingin memberikan daftar referensi tag-tag HTML. Tentunya sobat wajib mengetahui kegunaan tag-tag html beserta atribut-atribut globalnya.

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

  • <!DOCTYPE html> — untuk deklarasi type dokumen;
  • <html> — tag utama dalam HTML;
  • <head> — untuk bagian kepala dari dokumen;
  • <title> — untuk judul web;
  • <body> — untuk bagian body dari dokumen.

Klik Link Ini Untuk Info Lebih Lengkap Tentang Tag HTML. 


© 2022 By Warung Mang Zuckerberg

Komentar

Posting Komentar