Tag HTML - Diktis Kemenag

Transcript Tag HTML - Diktis Kemenag

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
– 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.
Tag Pembuka
Elemen
Tag Penutup
<p>
Ini adalah paragraf
</p>
<a href="index.html">
Ini sebuah Link
</a>
<body>
<h1>Judul</h1>
Belajar HTML
</body>
<html>
<body>...</body>
</html>
• 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>.
Contoh Link
Keterangan
<a href=“file.html”>link ke
file.html</a>
Link dalam folder yang
sama dengan teks
<a href=“file.html”><img
src=“gambar.jpg”></a>
Link dalam folder yang
sama dengan gambar
<a href=“http://www.google.com”>Link
ke Google.com </a>
Link ke luar menuju ke
website google
<a
href="mailto:[email protected]?Subject
=Hallo">
Kirim eMail</a>
Link ke alamat surat
[email protected] dengan
subject: Hallo
<a name=“penjelasan1”>Disini bagian
Penjelasan</a>
<a href=“#penjelasan”>Link ke bagian
penjelasan</a>
Link dalam bagian tertentu
dalam halaman web yang
sama
• 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>
Contoh tag Image
Keterangan
<img src=“img/gambar.jpg”>
Menampilkan gambar yang berada
pada folder img
<img src=“gambar.jpg" alt=“Gambar X"
width=“300" height="200" />
Menampilkan gambar dengan ukuran
lebar 300px dan tinggi 200px
<p>Gambar
<img src=“gambar.gif" alt=“gambarku"
align="bottom" width=“50" height=“50"
/>Dengan posisi rata bawah</p>
Menampilkan posisi gambar rata
bawah dengan teksnya
<p>Gambar <img src=“gambar.gif"
alt=“gambarku" align=“left" width=“50"
height=“50" />posisi kiri dari teks</p>
Menampilkan posisi gambar sebelah
kiri dengan teksnya
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect“ coords="0,0,82,126" alt="Sun"
href="sun.htm" />
<area shape="circle" coords="90,58,3"
alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm" />
</map>
Contoh Gambar yang dimaping
dilengkapi Link berdasarkan angka
kordinat.
• 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
<td>baris 1, kolom
</tr>
<tr>
<td>baris 2, kolom
<td>baris 2, kolom
</tr>
</table>
1</td>
2</td>
1 </td>
2 </td>
<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 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>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>.
• Contoh Object
QuickTime
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtacti
vex/qtplugin.cab">
<param name="src" value="liar.wav" />
<param name="controller" value="true"
/>
</object>
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtacti
vex/qtplugin.cab">
<param name="src" value="movie.mp4"
/>
<param name="controller" value="true"
/>
</object>
Flash
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8444553540000"
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>
Windows Media Player
<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv"
data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B15300C04F79FAA6">
<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/Windo
ws/MediaPlayer/"></embed>
</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>
<embed
width="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 id elemen 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
Color
Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Gray Shades
Color HEX
#000000
#080808
#101010
#181818
#202020
#282828
#303030
#383838
#404040
#484848
#505050
#585858
#606060
#686868
#707070
#787878
#808080
#888888
#909090
#989898
#A0A0A0
#A8A8A8
#B0B0B0
#B8B8B8
#C0C0C0
#C8C8C8
#D0D0D0
#D8D8D8
#E0E0E0
#E8E8E8
#F0F0F0
#F8F8F8
#FFFFFF
000000
003300
006600
009900
00CC00
00FF00
330000
333300
336600
339900
33CC00
33FF00
660000
663300
666600
669900
66CC00
66FF00
990000
993300
996600
999900
99CC00
99FF00
CC0000
CC3300
CC6600
CC9900
CCCC00
CCFF00
FF0000
FF3300
FF6600
FF9900
FFCC00
FFFF00
000033
003333
006633
009933
00CC33
00FF33
330033
333333
336633
339933
33CC33
33FF33
660033
663333
666633
669933
66CC33
66FF33
990033
993333
996633
999933
99CC33
99FF33
CC0033
CC3333
CC6633
CC9933
CCCC33
CCFF33
FF0033
FF3333
FF6633
FF9933
FFCC33
FFFF33
000066
003366
006666
009966
00CC66
00FF66
330066
333366
336666
339966
33CC66
33FF66
660066
663366
666666
669966
66CC66
66FF66
990066
993366
996666
999966
99CC66
99FF66
CC0066
CC3366
CC6666
CC9966
CCCC66
CCFF66
FF0066
FF3366
FF6666
FF9966
FFCC66
FFFF66
000099
003399
006699
009999
00CC99
00FF99
330099
333399
336699
339999
33CC99
33FF99
660099
663399
666699
669999
66CC99
66FF99
990099
993399
996699
999999
99CC99
99FF99
CC0099
CC3399
CC6699
CC9999
CCCC99
CCFF99
FF0099
FF3399
FF6699
FF9999
FFCC99
FFFF99
0000CC
0033CC
0066CC
0099CC
00CCCC
00FFCC
3300CC
3333CC
3366CC
3399CC
33CCCC
33FFCC
6600CC
6633CC
6666CC
6699CC
66CCCC
66FFCC
9900CC
9933CC
9966CC
9999CC
99CCCC
99FFCC
CC00CC
CC33CC
CC66CC
CC99CC
CCCCCC
CCFFCC
FF00CC
FF33CC
FF66CC
FF99CC
FFCCCC
FFFFCC
0000FF
0033FF
0066FF
0099FF
00CCFF
00FFFF
3300FF
3333FF
3366FF
3399FF
33CCFF
33FFFF
6600FF
6633FF
6666FF
6699FF
66CCFF
66FFFF
9900FF
9933FF
9966FF
9999FF
99CCFF
99FFFF
CC00FF
CC33FF
CC66FF
CC99FF
CCCCFF
CCFFFF
FF00FF
FF33FF
FF66FF
FF99FF
FFCCFF
FFFFFF