00.45.00 -

Ayo Belajar HTML ! : Pertemuan Pertama

Hai Sobat Alien, kemarin kan si alien sudah ngasih tau tentang bagian dari HTML yaitu marquee tapi kok ada yang janggal ya ? benar sekali ! si alien lupa ngasih tau apa itu HTML dan cara menggunakannya. tapi jangan sedih karena kali ini si alien bakal ngajarin kalian Apa itu HTM, dan akan ngajarin kalian sampai mengerti. Tapi sayangnya karena Untuk membuat guide nya terlalu sulit. jadi si alien bakal bagiin guide ini ke beberapa part. jadi agar lebih gampang dipelajari.

Apakah HTML itu?
  • HTML merupakan singkatan dari HyperText Markup Language.
  • HTML bukanlah sebuah bahasa pemrograman.
  • HTML digunakan untuk menyebarkan informasi secara global.
Nah sekarang si alien bakal kasih tau persiapan yang diperlukan untuk membuat HTML. caranya sanggatlah mudah !!! hanya di perlukan Notepad (Yang sudah ada dari asal instalasi OS) dan Browser Kamu (seperti Firefox, chrome, dan sebagainya).
Cara menggunakannya cukup mudah hanya seperti mengetik di Microsoft word saja. hanya cara penyimpanan-nya berbeda.
1. Buka notepad (Windows)
2. Misalkan kita akan membuat sebuah halaman HTML dengan kode sebagai berikut :
<html> <head> <title>Judul Websiteku</title> </head> <body> Isi dari websiteku </body> </html>
3. Copy dan paste kode di atas ke notepad
4. Kemudian simpan dan ganti *.txt dengan coba.html seperti gambar berikut :
5. Buka file yang sudah tersimpan tersebut
6. Selamat anda telah membuat sebuah halaman web pertama anda :)
 
Sekarang kita menuju pelajaran pertama dalam membuat HTML.
Kalau kita melihat HTML berikut ;
<html> <body> Isi dari websiteku </body> </html>
Pasti Kalian Akan bertanya-tanya Apa itu  <html> dan <body> ?
Penjelasan :
  • Isi tulisan di antara <html> dan </html> mendeskripsikan isi dari sebuah halaman web.
  • Isi tulisan di antara <body> dan </body> mendeskripsikan isi dari sebuah halaman web yang terlihat.

HTML tags

Apa yang dimaksud dengan HTML tags? HTML tags adalah sebuah label yang di awali dengan tanda '<' dan di akhiri dgn tanda '>' :
  • <html>
  • <title>
  • <body>
Pada umumnya HTML tags adalah berpasangan:
  • <body> dengan </body>
  • <h2> dengan </h2>
  • <p> dengan </p>
Akan tetapi ada beberapa tags yang juga disebut sebagai 'empty element' dapat berjalan tanpa berpasangan:
  • <img>
  • <input>

HTML Element

Ketika anda membuka sebuah halaman web dan anda melihat semua yang ada di hadapan anda, mulai dari sebuah paragraf, banner dan link-link navigasi... itulah elemen-elemen dari sebuah halaman web.
Sebuah elemen terdiri dari tiga buah bagian penting :
  • Tag pembuka
  • Isi
  • Tag penutup

Berikut adalah sebuah elemen paragraf HTML yang lengkap :
<p>isi elemen</p>

Satu halaman sebuah web bisa mengandung ratusan hingga ribuan elemen HTML.

Beberapa contoh elemen-elemen HTML yang lain :
<html></html>
<body></body>
<h1></h1>

Nested HTML


Nested HTML adalah sebuah elemen yang berada di dalam elemen HTML lainnya.
<body><h1>hallo</h1></body>

Dokumen HTML



<html>

<title>Judulku</title>

<body>

<p>Paragrafku</p>

</body>

</html>

Pada contoh di atas terdapat empat elemen HTML

Elemen <p> :
  • <p> merupakan paragraf elemen
  • Elemen ini dibuka dengan <p> dan di tutup dengan </p>
  • Isi dari elemen ini adalah 'Paragrafku'

Elemen <body> :
  • <body> merupakan elemen isi atau badan dari sebuah dokumen HTML
  • Elemen ini dibuka dengan <body> dan di tutup dengan </body>
  • Elemen ini memiliki sebuah nested elemen yaitu elemen <p> beserta isinya

Elemen <title> :
  • <title> merupakan elemen yang mendefinisikan judul dari sebuah dokumen HTML
  • Elemen ini dibuka dengan <title> dan di tutup dengan </title>
  • Isi dari elemen ini adalah 'Judulku'

