1 / 40

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 dari tag Tujuan dari tag adalah untuk menggambarkan isi halaman Tag HTML

aysel
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 dari tag • Tujuan dari tag adalah untuk menggambarkan isi halaman • 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 dari elemen HTML. • Menambahkan Fungsi Tambahan dari elemen HTML yang masih memiliki fungsi standar. Contoh: <Body bgcolor=yellow>

  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" /> • 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 tentang versi HTML yang ditulis. • Diletakkan/ditulis pada bagian atas tag <html> <!DOCTYPE html> <html> .... </html> • Contoh diatas masuk dalam 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. Cascading Style Sheet

  26. CSS singkatan dari Cascading Style Sheets • Styles mendefinisikan bagaimana menampilkan elemen HTML • Style Sheets Eksternal disimpan dalam format file CSS

  27. CSS

  28. id dan class • Selain menetapkan model/gaya untuk elemen HTML, CSS memungkinkan juga menentukan sendiri Selector melalui "id" dan "class".

  29. id selector • Digunakan dalam menentukan gaya elemen tunggal yang unik. • Menggunakan atribut id elemen HTML. • Didefinisikan dengan "#". • ... • #para1{text-align:center;color:red;} • </style> • <body> • <p id="para1">Hello Kawan!</p> • ...

  30. class selector • digunakan dalam menentukan gaya sekelompok elemen. Berbeda dengan pemilih id • Paling sering digunakan pada beberapa elemen. • Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk elemen HTML banyak dengan kelas yang sama. • Menggunakan atribut class HTML, dan didefinisikan dengan "." <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p>

  31. CSS • Inline styles <p style="color: purple; font-family:verdana,tahoma; font-size:15px">Huruf dengan model verdana, warna ungu</p>

  32. Embedded style sheets <head> .... <style type="text/css"> h1 { color: green; text-decoration: underline; } body { background-color:ffff66; margin-left:100px} a { font-familiy:tahoma} </style> </head> <body> <h1>Selamat Belajar CSS</h1>

  33. External style sheets <link rel="stylesheet" href="css/basic.css" type="text/css" />

  34. Kode Warna

  35. head menu foto video Keterangan foto Ket. video Kolom banner Berita (tanggal, judul,isi) Pilkada DKI Jakarta 20-September-2012 Pada Tanggal 20 September 2012 akan dilangsungkan Pilkada DKI yang akan.... footer

More Related