Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
HTML (Hypertext Markup Language)
2
SKEMA DASAR DOKUMEN HTML
<HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML> HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)
3
Tag-tag HTML menentukan tampilan dari document HTML.
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. <BEGIN TAG> </END TAG> Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML. <HTML> . . . </HTML> Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.
4
Bentuk dari tag HTML sebagai berikut:
<ELEMENT ATTRIBUTE = value> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut. Contoh: BODY merupakan element, BGCOLOR (Background) merupakan atribut yang memiliki nilai lavender. <BODY BGCOLOR=lavender>
5
Untuk memulai bekerja dengan HTML anda bisa gunakan editor Note Pad atau editor lainya. Caranya:
1. Ketikkan tag-tag berikut di notepad.
6
2. Simpan dengan nama file one. htm atau one. html 3
2. Simpan dengan nama file one.htm atau one.html 3. Buka dengan browser internet explorer file one.htm maka outputnya akan di tampilkan seperti gambar di bawah ini.
7
HTML Struktur HTML Document
Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML></HTML> tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML. HEAD Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
8
BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. <html> <head> <title>Welcome to HTML</title> </head> <body bgcolor="laveder"> <p>Document HTML yang Pertama</p> </body> </html>
9
DAFTAR TAG <html> Dokumen <head> Header
<title> Judul dokumen <body> Isi dokumen <h1>…<h6> Judul paragraf <p> Paragraf <b>,<i>,<u>,<sup>,<sub> Atribut <br> Ganti baris <font> Font <li>,<ol>,<ul> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan/rujukan) <table> Tabel <! > Komentar <frame>,<frameset>,<iframe> Frame (bingkai) <form> Formulir isian <input>,<textarea>,<select> Komponen isian pada formulir <map> Link berdasar area pada gambar <span>,<div> Pengelompokan elemen dokumen
10
Judul Tingkat 1 Tag Judul (Heading) Judul Tingkat 2 Judul Tingkat 3
<hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1>Judul Tingkat 1</h1> <h2>Judul Tingkat 2</h2> <h3>Judul Tingkat 3</h3> <h4>Judul Tingkat 4</h4> <h5>Judul Tingkat 5</h5> <h6>Judul Tingkat 6</h6> Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6
11
Tag Paragraf (Paragraph)
<p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. </p> <p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
12
Tag Atribut 1 (Bold, Italic, Underline)
<b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi. <p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p> Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal
13
Tag Atribut 2 (Superscript, Subscript)
<sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia. <p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p> <p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O (x1 + x2)2 = x12 + x22 + 2x1x2 2H2 + O2 = 2 H2O
14
Tag Ganti Baris (Break line)
Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br /> Ganti Baris <p>Perkenalkan,<br /> nama saya Ini adalah<br />homepage pertama saya,<br /> karena saya baru belajar tentang cara<br /> membuat homepage.</p> <p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p> Perkenalkan, nama saya Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Paragraf Paragraf
15
Tag Font (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Ukuran : <font size="n"> kalimat </font> <font size="m"> kalimat </font> n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran <font size="1">satu,</font> <font size="2">dua,</font> <font size="3">tiga,</font> <font size="4">empat,</font> <font size="5">lima,</font> <font size="6">enam,</font> <font size="7">tujuh</font> Ukuran satu, dua, tiga, empat, lima, enam, tujuh
16
Tag Font (face) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Jenis huruf : <font face="nama font"> kalimat </font> nama font = Times New Roman, Arial, Courier New, Verdana, dll. <font face="Times New Roman">Homepage ini masih dalam tahap pengembangan</font><br/> <font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br/> <font face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br/> <font face="Verdana">Homepage ini masih dalam tahap pengembangan</font> Homepage ini masih dalam tahap pengembangan
17
Tag Font (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Warna : <font color="#RRGGBB"> kalimat </font> RR = FF (intensitas warna merah dalam heksadesimal) GG = FF (intensitas warna hijau dalam heksadesimal) BB = FF (intensitas warna biru dalam heksadesimal) Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua <b><font color="#FF0000">Red</font><br /> <font color="#800000">Maroon</font><br /> <font color="#00FF00">Lime</font><br /> <font color="#008000">Green</font><br /> <font color="#0000FF">Blue</font><br /> <font color="#000080">Navy</font><br /> <font color="#FFFF00">Yellow</font><br /> <font color="#FF00FF">Fuchsia</font><br /> <font color="#00FFFF">Aqua</font></b>
18
List HTML List merupakan bentuk yang biasa kita gunakan untuk menguraikan daftar sesuatu. Jenis-jenis list yang terdapat dalam HTML adalah 1. List dengan nomor (Ordered List) : 1. Donny 2, Beni 3. Soni 2. List tanpa nomor (Unordered List) : - Shinta - Shanti - Tuti 3. List definisi. Coffee Black Hot Drink Milk White Cold Drink
19
Tag Enumerasi (List, Unordered List, Ordered List)
<li>item</li> Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet) kelompok item ini harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol> Ada beberapa sektor potensial: Pariwisata Seni Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel Hotel melati Hotel berbintang Perkembangan dalam ... Ada beberapa sektor potensial: <li>Pariwisata</li> <li>Seni</li> <li>Budaya</li><br /> Sektor tersebut merupakan ... <p>Fasilitas penginapan di Indonesia: <ol> <li>Losmen</li><br /> Losmen merupakan tempat penginapan yang berskala kecil <li>Hotel</li> <ul> <li>Hotel melati</li> <li>Hotel berbintang</li> </ul> </ol> Perkembangan dalam ...
20
Definition List Definition List adalah jenis daftar yang menggunakan tag <dl> dan </dl>. Untuk pembuatan itemnya menggunakan <dt> dan </dt>. Jika item mempunyai sub item maka perlu membuatnya dengan menggunakan tag <dd> dan </dd>. Contoh : <dl> <dt>ada gula ada semut</dt> <dd>Dimana ada tempat yang bagu, Biasanya Banyak dikunjungi orang</dd> </dl>
21
Tag Garis Mendatar (Horizontal Line)
<hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr /> Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.<hr /> Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
22
Menampilkan Karakter Khusus (Simbol)
Daftar Karakter yang sering di jumpai dalam Halaman Web : SIMBOL ENTITAS KARAKTER KETERANGAN & & Ampersand < Lebih Kecil > Lebih Besar Registerd Trademark Copyright Plus-Minus Derajat ™ ™ Trademark Seperempat Setengah Tiga perempat ÷ ÷ Tanda Bagi
23
<html> </p> </ body> </ html> <head>
<title>Teks</ title> </ head> <body> <h2>Demo Menampilkan Karakter Khusus (Simbol)</h2> <p> & : Ampersand<br /> < : Kurang Dari<br /> > : Lebih Dari<br /> ® : Registerd<br /> © : Copyright<br /> &plumn; : Plus-Minus<br /> ™ : Trademark<br /> ° : Derajat<br /> ¼ : Seperempat<br /> ½: : Setengah<br /> ¾ : Tiga Perempat<br /> </p> </ body> </ html>
24
Tag Gambar (Image) <img src="NamaFileGambar">
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, .PNG. Contoh : <img src=“foto_saya.jpg”> Jika file yang akan ditampikan berada di directory atau folder lain, maka perlu Menyebutkan lokasi dari file tersebut : Contoh : <img src= “d:/images/foto_saya.jpg> Latihan : <html> <head> <title>Gambar</title> </head> <body> <h2>Demo Menambahkan Gambar Pada Halaman WEB</h2><br> <p> Menampilkan Gambar Pertama</p> <img src=“images/gambar_saya.jpg”> </body> </html>
25
Mengatur Letak Teks Terhadap Gambar
<img src="NamaFileGambar“ align=“TOP / MIDDLE / BOTTOM> TOP : Teks diletakan diatas Middle : Teks diletakan di tengah-tengah Bottom : Teks diletakan di bawah Latihan : <html> <head> <title>Alignment Gambar</title> </head> <body> ALIGN TOP <img src=“foto_saya.jpg align=“TOP”> <br><br> ALIGN MIDDLE <img src=“foto_saya.gif align=“middle”><br><br> ALIGN Bottom <img src=“foto_saya.png align=“bottom”> </body> </html>
26
Menggabungkan Gambar dan Teks
28
Memperbesar dan memperkecil Ukuran Gambar
<html> <head> <title>Gambar</title> </ head> <body> <h2>Demo Memperkecil Gambar</ h2> <p> <u>Gambar ukuran asli (500X375 Pixel) : </ u><br /) <img src=“Images/Jeep.jpg” /> </ p> <u>Gambar yang di perkecil (320 x 230 pixel) :</u><br /> <img src=“Images/Jeep.jpg” width=“320” height=“230” /> </ body> </ html>
32
Tag Tabel (Table) - data
<table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris : <tr> definisi baris </tr> Tag untuk penanda kolom : <td>data</td> Tag untuk membuat judul kolom dari suatu tabel : <th>…..</th> Tag untuk menyertakan judul table : <caption>…..</caption> <table border="1"> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <td>ddd</td><td>eee</td><td>fff</td> </table>
33
Menentukan Bingkai (Border) Tabel
<html> <head> <title>Tabel</ title> </head> <body> <h2>Demo Membuat Bingkai Table</h2> <table boder=“1”> <caption>Daftar Harga Komputer Laptop</ caption> <tr> <th>No.</th> <th>Merek</th> <th>Seri / Model</th> <th>Harga (±)</th> </tr> <td>1</td> <td>ACER</td> <td>Dual Core</td> <td>Rp, </td>
34
Lanj ….. <tr> <td>2</td> <td>Sony VAIO</td> <td>Core 2-Duo</td> <td>Rp </td> </tr> <td>3</td> <td>Toshiba</td> <td>Rp </td> </table> </body> </html>
35
Mengatur Tinggi & Lebar Sel Tabel
<html> <head> <title>Tabel</ title> </head> <body> <h2>Demo Membuat Bingkai Table</h2> <table boder=“1”> <caption>Daftar Harga Komputer Laptop</ caption> <tr> <th height=“50”>No.</th> <th width=“250”>Merek</th> <th width=“100”>Seri / Model</th> <th width=“100”>Harga (±)</th> </tr>
36
Mengatur Warna Background Sel
<tr bgcolor=“#ccccee”> <td>2</td> <td>Sony VAIO</td> <td>Core 2-Duo</td> <td>Rp </td> </tr> <tr bgcolor=“Blue”> <td>3</td> <td>Toshiba</td> <td>Rp </td> </table> </body> </html>
37
Menyertakan Gambar dalam Sel
<html> <head> <title>Tabel</ title> </head> <body> <h2>Demo Membuat Bingkai Table</h2> <table boder=“1”> <caption>Daftar Harga Komputer Laptop</ caption> <tr> <th height=“50”>No.</th> <th width=“250”>Merek</th> <th width=“100”>Seri / Model</th> <th width=“100”>Harga (±)</th> <th width=“150”>Gambar</th> </tr>
38
Lanj ….. <tr> <td>2</td> <td>Sony VAIO</td> <td>Core 2-Duo</td> <td>Rp </td> <td><img src=“Images.jpg” /></td> </tr> <td>3</td> <td>Toshiba</td> <td>Rp </td> <td><img src=“images.jpg” /></td> </table> </body> </html>
39
Menggunakan Atribut Rowspan
<html> <head> <title>Tabel</ title> </head> <body> <h2>Demo Membentang Baris Menggunakan ROWSPAN</h2> <table boder=“1”> <tr> <th>Merek</th> <th>Seri / Model</th></tr> <td rowspan=“4”>TOSHIBA</td> <td>Dual Core</td></tr> <td>Core 2-Duo</td></tr> <td>Forth Core</td></tr> <td> AMD</td></tr> </table></body></html>
40
Menggunakan Atribut Colspan
<html> <head> <title>Tabel</ title> </head> <body> <h2>Demo Membentang Colom Menggunakan Colspan</h2> <table boder=“1”> <tr> <th>Merek</th> <th colspan=“4”>Seri / Model</th> </tr> <td >TOSHIBA</td> <td>Dual Core</td> <td>Core 2-Duo</td> <td>Forth Core</td> <td> AMD</td> </table></body></html>
41
Tag Link (Anchor) <a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Ada 3 Jenis Link : 1. Link Absolut : Link yang menujuk ke halaman dari situs web lain. <a href =“ Test is Displayed</a> 2. Link Relatif : Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada didalam situs web yang sama. <a href=“Index.html”>Home</a> 3. Link dalam dokumen yang sama : Link yang dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. <a name=“Bab2”>Menuju Bab 2 </a>
42
Contoh Link Relatif File : Dokumen_1.html <html> <head>
<title>Link</ title> </ head> <body> <h2>Demo Membuat Link Relatif</ h2> <h3><u>Dokumen 1</u></ h3> <p>Klik Link di bawah ini untuk melihat isi halaman web pada Dokumen_2.html </ p> <p>a href=“link-dokumen 2.html”>Lihat Dokumen 2 </a></p> </ body> </ html>
43
Lanj ……. File : Dokumen_2.html <html> <head>
< title>Link</ title> </ head> <body> <h2>Demo Membuat Link</h2> <h3><u>Dokumen 2</u></h3> <p>Ini adalah isi halaman yang terdapat pada dokumen 2, untuk kembali ke Halama 1, silahkan klik Link di bawah ini </p> <p><a href=“dokumen_1.html”>Kembali ke Halaman 1</a></p> </ body> </ html>
44
Contoh Link Absolut <html> <head> <title>Link</ title> </ head> <body> <h2>Demo Membuat Link Absolut</ h2> <p>Pilih Situs Favorit Anda :</ p> <p><a href=“ <a href=“ <a href=“ </ body> </ html>
45
Lanj ……. Link Ke bagian Dokumen Tertentu
Link ini dapat dibedakan lagi menjadi dua jenis 1> Link ke bagian tertentu dalam dokumen yang sama <a href=“#TujuanLink”>Teks atau Gambar</a> 2> Link ke bagian tertentu dalam dokumen lain <a href=“NamaFile#Nama Bagian”>Teks atau Gambar</a> Menjadikan Gambar sebagai Link <a href=“DokumenLain”><img src=“Nama File Gambar” /></a>
46
Tugas Buatkan Tag Link seperti pada gambar di bawah ini :
Buatkan Tag layout isi dokumen seperti di bawah ini :
Presentasi serupa
