Artikelnya acak-acakan , hehehehe
semoga bisa membaca ya ?
Kalau memnag bingung-bingung beneran,
Hypertext
Markup Language
(HTML)
merupakan dasar untuk membuat sebuah
halaman
website. Dokumen dan aplikasi yang dapat berjalan di atas web browser
umumnya
memiliki format hypertext markup language (HTML). Meskipun sekarang
terdapat
banyak tool atau software yang dapat digunakan untuk merancang sebuah
halaman
secara WYSIWYG (what you see is what you get), jadi apa yang anda lihat
itulah
yang akan anda dapatkan seperti frontpage, dreamweaver, adobe golive, dll.
Namun
anda harus tetap menguasai HTML karena HTML merupakan dasar apabila
Anda
ingin mempelajari dan lebih mendalami tentang web programming. Hal ini
menunjukan
bahwa sangat pentingnya mempelajari dasar-dasar HTML. Karena itu
untuk
dapat melakukan pemrograman aplikasi di atas web anda harus terlebih dahulu
menguasai
HTML.
Pada
bab ini akan dipelajari dasar-dasar penggunaan kode-kode HTML daiantaranya :
Struktur
dasar HTML, dasar penggunaan TAG, penggunaan komentar, penggunaan tag
break
row, penggunaan tag paragraf, penggunaan tag center, penggunaan tag heading,
menampilkan
garis horizonatal dan penggunaan tag divisi.
Setiap
dokumen atau halaman HTML memiliki struktur atau susunan file seperti terlihat
pada
contoh berikut :
Struktur.html
<html>
<head>
<title>judul yang ingin ditampilkan pada
title bar web browser</title>
</head>
<body>
pada bagian ini dapat berisikan perintah-perintah
untuk menampilkan : Text, gambar, suara dan lain-lain.
</body>
</html>
Seperti
terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup
dengan
</html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang
diapit oleh
tag
<head> … </head> dan tag <body> … </body>.
Header
dari halaman HTML diapit oleh tag <head> dan bagian ini tidak ditampilkan
pada
browser. Bagian ini berisi tag-tag header seperti <title> …
</title> yang berfungsi
untuk
menampilkan judul pada title bar window pada web browser. Tag lain misalnya
<meta>
dan tag-tag lainya yang akan kita pelajari selanjutnya.
Bagian
kedua yang diapit oleh tag body merupakan bagian yang akan ditampilkan pada
halaman
web browser nantinya. Pada bagian ini anda dapat menuliskan semua jenis
informasi
berupa teks dengan bermacam format maupun gambar yang ingin anda
sampaikan
pada pengguna nantinya.
Untuk
lebih memperjelas perhatikan gambar berikut ini :
Nama
berkas/file
2.3
Dasar Penggunaan Tag
Tag
HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol <
dan
>. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / .
misalnya
pasangan dari tag <example> adalah </ example >.
Sebagian
tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita
kenali
berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag
ditulis
dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi
sama
sekali.
Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran.
Beberapa
tag ada yang menggunakan atribut di dalamnya. Contoh : <P
align=”center”>,
pada
contoh ini P adalah nama tag, sedangkan align adalah nama atribut
dan center
adalah
nilai atribut.
2.4
Pemberian Catatan/Komentar pada Dokumen HTML
Catatan
adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan
catatan/komentar
dalam kode HTML adalah sebagai keterangan yang berguna untuk
pembaca
kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan
bahkan
bisa mencakup beberapa baris.
Komentar.html
<!--Program ini dibuat pada tanggal 06 Oktober 2005 -->
<html>
<head>
<title>Hai</title>
<Body>
<!-- Catatan bisa diletakan dimana saja -->
Saya Sedang Belajar HTML
</body>
</html>
2.5
Penggunaan Tag Break Row (pindah baris)
Tag
ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata
lain
satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk
lebih jelas
sekarang
perhatikan contoh berikut ini :
Breakrow.html
<html>
<head>
<title>belajar tag br</title>
</head>
<body>
Mudah-mudahan anda cepat bisa belajar HTML <br>
Amin …!
</body>
</html>
2.6 Penggunaan
Tag Paragraf
Tag
<P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan
paragraf/tek
kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih
jelasnya
perhatikan contoh di bawah ini.
Paragraf1.html
<html>
<head>
<title>belajar tag paragraf</title>
Dasar HTML
12
</head>
<body>
Senja Telah Tiba<p>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus dari samudera<br>
Pertanda malam telah tiba
</body>
</html>
Atribut
Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur
peletakan
teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode
HTML
di atas dengan kode seperti yang terlihat pada contoh program HTML berikut :
Paragraf2.html
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba
<p align = “center”>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus ke samudera<br>
Pertanda malam telah tiba<br>
</p>
Bandar Lampung, 2004
</body>
</html>
2.7
Penggunaan Tag Center
Untuk
meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan
untuk
mengakhiri
penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita
perlu
menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah :
</center>.
Untuk jelasnya perhatikan latihan di bawah ini :
center.html
<html>
<head>
<title>belajar tag center </title>
</head>
<body>
<center>
Addres :
<hr>
Green Kost Production<br>
Dasar HTML
13
<hr size = 5 width = 25% align = left
noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</center>
</body>
</html>
2.8
Penggunaan Tag Heading
Tag
ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam
badan
dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling
besar
ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling
kecil
ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih
dari
enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena
standarnya
adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang
terbesar
sampai terkecil dapat dilihat pada tatacara penulisan berikut ini :
·
·
·
·
·
·
<H1> … </H1> (Heading 1)
<H2> … </H2> (Heading 2)
<H3> … </H3> (Heading 3)
<H4> … </H4> (Heading 4)
<H5> … </H5> (Heading 5)
<H6> … </H6> (Heading 6)
Untuk
memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html
<html>
<head>
<title>belajar tag heading</title>
</head>
<body>
<h1>ukuran heading 1</h1>
<h2>ukuran heading 2</h2>
<h3>ukuran heading 3</h3>
<h4>ukuran heading 4</h4>
<h5>ukuran heading 5</h5>
<h6>ukuran heading 6</h6>
</body>
</html>
seperti
halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu
atribut yang
bisa
digunakan adalah atribut align yang bisa bernilai : center, left,
right, justify.
Cara
menuliskan pada dokumen HTML adalah <h1 align=”center”>.
2.9
Menampilkan Garis Horisontal (Horizontal Row)
Agar
tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat
dokumen
web sering menambahkan garis horisontal biasanya diletakkan di bawah
sebuah
teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali,
caranya
yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr>
juga bisa
ditambahkan
atribut-atribut seperti berikut ini :
·
·
·
·
Size
Width
Align
Noshade
:
Untuk merubah Ketebalan garis
: Untuk merubah lebar garis
:
Untuk mengatur tataletak teks dalam baris
:
Untuk merubah agar garis yang dibuat tidak disertai bayangan
Berikut
adalah contoh kode HTML yang menggunakan tag ini :
Garis.html
<html>
<head>
<title>belajar membuat garis </title>
</head>
<body>
Addres :
<hr>
Green Kost Production<br>
Dasar HTML
15
<hr size = 5 width = 25% align = left
noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</body>
</html>
2.10
Penggunaan Tag Divisi
Tag
ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe
sama.
Fungsinya bisa juga disamakan dengan tag <P>. perhatikan pada contoh
berikut
ini
:
Divisi.html
<html>
<head>
<title>belajar tag div </title>
</head>
<body>
<div align=”right”>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</div>
</body>
</html>
0 komentar:
Posting Komentar