Belajar HTML #beginner

Mei 18, 2011 at 6:00 am (komputer, Materiku) (, )

HTML (Hypertext Markup Language) merupakan sebuah bahasa yang digunakan untuk membuat sebuah halaman web. Komponen yang perlu kita ketahui dalam bahasa HTML antara lain:

1. Tag (tanda/markup)

Dibedakan menjadi 4:
structural
Merupakan tanda yang menentukan level atau tingkatan dari sebuah tulisan. Contohnya tag heading yang terdiri dari h1 sampai dengan h6

presentational
Merupakan tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational (untuk menentukan tampilan dari halaman website) saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan

hypertext
Merupakan link.
Ada tiga macam link yang dapat kita gunakan :

  • Link menuju bagian lain dari page
  • Link menuju page lain dalam satu web site
  • Link menuju resource atau web site yang berbeda.

Elemen widget

Tag ditulis dengan menggunakan tanda kurung contoh <html>  dan diakhiri dengan tanda kurung juga seperti ini </html>. Perkecualian untuk :
linebreak <br />
image       <img src=”…” />
input eq pada form <input type=”radio” />

2. Attribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Atribut muncul di dalam tag pembuka dan nilai mereka selalu di dalam tanda kutip.
eq:
<input type=”submit” value= “Kirim” />
type dan value merupakan attribut dari input

3. Elemen

Elemen merupakan unsur dari halaman web yang terdiri dari eleman kepala <head>, tubuh halaman <body>

4. Paragraph

Untuk membuat paragraf dalam HTML digunakan tag <p>
eq:
<p>This is my first web page</p>
<p>How exciting</p>

kalau tidak menggunakan tag <p>   </p> hasilnya akan nyambung seperti ini :
This is my first web page How exciting

5. emphasis (penekanan teks)

<em> </em>untuk cetak miring
<strong> </strong>untuk cetak tebal
eq:
<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>

Untuk menentukan tampilan dari halaman website (termasuk pengaturan warna dan huruf) saat ini sudah mulai digantikan oleh CSS

6.  Line Break

Line breaks <br />  digunakan untuk ganti baris. Bedanya dengan <p> :

  • <br/> tidak ada tag pembuka atau penutup hanya menggunakan <br /> saja
  •  <br /> digunakan untuk berpindah baris sedangkan <p> digunakan untuk berganti paragraph

7. Heading

Heading terdiri dari h1 – h6. Tag h1 ini hanya digunakan sekali yaitu untuk judul utama halaman dan tidak boleh digunakan beberapa kali.
h2 sampai h6 dapat digunakan sesering yang Anda inginkan, catatan h3 harus merupakan sub-judul dari sebuah h2, h4 harus merupakan sub judul dari h3 dst.

Penulisannya harus menggunakan tag penutup
eq: <h1> Contoh heading 1 </h1>

8. Lists

Lists digunakan untuk memperinci sesuatu. List terdiri dari 2 jenis yaitu ordered list (list berurutan) dan unordered list (biasanya berupa bullet).

  • unordered list <ul>
  • ordered list <ol>

Untuk mendefinisikan list digunakan <li>
eq:
<ol>
<li>satu</li>
<li>dua</li>
<li>tiga</li>
</ol>

hasil
1.  satu
2. dua
3. tiga

8. Link

Link digunakan untuk mengaitkan bagian halaman dengan bagian halaman yang lain atau halaman dengan halaman lain ataupun website lain.
eq: <p><a href=”http://www.htmldog.com”>HTML Dog</a></p>
Tag anchor a digunakan untuk mendefinisikan sebuah link, tujuan dari link didefinisikan dengan atribut href tag.

contoh
1. link file html
Jika kita memiliki file lain misalnya another.html maka contoh penulisan link nya seperti ini
<a href=”another.html”>Link ke another file</a>

Sebuah link tidak harus link ke file HTML, bisa juga link ke file apa saja diweb.

2. Link ke bagian lain dari halaman yang sama
Kita dapat melakukan link ke bagian lain pada halaman yang sama dengan cara menambahkan atribut id ke dalam tag, contohnya seperti ini
<h2 id=”moss”>Moss</h2>

kemudian untuk nge-link ke bagian tersebut tuliskan kode seperti ini
<a href=”#moss”>Menuju Moss</a>

9. Image

Dalam sebuah halaman website tidak hanya melulu terdiri dari teks,  akan tetapi sering kali terdapat gambar. Tag img digunakan untuk menempatkan gambar dalam dokumen HTML.
eq:
<img src=”http://www.htmldog.com/images/logo.gif&#8221; width=”157″ height=”70″ alt=”HTML Dog logo” />

ket:
src:
Atribut src digunakan untuk memberi tahu browser dimana letak gambar. Jika kita membuat dan menyimpan gambar dengan nama pemandangan.jpg dan berada di folder images kita bisa menuliskan kodenya seperti ini <img src=”imaes/pemandangan.jpg”…

width dan height:
Atribut ini digunakan untuk mengatur width(lebar) dan height(tinggi). Hal ini diperlukan karena jika gambar tidak diukur lebar dan tingginya maka browser akan cenderung menghitung ukuran sebagai beban gambar ketiga halaman di load, sehingga menyebabkan layout dokumen akan terlihat acak (jump arround) ketika halaman diload.

alt:
Atribut alt merupakan deskripsi alternatif. Ini merupakan persyaratan terbaru dari HTML

notes: seperti tag br, tag img juga tidak mempunyai tag penutup, hanya saja menutup dirinya sendiri dengan “/>”
eq: <br />
<img src=”….” />

