Belajar HTML Untuk Pemula

1.Pengenalan HTML

HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa pemrograman tingkat tinggi. Bahkan cukup tinggi sehingga mudah dipelajari oleh mereka yang awam sekalipun. Apabila anda memakai aplikasi pengolah kata jaman dahulu seperti WordStar atau WS, maka anda akan sangat mudah memahami bahasa HTML ini.

2.Cara Membuat file HTML

Untuk membuat file HTML sangatlah mudah. Anda cukup menuliskan beberapa baris kata yang ingin anda tampilkan dan simpan filenya dengan ekstensi html.
 

 

3.HTML Pertamaku

Sekarang mari coba menuliskan kode HTML pertama kita. Masih ingat file html pertamax.html yang sudah kita buat di Pengenalan HTML sebelumnya? Edit file itu menggunakan Notepad. Saya sendiri menyarankan menggunakan Notepad++ sebuah software yang mirip notepad tapi dikhususkan untuk menulis kode-kode programming. Jika anda sempat, silahkan download notepad++ dulu. Tapi pakai notepad bawaan windows juga oke kok.
Sekarang coba ketik ini di notepad anda

.

 Buka File Pertamax.html anda,jalankan pada browser kesayangan anda.Ya,makan akan muncul tulisan "This is HTML!".Bagaimana Mudah bukan ?

4.Cara menambahkan tag pada text

Coba saja menggunakan tag diatas pada file pertamax.html anda.

5.Bagaimana Cara Memasukkan Gambar

Jika sebelumnya kita membahas bagaimana memformat text di HTML, maka sekarang kita akan coba ke teknik yang cukup sering kita pakai juga yaitu bagaimana memasukkan gambar ke dalam HTML
Ada 2 tahap untuk memasukkan gambar dalam HTML yaitu:

1. Menentukan lokasi gambar
2. Memasang kode gambar

Lokasi gambar adalah folder dimana gambar itu diletakkan berdasarkan letak file HTML yang mengaksesnya. Misalnya file html-nya ada di folder c:\website dan gambarnya ada di folder

c:\website\ dengan nama gambarku.jpg maka berarti lokasi file gambarnya adalah
c:\website\gambarku.jpg

dan nanti di kode HTML-nya kita tulis seperti ini:
images/gambarku.jpg
Kemudian untuk memunculkan gambar, kita letakkan kode ini di file HTML:

<img src="LOKASI GAMBAR" alt="TEXT ALTERNATIF" />

LOKASI GAMBAR = lokasi dimana gambar itu berada lengkap dengan nama gambarnya
TEXT ALTERNATIF = Text yang muncul jika gambar yang kita tampilkan tidak muncul

Jika mengacu pada contoh diatas, berarti kodenya akan seperti ini:

6.Cara Membuat Text Melingkar Pada Gambar

Bagaimana caranya?
Kita akan memasukkan style CSS ke dalam kode gambar sehingga bisa melakukan aneka macam modifikasi. Insya Allah nanti di bagian CSS kita akan pelajari semua lebih rinci. Karena artikel ini bertujuan untuk membuat text yang mengalir di sekeliling gambar, maka kita bahas bagian itu saja dulu ya.
Untuk menambah CSS di kode HTML, kita cukup menambahkan atribut style saja. Sehingga hasilnya seperti ini:

Perhatikan, ada tambahan style="float:right" pada atribut images-nya. Pada contoh diatas, saya buat gambar ada di sebelah kanan dan text mengalir di sebelah kirinya. Apabila ingin gambarnya di kiri dan text di kanan, maka kita cukup mengganti kata right dengan left.

7.Membuat Formulir Isian

Sekarang kita akan belajar bagaimana membuat formulir isian di HTML. Ada macam-macam modul input datanya dan insya Allah akan kita bahas semua. Kita mulai dengan membuat format sebuah formulir. Untuk membangun formulir, anda harus mengawali dan menutupnya dengan tag

. Contohnya seperti ini:

Tag form memiliki setidaknya 2 atribut. Pertama yaitu action yang menunjukkan file untuk memproses formulir. Biasanya sebuah file php. Insya Allah nanti kita bahas di bagian PHP juga. Jadi sementara kita kosongi dulu. Mengkosongi atribut action juga berarti mengirimkan data ke file yang sama. Dan karena file ini tidak ada fungsi untuk memproses data, maka ya tidak akan terjadi apa-apa. Atribut berikutnya adalah method. Ada 2 macam method yaitu POST dan GET.
Method POST dipakai untuk pengiriman data formulir yang cukup besar. Misalnya buku tamu, threat forum, input artikel baru atau apa ajalah. Method GET dipakai untuk pengiriman data yang sangat kecil. Misalnya form untuk search engine dimana yang dikirim hanya beberapa kata pencarian saja.
Nantinya, semua input data harus diletakkan diantara tag
<form action="" method="post"> dan </form>.
Jika anda meletakkan diluar tag tersebut, maka data itu tidak akan dikirimkan ke file pemroses

8.Membuat Form Input Data 

Keterangan :

1.Maksud dari <inpu type="text"> adalah kita akan menginput apapun dalam table tersebut tapi   berupa text

2.Maksud dari <inpu type="password"> adalah kita akan menginput apapun dalam table tersebut tapi berupa password (tersembunyi)

3.Maksud dari <inpu type="button"> adalah kita akan memunculkan sebuah tombol

