Dalam web development, mengetahui cara membuat website HTML dan CSS merupakan langkah awal dan mendasar. Terlebih jika kamu seorang pemula, kamu wajib mempelajari kedua bahasa tersebut sebagai pondasi dalam mengembangkan situs web.
Keuntungan membuat website dengan HTML dan CSS yaitu fleksibilitas dan kontrol penuh yang dimiliki oleh user. Artinya, dengan bahasa ini, pengguna lebih leluasa untuk merancang dan mengatur tampilan setiap elemen sesuai keinginan mereka.
Lalu, bagaimana cara membuat web dengan CSS dan HTML? Yuk, cari tahu informasi dan tutorial lengkapnya di pembahasan kali ini.
Apa Itu HTML dan CSS?
HyperText Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk mengatur dan mendesain tampilan konten halaman. Dengan kode HTML, kamu dapat membuat struktur dan format elemen website seperti teks, gambar, video, dan elemen lainnya.
HTML bisa dibilang sebagai bahasa dasar dalam merancang struktur web beserta kontennya. Bahasa ini memungkinkan kamu mengatur layout, membuat daftar, hyperlink, dan banyak lagi.
Baca Juga: 21+ Contoh Coding HTML Website Dasar untuk Pemula
Sementara itu, Cascading Style Sheets atau CSS adalah kumpulan perintah yang berfungsi untuk mengontrol tampilan dan tata letak elemen halaman. Dengan CSS, kamu dapat mengatur estetika desain halaman seperti mengganti font, mengatur warna, padding, margin, dan sebagainya.
CSS biasanya dikolaborasikan dengan HTML untuk membangun visual halaman yang menarik dan interaktif. Penggunaan bahasa ini memungkinkan kamu membuat animasi, halaman responsif, serta mengoptimalkan tampilannya pada perangkat berbeda.
Baca Juga: 11+ CSS Framework untuk Membantu Proses Desain Website
Jadi, HTML dan CSS merupakan dua komponen penting yang bisa digunakan secara bersamaan. HTML bertanggung jawab untuk membuat struktur, sedangkan CSS berperan sebagai pengatur tampilan visualnya. Dengan memahami kedua bahasa ini, kamu dapat menciptakan tampilan website yang menarik, interaktif, dan fungsional.
Cara Membuat Website dengan HTML dan CSS
Sebelum mempelajari tutorial membuat website dengan HTML dan CSS, kamu harus menyiapkan text editor dan web browser terlebih dahulu agar prosesnya berjalan lancar. Text editor digunakan sebagai alat coding, sedangkan browser untuk mengakses situs yang dikembangkan.
Hanya dalam empat langkah saja kamu sudah bisa membangun situs web sendiri, lho! Berikut garis besar membuat website dengan CSS dan HTML:
- Menyusun struktur proyek website
- Tambahkan kode pada file index.html
- Tambahkan kode pada file style.css
- Mengakses website dalam web browser
Kamu dapat memilih tools apa pun sesuai selera. Namun, di panduan ini, kami menggunakan text editor dari Visual Studio Code dan Microsoft Edge sebagai browser-nya. Yuk, ikuti langkah-langkahnya di bawah ini.
1. Menyusun struktur proyek website
Langkah pertama yang harus kamu lakukan adalah menyusun struktur proyek website. Caranya, buatlah folder penyimpanan proyek dengan nama bebas, lalu buka melalui text editor. Pada contoh ini, proyek yang kami buat bernama “CONTOH WEBSITE”.
Selanjutnya, tambahkan folder baru di dalam CONTOH WEBSITE untuk menyimpan assets/gambar. Supaya prosesnya mudah dipahami, atur saja nama foldernya menjadi “images”.
Pada folder images ini, tambahkan dua file baru bernama “index.html” dan “style.css”.
- html – Merupakan file struktur atau inti halaman yang nantinya diisi oleh konten web.
- css – Merupakan file pendukung HTML untuk membuat visual halaman yang lebih interaktif.
2. Tambahkan kode pada file index.html
Tutorial membuat website dengan HTML dan CSS berikutnya adalah menambahkan kode pada index.html. File ini merupakan struktur dasar sehingga kamu perlu mengerjakannya terlebih dahulu sebelum masuk ke tahap selanjutnya.
Bagi yang belum tahu, struktur HTML terdiri dari empat bagian utama, yaitu Tag DTD/Doctype, Tag HTML, Tag Head, dan Tag Body.
- Tag DTD/Doctype – Berfungsi untuk mendeklarasikan format dokumen yang akan diproses. Tag ini harus dibuat di bagian paling awal.
- Tag HTML – Tempat penyimpanan elemen HTML.
- Tag Head – Ruang informasi yang tidak ditampilkan secara visual, bisa berupa source css, source js, meta charset, atau lainnya.
- Tag Body – Berisi semua elemen atau konten yang ditampilkan di halaman web.
Untuk membuatnya, kamu perlu menambahkan kode tertentu pada file index.html. Berikut langkah-langkahnya:
Langkah 1: Pada bagian tag head, deklarasikan beberapa informasi seperti meta tag charset, title, dan path external sources halaman (contoh: CSS dan JavaScript). Jangan lupa pastikan bahwa lokasi penyimpanan file CSS sudah sama dengan HTML. Jika berbeda, kamu perlu memasukkan path-nya di bagian href.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Website</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
Langkah 2: Di bagian tag body, tambahkan elemen-elemen yang ingin ditampilkan di halaman awal website, seperti navigasi, text container, gambar, dan lain sebagainya. Untuk membuatnya, gunakan tag class pada masing-masing elemen.
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="#" class="logo">Contoh Web Portofolio</a>
<!--- menu --->
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</nav>
<!--- text --->
<div class="text-container">
<p>Hi, Guys!</p>
<p>I’M NURUL HUDA</p>
<p>Content Writer, SEO Specialist & Web Developer</p>
<p>An introvert person who loves FPS games, singing,
<br>learning technology and of course writing.</p>
<button class="hire-btn">Contact me</button>
<button class="down-cv">Portfolio</button>
</div>
<!-- model -->
<img alt="model" class="model" src="E:\CONTOH WEBSITE\images\aduhuchiha.png">
</section>
Langkah 3: Tambahkan services atau layanan yang ingin ditampilkan dengan cara menuliskan kodenya pada tag <div class=”box-container”>.
<!-- services -->
<div class="services">
<!--text-->
<div class="services-text ">
<p>What do I Offer?</p>
</div>
<div class="box-container">
<!--- 1 --->
<div class="box-1">
<span>1</span>
<p class="heading">Content Writing</p>
<p class="details">We create content that resonates with your audience and drives results for your business</p>
<button>Read More</button>
</div>
<!--- 2 --->
<div class="box-2">
<span>2</span>
<p class="heading">Search Engine Optimization</p>
<p class="details">We implement proven strategies to boost your website's ranking and driving organic traffic from potential customers</p>
<button>Read More</button>
</div>
<!--- 3 --->
<div class="box-3">
<span>3</span>
<p class="heading">Web Development</p>
<p class="details">From frontend design to backend functionality, we build robust and scalable web applications to help your business thrive</p>
<button>Read More</button>
</div>
</div>
</div>
Langkah 4: Jika sebelumnya sudah pernah membuat website dengan html dan css, kamu bisa menambahkan testimoni atau ulasan dari klien terdahulu. Pastikan link script fontawesome-nya ditambahkan di bagian head untuk menampilkan rating simbol bintang.
<!--testimonials-->
<div class="testimoni">
<!--text-->
<div class="testimoni-text ">
<p>Clients Who are Satisfied with Our Services...</p>
</div>
<div class="testimoni-col">
<div class="testimoni-1">
<img src="E:\CONTOH WEBSITE\images\johana.png">
<div>
<p>I am amazed by the level of professionalism and creativity this services. I highly recommend their services to anyone seeking top-notch solutions</p>
<h3>Johanna</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="E:\CONTOH WEBSITE\images\zila.png">
<div>
<p>Their attention to detail and commitment to excellence are truly remarkable. I am incredibly satisfied with the results they have achieved for my business</p>
<h3>Zila</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>
Langkah 5: Kebanyakan website mencantumkan media sosial agar pengguna lebih mudah melakukan interaksi. Di bagian footer, tambahkan fitur ini menggunakan kode HTML logo media sosial dari fontawesome.
<!-- footer -->
<footer>
<p>How to Hire My Services?</p>
<!--paragraph-->
<p>I work on projects with the best results and according to deadlines. Guaranteed revisions and money back if you are not satisfied with my work.</p>
<!--social-->
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
<!--copyright-->
<p class="copyright">Copyright by Nurul Huda</p>
</footer>
<!--social-attach-bar-->
<div class="social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
</div>
</body>
</html>
Sampai di sini, kamu telah berhasil membuat file index.html. Namun, tampilan halaman web-nya sangat sederhana dan kurang menarik seperti gambar berikut.
Nah, untuk mempercantik tampilan, kamu harus menambahkan kode file style.css yang akan kami bahas selanjutnya. Yuk, simak terus sampai selesai!
3. Tambahkan kode pada file style.css
Setelah index.html selesai, cara membuat website HTML dan CSS selanjutnya adalah menambahkan kode pada file style.css. Langkah ini bertujuan untuk membangun tampilan halaman yang lebih cantik, menarik, dan interaktif.
Jika HTML diibaratkan sebagai kerangka pondasi rumah, maka CSS adalah cat dan interior yang membuatnya rumah tersebut lebih enak dilihat.
Struktur penulisan kode CSS tidak jauh berbeda dengan HTML, di mana bahasa ini terdiri dari beberapa bagian, yakni selektor, blok deklarasi, dan properti/nilai.
- Selektor – Merupakan kata kunci berupa tag, id, class, dan atribut lainnya yang terhubung dengan kode HTML.
- Blok deklarasi – Tempat menuliskan kode CSS yang diawali dengan simbol buka kurawal ({) dan diakhiri tutup kurawal (}).
- Properti dan nilai – Sekumpulan perintah atau aturan yang ditujukan ke selektor terpilih.
Untuk memulainya, kamu bisa memakai kode style di bawah ini sebelum memodifikasinya berdasarkan selera atau gaya sendiri.
@charset "utf-8";
/* CSS Document*/
body{
background-color:#dddddd;
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
section{
width:100%;
height:95vh;
position: relative;
}
nav{
display: flex;
justify-content: space-between;
align-items:center;
height:60px;
background-color:#FFFFFF;
box-shadow:2px 2px 12px rgba(0,0,0,0.2);
padding:0px 5%;
}
nav ul{
display: flex;
}
nav ul li a{
margin:30px;
font-family:myriad pro regular;
color:#505050;
font-size: 15px;
font-weight:700;
}
.logo{
font-family:RoadTest;
color:#000000;
font-size: 22px;
font-weight: bold;
}
.active{
color:#2d2a2a;
font-weight:bold;
}
.text-container p:nth-child(1){
font-family: calibri;
font-weight: bold;
color: #6d6d6d;
font-size: 22px;
}
.text-container p:nth-child(2){
font-family: calibri;
font-weight: bold;
letter-spacing: 2px;
color: #1a1a1a;
font-size: 60px;
}
.text-container p:nth-child(3){
font-family: myriad pro regular;
color: #403e3e;
font-size: 30px;
line-height: 30px;
}
.text-container p:nth-child(4){
font-family: calibri;
color: #403e3e;
font-size: 17px;
margin-top: 10px;
line-height: 30px;
}
.text-container p{
line-height: 0px;
margin: 55px 0px 25px;
}
.text-container{
position: absolute;
left: 13%;
top: 42%;
transform: translate(-13%, -42%);
}
.text-container button{
width: 130px;
height: 42px;
border-radius: 10px;
font-family: calibri;
font-weight: bold;
font-size: 14px;
outline: none;
margin: 0px 10px;
}
.hire-btn{
border: 2px solid #373636;
color: #373636;
}
.down-cv{
background-color: #0b0b0b;
color: #ffffff;
border: none;
}
button:active{
transform: scale(1.1);
}
.model{
height: 560px;
position: absolute;
bottom: 60px;
left: 80%;
transform: translateX(-70%);
}
.services{
height:600px;
background-color:#f6f5f5;
padding: 2% 10% 0px 10%;
}
.services-text p:nth-child(1){
font-family: calibri;
font-weight:bold;
color:#1d1c1c;
font-size:30px;
line-height:0px;
text-align: center;
margin-bottom: 40px;
}
.services-text p:nth-child(2){
font-family:calibri;
color:#7e7d7d;
}
.services-text{
margin:50px 0px;
}
.box-container{
display:flex;
justify-content:space-between;
}
.box-1,.box-2,.box-3{
width: 300px;
height:320px;
background-repeat: no-repeat;
background-size: cover;
box-shadow:2px 2px 18px rgba(0,0,0,0.3);
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0px 4px;
}
.box-1{
background-image:url("E:\CONTOH WEBSITE\images\images\layanan-1.jpg");
}
.box-2{
background-image:url("E:\CONTOH WEBSITE\images\layanan-2.jpg");
}
.box-3{
background-image: url("E:\CONTOH WEBSITE\images\layanan-3.jpg");
}
.box-1 span,
.box-2 span,
.box-3 span{
width:40px;
height:40px;
border-radius:50%;
background-color:#ff7b00;
display: flex;
justify-content: center;
align-items:center;
font-family: calibri;
font-weight: bold;
}
.box-1 p:nth-child(2),
.box-2 p:nth-child(2),
.box-3 p:nth-child(2){
color:#000000;
font-family: calibri;
font-size: 23px;
line-height:0px;
}
.box-1 p:nth-child(3),
.box-2 p:nth-child(3),
.box-3 p:nth-child(3){
font-family: calibri;
color:#8F8F8F;
text-align:center;
width: 230px;
margin:0px 0px 20px 0px;
}
.box-1 button,
.box-2 button,
.box-3 button{
width:100px;
height:30px;
background-color:#979797;
border:none;
outline: none;
border-radius:5px;
}
.testimoni{
height:500px;
background-color:#FFFFFF;
padding: 2% 10% 0px 10%;
text-align: center;
margin: auto;
}
.testimoni-text p:nth-child(1){
font-family: calibri;
font-weight:bold;
color:#1d1c1c;
font-size:30px;
line-height:0px;
}
.testimoni-text{
margin:70px 0px;
}
.testimoni-col{
display:flex;
justify-content:space-between;
}
.testimoni-1,.testimoni-2{
flex-basis: 44%;
border-radius: 10px;
margin-bottom: 5%;
text-align: left;
background: #f4f2f4;
padding: 25px;
cursor: pointer;
display: flex;
width: 500px;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
}
.testimoni-col img{
height: 60px;
margin-left: 5px;
margin-right: 30px;
margin-top: 20px;
border-radius: 50%;
}
.testimoni-col p{
padding: 0;
}
.testimoni-col h3{
margin-top: 15px;
text-align: left;
}
.testimoni-col .fas, .testimoni-col .far{
color: #f44336;
}
footer p{
font-family: calibri;
}
footer p:nth-child(1){
font-size: 30px;
font-weight:bold;
color:#FFFFFF;
line-height:10px;
}
footer p:nth-child(2){
font-size: 16px;
color:#ffffff;
width:600px;
text-align: center;
}
footer{
height:300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background-color: #5a5a5a;
}
.social-icons a{
width:40px;
height:40px;
display: flex;
justify-content: center;
align-items: center;
background-color:#e6e3e3;
margin:20px 10px;
border-radius:50%;
}
.social-icons{
display: flex;
}
.social-icons i,.social i{
color:#000000;
}
.social-icons a:hover{
background-color:#818181;
box-shadow:2px 2px 12px rgba(0,0,0,0.2);
transition:all ease 0.5s;
}
.social-icons a:hover i,
.social a:hover i{
color:#ffd900;
transition:all ease 0.5s;
}
.copyright{
color:rgb(214, 213, 213);
font-size: 15px;
position: absolute;
left:50%;
bottom:10px;
transform: translateX(-50%);
}
.social{
position: fixed;
top:50%;
right:0px;
transform:translateY(-50%);
}
.social a{
display: flex;
justify-content: center;
align-items: center;
width:50px;
height:50px;
margin:0px;
padding: 0px;
line-height:0px;
background-color:#FFFFFF;
border:1px solid #CBCBCB;
box-shadow:2px 2px 12px rgba(0,0,0,0.2);
}
.social a:hover{
background-color:#6e6e6e;
transition:all ease 0.5s;
}
.social i{
font-size:20px;
color:#2B2B2B;
}
Dengan kode CSS di atas, kamu dapat mencoba menerapkan beberapa perubahan kemudian lihat pengaruhnya satu per satu. Sedikit tips, sebaiknya pelajari kode warna HTML agar kamu lebih leluasa mengatur warna background, text, shape, atau elemen lainnya.
4. Mengakses website dalam web browser
Cara membuat website HTML dan CSS yang terakhir adalah mengaksesnya di browser secara bersamaan dengan text editor. Langkah ini cukup efektif untuk meninjau setiap perubahan kode secara langsung, baik pada index.html maupun style.css.
Caranya, cari file bernama “index.html” yang terletak di folder image (dari file explorer), kemudian buka melalui web browser. Muat ulang halaman setiap kali kamu melakukan perubahan untuk melihat hasilnya secara langsung.
Sekarang, coba kamu buka sendiri hasil coding website yang telah dibuat.
Ini adalah result tampilan awal situs web menggunakan kode index.html dan style.css di atas. Mungkin terdapat beberapa perbedaan dengan hasil proyek milikmu, hal disebabkan karena assets, gambar, dan style yang diterapkan berbeda.
Secara keseluruhan, tutorial ini menghasilkan sebuah halaman berisi beberapa konten layaknya website pada umumnya. Berikut tampilan full-nya:
Yuk Buat Website Pakai HTML dan CSS!
Sampai di sini, kamu tentu sudah tahu cara membuat website HTML dan CSS. Tidak terlalu sulit, bukan? Yuk, mulai buat website versi sendiri. Dengan mengikuti langkah-langkah di atas, ada beberapa manfaat yang bisa kamu peroleh, di antaranya:
- Dapat mengatur tampilan visual website menjadi lebih menarik dan profesional.
- Memungkinkan website diakses secara universal melalui web browser.
- Memungkinkan kamu memahami dasar web development dan meningkatkan skill di bidang ini.
Nah, setelah merancang dan membuat situs web, langkah selanjutnya adalah mengembangkan website dengan melakukan optimisasi mesin pencari atau SEO. Dengan teknik optimasi ini, website-mu dapat muncul di peringkat atas hasil penelusuran search engine seperti Google, Bing, atau Yahoo. Selamat mencoba!
Terlepas dari itu, kamu dapat eksplor artikel informatif lainnya di blog Dewaweb atau daftar webinar gratis di Dewatalks untuk menambah wawasan seputar pengembangan dan pengelolaan website. Jika tertarik, kamu juga bisa ikut program afiliasi untuk menambah penghasilan melalui jaringan sosial. Salam sukses online, ya!
