HTML (Hypertext Markup Language)
Senin, 14 Desember 2009 14:16:24 - oleh : syamsul
1. HTML (Hypertext Markup Language)
HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). HTML inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web. Sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman web dengan menggunakan web tool.
Struktur Dasar Html
Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
Judul Form/Caption
ISI WEB
Keterangan:
.. Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
.. Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
.. Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
.. Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.
Sebuah contoh sederhana dokumen HTML :
halaman pembuka
Letakkan text, images, dan link anda di sini
Hasilnya kira-kira sebagai berikut:
2. Pengaturan Teks
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :
a. Heading: .. Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara sampai
Digunakan untuk pindah ke baris baru. d. No Line Break: Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
e. Font Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.
SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
::: Ukuran, Jenis dan Warna Font :::
Ukuran font 1
Ukuran font 2
Ukuran font 3
Ukuran font 4
Ukuran font 5
Ukuran font 6
Ukuran font 7
Hasilnya akan terlihat Contoh lainnya : f. Base Font: Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
Bold text
Italic text
Underscore
Typewriter
Strikeout - draws a line through the text
Hasil dari kode di atas adalah:
Ordered Lists:
sampai , dengan merupakan ukuran terbesar dan merupakan ukuran terkecil.
Contoh :
::: Heading Dokumen HTML :::
Headng Tingkat 1
Headng Tingkat 2
Headng Tingkat 3
Headng Tingkat 4
Headng Tingkat 5
Headng Tingkat 6
Hasilnya akan terlihat seperti :
b. Paragraph Baru:
merupakan ukuran terbesar dan merupakan ukuran terkecil.
Contoh :
::: Heading Dokumen HTML :::
Headng Tingkat 1
Headng Tingkat 2
Headng Tingkat 3
Headng Tingkat 4
Headng Tingkat 5
Headng Tingkat 6
Hasilnya akan terlihat seperti :
b. Paragraph Baru:
Headng Tingkat 1
Headng Tingkat 2
Headng Tingkat 3
Headng Tingkat 4
Headng Tingkat 5
Headng Tingkat 6
Hasilnya akan terlihat seperti : b. Paragraph Baru:Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran
tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY. c. Line Break:Digunakan untuk pindah ke baris baru. d. No Line Break:
Ukuran font 2
Ukuran font 3
Ukuran font 4
Ukuran font 5
Ukuran font 6
Ukuran font 7
Hasilnya akan terlihat Contoh lainnya : f. Base Font:
Preformatted Text Definition
- Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan
- tag. Atribut yang ada pada Ordered List adalah TYPE dan START.
Contoh :
::: Ordered List ::: Pendidikan saya adalah :
- Sekolah Dasar
- Sekolah Lanjutan Pertama
- Sekolah Lanjutan Atas
- Universitas Muhammadiyah Malang
- Universitas PGRI Malang
- , digunakan untuk menjelaskan istilah-istilah. Definition List dinyatakan dengan tag
- Definition Term yaitu bagian istilah yang dijabarkan dan tag
- Definition Data yang merupakan penjabaran dari istilah.
Contoh :
- Bagian Pertama.
- Sub Bagian Pertama.
- Bagian Kedua.
- Sub Bagian Kedua
. Digunakan untuk mengatur format tampilan agar sesuai dengan aslinya. Contohthe <pre> tag without the <pre> tag:
here's some ditty specially done to lay it out all formatted and pretty. unfortunately, that is all this junk really means because i admit i couldn't scrawl poetry for beans.with the <pre> tag:
here's some ditty specially done to lay it out all formatted and pretty. unfortunately, that is all this junk really means because i admit i couldn't scrawl poetry for beans.Hasil dari kode di atas adalah : Extended Quotations:, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam. Contoh:
::: Blockquote ::: 2. Pengaturan Teks
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Hasilnya tampak seperti bnerikut ini: 3. Hypertext Link Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara dan akan terdapat garis bawah. Link ke Dokumen Lain Untuk membuat link dengan target ke dokumen/halaman yang berbeda anda harus membuat dokumen yang dituju/target dan disimpan didirektori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Contoh:::: Link Dokumen Lain ::: >> MENU <<
H o m e
Profile
Album
Hasil Karya
Buku Tamu
Diskusi
Hasil adalah sebagai berikut: Link ke bagian tertentu dalam dokumen yang sama Untuk membuat link ke bagian tertentu dalam dokumen yang sama anda harus memberikan nama anchor dan juga membuat link, sehingga perbedaannya dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang bersangkutan. Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal: Ada apa dengan PHP? atau dapat ditulis lengkap: Ada apa dengan PHP? dan untuk nama anchornya: Ada apa dengan PHP? Link ke alamat URL atau Website Untuk membuat link ke alamat URL adalah dengan menambahkan: http://nama_URL. Contoh: www.dikti.org www.smkpgri3-mlg.sch.id Link ke Alamat Email Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis. Untuk membuat link ke alamat email hanya menambahkan atribut mailto:alamat_email ke dalam tag Misalnya: Kirim email Link File yang akan didownload Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen tersebut. Format penulisannya adalah Misal: Download baru Download Download PHP 4. Menyisipkan Gambar/Images Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalahAttribut yang dimiliki tag
adalah: alt, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk mengatur ukuran gambar, menggunakan attribut width daan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace. Contoh :
::: menampilkan images :::
Tampilan dari contoh diatas adalah sebagai berikut:
5. Membuat Tabel (Table)
Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: ,
, dan . Yang perlu diingat adalah bahwa tag dan harus terletak di antara tag dan
. Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut : • align - perataan : rata kiri (left), tengah (center) atau kanan (right). • valign – mengatur bentuk perataan secara vertikal • bgcolor – mengatur warna latar belakang (background) dari tabel. • background – menentukan gambar yang digunakan sebagai background tabel • color – Untuk mengatur warna suatu sel dalam tabel • border – menentukan ukuran border tabel (dalam pixel). • rowspan – menggabungkan beberapa baris • colspan – menggabungkan beberapa kolom • cellpadding - jarak antara isi cell dengan batas cell (dalam pixel). • cellspacing – mengatur spasi/jarak antar cell (dalam pixel). • width – menentukan lebar tabel dalam pixel atau percent. • height – Menentukan tinggi tabel
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: • align - perataan : rata kiri (left), tengah (center) atau kanan (right). • bgcolor - warna latar belakang dari baris. • valign - perataan vertikal : top, middle atau bottom. Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah: • align – untuk menentukan perataan kolom • background – untuk menentukan image yang digunakan sebagai latar belakang dari kolom. • bgcolor – untuk menentukan warna latar belakang • colspan - lihat gambar contoh • height – untuk mengatur ukuran tinggi cell dalam pixels. • nowrap – untuk membuat supaya isi dari kolom tetap berada pada satu baris. • rowspan - lihat gambar contoh • valign – untuk mengatur perataan vertikal: top, middle atau bottom. • width – untuk menentukan lebar kolom dalam pixel atau percen. Contoh : ::: Pembuatan Table :::
Hasilnya adalah: Contoh yang lain:::: Pembuatan Table ::: Ini contoh tabel sederhana tanpa border Ini contoh tabel sederhana dengan border
Hasilnya adalah sebagai berikut: Menambahkan Judul Tabel Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel, judul kolom table dan judul baris tabel. Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut. Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADERNo. Nama Alamat 1. Jam 'Iyatul Khoir Bulubrangsi Lamongan 2. Ari Mulyaningsih Wringin Anom Gresik . Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judul baris terletak pada baris pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal. Contoh 1: ::: Pembuatan Judul Table :::
Hasil akan tampak sebagai berikut: Contoh 2:Daftar Alamat No. Nama Alamat 1. Jam ‘Iyatul Khoir Bulubrangsi Lamongan 2. Ari Mulyaningsih Wringin Anom Gresik ::: Pembuatan Judul Table :::
Hasilnya akan tampak seperti berikut:Daftar Alamat No. 1. 2. Nama Jam ‘Iyatul Khoir Ari Mulyaningsih Alamat Bulubrangsi Lamongan Wringin Anom Gresik Berita "Komputer Dan Internet" Lainnya
- dan diantara tag tersebut ditambahkan tag
Visitors :7724 Org
Hits : 22429 hits
Month : 343 Users