Barang kali ada diantara teman teman yang masih bingung apa itu HTML?????? nah HTML adlah kepanjangan dari hyper text markup language yaitu adalah salah satu bahasa pemograman berbasis web.
bahasa HTML ini bisa dikatakan adalah bahasa Pemograman berbasis web paling dasar dikarnakan..............
akh saya jd lupa lagi..... hehehehehe
ya udah langsung aja kita lihat cuplikan tutorial dari HTML ini yang saya dapat dari situs ilmu komputer.com dengan format PDF, dan jika anda ingin mempublikasikan kembali di blog atau situs teman teman ya silahkan karena tutorial ini sudah di halalkan untuk di sebarluaskan.
langsung saja kita lihat sedikit cuplikan tentang tuturial HTML ini :
.................
Pengertian HTML
Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah
simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk
menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan <x> dan diakhiri
dengan </x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang
tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya.
Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML selalu
berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan
menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML.
Menggunakan Tag pada HTML
Beberapa contoh penggunaan tag HTML,
Contoh Hasil
<b>Ini tulisan tebal</b>
<i>Ini tulisan miring</i>
<u>Ini tulisan bergaris bawah</u>
Ini baris 1<br>Ini baris 2
Ini garis horizontal <hr>
Ini tulisan tebal
Ini tulisan miring
Ini tulisan bergaris bawah
Ini baris 1
Ini baris 2
Ini garis horizontal
Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>, <input> dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12
pt</font>
hasil
Ini Font Arial berwarna merah dan berukuran 12 pt
Atribut color digunakan untuk menentukan warna tulisan.
Atribut face digunakan untuk menentukan jenis huruf.
Atribut size digunakan untuk menentukan ukuran huruf
Menggunakan Atribut dari Tag
Sebelum memulai sekedar mengingatkan apakah anda sudah membuat folder di drive C:\ yang
bernama HTML jika tidak, buatlah sekarang. Lalu buatlah folder yang bernama bab 1, bab2 dan
seterusnya. Jika anda praktik pada bab 2 maka simpanlah file anda pada folder bab 2.
Demikian untuk seterusnya.
Pada bab 2 ini materi yang diharapkan dapat anda kuasai antara lain:
Menggunakan berbagai attribut dari tag diantaranya:
Tag p, font, table, form, input, select, option, a, body, img, ul, ol, li dan attribut
universal
Contoh-contoh penggunaan tag dan atributnya
Pada bab sebelumnya telah anda pelajari macam-macam atribut dari tag yang terdapat pada
HTML. Sekarang saatnya kita menerapkan atribut tersebut dalam sebuah file. Untuk lebih
memudahkan anda dalam memahami kita langsung saja pada contoh.
>>Pertama jalankan software “PHP DESIGNER 2006”
>>Klik menu File – New – HTML/XHTML
Maka akan nampak sebuah ruang kerja mirip dengan dengan Microsoft Word. Untuk contoh
yang pertama ini kita akan menggunakan atribut dari tag <p>…</p>.
A. Tag <p>…</p>
Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu
kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas
ketik kode di bawah ini.
<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan
default atau bentuk baku tag <p></p> dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag
<p> maka browser akan menganggap rata kiri.</p>
</body>
</html>
Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak
dialog Save, arahkan ke drive C:\ lalu HTML(jika anda membuat folder lain silahkan simpan di
folder anda tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as
Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan
muncul output dari kode anda.
B. Tag <font>…</font>
Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Pada bab 1
telah kita singgung penggunaan atribut font.
Namun kita akan lebih bereksperimen dengan atribut ini.
Seperti biasa klik File – New – HTML/XHTML.
Ketik kode di bawah ini.
<html>
<head>
<title>Atribut dari Tag Font</tile>
</head>
<body>
<p><font face="Arial">Ini Font Arial</font></p>
<p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p>
<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt
berwarna biru sekaligus tebal</b></font>
<p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna
merah, tebal dan berada di tengah</b></font><p>
<p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah,
</font><font face="Verdana" color="blue">Sedangkan ini adalah font Verdana
berwarna biru</font></p>
</body>
</html>
Nb: Tanda Enter pada kode diatas tidak berpengaruh pada tampilan/output pada browser. Enter
digunakan agar kode mudah dibaca.
C. Tag <table>...</table>
Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat tabel daftar tag pada
bab 1 untuk melihat daftar atributnya. Dalam tag <table> juga terdapat 2 tag yang penting
yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat
kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi
anda harus cukup menguasai tag ini.
OK, sekarang buatlah file baru seperti biasa klik File – New – HTML/XHTML. Ketik kode
dibawah ini. Jangan tegang santai saja....!.
<html>
<head>
<title>Atribut dari tag tabel</title>
<body>
<p><b>Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"
cellspacing="0" width="100%">
<tr> <!-- <tr> artinya membuat sebuah baris -->
<td>Ini kolom 1 pada baris 1</td> <!-- <td> = membuat sebuah kolom. -->
<td>Ini kolom 2 pada baris 1</td> <!-- </td> mengakhiri sebuah kolom -->
</tr> <!-- mengakhiri sebuah baris -->
<tr>
<td>Ini kolom 1 pada baris 2</td>
<td>Ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b>Contoh 2: Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"
cellspacing="0" width="100%">
<tr bgcolor="yellow">
<td align="center">Ini kolom 1 pada baris 1</td>
<td align="right">Ini kolom 2 pada baris 1</td>
</tr>
<tr>
<td align="center" bgcolor="red"><font color="white">Ini kolom 1 pada baris
2</font></td>
<td align="right">Ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>
<table border="1" style="border-collapse: collapse" cellpadding="8"
bgcolor="white" width="100%" bordercolor="black">
<tr>
<td><p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web.
Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman
web.</p>
<p>Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi.
Sebenarnya itu adalah tabel hanya saja atribut <font
color="red"><b>border="0"</b></font> sehingga tabel seakan tidak
ada(transparan).</p>
<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai
paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.
Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel
yang berada di dalam tabel utama</p>
<p align="center">
<!-- tag <table> untuk tabel anak -->
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
</tr>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,0</td>
</tr>
<!-- </table ini untuk menutup tabel anak -->
..............
Gimana???? udah Pada ngerti blum???????? saya yakin Pasti anda masih bingungkan??? hehe, ya jelas lah ini cuma cuplikan doank kok.......
ya dah, saya kasih solusinya dh......
buat kalian yang masih penasaran dan pingin memperdalam bahasa pemograman ini anda bisa melihat lebih lanjut dan lengkap dengan mengklik gambar di bawah ini:
Post a Comment