Tutorial Buat 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:
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.
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.
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.
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.
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!
UNMAHA – Membuat website sekolah kini menjadi hal yang penting. Website sekolah bisa digunakan untuk berbagai keperluan, mulai dari pengumuman, jadwal pelajaran, hingga pengenalan lebih jauh tentang sekolah itu sendiri. Kamu mungkin merasa bingung harus mulai dari mana? Jangan khawatir! Kali ini saya akan menjelaskan cara membuat website sekolah dengan HTML yang simpel dan mudah, bahkan bagi pemula sekalipun.
Tidak perlu kemampuan coding yang canggih untuk membuat website sekolah yang fungsional. Dengan HTML, kamu bisa membuat tampilan dasar website yang sederhana namun tetap informatif. Namun, untuk membuat website yang benar-benar menarik, tentu kamu juga perlu sedikit tambahan CSS dan JavaScript. Tapi tenang, kali ini kita akan fokus pada HTML dulu.
Langkah 2: Menambahkan Konten
Di antara tag , kita bisa mulai menambahkan konten untuk website kita. Misalnya:
Cara Membuat Website Sekolah dengan HTML
Sebelum memulai penulisan kode HTML, ada beberapa hal yang perlu kamu persiapkan. Pertama-tama, kamu harus tahu apa saja elemen yang biasanya ada dalam sebuah website sekolah, seperti informasi tentang sekolah, program pendidikan, dan kontak. Selain itu, siapkan juga gambar-gambar atau media lain yang akan ditampilkan di website, seperti foto sekolah atau logo.
Setelah semua persiapan selesai, kamu siap untuk mulai menulis kode! Website sekolah yang sederhana sebenarnya tidak memerlukan banyak hal yang rumit, kok. Cukup dengan HTML, kamu sudah bisa membuat website yang cukup informatif dan mudah dinavigasi oleh pengunjung.
Menyiapkan Struktur Dasar HTML
Sebelum mulai menulis kode, kamu perlu tahu apa saja yang harus ada di dalam sebuah website sekolah. Struktur dasar HTML yang perlu kamu buat pertama kali adalah sebagai berikut:
Selamat datang di Website Sekolah XYZ
Tentang Sekolah
Ini adalah bagian tentang sekolah kamu…
Program Pendidikan
Informasi mengenai program pendidikan yang disediakan…
Bagian ini berisi informasi kontak sekolah…
© 2024 Website Sekolah XYZ
Dengan struktur dasar ini, kamu sudah bisa membuat halaman website dengan bagian-bagian seperti header, nav, section, dan footer.
Menambahkan Konten yang Relevan
Setelah menyiapkan struktur dasar, saatnya untuk mengisi konten. Di dalam website sekolah, biasanya ada beberapa informasi yang perlu kamu tampilkan, seperti:
Kamu bisa mengisinya langsung di dalam tag
Selain teks, foto juga sangat penting untuk membuat website sekolah lebih menarik. Kamu bisa menambahkan gambar sekolah dengan menggunakan tag seperti ini:
Pastikan untuk mengganti sekolah.jpg dengan nama file gambar yang sesuai, dan pastikan gambar tersebut sudah ada di dalam folder yang benar.
Jangan lupa untuk menambahkan tautan ke media sosial sekolah, agar pengunjung bisa lebih mudah mengikuti kegiatan sekolah. Misalnya, jika sekolah kamu memiliki akun Instagram atau Facebook, tambahkan link berikut ini:
Dengan begini, pengunjung dapat langsung mengakses halaman media sosial sekolah.
Baca Juga: Jangan Terlewat, 12 Fitur yang Harus Ada di Website Sekolah
Menambahkan Fitur Interaktif dengan JavaScript
Jika kamu ingin menambahkan fitur interaktif, seperti tombol yang berubah warna saat dihover, kamu bisa menggunakan JavaScript. Ini bisa membuat website semakin menarik dan fungsional.
document.querySelector(‘button’).addEventListener(‘click’, function() {
alert(‘Tombol diklik!’);
Fitur seperti ini akan memberikan pengalaman pengguna yang lebih menyenangkan dan interaktif.
Membuat website sekolah dengan HTML memang cukup sederhana jika kamu mengikuti langkah-langkah di atas. Dari mulai struktur dasar HTML, menambahkan konten penting, hingga memberikan sentuhan desain dengan CSS, semuanya bisa dilakukan dengan mudah. Jadi, jangan ragu untuk mencoba membuat website sekolah yang keren dan informatif!
Jika kamu tertarik dengan dunia teknologi, khususnya dalam bidang web development, mengapa tidak mempertimbangkan untuk kuliah di Universitas Maha Karya Asia? Di sana, kamu akan mendapatkan pendidikan yang berkualitas, terutama dalam bidang IT yang sangat relevan dengan dunia teknologi saat ini. Kunjungi website PMB Unmaha untuk mengetahui lebih lanjut tentang program yang ditawarkan. Jangan lewatkan kesempatan untuk belajar di kampus yang memiliki fasilitas lengkap dan pengajaran dari dosen berpengalaman!***
Editor: Mahfida Ustadhatul Umma
Membuat website sendiri mungkin tampak menakutkan, terutama jika kamu tidak memiliki pengalaman dalam bidang teknologi dan pemrograman. Tapi, dengan menggunakan HTML, kamu bisa membuat website sendiri secara gratis dan mudah.
HTML, atau Hypertext Markup Language, adalah salah satu bahasa pemrograman paling dasar yang digunakan untuk membuat website. Bahkan jika kamu adalah pemula, akan menjadi sangat mudah untuk belajar dan mempraktikkannya.
Sebelum memulai, pastikan kamu memiliki:
Langkah 1: Mengatur Dokumen HTML
Buka editor teks, buat file baru, dan simpan dengan ekstensi .html. Misalnya, “index.html”. Di dalam file ini, kita akan membuat kerangka dasar:
Menghias Website dengan CSS
Setelah kamu berhasil membuat struktur dasar dan mengisi konten, kini saatnya memberikan sedikit sentuhan pada tampilan website menggunakan CSS. CSS akan membuat website terlihat lebih menarik dan mudah dinavigasi. Contoh CSS sederhana untuk mengatur font dan warna latar belakang adalah sebagai berikut:
font-family: Arial, sans-serif;
background-color: #f4f4f4;
list-style-type: none;
text-decoration: none;
background-color: #333;
Dengan menambahkan CSS ini di dalam tag , tampilan website kamu akan lebih rapi dan profesional.
Langkah 3: Menyimpan dan Membuka Halaman Web
Setelah kamu menambahkan sejumlah konten, simpan file dan buka dengan browser web. Kamu sekarang harus melihat konten yang kamu buat tadi.
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:
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 ++.
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.
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:
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:
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:
Hello,
I’M IndonesianWriter.com
A ONE STOP CONTENT MARKETING SOLUTION FOR YOUR BUSINESS’ GROWTH
Ready to get your content enhance with IndonesianWriter?
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%); }
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:
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.