10/3/2011
Apakah HTML itu?
Hyper Text Markup Language
HTML adalah bahasa yang digunakan dalam
pembuatan web pages.
Mata Kuliah : Pengenalan Web HTML bukan bahasa pemrograman, tetapi berupa
Untuk D3 dan S1 Semua jurusan markup language, yaitu bahasa yang dibentuk dari
kumpulan markup tags
Dasar HTML 1 Dasar HTML 2
Sejarah Singkat HTML HTML tags
Peletak dasar HTML adalah Tim Berners-Lee HTML markup tags biasa disebut HTML tags
HTML 1.0 (Hanya untuk Mosaic 1.0 dan Lynx) HTML tags adalah suatu kata kunci (keyword) yang
HTML 2.0 , HTML 3.2, HTML 4.0 terletak didalam angle brackets seperti <html>
Muncul XML 1.0 HTML tags umumnya berpasangan seperti <b> dan
Muncul CSS 1.0 dan CSS 2.0 </b>, <p> dan </p>, <strong> dan </strong>
HTML 4.01 Tag yang pertama ( <b>, <p>, <strong> ) disebut start
XHTML 1.0 tag / opening tag
HTML 5.0 Tag yang kedua ( </b>, </p>, </strong> ) disebut end
Mulai HTML 2.0, lembaga yang membuat standar rule tag / closing tag
di web adalah W3C (World Wide Web Consortium) Closing tag ditandai dengan adanya tanda slash ( / )
Dasar HTML 3 Dasar HTML 4
1
10/3/2011
Interpretasi Browser
Dokumen HTML Tampilan normal (tanpa tag <pre>) pada browser akan
Disebut juga Web Page mengabaikan ENTER, TAB dan SPASI LEBIH DARI 1
Berisi Tag HTML dan Teks Browser akan mempergunakan tag untuk
menginterpretasikan dokumen
Fungsi dari Web Browser (Firefox,Internet Explorer,
Safari, Chrome, Opera, dll) adalah untuk membaca isi
dokumen HTML dan menampilkannya sebagai Contoh dokumen HTML:
halaman web Hallo apa
Kabar<br />Semoga Baik saja
Browser tidak menampilkan tag HTML tetapi
menggunakan tag tersebut untuk menerjemahkannya Akan menghasilkan tampilan di browser :
sehingga menghasilkan tampilan tertentu Hallo apa Kabar
Semoga Baik saja
Dasar HTML 5 Dasar HTML 6
HTML Element Nested HTML Elements
Dokumen HTML berisi HTML element. HTML element bisa tersarang (berisi HTML element
HTML element adalah semua yang terletak diantara start yang lain atau biasa disebut nested ).
tag dan end tag:
Dokumen HTML berisi nested HTML elements.
<p> Selamat Datang </p>
<a href="[Link]" > webku </a> Contoh :
p dan a adalah HTML Element <html>
Selamat datang dan webku adalah Element Content <body>
Beberapa HTML Element tidak mempunyai Content, <p>This is my first paragraph.</p>
disebut dengan empty element sehingga closing tag </body>
diletakkan di start tag </html>
<br />, <hr />
Contoh di atas terdiri dari 3 HTML elements.
Dasar HTML 7 Dasar HTML 8
2
10/3/2011
<p> element:
Nested (lanjutan)
<p>This is my first paragraph.</p>
<p> element mendefinisikan paragraph dalam dokumen HTML, memiliki start tag
HTML Attribute
<p> dan end tag </p>.
element content adalah: This is my first paragraph. Attribute memberikan informasi tambahan tentang
<body> element: HTML element.
<body>
<p>This is my first paragraph.</p>
</body>
HTML element dapat memiliki attribute
<body> element mendefinisikan body dari dokumen HTML , memiliki start tag Attribute selalu diletakkan di start tag
<body> dan end tag </body>.
element content berupa HTML element yang lain (dalam hal ini p element). Attribute ditulis dengan pasangan name/value
<html> element: seperti: name="value"
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> element mendefinisikan keseluruhan dokumen HTML, memiliki start tag
<html> dan end tag </html>.
element content berupa HTML element yang lain (dalam hal ini body element).
Dasar HTML 9 Dasar HTML 10
Contoh Attribut XHTML
Link HTML dibuat dengan tag <a>. Alamat dari link Beberapa aturannya akan kita gunakan sebagai standar
dituliskan dalam attribut href : selama kuliah
<a href="[Link] link</a>
Attribut name : href
Attribut value : [Link]
Attribut values dituliskan dalam tanda petik. Biasanya
menggunakan petik ganda, tetapi pada situasi tertentu
bisa juga dengan petik tunggal
Contoh :
<input type=“text” value=‘John "ShotGun" Nelson‘ />
Dasar HTML 11 Dasar HTML 12
3
10/3/2011
Mengapa XHTML?
Apakah XHTML itu? Banyak dokumen web yang berbentuk "bad" HTML.
EXtensible HyperText Markup Language Contoh berikut adalah “bad” HTML, meski akan tetap
mirip dengan HTML 4.01, XHTML lebih ketat dan jalan normal jika dilihat melalui browser:
lebih teratur dibandingkan HTML <html>
XHTML adalah HTML yang didefinisikan sebagai <head>
aplikasi XML <title>This is bad HTML</title>
<body>
XML adalah markup language dimana dokumen harus <h1>Bad HTML
memiliki markup dengan benar dan "well-formed". <p>This is a paragraph
Direkomendasikan oleh W3C pada Januari 2000 </body>
Didukung oleh sebagian besar browser dan digunakan Struktur yang buruk menjadikan dokumen HTML
sebagai standar HTML ke depan. sulit dibaca
Dasar HTML 13 Dasar HTML 14
XHTML Elements Must Be Properly Nested
XHTML vs HTML Contoh Nested Element yang salah (bersilangan)
<b><i>This text is bold and italic</b></i>
XHTML elements must be properly nested Seharusnya yang benar adalah sbb :
Nested element (element tersarang) tidak boleh <b><i>This text is bold and italic</i></b>
bersilangan
XHTML elements must always be closed Kesalahan Nested yang sering terjadi adalah pada
Semua element harus memiliki End Tag pembuatan list
Contoh yang benar:
XHTML elements must be in lowercase Contoh yang salah:
<ul>
<ul>
<li>Coffee</li>
Semua element ditulis dalam huruf kecil <li>Coffee</li> <li>Tea
<li>Tea <ul>
XHTML documents must have one root element <ul> <li>Black tea</li>
<li>Black tea</li> <li>Green tea</li>
Dokumen harus memiliki satu root element <li>Green tea</li> </ul>
</ul> </li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>
Dasar HTML 15 Dasar HTML 16
4
10/3/2011
XHTML Elements Must Be In
XHTML Elements Must Always Be Closed
Non-empty elements harus memiliki closing tag. Lower Case
Contoh Salah :
<p>This is a paragraph Tag names dan attributes harus berupa huruf kecil.
<p>This is another paragraph
Yang benar: Contoh Salah:
<p>This is a paragraph</p> <BODY>
<p>This is another paragraph</p>
<P>This is a paragraph</P>
Empty elements juga harus menggunakan closing tag. </BODY>
Contoh salah :
break: <br>
Yang Benar:
horizontal rule: <hr> <body>
image: <img src="[Link]" alt="Happy face">
Yang benar : <p>This is a paragraph</p>
break: <br /> </body>
horizontal rule: <hr />
image: <img src="[Link]" alt="Happy face" />
Dasar HTML 17 Dasar HTML 18
XHTML Documents Must Have HTML Heading
One Root Element Headings dituliskan dengan tag <h1> sampai <h6> .
<h1> adalah heading terbesar ,terpenting dan paling sering
Semua XHTML elements harus terletak di dalam digunakan.
<html> root element. <h6> adalah heading terkecil dan paling jarang digunakan.
Child elements harus berpasangan dan tersarang Sebelum dan sesudah heading, Browsers otomatis menambahkan spasi
kosong (margin). Setelah heading otomatis akan dilakukan ganti baris
dengan benar di dalam parent elementnya.
Contoh :
Struktur dasar dokumen HTML: <h1>This is a heading</h1>
<h2>This is a heading</h2>
<html> <h3>This is a heading</h3>
<head> ... </head> Headings sangat penting, karena heading akan menunjukkan
<body> ... </body> struktur dari dokumen dan akan digunakan oleh search engine untuk
mengetahui struktur dan isi dari dokumen
</html>
Gunakan HTML headings hanya untuk headings. Jangan
menggunakannya untuk membuat text menjadi besar atau tebal.
Dasar HTML 19 Dasar HTML 20
5
10/3/2011
Daftar tag Formatting
Formatting
HTML Text Formating<br/>
<b>Ini Tebal</b>
<big>Ini Besar</big>
<i>Ini Miring</i><br/>
<small>Ini Kecil</small>
<b><i>Ini Tebal dan Miring</i></b><br/>
Yang Ini <sub>Subscript</sub> dan ini <sup>Superscript</sup><br/>
<del>Ini Delete</del> <ins>Ini Insert</ins><br/>
<code>Ini Code</code><pre>Ini Pre</pre>
Dasar HTML 21 Dasar HTML 22
Font, Warna dan Alignment
Tag <font>,<color>,<bgcolor> dan <align> disarankan untuk Horizontal Line / Horizontal Rule
tidak digunakan lagi (akan dihapus penggunaannya pada
HTML5), penggantinya adalah menggunakan style yang ditulis Tag <hr /> akan membentuk horizontal line pada
secara inline tampilan browser.
<p style="background-color:green;width:300px;text-align:right;color:yellow"><b> Contoh :
Ini Paragraph dengan Text Kuning<br/>latar belakang Hijau<br/>
Dan rata kanan</b>
</p>
<span style="font-family:verdana,tahoma; font-size:20px"> Hallo<hr />Apa Kabar
Ini Verdana 20</span>
<h1>Ini Judul</h1>
<hr size="5" style="background-color:blue" />
Ini Isi
Dasar HTML 23 Dasar HTML 24
6
10/3/2011
Special Character / Alternatif
Komentar Character
Komentar dalam HTML dapat disisipkan ke dalam Terkadang dibutuhkan untuk menampilkan suatu karakter
dokumen HTML untuk memudahkan pembacaan, yang :
tidak terdapat di keyboard
pemahaman dan debugging
Merupakan tag HTML
Komentar akan diabaikan oleh browser dan tidak Digunakan tanda ampersand (&) dan diakhiri semicolon (;)
ditampilkan Contoh :
Komentar diawali dengan <!-- dan diakhir --> © : membuat logo copyright
Contoh : < ; : less than ( < )
> : greater than ( > )
<!-- Ini adalah komentar
: membuat spasi
di dalam dokumen HTML -->
& : membuat tanda &
Dasar HTML 25 Dasar HTML 26
Contoh Lain :
Untuk tebal gunakan tag <b><br/>
Suhu Kamar : 28°C<br/>
¼ + ¼ = ½<br/>
copyright ©2011 by cmz
Dasar HTML 27 Dasar HTML 28