HTML adalah singkatan dari HypertText Markup Languange yaitu sebuah bahasa markup yang dirancang untuk ditampilkan di browser internet. HTML bukan sebuah bahasa pemrograman seperti PHP, CSS dan lainnya. Yang berarti HTML tidak memiliki kemampuan untuk membuat fungsi yang dinamis. Namun untuk membuat sebuah website, HTML ini juga diperlukan untuk melakukan berbagai fungsi. Pada pembahasan ini kita akan membuat website sederhana dengan HTML.
Untuk membuat website dengan HTML kita memerlukan software tambahan yang akan kita download seperti Notepad++, Atom, Sublime ataupun brackets.
Ditutorial ini saya akan menggunakan Notepad++. Karena selain gratis, software ini juga ringan untuk digunakan dan sangat recommended untuk pemula yang ingin belajar HTML. Kalian bisa mendownload Notepad++ pada link dibawah ini:
Download Notepad++
Setelah download, install software seperti biasa.
Jika sudah di install, mari kita masuk ke pembahasan membuat website dengan HTML.
3. <p>, yaitu tags yang membuat kata kalimat selanjutnya menjadi sebuah paragraf baru.
Kalau sampai sini sudah mengerti, kalian bisa menjalankan aplikasi dengan mengklik kanan file latihan yang kalian buat dan pilih open with/buka dengan, pilihlah browser favorit kalian. Kalian juga bisa menggunakan shortcut ataupun menu run/jalankan diatas software notepad++ kalian. Jika kalian berhasil maka akan tampil halaman website kalian seperti dibawah:
Untuk membuat website dengan HTML kita memerlukan software tambahan yang akan kita download seperti Notepad++, Atom, Sublime ataupun brackets.
Ditutorial ini saya akan menggunakan Notepad++. Karena selain gratis, software ini juga ringan untuk digunakan dan sangat recommended untuk pemula yang ingin belajar HTML. Kalian bisa mendownload Notepad++ pada link dibawah ini:
Download Notepad++
Setelah download, install software seperti biasa.
Jika sudah di install, mari kita masuk ke pembahasan membuat website dengan HTML.
- Pertama, bukalah Notepad++ yang baru saja kalian install.
- Buat file baru dan simpan sebagai/save as, untuk melakukan save as kalian perlu mengklik tulisan berkas pojok kiri atas pada Notepad++ kalian. Nanti akan ada pilihan simpan sebagai/save as.
- Akan muncul menu seperti pada gambar di bawah ini:
- Pada menu yang di garis bawahi, kalian bisa ubah dan ganti menjadi Hypertext Markup Languange File, setelah itu save file.
Untuk mengoprasikan HTML kita memerlukan sebuah TAGS, yaitu tags pembuka dan tags penutup.
Salah satu contoh tags pembuka pada html adalah:
<html>
</html>
</html>
Contoh diatas adalah tags yang digunakan untuk pembuka baris html. Selain tags tersebut, ada tags lainnya seperti
Seperti kalian lihat, ada beberapa tags tambahan pada "codingan" diatas.
- <head></head>, yaitu untuk menyimpan informasi website seperti judul maupun charset sebuah halaman
- <body></body>, yaitu untuk menyimpan semua konten website yang akan dibuat pada sebuah halaman.
Berikut ini adalah contoh struktur HTML yang sering digunakan:
<html>
<head>
<title>ini judul</title>
</head>
<body>
<h1>ini heading judul kalian</h1>
<p>ini adalah halaman website kalian</p>
</body>
</html>
<head>
<title>ini judul</title>
</head>
<body>
<h1>ini heading judul kalian</h1>
<p>ini adalah halaman website kalian</p>
</body>
</html>
Seperti kalian lihat, ada beberapa tags tambahan pada "codingan" diatas.
- <title></title>, yaitu sederhananya adalah untuk membuat sebuah tulisan menjadi judul website. Biasanya tags title ini digunakan diantara tags <header></header>.
- <h1></h1>, yaitu sebuah tags heading yang biasanya digunakan untuk membuat nama atau judul utama website yang kita buat. Selain <h1>, ada juga <h2>,<h3>,<h4>, dan seterusnya. Lalu apa yang membedakan dari setiap tags H tersebut? perbedaanya adalah ukuran yang ditampilkan, semakin besar angka setelah huruf h, semakin kecil juga kalimat atau kata yang ditampilkan. Agar tidak bingung silahkan kalian lihat contoh gambar dibawah:
Kalau sampai sini sudah mengerti, kalian bisa menjalankan aplikasi dengan mengklik kanan file latihan yang kalian buat dan pilih open with/buka dengan, pilihlah browser favorit kalian. Kalian juga bisa menggunakan shortcut ataupun menu run/jalankan diatas software notepad++ kalian. Jika kalian berhasil maka akan tampil halaman website kalian seperti dibawah:
Nah, sampai saat ini kalian sudah membuat website "sangat" sederhana. Untuk latihan berikutnya kita akan mempelajari beberapa tags baru yang sangat bermanfaat dalam pembuatan website seperti pembuatan table, form, dan lainnya.
Sampai bertemu lagi di latihan berikutnya :)