HTML ( HyperText Markup Language) Mata Kuliah : Pemrograman Berbasis Web Pertemuan 2 Oleh : Nufan Balafif
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 TITLE META LINK/STYLE / SCRIPT ELEMENT FORM 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 Headings Paragraph Block (long) quotes Preformatted text Horizontal rules (line) Unordered list Ordered list List item Definition list Term Definition Element h1,h2,h3,h4,h5,h6 p blockquote pre hr ul ol li dl dt dd
LIST ELEMENT Di dalam sebuah paragraf biasa terdapat list (daftar) urutan. Ada 3 tipe dalam list 1. Unordered Lists ( <ul><li>)= Koleksi dari item-item yang tidak beraturan (tidak bernomor). 2. Ordered Lists ( <ol><li>)= Koleksi dari item-item yang berurutan sesuai dengan nomor urutnya. 3. Definition Lists ( <dl><dt><dd> )= Daftar item-item yang berisi penjelasan dari item.
ELEMENT (Presentational inline text) Eleme nt b big center font i s small strike sub sup u tt Description Menebalkan huruf Membuat teks berukuran lebih besar dari teks asalnya Membuat teks rata tengah Memberikan spesifikasi pada sebuah text Membuat teks miring Memberikan garis tengah pada sebuah teks Membuat teks berukuran lebih kecil dari teks aslinya Memberikan garis tengah pada sebuah teks Membuat teks lebih kecil dan berada di bawah teks normal Membuat teks lebih kecil dan berada di atas teks normal Membuat teks bergaris bawah 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 Karakt er Nama Angka Deskripsi Membuat spasi & & & Apersen ' ' Apostrof < < < Lebih kecil > > > Lebih besar Lambang hak cipta ͐ 2; 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 Index.html contoh nama.html
LINK/tautan satu folder ke bawah <a href= contoh/sample/alamat.html > klik </a> Web Index.html contoh nama.html sample 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 Index.html contoh nama.html sample 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 Img src= url width= angka height= angka title= text Deskripsi Memasukkan gambar Lokasi dari gambar Memodifikasi lebar gambar Memodifikasi tinggi gambar Memberikan judul gambar
ELEMENT (TABLE / TABEL) Contoh : <table> <tr> <td></td> </tr> </table>
ELEMENT (TABLE / TABEL) Element dan Attribut table cellpadding= num cellspacing= num tr th colspan= num rowspan= num td colspan= num rowspan= num Deskripsi Membuat tabel Memberikan jarak pada sel Memberikan jarak antar sel Membuat baris baru Membuat header pada sebuah tabel (opsional) Jumlah kolom di dalam sel Jumlah baris di dalam sel Membuat cel (kolom) Jumlah kolom di dalam sel Jumlah baris di dalam sel
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 Form Text action= # method= post/get name= # enctype= Textarea Select Button Submit Radio Check name= id= Deskripsi Membuat Form Tingkah laku (pekerjaan) dari sebuah form Metode yang digunakan untuk pengambilan dalam di dalam form Untuk mengidentifikasi form Tipe dari sebuah form Element dari sebuah text field Element dari sebuah text area Element dropdown list Element dari sebuah tombol Element sebuah tombol aksi Element dari sebuah pilihan Emelent sebuah penanda Nama dari sebuah elemen Identifikasi dari sebuah elemen
Wassalamu alaikum wr. Wb. Terimakasih atas perhatiannya. Semoga apa yang kita pelajari bersama bermanfaat bagi kita semua. Amiiin. Sumber: 1. Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M.Deitel, Prentice Hall. 2. Learning Web Design Third Edition, Jennifer Niederst Robbins, O Reilly Media 3. http://www.w3c.org 4. http://www.w3schools.com Next >> CSS (cascading style sheet)