Mempelajari tentang html serta css sebagai awal memperluas ilmu dalam dunia programming
Pengantar:
Tutorial ini akan menjadi bagian pertama dari dua bagian dasar tentang cara membuat halaman web dasar dengan komponen penting menggunakan HTML dan CSS murni.
Struktur:
Halaman web kita akan terdiri dari tajuk yang menutupi lebar penuh konten di bagian atas halaman, bagian tubuh yang mencakup sebagian besar dari tajuk hingga cukup jauh ke bawah halaman, bilah samping yang berisi widget di sisi kanan dari halaman – di samping bagian badan utama halaman, dan kaki yang menutupi lebar (dan mungkin tinggi) yang sama dengan bagian header; di bawah bagian body dan side bar.
Bagian ini:
Bagian ini akan membahas HTML (Hypertext Markup Language), bagian kedua akan memberikan gaya pada komponen dalam CSS (Cascade Style Sheets).
File HTML Utama: Pertama kita ingin mendefinisikan file HTML dasar, itu membutuhkan tag doctype, html dan body …
<!DOCTYPE>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Head:
Bagi Anda yang belum pernah menggunakan HTML sebelumnya, tag head digunakan untuk memuat hal-hal seperti import, membutuhkan dan referensi eksternal, sedangkan tag bagian body digunakan untuk menampung tampilan dan informasi grafik seperti header, footer, gambar , dll.
Untuk halaman ini kita akan menggunakan file CSS di bagian selanjutnya jadi pertama-tama kita akan menyertakan file itu (itu belum dibuat tapi tetap tidak memberi kita kesalahan besar yang merusak situs web)
<head> <title></title> <link rel='stylesheet' href='style.css' type='text/css'> </head>
Kami mereferensikan file bernama ‘style.css’ dalam direktori yang sama dengan file tempat kode berada (index.html). Kami akan membuat ini di bagian selanjutnya. Selanjutnya kita akan memberi halaman kita judul, ini akan muncul di tab / bingkai jendela halaman web
<head> <link rel='stylesheet' href='style.css' type='text/css'> <title>Belajar Membuat Titile </title> </head>
Body:
Selanjutnya kita akan membuat bagian tubuh utama halaman. Kami akan menggunakan divs sebagai jenis tag pemegang konten untuk memisahkan bagian kami.
Div – atau Divisi – digunakan untuk menyimpan data dalam jumlah yang wajar, membaginya menjadi bagian yang mudah dibaca dan digunakan, serta dapat menyimpan tag HTML lain di dalamnya.
Hal lain yang perlu Anda ketahui adalah kelas dan ID. Kelas dan ID digunakan dalam CSS untuk memasangkan gaya yang diberikan dengan tempat gaya harus diterapkan dalam file HTML / Jade / PHP yang diberikan.
Setiap tag HTML dapat memiliki ID atau Kelas CSS. Kelas seharusnya digunakan untuk gaya yang digunakan lebih dari sekali dan untuk komponen penting di dalam file sementara ID seharusnya digunakan untuk item tunggal yang hanya ada sekali dalam file – seperti artikel dengan judul tertentu, id dapat menjadi judul karena tidak akan muncul lagi sedangkan kelasnya bisa menjadi ‘artikel’ karena artikel akan digunakan beberapa kali dan harus menggunakan gaya yang sama.
Jadi pertama-tama kita pindah ke bagian tubuh kita, antara tag tubuh pembuka dan penutup dan ketik dua div baru, satu untuk pembungkus dan yang lainnya untuk tajuk kita. Kami memberi mereka nama kelas yang sesuai
<body> <div class='wrapper'> <div class='header'> </div> </div> </body>
Selanjutnya, di bawah tajuk kami ingin membuat bagian tubuh, saya telah menamai kelas ‘konten’
<body> <div class='wrapper'> <div class='header'> </div> <div class='content'> </div> </div> </body>
Sidebar
Sekarang kita membuat bagian bilah samping, nama kelas diatur ke ‘samping’
<body> <div class='wrapper'> <div class='header'> </div> <div class='content'> </div> <div class='side'> </div> </div> </body>
akhirnya, Kita membuat bagian footer dengan nama kelas ‘footer’
<body> <div class='wrapper'> <div class='header'> </div> <div class='content'> </div> <div class='side'> </div> <div class='footer'> </div> </div> </body>
Kami membungkus semua bagian kami di div pembungkus karena kami akan menggunakan div pembungkus untuk menyetel batas di layar untuk komponen halaman web lainnya. Nama kelas dan ID dapat diatur sesuai keinginan Anda, pengembang, tetapi harus diingat atau mudah ditemukan / terkait saat menggunakannya nanti untuk memberi gaya pada elemen.