Elemen <html> :
  • <html> merupakan elemen yang mendefiniskan seluruh bagian dari sebuah dokumen HTML
  • Elemen ini dibuka dengan <html> dan di tutup dengan </html>
  • Elemen ini memiliki tiga nested elemen lainnya, yaitu :<title>,<body> dan <p>

Selalu ingat agar menutup setiap elemen dengan tag penutup

<p>Paragraf 1
<p>Paragraf 2
Contoh di atas mungkin bisa berjalan di banyak browser karena penutup dari elemen dianggap sebagai opsional, tetapi sebaiknya hal ini jangan anda biasakan sebab banyak elemen-elemen HTML yang bisa mengakibatkan error bila tidak terdapat tag penutup di dalamnya.

Case sensitive

HTML tag tidaklah case sensitive, jadi tidak akan bermasalah meskipun anda menuliskannya dengan huruf  besar maupun kecil. <html> -> <HTML>.

Akan tetapi kami sarankan agar anda menggunakan lowercase / huruf kecil sebab World Wide Web Consorsium (W3C) menyarankan agar menggunakan lowercase untuk setiap elemen HTML 4 dan mengharuskan menggunakannya pada XML

HTML Headings


Heading adalah bagian penting dari HTML
Elemen-elemen h1,h2,h3,h4,h5,h6 adalah elemen headings ( h = heading ).
Dimana h1 adalah adalah tingkat pertama dan teks dari h1 adalah yg terbesar diikuti oleh h2 hingga h6 yang merupakan elemen headings yang terakhir.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Browser secara otomatis menambahkan satu bagian kosong/empty space pada setiap heading.

Ada pendapat yang mengatakan bahwasanya search engine menggunakan heading untuk menyusun struktur dan isi dari halaman web anda.

HTML Title

Elemen <Title> digunakan untuk menyatakan judul sebuah halaman web. Posisinya berada di dalam elemen <head>.
<html>

<head>

<title>Judul Halaman websiteku</title>

</head>

<body>

Isi dari halaman websiteku

</body>

</html>

Jangan bingung membedakan title dan heading/header , keduanya adalah berbeda meskipun biasanya orang menuliskan isi yang sama pada keduanya. Jadi, title adalah hal pertama dalam sebuah dokumen HTML, berbeda tag dan fungsi.

Search engine seperti Altavista, Infoseek dan Webcrawler menggunakan isi dari <title> sebuah halaman ketika mereka mengambil informasi dari halaman web.

Horizontal Line

Horizontal line / garis horisontal / garis datar dalam HTML didefinisikan dengan tag <hr>

<p> Jakarta </p>

<hr>

<p> Malang </p>

<hr>

<p> Surabaya </p>
Elemen <hr> merupakan 'empty element', jadi tidak memerlukan tag penutup.

HTML Paragraf

Tag <p> mendefinisikan sebuah paragraf.
Dengan menggunakan tag ini, maka browser secara otomatis akan memasukkan garis/space kosong di bagian atas dan bawah paragraf.

<p>Paragraf pertamaku</p>

<p>Paragraf keduaku</p>

<p>Paragraf ketigaku</p>

Tag penutup pada beberapa elemen memang di anggap opsional oleh browser akan tetapi sebaiknya anda membiasakan untuk tetap memakai penutup. Sebab banyak elemen-elemen lain dalam HTML yang bisa berakibat error bila tidak terdapat tag penutup di dalamnya.

Dalam XHTML dan XML, elemen tanpa tag penutup tidak diperbolehkan.

Line Break

Bila anda ingin baris baru(new line) anda dapat menggunakan tag <br/> break .

Ini baris pertama <br/>

Ini baris kedua <br/>

ini baris ketiga

<br> termasuk salah satu dari 'empty element', jadi tidak memerlukan tag penutup.

Sebaiknya memakai <br> ataukah <br/> ?


Meskipun menulis tag line break dengan <br> bekerja di semua browser akan tetapi sebaiknya menuliskannya dengan <br/> sebab bekerja lebih baik di aplikasi XHTML dan XML.

HTML Format

