HTML Basics

Apa itu HTML?

HTML adalah singkatan dari Hyper Text Markup Language yang merupakan bahasa markup yang berdominan untuk halaman sebuah web.
HTML ditulis dalam bentuk elemen HTML terdiri dari tag, tertutup dalam kurung sudut seperti

Code:
<html>

dalam konten halaman sebuah web.
Tag HTML biasanya berpasangan seperti

Code:
<h1> dan </ h1>

Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir (juga disebut tag pembuka dan tag penutup),diantara tag web ini creator juga dapat menambahkan teks, tabel, gambar, dll.

HyperText Markup Language (HTML) adalah bahasa dari Worl Wide Web (www) yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser. HTML juga dapat disebut sebagai protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser. HTMl inilah yang menjadi dasar bila akan menjelajah internet dan melihat halaman web yang menarik.

HTML menentukan 2 fungsi :
1. Membentuk tata letak document, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.
2. Menetukan hubungan ke dokumen lain, HTML merupakan suatu bahasa pemrograman yang termasuk dalam kategori SGML (Standart Generalized Markup Language) dimana bentuknya merupakan standar ASCII yang berisi kode-kode untuk mengatur dokumen.

Saat ini terdapat banyak sekali HTML authoring (software atau tool yang digunakan untuk membuat atau mendesain halaman web), yang biasa digunakan seperti : MS-FrontPage, Netscape Composer, Macromedia Dreamweaver, Adobe GoLive, Adobe Pagemill, HotDog, HotMetal, HTML Easy, InContext Spider, dan lain sebagainya.

Karena bentuk HTML mengikuti standar ASCII, maka file HTML dapat dibuat dengan menggunakan program editor bisa seperti Editor dari DOS, atau Notepaddari Microsoft Windows, MS Word dan lain sebagainya. Namun yang paling mudah adalah dengan menggunakan Notepad yang ada setiap kali kita menggunakan system operasi terutama windows.

Software lain yang digunakan adalah browser yang digunakan untuk menampilkan web page yang akan dihasilkan. Dua nama yang paling popular adalah Internet Explorer dan Netscape Navigator, keduanya merupakan browser yang umum digunakan dan mudah didapatkan, beberapa yang lain yang juga terkenal seperti Opera, GodZilla, Mozilla Firefox, dan sebagainya.

Jadi, dengan menggunakan kombinasi program pembuat HTML dan program web browser, maka kita sudah dapat menayangkan informasi di internet.

Beberapa kalangan yang menyatakan keberatan jika HTML merupakan sebuah bahasa pemrograman karena struktur yang dimilikinya dianggap terlalu sederhana, kode-kode dibaca oleh browser baris per baris, dari atas ke bawah. HTML juga tidak mempunyai struktur pemrograman yang umum ada pada bahasa sebuah bahasa pemrograman standar, misalnya tidak adanya struktur ‘looping’. Pada HTML digunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah. Namun banyak kalangan umum yang menganggap bahwa HTML merupakan dokumen program meskipun tidak terstruktur. Yang jelas HTML merupakan bahasa yang menspesifikasi isi (content) suatu halaman web.

HyperText menunjukan ke fakta bahwa halaman web lebih tepat berupa teks yang dapat memuat multimedia, dan melakukan link dengan atau tanpa lompatan.
Markup menunjuk ke fakta bahwa bekerja pada kebanyakan teks dengan simbol-simbol spasial (tags) yang mengidentifikasi struktur dan tipe dokumen.

Sebagai contoh : Membuat halaman pertama HTML Anda

Coba masukkan code dibawah ini lalu paste ke notepad atau notepad ++ dan simpan file sebagai index.html.
code :

Code:
<html>
<body>
<h1> heading kalian </ h1>
<p> paragraf pertama saya </ p>
</ body>
</ html>

Nah sekarang untuk melihatnya coba buka index.html tadi dgn (IE, Mozilla, Google Chrome, dll).

Lalu selanjutnya begini :

Code:
1. Teks antara <html> dan </ html>  halaman web.
2. Teks antara <body> dan </ body> adalah daerah halaman yang terlihat.
3. Teks antara <h1> dan </ h1> nilai heading. "1" sesuai dengan ukuran font terbesar yang tersedia untuk judul.
4. Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf.

Mengatur dan mendefinisi sebuah link

Kalian dapat menentukan link dengan menggunakan tag <a>
contoh code :

Code:
<a href="http://kampoeng.us"> <a ini adalah link</ a>

Disini kalian
Kalian akan melihat teks “Ini adalah link”,nah dia adalah link yang akan kalian masukan.

Gambar

Gambar code dapat dimasukuan dengan memasukan tag <img>.
Contoh :

Quote:[Image: image1.jpg]

Code:
<img src="image.jpg" width="150" height="110">

dari gambar kita dapat melihat bahwa atribut gambar asli adalah 150x110pxl sehingga gambar ditampilkan dengan sedetail mungkin lebar dan tinggi yang diatur.

Breaking lines

Untuk memisahkan sebuah garis dalam tekx, cukup ketik <br> atau </br>.
Saya sarankan untuk menggunakan yang pertama karena dalam XHTML, XML, dan versi yg lain dari element HTML tanpa tag akhir (tag penutup) tidak diperbolehkan.

Format tag :

Code:
<b> Tebal teks
<big> Teks besar
<em> Teks menekan
<i>Teks miring
<small>Teks kecil
<strong> Teks tajam
Definisi teks subscript <sub>
<sup>Teks superscripted
<ins>Teks yang dimasukkan
<del>Teks yang dihapus

Tabel

Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan dari “data tabel,” dan memegang isi dari inti data tsb.
Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll

contoh code:

Code:
<table border="1">
<tr>
<td> baris 1, sel 1 </ td>
<td> baris 1, sel 2 </ td>
</ Tr>
<tr>
<td> baris 2, sel 1 </ td>
<td> baris 2, sel 2 </ td>
</ Tr>
</ table>

Tabel tags

Code:
<table> nama tabel
<th>  header tabel
<tr> baris tabel
<td> sel tabel
<caption>  caption tabel
<colgroup> kelompok kolom dalam sebuah tabel
<col /> nilai atribut untuk satu atau lebih kolom dalam sebuah tabel
<thead> Grup header dalam sebuah tabel
<tbody> Grup isi dalam tabel
Grup <tfoot> isi footer dalam sebuah tabel

Daftar

Sebuah daftar unordered dapat dimulai dengan tag <ul>.
dan setiap item daftar dimulai dengan tag <li>.

contoh code :

Code:
<ul>
<li> Barang <li>
<li> Item2 <li>
<ul>
<li> Ordered1 </li>
<li> Ordered2 </li>
</ul>

Ordered list dimulai dengan tag <ul>.
dan setiap item daftar dimulai dengan tag <li>.

contoh:

Code:
<ol>
<dt> kopi </ dt>
<dd> - teh anget </ dd>
<dt> Susu </ dt>
<dd> - minuman dingin putih </ dd>
</dl>
Daftar tag:

<ul> daftar unordered
<li> item daftar
<dl> daftar definisi
<dt> item dalam daftar definisi
<dd> deskripsi dari item dalam daftar definisi

aji kusuma has written 26 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>