SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

TAG

signa avatar
signa
55 diapositives · 725 Views · Sep 29, 2014

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.

TAG - slide 1
01 / 55TAG
1 / 17

Télécharger la présentation

TAG
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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