HTML memiliki banyak tag-tag lain yang berfungsi untuk mengubah sebuah tulisan.

  • Tulisan ini bold 
  • Tulisan ini italic
  • Tulisan ini strike
  • Tulisan ini strong
  • Tulisan ini emphasized
  • Tulisan ini code/computer
  • Tulisan ini subscript dan superscript
  • <p><b>Tulisan ini bold</b></p>
  • <p><i>Tulisan ini italic</i></p>
  • <p><strike>Tulisan ini strike</strike></p>
  • <p><strong>Tulisan ini strong</strong></p>
  • <p><em>Tulisan ini emphasized</em></p>
  • <p><code>Tulisan ini code/computer</code></p>
  • <p>Tulisan ini <sub>subscript</sub> dan <sup>superscript</sup></p>

<i> dan <em> juga <b> dan <strong> meskipun keduanya sama-sama menampilkan hasil tulisan yang sama akan tetapi pada dasarnya keduanya berbeda.
<i> untuk hasil tulisan italic
<b> untuk hasil tulisan bold

Sedangkan <em> dan <strong> bertujuan untuk menampilkan tulisan dimana kita ingin user melihat tulisan atau kata itu sebagai hal yang penting. Saat ini hampir semua browser me-render <em> sebagai italic dan <strong> sebagai bold.

Bila suatu saat browser menetapkan bahwa <em> dan <strong> sebagai tulisan berwarna hijau maka itu bisa saja terjadi, yang penting anda tahu kalau <em> bukanlah italic dan <strong> bukanlah bold.

HTML List

Anak Pak Raden :
  • Budi
  • Wati
  • Joni
Urutan anak Pak Raden :
  1. Budi
  2. Wati
  3. Joni

Dengan HTML <ul> "unordered list" dan <ol> "ordered list" anda bisa membuat daftar seperti di atas.

Berikut adalah kode dari tampilan di atas :
<p>Anak Pak Raden :</p>
<ul>
<li>Budi</li>
<li>Wati</li>
<li>Joni</li>
</ul>

<p>Urutan anak Pak Raden :</p>
<ol>
<li>Budi</li>
<li>Wati</li>
<li>Joni</li>
</ol>

Unordered List :

  • Unordered list dimulai dengan tag <ul>
  • Setiap item di dalam <ul> dimulai dengan <li>

Ordered List :

  • Unordered list dimulai dengan tag <ol>
  • Setiap item di dalam <ol> dimulai dengan <li>

Definition List



Definition List adalah sebuah list yang terdapat deskripsi pada setiap item-nya.

Tag <dd> adalah tag dari definition List dengan tag <dt> sebagai deskripsi itemnya.

<dl>
<dt>Wati</dt>
<dd>- Wati berasal dari Jakarta</dd>
<dt>Budi</dt>
<dd>- Budi berasal dari Surabaya</dd>
<dt>Joni</dt>
<dd>- Joni berasal dari Medan</dd>
</dl>

Pada setiap item yang ada anda bisa menambahkan line break, text format, gambar, dsb.

HTML Attribute

  • Elemen HTML bisa memiliki atribut di dalamnya.
  • Atribut memberikan informasi tambahan terhadap sebuah elemen.
  • Atribut selalu ditempatkan di tag pembuka sebuah elemen.
  • Atribut berisi nama dan nilai di dalamnya mis: color="red".

Contoh Attribute

Ok, tanpa basa-basi lebih jauh lagi kita lihat contoh berikut :
Paragraf 1
Paragraf 2
Paragraf 3

Seperti anda lihat, teks paragraf di atas memiliki posisi yang berbeda-beda, hal itu terjadi karena penambahan attribut ke dalam tag <p>

<p align="right">Paragraf 1</p>
<p align="center">Paragraf 2</p>
<p align="left">Paragraf 3</p>

Selalu isikan nilai atribut dengan tanda petik


Nilai dari atribut harus selalu di isikan dengan tanda petik, mis align="center".

Memakai tanda satu petik ' maupun tanda dua petik " tidaklah bermasalah.
Pada sebuah situasi yang langka,ketika isi dari atribut itu sendiri memiliki tanda petik maka petik terluar bisa di isi dengan satu petik dan nested/dalamnya bisa di isi dengan tanda dua petik dan sebaliknya, mis :

value = ' Si "Buta" dari "Goa Hantu" .'

Gunakan lowercase dalam menulis attribut

Menuliskan attribut dengan huruf besar maupun kecil bukanlah masalah, namun World Wide Web Consorsium menganjurkan untuk menuliskan attribut pada HTML 4.0.
Versi terbaru dari (X)HTML mengharuskan anda untuk menuliskan attribut dengan huruf kecil.

Gimana Ngerti Kan ? apa ! ribet bacanya. ya memang begitu dari subernya sampai jumpa di pertemuan berikutnya !!!

Sumber : http://www.codingku.com