hipertext markup language - tiklc.files.wordpress.com · html html? sebuah ... contoh.html contoh...
Post on 27-Apr-2018
242 Views
Preview:
TRANSCRIPT
HTMLHipertext Markup Language
HTML
HTML?
Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser.
HTML berupa kode - kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
• HTML 2.0
(RFC1866) disetujui sebagai standard pada 22 September 1995
• HTML 3.2
14 Januari 1996
• HTML 4.0
18 Desember 1997
• ISO/IEC 15445:2000 “ISO HTML”
berdasar padaHTML 4.01 Strict – 15 Mei 2000
Sejarah HTML
• XHTML 1.0 → gabungan HTML & XML
24 Januari 2000
• XHTML 1.1
16 February 2007
Sejarah HTML
• Ekstensi file berupa .htm atau .html
• Non case sensitive.
• Terdiri atas tag - tag pembuka dan penutup (walaupun ada beberapa tag
yang tidak memiliki penutup).
• Tag - tag saling berpasangan & bersarang.
Ciri – ciri Dokumen HTML
• Document Information<html></html>
• Document Header<head></head>
• Document Body<body></body>
Struktur HTML
Struktur Standar Dokumen HTML
<html><head>
............</head><body>
....... Tuliskan tag html lain di sini ........</body>
</html>
contoh.html
Contoh Dokumen HTML
• Page TitleJudul dari halaman web
contoh : <title></title>
• ScriptingTempat client ‐side script yang disertakan (javascript,vbscript, jscript)
contoh : <script></script>
Document Header
• StyleDipergunakan untuk mengatur bagaimana sebuah halaman web dengan berbagai komponennya hendak ditampilkan ke dalam browsercontoh : <style></style>
• MetaMeta tags, descriptions & keywords untuk mempermudahsearch engine dalam melakukan indexing.contoh : <meta></meta>
Document Header
Contoh Document Header
Bagian dari dokumen web yang akan ditampilkan ke usercontoh : <body></body>
Bagian ini memuat :• Teks & gambar• Link• Server Side Script (PHP, ASP, JSP)• Multimedia and Special Programmed Events (Shockwave, SWFs, Java
Applets, online video)
Document Body
Tag HTML
Bagian 1
<body bgcolor = “blue”>tag attribute attribute value
element
Tag, Atribut, Elemen
Penulisan Tag
Tag pembuka < >
Tag penutup </ >
Contoh : <p>Ini paragraf</p>
Single Tag < />
Contoh : <br />, <hr />, <input />, <img />
Berfungsi untuk menuliskan judul & sub-judul
Tag Heading
Untuk membuat paragraf baru, membuat text berada dalam sebuah paragraf.
Tag paragraf bisa memiliki tag penutup, bisa juga tidak.
<p>isi paragraf</p>
contoh :<p>Ini adalah tulisan yang berada dalam paragraf. Dengan tag
ini maka tampilan dalam web akan menjadi lebih rapi</p>
<br /> : break-line (untuk berpindah ke baris selanjutnya)
<hr /> : Horizontal-line (untuk menambahkan garis
horizontal)
Tag Paragraf, HR, dan BR
Untuk mengatur penggunaan tulisan dalam halaman web (jenis tulisan, ukuran, warna, dll)
contoh :
<font color=blue size=7 face=“arial”>Test</font>
Tag lain untuk manipulasi Font:
• <b> tulisan tebal </b>
• <i> tulisan miring </i>
• <u> tulisan bergaris bawah </u>
• <sub> subscript </sub>
• <sup> superscript </sup>
Font Tag
Font Tag
Untuk memuat gambar ke dalam halaman web.
contoh :<img src=“logo-loyola.jpg”/>
Tag image memiliki beberapa attribute antara lain :• src → lokasi gambar yang akan ditampilkan• width → ukuran lebar gambar• height → ukuran tinggi gambar• alt → deskripsi tentang gambar• title → judul gambar
Image Tag
Image Tag
<img src="logo-loyola.jpg" width="100" height="108" alt="kolese loyola" title="loyola"/><hr><font size="6"><b>SMA Kolese Loyola</b></font><br><font size="6"><b>Jl.Karanganyar 37</b></font><br><font size="4"><b>Semarang</b></font>
Dipergunakan untuk menghubungkan (linking) text dan image ke halaman lain atau bagian tertentu dari halaman yang sama dalam satu website atau website yang lain.
cth :
• Link ke halaman website lain
<a href=“http://loyola-smg.sch.id”>website</a>
• Link ke file lain dalam satu website
<a href=“halaman2.html”>Halaman 2</a>
Anchor / Hyperlink Tag
Untuk mengakses bagian tertentu dalam sebuah halaman website, maka bagian halaman tersebut harus diberi penanda.
cth :
• Penanda pada bagian halaman<a id=“atas”>ini adalah alinea pertama</a>
• Link ke file yang sama<a href=“#atas”>Kembali ke Atas</a>
Anchor / Hyperlink Tag
Berfungsi sebagai pembungkus dokumen HTML atau komentar,
agar tidak terbaca oleh browser.
<!-- komentar -->
contoh :
<!-- Ini adalah contoh paragraf -->
<p> paragraf pertama ini menjelaskan tentang… </p>
Tag Komentar
Tag HTML
Bagian 2
List
Digunakan untuk membuat daftar.
Terdiri dari : Ordered List
Unordered List
Definition List
List – Ordered List
Digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara terurut.
Tag : <ol> .......... </ol> Contoh :
<ol>
<li>Pemrograman Web</li>
<li>Teknologi Informasi</li>
<li>Perangkat Lunak</li>
</ol>
List – Unordered List
Digunakan untuk membuat daftar dimana tiap bagiannya ditandai dengan sebuah simbol.
Tag : <ul> ......... </ul> Contoh :
<ul>
<li>Pemrograman Pascal</li>
<li>Pemrograman Web</li>
<li>Desain Grafis</li>
<li>Sistem Operasi</li>
</ul>
List – Definition List Digunakan untuk membuat daftar dimana tiap daftar tersebut
memiliki penjelasan (sub-bagian). Contoh :
<dl><dt>FT</dt>
<dd>Merah</dd><dd>Jingga</dd><dd>Kuning</dd><dd>Hijau</dd><dd>Biru</dd><dd>Nila dan Ungu</dd>
</dl>
Atribut pada List
List Atribut Value HasilOrdered List type I I,II,III,IV,…
i i,ii,iii,iv,…
A A,B,C,D,…
a a,b,c,d,…
start 1/2/3/4/.. nilai awal list
Unordered List type square
disc
circle
Contoh List
Tabel Digunakan untuk menyajikan data dalam bentuk kolom dan baris, tujuannya agar informasi
dapat ditampilkan secara lebih terstruktur dan tabular.
row
column cell
table
Elemen pada TabelElemen Penjelasan
<table> … </table> Mendefinisikan sebuah tabel dalam dokumen HTML.
Atribut : border, cellpadding, cellspacing
<th> … </th> Membuat judul kolom
<tr> … </tr> Mendefinisikan baris dalam tabel.
Atribut : align (left, center, right), valign (top, middle, bottom)
<td> … </td> Mendefinisikan kolom tabel.
Atribut : align (left, center, right), valign (top, middle, bottom), colspan, rowspan.
Contoh Tabel
<table border=‘1’>
<tr>
<td>baris1 kolom1</td>
<td>baris1 kolom2</td>
</tr>
<tr>
<td>baris2 kolom1</td>
<td>baris2 kolom2</td>
</tr>
</table>
Baris 1Kolom 1
Baris 1Kolom 2
Baris 2Kolom 1
Baris 2Kolom 2
Colspan & Rowspan
Colspan Menggabungkan beberapa cell (column) dalam satu baris.
Rowspan Menggabungkan beberapa cell (row) dalam satu kolom.
rowspan= 5
colspan = 2
Contoh
Contoh
Cellspacing & Cellpadding
Cellspacing Jarak antara satu cell dengan cell yang lain.
Cellpadding Jarak antara tepi cell dengan isi cell.
Div Tag
Digunakan untuk membungkus tag-tag lain agar memiliki perilaku yang sama.
<div style:”color:red”>
<h3>Pemrograman Web</h3>
<p>ini adalah pelajaran pemrograman web</p>
</div>
Div Tag
Digunakan sebagai sistem blok untuk membuat lapisan layout pada halaman.
<div id=”header”> ...
</div><div id=”content”>
...</div><div id=”footer”>
...</div>
HTML FORM
Bagian 3
HTML Form Elemen HTML yang digunakan untuk menerima bermacam-macam
masukan (input) dari pengguna web. Contoh :
Form Tag
Sebuah tag yang membungkus elemen-elemen input di dalamnya dan berfungsi mengirim data input ke server.
<form>.elemen input.
</form>
Elemen Input Form
Macam-macam komponen input : Textfield Password Checkbox Radio button Listbox Combobox Text Area File
Elemen Input : Text Field Digunakan untuk memasukan huruf, angka, karakter, dll ke dalam sebuah
form.
Contoh tag :
Contoh hasil :
Elemen Input : Password Digunakan untuk menyembunyikan karakter masukan.
Contoh tag :
Contoh hasil :
Elemen Input : Radio Button Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data.
Contoh tag :
Contoh hasil :
Elemen Input : Checkbox Digunakan untuk melakukan satu atau lebih dari banyak pemilihan data.
Contoh tag : Contoh hasil :
Elemen Input : Combo box Digunakan untuk melakukan satu pemilihan diantara 2 atau lebih data
menggunakan drop-down.Contoh tag :
Contoh hasil :
Elemen Input : Listbox Digunakan untuk melakukan satu atau lebih pemilihan diantara 2 atau
lebih data menggunakan listbox.
Contoh hasil :
Contoh tag :
Elemen Text Area Sebuah area yang dapat menampung teks yang tidak terbatas ukurannya.
Contoh tag :
Contoh hasil :
Elemen Input : File Digunakan untuk memilih atau membuka file.
Contoh tag :
Contoh hasil :
Atribut Form
Atribut Form : Action : Lokasi script yang memproses data dari form. Enctype : Mendefinsikan cara encoding data sebelum dikirimkan.
Biasanya digunakan jika ingin meng-upload file. Method : Metode pengiriman data.
GET : Data dikirimkan bersama URL. POST : Data dikirimkan terpisah dari URL.
<form action="proses.php" method="post">...
</form>
Elemen Tombol : Submit Tombol yang berfungsi secara otomatis mengirim data yang di-input-kan
di dalam form ke halaman ‘action’.
Contoh tag :
Contoh hasil :
Elemen Tombol : Reset Tombol yang berfungsi mengembalikan “value” dari semua elemen di
form ke “value” semula saat halaman dibuka.
Contoh tag :
Contoh hasil :
Tugas
Buatlah halaman registrasi suatu website.
Data yang harus dimasukkan pengguna, minimal : Nama depan, nama
belakang, alamat, tanggal lahir, jenis kelamin, username, password
TERIMA KASIH
top related