Pada artikel kali ini, kita akan membahas mengenai cara membuat website dengan HTML dan CSS. Jika anda mengikuti materi tentang HTML pada blog ini dari awal, maka sekarang saatnya kita akan mempraktikkan ilmu HTML yang sudah dipelajari.
Jadi, wajar apabila pembahasannya cukup panjang karena artikel ini merupakan rangkuman yang telah dibahas sebelumnya.
Selain itu, saya akan mencoba membuat website dengan HTML dan CSS dengan tampilan portfolio secara lengkap namun tetap sederhana agar lebih mudah anda pahami. Langsung saja kita bahas
Cara membuat website dengan HTML dan CSS
Langkah pertama dalam membuat website dengan HTML dan CSS, anda harus mempersiapkan bahan sebagai berikut :
- Visual Studio Code (VS Code), sebagai tools Text Editor untuk menulis kode
- Web Browser, digunakan untuk mengakses website
Untuk tahap-tahap dalam membuat website dengan HTML dan CSS, yaitu :
- Membuat struktur folder project website
- Membuat Halaman Home
- Menambahkan CSS pada Website
- Membuat Halaman About
- Membuat Halaman Contact
- Membuat Halaman Form Register
- Menambahkan Fitur Download CV
- Membuat favicon pada web
- Menjalankan Website di Browser
Mari kita bahas satu persatu !
Membuat Struktur Folder Website
Langkah selanjutnya dalam membuat website dengan HTML dan CSS adalah dengan Membuat Struktur Folder Website. Caranya buatlah folder penyimpanan project website Anda lalu buka folder tersebut pada VS Code. Sebagai contoh, saya menggunakan nama folder “ my-web”.
pada folder my-web terdapat sub folder seperti image dan video. langkah-langkahnya adalah sebagai berikut :
1. Buatlah folder baru dengan nama “my-web”.
2. Setelah itu buat folder image dan video di dalam folder my-web.
3. Pada folder image, tambahkan file gambar dengan nama ”simbol.png”.
4. Tambahkan juga file video dengan nama ”about.mp4” pada folder video
5. Lalu buka folder my-web dengan Visual Studio Code.
6. Setelah folder terbuka, maka tampilannya akan seperti ini :
Membuat Halaman Home
Langkah selanjutnya dalam membuat website dengan HTML dan CSS adalah dengan membuat halaman home. Untuk membuat halaman ini adalah dengan cara menambahkan kode pada file index.html. File HTML ini merupakan kode utama untuk membangun struktur website Anda. Adapun beberapa Tag yang digunakan adalah :
- Tag DTD/Doctype : ditulis pada awal dokumen. Tag ini berfungsi untuk mendeklarasikan tipe dokumen dan versi HTML untuk diproses pada web browser.
- Tag HTML : Merupakan wadah dari semua elemen html.
- Tag Head : Berisi informasi website yang tidak tampil di halaman web browser. Misalnya, source css, source js, dll.
- Tag Body : Berisi semua elemen yang tampil di halaman web browser. Tag ini merupakan bagian dimana semua konten akan ditulis.
Adapun langkah-langkah dalam membuat halaman Home adalah sebagai berikut :
1. klik ”New File” pada VS Code.
2. Setelah itu tuliskan nama “index.html”.
3. Lalu isi dengan kode berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Praktek otodidak web</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="index.html" class="logo">PRAKTEK OTODIDAK</a>
<!--- menu --->
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!--- text --->
<div class="text-container">
<p>Hello,</p>
<p>I’M PRAKTEK OTODIDAK</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos,
<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<button class="hire-btn"> <a href ="form-register.html">Form Register</a></button>
<button class="down-cv"> <a href ="cv-praktekotodidak.pdf">Download CV</a></button>
</div>
<!-- model -->
<img alt="model" class="model" src="image/simbol.png">
</section>
<!--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>
<!-- services -->
<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>
<!-- 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">2022 Praktek Otodidak</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>
4. Coba membuka file index.html, maka hasilnya akan seperti ini :
Pada gambar diatas, hasil tampilannya masih sebatas text saja. Untuk itulah kita akan menggunakan CSS agar tampilan website kita jadi lebih menarik.
Penjelasan Kode program
Pada bagian tag head, terdapat beberapa kode seperti :
<link rel="stylesheet" type="text/css" href="style.css"/>
Merupakan deklarasi path dari external CSS yang akan kita buat.
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
Digunakan untuk menunjukkan ikon bintang dan rating yang akan muncul di halaman web di bagian testimonial.
Sedangkan pada tag body, merupakan tampilan awal yang terdapat kode untuk logo dan menu utama. Adapun web yang akan kita buat merupakan website portfolio yang mana terdapat kode seperti :
- <div class=”text-container”>, tampilan awal yang terdiri dari navigation bar, text container, dan gambar dan fitur Fitur Download CV dan Form register.
- src=”image/simbol.png, konten berupa gambar, yang mana file videonya ada pada folder image dengan nama simbol.png
- <div class=”testimoni”>, Merupakan tag fitur untuk membuat testimonial, yang mana website anda akan berisi review dan rating dari pengunjung.
- <div class=”services”>, Merupakan tag fitur untuk membuat bagian services atau layanan
- tag <div class=”box-container”>, merupakan bagian services yang menunjukan layanan yang Anda buat
Pada kode yang paling bawah merupakan bagian footer yang digunakan sebagai penutup, yang mana terdapat fitur sosial media pada tag :
- <div class=”social-icons”>, Kode HTML untuk logo sosial media pada website
- <div class=”social”>, Kode HTML sosial media pada menu bar.
Menambahkan CSS pada Website
Untuk membuat website agar tampilannya lebih menarik yaitu dengan menggunakan CSS. Anda dapat membuat website HTML dengan mengubah style CSS sesuai keinginan.
Adapun struktur penulisan CSS terdiri dari 3 bagian, yaitu :
- Selektor : Merupakan key yang menghubungkan style di file CSS dengan file HTML yang terdapat beberapa tag, class, id, maupun atribut yang ada di file HTML.
- Blok Deklarasi : Tempat menulis style CSS, ditandai dengan kurung kurawal {}.
- Properti dan Nilai : Sekumpulan aturan yang diberikan pada selektor yang dipilih.
Anda dapat coba menggunakan kode di bawah ini terlebih dulu sebelum mengubahnya menggunakan style Anda sendiri :
Adapun langkah-langkah dalam menambahkan kode pada file style.css adalah sebagai berikut :
1. klik ”New File” pada VS Code.
2. Setelah itu tuliskan nama “ style.css”.
3. Lalu isi dengan kode berikut :
@charset "utf-8";
/* CSS Document*/
body{
background-color:#ffffff;
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:#ea5f02;
font-size: 30px;
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: #f40c0c;
color: #ffffff;
border: none;
}
button:active{
transform: scale(1.1);
}
.model{
height: 260px;
position: absolute;
bottom: 210px;
left: 80%;
transform: translateX(-70%);
}
.video{
width: 400px;
height:400px;
background-size: cover;
box-shadow:2px 2px 18px rgba(0,0,0,0.3);
align-items: center;
justify-content: center;
display: flex;
margin: 0px 4px;
}
.artikel{
font-family: calibri;
font-size:18px;
line-height:5px;
text-align:left;
margin:auto;
}
.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("images/services-1.png");
}
.box-2{
background-image:url("images/services-2.png");
}
.box-3{
background-image: url("images/servies-3.png");
}
.box-1 span,
.box-2 span,
.box-3 span{
width:40px;
height:40px;
border-radius:50%;
background-color:#ffffff;
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:#FFFFFF;
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:#FFFFFF;
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:#7e7d7d;
width:600px;
text-align: center;
}
footer{
height:300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background-color: #191919;
}
.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:#000000;
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:#FFFFFF;
transition:all ease 0.5s;
}
.copyright{
color:#565555;
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:#000000;
transition:all ease 0.5s;
}
.social i{
font-size:20px;
color:#2B2B2B;
}
4. Sekarang coba buka lagi file index.html, maka hasilnya akan seperti ini:
Penjelasan Kode Program
Untuk menentukan bagian mana yang merupakan selektor, blok deklarasi, properti dan nilai adalah sebagai berikut :
- Selektor, Contohnya adalah logo dan body. logo adalah selektor yang berupa class dan diawali dengan tanda titik,
sedangkan body adalah selektor yang berupa tag dan tidak menggunakan tanda titik pada awal penulisannya. - Blok deklarasi, Untuk blok deklarasi ditandai dengan tanda kurung diawal dan diakhir {}.
- Properti dan nilai, Contohnya adalah kode background-color:#ffffff; merupakan properti dan nilai untuk mengatur warna background dari selektor tag body.
Jika gambarnya tidak ada pada hasil tampilan, maka cek kembali path dan tipe file imagenya. Atau anda dapat mengubah tipe filenya pada kode index.html.
<img alt="model" class="model" src="image/simbol.png">
Untuk lebih jelas, silahkan dibaca dulu Cara Menampilkan Gambar di HTML
Apabila pada hasil tampilan website anda tidak sesuai, hal tersebut karena adanya perbedaan ukuran dan format pada file gambar yang anda gunakan. namun anda dapat menyesuaikannya pada kode style.css bagian ini !
.model{
height: 260px;
position: absolute;
bottom: 210px;
left: 80%;
transform: translateX(-70%);
}
Membuat Halaman About
Untuk membuat website dengan HTML dan CSS yang selanjutnya adalah dengan membuat halaman about dengan cara menambahkan kode pada file about.html. Adapun langkah-langkahnya adalah sebagai berikut :
1. klik ”New File” pada VS Code.
2. Setelah itu tuliskan nama ”about.html”.
3. Lalu isi dengan kode berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Praktek otodidak web</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="index.html" class="logo">PRAKTEK OTODIDAK</a>
<!--- menu --->
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!--- text --->
<article class = "artikel">
<h1>About Me</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos.
</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.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Untuk lebih jelas, Simak video lengkap tentang saya.
</p>
</p>
<video controls class="video" >
<source src ="video/about.mp4" type="video/mp4"/>
</video>
</p>
</article>
</section>
<!-- 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">2022 Praktek Otodidak</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>
Keterangan :
<source src ="video/about.mp4" type="video/mp4"/>
Selain berupa text, halaman about ini memiliki konten berupa video, yang mana file videonya ada pada folder video nama about.mp4
4. Sekarang coba buka file about.html, maka hasilnya akan seperti ini :
Membuat Halaman Contact
Setelah kita sudah membuat halaman home dan about, Langkah selanjutnya dalam membuat website pada HTML dan CSS adalah dengan membuat halaman contact. Adapun langkah-langkahnya adalah sebagai berikut :
1. klik ”New File” pada VS Code.
2. Setelah itu tuliskan nama ”contact.html”.
3.Lalu isi dengan kode berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Praktek otodidak web</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="index.html" class="logo">PRAKTEK OTODIDAK</a>
<!--- menu --->
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!--Contact Form-->
<div>
<h1>Contact Me</h1>
<form action="contact.php" method="POST">
<fieldset>
<legend>Formulir Kontak</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Masukkan nama anda" />
</p>
<p>
<label>Subject:</label>
<input type="text" name="subject" placeholder="Opsional" />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Masukkan alamat Email" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</div>
</section>
<!-- 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">2022 Praktek Otodidak</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>
4. Sekarang coba buka file contact.html, maka hasilnya akan seperti ini :
Form contact ini belum bisa berfungsi, karena untuk mengirim data harus diproses oleh server dengan program tertentu, misalnya PHP, ASP dll. Hal ini sudah pernah saya jelaskan pada artikel Cara Membuat Form pada HTML.
Membuat Halaman Form Register
Selain formulir kontak, dalam membuat website pada HTML dan CSS ini saya juga menambahkan Form Register. Form ini juga tidak kalah penting jika anda ingin menambahkan layanan registrasi pada halaman web anda. Adapun letaknya, saya taruh dibagian tombol pada menu home agar lebih terlihat jelas oleh pengunjung.
Adapun langkah-langkahnya adalah sebagai berikut :
1. klik ”New File” pada VS Code.
2. Setelah itu tuliskan nama ” form-register.html”.
3. Lalu isi dengan kode berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praktek otodidak web</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>
<body>
<section>
<!--- navigation --->
<nav>
<!--- logo --->
<a href="#" class="logo">PRAKTEK OTODIDAK</a>
<!--- menu --->
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!--Formulir registrasi-->
<h1>Formulir Register</h1>
<form action="contact.php" method="POST">
<fieldset>
<legend>Formulir Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
</p>
<p>
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="hindu">Budha</option>
<option value="budha">Hindu</option>
<option value="konghucu">Konghucu</option>
</select>
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Password..." />
</p>
<p>
<label>Biografi:</label>
<textarea name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
</form>
</section>
<!-- 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">2022 Praktek Otodidak</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>
4. Sekarang coba buka file contact.html, maka hasilnya akan seperti ini :
Membuat Fitur Download CV
Fitur yang akan kita gunakan dalam membuat website pada HTML dan CSS yang terakhir adalah dengan menambahkan tombol Downlod CV. Anda dapat mengubahnya untuk keperluan lain, misalnya untuk download aplikasi yang mengarah pada link tertentu. Letaknya ada disebelah form register.
Adapun langkah-langkahnya adalah sebagai berikut :
1. Siapkan file-cv.pdf anda, misalnya dengan nama cv- praktekotodidak.pdf
2. Lalu tambahkan file cv- praktekotodidak.pdf ke dalam folder my-web.
3. Sekarang coba buka file index.html, lalu klik menu Download CV
4. Jika link PDF nya sudah benar, maka hasilnya akan seperti ini :
Membuat Favicon pada Web
Cara membuat website pada HTML dan CSS pada langkah yang terakhir adalah dengan membuat Ikon favicon. Dengan adanya ikon ini, website anda akan terlihat lebih menarik sekaligus sebagai simbol tersendiri pada halaman web anda.
Adapun langkah-langkahnya adalah sebagai berikut :
1. Buka link favicon-generator.org
2. Klik ”choose file” untuk menambahkan gambar ikon.
3. Pilih generate only 16×16 favicon ico
4. Lalu klik “create favicon”.
5. Setelah itu klik ” Download the generated favicon”.
6. Simpan ikon yang telah di download ke dalam folder my-web.
7. Salin kode HTML dibawah ini lalu tambahkan ke dalam tag <head> pada semua file HTML.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
4. Sekarang coba cek dengan cara membuka file HTML nya baik itu index, about, contact, register. Maka hasilnya akan seperti ini :
Menjalankan Website di Browser
Setelah kita sudah membuat website dengan HTML dan CSS, maka sekarang kita akan mencoba menjalankannya dengan cara membuka file index.html pada browser. Maka hasilnya seperti gambar ini.
Penutup
Begitulah tutorial mengenai cara membuat website dengan HTML dan CSS dengan tampilan portfolio. Website yang ada pada tutorial ini hanya sebatas offline.
jadi, anda dapat mengubah tampilannya atau mengedit pada bagian apapun tanpa harus mengikuti desain dan struktur yang ada pada tutorial ini.
Barulah setelah itu dapat anda aplikasikan jika anda ingin membuat web ataupun menggunakannya untuk web yang sudah ada.
Sekian untuk pembahasan kali ini dan semoga mudah dipahami. Bantu share jika bermanfaat. Terima kasih