4.Maksud dari <value"Submit:"> adalah kita akan memunculkan sebuah text pada tombol tersebut

4.<br> untuk membuat perintah yang ada di depannya akan turun kebawah.

Maka Akan Muncul Tampilan Berikut :

9.Membuat Tabel

Sekarang saatnya kita belajar bagaimana membuat table di HTML. Kita mulai dengan table yang sederhana dulu hingga menuju table yang lebih rumit dan ruwet nantinya. Sebelum saya teruskan, saya menyarankan untuk membuat table hanya untuk tabel. Jangan gunaka table sebagai layout web. Selain memberatkan, juga tidak efektif. Saya masih melihat banyak template-template web yang keren-keren menggunakan table. Ini tentunya sangat tidak sehat bagi kecepatan load web anda. So, gunakan table untuk tabel saja.
Ada 3 komponen utama dalam pembuatan tabel yaitu:
– Penanda table <table>
– Penanda baris <tr>
– Penanda kolom <td>

Dan inilah contoh sebuah table sederhana dengan 3 kolom dan 2 baris:

<table>
<tr>
  <td>Kolom 1 Baris 1</td>
  <td>Kolom 2 Baris 1</td>
  <td>Kolom 3 Baris 1</td>
</tr>
<tr>
  <td>Kolom 1 Baris 2</td>
  <td>Kolom 2 Baris 2</td>
  <td>Kolom 3 Baris 2</td>
</tr>
</table>

Hasilnya akan seperti ini:

Kolom 1 Baris 1	Kolom 2 Baris 1	Kolom 3 Baris 1
Kolom 1 Baris 2	Kolom 2 Baris 2	Kolom 3 Baris 2

Anda paham bagaimana cara membuatnya bukan? Untuk mempermudah membuat table, saya biasanya pakai rumus ini:
1. Saya tulis dulu tablenya seperti ini:

<table>
</table>

2. Saya masukkan barisnya. Misalnya kita mau bikin 2 baris, maka saya tinggal pasang 2 tag TR seperti ini:

<table>
<tr>
</tr>
<tr>
</tr>
</table>

3. Sekarang tinggal masukkan kolomnya aja di tiap baris seperti ini:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>

Baris kedua saya biarkan agar anda bisa fokus di baris pertama dulu. 4. Terakhir memasukkan isi kolomnya

<table>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
</tr>
<tr>
</tr>
</table>

10.Membuat Optional Data dari Banyak Data

Sesuai janji saya, di artikel ini saya akan jelaskan bagaimana membuat optional dengan banyak data. Pada artikel sebelumnya tentang membuat optional kita hanya bisa menggunakan sedikit data saja. Paling 3-4 data aja sudah tergolong banyak nantinya. Biasanya sih dua data yaitu jenis kelamin hehehe..
Nah, bagaimana kalau pilihannya ada banyak, misalnya propinsi atau nama negara gitu, maka kita memerlukan optional dalam bentuk drop down. HTML menyediakan tag untuk menampilkan optional dalam bentuk dropdown dengan format seperti ini:

<select name="NAMA_FIELD">
  <option value="VALUE-1">LABEL-1</option>
  <option value="VALUE-2">LABEL-2</option>
  <option value="VALUE-3">LABEL-3</option>
  <option value="VALUE-4">LABEL-4</option>
  ......
</select>

Kita menggunakan tag select untuk membuat dropdown option. Dan untuk menampilkan opsi-opsinya, kita menggunakan tag option. NAMA_FIELD sebagaimana telah dijelaskan dalam membuat input data, berguna untuk mengidentifikasi nama data yang dikirimkan.
VALUE-1 sampai VALUE-4 dan seterusnya kita pakai untuk memberi isi datanya jika pengguna memilih label tersebut. Misalnya pengguna memilih LABEL-4, maka data yang dikirimkan adalah VALUE-4. VALUE dan LABEL bisa dibuat sama atau berbeda-beda terserah anda.
Untuk tanda titik-titik itu tambahan yang menunjukkan dst, jadi jangan diketik titik-titik gitu ya hehehe…

MULTIPLE OPTION

Selanjutnya bagaimana kalau kita ingin pengunjung bisa memilih lebih dari satu option, maka tag select ini kita tambahkan atribut multiple. Contohnya seperti ini:

<select name="NAMA_FIELD" multiple="multiple" size="2">
  <option value="VALUE-1">LABEL-1</option>
  <option value="VALUE-2">LABEL-2</option>
  <option value="VALUE-3">LABEL-3</option>
  <option value="VALUE-4">LABEL-4</option>
  ......
</select>

Pada kode diatas, saya tambahkan dua atribut baru yaitu multiple="multiple" size="2". Multiple dipakai untuk menunjukkan bahwa opsi ini bisa dipilih lebih dari satu. Untuk memilih lebih dari satu, user cukup menekan tombol Ctrl dan klik opsi yang diinginkan. Bagi pengguna Machintos, klik Command Button-nya.
Atribut size adalah jumlah opsi yang dimunculkan. Defaultnya kan cuma 1 aja. Nah, biar pengguna tahu kalau ini multiple option, maka kita tampilkan lebih dari 1, misalnya 2. Tapi kalau opsinya banyak saya sarankan lebih dari 2 yang dimunculkan.

Sekian Dari Artikel Ini,Jika Ada Salah Kata Saya Mohon Maaf,Semoga Bermanfaat :)