Makalah Dasar Pemrograman Web Dengan HTML
Makalah Dasar Pemrograman Web Dengan HTML
WEB DENGAN HTML
Leave a reply
BAB I
PENDAHULUAN
1.1. Latar Belakang
Teknologi semakin hari semakin berkembang. Salah satunya teknologi informasi, banyak sekali
bidang yang memanfaatkan teknologi Informasi. Tuntutan kebutuhan akan informasi dan
penggunaan komputer yang semakin banyak mendorong terbentuknya sebuah jaringan
komputer yang mampu melayani berbagai kebutuhan tertentu.
Jaringan komputer kita kenal dengan nama internet. Internet bisa diakses dan dimanfaatkan
untuk berbagai keperluan, oleh siapa saja dan dimana saja, kapanpun kita
maumenggunakannya.Salah satunya adalah web, yang mampu menyediakan informasi dalam
bentuk teks, gambar, suara maupun gambar bergerak. Dengan kemampuan sepeti ini, web
menjadi sangat terkenal dan perkembangannya sangatlah pesat.
Dengan terus berkembangnya roda perkembangan teknologi, web berkembang menjadi alat
bantu yang tidak hanya mampu menyediakan informasi, namun juga mampu untuk mengolah
informasi. Proses pengolahan informasi dengan memanfaatkan teknologi web menyebabkan
web menjadi media yang dinamis. Hal ini membutuhkan sarana teknis yang yang menentukan.
Sarana tersebut banyak bergantung pada penggunaan perangkat lunak yang kuat, aman,
terpercaya, dan cepat.
Pada kesempatan ini penulis akan membahas tentang bahasa pemrograman HTML sebagai
salah satu perangkat lunak yang turut menentukan dapat digunakannya media web sebagai
media pengolah informasi.
BAB II
PEMBAHASAN
2.1. Umum
Pada masa sekarang ini HTML merupakan interface standard internet. Halaman-halaman HTML
ini bisa mengandung animasi, suara, video, bahkan sampai program interaktif yang kompleks.
Jutaan halaman HTML setiap hari diakses dari web-web server seluruh dunia.
Sudah menjadi tren memang sekarang ini perusahaan-perusahaan melakukan pertukaran
informasi bisnis dan informasi intern pegawai dan pelanggan-pelanggan mereka. HTML
sekarang menjadi pilihan untuk presentasi. Bahkan Microsoft sendiri telah mengintegrasikan
HTML ke sistem operasi Windowsnya. Pendeknya HTML terdapat di mana-mana.
HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs.
HTML sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila ingin belajar
membangun sebuah situs sendiri maka bahasa HTML wajib dipelajari.
2.2. Pengertian HTML
HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan untuk
membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan) terhadap
sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks
yang ditandai halaman web dibangun oleh kode-kode HTML.
HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan karena
HTML ini mudah digunakan. Pembuatan dokumen web dengan HTML dapat dilakukan dengan
mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh
dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman web baik berupa
teks, gambar, suara, animasi maupun video.
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan
sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan
menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga
dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki
kemampuan browser.
a. Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah
dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link
ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen
yang kita tuju.
b. Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi
tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word
Wide Web.
c. Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari
beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau
dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized
Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet,
maka HTML relatif lebih sederhana daripada SGML yang lebih pada format dokumen yang
berorientasi pada aplikasi.
2.3. Fungsi HTML
Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan
dokumen web, yang bisa dilakukan dengan HTML yaitu:
– Menentukan format suatu teks
– Membuat list tentang sekelompok hal
– Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
– Menyisipkan citra atau gambar.
– Menampilkan informasi dalam bentuk tabel
– Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
– Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
– Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen
HTML.
2.4 Struktur HTML
1. Elemen
Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk
menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: ini
adalah tag pembuka judul dokumen HTML
2. Tag
Adalah teks khusus (markup) berupa dua karakter “”, sebagai contoh adalah tag dengan nama
body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup
(ditambahkan karakter “/” setelah karakter “<"), sebagai contoh ini adalah tag pembuka isi
dokumen HTML, dan ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar
dalam HTML adalah:
a.
Tag dan digunakan untuk menandai awal dan akhir dari suatu file HTML.
b.
Tulisan yang berada diantara tag dan akan ditampilkan oleh browser pada bagian title yang
mana merupakan title dari jendela browser.
c.
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.
d.
Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki
sejumlah attribut dapat ditentukan.
Contoh:
Hello World
Hasil:
3. Atribut
Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang
terdiri atas nama dan nilai
Keterangan
Menandai suatu daftar source code program. Biasanya ditampilkan oleh browser dalam suatu
monospaced font yang lebih kecil
Text yang berada diantara tags ini dicetak lebih lebar. Browser umumnya menampilkan cetak
Menentukan ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is 3;
ukurannya dari 1 sampai 7.
Tag yang menentukan tingkat heading dengan nilai antara 1 dan 6, dengan sebagai ukuran
paling besar dan 6 paling kecil
Keyboard tag digunakan untuk mewakili tombol keyboard seperti Del atau Enter. Umumnya
ditampilkan oleh browser dengan suatu monospaced font yang lebih kecil.
Preformatted text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus
digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan anda untuk
meletakan tab dalam dokumen.
(hanya pada Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang berada
diantaranya
Atribut untuk tulisan MARQUEE :
ALIGN
Menentukan bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM
darimarquee tersebut
BEHAVIOR
Setting yang berlaku untuk atribut ini adalah SCROLL, SLIDE, dan ALTERNATE
SCROLL
BGCOLOR
Menentukan arah ke
HEIGHT
Menentukan tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT= n%).
WIDTH
Menentukan margin kiri dan kanan untuk bagianluar marquee dalam pixel.
LOOP
Menentukan jumlah kali marquee harus berputar. Jika diabaikan, set ke -1 atau INFINITE, dan
marquee bergulung sampai user meninggalkan halaman tersebut.
SCROLLAMOUNT
Menentukan margin top dan bottom untuk bagian luar dari marquee dalam pixel.
Cara lain menggambarkan attention pada suatu bagian dari text; biasanya ditampilkan dengan
cetak tebal oleh browser.
Contoh :
Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Hasil :
Contoh :
Font
ukuran 1
ukuran 2
ukuran 3
ukuran 4
ukuran 5
ukuran 6
ukuran 7
Hasil:
Contoh:
Font Face
Arial
Tahoma
Courier New
Hasil:
Entitas
Keterangan
Contoh
Copyright symbol
©
®
®
™
trademark symbol
™
nonbreaking space
<
less-than symbol
&
ampersand
&
"
quotation mark
Contoh :
2 < 3, adalah benar
3 > 4, adalah salah
Hasil:
2 4, adalah salah
Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan
teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu
paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.
c.
Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat
heading
Contoh :
Tulisan ini berada ditengah baris
Hasil:
Tulisan ini berada ditengah baris
Tulisan ini rapat kiri
Yang ini juga ditengah baris
Yang ini rapat kanan
memiliki atribut:
– NOSHADE
– SIZE
– WIDTH.
Contoh :
Horizontal Line
atas
bawah
Hasil:
UL
urutan 1
urutan 2
urutan 3
Hasil:
dan
diganti dengan
dan
.
Contoh :
OL
1. urutan 1
2. urutan 2
3. urutan 3
Hasil:
Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.
a. BORDER
Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser.
Cobalah dengan browser anda untuk mendapatkan setting yang optimal.
b. CELLSPACING
Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-
tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekali
lagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.
c. CELLPADDING
Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data
dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header, row,
dan cels. Tag-tag tersebut adalah table header , table row , dan table data .
d. WIDTH
Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu
persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat
mengkompres jika ukuran jendela browser lebih kecil dari tabel.
e. ALIGN
Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right dari
halaman.
f. BGCOLOR
Sebagaimana pada tag , anda dapat menentukan warna latar belakang dari tabel dengan
menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb atau
nama warna pada Internet Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).
g. BORDERCOLOR (Hanya pada Microsoft Internet Explorer 2.0/3.0)
Hal ini menyerupai attribut BGCOLOR tetapi diaplikasikan pada eksternal dan internal
border.
h. BORDERCOLORLIGHT (hanya pada Microsoft Internet Explorer 2.0/3.0)
Setting ini adalah optional dan menentukan warna sisi terang dari garis kiri atas tabel.
i. BORDERCOLORDARK (hanya pada Microsoft Internet Explorer 2.0/3.0)
Setting ini adalah berlawanan dengan BorderColorLight
2.
Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row
adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
3.
Elemen table header berfungsi sama seperti elemen table data , tetapi elemen table
header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table
header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR,
BGCOLORDARK, dan BGCOLORLIGHT.
BGCOLORLIGHT
4.
Elemen table data menandai awal dan akhir dari tiap sel didalam tabel. Atribut yang sah
untuk elemen table data :
a. COLSPAN
Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika
COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel
b. ROWSPAN
Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika
ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.
c. NOWRAP
Menyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam satu
baris.
5.
Tag CAPTION ditempatkan diantara tag tabel, tetapi tidak diantara row, heading, atau cell
tags. Tulisan dalam CAPTION tags mendefinisikan caption untuk tabel tersebut.
Berikut ini adalah atribut sah yang CAPTION tag.
a. ALIGN
Setting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM; sedangan
Microsoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan CENTER.
b. VALIGN
Dengan VALIGN, anda dapat menentukan vertical alignment dari data diantara table cells.
Atribut ini di set diantara tag yang akan dirapikan. Setting yang sah adalah TOP, MIDDLE,
dan BOTTOM. Tanpa ditentukan hasil tag tersebut adalah center. Sebagai contoh , Top
Aligned menentukan suatu sel akan dirapikan dibagian atas row.
Contoh:
Tabel
1 2
1 2
Hasil:
Gambar
Hasil:
Mailto
Hasil :
b. TITLE
Atribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman memasukkan
title dari halaman tersebut.
c. URN
Menentukan suatu URN (Universal Resource Name) untuk dokumen target.
d. NAME
Atribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari halaman
lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatu
halaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu nama acuan,
URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh, mendefinisikan nama
link Copyright dalam dokumen tersebut.
1. ROWS
Tag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut
dapat ditentukan dalam pixel, persen dengan menempatkan suatu % setelah nilai, atau
nilai relatif dengan menempatkan (*) pada tempat dari nilai.
2. COLS
1. NAME
Atribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat berlaku
sebagai target dari URLs lain.
2. MARGINWIDTH
Ini memungkinkan perancang halaman untuk menentukan lebar dari border frame dalam
jumlah pixel.
3. MARGINHEIGHT
Ini bekerja seperti MARGINWIDTH tetapi berefek pada tinggi dari margin.
4. SCROLLING
Setting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan AUTO. Jika di
set ke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada scrollbar, dan AUTO
menampilkan scrollbar jika besar
dokumen melebihi ukuran frame.
5. NORESIZE
Atribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari frame.
Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.
3.
Data diantara NOFRAMES tags akan diabaikan oleh browser yang mampu menampilkan
frame, dan di tampilkan oleh browser yang tidak mampu menampilkan frame.
* CHECKBOX
Kontrol sederhana TRUE/FALSE, yang mana kalau di check adalah TRUE, dan kosong
menyatakan FALSE.
* HIDDEN
Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat digunakan untuk
mengirim status informasi kembali ke program form-processing.
* IMAGE
Klik pada akan menyebabkan form data dikirim seketika, dan nilainya lewatkan oleh image
dalam x,y kordinat pixel.
* PASSWORD
Fungsi ini seperti textbox, tetapi tulisan yang anda ketik ditampilkan dengan asteriks
sebagai penggantinya.
* RADIO
Fungsi ini menyerupai CHECKBOX control, tetapi hanya satu option button dari group
yang dapat dipilih setiap saat. Pilih Ya atau Tidak
Contoh:
Input radio
Jenis Kelamin
Pria:
Wanita:
Hasil:
* RESET
Ketika tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan nilai initial
masing-masing.
Contoh:
Reset
Hasil:
* SUBMIT
Klik pada tombol akan mengirim form data ke FORM ACTION URL.
* TEXT
Kontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan. Atribut SIZE
dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.
* TEXTAREA
BAB III
PENUTUP
3.1. Kesimpulan
HTML lebih dikenal sebagai standar bahasa untuk membuat dokumen web.
Sesungguhnya Hypertext Markup Language (HTML) justru tidak dibuat untuk
mempublikasikan informasi di web, namun oleh karena kesederhanaan serta kemudahan
penggunaanya, HTML kemudian dipilih orang untuk mendistribusikan informasi di web.
File HTML sebenarnya adalah file teks biasa yang selain berisi informasi yang hendak
ditampilkan kepada pengguna, juga mempunyai perintah-perintah untuk mengatur
tampilan data tersebut. Browserlah yang memiliki kuasa penuh dalam menterjemahkan
perintah-perintah tadi.
3.2.Saran
1. Dalam penulisan kode-kode HTML untuk membuat web diperlukan ketelitian agar tidak
terjadi kesalahan sehingga harus diperlukan perbaikan dari awal.
2. Untuk membuat halaman web yang rapi dan menarik, perlu melakukan pemformatan
tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.
3. Penggunaan warna adalah cara terbaik untuk membuat situs web tetapi jangan terlalu
berlebihan. Komposisi warna, tulisan dan gambar yang seimbang (tampilan yang bagus).
4. Cara pembuatan HTML file perlu diperhatikan supaya search engine seperti Google
mudah mengindex sehingga calon pelanggan yang sedang melakukan searching di
Google mudah menemukan web anda sehingga anda mempunyai peluang mendapat
pelanggan baru.
DAFTAR PUSTAKA
www.klikbelajar.com. Pembuatan situs html. Diakses di Hijau net pada tanggal 9
November 2009 pukul 09:35
www.toodoc.com Pemrograman HTML ebook.html – 12 jam yang lalu. Diakses di Hijau net
pada tanggal 9 November 2009 pukul 09:40
www.pakde-smart75college.blogspot.com. Dasar pemrograman html untuk pemula 2.html.
Diakses di Hijau net pada tanggal 9 November 2009 pukul 09:48
www.rizkyramadhansttg.wordpress.com. Pemrograman html. Diakses di Hijau net pada
tanggal 9 November 2009 pukul 09:50