Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Belajar HTML 5 Dasar Lengkap Khusus Pemula

Belajar HTML 5 Dasar Lengkap Khusus Pemula

Pengertian HTML

Sebelum memulai pembahasan penggunaannya alangkah baiknya terlebih dahulu mengetahui apa itu HTML. HTML merupakan singkatan dari Hypertext Markup Languange merupakan bahasa markup yang hanya berisi tag tag HTML ini yang akan saya bahas, dan HTML juga merupakan bagian struktur dasar dalam membuat suatu website.

Sejarah Singkat Perkembangan HTML

HTML diciptakan oleh  seorang ilmuwan asal Inggris bernamaTim Barnes Lee pada tahun 1989, pada saat itu beliau masih bekerja di CERN. CERN merupakan sebuah perusahaan yang berhubungan dengan teknologi internet.

Baca Juga :  Tips Jago Ngoding

Struktur Dasar HTML

Pada bagian ini saya akan menjelaskan tag tag yang  ada di dalam HTML, tapi terlebih dahulu mengetahui apa itu tag. Tag merupakan komponen penting dalam pembuatan website dengan menggunakan tanda kurung siku, dalam penggunaan tag  harus berpasangan terdiri dari tag pembuka dan penutup seperti berikut < >aaaaa< / > pada bagian penutup harus menggunakan garis miring. Dalam penulisan tag  harus di dalam elemen <body>,  HTML saat ini ketika blog ini dibuat   masih versi 5.  Berikut contoh penulisan strkuktur dasar HTML.

1. Tag Paragraf

Tag ini berfungsi untuk membuat paragraf dalam website, cara penggunaanya dengan menggunakan tag pembuka <p>  dan tag penutup </p>, berikut contoh penggunaanya:

    index.html

2. Tag Heading

Tag ini berfungsi untuk membuat judul pada website, cara penggunaanya dengan menggunakan tag pembuka <h1>  dan tag penutup </h1>. Penggunaan tag heading sampai  <h6>, semakin besar  headingnya maka semakin kecil pula judulnya, berikut contoh penggunaanya:

    index.html

3. Tag Hyperlink

Tag ini berfungsi untuk menghubungkan  halaman satu ke halaman lainnya, cara penggunaanya dengan tag <a> diikuti atributnya yaitu href berfungsi pada lokasi yang ingin dituju.

 Berikut contoh penggunaanya:

    index.html


Perhatikan contoh diatas ketika link tersebut di klik maka akan berpindah ke halaman 2, berikut tampilan dari halaman 2

     halaman2.html


4. Tag List

Tag ini berfungsi untuk membuat daftar list contoh nya, misal kita ingin membuat daftar nama-nama makanan seperti nasi goreng, mie goreng, bakso dll itu semua akan menggunakan tag list. Tag ini terbagi 2 yaitu Ordered List dan  Unordered List, berikut kedua penjelasannya:
  •  Ordered List
Ordered List merupakan list berurut , tag ini mengurutkan angka dan huruf bahkan angka romawi , berikut contoh penggunaanya:


Contoh diatas merupakan list berurut dengan angka, lalu bagaiman dengan huruf ? seperti yang saya bilang diawal tadi ordered list bisa mengurutkan huruf dengan menambahkan atribut pada tag nya berikut contoh penggunaanya:


Berikut Atribut dalam tag  Ordered List
  1. type="a" 
  2. type="A" 
  3. type="i" 
  4. type="I" 

Silahkan mencoba atribut diatas semua untuk mengetahuinya, saya hanya mencotohkan sebagian saja pada penggunaan Ordered List.

  • Unordered List

Tag ini merupakan kebalikan dari ordered list, yaitu list tidak berurut, cara penggunaanya dengan tag <ul> seperti contoh dibawah berikut:


Sama seperti ordered list, tag unordered list juga mempunyai  3 atribut  berikut penjelasannya:
  1. type="disc"         : bulat hitam
  2. type="circle"      : lingkaran bulat
  3. type="circle"      : kotak hitam
Seperti biasa silahkan mencoba atribut diatas semua untuk mengetahuinya.

5. Tag Image

Tag ini berfungsi sebagai menampilkan gambar pada website, penggunannya dengan tag <img> diikuti dengan atributnya yaitu src="...." merupakan singkatan dari source berfungsi sebagai alamat gambar tersebut ketika ingin menampilkannya, seperti contoh berikut:

6. Tag Table

Sesuai dengan namanya tag ini berfungsi untuk membuat table, tag ini terdiri beberapa elemen seperti <table>,  <tr>,  <td>. itu semua harus kalian pahami dalam membuat sebuah tabel pada website. Saya akan menjelaskan tag <tr> merupakan singkatan table row dan <td> singkatan dari table data, untuk memahaminya perhatikan contoh dibawah berikut:

