Panduan Belajar HTML Lengkap Khusus Pemula

All right guys welcome back to my blog kali ini gua akan memberikan tutorial cara mempelajari bahasa pemograman HTML dengan lengkap. Khususnya para pemula wajib baca dan simak baik-baik artikel ini. Sebenarnya mempelajari HTML itu tidaklah sulit asalkan kita ada niat untuk belajar. Kalau sudah ada niat, 100% pasti kalian bisa menguasai bahasa pemograman ini. 

Terus kita mulai dari mana?

Pertama.....

Menyiapkan peralatan terlebih dahulu

Setiap belajar pasti menggunakan alatnya dan fungsinya. Terutama dalam mempelajari HTML kalian harus memiliki peralatan software teks editor. Teks editor ini bisa ditulis apa saja yang di inginkan terutama dalam hal coding. Terus softwarenya apa sih?


Sublime text 3 adalah salah satu peralatan teks editor. Di Sublime text 3 terdapat banyak bahasa, dan alat ini bisa mendeteksi kata otomatis. Buat yang mau menggunakan alat teks editor ini silahkan download secara gratis di sublimetext.com. Ukurannya kurang lebih 10mb saja. Tinggal di instal seperti biasa dan bisa dijalankan lewat desktop atau lokasi file yang saat di install.

Mempelajari Struktur HTML

Didalam dunia website, bahasa yang sering kita lihat adalah HTML, CSS, dan JavaScript. Apa sih perbedaannya dari ketiga tersebut?
  • HTML ibaratkan fondasi rumah (tembok) yang bisa membuat ruang tamu, teras, garasi, dapur, dan kamar mandi
  • CSS ibaratkan desain dari rumah tersebut, bisa di warnain, di hias, dan lain-lain
  • JavaScript ibaratkan fitur-fitur yang ada dirumah tersebut, seperti barang-barang perabotan rumah tangga.
Jadi kita hanya fokus ke HTML nya saja, nanti CSS dan JavaScript akan di bahas terpisah.


Cara menggunakan Sublime Text 3 dengan cara mengubah deteksi bahasa yaitu caranya klik ujung kanan bawah yang terdapat Plain Text. Silahkan ganti dengan bahasa HTML.

Element TAG HTML 

Setelah melihat struktur HTML diatas, kita harus mempelajari element HTML. Kata pembuka harus di akhiri kata penutup seperti dibawah ini.
  • <head>...........isi kepala..........</head>
  • <body>...........isi badan...........</body>
Kalau kita lihat ternyata perbedaan kata pembuka dan penutup adalah (/) sedangkan < > masih digunakan keduanya.


Element TAG HTML Atribut

Untuk membuat judul atau bisa dibilang heading bisa kalian ketik seperti dibawah ini, dan juga kalian bisa membuat sub judul (sub itu seperti anak buah)
Contoh:
  • <h1>Judul Postingan</h1>
  • <h2>Judul Postingan</h2>
  • <h3>Judul Postingan</h3>
  • <h4>Judul Postingan</h4>
  • <h5>Judul Postingan</h5>

Kita coba apa yang terjadi ketika membuat element tag seperti diatas.

Klik kanan dan buka dengan browser dan hasilnya ada dibawah ini. Oh iya guys, sebelum dibuka dengan browser pastikan save terlebih dahulu dengan cara klik File > Save > lalu save dengan file html seperti ini (nyobahtml.html) Atau lebih cepat (CTRL+S)


Atribut HTML

Oke, sekarang kita akan beralih ke bagian atribut HTML atau bisa dibilang isi kepala dan isi badannya. Contohnya kita akan membuat label atau menu dibagian atas seperti ini.
Ada beberapa contoh saat membuat label, kategori atau menu:
  • Menggunakan <li><a biasanya digunakan untuk membuat menu
  • (title=) Saat kursor mouse digerakkan ke tulisan yang dituju maka akan muncul sebuah tulisan kecil.
  • expr:href='data:blog.homepageUrl biasanya dibuat tombol menu menuju beranda
  • (href='link') biasanya dibuat menuju link yang di inginkan contohnya membuat kategori masak-masakkan maka akan menjadi (href='https://www.raynold.net/label/masak-masakkan')
  • target="_blank" biasanya digunakan untuk menuju link dengan cara buka tab baru. Jika tidak digunakan maka tidak akan membuka tab baru.
  • <p> / </p> untuk membuat teks tulisan kecil
  • ><i class= cenderung membuat icon, misalkan linknya menuju beranda maka kita bisa membuat menu home terdapat icon rumah. Contohnya <li><a expr:href='data:blog.homepageUrl' ><i class='kode-icon' /> Beranda</a></li> Untuk penulisan kata beranda agak di spasi sedikit karena untuk posisi icon. Untuk mendapatkan kode icon, biasanya diawali fa fa-home ini bisa didapatkan pencarian google sangat banyak.

Yuk kita coba membuat website, label menu atau kategori yang biasanya kalian lihat.

Step 1 / Langkah pertama
  1. Ketik <!DOCTYPE html> artinya merupakan deklarasi dari type dokumen
Step 2 / Langkah kedua
  1. Ketik <html>
  2. Ketik <head>
  3. Ketik <meta charset="utf-8"> artinya yang dirancang untuk mengizinkan teks dan simbol dari semua sistem tulisan di dunia untuk ditampilkan dan dimanipulasi secara konsisten oleh komputer 
Step 3 / Langkah ketiga
  1. Ketik <title>Judul Website Akan Tampil di Tab Browser</title>
  2. Ketik </head> untuk ditutup bagian head nya.
Step 4 / Langkah ke empat
  1. Ketik <body>
  2. Buat judul blog seperti ini <h1>Websiteku dotcom</h1>
  3. Untuk membuat label harus di awali <nav> dan <ul> atau bisa dibilang navigasi. Seperti kode html saat membuat menu navigasi dibawah ini
<nav>
<ul>
<li><a href="https://www.raynold.net/p/privacy-policy.html">Privacy Policy</a></li>
<li><a href="https://www.raynold.net/p/kontak.html">Hubungi Kami</a></li>
<li><a href="https://www.raynold.net/p/disclaimer.html">Disclaimer</a></li>
</ul>
</nav>

Step 5 / Langkah ke lima

  1. Buat judul artikel/halaman <h1>Cara Buat Website</h1>
  2. Jika membutuhkan gambar, ketik <img alt="Nama Gambar" src="link-gambar.jpg" height="150" /> . Jika membutuhkan gambar dibawah judul halaman silahkan tambahkan kode di atas jika perlu.
  3. Tambahkan isi artikel <p>terserah mau bahas apa saja</p>
Step 6 / Langkah ke enam
  1. Membuat tabel dengan cara ketik <!-- Buat Tabel --> dibawahnya ketik <table border="1"> dibawahnya ketik <tr>
<!-- Buat Tabel-->
<table border="1">
<tr>
<td>Pemula</td>
<td>Udah Jago</td>
<td>Lumayan Jago</td>
<td>Master HTML</td
</tr>
<tr>
<td>Raynold pemula</td>
<td>Raynold udah jago</td>
<td>Raynold lumayan</td>
<td>Master raynold</td>
</tr>
</table>
</body>
</html>

Hasil Keseluruhan dari tampilan Sublime text 3 akan menjadi seperti ini 

Sekarang kita coba lihat menggunakan browser menjadi seperti ini:




Post a Comment

0 Comments