Belajar Membuat Web menggunakan HTML dan CSS
Struktur HTML
Di dokumen HTML, ada beberapa aturan yang harus Anda ikuti. Misalnya, element <head> dan <body> wajib berada didalam apitan element <html> . Element <head> berisi informasi dokumen sementara element <body> berisi konten yang terlihat di browser.
Menentukan Versi HTML
Disetiap dokumen HTML, Anda harus memulai dengan deklarasi DOCTYPE. Ini akan memastikan versi HTML situs web Anda adalah yang terbaru. Kita akan menggunakan <!DOCTYPE html>, untuk menentukan versi HTML secara otomatis. Jangan terlalu khawatir tentang versi ini, cukup ingat bahwa ini adalah hal yang harus selalu Anda lakukan.
<head> Tag
Element <head> berisi settingan dokumen HTML yang tidak terlihat dibrowser. Ada tiga element yang harus Anda letakkan di <head>.
Contoh :
Pada halaman index.html
<!-- Tambahkan deklarasi DOCTYPE -->
<!DOCTYPE html>
<!-- Tambahkan tag <html> -->
<html>
<head>
</head>
<body>
<h1>Progate</h1>
<p>Belajar Coding.</p>
</body>
</html>
Karakter Encoding
Dengan menentukan pengcodean karakter di atribut charset seperti <meta charset="utf-8">, Anda dapat mencegah situs web menjadi kacau. UTF-8 adalah karakter encoding yang direkomendasikan untuk HTML5.
Judul untuk Situs Web Anda
Element <title> menentukan judul dokumen, judul yang ditentukan di element <title> hanya akan muncul di tab browser.
Menautkan file CSS
Anda harus membuat tautan antara HTML dan file CSS dengan menentukan <link rel="stylesheet"> di dokumen HTML Anda. Anda dapat menentukan nama file CSS menggunakan atribut href.
Contoh :
Pada halaman index.html
<!DOCTYPE html>
<html>
<head>
<!-- Salin & tempelkan tags dibawah -->
<!-- Tetapkan karakter encoding ke "utf-8" -->
<meta charset="utf-8">
<!-- Tetapkan judul ke "Progate" -->
<title>ITBU</title>
<!-- Tautkan "stylesheet.css" ke index.html -->
<link rel="stylesheet" href="stylesheet.css">
s <body>
</body>
</html>
Pada halaman stylesheet.css
body {
font-family: "Avenir Next";
}
Layout (tata letak)
Layout adalah salah satu bagian paling penting dalam membuat situs web. Layout situs web yang akan Anda buat umumnya terdiri dari tiga bagian seperti header, main dan footer
Tag <div>
Kita akan membuat tata letak dengan element <div> (※ "div" mewakili "divisi"). Tag <div> digunakan untuk mengelompokkan element.
Seperti contoh dibawah, layout dibagi menjadi tiga element <div> dengan nama class header, main, dan footer.
Pelengkap Tag Otomatis
Mulai dari sini, Anda akan menulis banyak tag. Untuk mencegah kesalahan ketik, mari kita gunakan fungsi autocomplete di editor. Seperti yang ditampilkan di bawah, Anda dapat memasukkan nama tag dan menekan tombol "tab" untuk menyelesaikan tag (※ Tergantung pada tag, beberapa atribut yang tidak dinginkan dapat tersisipkan, jadi lakukan ini dengan hati-hati).
Header
Setelah tata letak dasar selesai dikerjakan, sekarang mari kita mengerjakan beberapa detailnya. Pertama, kita akan membuat header
Struktur Header
Mari kita periksa struktur header.
Ada logo "ITBU" dan daftar. Mari kita kelompokkan kedua bagian ini menggunakan element <div> seperti yang ditampilkan di bawah.
Menghapus Bullet dari Item Daftar
Dengan menerapkan property list-style di element <li>, Anda dapat menghilangkan bullet. Karena kita tidak menginginkan bullet didaftar kita, mari kita tetapkan list-style ke none.
Menyejajarkan Header Secara Horizontal
Umumnya, element yang ditulis di HTML disejajarkan secara vertikal. Untuk menyejajarkannya secara horizontal, kita membutuhkan CSS.Di sini, kita akan mempelajari cara membuat tata letak horizontal
Property Float
Dengan menggunakan property float, Anda dapat menyejajarkan element secara horizontal. Seperti yang ditampilkan pada contoh, menentukan float: left; akan mengatur element secara bersisian dari kiri ke kanan.
Menyejajarkan Item Daftar Secara Bersisian
Mari kita mulai mengatur item daftar diheader secara bersisian.
Dengan menerapkan float: left; ke setiap element <li> , Anda dapat menyejajarkannya secara horizontal dari kiri ke kanan.
Menyejajarkan Logo dan Daftar
Kemudian, mari kita letakkan logo header dan keseluruhan daftar secara bersisian. Dengan menerapkan float: left; ke header-logo seperti yang ditampilkan dibawah, Anda dapat menyejajarkan logo dan keseluruhan daftar secara horizontal .
Menyesuaikan Ruang
Mari kita sesuaikan ruang antara element di header sehingga logo dan daftar di header ditempatkan diposisi yang sesuai seperti yang ditampilkan dibawah.
Menambahkan Ruang ke Element
Jika Anda ingin menambahkan ruang ke element, Anda dapat menggunakan property padding. Dengan menerapkan padding: 〇〇px;, ruang yang ditentukan akan ditambahkan ke semua sisi element.
Menerapkan Padding ke Satu Sisi Saja
Anda mungkin ingin menambahkan ruang hanya ke satu sisi element. Dalam kasus ini, Anda dapat menggunakan property seperti padding-top, padding-right, padding-bottom dan padding-left.
Misalnya, untuk menambahkan ruang dibagian atas, tetapkan padding-top: 〇〇px;.
Shorthand Padding
Anda dapat menggunakan shorthand saat menerapkan padding. Anda dapat menerapkan padding ke beberapa sisi menggunakan satu property saja. Saat empat nilai ditentukan, padding diterapkan searah jarum jam dari bagian atas. Saat dua nilai ditentukan, padding diterapkan dalam urutan "atas/bawah" dan "kanan/kiri".
Footer
Sekarang, kita akan mengerjakan tata letak footer. Sama seperti header, mari kita periksa desain dan strukturnya. Disisi kiri footer terdapat logo, dan di sisi kanan terdapat daftar.
Struktur Footer
Saat membuat header, kita menerapkan float dan padding ke setiap element <li>. Karena itu, property CSS juga diterapkan ke element <li> di footer. Menurut Anda, bagaimana kita dapat menerapkan property CSS ini hanya ke tag <li> di header?
Selector Bersarang
Dengan menambahkan li setelah header-list (dengan spasi di antara keduanya), Anda dapat menerapkan CSS hanya ke element <li> di header-list. Ini memungkinkan Anda untuk menerapkan CSS yang berbeda ke element <li> di header dan element <li> di footer.
Mengatur Ulang Logo dan Daftar
Mari kita lihat gambar dibawah. Logo dan daftar menu footer masing-masing berada diujung kiri dan kanan. Kita telah mempelajari cara menyejajarkan element dari kiri menggunakan float: left, namun bagaimana jika kita mau menyejajarkannya dari kanan?
float: right
Dengan float: right, Anda dapat menyejajarkan element secara horizontal dari kiri ke kanan
Memosisikan Element ke Kiri dan Kanan
Dengan menggabungkan float: left; dan float: right;, Anda dapat meletakkan logo dan daftar menu footer di baris dari kiri kekanan. Mari kita terapkan float: left; ke selector footer-logo sehingga posisinya akan ke tepi kiri, dan menerapkan float: right; ke selector footer-list untuk memindahkannya ke tepi kanan
Layout Bagian Utama
Mari kita beralih ke layout bagian utama! Seperti yang ditampilkan dibawah, layout utama terdiri dari tiga element, yaitu copy-container, contents, dan contact-form. Ini mungkin akan sedikit lebih rumit daripada layout lain yang telah kita buat. Tapi jangan khawatir! Kami akan menjelaskan setiap langkahnya.
Menerapkan CSS ke Sebagian Teks
Pada gambar di bawah, perhatikan bahwa titik (.) di element <h1> "HELLO WORLD." berwarna merah. Kami akan menunjukkan cara menerapkannya.
Tag <span>
Anda dapat menerapkan CSS ke sebagian teks dengan mengapitnya di tag <span>. Gambar dibawah mengilustrasikan hal ini dengan menerapkan color: red; ke selector span. Tidak ada baris baru yang dimasukkan sebelum atau setelah element <span>.
Element block dan Inline
Di HTML, beberapa element akan dimulai dibaris baru dan beberapa tidak. Element block seperti div akan di mulai dibaris baru, dan diperluas ke keseluruhan lebar element induknya. Sedangkan Element inline seperti span hanya mengambil lebar secukupnya saja.
Konten
Bagian berikutnya adalah konten.
Pertama, mari kita buat bagian layout konten. Kita memerlukan judul dan 4 contents-item.
Contoh Script Full :
Pada halaman index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">Progate</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Pelajaran</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>Ayo belajar coding</h2>
</div>
<div class="contents">
<!-- Tambahkan tag <h3> -->
<h3>Pelajaran</h3>
<!-- Tambahkan tag <div> dengan class "contents-item" -->
<div class="contents-item">
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
<p>HTML & CSS</p>
</div>
<!-- Tambahkan tag <div> dengan class "contents-item" -->
<div class="contents-item">
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
<p>PHP</p>
</div>
<!-- Tambahkan tag <div> dengan class "contents-item" -->
<div class="contents-item">
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
<p>Ruby</p>
</div>
<!-- Tambahkan tag <div> dengan class "contents-item" -->
<div class="contents-item">
<img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
<p>Swift</p>
</div>
</div>
<div class="contact-form">
</div>
</div>
<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Karier</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>
Pada halaman css stylesheet :
body {
font-family: "Avenir Next";
}
li {
list-style: none;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
padding: 100px 80px;
}
.copy-container h1 {
font-size: 140px;
}
.copy-container h2 {
font-size: 60px;
}
.copy-container span {
color: #ff4a4a;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}
.footer-logo {
float: left;
font-size: 32px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 20px;
}
Comments
Post a Comment