( HyperText Markup Language) HTML ( HyperText Markup Language) Mata Kuliah : Pemrograman Berbasis Web Pertemuan 2
htML (hypertext markup language) Adalah bahasa pemrograman Web (client) yang dikhususkan untuk pengolahan dokumen. HTML mendefinisikan sebuah elemen yang terdiri dari teks, paragraf, operasi teks, pengaturan huruf, tautan, media gambar, video, video flash atau sebuah aplikasi (form). Dalam penulisan HTML diawali dengan sebuah tag. Dalam HTML setiap element memiliki definisi masing-masing.
Hirarki html HTML HEAD BODY ELEMENT TITLE FORM META LINK/STYLE/ SCRIPT HTML = Untuk mengidentifikasi bahwa dokument yang digunakan ditulis menggunakan HTML HEAD = Mendeskripsikan tentang informasi dari sebuah halaman web BODY = Berisi tentang isi dokumen yang akan ditampilkan di web browser
CONTOH html
KONSEP ELEMENT HTML Sumber : Learning Web Design Third Edition, O’Reilly Media
ELEMENT (MARKUP TEXT-BUILDING BLOCKS) Type Element Headings h1,h2,h3,h4,h5,h6 Paragraph p Block (long) quotes blockquote Preformatted text pre Horizontal rules (line) hr Unordered list ul Ordered list ol List item li Definition list dl Term dt Definition dd
LIST ELEMENT Di dalam sebuah paragraf biasa terdapat list (daftar) urutan. Ada 3 tipe dalam list Unordered Lists ( <ul><li>)= Koleksi dari item-item yang tidak beraturan (tidak bernomor). Ordered Lists ( <ol><li>)= Koleksi dari item- item yang berurutan sesuai dengan nomor urutnya. Definition Lists ( <dl><dt><dd> )= Daftar item-item yang berisi penjelasan dari item.
ELEMENT (Presentational inline text) Description b Menebalkan huruf big Membuat teks berukuran lebih besar dari teks asalnya center Membuat teks rata tengah font Memberikan spesifikasi pada sebuah text i Membuat teks miring s Memberikan garis tengah pada sebuah teks small Membuat teks berukuran lebih kecil dari teks aslinya strike sub Membuat teks lebih kecil dan berada di bawah teks normal sup Membuat teks lebih kecil dan berada di atas teks normal u Membuat teks bergaris bawah tt Memberikan tipe pada teks (berupa tipe font)
Generic Elements (div, CLASS dan span) Element div, class, dan span digunakan untuk menata sebuah halaman (tampilan) baik bentuk dokumen, list, objek (form). Penggunaan div, class, dan span biasanya terkair dengan penggunaan CSS (Cascading Style Sheet).
KARAKTER SPESIAL Karakter Nama Angka Deskripsi Membuat spasi & & & Apersen ‘ ' ' Apostrof < < Lebih kecil > > > Lebih besar © © © Lambang hak cipta ™ ™ ™ Lambang Merek terdaftar
Elements ( LINK/tautan ) Jika kita membuat halaman sebuah web pasti tidak lepas dari tautan dengan halaman di dalam web itu sendiri atau tautan dengan URI halaman web yang lain, atau tautan ke email. Di dalam html element link (tautan) itu dituliskan dengan <a>.....</a> Contoh :
LINK/tautan di dalam folder <a href=“contoh/nama.html”> klik </a> Web contoh Index.html nama.html
LINK/tautan satu folder ke bawah <a href=“contoh/sample/alamat.html”> klik </a> Web contoh Index.html sample nama.html alamat.html
LINK/tautan satu folder ke atas <a href=“../index.html”> klik </a> tautan dari nama.html untuk mengakses index.html <a href=“../../index.html”> klik </a> tautan dari alamat.html untuk mengakses index.html Web contoh Index.html sample nama.html alamat.html
LINK/tautan satu halaman pada identifikasi tertentu Contoh : <a href=“#textH”> H </a> Pada contoh di atas digunakan untuk mengakses id=textH pada satu halaman. Implementasinya : <h1 id=“textH”>Poin H</h1> <dl>Bagian H</dl> <dt>Konsep H</dt> <dd>bla..bla...bla...bla</dd>
ELEMENT (IMG / tautan gambar) Contoh : <img src=“apel.jpg”> Element dan Attribut Deskripsi Img Memasukkan gambar src=“url” Lokasi dari gambar width=“angka” Memodifikasi lebar gambar height=“angka” Memodifikasi tinggi gambar title=“text” Memberikan judul gambar
ELEMENT (TABLE / TABEL) Contoh : <table> <tr> <td></td> </tr> </table>
ELEMENT (TABLE / TABEL) Element dan Attribut Deskripsi table Membuat tabel cellpadding=“num” Memberikan jarak pada sel cellspacing=“num” Memberikan jarak antar sel tr Membuat baris baru th Membuat header pada sebuah tabel (opsional) colspan=“num” Jumlah kolom di dalam sel rowspan=“num” Jumlah baris di dalam sel td Membuat cel (kolom)
ELEMENT FORM Element Form seringkali digunakan bersamaan dengan Bahasa pemrograman server misalnya dengan PHP. Form biasanya digunakan untuk pengolahan sebuah data. Bentuk Element Form: <form action=“simpan.php” method=“post”> <element>.......</element> </form>
ELEMENT (FORM) Element dan Attribut Deskripsi Form Membuat Form action=“#” Tingkah laku (pekerjaan) dari sebuah form method=“post/get” Metode yang digunakan untuk pengambilan dalam di dalam form name=“#” Untuk mengidentifikasi form enctype=“” Tipe dari sebuah form Text Element dari sebuah text field Textarea Element dari sebuah text area Select Element dropdown list Button Element dari sebuah tombol Submit Element sebuah tombol aksi Radio Element dari sebuah pilihan Check Emelent sebuah penanda name=“” Nama dari sebuah elemen id=“” Identifikasi dari sebuah elemen
Next >> CSS (cascading style sheet) Terimakasih atas perhatiannya. Semoga apa yang kita pelajari bersama bermanfaat bagi kita semua. Amiiin. Sumber: Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M .Deitel, Prentice Hall. Learning Web Design Third Edition, Jennifer Niederst Robbins, O’Reilly Media http://www.w3c.org http://www.w3schools.com Next >> CSS (cascading style sheet)