Pembuatan Website Tugas PKWU Ana Septia
Produk Kreatif dan Kewirausahaan
Tidak dapat disangkal bahwa selain media sosial dan marketplace, website adalah faktor terpenting dalam keberadaan online, terutama untuk tujuan bisnis. Di era digital seperti sekarang, perusahaan tanpa website akan kesulitan untuk bersaing di industri mereka. Namun, tidak semua pemilik bisnis memiliki waktu untuk belajar membangun dan mengelola website mereka sendiri. Oleh karena itu, mengambil bantuan dari agensi pembuatan website dapat menjadi solusi yang tepat.Ini adalah ide bisnis yang memiliki peluang besar, terutama bagi orang-orang dengan latar belakang IT. Namun, kesempatan ini juga terbuka bagi mereka yang berasal dari latar belakang lain. Yang harus dilakukan hanyalah mempelajari dasar-dasar pemrograman website melalui buku atau tutorial online. Tidak hanya itu, pembuatan situs juga melibatkan pengetahuan tentang kinerja database dan pemahaman tentang berbagai alur kerja yang umum digunakan, sehingga kita dapat bekerja sama dengan pengembang web lainnya. Namun, pekerjaan tidak berhenti di situ. Jika ingin menjalankan agensi pembuatan website, tugas Kita tidak hanya menciptakan website untuk klien, tetapi juga mengelola kebutuhan domain dan layanan web hosting mereka.
Cara Membuat Website Dengan HTML dan CSS
1. Pilih Editor Kode HTML
Notepad++ – editor teks gratis yang ringan dengan fitur tambahan untuk pemrograman dan dukungan plugin.
Atom – editor HTML open-source dengan fitur live preview website serta kompatibilitas bahasa scripting dan markup yang sangat baik.
Visual Studio Code (VSCode) – tool populer untuk web development dengan library ekstensi lengkap untuk menambah fungsionalitasnya.
2. Rencanakan Tata Letak Website
Selanjutnya, Anda perlu membuat rencana tata letak (layout) yang matang dalam cara membuat website dengan HTML dan CSS. Sebab, hal ini akan memungkinkan Anda memvisualkan tampilan website dengan lebih baik.
Anda juga bisa menggunakannya sebagai checklist untuk melacak elemen-elemen apa saja yang harus disertakan dalam website Anda.
Selain itu, rencana tata letak membantu Anda menentukan kegunaan dan navigasi website, yang nantinya memengaruhi pengalaman pengguna. Beberapa elemen yang perlu dipertimbangkan dalam proses ini mencakup header, footer, dan navigasi website.
Anda bisa menggunakan pena dan kertas atau software desain web seperti Figma untuk merancang tata letak website. Konsep layout Anda tidak perlu terlalu mendetail, asalkan tetap mencerminkan tampilan dan nuansa website.
3. Mulai Tulis Kode HTML
Langkah-langkahnya mungkin bervariasi tergantung pada editor kode yang Anda gunakan, tapi proses dasarnya tetap sama.
Dalam tutorial ini, kami akan menunjukkan cara membuat website dengan HTML menggunakan VSCode:
1. Buat folder baru di komputer Anda. Folder ini akan menjadi direktori untuk semua file website.
2. Buka VSCode → File → Open Folder.
3. Temukan folder baru tersebut lalu klik Select Folder.
4. Pilih New File. Beri nama file tersebut dengan index.html dan tekan enter.
5. Klik Create File untuk mengonfirmasi.
Ketika diminta untuk membuka tab editor index.html, masukkan struktur dasar dokumen HTML berikut:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Untuk membantu Anda memahami kode tersebut, berikut penjelasan untuk setiap tag:
<!DOCTYPE html> – memberi tahu web browser bahwa website ini adalah halaman HTML.
</html> – tag pembuka dokumen HTML yang menandakan dimulainya kode.
<head> – tag yang berisi metadata website.
<title> – mendefinisikan teks yang ditampilkan pada tab browser saat mengunjungi halaman web.
<body> – berisi semua konten yang terlihat pada halaman web.
3. Buat Elemen Pada Dalam Letak
Tambahkan kode HTML ke dalam file index.html untuk membuat elemen-elemen dari rencana layout Anda. Tergantung pada desain website Anda, mungkin akan diperlukan beberapa elemen semantik HTML yang berbeda.
Elemen-elemen ini akan memisahkan website menjadi beberapa bagian dan menjadi tempat penampung untuk kontennya. Berikut adalah tag yang akan kita gunakan:
<header> – tempat penampung untuk konten pengantar atau navigasi.
<main> – menunjukkan konten utama suatu halaman web.
<div> – mendefinisikan suatu bagian dalam dokumen HTML.
<footer> – berisi konten yang ditampilkan di bagian bawah website Anda.
Letakkan elemen-elemen ini di antara tag <body></body> dalam kode file index.html. Pastikan untuk menutup setiap elemen dengan tag penutup, atau kode Anda tidak akan berfungsi.
Ini dia contoh kode lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Personal Blog</title>
</head>
<body>
<header>
</header>
<main>
<div class=”row">
<div class=”post-text-box”>
</div>
<div class=”profile”>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
5. Tambahkan konten HTML
Apabila layout sudah siap, mulailah mengisinya dengan konten website, seperti teks, gambar, link, atau video. Kalau konten Anda belum siap, gunakan sampel konten apa pun sebagai placeholder, kemudian Anda bisa menggantinya nanti.
Berikut adalah beberapa tag yang akan digunakan untuk menambahkan konten website:
<h1> dan <p> – berisi teks judul dan paragraf. Gunakan tag <br> untuk menambahkan spasi atau jeda per baris apabila teksnya terlalu panjang.
<nav> dan <a> – menentukan navigation bar dan elemen terkaitnya (anchor element). Gunakan atribut href untuk menentukan URL yang tertaut dengan anchor.
<img> – tempat penampung untuk elemen gambar. Tempat ini berisi atribut img src yang menentukan link atau nama file gambar.
Kodenya akan menjadi seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Personal Blog</title>
</head>
<body>
<header>
<h1>Your Personal Blog</h1>
<nav>
<a href=”domain.tld/home”>Home</a>
<a href=”domain.tld/blog”>Blog</a>
<a href=”domain.tld/about”>About</a>
</nav>
</header>
<main>
<div class=”row">
<div class=”post-text-box”>
<h1>Newest Post</h1>
<section>
<h1>First Post</h1>
<p>The first post’s content</p>
</section>
</div>
<div class=”profile”>
<h1>About Me</h1>
<img src=”profile-picture.png”>
<p>About the author</p>
</div>
</div>
</main>
<footer>
<a href=”twitter.com/author”>Twitter</a>
<a href=”facebook.com/author”>Facebook</a>
<a href=”instagram.com/author”>Instagram</a>
</footer>
</body>
</html>
Setelah menambahkan kode di atas, versi pertama website dengan HTML Anda pun sudah siap. Kira-kira tampilannya akan seperti ini:
6. Sertakan CSS Tata Letak
Karena HTML hanya memungkinkan Anda membuat struktur website dan menambahkan konten dasar, gunakan CSS untuk mengubah tata letaknya. CSS adalah bahasa yang menentukan gaya dokumen HTML.
Untuk melakukannya, buat file style.css dan hubungkan stylesheet tersebut ke dokumen HTML dengan menambahkan kode berikut di antara tag pembuka dan penutup <head> pada index.html:
<link rel="stylesheet" href="style.css">
Untuk membuat layout website dua kolom, kami akan menggunakan properti flex. Properti ini berfungsi untuk mengatur elemen HTML menggunakan tempat penampung yang fleksibel sehingga bisa menyesuaikan ukuran layar pengguna.
Berikut kodenya:
/*header style*/
header {
text-align: center;
padding: 20px;
}
/*navigation menu style*/
nav {
text-align: center;
word-spacing: 30px;
Padding: 10px;
}
/*creating the two-column layout*/
*{
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.post-text-box {
flex: 70%;
padding: 20px;
}
.profile {
flex: 70%;
padding: 20px;
}
/*profile image and heading style*/
.profile img {
width: 120px;
display: block;
margin-left: 0;
margin-right: 0;
}
.profile h1 {
text-align: center;
}
Setelah menambahkan snippet kode ke file CSS, berikut tampilan website yang sudah Anda buat dengan HTML dan CSS:
7. Sesuaikan Tampilan Website HTML
Selain mengubah tata letak, gunakan CSS untuk menyesuaikan aspek visual lain website Anda. Misalnya, Anda bisa mengganti jenis font dan gambar latar belakang website.
Untuk mengubah tampilan website, tambahkan properti CSS dalam elemen yang ingin Anda sesuaikan. Sebagai contoh, berikut adalah kode untuk mengganti warna latar belakang dan elemen teks pada menu navigasi:
/*navigation bar style*/
nav {
text-align: center;
word-spacing: 30px;
padding: 10px;
background-color: #f5f5dc
font-family: Helvetica;
}
/*navigation bar button style*/
nav a {
color: #000000;
text-decoration: none;
font-size: larger;
}
Setelah menambahkan styling CSS untuk setiap elemen, tampilan website Anda akan menjadi seperti berikut:
Kesimpulan
Berikut 7 langkah cara membuat website dengan HTML dan CSS:
1. Pilih editor HTML – pilih program untuk menulis dan mengedit kode website Anda, seperti VSCode.
2. Rencanakan layout website – buat mockup tata letak website menggunakan program seperti Adobe XD atau kertas dan pena.
3. Tulis kode HTML – buat file index.html dan tambahkan tag struktur dokumen HTML.
4. Buat elemen tata letak – atur website Anda menjadi beberapa bagian berdasarkan tata letaknya dengan menambahkan tag ke file HTML.
5. Tambahkan konten HTML – tambahkan heading, teks konten, dan gambar ke setiap bagian.
6. Sertakan CSS tata letak – buat file style.css dan tambahkan kode CSS untuk mengubah posisi kolom, penataan teks, dan padding elemen.
7. Sesuaikan website Anda – gunakan atribut gaya CSS untuk menyesuaikan warna latar belakang, ukuran font, jenis huruf, dan elemen visual lainnya.
Komentar
Posting Komentar