Html dan CSS adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah website. Memahami keduanya adalah hal penting, jika Anda ingin belajar cara membuat sebuah website. Namun, bagaimana cara membuat website dengan HTML dan CSS ini?
Sekilas Tentang HTML dan CSS
HTML (Hyper Text Markup Language) adalah bahasa markup yang dapat digunakan untuk membangun atau merancang sebuah halaman website.
Sedangkan, CSS (Cascading Style Sheets) adalah bahasa style sheet yang dapat menyederhanakan format dan elemen yang ditulis dalam bahasa markup tertentu, seperti HTML. Intinya, CSS ini adalah sarana untuk menyunting format website yang dibuat dengan HTML.
Ringkasnya, HTML adalah bahasa pemrograman yang digunakan untuk membuat struktur website dan CSS berfungsi sebagai media editing visualnya.
Cara Membuat Website dengan HTML dan CSS
Sebelum Anda belajar tentang membuat website dengan HTML dan CSS, Anda harus terlebih dahulu menyediakan 2 tool, yaitu text editor dan browser.
Di sini, text editor nantinya akan menjadi sarana yang Anda gunakan untuk menulis kode HTML website. Sedangkan, web browser akan menjadi media untuk mengakses tampilan website yang Anda bangun.
Setelah Anda memiliki kedua tool tersebut, Anda dapat lanjut mengikuti panduan pembuatan untuk website bertipe portofolio berikut ini:
1. Membuat Struktur Project Web
Langkah awal cara membuat web dengan HTML dan CSS adalah dengan membuat folder untuk menyimpan proyek website Anda. Dalam hal ini, Anda dapat menggunakan VSCode untuk membuat folder ini. Sebagai contoh, kami memberikan nama folder tersebut “web portofolio”.
Selanjutnya, Anda dapat melanjutkannya dengan membuat folder baru bernama “images”. Folder ini nantinya akan menjadi tempat untuk Anda menyimpan gambar atau assets yang akan digunakan untuk website Anda.
Setelah membuat dua folder sebelumnya, Anda dapat membuat 2 file baru dengan nama “index.html” dan “style.css”. File index.html ini akan menjadi inti dari halaman website yang Anda buat. Dalam hal ini, Anda dapat menambahkan konten website Anda pada file ini.
Sedangkan file style.css adalah file pelengkap HTML yang nantinya akan dapat Anda gunakan untuk menyesuaikan tampilan website Anda.
2. Menambahkan Kode pada File index.html
File index.html adalah file yang memuat kode utama untuk membangun struktur website. File ini dapat dikatakan adalah pondasi dari website yang harus Anda buat terlebih dahulu, sebelum dapat lanjut ke tahap selanjutnya.
Pada dasarnya, setiap struktur dari halaman file index.html ini tersusun atas 4 bagian utama, yaitu:
- Tag DTD/Doctype: DTD (Document Type Declaration) adalah tag yang harus Anda tulis di awal dokumen. Jadi, tag ini memiliki fungsi untuk mendeklarasikan tipe dari dokumen dan versi HTML yang digunakan untuk diproses pada browser.
- HTML tag: Tag yang menjadi wadah dari semua elemen HTML.
- Tag Head: Tag yang berisi informasi dari website, yang tidak tampil pada halaman browser.
- Tag Body: Tag yang memuat semua elemen yang tampil di halaman browser. Di bagian tag ini juga, semua isi konten website ditulis.
Jika Anda telah mendapatkan gambaran index.html, maka Anda telah dapat mulai cara membuat web HTML dengan menambahkan kode berikut ini pada file index.html Anda:
a. Mendeklarasikan Informasi di Tag Head
Pertama, pada bagian tag head, Anda perlu mendeklarasikan informasi tentang meta tag charset, title website, dan path dari external sources (misal CSS dan Javascript) yang Anda gunakan pada website.
Yang juga perlu Anda perhatikan, bagian head ini adalah lokasi dimana Anda menyimpan file CSS. Jadi, pastikan file CSS terletak pada folder yang sama dengan file index.html Anda. Sebagai contoh, Anda dapat memperhatikan contoh ini file index.html di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Personal Website</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<script src=”https://kit.fontawesome.com/c8e4d183c2.js” crossorigin=”anonymous”></script>
</head>
b. Mendeklarasikan Informasi di Tag Body
Cara membuat website dengan HTML selanjutnya, Anda dapat masuk ke bagian tag body. Pada bagian pertama dari body website ini adalah tampilan awal Beranda, yang terdiri atas navigation bar, text container, dan juga gambar.
Navigation bar di sini adalah navigasi utama website yang berupa menu dan biasanya terletak di bagian header website. Sedangkan tag class text container adalah tag dimana Anda dapat menambahkan tulisan untuk tampilan awal website ketika nanti diakses.
<body>
<section>
<!— navigation —>
<nav>
<!— logo —>
<a href=”#” class=”logo”>Portfolio Tutorial</a>
<!— menu —>
<ul>
<li><a href=”#” class=”active”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Testimonials</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
<!— text —>
<div class=”text-container”>
<p>Hello,</p>
<p>I’M ENDAR</p>
<p>SEO Technical Writer & Developer</p>
<p>An aquarius girl who loves music, watching movies and
<br>of course writing.</p>
<button class=”hire-btn”>Hire me</button>
<button class=”down-cv”>Download CV</button>
</div>
<!– model –>
<img alt=”model” class=”model” src=”images/ilustrasi.jpg”>
</section>
c. Menambahkan Layanan (untuk Website Portofolio)
Ketiga, karena website yang kami contohkan di artikel ini adalah jenis portfolio, maka Anda dapat menambahkan bagian layanan pada website. Dalam hal ini, Anda dapat menulis bagian layanan ini di tag <div class=”box-container”>. Sebagai gambaran, Anda dapat mempelajari script di bawah ini:
<div class=”box-container”>.
<!– services/layanan –>
<div class=”services”>
<!–text–>
<div class=”services-text “>
<p>Services</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stAndard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class=”box-container”>
<!— 1 —>
<div class=”box-1″>
<span>1</span>
<p class=”heading”>Technical Writing</p>
<p class=”details”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stAndard dummy text ever since the 1500s.</p>
<button>Read More</button>
</div>
<!— 2 —>
<div class=”box-2″>
<span>2</span>
<p class=”heading”>Web Design</p>
<p class=”details”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stAndard dummy text ever since the 1500s.</p>
<button>Read More</button>
</div>
<!— 3 —>
<div class=”box-3″>
<span>3</span>
<p class=”heading”>Web Development</p>
<p class=”details”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stAndard dummy text ever since the 1500s.</p>
<button>Read More</button>
</div>
</div>
</div>
d. Menambahkan Testimoni
Masih membahas mengenai cara membuat website dengan HTML, pada bagian ini, kami juga akan lanjut menjelaskan mengenai cara menambahkan testimoni pada website. Jadi di bagian ini, Anda dapat mengisinya dengan rating atau review dari klien yang proyeknya pernah Anda tangani.
Jadi, jika Anda ingin menambahkan rating ke tampilan testimoni Anda, maka Anda sebaiknya tidak melupakan link script Font Awesome, agar icon bintang pada review Anda muncul. Berikut contohnya:
<!–testimonials–>
<div class=”testimoni”>
<!–text–>
<div class=”testimoni-text “>
<p>What Our Client Says..</p>
</div>
<div class=”testimoni-col”>
<div class=”testimoni-1″>
<img src=”images/ava1.png”>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stAndard dummy text ever since the 1500s.</p>
<h3>Client Pertama</h3>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
<i class=”far fa-star”></i>
</div>
</div>
<div class=”testimoni-2″>
<img src=”images/ava2.png”>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s stAndard dummy text ever since the 1500s.</p>
<h3>Client Kedua</h3>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
<i class=”fas fa-star”></i>
</div>
</div>
</div>
</div>
e. Menambahkan Footer
Pada bagian penutup dari tampilan website HTML Anda, Anda juga dapat menambahkan informasi media sosial Anda. Kode HTML untuk memunculkan logo media sosial dapat Anda cari langsung di Font Awesome. Sebagai contohnya, yakni:
<!– footer –>
<footer>
<p>Interested In Using Our Services?</p>
<!–paragraph–>
<p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p>
<!–social–>
<div class=”social-icons”>
<a href=”#”><i class=”fab fa-whatsapp”></i></a>
<a href=”#”><i class=”fab fa-facebook-f”></i></a>
<a href=”#”><i class=”fab fa-twitter”></i></a>
<a href=”#”><i class=”fab fa-instagram”></i></a>
<a href=”#”><i class=”fab fa-youtube”></i></a>
</div>
<!–copyright–>
<p class=”copyright”>Copyright by Niagahoster Tutorial</p>
</footer>
<!–social-attach-bar–>
<div class=”social”>
<a href=”#”><i class=”fab fa-whatsapp”></i></a>
<a href=”#”><i class=”fab fa-facebook-f”></i></a>
<a href=”#”><i class=”fab fa-twitter”></i></a>
<a href=”#”><i class=”fab fa-instagram”></i></a>
<a href=”#”><i class=”fab fa-youtube”></i></a>
</div>
</body>
</html>
3. Menambahkan Kode di File Style.css
Setelah selesai dengan bagian index.html, Anda dapat beralih ke cara membuat website dengan HTML dan CSS selanjutnya, yaitu menyesuaikan tampilan website dengan CSS. Karena, tampilan website yang Anda buat pada HTML sebelumnya masih kaku dan CSS di sini berfungsi untuk memoles tampilan website menjadi lebih menarik.
Struktur penulisan kode CSS sendiri terdiri atas 3 bagian, yaitu:
- Selektor: Kata kunci untuk menghubungkan style di file CSS dengan file index.html. Selektor ini dapat berupa tag, class, ataupun atribut lainnya di file HTML.
- Blok Deklarasi: Tempat menulis style CSS yang diawali dengan kurung kurawal.
- Properti dan Nilai: Kumpulan aturan yang diberikan kepada selektor yang Anda pilih.
Sebagai contoh, Anda dapat memperhatikan script CSS berikut:
.logo{
font-family:RoadTest;
color:#000000;
font-size: 22px;
font-weight: bold;
}
body{
background-color:#ffffff;
margin:0px;
padding:0px;
}
Intinya, pada kode yang kami berikan di atas, .logo dan body adalah termasuk dalam kategori selektor. Selektor .logo adalah jenis selektor berupa class, jadi penulisannya harus diawali dengan tanda titik. Sedangkan body adalah selektor yang berupa tag, jadi penulisannya tidak menggunakan tanda titik pada bagian awalnya.
Untuk blok deklarasi, penulisan kodenya diawali dengan tanda kurung dan kemudian diakhiri kembali dengan tanda kurung.
Selanjutnya, background-color:#ffffff; pada script di atas adalah contoh properti dan nilai. Kode background-color ini mengatur warna background dari selektor tag body. Sedangkan kode #ffffff adalah nilai untuk warna putih di background pada tag body.
4. Mengakses Website di Browser
Cara membuat website dengan HTML yang terakhir adalah dengan membuka teks editor dan browser Anda secara bersamaan. Hal ini akan memungkinkan Anda untuk dapat langsung melihat setiap perubahan pada file HTML atau CSS website Anda. Setiap perubahan tersebut nantinya akan langsung tampil pada browser Anda.
Tidak Ingin Bingung dan Repot Membuat Website?
Kesimpulannya, dalam pembuatan website menggunakan HTML dan CSS, HTML berfungsi sebagai pondasi website. Sedangkan, css memainkan peran sebagai media editing untuk membuat visual website menjadi lebih menarik.
Faktanya, cara membuat website dengan HTML dan CSS di atasnya hanya sebatas panduan dasar. Jadi, jika Anda ingin membuat website dengan tampilan lebih profesional, Anda harus mempelajarinya secara lebih mendalam.
Opsi lain, Anda juga dapat menggunakan layanan pembangunan aplikasi dan website profesional dari Smartek Sistem. Perusahaan teknologi ini menyediakan layanan pembuatan website dan juga aplikasi profesional untuk keperluan bisnis maupun pribadi.
Smartek Sistem sendiri telah menjadi pilihan banyak brand besar di Indonesia, seperti Yummy Crop, JasaMarga, Adira Finance, Yuk Taruh CV, dan masih banyak lagi. Sehingga, kualitas layanan kami tak perlu Anda ragukan lagi.