Contoh diatas saya membuat 3 baris dan 3 kolom, bisa disimpulkan tag <tr> untuk baris dan tag <td> untuk kolom. Semoga bisa dipahami.

Baca Juga :  Belajar PHP Dasar Lengkap Khusus Pemula

6. Tag Form

Tag ini berfungsi untuk menerima inputan, ketika anda ingin menjadi seorang backend developer ini wajib kalian pahami ataupun kuasai, tag form memiliki beberapa jenis type seperti text box, radio button, checkbox, password dll. Itu semua akan saya jelaskan pada bagian ini.

Berikut syntax dasar form

  <form>
    <!-- isi form -->
  </form>

  • Type Text 

Type ini berfungsi sebagai  menerima inputan berupa text saja, misal kita ingin membuat isi form seperti nama, nim, jurusan, fakultas dll. contoh tersebut harus menggunakan type text. Seperti contoh dibawah berikut:

  • Type Checkbox

Type ini memiliki bentuk kotak persegi, sebagai contoh ketika kita ingin membuat form yang memiliki pilihan lebih dari satu, untuk lebih memahaminya perhatikan contoh dibawah berikut:

  • Type Radio 

Type ini hampir sama dengan checkbox tapi memiliki perbedaan pada bagian bentuk dan fungsi, type radio memiliki bentuk bulat dan penggunaanya hanya bisa memilih 1 pilihan saja dari beberapa pilihan yang tersedia, seperti contoh dibawah berikut:

Perhatikan contoh diatas saya menambahkan dua atribut yaitu name dan valuenya, untuk mengenai atribut pada HTML akan saya bahas pada bagian terpisah, disini saya hanya menjelaskan penggunaan HTML dasar, jadi saat ini ikuti saja terlebih dahulu.

  • Type Password

Type yang dikhususkan untuk inputan password saja, dengan input type ini password yang diinputkan pada form tidak bisa lihat secara asli. Seperti yang diketahui password merupakan data yang sangat sensitif jadi type ini sangat berguna untuk digunakan, berikut contoh penggunaanya:

  • Type Textarea

Type text ini hampir sama dengan type text, yang membedakannya adalah textarea berguna ketika mempunyai data yang sangat panjang seperti memasukkan alamat pribadi dalam 1 tempat contohnya seperti Prov.Riau, Kab.Rokan Hilir, Kec. Kubu Babussalam, Desa Rantau Panjang Kiri, JL Sudriman. Untuk memasukkan informasi itu semua wajib menggunakan type textarea bukan text, dan contoh lainnya type ini berguna ketika membuat masukkan atau komentar , berikut contoh penggunaanya:

  • Type Select

Type text ini hampir sama dengan checkbox hanya bisa memilih 1 pilihan saja tapi yang membedakannya adalah bentuk tampilannya adalah memanjang kebawah, agar lebih mudah memahaminya perhatikan contoh  dibawah berikut:

  • Type Submit

Type yang terakhir adalah submit berfungsi sebagai tombol(button) ketika sudah selesai semua mengisi isian  from, maka type submit lah yang perlu dilaksanakan, sebagai studi kasus saya akan menampilkan contoh contoh type yang tepeljari dibuat menjadi sebuah form yang utuh seperti contoh berikut:

  • Type File

Input type file berfungsi untuk mengupload beberapa bentuk dan jenis file seperti Pdf, World, png, jpeg, jpg, gambar/foto dll. Seperti contoh berikut:

6. Tag <bold>, <strong>,

<em> dan <italic>

Saya akan menjelaskan fungsi  keempat tag tersebut, tag bold dan strong untuk membuat tulisan menjadi tebal, sedangkan tag em dan italic membuat tulisan menjadi miring fungsi ini hampir sama dengan word, berikut contoh keempat penggunaanya:

7. Tag <u> dan <s>

 Tag <u> berfungsi sebagai garis bawah atau underline, sedangka tag<s> sebagai garis coret atau strikethrough, berikut kedua contoh penggunaanya:


8. Tag <br> dan <hr>

Fungsi tag <br>  adalah untuk membuat garis baru  sedangkan tag <hr> untuk membuat garis panjang sebagai pemisah konten, berikut kedua contoh penggunaan:

Mungkin itu saja yang hanya bisa saya sampaikan pada pembahasan HTML ini, yang saya jelaskan ini hanyalah awalnya saja masih banyak  yang harus dipelajari. Pada pembahasan selanjutnya saya akan membahas atribut atribut pada HTML.


Baca Juga : Tutorial CSS Lengkap Pemula