Jakarta, Virenial.com – Biasanya, pembuatan sebuah website membutuhkan waktu yang lumayan lama, baik itu website yang berjenis e-commerce, profil perusahaan ataupun layanan service.
Pertanyaannya, apakah kita bisa membuat website dengan cidong dalam waktu singkat? Jawabannya tentu bisa guys.
Untuk bisa membuat website dengan coding, maka Anda harus menggunakan HTML sebagai pendukungnya guys.
Karena HTML adalah singkatan dari Hypertext Markup Language yang memungkinkan seorang pengguna bisa membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.
HTML sendiri sebenarnya bukanlah bahasa pemrograman, karena HTML tidak memiliki kemampuan untuk membuat fungsionalitas yang dinamis.
Untuk lebih jelasnya, Anda bisa simak ulasan berikut ini tentang cara membuat website dengan coding.
Cara Membuat Website dengan Coding menggunakan HTML
Untuk bisa membuat website dengan coding menggunakan HTML, ada beberapa langkah yang harus dilakukan.
Selain itu, Anda juga harus memasukkan code atau script yang lumayan panjang pada langkah-langkah tersebut.
Nah, berikut ini cara membuat website dengan coding menggunakan HTML yang bisa diterapkan:
1. Menentukan Tema Website
Langkah pertama yang harus dilakukan bila ingin membuat halaman website dengan coding adalah menentukan tema yang tepat guys.
Anda bisa menggunakan website yang bertema portofolio dan bisa dibuat menggunakan HTML5 dan ditambahkan dengan sentuhan magic dari CSS3, agar tampilannya terlihat lebih menarik dan responsif.
Baca juga : Cara Membuat Website di HP
2. Mempersiapkan Tools yang Akan Digunakan
Disini Anda bisa menggunakan beberapa tools yang telah kami siapkan, diantaranya:
- Kode program : HTML5 dan CSS3
- Web browser: Chrome
3. Contoh dan Cara Ngoding Website Portofolio
- Pada tahap ini, Anda harus membuka teks editor, kemudian buat folder proyek terlebih dahulu.
- Anda bisa menyimpan folder tersebut di sembarang tempat lalu tekan Ok.
- Selanjutnya Anda akan membuat 2 buah file, diantaranya index.html dan style.css.
Kode Lab: index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Web | Portofolio</title>
</head>
<body>
<div class=”container”>
<div class=”sidebar”>
<nav>
<ul>
<li><a href=””>About</a></li>
<li><a href=””>Portofolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>Contact</a></li>
</ul>
</nav>
</div>
<main class=”content”>
<section class=”hero”>
<img src=”online.png” alt=””>
<div class=”hero-content”>
<h1>Profesi</h1><br></h2>Junior Content Writer at Dicoding</h2><br><br>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt inventore perspiciatis debitis doloribus ullam minima culpa voluptatem. Repellendus, option.</p>
<a href=”” class=”action-btn”>Profile Saya</a>
</div>
</section>
</div>
<div class=”footer”>
<footer>
<ul>
<li><img src=”instagram.png” alt=””><p>Instagram</p></a></li>
<li><img src=”facebook.png” alt=””><p>Facebook</p></a></li>
<li><img src=”twitter.png” alt=””><p>Twitter</p></a></li>
<li><img src=”telegram.png” alt=””><p>Telegram</p></a></li>
</ul>
</footer>
</div>
</div>
</body>
</html>
Kode Lab: style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #eff1f2;
font-family: sans-serif;
}
.content {
grid-area: content;
}
.sidebar{
grid-area: sidebar;
background: linear-gradient(to right, rgba(200,107,142,1), rgba(218,105,250,1),
rgba(110,125,253,1)) ;
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100;
height: 100vh;
display: grid;
grid-template-areas: “sidebar” “content” “footer”;
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content, .sidebar, .footer{
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li{
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 90 px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373046;
}
.hero p {
font-weight: 300;
line-height: 1.3em;
color: #98aBad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #567bfb;
padding: 0.5em 2em;
border-radius: 60px;
margin: 1em 0;
transition: 0.3s;
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a{
text-decoration: none;
color: #c1c6ce;
}
footer ul li img {
width: 30%;
}
footer p {
font-size: 0.8em;
}
@media (min-width: 1040px){
.container {
grid-template-areas:”sidebar content” “sidebar footer” ;
grid-template-rows: 1fr auto ;
grid-template-columns: 300px 1f;
}
nav ul{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar{
background: linear-gradient( rgba(200,107,142,1), rgba(218,105,250,1),
rgba(110,125,253,1)) ;
padding-top: 10em;
}
.hero{
text-align: left;
margin: 7em 0;
}
.hero img {
width: 200px;
float: right;
}
.hero h1{
font-size: 3em;
}
.hero p{
width: 60%;
}
footer ul {
max-width: 900px;
margin: 0 auto;
padding: 1em 0;
}
footer ul li a img {
width: 20%;
}
}
Bila Anda masih bingung dalam mencari gambar seperti ikon sosial media ataupun avatar, maka bisa menemukannya di website lain.
Anda juga bisa coba juga apakah website tersebut responsif atau tidak dengan cara lakukan zoom in dan zoom out atau perbesar dan perkecil tampilan web browser.
Selain itu, Anda juga bisa mengembangkannya kembali, misalnya dari segi desain atau tampilan, posisi layout, teks, foto dan lainnya.
Baca juga : Cara Membuat Website Gratis Sendiri
Demikian cara yang bisa diterapkan, jika ingin membuat website dengan coding menggunakan HTML.
Bila menginginkan hasil yang lebih baik, kami sarankan agar Anda mengikuti kelas Belajar Dasar Pemorgraman Web di Dicoding.
Dengan begitu, pemahaman Anda tentang cara membuat dan mengelola website agar lebih cepat berkembang menjadi lebih terasah. Semoga bermanfaat dan selamat mencoba.
