Pengenalan - Dasar Dasar Tag HTML
📅 2024-11-23, 💻 Dzapena
🏷️ Course
Salam bloger, selamat datang. Jika kamu membuka postingan ini, berati kamu adalah orang yang tertarik dengan dunia web developer atau mungkin kamu adalah orang yang sudah lama di dunia perkodingan namun baru kali ini kamu mau mencoba untuk membuat website pertama kamu. Semoga tutorial saya ini bisa membantu kamu melangkah ke dunia developer website.
Dalam tutorial ini kita akan benar benar belajar hal paling mendasar agar kita bisa dengan lebih mudah belajar tahap demi tahapnya. Perlu kalian ketahui juga belajar membuat website pada dasarnya cukup mudah kok, jika website yang kita buat hanya website Statis atau berupa website tampilan saja, tanpa fungsi CRUD (Create, Read, Update, Delete), kita akan bahas ini dalam sesi berkenaan dengan MySQL atau Database nanti.
Persiapan Bahan
Baiklah tidak ada basa basi lagi, jadi di tutorial ini saya akan memberitahu pada kalian bagaimana cara membuat website pertama anda yang akan kita mulai dengan mengenal tag tag dasar HTML terlebih dahulu. Dan sebelum kita memulainya mari kita siapkan bahan bahan yang kita perlukan terlebih dahulu. Berikut bahan bahan / software yang perlu kalian siapkan.
- Teks Editor. Seperti namanya, ini adalah software untuk kita menulis/membuat kode kode html yang nantinya akan kita jadikan website. Sebagai rekomendasi, ada 2 software yang bisa kalian gunakan, yang pertama adalah Visual Studio Code dan Yang Kedua adalah Sublime Text. Kalian bebas menggunakan yang mana. Karena dua duanya sama bagus. Kalian bisa download melalui link berikut.
- Server Apache Localhost. Software ini akan kita gunakan untuk membuat server/hosting offline supaya kita bisa menyimpan file kita disana dan membuka kode html kita disana. Untuk pengguna komputer/laptop biasanya kita menggunakan XAMPP dan untuk android saya biasa menggunakan KsWeb, perlu di garis bawahi untuk yang android ini berbayar. Namun kalian tidak akan menyesal membelinya karena sudah ada dukungan MySQL dan fitur lain didalamnya. Atau kalian bisa pakai versi gratisnya juga namun hanya mendukung localhost saja. Kalian bisa unduh dan install dibawah ini.
+ Visual Studio Code - Download
+ Sublime Text - Download (Berbayar)
Untuk yang ingin menggunakan android kalian bisa gunakan Editor Code yang ada di Play Store Berikut
+ Code Editor - Download
Note : Sebagai catatan, saya menggunakan Sublime Text dalam tutorial ini.
PC/Laptop
+ XAMPP - Download
Android
+ KsWeb - Download (Berbayar)
+ AWebServer - Download (Gratis)
Note : Saya menggunakan XAMPP dalam tutorial.
Tutorial Membuat Web Sederhana
Jika sudah mengunduh dan menginstall bahan bahan diatas mari kita mulai tutorial pembuatannya. Kalian bisa lihat tutorial di youtube jika mengalami masalah dalam instalasi bahan bahannya untuk menjaga agar postingan ini tidak terlalu panjang dan berkeliling.
Mari kita mulai dengan membuka XAMPP nya, atau KSweb nya lalu jalankan Server Apache nya dengan menekan "Start" dan klik pada tombol "Admin" yang tertera disana. Kamu akan dibawa ke browser untuk membuka beranda XAMPP, disni kalian bisa abaikan saja. Jika sudah silahkan buka file explorer kalian dan buka folder htdoc yang ada di tempat instalasi XAMPP kalian. Dikomputer biasanya ada di drive C didalam foler "XAMPP/htdoc". Pada awalnya disana akan ada banyak folder tapi abaikan saja.
Jika sudah dibuka silahkan kalian buat folder dengan nama bebas, didalam folder htdoc itu. Sebagai contoh saya akan membuat folder dengan nama "dzawebsite". Jika sudah silahkan buka sublime text nya dan drag folder nya kedalam sublime text nya. Dan jika sudah silahkan klik kanan di foldernya dan pilih "New File" Beri nama index.html.
Jika sudah silahkan kalian buka file nya dengan cara double klik pada file index.html nya. Lalu kita akan mulai membuat kodingannya sekarang. Kalian bisa ikuti saja kodingan dibawah ini, kalian bisa dengan mudah membuatnya dengan mengetik "<html" dan tekan enter maka akan otomatis membuat kode html pembuka seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Biar saya jelaskan dulu, Tag <html> Code </html> akan menandakan bahwa yang ada didalam tag ini adalah format HTML. Lalu tag <head> Code </head> adalah tag yang berfungsi untuk menyimpan code code berupa meta tag yang isinya berisi nama website yang akan tertera di tab browser, deskripsi dari websitnya sampai pemanggilan source seperti CSS, Javascript dll. Untuk sekaranga abaikan dulu, jangan dibawa ribet, nanti kita bahas khusus tentang itu.
Tag berikutnya disana ada <title> Nama Website </tile> ini adalah tag untuk menamai website kita yang nantinya akan muncul juga pada tab dibagian atas browser kalian. dan terakhir ada tag <body> Code </body> ini adalah tag yang membungkus semua kode-kode/tag-tag yang akan tampil di halaman website kita. Disinilah kita akan fokus.
Mari kita mulai mengisi dan membuat sebuah konten untuk dapat diisi kedalam webiste kita, kalian bisa lihat dulu contoh berikut
<!DOCTYPE html>
<html>
<head>
<title>Dza Website</title>
</head>
<body>
<h1> Dza Website <h1>
<h3>ini hanya website perocobaan<h3>
<p>Hello world, ini adalah website pertama
saya, terima kasih sudah
berkunjung<p>
</body>
</html>
Oke, mari kita jalankan kode nya. Kalian bisa tekan ctrl+s untuk save kodenya. Lalu kembali ke browser yang sedang membuka beranda XAMPP, mari kita masukan di address bar "localhost/NamaFolderWebsiteKita" dalam kasus saya berarti saya masukan "localhost/dzawebsite". Jika sudah silahkan tekan enter dan Shazam! web kita ada disana. Walau baru tulisan saja, tapi ini merupakan langkah awal yang bagus. Oke sebelum saya tutup, saya jelaskan 2 tag baru yang ada di kode baru tadi.
Pada dasarnya tag <h1> dan <h3> adalah satu tag yang sama yang berfungsi untuk membuat sebuah judul. Semakin kecil angka nya maka semakin besar ukuran font dari judulnya. Tag ini bisa digunakan untuk judul website kita, judul postingan, deskripsi website, sub judul dan sebagainya. Tag ini punya tingakatan mulai dari <h1> sampai <h6>. Dengan aturan yang sudah saya jelaskan diatas. Dan terakhir tag <p> digunakan untuk membuat sebuah paragraf.
Oke teman teman, itu saja materi untuk postingan pertama ini, kalian bisa lihat post list jalur pembelajarannya dibawah postingan ini agar kalian bisa mempelajari cara membuat website dengan bertahap agar bisa lebih cepat faham. Kita bertemu di postingan selanjutnya.
Keep Closer, and Keep Stay, Bye..
