Anfa'ul Fitri

Anfa'ul Fitri

Fitri adalah seorang penulis topik website dengan pengalaman 4 tahun. Ia memiliki kemampuan menulis yang baik dan pengetahuan yang luas tentang berbagai topik. Ia dapat menulis artikel dan konten website yang informatif, menarik, dan bermanfaat bagi pembaca. Ikuti dia di LinkedIn
Home » Blog » Website » 5 Cara Membuat Website dengan HTML : Mudah, Efektif, dan Gratis!

5 Cara Membuat Website dengan HTML : Mudah, Efektif, dan Gratis!

cara membuat website dengan html

Daftar Isi

Tertarik belajar membuat website? Anda bisa memulainya dengan mempelajari cara membuat website dengan HTML.

Dengan teknik ini Anda dapat bereksperimen membuat website dari nol. Dari halaman yang masih kosong sampai berisi layout website dengan desain dan teks yang Anda inginkan

Dalam artikel ini akan dijelaskan tahapan-tahapan dalam membuat website dengan HTML dan juga CSS. Hingga akhirnya menghasilkan website yang sederhana.

Mengetahui cara membuat website dengan HTML dapat membantu Anda memahami komponen-komponen dasar pada website. 

Pengertian HTML dan Fungsinya

Namun sebelum membahas cara membuat website dengan HTML dan CSS, Anda perlu tahu dulu apa pengertiannya.

HTML merupakan singkatan dari Hypertext Markup Language, yaitu bahasa standar yang digunakan untuk menyusun struktur dan isi konten dari halaman website.

Apa saja yang ada pada halaman web, bagaimana setiap komponen ditata, dan kemana pengunjung akan pergi ketika mereka mengklik sesuatu.

Untuk menyusun HTML Anda membutuhkan tools khusus untuk bahasa pemrograman, yang biasa disebut dengan nama Text Editor. Apabila Anda pengguna Windows pasti sudah tidak asing dengan aplikasi Notepad.

Notepad termasuk salah satu aplikasi Text Editor yang sederhana. Sekarang ini sudah muncul tools yang lebih beragam dengan fitur yang lebih lengkap.

Ketika Anda merangkai HTML di Text Editor, terdapat berbagai jenis tag yang disusun untuk membuat satu halaman website. Tag terdiri dari tag pembuka dan tag penutup, sedangkan di bagian tengah merupakan isi konten yang akan ditampilkan pada halaman web.

Ada tag <h> </h> untuk heading, <p> </p> untuk paragraph, dan masih banyak lagi jenis tag yang lain. Contoh penggunaanya:

<h1> INI CONTOH H1 </h1>

cara membuat website dengan HTML

Terdapat dua tipe tag utama yaitu block-level dan inline tags. Block-level digunakan ketika ingin memakai ruang yang ada pada text editor dan membuat line baru dalam dokumen. Misalnya saat membuat heading atau paragraph.

Sedangkan tag inline dipakai untuk memformat konten yang masih bagian dari block level. Sehingga tidak membuat line baru. Contoh tag yang termasuk inline yaitu <strong></strong> untuk membuat tulisan jadi bold. Atau <em></em> untuk format teks Italic.

Pengertian CSS dan Fungsinya

Sedangkan CSS merupakan kependekan dari Cascading Style Sheets, yaitu bahasa yang dipakai untuk menentukan bagaimana halaman web akan ditampilkan, elemen-elemen di dalamnya seperti apa, serta style desain web akan bagaimana.

CSS lah yang membuat tampilan website jadi atraktif dan menarik. CSS ini bukan bahasa pemrograman, lebih tepatnya disebut dengan bahasa style sheet. Namun selain berfungsi mengatur tampilan halaman web yang berbasis HTML, CSS juga memiliki fungsi lain.

Mulai dari mempercepat waktu loading website, menawarkan banyak variasi tampilan web, mempermudah mengelola kode, dan membuat tampilan website rapi di ukuran layar yang berbeda.

