Langsung ke konten utama

MENGENAL HTML DAN CSS




Halo-halo semuanya! Apakah kalian ingin belajar cara membuat website? Disini saya mau kasih tahu mulai dari mana untuk membuat website. Pertama-tama kita mulai dari HTML lalu masuk ke CSS, karena untuk menjadi seorang web developer HTML dan CSS diperlukan sebagai pondasi.

Namun sebelum kita masuk ke topik pembahasannya, anda harus menyiapkan text editor dan web browser. Text editor digunakan sebagai tools untuk menulis kode, sedangkan web browser digunakan untuk mengakses website.
Pada tutorial ini, kami akan menggunakan Visual Studio Code sebagai teks editornya dan Google Chrome sebagai browsernya. Anda bebas menggunakan tool favorit anda.

Nah, sekarang mari masuk topik pembahasannya.


1. HTML 



HTML adalah kerangka dari semua halaman web. Ini sering kali merupakan bahasa pertama yang dipelajari oleh developer, marketer, dan designer dan merupakan inti dari pekerjaan pengembangan front-end. Jadi apa sebenarnya HTML itu? HTML menyediakan struktur untuk konten yang muncul di situs web, seperti gambar, teks, atau video. HTML adalah singkatan dari HyperText Markup Language.

Biasanya situs situs web memiliki sejumlah halaman yang berbeda, misalnya adalah Contact us, beranda, side bar dan berbagai macam lagi. Di halaman-halaman tersebut pasti terdiri dari serangkai element atau tag. Tag tersebut membentuk hierarki dimulai dari heading, paragraf atau block konten lainnya.

sebagian besar elemen menggunakan tag pembuka dan penutup dengan menggunakan syntax <tag></tag> 

lalu Tag-tag wajib

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.
 atau kalian bisa melihat penjelasan lebih detailnya disini.

 dan berikut adalah struktur HTML

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.


2. CSS 




Apasih CSS itu? CSS adalah singkatan dari Casading Style Sheet. Markup language ini biasanya dipasangkan oleh HTML. CSS adalah tools pelengkap HTML yang berguna untuk mengubah tampilan website. Dengan adanya CSS, tag html tampilan website bisa dibentuk menjadi terlihat lebih menarik dan efisien.

Jenis CSS ada tiga yakni ; Internal CSS, External CSS dan Inline CSS. 

Contoh script CSS adalah dengan menggunakan beberapa atribut yang menyeleksi suatu element yaitu dengan class, id dan value. 


See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.



Metode Stylesheet meliputi dua hal yaitu : 
  • Internal Style
  • External Style 
Internal Style 

Kode CSS internal diletakkan di dalam bagian <head> pada halaman. Class dan ID bisa digunakan untuk merujuk pada kode CSS, namun hanya akan aktif pada halaman tersebut. Style CSS yang dipasang dengan metode ini akan di-download setiap kali halaman dipanggil, jadi ini akan meningkatkan kecepatan akses. Namun, ada beberapa case dimana penggunaan internal stylesheet justru berguna. Salah satu contohnya adalah untuk mengirimkan template halaman ke seseorang – karena semuanya bisa terlihat dalam 1 halaman, maka akan lebih mudah untuk melihat previewnya. CSS internal diletakkan di dalam tag <style></style>. Contohnya:


See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.



External Style 

Salah satu cara yang paling nyaman untuk menambahkan CSS ke website Anda adalah dengan menghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun yang Anda buat pada file CSS akan tampil pada website Anda secara keseluruhan. File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman




See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.



Inline CSS 

Inline CSS digunakan untuk tag HTML tertentu. Atribut <style> digunakan untuk memberikan style ke tag HTML tertentu. Cara ini kurang direkomendasikan, karena setiap tag HTML malah harus diberikan style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline CSS. Namun, di beberapa situasi justru inline CSS menjadi berguna. Contohnya, pada saat Anda tidak memiliki akses ke file CSS atau harus mengubah style untuk 1 elemen saja.
Contoh halaman HTML dengan inline CSS adalah seperti berikut:


See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.



Untuk konsep layout HTML dan CSS akan dapat menggunakan script seperti contoh dibawah.

See the Pen Untitled by Keysha Rachelia (@sourjeally) on CodePen.

Mungkin segitu saja materi ringkasan dari saya, saya harap kalian semua dapat mengerti dan bisa mencobanya dirumah. Semangat! 

Komentar

Posting Komentar

Postingan populer dari blog ini