Belajar Html Dasar Lengkap

Belajar HTML Dasar

HTML (HyperText Markup Language) adalah bahasa dengan tanda-tanda khusus yang digunakan di awal era web untuk menyajikan informasi. HTML merupakan script yang digunakan untuk menyusun/membuat dokumen web yang apabila kita melakukan desain terhadap html berarti kita telah melakukan tindakan pemograman. Namun HTML bukanlah sebuah bahasa pemograman karena hanya berisikan perintah-perintah tertentu agar dapat diakses atau diterjemahkan oleh browser. Jika kita ingin membuat suatu website atau blog maka pengetahuan tentang html ini sangat penting sebagai dasar utama. Secara mendasar, dokumen html mempunyai susunan sebagai berikut:

<html>
<head>
<title>Judul</title>
</head>
<body>
.
.
.
</body>
</html>

Kode HTML diawali dengan <html> dan diakhiri dengan </html>. Beberapa hal penting dalam kode html :
- Tanda <> menyatakan sebuah tag
- Pada umumnya tag berpasangan. Contohnya <html> dengan </html>, <head> dengan </head> dan <body> dengan </body>.
- Tag yang tidak berpasangan antara lain adalah <br> dan <hr>.
- Pada tag yang berpasangan, tag yang berkedudukan sebagai tag penutup mempunyai bentuk berupa </>.
Contoh: Ketiklah script di bawah ini kemudian simpan dengan nama lat1.html.

<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
</body>
</html>

Untuk melihat hasilnya, silakan jalankan browser favorit Anda, dengan cara membuka file lat1.html yang sudah Anda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah ini saya menggunakan browser Mozila Firefox :

Keterangan:

Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan. Pada contoh di atas judul dokument html yaitu "Belajar HTML"
<BODY> adalah isi dokumen yang akan ditampilkan dibrowser Anda. Isi dokumen pada contoh di atas adalah " Ini adalah web pertama saya."

Terdapat dua pilihan dalam mendesain html :

Menuliskan secara manual tag-tag html ke dalam dokumen html. Bagi para pemula pilihan ini dirasa lebih tepat karena dengan menuliskan tag-tag html satu persatu maka akan menambah pemahaman mengenai cara kerja dan perintah-perintah dalam HTML, meskipun cara ini akan menguras banyak waktu tetapi segala sesuatu tidak ada yang instan oleh karenanya berusaha lebih keras akan lebih baik dan akan terasa hasilnya ketika kita sudah mampu mengusai html. Cara manual ini dapat dilakukan dengan menuliskan kode-kode html pada program editor seperti notepad.
Menggunakan editor praktis yaitu sebuah program khusus yg didesain untuk membuat, melakukan editing bahkan mempublishnya ke internet. Adobe dreamweaver merupakan salah satu program yang banyak digunakan oleh para desainer web dalam mendesain html. Para pemula yang malas untuk belajar kebanyakan memilih pilihan yang kedua ini karena praktis dan tidak menguras waktu.

Struktur Dasar HTML

Struktur dasar html secara umum terbagi menjadi 2 bagian yaitu header dan body. Komponen penyusun dari html meliputi tag, elemen, dan atribut.

Tag
Tag adalah suatu teks khusus (markup) yang terdiri dari dua karakter yaitu < dan >. HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut.Tag biasanya merupakan suatu pasangan yang disebut dengan : 1. Tag awal, dinyatakan dalam bentuk <nama tag> 2. Tag akhir, dinyatakan dalam bentuk </nama tag>. Format : <nama tag> teks yang ditampilkan </nama tag>. Contoh : untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
Contoh ketiklah kode berikut lalu simpan dengan nama tag.html

<<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<i>tulisan ini terlihat miring</i>
<b>tulisan ini terlihat tebal</b>
<u>tulisan ini bergaris bawah</u>

Maka setelah dokumen tag.html dibuka dengan menggunakan mozilla firefox maka tampilannya akan seperti gambar di bawah ini.
Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.Contoh untuk menampilkan judul dokumen pada browser digunakan element title yaitu:
<title> merupakan tag pembuka,
Diisi dengan judul (isi)
</title> merupakan tag penutup
Berikut ini contoh beberapa macam element:
1. Element HTML
  
  Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.
  Sintaks:
  
  <html>
  ...........
  </html>
2. Element title
  Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
  Sintaks:
  
  <title>
  .........
  </title>
3. Element head
  
  Elemen <head> merupakan elemen yang berisikan informasi mengenai halaman web yang tengah dibuka, yang tidak akan ditampilkan secara visual di halaman browser. Sintaks
  
  <head>
  .....
  </head>
  Pada halaman web modern, umumnya elemen mengandung:
  - elemen title, yang menunjukkan judul dari halaman yang tengah dibuka dan muncul pada toolbar browser.
  - elemen meta, yang menunjukan informasi meta data mengenai halaman web yang tengah diakses.
  - elemen link, yang menunjukan hubungan antara halaman web yang dibuka dan file lain. Umumnya digunakan untuk “memasukkan” file CSS ke halaman web yang bersangkutan.
  - elemen script, digunakan untuk memasukkan script yang bekerja pada sisi klien seperti JavaScript.
  Selain keempat elemen di atas, terdapat juga elemen style yang digunakan untuk memasukkan perintah stylesheet dan base untuk menetapkan alamat dan target dari semua link yang berada di dalam halaman web. Bagaimanapun, elemen base jarang dijumpai penggunaannya dan elemen style jarang digunakan karena paradigma saat ini untuk memisahkan stylesheet dengan halaman web agar mudah dalam pengorganisasiannya.
4. Element body
  Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
  Element BODY mempunyai atribut-atribut yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser.
  Sintaks:
  
  <body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
  ..............
  </body>
Pada dasarnya, elemen yang diletakkan diantara tag <body> terdiri dari tiga jenis:
- Markup struktural: menunjukan tujuan dari text. contoh, tag heading <h2></h2>
- Markup presentasional: menunjukan tampilan dari informasi, terlepas dari fungsinya. contoh: <strong></strong>
- Markup hypertext: markup yang membuat bagian dari dokumen menghubungkan ke dokumen yang lain. contoh: <a href=""></a>
Atribut
Atribut text memberikan warna pada teks, bgcolor memberikan warna pada latar belakang dokumen HTML, background memberikan latar belakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi. Jika atribut bgcolor dan background keduanya dispesifikasikan maka atribut background yang akan digunakan, akan tetapi jika nilai atribut background (gambar) tidak ditemukan pada dokumen HTML maka atribut bgcolor yang akan digunakan.

Atribut mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>

Secara umum nilai atribut harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latar belakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">