Sebelumnya disebut mengenai mengelola kode, karena pada bahasa CSS ini yang dipakai memang sebuah kode.

Tidak seperti HTML yang menggunakan serangkaian tag dan ditulis berulang untuk halaman yang berbeda. Pada CSS Anda cukup menuliskan kode untuk mengubah tampilan web keseluruhan.

Dalam membuat website Anda perlu menguasai HTML dan CSS. Setelah memahami cara menggunakannya, Anda bisa membuat jenis website apapun, misalnya company profile, portofolio, ataupun blog pribadi.

Cara Membuat Website dengan HTML

Setelah mengetahui pengertian dan fungsi dari bahasa HTML dan juga CSS, sekarang Anda dapat mulai mencoba membuat website. Lakukan tahapan-tahapan di bawah ini:

  • Menginstal Text Editor

Tahap pertama Anda perlu menginstal aplikasi Text Editor. Selain Notepad yang memang jadi bawaan Windows, ada banyak pilihan tools untuk Text Editor. Seperti Visual Studio Code atau VSCode, Sublime Text, Vim, Komodo edit, dan Notepad ++.

cara membuat website dengan HTML

Ketika memilih Text Editor pastikan dulu spesifikasi komputer Anda. Misalnya berapa besaran RAM komputer Anda.
Hal ini dikarenakan bahwa untuk beberapa aplikasi Text Editor bisa dijalankan dengan baik pada komputer dengan spesifikasi tertentu. Serta pilih aplikasi yang tidak berbayar.

Karena Anda sedang belajar membuat website, sebagai pemula Anda dapat memilih Notepad ++. Aplikasi ini berbeda dengan Notepad sebelumnya karena menyediakan berbagai fitur pendukung.

Notepad ++ juga termasuk Text Editor gratis yang bisa dipakai untuk komputer dengan spesifikasi ram 2GB.
Selain Notepad ++ ada juga Text editor lain yang masih buatan Microsoft, yaitu VSCode. Meski begitu tools ini juga tersedia untuk sistem operasi Mac Os dan Linux. Anda dapat menggunakan VSCode untuk membuat website dengan HTML dan CSS.

  • Membuat File HTML

Setelah memilih aplikasi Text Editor, langkah selanjutnya adalah membuat file HTML untuk mulai menyusun tag. Misalnya buatlah file index.html. Pada file ini Anda akan merangkai struktur halaman website.

Secara garis besar, dalam setiap halaman tersusun atas 4 bagian yaitu:

  1. Tag Document Type Declaration (DTD), ditulis pada bagian paling awal dari file HTML. Fungsinya yaitu untuk mendeklarasikan atau menentukan tipe file dan versi HTML yang Anda gunakan.
  2. Tag HTML, ditulis setelah tag DTD. Tag HTML menjadi pembuka dan penutup yang berisi berbagai elemen.
  3. Tag Head, pada tag ini dicantumkan informasi website seperti title, meta charset, source css, dan source js. Informasi ini tidak akan muncul pada halaman web.
  4. Tag Body, merupakan bagian yang berisi elemen-elemen yang akan ditampilkan pada halaman website.

Sehingga rangkaian tag yang Anda buat pada Text Editor, dimulai dengan mencantumkan tag DTD lalu tag HTML. Setelah itu Anda menyusun bagian tag head untuk mengisi informasi mengenai meta tag charset, title, dan link dari file CSS yang nantinya akan dibahas lebih lanjut. Contoh penulisannya seperti ini:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title> Personal Blog </title>
<link rel+”styesheet” type=”text/css” href=”style.css”/>
</head>

Baru kemudian lanjut ke tag body, untuk mengatur homepage website. Di mana biasanya berisi navigation bar, text container, paragraph, sampai bagian footer.

Selain itu jangan lupa menambahkan gambar yang sesuai. Sebelum itu pastikan Anda sudah mengumpulkan semua foto, gambar dan aset untuk membuat website dalam satu folder agar lebih mudah.

Berikut contoh penulisan pada bagian body untuk personal blog:

<body>
<section>
<!— navigation —>
<nav>
<!— logo —>
<a href=”#” class=”logo”>Blog Tutorial</a>
<!— menu —>
<ul>
<li><a href=”#” class=”active”>Home</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Article</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

<!— text —>
<div class=”text-container”>
<p>Hello,</p>
<p>I’M IndonesianWriter.com</p>
<p>A ONE STOP CONTENT MARKETING SOLUTION FOR YOUR BUSINESS’ GROWTH</p>
<p>Ready to get your content enhance with IndonesianWriter?</p>
<button class=”hire-btn”>CLICK HIRE</button>
</div>
</section>

</div>

<!– footer –>
<footer>
<p> You can reach me on</p>
<div class=”social-icons”>
<a href=”#” ><i class=”fab fa-instagram”></i></a>
<a href=”#” ><i class=”fab fa-twitter”></i></a>
<a href=”#” ><i class=”fab fa-youtube”></i></a>
</div>
</footer>
</body>
</html>

cara membuat website dengan html

  • Membuat File CSS

Cara membuat website dengan HTML Selanjutnya adalah dengan membuat file CSS untuk memberikan tampilan website yang lebih menarik. Pada text editor buat file dengan extension CSS misalnya style.css.

Kemudian mulailah memasukkan kode untuk menambahkan elemen pada halaman web. CSS ini akan sangat membantu karena bahasa HTML sendiri terbatas dan fokusnya lebih ke struktur isi website.

CSS terdiri dari 3 jenis jika melihat dari penempatan kode. Yaitu CSS Inline, Internal, serta External. Untuk Inline, kode CSS dicantumkan di bagian body dalam file HTML. Kode ini hanya memberikan perubahan pada satu baris saja.

Sedangkan Internal kode-kodenya diletakkan di bagian header pada file HTML. Berfungsi menentukan tampilan satu halaman website.

Terakhir ada External yaitu, kode CSS yang ditaruh di luar file HTML dalam bentuk file.css. Fungsinya yaitu mengatur tampilan untuk semua halaman website. Sehingga bisa digunakan untuk menata beberapa halaman web sekaligus
Apa saja yang bisa diatur oleh CSS? Ada banyak, diantaranya yaitu menentukan bagaimana format paragraph, font, dan warna tulisan.

Kemudian membuat kotak teks, tombol link, mengubah warna link dan juga mengatur warna yang bisa berubah ketika diarahkan oleh kursor. Semua detail desain tersebut bisa dilakukan dengan menggunakan bahasa CSS.

Contoh penulisan kode CSS kurang lebih akan seperti ini:

@charset “utf-8”;
/* CSS Document*/
body{
background-color:#a11111;
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: #ffffff;
font-size: 22px;
}

.text-container p:nth-child(2){
font-family: calibri;
font-weight: bold;
letter-spacing: 2px;
color: #ffffff;
font-size: 60px;
}

.text-container p:nth-child(3){
font-family: myriad pro regular;
color: #ffffff;
font-size: 30px;
line-height: 30px;
}

.text-container p:nth-child(4){
font-family: calibri;
color: #ffffff;
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;
}

button:active{
transform: scale(1.1);
}

.model{
height: 560px;
position: absolute;
bottom: 60px;
left: 80%;
transform: translateX(-70%);
}

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%);
}

cara membuat website dengan html

  • Integrasikan file HTML dengan File CSS

Setelah Anda membuat file HTML dan file CSS lengkap dengan tag dan kode yang sudah disusun, maka selanjutnya adalah menghubungkan kedua file tersebut.

Caranya cukup mudah. Anda tinggal memasukkan kode pada bagian head di file index.html. Dengan begitu kedua file akan langsung terintegrasi. Contohnya seperti ini:

<link rel=”style sheet” href=”style.css”>

cara membuat website dengan html

  • Mengakses Website Melalui Web Browser

Tahapan berikutnya Adalah membuka website Anda melalui web browser. Pada langkah ini bukan berarti halaman website sudah selesai.

