Belajar Mengenal Dasar-dasar HTML (Hyper Text Marquee Languange):
Sebagai seorang blogger baik blogger profesional maupun blogger personal sebaiknya kita menguasai dasar-dasar dari bahasa HTMLkarena dengan mengerti bahasa HTML akan memudahkan kita dalam mengoprek dan mengoptimasi website atau blog yang kita miliki, oleh karena itu saya akan menulis sedikit tentang dasar-dasar bahasa HTML yang semoga bisa memberi sedikit pencerahan bagi kita semua.
A. DEFINISI HTML
HTML (Hypertext Markup Language) merupakan suatu bahasa pemrograman untuk membangun sebuah dokumen dalam bentuk halaman di web (walaupun banyak orang yang keberatan) menyebutHTML sebagai bahasa pemrograman Karena dirasa terlalu sederhana, hanya terdiri dari tag <html>sampai </html>, selain itu juga, HTML tidak memiliki ‘looping’ seperti bahasa pemrograman lain. Namun dalam hal ini, tidak bisa dipungkiri bahwa HTML selalu ada pada sebuah halaman web page, karena HTML dapat dipergunakan sebagai hypertext link yang mampu membentuk hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.
B. STRUKTUR DASAR HTML
Adapun susunan penulisan HTML, secara mudah mempunyai struktur sebagai berikut berikut:
<html>
<html>
<head>
<title>
Nama judul yang akan muncul pada browser
</title>
</head>
<body>
semua data, baik itu tulisan,gambar,maupun suara akan ditampilkan disini.
</body>
</html>
Dalam HTML juga terdapat suatu komponen (tag) yang kegunaannya dapat dilihat dibawah ini:
Tag Dasar
<html>…</html>
|
Mendefinisikan sebuah dokumen HTML
|
<head>…</head>
|
Mendefinisikan isi atau badan sebuah dokumen HTML
|
<body>…</body>
|
Mendefinisikan judul, deskripsi dan meta tag sebuah dokumen HTML
|
C. MENGENAL TAG PADA HTML
1. Tag Headline
Dalam model tag headline ada beberapa macam yang sering digunakan untuk memformat tampilan huruf dari kecil dan besar yang dimulai dari <H1></H1> sampai <H6></H6>.
Contoh penggunaan :
<html>
Contoh penggunaan :
<html>
<head>
</head>
<body>
<h1> Heading h1</h1>
<h2> Heading h2</h2>
<h3> Heading h3</h3>
<h4> Heading h4</h4>
<h5> Heading h5</h5>
<h6> Heading h6</h6>
<h7> Heading h7</h7>
</body>
</html>
2. Tag List
Tag ini biasanya digunakan untuk menampilkan informasi dalam bentuk daftar (list). Adapun jenis tag list ini ada dua yaitu format bullet (bulleted list) dan dalam bentuk nomor (ordered list). Biasanya ditambahkan dengan tag yang berbeda yaitu dengan tag <UL> dan<OL>.
Contoh penggunaan :
<html>
Contoh penggunaan :
<html>
<head>
</head>
<body>
<h2> Daftar Nama Dalam Bentuk Nomor </h2>
<ol>
<li>rian
<li> Bumi
<li> Sasongko
</ol>
<h3> Daftar Nama Dalam Bentuk Bullet </h3>
<ul>
<li> Aryasatya
<li> Bumi
<li> Sasongko
</ul>
</body>
</html>
3. Tag hr
Tag <hr> digunakan untuk membuat garis batas horizontal dan sekaligus akan membentuk baris baru.
4. Tag Br
Tag <br> biasanya digunakan untuk penggantian baris baru. Sehingga kita dapat membuat baris baru bagi dokumen yang memerlukan pergantian baris.
D. MEMFORMAT FONT DAN MENEMPATKAN GAMBAR
Dalam halaman web kita juga dapat melakukan pengaturan font dan gambar sehingga halaman web kita dapat terlihat lebih indah dan menarik. Penulisan perintah untuk memformat Font adalah sebagai berikut :
<font atribut></font>, untuk atribut dapat berupa size, face maupun lainnya.
Sedangkan penulisan perintah untuk menempatkan gambar adalah sebagai berikut <img scr="/url/nama_file"> dengan format yang sering digunakan adalah JPG, GIF dan PNG.
Tag <img> selalu diikuti dengan atribut src yang menunjukkan lokasi dan nama file grafik yang ingin kita tampilkan. URL (Universal Resources Locator) adalah alamat absolut dari file grafik tersebut.
Atribut tambahan untuk instruksi <img> adalah Align. Atribut ini mengendalikan letak (alignment) teks yang berada di baris yang sama dengan grafik terhadap sisi vertikal gambar. Atribut Align ditulis dengan cara sebagai berikut :
<img src="gambar.gif" align=top>
Anda dapat melihat atribut pada image seperti pada table dibawahi ini:
Tabel 2. Atribut pada image
ATRIBUT
|
KEGUNAAN
|
Width
|
Memberikan informasi mengenai ukuran lebar gambar kepada browser sebelum file grafiknya sendiri dikirimkan.
|
Height
|
Memberikan informasi mengenai ukuran vertikal gambar kepada browser sebelum file grafiknya sendiri dikirimkan.
|
Vspace
|
Menentukan jarak diatas dan dibawah
|
Hspace
|
menentukan jarak diatas dan dibawah
|
Border
|
Menentukan garis pinggir disekitar gambar.
|
E. MEMBUAT TABLE DENGAN HTML
Keberadaan tabel sangatlah penting dalam menampilkan dokumen atau informasi yang memerlukan banyak kolom dan baris. Namun lebih dari itu, table dapat menjadi alat utama dalam HTML untuk mengendalikan tata letak dokumen pada web kita..
Table 3. Struktur table
Tag
|
Kegunaan
|
<Table>….</tabel>
|
Digunakan untuk menampilkan data dalam bentuk table
|
<th>..…….</th>
|
Digunakan untuk menampilkan judul pada kolom
|
<tr>………</tr>
|
Digunakan untuk menentukan baris (table row)
|
<td>………</td>
|
Digunakan untuk menampilkan data pada setiap table (table data)
|
Anda dapat lebih memahami tag tag diatas dengan mencoba membuat table dengan kode HTML dibawah ini.
Contoh penggunaan :
<html>
Contoh penggunaan :
<html>
<head>
<title> Pengunaan table</title>
</head>
<body >
<table border="1">
<tr>
<th>kolom1</th>
<th>kolom2</th>
<th>kolom3</th>
<tr>
<td>isi baris 1 kolom 1</td>
<td>isi baris 1 kolom 2</td>
<td>isi baris 1 kolom 3</td>
</tr>
<tr>
<td>isi baris 2 kolom 1</td>
<td>isi baris 2 kolom 2</td>
<td>isi baris 2 kolom 3</td>
</tr>
</table>
<br>
<br>
<table border ="1">
<tr>
<td>isi baris 3 kolom 1</td>
<td>isi baris 3 kolom 2</td>
<td>isi baris 3 kolom 3</td>
</tr>
</table>
</body>
</html>
F. MEMBUAT LINK
Kelebihan HTML adalah dapat berpindah dari satu halaman ke halaman yang lain. Suatu link hypertext, dalam suatu dokumen Web, dapat berupa gambar atau teks. Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan oleh link tersebut. Beberapa model link yang dapat anda gunakan adalah seperti dibawah ini:
1. Model link Absolute
Model ini dapat ditulis sebagai berikut dengan intruksi:
<a href=” http:// www.yahoo.com”>
2. Model berpindah Halaman
<a href=” dokumen.htm”>
3. Model link satu halaman
<a href=”# nama_link”>
Dengan catatan nama_link telah didefinisikan terlebih dahulu dengan cara:
<a name=” nama_link”>
G. ELEMEN FORM
Keberadaan form dalam HTML sangatlah penting, Form dalam HTML ditandai dengan tag <FORM> dan </FORM>. Sewaktu kita membuat elemen form, kita perlu menentukan bagaimana dan kemana data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web server. Hal ini dilakukan dengan pernyataan Action dan Method. Action menunjukkan lokasi tempat program CGI yang hendak dijalankan, sedangkan Method menunjukkan bagaimana informasi yang diisikan dalam form harus dikirimkan ke web server. method yang umum adalah get dan post.
1. Elemen Textarea
Textarea biasanya dipakai, bila kita menginginkan tempat bagi user web untuk memasukkan informasi yang panjangnya beberapa baris. perintah yang dipergunakan adalah : <textarea name=”nama” rows=n col=n>
Name menyatakan nama data yang akan dimasukkan ke dalam textarea ini. cols dan rowsberturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam textarea. bila cols danrows tidak ditentukan dalam kode textarea, maka nilai yang akan dipergunakan adalah 40 karakter lebar dan 4 baris tinggi.
2. Elemen select
Terkadang Anda ingin menyediakan beberapa pilihan kepada user dokumen Web Anda sebagai masukan. <SELECT> akan menampilkan suatu daftar yang dapat dipilih oleh user , baik dalam bentuk menu pop-up maupun menu gulung.
3. Elemen input
Adapun elemen input ini biasanya terdiri dari:
a. Textbox
Elemen ini digunakan untuk membuat kotak text yang mampu menerima masukkan berupa string atau bisa juga text yang teleh dienkripsi.
Untuk model text biasa
Nama: <input type ="text" name=tnama size=xx>
Dimana type yang digunakan yaitu berupa text
Untuk model text yang telah dienkripsi.
Password:
<input type ="password" maxlenght=”6”>
b. Radio button
Elemen ini digunakan untuk menampilkan suatu daftar masukan berupa pilihan, dimana pengguna hanya diperbolehkan memilih satu dari pilihan yang ada.
Contoh:
jenis kelamin :
<input type ="radio" name=jenkel value="laki-laki">
laki-laki
<input type ="radio" name=jenkel value="perempuan">
perempuan
c. Tombol
Elemen ini digunakan untuk menampilkan tombol, baik itu tombol Submit , maupun Reset.
Contoh.
<input type ="submit" value="kirim">
<input type ="reset" value="batal">
1) Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan dara form agar diolah
2) Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian form yang telah diberikan
d. Checkbox
Serupa dengan tombol, Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari beberapa pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih dari satu pilihan. Perintah yang digunakan :
<input type=”checkbox”>
Table 4. Daftar atribut yang digunakan pada elemen form
Atribut
|
Keterangan
|
Name
|
Mendefinisikan nama dari suatu objek
|
Size
|
Menentukan ukuran kotak teks
|
Maxlenght
|
Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks
|
Value
|
Pada elemen kotak teks digunakan untuk menentukan teks yang tertulis. pada elemen check box atau radio digunakan untuk menentukan nilai item yang dipilih sedangkan Pada elemen submit dan reset yaitu digunakan untuk menentukan teks yang tertulis pada tombol
|
Checked
|
Digunakan hanya pada checkbox atau radio untuk menentukan pilihan secara default
|
Type
|
Menentukan tipe input yang akan dibuat
|
0 komentar:
Posting Komentar