-->

Belajar Kode-kode HTML Dasar Untuk Pemula


HTML atau "Hyper Text Markup Language" adalah sebuah bahasa formating yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website ( Web Programming ), HTML menjadi pondasi dasar pada halaman website. Sebuah file HTML disimpan dengan ekstensi .html (dot html), dan dapat di eksekusi atau diakses menggunakan web browser ( Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain ).



Seperti yang sudah dijelaskan.HTML adalah dasar dari sebuah website, untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuann CSS, JavaScript dan PHP.  Untuk membuat sebuah website yang dinamis. Ketika halaman website dibuat hanya dengan menggunakan HTML saja, maka halaman web tersebut di sebut halaman statis karena tidak memiliki fungsi-fungsi yang dapat mengelola sebuah website, tentu developer akan sangat disibukkan karena harus mengubah lagi file HTML setiap ingin mengupdate artikel.

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsinya masing-masing. Contohnya tag heading, tag paragraf, tag untuk membuat form, tag tombol, tag list, tag untuk membuat hyperlink atau link yang menghubungkan antar halaman website dan masih banyak lagi yang lainnya.

Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan dengan HTML adalah sebagai berikut :
  • Membungkus element-element tertentu sesuai kebutuhan. 
  • Membuat heading atau format judul. 
  • Membuat Tabel. 
  • Membuat List. 
  • Membuat Paragraf. 
  • Membuat Form. 
  • Membuat Tombol. 
  • Membuat huruf tebal. 
  • Membuat huruf miring. 
  • Menampilkan gambar. 
  • Menampilkan video. 

Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar dari pembuatan sebuah website. Untuk mengeksekusi atau menjalankan file html harus menggunakan web browser dan file html di simpan dengan ekstensi .html (dot html).


Tag HTML

Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text HTML yang ditulis. HTML memerlukan cara untuk memperkenalkan teks yang ditulis didalamnya kepada web browser. baik teks itu berupa list, paragraf, link dan sebagainya, disinilah di gunakan tag. Dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang di maksudkan berada diantara pembuka dan penutup tag. Berikut penulisan tag yang digunakan dalam HTML.

<tag> Objek yang diisi </tag>

Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag penutup diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut (</>). Jenis tag yang sering digunakan dalam html, berikut beberapa jenis tag yang akan sering anda jumpai ketika belajar web programing :

Tag
Fungsi
<!– ...–>  
Digunakan untuk memberi sebuah komentar atau keterangan
<!DOCTYPE html>                                 
Digunakan untuk Mendefinisikan tipe document HTML5
<a>link</a>
Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain (membuat link)
<html>  </html>
Baris paling atas dari setiap file HTML
<head></head>
Informasi umum dari sebuah halaman web
<title></title>
Judul halaman. Terdapat pada head
<body></body>
Settingan atribut untuk seluruh dokumen
<blockquote></blockquote>
Digunakan untuk mengatur text dan gambar dalam suatu tag
<ol></ol>
Ordered List (digunakan dengan <li>)
<ul></ul>
Unordered List (digunakan dengan <li>)
<li></li>
Elemen List
<dd></dd>
Definition List
<dt>
Definition Term
<dd>
Definition Description
<p></p>
Mendefinisikan Paragraf
<br>
Perintah membuat baris baru, seperti Enter
<hr>
Membuat garis horizontal
<center></center>
Untuk menengahkan elemen seperti Teks atau Gambar


Modifikasi Teks
Tag
Keterangan
<b></b>
Mendefinisikan teks tebal
<i> </i>
Mendefinisikan teks miring
<u> </u>
Mendefinisikan Teks garis bawah
<h1></h1>
Mendefinisikan Header 1
<h2></h2>
Mendefinisikan Header 2
<h3> </h3>
Mendefinisikan Header 3 dst.
<sub></sub>
Mendefinisikan Subscript
<sup></sup>
Mendefinisikan Superscript

Font
Tag
Atribut
Keterangan
<font></font>
Color, size, name
Mengubah gaya suatu huruf

Link
Tag
Atribut
Keterangan
<a></a>
Href, target, style, class, name, id
Membuat link ke dokumen atau situs lainnya

Gambar
Tag
Atribut
Keterangan
<img></img>
Src, alt, name, border, height, width
Menampilkan sebuah gambar

Tabel
Tag
Atribut
Keterangan
<table></table>                                                       
Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign
Mengatur semua elemen table
<tr></tr>
Height, bgcolor, background, align, valign, titleMembuat baris baru
<td></td>
Height, width, bgcolor, background, align, valign, title, colspan, rowspanMembuat kolom
<th></th>
Height, width, bgcolor, background, align, valign, title, colspan, rowspanHeader(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>
Height, width, align, valign, bgcolor, backgroundFormat yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>
Height, width, align, valign, bgcolor, background, colspanFormat yang berlaku bagi kolom

Form

Tag
Atribut
Keterangan
<form></form>                                     
Method, action, name, enctype
Mengatur elemen dari form
<input type=>
Text, password, hidden, radio, checkbox, submit, image, resetVariasi dari tipe elemen input dalam form
<select></select>
Name, sizeMembuat combo-box. Digunakan bersama dengan option
<option>
Selected, name, value

<textarea><textarea>                                 
Name, rows, cols, wrapMembuat Text Area untuk input text dengan length yang lebih besar dari input text.



Element HTML

Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi
yang ada diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :

<!DOCTYPE html>
<html>
<head>
             <title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>

Kode <h2> sampai </h2>  adalah element h2 dan teks yang berada didalamnya atau yang diapit oleh kode <h2> sampai </h2> adalah heading dua, didalam element heading dua bisa diisi dengan text ataupun tag lain misalnya <link> dan sebagainya.

Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll. Atribut biasanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis dengan ( name=”value” ). penulisan nilai/value diapit oleh dua tanda kutip ( bisa digunakan kutip satu atau kutip dua ). Didalam pembuatan atribut  HTML selalu diawali dengan penulisan tag, berikut contoh penulisan atribut pada HTML :

<!DOCTYPE html>
<html>
<head>
             <title></title>
</head>
<body>
              <h2 alignt="center">Pengenalalan atribut HTML</h2>
</body>
</html>


Perhatikan pada syntax di atas :

  • <h2> adalah tag heading 2 
  • alignt adalah nama dari atribut
  • center adalah nilai/value dari atribut
  • “Pengenalan atribut HTML” adalah element dari tag h2
Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang bergelut di web programing akan sering menjumpai tag yang didalamnya terdapat atribut.

Untuk tutorial kali ini saya cukupkan sekian dulu, pelajaran selanjutnya adalah "Belajar Kode Heading dalam HTML Dasar"



Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
Kami menerima masukan dari anda jika memang ada pembahasan yang keliru.
kami sangat senang jika anda dapat berkontribusi untuk menyempurnakan postingan kami.
EmoticonEmoticon