Pengenalan HTML - japikinfo.com
Transcript of Pengenalan HTML - japikinfo.com
Pengenalan HTMLPemrograman Berbasis Web 1
Oleh :
Aririk Japik. S.Kom
copyright by :www.japikinfo.com
Apa itu HTML ?• HTML (Hypertext markup language) adalah suatu
bahasa markup (bertanda) dengan menggunakan rangkaian teks tertentu (tag) atau simbol untuk mengidentifikasikan berbagai bagian dari halaman web.
• Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu (tag) untuk menjadi dokumen HTML (file *.htm atau *.html).
copyright by :www.japikinfo.com
Lat1.html<!- - lat1.html--><HTML><HEAD><TITLE>Judul Halaman</TITLE></HEAD><BODY>Isi dokumen</BODY></HTML>
copyright by :www.japikinfo.com
Lat2.html<HTML><HEAD><TITLE>Judul Halaman</TITLE></HEAD><BODY BGCOLOR="yellow" TEXT="red">Isi dokumen</BODY></HTML>
copyright by :www.japikinfo.com
Memformat Dokumen HTML• Tag <br> / Line Break<html><head><title>pindah baris</title></head><body>Hari ini Belajar Web 1<br>Mudah2an dapat ilmunya</body></html>
copyright by :www.japikinfo.com
Memformat Dokumen HTML• Tag <p> / Paragraph<html><head><title>Pemisahan Paragraf</title></head><body><p align="justify">World Wide Web (WWW) / Web menggunakan HTTP (HyperText Transfer Protokol) sebagai protokol komunikasi dan menyampaikan informasi berbasis web kepada pemakai dalam bentuk HTML (HyperText Markup Language).</p><p align="center">HTML adalah suatu bahasa mark up (bertanda) dengan menggunakan rangkaian teks tertentu (tag) atau simbol untuk mengidentifikasikan berbagai bagian dari halaman web.</p></body></html>
copyright by :www.japikinfo.com
Memformat Dokumen HTML• Tag <hr> / Horizontal RulerAtribut Fungsi
align Merupakan posisi vertikal garis perintah. Nilainya adalah left, right atau center.
width Lebar dari garis batas. Nilai yang dimasukkan dapat berupa pixel ataupun persen dari lebar jendela browser.
size Menentukan tebal garis batas
noshade Menonaktifkan efek tiga dimensi
color Menentukan warna garis batas
copyright by :www.japikinfo.com
ex:<html><head><title>Menggunakan Garis Batas</title></head><body>Garis batas biasa <hr>Garis batas dengan posisi di kanan, lebar 250 pixel,
warna merah <hr align="right" width=250 color="red">
Garis batas dengan tebal 3 pixel, tanpa efek tiga dimensi<hr size=3 noshade>
</body></html>
copyright by :www.japikinfo.com
Memformat Dokumen HTML• Tag <hn> / Heading<html><head><title>Heading</title></head><body>
<h1> Ini Heading 1 </h1><h2> Ini Heading 2 </h2><h3> Ini Heading 3 </h3><h4> Ini Heading 4 </h4><h5> Ini Heading 5 </h5><h6> Ini Heading 6 </h6>
</body></html>
copyright by :www.japikinfo.com
Memformat Dokumen HTML• Tag <pre> / Preview
<html><head><title>pre</title></head><body><pre>for I = 1 to 10
for j = 1 to 5A(I,j) = i*j
nextnext</pre></body></html>
copyright by :www.japikinfo.com
Tag ListUntuk membuat daftar pada HTML, kita bisa menggunakan
tag List.
• Unordered List (Bullet)<html><head><title>bullet</title></head><body><ul>
<li>Honda</li><li>Yamaha</li><li>Suzuki</li></ul>
</body></html>
<html><head><title>type bullet</title></head><body><ul><li type=square>Honda</li><li type=disk>Yamaha</li><li type=circle>Suzuki</li></ul></body></html>
copyright by :www.japikinfo.com
Tag List• Ordered List (Numbering)<html><head><title>numbering</title></head><body><ol type=i start=10>
<li type=1>Sistem Informasi</li><li type=A>Teknik Informatika</li><li type=i>Sistem Komputer</li></ol>
</body></html>
1 dengan penomoran 1, 2, 3 …A dengan penomoran A, B, C …a dengan penomoran a, b, c …I dengan penomoran I, II, III …i dengan penomoran i, ii, iii …
copyright by :www.japikinfo.com
Definition ListAdalah daftar yang mempunyai keterangan pada itemnya. Untuk memakai definition list digunakan tag <dl> dan tag </dl>. Tag ini bekerja dibantu dengan tag lainnya yaitu tag <dt> yang menandakan item yang dijelaskan dan tag <dd> yang menyatakan definisi dari item.
<html><head><title>definition list</title></head><body><dl><dt>DJB<dd>Jambi<dt>MDN<dd>Medan<dt>JKT<dd>Jakarta</dl> </body></html>
copyright by :www.japikinfo.com
Tag <font>
Atribut Fungsiface Untuk menentukan jenis font biasanya
dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.
color Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff)
size Untuk menentukan ukuran dari font 1 - 7
<font [face=”nama font”] [color=warna] [size=ukuran]>
copyright by :www.japikinfo.com
Ex:
<html> <head> <title> Penggunaan Tag <Font> </title> </head>
<body> <font face="Arial" size=2 color=#FF0080> Arial </font><font face="Times New Roman" size=7 color=blue> Times New Roman </font></body> </html>
Tag <font>
copyright by :www.japikinfo.com
Menambahkan Gambar
Atribut Fungsi
src •Top, bottom, middle digunakan untuk menentukan posisi gambar terhadap teks
· Left, right, center untuk menentukan posisi gambar di dokumen
width Menentukan lebar dari gambar dalam pixel
height Menentukan tinggi dari gambar dalam pixel
alt Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan. (Pada browser tertentu dapat pula ditampilkan sebagai tool tip)
hspace Mengatur frame yang mengeliligi gambar secara horizontal
vspace Mengatur frame yang mengeliligi gambar secara vertikal
<img src=”URL” [align=”posisi”] [width=ukuran] [height=ukuran] [alt=”teks”] [hspace=ukuran] [vspace=ukuran]>
copyright by :www.japikinfo.com
Menambahkan Gambarex:<html>
<head> <title> Menambahkan gambar </title> </head> <body> <p><img src="hinata.jpg" height="100" width="100"> Default alignment at the bottom</p>
<p><img src="hinata.jpg" height="100" width="100" align="top">Aligned at Top</p> <p><img src="hinata.jpg" height="100" width="100" align="middle">Aligned at Middle</p> <img src="hinata.jpg" height="100" width="100" alt="hinata"></body> </html>
copyright by :www.japikinfo.com
Menggunakan Link
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika link diklik, maka dokumen HTML akan menuju ke alamat tersebut. Link berhubungan erat dengan apa yang disebut anchor. Anchor merupakan sesuatu yang dapat digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag <a>.
Atribut Keterangan
Href Digunakan jika sebuah anchor akan digunakan sebagai link
Name Digunakan jika anchor akan digunakan sebagai tujuan
copyright by :www.japikinfo.com
Menggunakan LinkAda 3 jenis link :•Link relatifdibuat apabila kita membuat suatu link pada page kita kepage yg lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap.jika 2 page pada direktori yang sama, dapat menuliskan nama file html sebagai berikut :<a href=“file_2.html’>berikutnya</a>
•Link absolutDibuat apabila kita membuat link ke page web yang lain yang berada pada website lain diinternet. Dalam hal ini kita harus menuliskan alamat internet secara lengkao, contoh :<a href =http://ipi-leppindo> kampusku</a>•Link dalam dokumen yang sama.Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dibrowser web akan mengharuskan kita melakukan scrool layar berulang-ulang.contoh :
<a href=“#namabagian”>bagian tentang link</a># link berada dalam dokumen yang sama
copyright by :www.japikinfo.com
Menggunakan Linkex:
<html><head><title> Menggunakan Link </title></head><body><a href="http://www.google.co.id"> Klik di sini </a> untuk menuju
www.google.com.<br>Atau dapat juga mengklik gambar ini: <a href="http://www.google.co.id"> <img src="google.jpg" alt="www.google.com"> </a> <br><br><a href="#Tengah"> Jika ini yang diklik </a> akan menuju ke bagian
tengah dokumen.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><a name=Tengah> Ini adalah bagian tengah dokumen.</a></body></html>
copyright by :www.japikinfo.com
• Elemen-elemen TabelDigunakan untuk menyajikan data dalam bentuk kolom dan baris.
Elemen Penjelasan
<table>…</table>
Mendefinisikan sebuah tabel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border
<caption>…</caption>
Mendefiniskan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel. Atribut align=“bottom” dapat digunakan untuk menempatkan judul pada bagian bawah tabel.
<tr>….</tr> Menspesifikasikan sebuah baris tabel dalam tabel. Kita dapat mendefinisikan atribut untuk seluruh baris:align(left,center,right) atau valign(top,middle,bottom)
<th>…..</th> Mendefinisikan sel header table. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.
<td>……</td> Mendefinisikan sebuah sel data tabel.
Colspan=n Jumlah n kolom sel diperlebar
rowspan=n Jumlah n baris sel diperbesar
Tabel HTML
copyright by :www.japikinfo.com
Ex :<!--coba_table.html-->
<html>
<body>
<p>setiap tabel dimulai dengan sebuah tag table
setiap baris dimulai dengan sebuah tag tr.
setiap data dimulai dengan tag td</p>
<h4>satu kolom</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>satu baris dan tiga kolom</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>dua baris dan tiga kolom</h4>
<table border="2">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>copyright by :www.japikinfo.com
Tabel headers dan Caption<html><body><h4>table headers</h4><table border="1"><caption>CP Bill Gates</caption><tr>
<th>name</th><th>telephone</th><th>email</th>
</tr><tr>
<td>Bil gates</td><td>555 77 854</td><td>[email protected]</td>
</tr></table></body></html>
copyright by :www.japikinfo.com
Latihan, buat table header secara vertikal
copyright by :www.japikinfo.com
Jawab :<html><body><h4>vertical headers</h4><table border="1"><caption>CP Bill Gates</caption><tr>
<th>Name</th><td>Bill Gates</td>
</tr><tr>
<th>Telephone</th><td>555 77 854</td>
</tr><tr>
<th>email</th><td>[email protected]</td>
</tr></table></body></html>
copyright by :www.japikinfo.com
Colspan dan Rowspan<html><body><h4>Cell that spans two colomns</h4><table border="1"><tr>
<th>Name</th><th colspan="2">telephone</th>
</tr><tr>
<td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
</tr></table></body></html>
untuk mendefinisikan cell table yg dilebarkanlebih dari Satu baris atau satu kolom.
copyright by :www.japikinfo.com
Lat. Buat dengan rowspan tampilan dibawah ini
copyright by :www.japikinfo.com
jawab<html><body><h4>Cell that spans two rows</h4><table border="1"><tr>
<th>First Name</th><td>Bill Gates</td>
</tr><tr><th rowspan="2"> telephone</th><td>555 77 854</td></tr><tr>
<td>555 77 855</td></tr></table></body></html>
copyright by :www.japikinfo.com
CellPadding dan CellspacingCellpadding membuat spasi lebih dari antara sel dan bordernya.Cellspacing menambah jarak antarsel
<html><head><title>cellpadding</title> </head><body><table border="1" bgcolor="yellow" bordercolor="red"><caption>without cellpadding</captio><tr>
<td>first</td><td>row</td>
</tr><tr>
<td>second</td><td>row</td>
</tr></table><caption>with cellpadding</captio<table border="1" bgcolor="yellow" bordercolor="red" cellpadding="10"><tr>
<td>first</td><td>row</td>
</tr><tr>
<td>second</td><td>row</td>
</tr></table></body></html>
copyright by :www.japikinfo.com
CellPadding dan CellspacingCellpadding membuat spasi lebih dari antara sel dan bordernya.Cellspacing menambah jarak antarsel
<html><head><title>cellpadding</title></head><body><table border="1" bgcolor="yellow" bordercolor="red"><caption>without cellspacing</caption><tr>
<td>first</td><td>row</td>
</tr><tr>
<td>second</td><td>row</td>
</tr></table><table border="1" bgcolor="yellow" bordercolor="red" cellspacing="10"><caption>with cellspacing</caption><tr>
<td>first</td><td>row</td>
</tr><tr>
<td>second</td><td>row</td>
</tr></table></body></html>
copyright by :www.japikinfo.com
lat
copyright by :www.japikinfo.com
FRAME
• Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-masing bagian terdiri dari dokumen HTML tersendiri.
• Untuk membuat sebuah frame, tag yang digunakan adalah <frameset> dan <frame>. Selain itu terdapat sebuah tag lagi yaitu <noframes> yang digunakan untuk menampilkan sebuah alternative dokumen jika browser tidak mendukung penggunaan frame. Sebuah frame dapat didefenisikan di dalam frame yang lain.
copyright by :www.japikinfo.com
FRAMETag <frameset> mempunyai beberapa atribut, yaitu:
Atribut Keterangan
rows Membuat frame secara mendatar (baris) sekaligus mendefenisikan lebar masing-masing
cols Membuat frame secara vertikal (kolom) sekaligus mendefenisikan lebar masing-masing
bordercolor Mendefenisikan warna bingkai frame
copyright by :www.japikinfo.com
Untuk mendefenisikan lebar frame pada atribut rows dan cols dengan menggunakan:
• Dengan nilai tetap. Setiap frame didefenisikan dalam ukuran pixel
<frameset rows=”100,240,400”>• Dengan nilai persentase. Lebar setiap frame didefenisikan
sebagai persentase dari lebar jendela browser<frameset rows=”30%,40%,30%”>
• Dengan nilai proposional. Lebar setiap frame juga didefenisikan sebagai persentase dari jendela browser
<frameset rows=”*,2*,*”>
copyright by :www.japikinfo.com
Tag <frame> juga mempunyai beberapa atribut, yaitu:
Atribut Keterangan
Src Menentukan nama file HTML yang digunakan sebagai isi frame
Marginheight Menentukan batas atas dan bawah antara dokumen dengan bingkai dalam pixel
Marginwidth Menentukan batas kiri dan kanan antara dokumen dengan bingkai dalam pixel
Scrolling Menentukan apakah frame dapat memiliki scroll bar. Nilainya adalah yes, no atau auto
Noresize Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya
Name Mendefenisikan nama dari objek frame. Nama ini dapat digunakan sebagai tujuan sebuah link
Border Menentukan ukuran bingkai frame
copyright by :www.japikinfo.com
Buatlah tiga buah file HTML dengan nama satu.htm, dua.htm, dan tiga.htm, masing-masing sebagai berikut:
<html><head><title> Menggunakan Frame </title></head><body><font size=7>INI FRAME KE n<!--Gantilah n dengan angka 1, 2, atau 3 sesuai dengan nama filenya--></font></body></html>
copyright by :www.japikinfo.com
Setelah itu buatlah file HTML dengan nama frame.htm sebagai
berikut:<html>
<head><title> Menggunakan Frame </title></head>
<!--Jika digunakan frameset maka tag body tidak digunakan--><frameset rows="*,*,*"><frame src="satu.htm" name=fraSatu><frame src="dua.htm" name=fraDua scrolling="yes"><frame src="tiga.htm" name=fraTiga noresize></frameset></html>
copyright by :www.japikinfo.com
Lat :buat tampilan dibawah ini :
copyright by :www.japikinfo.com
Jawab :<html><title>Contoh Frame</title><frameset rows="30%,70%" ><frame src="atas.html" name="atas" ><frameset cols="20%,60%,20%"><frame src="kiri.html" name="kiri"><frame src="utama.html" name="utama" ><frame src="kanan1.html" name="kanan" ></frameset></frameset></html>
copyright by :www.japikinfo.com
Form dan Input HTML• Field text
<html><body>Nama :<input type="text" name="nama" /><br />NIM :<input type="text" name="nim" /><br />
copyright by :www.japikinfo.com
checkbox<html><body>Saya Suka Buah<br><input type="checkbox" name="tomat" />Tomat<br /><input type="checkbox" name="apel" />Apel<br />
copyright by :www.japikinfo.com
Radio button<html><body>Saya Suka Buah<br><input type="radio" name="tomat" />Tomat<br /><input type="radio" name="apel" />Apel<br />
copyright by :www.japikinfo.com
dropdown<html><body><fieldset><legend>jurusan Anda</legend><form><select name="jur"><option value="si">SI<option value="si">TI<option value="si">SK</select></form></fieldset></body></html>
copyright by :www.japikinfo.com