Dengan meningkatnya penggunaan internet. Dijaman sekarang situs web dianggap sebagai salah satu alat paling ampuh dalam mengumpulkan informasi.
Adapun untuk merancang website dapat dilakukan dengan menggunakan berbagai metode. Meskipun mungkin tampak rumit pada awalnya, sangat mungkin untuk membuat situs web Anda sendiri seperti yang dilakukan oleh webmaster di perusahaan desain web.
Pertama dan terpenting, penting untuk dipahami bahwa situs web adalah kumpulan dari banyak halaman web berbeda yang terdiri dari informasi yang berbeda. Sebagai ilustrasi, website adalah buku dengan halaman web sebagai bab-babnya. Oleh karena itu, merancang seluruh situs web akan membutuhkan satu halaman web yang dilakukan pada satu waktu.
Membuat Struktur Halaman Website dengan HTML dan CSS
Dibawah ini kami membuat materi tentang Belajar awal membuat Struktur Halaman Website.
Simak penjelasannya:
Menyusun Tata Letak
Sebelum memulai dengan baris kode apa pun, hal pertama yang harus Anda lakukan adalah membuat ide tentang apa yang akan menjadi situs web Anda, dan bagaimana tampilannya, kemudian menuliskannya dalam selembar kertas atau mengetiknya di komputer Anda.
Tidak harus terlihat mewah atau canggih, karena intinya adalah memiliki desain yang nantinya akan direalisasikan.
Membuat Struktur Dokumen HTML dan CSS
Setelah memiliki gagasan tentang apa situs web itu dan seperti apa bentuknya, hal pertama yang harus Anda persiapkan adalah file HTML dan CSS. File-file ini dapat dibuat dengan membuka editor teks biasa yang Anda pilih, misalnya, "Notepad" untuk Windows, TextWrangler untuk Mac, atau Sublime Text. Dalam poin khusus ini, Codecademy telah menunjukkan beberapa informasi berharga.
Simpan dokumen teks biasa sebagai "indeks.html". Kemudian, buat yang lain dan simpan sebagai "style.css".
Menyiapkan Kode HTML Dasar
Pertama, mari kita atur kode yang sangat mendasar yang biasanya digunakan untuk membuat situs web. Kode-kode ini biasanya disebut boilerplate dan umumnya digunakan di hampir semua halaman web di luar sana.
Buka file HTML Anda menggunakan editor teks dan coba tempel kode-kode ini:
<html>
<head>
<title>WEBCODE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Lihat! Ini berhasil! :)</h1>
</body>
</html>
Setelah menyimpan dokumen teks, cobalah dan buka di browser web untuk melihat apakah itu berfungsi.
Menambahkan Elemen
Jika Anda selesai dengan boilerplate, sekarang mari kita tambahkan beberapa elemen di halaman web seperti yang telah Anda rencanakan dalam draf Anda. Ini dilakukan dengan menambahkan beberapa elemen semantik seperti <kepal>, <main>, <bagian>, dan <footer>.
Coba buka file HTML Anda dan ganti kode Anda sebelumnya dengan yang ini:
<html>
<head>
<title>WEBCODE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<main>
<section id="hero">
</section>
<section id="about">
</section>
<section id="contact">
</section>
</main>
<footer>
</footer>
</body>
</html>
Karena kami hanya membuat bagian halaman, Anda tidak akan melihat apa pun ketika Anda membuka file di browser.
Menulis Konten HTML
Sama seperti pepatah "apa itu lagu tanpa lirik", hal yang sama masuk ke situs web: semuanya biasa saja tanpa konten.
Jika Anda siap dengan konten situs web Anda, sekarang saatnya untuk menulisnya di halaman Anda. Tetapi jika tidak, Anda dapat menulis beberapa konten simulasi terlebih dahulu, dan Anda dapat mengubahnya nanti.
Buka file HTML Anda dan ganti kode Anda dengan HTML di bawah ini, di mana beberapa konten ditambahkan:
<html>
<head>
<title>WEBCODE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<head>
<img src="https://scontent.fcgk6-1.fna.fbcdn.net/v/t1.0-9/60687273_10219095505969338_402358832711335936_n.jpg?_nc_cat=101&_nc_ht=scontent.fcgk6-1.fna&oh=bc500e0d8e0e21b948dcea0ae57f04c3&oe=5D5F1A09" class="profile-img">
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#about">Tentang Kami</a></li>
<li><a href="#contact">Hubungi Kami</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<div class="section-inner">
<img src="https://scontent.fcgk6-1.fna.fbcdn.net/v/t1.0-9/60687273_10219095505969338_402358832711335936_n.jpg?_nc_cat=101&_nc_ht=scontent.fcgk6-1.fna&oh=bc500e0d8e0e21b948dcea0ae57f04c3&oe=5D5F1A09" class="profile-img">
<h1>WEBCODE</h1>
</div>
</section>
<section id="tentang">
<div class="section-inner">
<h2>Tentang Kami</h2>
<p>Kami memberikan desain web terbaik untuk Anda sejak 2008. </hal>
<h3>Awards dan Prestasis</h3>
<ul>
<li>Perusahaan Web Terbaik, 2009</li>
<li>Perusahaan Web Paling Populer, 2012</li>
<li>Perutain Web Terbaik, 2018</li>
</ul>
</div>
</section>
<section id="kontak">
<div class="section-inner">
<h2>Hubungi Kami</h2>
<p>Anda dapat menemukan kami di:</p>
<ul>
<li><a href="https://twitter.com/webcode">Twitter</a></li>
<li><a href="https://www.facebook.com/user/webcode">Facebook</a></li>
<li><a href="https://www.instagram.com/webcodedotcom/">Instagram</a></li>
</ul>
<p>Atau, kirimkan email kepada kami di <a href="mailto:webcode@gmail.com"></a>.</p>
</div>
</section>
</main>
<footer>
© Hak Cipta WEBCODE, 2019
</footer>
</body>
</html>
Teks berwarna biru di atas adalah konten yang bukan kode dan dapat diubah jika Anda memiliki sesuatu yang berbeda dalam pikiran Anda.
Simpan dokumen, dan coba buka di browser Anda. Jika Anda mendapatkan semuanya dengan benar, Anda akan memiliki konten berikut yang ditambahkan ke situs web Anda:
Mengubah URL Gambar
Teks berwarna merah yang diperlihatkan dalam kode HTML langkah #5 adalah tautan dari gambar yang ingin Anda sisipkan di halaman web.
Untuk mendapatkan URL gambar, Anda harus mengunggah gambar Anda ke situs hosting gambar seperti Flickr, Google Photo, Facebook, atau situs hosting gambar apa pun yang ada dalam pikiran Anda.
Setelah selesai mengunggah, klik pada gambar untuk membukanya, lalu klik kanan padanya, dan pilih "Buka Gambar di Tab Baru". Salin URL yang ditampilkan di bilah alamat, dan tempelkan untuk mengganti teks berwarna merah.
Menambahkan Tata Letak Dasar CSS
Setelah selesai dengan konten HTML, halaman web Anda siap dibaca. Namun, orang juga akan berpikir bahwa penampilan seperti itu mungkin tampak sedikit polos. Kami tidak ingin menerbitkan situs web yang tidak akan menarik pengunjung sekarang, apakah menurut kami artikel ini mungkin berguna bagi Anda untuk mempelajari lebih lanjut tentang cara meningkatkan lalu lintas ke situs web Anda.
Di sinilah CSS masuk!
CSS adalah bahasa pengkodean yang bertanggung jawab untuk menata halaman web kami. Dengan menggunakan CSS, kita dapat menambahkan desain dan tata letak ke halaman web dan berbagi gaya ke semua elemen dan halaman.
Pertama, kita akan mengerjakan tata letak halaman web agar terlihat seperti yang telah kita draf. Oleh karena itu, untuk langkah ini, kami akan bekerja lebih banyak dengan properti seperti lebar, tinggi, margin, padding, posisi, dan tampilan.
Buka dokumen teks "style.css" Anda, dan tambahkan kode CSS ini di bawah ini:
margin: 0;
margin-top: 50px;
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line height: 50px;
beckground: #eee;
}
header * {
display: inline;
height: 50px;
}
headerul {
padding: 0;
}
header li {
margin-left: 20px;
}
section {
height: 100vh;
border: 1px hitam pekat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#hero .profile-img {
widht: 300px;
}
footer {
text-align: center;
padding: 50px;
}
Kode-kode di atas mengatur tata letak untuk memastikan bahwa bagian diatur ke ketinggian viewport 100%, yang pada dasarnya berarti mengisi ukuran layar Anda, untuk memperbaiki posisi header dan mengatur bilah navigasi di header, serta menggunakan flexbox untuk memusatkan konten di bagian tersebut.
kode diatas akan menampilkan gambar berikut:
Menambahkan gaya CSS
Sekarang semua konten telah ditempatkan dengan benar, kita dapat menambahkan beberapa format untuk menata halaman web.
Buka file CSS Anda dan revisi sesuai dengan kode CSS di bawah ini:
margin: 0;
margin-top: 50px;
font-family: sans-serif; /* Add this line */
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: #eee;
}
header * {
display: inline;
height: 50px;
}
headerul {
padding: 0;
}
header li {
margin-left: 20px;
}
section {
height: 100vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#hero .profile-img {
width: 300px;
border-radius: 50%; /* Add this line */
}
footer {
text-align: center;
padding: 50px;
}
/* Add everything below here */
#hero h1 {
font-size: 3em;
}
section h2 {
font-size: 2.5em;
}
section h3 {
font-size: 1.5em;
}
header a {
text-decoration: none;
color: black;
}
Sekarang buka halaman web Anda lagi dan Anda akan melihat bahwa jenis dan ukuran font telah berubah, dan gaya default dari tautan header juga telah berubah.
Mari kita tingkatkan tampilan halaman web lebih banyak lagi!
Warna dan Latar Belakang
Sekarang kita akan menambahkan beberapa sentuhan akhir warna dan latar belakang ke halaman web kita untuk membuatnya lebih menarik. Artikel tentang Jimdo ini berisi informasi yang berguna tentang memilih latar belakang terbaik untuk situs web Anda.
Sebelum mengetik lebih banyak kode, Anda mungkin ingin mengunggah gambar pilihan Anda ke situs hosting gambar seperti yang disebutkan pada langkah # 6 dan menyalin URL gambar.
Revisi dokumen CSS sesuai dengan kode CSS berikut:
margin: 0;
margin-top: 50px;
font-family: sans-serif;
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: #eee;
}
header * {
display: inline;
height: 50px;
}
headerul {
padding: 0;
}
header li {
margin-left: 20px;
}
height: 100vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-size: cover; /* Add this line */
background-position: center center; /* Add this line */
background-repeat: no-repeat; /* Add this line */
background-attachment: fixed; /* Add this line */
}
#hero .profile-img {
width: 300px;
border-radius: 50%;
}
text-align: center;
padding: 50px;
}
font-size: 3em;
}
font-size: 2.5em;
}
font-size: 1.5em;
}
text-decoration: none;
color: black;
}
}
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url(‘https://scontent.fcgk18-2.fna.fbcdn.net/v/t1.0-9/60232304_10219096916964612_1350888178050924544_n.jpg?_nc_cat=100&_nc_ht=scontent.fcgk18-2.fna&oh=72784f19fd9cf8cf9ca99d7dfc53735b&oe=5D54C31C‘);
}
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url(‘https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/60586842_10219096915844584_3123709442135162880_n.jpg?_nc_cat=107&_nc_ht=scontent-sin6-1.xx&oh=870f6e76c4eae89bba33c7ab76d37127&oe=5D554E78‘);
}
Tempelkan URL gambar Anda ke dalam teks berwarna hijau di atas untuk mengubah latar belakang menjadi gambar yang Anda inginkan.
Dengan memasukkan kode-kode di atas, kita telah memodifikasi gambar latar belakang dan menambahkan overlay semi-transparan di atas dengan menggunakan kode linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), sebelum URL gambar ('image.jpg')) untuk membuat teks lebih mudah dibaca.
Jika semuanya dimasukkan dengan benar, halaman web kami sudah selesai dan bagus untuk pergi:
Setelah Anda selesai memeriksa ulang, Anda dapat mempublikasikan halaman web Anda dan memamerkannya.
Selamat anda telah berhasil, dengan tutorial diatas anda bisa peraktekan sendiri dan semoga berhasil.
Sumber: (https://www.webcreate.me/how-to-create-website-using-html-and-css-code/)
Kesimpulan
Bahasa komputer itu kompleks. Ada banyak kode untuk dimasukkan dan ada kasus di mana kode salah ketik dan konten tidak dimasukkan dengan benar. Itu selalu disarankan agar Anda memeriksa dan memeriksa ulang sebelum menerbitkan situs web Anda.
Seperti yang kita semua tahu, setelah konten diposting di internet, itu tetap di luar sana.
Secara singkat, mendesain situs web Anda sendiri tidak terlalu rumit dan menakutkan selama kita mau belajar. Harap dicatat bahwa artikel di atas lebih menekankan pada panduan langkah demi langkah untuk membuat halaman web menggunakan kode HTML dan CSS sederhana daripada berfokus pada teknis kode.