1 / 29

Hyper Text Markup Language

Hyper Text Markup Language. Akrom abdullah, M.Kom (c)2012. HTML HTML adalah bahasa untuk mendeskripsikan halaman web. HTML bukan bahasa pemrograman, tetapi bahasa markup Sebuah bahasa markup adalah seperangkat markup yang terdiri dari tag

ziya
Download Presentation

Hyper Text Markup Language

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. Hyper Text Markup Language Akrom abdullah, M.Kom (c)2012

  2. HTML • HTML adalah bahasa untuk mendeskripsikan halaman web. • HTML bukan bahasa pemrograman, tetapi bahasa markup • Sebuah bahasa markup adalah seperangkat markup yang terdiri dari tag • Tujuan dari tag adalah untuk menggambarkan/menandakan isi /bagian halaman web. • Tag HTML • Tag HTML menggunakan tanda kurung lancip/sudut <> • Tag HTML biasanya berpasangan seperti <b> dan </ b>

  3. Editor HTML • Notepad • Notepad++ • DreamWeaver • EditPLUS • Dll.

  4. Elemen dan Atribut • Elemen Adalah teks apapun yang berada diantara tag pembuka dan tag penutup.

  5. Atribut • Memberikan informasi tambahan untuk elemen HTML. • Menambahkan Fungsi Tambahan elemen HTML yang masih memiliki fungsi standar. Contoh: <Body bgcolor=yellow> Atribut bgcolor ditambahkan pada tag <body> yang berfungsi memberikan efek memberikan background warna.

  6. Tag HTML • Heading • tag Heading <h1> • Line • tag Garis Horizontal <hr> • Comment • Komentar/Catatan <!--Komentar--> • Paragraf • tag paragraf <P> • Line Break • tag ganti baris <br> atau <br />

  7. Format Teks • Tag <b>, <strong> , <big>, <i>, <em>, <code>, <sub> dan <sup>. Contoh: <b>This text is bold</b> <strong>This text is strong</strong> <big>This text is big</big> <i>This text is italic</i> <em>This text is emphasized</em> <code>This is computer output</code> This is<sub> subscript</sub> and <sup>superscript</sup>

  8. This text is bold This text is strong This text is big This text is italic This text is emphasized This is computer output This is subscript and superscript

  9. Links • Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat di-klik untuk melompat ke dokumen baru atau bagian baru dalam dokumen yang sama. • Bila Anda memindahkan kursor di atas link di halaman Web, tanda panah akan berubah menjadi tangan kecil. • Link menggunakan tag <a>.

  10. Image • Image/gambar/foto yang digunakan biasanya menggunakan format JPG, GIF atau PNG. • PNG dan GIF adalah format image yang mendukung efek transparan. • Image harus menyesuaikan ukuran layar (pixel) dan besarnya file (misalnya:kilobyte) • Tag yang digunakan adalah <img>

  11. Tabel • Tabel didefinisikan dengan tag <table>. • Sebuah tabel terdiri atas baris (tag <tr>), dan pada setiap baris dibagi menjadi sel-sel data (tag <td>). • td singkatan dari tabel data. • Dalam tabel memiliki tag header (tag <th>). • Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll. • Penggabungan baris menggunakan tag <rowspan> • Penggabungan kolom menggunakan tag <colspan>

  12. Contoh Tabel <table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>baris 1, kolom 1</td><td>baris 1, kolom 2</td></tr><tr><td>baris 2, kolom 1 </td><td>baris 2, kolom2 </td></tr></table>

  13. <h4>atribut cellspacing:</h4> • <table border="1" cellspacing=“5"> • <tr> • <td>pertama</td> • <td>baris</td> • </tr> • <tr> • <td>kedua</td> • <td>baris</td> • </tr> • </table> <h4>Menggabungkan 2 kolom:</h4> <table border="1"> <tr> <th>Nama</th> <th colspan="2">Telepon</th> </tr> <tr> <td>Bin Fulan </td> <td>555 77 333</td> <td>555 77 334</td> </tr> </table> <h4>Menggabungkan 2 baris:</h4> <table border="1"> <tr> <th>Nama</th> <td>Fulan</td> </tr> <tr> <th rowspan="2">Telepon:</th> <td>555 77 351</td> </tr> <tr> <td>555 77 353</td> </tr> </table> • <h4>atribut cellpadding:</h4> • <table border="1" • cellpadding="10"> • <tr> • <td>First</td> • <td>Row</td> • </tr> • <tr> • <td>Second</td> • <td>Row</td> • </tr> • </table>

  14. List • Untuk membuat Daftar/List menggunakan Tag <ol> atau <ul>. • Tag <ol> (Onerdered List) membuat daftar berupa numbering/angka. • Tag <ul> (Unordered List) membuat daftar berupa bullet/simbol. • Sedangkan elemen untuk kedua tag diatas menggunakan tag <li>. • Tag <li> berisi satuan item dari daftar.

  15. Contoh List • <ol><li>Teh</li><li>Kopi</li> • </ol> • <ul><li>Teh</li><li>kopi</li> • </ul>

  16. Form • Form diperlukan untuk menghubungkan data ke server. • Form berisi elemen input field teks, checkbox, radio button, textarea dan lain sebagainya. • Mendefinisikan Form dimulai dengan Tag <form>. • Text Fields <input type="text" name=“nama” maxlength=25/> • Password Field  <input type="password" /> • Radio Buttons <input type="radio" name= " jk" value=“pria" /> • Checkboxes <input type="checkbox" name= " hobi" value= " baca" /> • Submit Button <input type="submit" value="Submit" /> • Drop-down list <select name="cars"> <option value="volvo“ selected="selected" >Volvo</option> <option value="audi">Audi</option> </select> • Textarea <textarea rows="10" cols="30"> </textarea>

  17. iframe • Menampilkan halaman web dalam halaman web • Tag yang digunakan adalah <iframe src="URL"></iframe> • Ukuran tinggi (height) dan lebar (width) defaultnya pixel tapi bisa juga persen. • Bingkai iframe menggunakan tag frameborder . <iframe src="URL" frameborder="n"> • Memberikan identitas frame menggunakan atribut name. <iframe src="URL" name="namaiframe"> </iframe>.

  18. HTML Advance • <!DOCTYPE> • <DOCTYPE!> Bukanlah tag HTML. Ini adalah informasi/deklarasi ke browser berdasarkan versi HTML tertentu. • Diletakkan/ditulis pada bagian atas tag <html> <!DOCTYPE html> <html> .... </html> • Contoh diatas adalah HTML versi 5. • Beberapa Versi HTML: HTML=1991, HTML+=1993; HTML 2.0=1995; HTML 3.2=1997; HTML 4.01=1999; XHTML 1.0=2000; HTML5=2012

  19. Head • Elemen pada tag <head> merupakan tempat untuk semua elemen diantara head. Elemen di dalam <head> dapat berisi script, menginstruksikan browser untuk menemukan style sheet, memberikan informasi meta, dan masih banyak lagi. • Beberapa tag berikut ini dapat ditambahkan pada bagian head: <title>, <base>, <link>, <meta>, <script>, dan <style>. • <base> Element : <base target="_blank" /> • <link> Element : <link rel="stylesheet" type="text/css" href="mystyle.css" /> • <meta> Element : Keyword Search Engine: <meta name="description" content=“Belajar Mudah HTML, CSS, XML" /> <meta name="keywords" content="HTML, CSS, XML" />

  20. Object • Tujuan dari elemen <object> adalah untuk mendukung Plug-In HTML. • Plug-in tersebut bisa digunakan untuk memutar audio dan video (dan banyak lagi). Plug-in HTML menggunakan tag <object>.

  21. Flash <object width="400" height="40"classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"><param name="SRC" value="bookmark.swf"><embed src="bookmark.swf" width="400" height="40"></embed> </object> QuickTime • <object width="420" height="360"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="liar.wav" /><param name="controller" value="true" /> • </object> • Contoh Object Windows Media Player <object width="100%" height="100%"type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param name="url" value="3d.wmv"><param name="filename" value="3d.wmv"><param name="autostart" value="1"><param name="uiMode" value="full" /><param name="autosize" value="1"><param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object> • <object width="420" height="360"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="movie.mp4" /><param name="controller" value="true" /> • </object>

  22. Audio • Banyak cara menjalankan file Video. • Bisa dengan plugi-in <embed> dan <object> • Dalam HTML 5 dapat menggunakan tag <audio> • Menggunakan Player Audio dari luar, misalnya: yahoo media player: <a href="horse.mp3">Play Sound</a><script type="text/javascript“ src="http://mediaplayer.yahoo.com/js"></script> • Dengan Hyperlink : <a href="horse.mp3">Play the sound</a> Contoh Audio: • <embed height="100" width="100" src="horse.mp3" /> • <object height="100" width="100" data="horse.mp3"></object> • <audio controls="controls" height="100" width="100">  <source src="horse.mp3" type="audio/mp3" />  <source src="horse.ogg" type="audio/ogg" /><embed height="100" width="100" src="horse.mp3" /> • </audio>

  23. Video • Banyak cara menjalankan file Video. • Bisa dengan plugi-in <embed> dan <object> • Dalam HTML 5 dapat menggunakan tag <video> • <embed src="intro.swf" height="200" width="200"/> • <object data="intro.swf" height="200" width="200"/> • <video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4" />  <source src="movie.ogg" type="video/ogg" />  <source src="movie.webm" type="video/webm" />  <object data="movie.mp4" width="320" height="240">    <embed src="movie.swf" width="320" height="240" />  </object>  • </video>

  24. Youtube Video • Menjalankan Video Youtube bisa melalui tag <iframe> atau bisa dengan plugi-in <embed> • <iframe width="420" height="345"src="http://www.youtube.com/embed/XGSy3_Czz8k"> • </iframe> • <embedwidth="420" height="345"src="http://www.youtube.com/v/XGSy3_Czz8k"type="application/x-shockwave-flash"> • </embed>

  25. Kode Warna

More Related