1 / 55

TAG

TAG. Mengenal Tag dan Studi Kasus. TAG. HTML. Format Doc. Font. Link & Anchor. Gambar. List. Tabel. background. Form. Frame. Case I. Mengenal Tag dan Studi Kasus. TAG. HTML. Heading. Format Doc. Atribut. Font. Paragraf. Link & Anchor. Gambar. List. Tabel. background.

signa
Download Presentation

TAG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TAG Mengenal Tag danStudiKasus

  2. TAG HTML Format Doc Font Link & Anchor Gambar List Tabel background Form Frame Case I Mengenal Tag danStudiKasus

  3. TAG HTML Heading Format Doc Atribut Font Paragraf Link & Anchor Gambar List Tabel background Form Frame Case I Mengenal Tag danStudiKasus

  4. TAG HTML Format Doc Line Break Font Pre Link & Anchor Horisontal Rules Gambar List Tabel background Form Frame Case I Mengenal Tag danStudiKasus

  5. TAG HTML Format Doc Font Size Link & Anchor Color Gambar Face List Bacefont Tabel background Form Frame Case I Mengenal Tag danStudiKasus

  6. TAG HTML Format Doc Font Link & Anchor Link Text Gambar Link Gambar List Link Anchor Tabel Link Email background Link Default Base Form Frame Case I Mengenal Tag danStudiKasus

  7. TAG HTML Format Doc Font Link & Anchor Gambar TinggidanLebar List Alignment Gambar Tabel Thumbnail background Gif dan Jpeg Form Frame Case I Mengenal Tag danStudiKasus

  8. TAG HTML Format Doc Font Link & Anchor Gambar List Order List Tabel Unordered List background Definition List Form Frame Case I Mengenal Tag danStudiKasus

  9. TAG HTML Format Doc Font Link & Anchor Gambar List Tabel Merge Cell background Padding & Spacing Form Frame Case I Mengenal Tag danStudiKasus

  10. TAG HTML Format Doc Font Link & Anchor Gambar List Tabel background PewarnaanNama Form Pewarnaan Hex Frame Case I Mengenal Tag danStudiKasus

  11. TAG HTML Format Doc Font Link & Anchor Gambar List Tabel background Form Field Text Frame Tujuan Data Case I Radio Button Check Box Drop Down Text Area

  12. TAG HTML Format Doc Font Link & Anchor Gambar List Tabel background Form Frame Frame Sederhana Case I Frame Judul Border & Spacing Name & Target Noresize & Scrolling

  13. TAG HTML Format Doc Font Link & Anchor Gambar List Tabel background Form Frame Case I Case Home I Case Home II Mengenal Tag danStudiKasus

  14. HTML - Heading • Di GunakanuntukmelakukanpengaturanukuranJudul, Sub JuduldanIsiLainnya. Contoh : <Body> <h1> Heading </h1> … <h6> Heading </h6> </Body>

  15. HTML - Atribut • Atributdapatditambahkankedalamsebagianbesar tag dandigunakanuntukmemformat tag dengankaidahtertentu. • Atribut = Nilai Align = Center, Left, Right, Justify Valign = Top, Middle, Bottom Contoh : <h1 Align = “Right”> Heading </h1>

  16. HTML - Paragraf • Elemen <p> Digunakanuntukmendefinisikanparagraf • Contoh : <p> Tulisananda </p> <p> ParagrafBaru </p>

  17. Format Document • <p> Contoh <b> Bold</b> </p> • <p> Contoh <em> Emphasize</em> </p> • <p> Contoh <strong> Strong</Strong> </p> • <p> Contoh <i> Italic</i> </p> • <p> Contoh <sup> Superscripted </sup> </p> • <p> Contoh <sub> Subscript </sub> </p>

  18. Gantibaris • Line break <br> adalahsalahsatuelemen yang cukupberbedadlmpenggunaannya. contoh : Elhabsy.co.cc <br/> SebuahAlamat Blogger <br/> Terkaittentang IT <br/>

  19. Format Doc - Pre • Penekanan enter padabariskode program akanditampilkansebagaimanamestinya. contoh : <pre> SayaSedang Belajar Internet I SebagaiDasar ! </pre>

  20. Format Doc – Horisontal Rules • Garishorisontaldapatdigunakanuntukmemisahkandua data yang berbeda contoh : <hr> Data Pertama </hr>

  21. Font - Size • Ukuran Size hurufdiaturdenganatribut size Contoh : <p> <font size=“5”> paragrafdengan font 5 </font></p>

  22. Font - Color • Atributinidigunakanuntukmengaturwarna Font Contoh : <p> <font size=“5” color=“#990000”> paragrafdengan font 5 & berwarnaHexcolor = 990000 </font></p>

  23. Font - Face • Memilihjenishuruf yang telahterinstalldisistem. contoh : <p> <font face=“Garamond”> Style Garamond </font> </p>

  24. Font - Basefont • Untukmengaturjenishuruf default padatulisandihalaman web Contoh : <basefont size=“2” color=“green”> hurufinibernilai default </basefont>

  25. Link - Text • Tag <a> dan </a> digunakanuntukmendefinisikanawaldanakhirdarisuatu anchor. Teks yang diletakkanantarapembukadanpenutup tag akanditampilkansebagai link padahalaman web • Target=“ _Blank” halbarupada browser baru Target=“ _self” halbaru pd jendela yang sama Target=“ _Parent” halbaru pd frame / digunakan pd halber-Frame Target=“ _Top”halbaru pd jendela browser aktif

  26. Link – TeksLanjutan • Contoh : <a href=“http://www.trunojoyo.ac.id“ target=“_blank”> UniversitasTrunojoyo</a>

  27. Link - Gambar • Penggunaannyasebagaivariasi agar web terlihatlebihhidup. Dapat pula dijadikan link denganmemasukkandi tag anchor contoh : <a href=http://www.trunojoyo.ac.id target=“_blank”> <imgsrc=“logo.gif”> </a>

  28. Link - Anchor • Link antarbagiandalamsatudokumen. Padahalamantujuanbiasanyahalaman yang samadenganasal link. contoh : <h1> link dan anchor HTML <a name=“atas”></a></h1> <h1> link teks HTML <a name=“teks”></a></h1> <h1> link Gambar HTML <a name=“gambar”></a></h1> kemudian <a href=“#atas”> Link dan Anchor </a> <a href=“#teks”> Belajar Link Teks </a> <a href=“#gambar”> Belajar Link Gambar </a>

  29. Link – E-mail • Tujuannyadapatberupaalamat email contoh : <a href=“mailto:info@trunojoyo.ac.id?subject=feedback”> kritikdan saran </a>

  30. Link - Base • Elemen head dapatdigunakanuntukmengatur URL default untuksemua link padahalaman web. Sangatdianjurkanmenggunakan tag base yang mengarahkan link default kedomainataulokasisendiri. Setiapada link yang tidakmenyebutkannama / tujuandenganjelasmakaakandianggaptujuan link adadibawah domain www.trunojoyo.ac.id • Contoh : <head> <base href=“http://www.trunojoyo.ac.id/”> </head>

  31. Gambar • HTML menyediakan tag <img> untukmenempatkan image pad halaman web contoh script : sebuahgambarmatahari<b> <imgsrc=“sunset.gif”> duacaramendefinisi source 1. <imgsrc=“http://www.situs.com/image.gif/su/sunset.gif> 2. <imgsrc=“../sunset.gif>

  32. Gambar – Tinggi & Lebar • Ukurangambarpada web dapatdiaturdenganmenggunakanatribut height dan width contoh : <imgsrc=“sunset.gif” height=“50” width=“60”>

  33. Gambar - Alignment • Gambarpadahalaman web dapatdiaturdenganmenggunakanatribut alignment alignment : left = kiri right = kanan center = tengah Valignment top = atas center = tengah bottom = bawah

  34. Gambar - Thumbnail • Thumbnail adalahgambarberukurankecil yang mempunyaihubungankegambar yang lebihbesardengankualitaslebihtinggi. contoh : <a href=“piringterbang.jpeg”> <imgsrc=“thumbpiringterbang.jpeg”> </a>

  35. Gambar – Gif dan Jpeg • Gif sangatbaikdigunakanuntuk Banner dantombol web • Jpeg sangatbaikdigunakanuntukgaleriatau artwork

  36. List – Ordered List • Pembuatandaftarbernomordengan tag <ol> dan </ol> sertadiberikan <li> dan </li> untukmasing-masing item. contoh : <h4 align=“center”> TujuanAnda</h4> <ol> <li> MendapatkanPekerjaan </li> <li> MendapatkanUang </li> <li> MenambahPengalaman </li> </ol> Atributdapatmenggunakanatribut type dan start

  37. List – Unordered List • Daftartanpamenggunakanabjadataupenomerantapihanyamenggunakan bullet contoh : <h4 align=“center”> TujuanAnda</h4> <ul> <li> MendapatkanPekerjaan </li> <li> MendapatkanUang </li> <li> MenambahPengalaman </li> </ul> Atributdapatmenggunakanatribut type untuk Bullet

  38. List – Definition List • List Definisiistilahdibuatmenggunakan tag <dl>. Definisiistilahnyasendiridibuatmenggunakan tag <dt> danketerangandariistilahtersebutmenggunakan <dd> contoh : <dl> <dt><b>Borobudur</b></dt> <dd>keajaibandunia</dd> </dl>

  39. Table • Table termasukelemenpentingdalampembuatan web. Dibuatdenganmenggunakan tag <table> denganatributnya. Terdapatelemen <tr> atau table rows untukmembuatbaristabeldan <td> atau table data untukmembuatkolom. Contoh : <table border=“1”> <tr><td>bar 1 kol 1</td>><td>bar 1 kol 2</td></tr> <tr><td>bar 2 kol 1</td>><td>bar 2 kol 2</td></tr> </table>

  40. Table – Merge Cell • Atributrowspandigunakanuntukmenggabungkanbeberapabarisdancolspandigunakanuntukmenggabungkanbeberapakolom. Tag <th> digunakanuntukpeletakan header padakolom.

  41. Table – Merge Cells contoh : <table border=“1”> <th> Kolom 1 </th> <th> Kolom 2 </th> <th> Kolom 3 </th> <tr> <rowspan=“2”> Baris 1 Cell 1 </td> <td>Baris 1 Cell 2</td><td> Baris 1 Cell 3</td> <tr><td>Baris 2 Cell 2</td><td> Baris 2 Cell 3</td> <tr><td colspan=“3”> Baris 3 Cell 1 </td></tr> </table>

  42. Table – Padding & Spacing • Cellpaddingmenentukanlebardari border • Padding mewakilijarakantara border danisi contoh : <table border=“1” cellspacing=“10” bgcolor=“#00ff00”> <th>kolom 1</th> <th>kolom 2</th> <tr><td>Bar 1 Kol 1</td> ><td>Bar 1 Kol 2</td></tr> <tr><td>Bar 2 Kol 1</td> ><td>Bar 2 Kol 2</td></tr> </table>

  43. Table – Padding & Spacing • Cellpaddingmenentukanlebardari border • Padding mewakilijarakantara border danisi contoh : <table border=“1” cellpadding=“10” bgcolor=“#00ff00”> <th>kolom 1</th> <th>kolom 2</th> <tr><td>Bar 1 Kol 1</td> ><td>Bar 1 Kol 2</td></tr> <tr><td>Bar 2 Kol 1</td> ><td>Bar 2 Kol 2</td></tr> </table>

  44. Background • Background color diaturdenganmenggunakanatributbgcolorkhususnyaelemen <body> • Contohpenulisan <nama tag bgcolor=“value”>

  45. Background – Name Colored • Terdapat 3 caramewarnai background, denganpenggunaan RGB, Hex danNamaWarnagenerik. • Beberapawarnagenerik Black Gray Silver White Yellow Lime Aqua Fuchsia Red Green Blue Purple Maroon Olive Navy Teal

  46. Background – Hex Colored • Sistempewarnaan Hexadecimal termasuksulitdigunakanterutamabagipemula. Sisteminimemiliki 16 kemungkinanmulai Interval 0 hingga 9 dan Interval A hingga F Contoh : <body bgcolor=“#00ff00”>

  47. Form - Field Text I • Pembuatan Field Text memanfaatkan tag<input> yang mempunyaibeberapaatributsebagaiberikut :

  48. Form Field Text II • Contoh : <form method=“post” action=“mailto:info@trunojoyo.ac.id”> Nama : <input type=“text” size=“10” maxlength=“40” name=“nama”> Password: <input type=“password” size=“10” maxlength=“10” name=“password”> </form>

  49. Form - Tujuan Data • Sebuah Form yang menerimamasukannamadan password, kemudiansaatdikliktombolkirim data akandikirimsebagaiinputankepada file http://www.situs.com/proses.html contoh : <form method=“post” action=“http://www.situs.com/proses.html> nama : <input type=“text” size=“10” maxlength=“40” name=“nama”><br/> password : <input type=“text” size=“10” maxlength=“10” name=“password”><br/> <input type=“submit” name=“kirim” value=“kirim”> </form>

  50. Form – Radio Button I • Radio Button salahsatuelemen yang menarikpada web. Tag <input> harusbernilai radio kemudianmengaturnilaiatribut value dan name-nya

More Related