Hyper Text Markup Language

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>

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

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

Atribut • Memberikan informasi tambahan dari elemen HTML. • Menambahkan Fungsi Tambahan dari elemen HTML yang masih memiliki fungsi standar. Contoh: <Body bgcolor=yellow>

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

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>

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

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>.

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>

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>

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>

<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>

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.

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

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>

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>.

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

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" />

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>.

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>

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>

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>

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>

Cascading Style Sheet

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

CSS

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

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

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>

CSS Background • Color

Kode Warna

Hyper Text Markup Language