Karena fungsi dari tahapan ini yaitu agar proses membuat website dengan HTML dan CSS bisa berjalan lebih efektif.

Buka kedua file bersamaan. Ketika Anda melakukan penambahan elemen baik pada file HTML dan juga CSS, perubahannya bisa langsung terlihat di web browser.

Namun sebelumnya Anda perlu memuat ulang halaman, setiap kali ada perubahan. Dengan begitu proses mengembangkan website jadi lebih mudah dan cepat.

Berikut ini merupakan hasil dari cara membuat website dengan HTML dan CSS secara sederhana.

cara membuat website dengan html

Kelebihan Membuat Website Dengan HTML dan CSS

Kebutuhan website baik untuk urusan bisnis maupun portofolio karya selalu tinggi. Anda sebetulnya bisa menggunakan desain template dari web builder.

Namun template dan fitur website-nya terbatas. Sehingga terkadang Anda bisa sangat menyukai tampilan desainnya, tetapi merasa fitur penunjangnya kurang sesuai.

Karena itulah membuat website sendiri menggunakan HTML dan CSS, bisa menjadi solusi alternatif. Di samping itu berikut ini 4 kelebih dari cara membuat website dengan HTML dan CSS:

  • Cocok bagi Pemula

Website dengan HTML dan CSS cocok bagi Anda yang masih pemula dan masih belajar cara membuat website.

Hal ini karena prosesnya tidak terlalu rumit dan mudah dipelajari setiap tahapannya. Selain itu bahasa HTML sendiri merupakan kemampuan dasar yang perlu dipahami calon web developer.

  • Hemat Budget

Jika Anda ingin membuat website tetapi ragu karena budget yang minim, maka Anda bisa membuat website HTML. Sehingga biaya yang perlu dikeluarkan untuk merancang website bisa lebih ditekan.

Dana yang perlu Anda keluarkan hanya untuk menyewa hosting dan domain. Selebihnya bisa gratis jika Anda menyusun sendiri websitenya.

  • Proses Pembuatan Lebih Mudah

Selain itu cara membuat website dengan HTML dan CSS lebih mudah. Dibandingkan dengan bahasa pemrograman yang menuntut Anda untuk memahami coding. Sedangn HTML dan CSS ini bisa Anda pelajar sendiri lalu praktikan.

  • Akses Jadi Lebih Ringan

Kelebihan lain dari website dengan HTML adalah kecepatan akses atau loading halaman.

Karena biasanya website dengan HTML dan CSS tidak menambahkan banyak fitur unik ke dalam website. Sehingga waktu untuk server merespon lebih singkat, yang membuat loading halaman web jadi lebih cepat.

Itu dia penjelasan mengenai pengertian, fungsi, dan cara membuat website dengan HTML dan CSS.

Teknik ini cocok bagi Anda yang ingin belajar cara membuat website (website development). Setelah menguasai kemampuan yang dasar ini, Anda dapat mulai mempelajari teknik yang lebih rumit.

jasa website

Selain dipakai untuk jadi tempat praktikum merancang halaman web, kemampuan ini juga bisa kamu manfaatkan untuk membuat website sederhana. Misalnya untuk portofolio, blog pribadi, katalog produk, company profile, dan lainnya.

Semoga artikel ini bisa menambah wawasan dan pemahaman Anda terkait web development. Share seluas-luasnya agar tulisan ini tidak hanya berhenti di diri Anda!

Jangan Lupa Share Artikel Ini ke Sosial Media Ya!

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Reddit
Ingin membuat website bisnis yang profesional dan responsif?
Order sekarang dan dapatkan harga spesial!​

Subscribe Sekarang

Dapatkan secara langsung berbagai macam artikel tentang content writing, SEO dan digital marketing melalui email Anda. Subscribe sekarang dan nikmati konten kreatif kami!

Baca Juga Artikel Lainnya :

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *


id_IDIndonesian
Diskon spesial ramadhan