Pada materi sebelumnya kita sudah mempelajari element header dan element footer, sekarang kita masuk pada element utama dari situs yang kita buat yaitu konten atau element main. Element ini merepresentasikan konten utama dalam sebuah dokument tepatnya di dalam element <body>.
Sebelum memulai seperti biasa persiapkan dulu text editor bisa menggunakan Vs Code dan Web Browser bisa menggunakan Google Chrome.
Yang akan kita pelajari disini adalah:
Dalam memuat konten tentunya kita juga harus mengatur tata letak ruang dan struktur dari konten yang akan kita muat agar terlihat lebih menarik bagi pengunjung situs kita, sekarang mari kita ikuti langkah-langkah yang harus kita kerjakan agar bagian konten dari situs kita terlihat menarik dan sesuai dengan apa yang kita inginkan.
1. Layout Bagian Utama
Sekarang kita akan mengatur tata letak dari element konten, dimana layout utama terdiri dari tiga element yaitu copy-container, contents, dan contact-form.
Contoh:
<div class= "copy-container">
</div>
<div class= "contents">
</div>
<div class= "contact-form">
</div>
Tata letak pada bagian ini mungkin sedikit lebih rumit dari tata letak yang sudah kita pelajari pada header dan footer.
Selanjutnya kita akan mempelajari cara menerapkan CSS hanya pada sebagian teks, cara nya adalah dengan mengapit teks yang ingin kita gunakan CSS dengan tag <span>
Contoh:
<h1>
Selamat Datang di <span>andyusuf.site</span>
</h1>
kemudian di CSS kita bisa mengubah warna, ukuran, jenis font, dll pada teks andyusuf.site dengan property span.
selajutnya kita perlu mengetahui bahwa terdapat element block dan inline, dimana element block seperti <div> akan dimulai pada baris sedangkan element inline tidak dimulai di baris baru.
Sekarang mari kita terapkan di text editor:
Gunakan code di bawah:
Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">andyusuf.site</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>Selamat Datang di <span>andyusuf.site</span></h1>
<h2>Mari Kita Belajar Membuat Tampilan Situs Website</h2>
</div>
<div class="contents">
</div>
<div class="contact-form">
</div>
</div>
<div class="footer">
<div class="footer-logo">
andyusuf.site
</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>
Code CSS
body {
font-family: "Avenir next";
}
li {
list-style: none;
}
.header {
background-color: #7fff00;
color: rgb(39, 102, 97);
height: 80px;
}
.header-logo {
float: left;
font-size: 30px;
padding: 20px 40px;
}
.header-list li{
float: left;
padding: 30px 20px;
}
.main {
padding-top: 20px;
padding-bottom: 400px;
padding-right: 20px;
padding-left: 20px;
}
.copy-container h1{
font-size: 50px;
}
.copy-container h2{
font-size: 25px;
}
.copy-container span{
color: rgb(243, 9, 56);
}
.footer {
background-color: #043104;
color: rgb(186, 228, 167);
height: 120px;
padding: 12px 12px 12px 12px;
}
.footer-logo {
float: left;
font-size: 25px;
padding: 20px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 10px ;
}
Sekarang kita hasilnya di browser:
2. Struktur Konten
Selanjutnya kita akan mengatur konten, pada paragraf ini kita akan membuat judul dengan tiga item konten.
Pada konten kita akan buat teks dengan ukuran <h3> selanjutnya kita akan letakkan empat item di bawah judul, agar terlihat menarik keempat item tersebut kita buat dengan meletakkan gambar.
Untuk meletakkan gambar kita gunakan link dari gambar tersebut, kalian bisa mencari gambar di internet, setelah dapat gambar yang diinginkan kemudian klik kanan dan salin alamat gambar, tapi tentunya gambar yang kita pilih yang tidak mengandung copyright kalian bisa mencari gambar dari situs seperti pixabay atau situs-situs yang lainnya yang menyediakan gambar secara gratis tanpa copyright.
Disini saya sudah menyediakan gambar untuk kita letakkan di item, kita bisa menggunakan <img src="letakkan link gambar disini"> kemudian kita tambahkan paragraf di bawah gambar untuk menjelaskan gambar tersebut dengan tag <p>.
Sekarang lansung saja kita coba di text editor.
gunakan code di bawah:
Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">andyusuf.site</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>Selamat Datang di <span>andyusuf.site</span></h1>
<h2>Belajar HTML & CSS Dalam 4 Tahap</h2>
</div>
<div class="contents">
<h3>Materi</h3>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjxC-818YitLIjErLls8iL__BwaCP2dC39U6oumvXH0QYyyTkVGCiPC0LNMe_gG-bgrp6uwqDFeEzgO7eOaHQ5OFtmJlferOAzCmWUtADtlyyaUW9QdZj6gshcJ2dAj6nyz_bsgNdUaYZ/s16000/html+d.PNG">
<p>HTML & CSS TAHAP I</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvARgnYiL7AWadKJ3s5EAdfzTRMQCfaEWblsEOMpRtfF0NdAjJqqNpWbd2Ev2rTekcvDZyPWBcDio-j3TpDCvptahnsEUI-VkAxrkKqV8C53NJ_V6uPhkXHoQFv-OQFA8B0IivlNQUwebX/s16000/html+b.PNG">
<p>HTML & CSS TAHAP II</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzM1aUxMceNW1snApC0m6AyLU15fB_BAIE-AMADCGdbn9BMI8WC2LaE3sN98fN_nHw5ZTbWND6npulKABbbiEo0Ia4G4rMGndkAvJj2AhlfEzrBsCRIOaScaSL4Fn_up0Tgo1cIEvgsyp/s16000/html+c.PNG">
<p>HTML & CSS TAHAP III</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7kAdEDTi9bIrx8BlDIaLDnIQJ564xEH4KT1VmigPMJR7_TNtO3MuWUHrtjaXG0asUF3mqoBN0XyaHqOqW8ofvyc57PBFcsgOFzBw0CQ-m1WTbwCV9oFOA1kNSZUxJbLOb70n91IvGEPg/s16000/html+a.PNG">
<p>HTML & CSS TAHAP IV</p>
</div>
</div>
<div class="contact-form">
</div>
</div>
<div class="footer">
<div class="footer-logo">
andyusuf.site
</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>
Code CSS
body {
font-family: "Avenir next";
}
li {
list-style: none;
}
.header {
background-color: #7fff00;
color: rgb(39, 102, 97);
height: 80px;
}
.header-logo {
float: left;
font-size: 30px;
padding: 20px 40px;
}
.header-list li{
float: left;
padding: 30px 20px;
}
.main {
padding: 100px 80px;
}
.copy-container h1{
font-size: 100px;
}
.copy-container h2{
font-size: 50px;
}
.copy-container span{
color: rgb(243, 9, 56);
}
.footer {
background-color: #043104;
color: rgb(186, 228, 167);
height: 120px;
padding: 12px 12px 12px 12px;
}
.footer-logo {
float: left;
font-size: 25px;
padding: 20px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 10px ;
}
Kemudian kita lihat hasilnya:
Pada gambar di atas kita sudah meletakkan beberapa isi konten namun kita perlu membuat batasan agar letak ruang dari konten yang kita buat sesuai dengan posisi yang kita inginkan.
3. Batas
Kita perlu membuat batas agar posisi dari element dan judul mempunyai ruang. sekarang kita akan mempelajari cara membuat ruang tersebut dengan sytax dari batas yaitu property border, dengan property ini kita dapat menentukan lebar, style dan warna.
Hampir sama dengan padding kita bisa menerapkan batas ke semua sisi dengan menggunakan border, namun jika ingin menerapkan ke posisi tertentu bisa menggunakan border-bottom, border-top, border-left, dan border-right. Kemudian untuk style dan warna kita bisa lansung terapkan dengan satu property border saja.'
Mari kita terapkan di text editor gunakan code dibawah:
Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">andyusuf.site</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>Selamat Datang di <span>andyusuf.site</span></h1>
<h2>Belajar HTML & CSS Dalam 4 Tahap</h2>
</div>
<div class="contents">
<h3 class="section-title">Materi</h3>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjxC-818YitLIjErLls8iL__BwaCP2dC39U6oumvXH0QYyyTkVGCiPC0LNMe_gG-bgrp6uwqDFeEzgO7eOaHQ5OFtmJlferOAzCmWUtADtlyyaUW9QdZj6gshcJ2dAj6nyz_bsgNdUaYZ/s16000/html+d.PNG">
<p>HTML & CSS TAHAP I</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvARgnYiL7AWadKJ3s5EAdfzTRMQCfaEWblsEOMpRtfF0NdAjJqqNpWbd2Ev2rTekcvDZyPWBcDio-j3TpDCvptahnsEUI-VkAxrkKqV8C53NJ_V6uPhkXHoQFv-OQFA8B0IivlNQUwebX/s16000/html+b.PNG">
<p>HTML & CSS TAHAP II</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHgjpkmkHdHrJdRrkI24TXZR6ZUsuhDRCAXEwhyphenhyphenJ5-vCO7tNF6hhPo-ZyeZwj0RgTy3Nxon9sA6CqmYNFkMAhMUHciQbmWaaULt1Rw3lj2PNK_oeJU_wbSjjbzVxlakXd9O06M_-SmPHf/s16000/ok.PNG">
<p>HTML & CSS TAHAP III</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7kAdEDTi9bIrx8BlDIaLDnIQJ564xEH4KT1VmigPMJR7_TNtO3MuWUHrtjaXG0asUF3mqoBN0XyaHqOqW8ofvyc57PBFcsgOFzBw0CQ-m1WTbwCV9oFOA1kNSZUxJbLOb70n91IvGEPg/s16000/html+a.PNG">
<p>HTML & CSS TAHAP IV</p>
</div>
</div>
<div class="contact-form">
</div>
</div>
<div class="footer">
<div class="footer-logo">
andyusuf.site
</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>
Code CSS
body {
font-family: "Avenir next";
}
li {
list-style: none;
}
.header {
background-color: #7fff00;
color: rgb(39, 102, 97);
height: 80px;
}
.header-logo {
float: left;
font-size: 30px;
padding: 20px 40px;
}
.header-list li{
float: left;
padding: 30px 20px;
}
.main {
padding: 100px 80px;
}
.copy-container h1{
font-size: 100px;
}
.copy-container h2{
font-size: 50px;
}
.copy-container span{
color: rgb(243, 9, 56);
}
.contents{
height: 800px;
}
.section-title{
border-bottom: 2px solid red;
}
.contents-item{
float: left;
}
img{
width: 420px;
}
.footer {
background-color: #043104;
color: rgb(186, 228, 167);
height: 120px;
padding: 12px 12px 12px 12px;
}
.footer-logo {
float: left;
font-size: 25px;
padding: 20px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 10px ;
}
Kemudian kita lihat hasilnya:
Setelah kita mengatur letak konten di atas selanjutnya kita akan mengatur ruang dari sisi element dan ukuran dengan menggunakan padding dan margin.
4. Padding dan Margin
Terakhir kita akan mengatur padding dan margin, yaitu ruang di dalam dan di luar garis batas. padding biasa kita gunakan untuk menambahkan ruang didalam garis batas, untuk menambahkan ruang di luar garis batas kita bisa menggunakan property margin.
Pada gambar di atas kita bisa lihat yang mana letak posisi ruang margin, ruang border, dan ruang padding.
Sebelumnya kita sudah pernah belajar tentang shorthand padding, pada property margin kita juga bisa menerapkan hal yang sama.
Sekarang mari kita terapkan di text editor, kalian bisa mengatur berapa ukuran ruang yang sesuai dengan yang di inginkan sebagai contoh saya sudah mengatur ruang dari tampilan situs yang sudah kita buat di atas pada code di bawah.
Code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">andyusuf.site</div>
<div class="header-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
<div class="main">
<div class="copy-container">
<h1>Selamat Datang di <span>andyusuf.site</span></h1>
<h2>Belajar HTML & CSS Dalam 4 Tahap</h2>
</div>
<div class="contents">
<h3 class="section-title">Materi</h3>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjxC-818YitLIjErLls8iL__BwaCP2dC39U6oumvXH0QYyyTkVGCiPC0LNMe_gG-bgrp6uwqDFeEzgO7eOaHQ5OFtmJlferOAzCmWUtADtlyyaUW9QdZj6gshcJ2dAj6nyz_bsgNdUaYZ/s16000/html+d.PNG">
<p>HTML & CSS TAHAP I</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvARgnYiL7AWadKJ3s5EAdfzTRMQCfaEWblsEOMpRtfF0NdAjJqqNpWbd2Ev2rTekcvDZyPWBcDio-j3TpDCvptahnsEUI-VkAxrkKqV8C53NJ_V6uPhkXHoQFv-OQFA8B0IivlNQUwebX/s16000/html+b.PNG">
<p>HTML & CSS TAHAP II</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHgjpkmkHdHrJdRrkI24TXZR6ZUsuhDRCAXEwhyphenhyphenJ5-vCO7tNF6hhPo-ZyeZwj0RgTy3Nxon9sA6CqmYNFkMAhMUHciQbmWaaULt1Rw3lj2PNK_oeJU_wbSjjbzVxlakXd9O06M_-SmPHf/s16000/ok.PNG">
<p>HTML & CSS TAHAP III</p>
</div>
<div class="contents-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7kAdEDTi9bIrx8BlDIaLDnIQJ564xEH4KT1VmigPMJR7_TNtO3MuWUHrtjaXG0asUF3mqoBN0XyaHqOqW8ofvyc57PBFcsgOFzBw0CQ-m1WTbwCV9oFOA1kNSZUxJbLOb70n91IvGEPg/s16000/html+a.PNG">
<p>HTML & CSS TAHAP IV</p>
</div>
</div>
<div class="contact-form">
</div>
</div>
<div class="footer">
<div class="footer-logo">
andyusuf.site
</div>
<div class="footer-list">
<ul>
<li>Tentang</li>
<li>Materi</li>
<li>Hubungi Kami</li>
</ul>
</div>
</div>
</body>
</html>
Code CSS
body {
font-family: "Avenir next";
}
li {
list-style: none;
}
.header {
background-color: #7fff00;
color: rgb(39, 102, 97);
height: 80px;
}
.header-logo {
float: left;
font-size: 30px;
padding: 20px 40px;
}
.header-list li{
float: left;
padding: 30px 20px;
}
.main {
padding: 100px 80px;
}
.copy-container h1{
font-size: 100px;
}
.copy-container h2{
font-size: 50px;
}
.copy-container span{
color: rgb(243, 9, 56);
}
.contents{
height: 800px;
margin-top: 50px;
}
.section-title{
border-bottom: 2px solid red;
padding-bottom: 20px;
margin-bottom: 30px;
}
.contents-item{
float: left;
margin-right: 50px;
}
.contents-item p{
font-size: 30px;
margin-top: 25px;
}
img{
width: 420px;
}
.footer {
background-color: #043104;
color: rgb(186, 228, 167);
height: 120px;
padding: 12px 12px 12px 12px;
}
.footer-logo {
float: left;
font-size: 25px;
padding: 20px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 10px ;
}
Sekarang kita lihat hasil dari ruang yang sudah kita atur dengan padding dan margin.
Sekarang kita sudah mempelajari bagaimana cara mengisi konten sederhana, agar website kita terlihat lebih lengkap hal terakhir yang perlu kita buat adalah formulir di bagian bawah konten atau sebelum footer, untuk mempelajarinya silahkan masuk pada materi selanjutnya.
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