Seperti biasa sebelum memulai hal yang perlu disiapkan adalah text editor bisa menggunakan VsCode atau yang lain dan browser.
Yang akan kita pelajari disini adalah:
Dalam membuat situs atau website tentunya kita mempunyai gambaran seperti apa tampilan web yang akan kita buat, atau jika kita mengerjakan suatu project tentunya kita di beri gambaran tampilan situs yang akan kita buat. Gambar di bawah adalah contoh tampilan web yang akan kita buat dari gambar yang kita lihat maka akan muncul ide-ide tentang apa yang akan kita buat.
1. Struktur HTML
Pada dokumen HTML, ada beberapa aturan yang harus kita ikuti. Misalnya didalam HTML terdapat element <head> dan<body> yang wajib berada dalam apitan element <html>. Mari kita lihat bentuk dokumen HTML sederhana pada html.
<!DOCTYPE html> berfungsi untuk mendeklarasikan kepada komputer bahwa kita akan menuliskan perintah dalam kode html, ini juga akan memastikan bahwa secara otomatis versi HTML situs web kita adalah yang terbaru.
<html></html> element ini untuk menandakan bahwa kita akan memulai dan mengakhiri dokumen dalam kode html.
<head></head> element ini diisi dengan metadata atau pengkodean karakter, judul situs web, dan tautan ke file CSS, element ini tidak akan terlihat di browser.
<body></body> element ini yang berisikan konten yang akan kita buat dalam website kita.
Berikut adalah contoh struktur sederhana dari code html:
2. Layout Dasar
Layout atau tata letak adalah bagian yang paling penting dalam mengatur tampilan web. Secara umum layout terdiri dari tiga bagian yaitu: header, main, footer.
Kita akan membuat layout dengan elemen <div> "div" yang mewakili kata "divisi". Tag <div> digunakan untuk mengelompokkan element. Jadi bisa kita artikan bahwa layout terdairi dari tiga element <div> dengan nama class header, main, dan footer.
Agar lebih paham sekarang mari kita implementasikan kedalam text editor, buka text editor dan ketikkan code di bawah:
Code HTML
Code CSS
Kemudian lihat hasilnya di browser:
Dari hasil tampilan web di atas bisa kita lihat bahwa disini kita akan memulai membuat sebuah situs dengan tema latar belakang hijau. Teman-teman bisa membuat sesuai dengan background yang teman-teman inginkan, ini adalah contoh dasar dalam membuat tampilan situs website.
Terima Kasih dan Semangat Belajar.
Hallo teman-teman, terima kasih sudah membaca tulisan saya, semoga apa yang saya tulis di blog ini bisa bermanfaat. 
Hello, perkenalkan saya Andri Yusuf, Saya adalah bagian yang mengelola website ini. website ini saya buat sejak masih kuliah di bagian teknik informatika. Bagi saya menulis diblog adalah salah satu cara untuk menyimpan sekaligus berbagi ilmu yang pernah didapat. Terima Kasih telah berkunjung di Blog saya, mohon maaf jika ada kekurangan dalam penyampaian isi blog ini dan senang jika bisa berteman dengan anda. Sampai Jumpa!
Tidak ada komentar:
Posting Komentar