Format file yang sering digunakan untuk gambar yaitu GIF dan JPEG. Keduanya merupakan format terkompresi dan memiliki kegunaan yang berbeda.
GIF:
GIF  memiliki tidak lebih dari 256 warna, tetapi mereka mempertahankan warna dari gambar asli. Semakin rendah jumlah warna yang Anda miliki di gambar, semakin rendah ukuran filenya. Format ini digunakan untuk gambar dengan warna solid

JPEG
JPEG menggunakan algoritma matematika untuk kompresi citra. Semakin rendah kompresi maka gambar akan semakin jelas akan tetapi ukuran file menjadi semakin besar. Format ini akan mendistorsi/mengurangi kualitas gambar asli setiap kali gambar dibuka. Format JPEG digunakan untuk gambar seperti photo.


10. Tables

Ada beberapa tag yang digunakan untuk membuat table
1. <table> </table>untuk mendefinisikan table
2. <tr> </tr>untuk mendefinisikan baris tabel
3. <td> </td> untuk mendefinisikan sebuah sel data. Ini harus diapit tag <tr>

11. Form

Form atau formulir merupakan tampilan dokumen yang harus diisi. Form perlu dihubungkan dengan sebuah program yang dapat memproses data yang diinputkan oleh pengguna. Tag HTML yang digunakan untuk membuat form antara lain form, input, textarea, select dan option.

~ form : Untuk mendefinisikan form. Didalam tag ini terdapat atribut bernama action untuk memberitahu konten mana yang akan dikirim dan attribut optional bernama method untuk memberitahu dengan cara apa data akan dikirim (get atau post). Method get merupakan default value sedangkan method post umumnya digunakan apabila kita ingin menyembunyikan informasi
eq:
<form action=”processingscript.php” method=”post”>

</form>

~ input
input tag memiliki ten forms berikut:
1.<input type=”text” />
merupakan standart textbox. Type ini bisa juga memiliki atribut value untuk menyeting (initial) awal text pada textbox

2.<input type=”password” />
sama seperti textbox bedanya tipe karakternya tidak kelihatan (hidden)

3.<input type=”checkbox” />
checkbox atau kotak centang, dapat diaktifkan atau dinonaktifkan oleh pengguna. Pada type checkbox kita bisa memilih (memberikan tanda check) lebih dari satu pilihan. Type ini juga bisa memiliki atribut check yang mana membuat keadaan awal dari kotak centang seolah2 aktif.
eq:
<input type=”checkbox” checked=”checked” />

4.<input type=”radio” />
Hampir sama dengan checkbox bedanya pada type ini pengguna hanya dapat memilih satu tombol radio saja. Type ini juga dapat memiliki attribut check yang digunakan sama seperti pada type checkbox

5.<input type=”file” />
Dengan type ini, kita bisa menampilkan file2 yang ada dikomputer kita.

6.<input type=”submit” />
Merupakan sebuah tombol yang saat dipilih akan menyerahkan (submit) formulir. Kita dapat mengganti value dari tombol submit dengan tulisan yang lain dengan mengisikan tulisan pada value-nya.
eq: misalnya kita menginginkan tulisan selesai pada tombol
<input type = “submit” value = “Selesai”/>.

7.<input type=”image” />
Untuk meletakkan gambar. Type ini memerlukan attribut src untuk tau dimana lokasi file gambar.

8.<input type=”button” />
Merupakan tombol yang tidak melakukan apapun tanpa adanya kode tambahan

9.<input type=”reset” />
Merupakan tombol yang saat dipilih akan mengatur ulang kolom formulir ke nilai standar

10.<input type=”hidden” />
Merupakan field yang tidak akan ditampilakan

Catatan:
sama seperti  <br /> dan <img src=”…” />, tag input juga menutup dirinya sendiri <input type=”…” />

~text area
Pada dasarnya textarea merupakan textbox yang besar. Karena itu textarea memerlukan attribut cols dan rows
eq:
<textarea rows=”5″ cols=”20″>A big load of text here</textarea>

~select
~option
Tag option bersama dengan select berfungsi untuk membuat kotak pilihan drop-down
eq:

<select>
<option value=”first option”>Option 1</option>
<option value=”second option”>Option 2</option>
<option value=”third option”>Option 3</option>
</select>
Ketika kita melakuakan submit formulir, maka nilai dari opsi yang telah dipilih yang akan dikirim. Sama seperti checkbox dan radio buttons yang memiliki attribut checked, tag option memiliki attribut selected.
eq:
<option value=”mouse” selected=”selected”>Rodent</option>

notes:
Form field memerlukan attribut names untuk dapat menghubungkan formulir ke form-handling program. eq: <input type=”text” name=”talkingsponge” />

contoh form

<form action=”contactus.php” method=”post”>

<p>Name:</p>
<p><input type=”text” name=”name” value=”Your name” /></p>

<p>Comments: </p>
<p><textarea name=”comments” rows=”5″ cols=”20″>Your comments</textarea></p>

<p>Are you:</p>
<p><input type=”radio” name=”areyou” value=”male” /> Male</p>
<p><input type=”radio” name=”areyou” value=”female” /> Female</p>
<p><input type=”radio” name=”areyou” value=”hermaphrodite” /> An hermaphrodite</p>
<p><input type=”radio” name=”areyou” value=”asexual” checked=”checked” /> Asexual</p>

<p><input type=”submit” /></p>

<p><input type=”reset” /></p>

</form>

Pada kode diatasform belum dapat diproses karena tidak adanya file contactus.php

2 Komentar

  1. Tutorial membuat halaman HTML dan pengaturan tampilan menggunakan CSS « Sutrionline's Blog said,

    […] mengaplikasikan teori tersebut.Untuk melihat teori dasar HTML dan CSS silakan lihat dilink berikut: Belajar HTML #beginner Belajar CSS #beginner Belajar CSS […]

  2. MasDin MilanistiReligious Chayanx Yuly said,

    top markotop sista

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: