Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1
HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: Text editor sederhana. Contoh: Windows: Notepad Linux: gedit, mcedit, pico, dan vi. Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror. S1 Teknik Informatika - Unijoyo 2
Istilah-istilah istilah dalam HTML: Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil < (tag awal) dan tanda lebih besar > (tag akhir).tag kontainer: <namatag>... </namatag> Element Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan. Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut. S1 Teknik Informatika - Unijoyo 3
Tag Utama dalam struktur dokumen HTML: <html> <! untuk menyatakan suatu dokumen HTML --> <head> <!-- memberikan informasi mengenai dokumen HTML > <!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META > </head> <body> <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML > </body> </html> S1 Teknik Informatika - Unijoyo 4
Contoh HTML sederhana: <html> <head> <title> HTML </title> </head> <body> Kami sedang mulai belajar HTML </body> </html> S1 Teknik Informatika - Unijoyo 5
Penggunaan komentar: Format: <! -- > Fungsi: Memberi nama aplikasi Mendeskripsikan tujuan pengkodean tertentu di dalam file Memberi nama pengarang Memberi tanggal pembuatan Memberi nomer versi Memberi informasi hak cipta S1 Teknik Informatika - Unijoyo 6
Tag-tag dalam <body>: Untuk warna latar belakang Untuk heading Untuk paragraf Untuk preformatted text Untuk blockquote Untuk break Untuk font Untuk format dokumen Untuk garis pemisah horisontal Untuk list/daftar Untuk memuat gambar Untuk hypertext link Dan lain-lain S1 Teknik Informatika - Unijoyo 7
Membuat warna latar belakang: Menggunakan warna <body bgcolor=#nnnnnn>... </body> Menggunakan gambar <body background= nama_file_gambar >... </body> S1 Teknik Informatika - Unijoyo 8
Relative Path Dalam direktori yg sama:./ Dalam direktori sebelumnya:../ S1 Teknik Informatika - Unijoyo 9
Heading: Untuk judul atau sub judul dalam dokumen HTML <h1 [align= left center right ]>... </h1> <h2 [align= left center right ]>... </h2>... <h6 [align= left center right ]>... </h6> S1 Teknik Informatika - Unijoyo 10
Paragraf: Paragraf yang bisa diatur perataannya (kiri, tengah, kanan): <p [align= left center right ]>... </p> S1 Teknik Informatika - Unijoyo 11
Preformatted Text: Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: <pre>... </pre> S1 Teknik Informatika - Unijoyo 12
Blockquote: Untuk menulis kutipan teks: <blockquote>... </ blockquote > S1 Teknik Informatika - Unijoyo 13
Break: Untuk menulis teks pada baris berikutnya: <br> S1 Teknik Informatika - Unijoyo 14
Font: Ukuran font <font size= n >... </font> Jenis font <font size= n face= jenis_font >... </font> Warna font <font size= n face= jenis_font color= warna >... </font> S1 Teknik Informatika - Unijoyo 15
Format dokumen: Bold: <b>...</b> Emphasized: <em>... </em> Italic: <i>... </i> Superscript: <sup>...</sup> Subscripted: <sub>... </sub> Struck trough: <del>... </del> S1 Teknik Informatika - Unijoyo 16
Garis pemisah horisontal: Garis horisontal untuk memisahkan teks dengan teks lain. <hr [align= left center right ] [size= n ] [width= nnn ] [noshade]> </hr> S1 Teknik Informatika - Unijoyo 17
List/Daftar Daftar: Unordered lists <UL>: daftar item dengan tanda bullet. <ul [type= disc square circle ] >... </ul> Ordered Lists <OL>: untuk membuat daftar item yang terurut. <ol [type= 1 a A I i"] [start= n ] >... </ol> Definition Lists <DL>: untuk menjelaskan istilah-istilah. <dl>... </dl> <dt>... </dt> <dd>... [</dd>] Menu List: menampilkan item-item yang mempunyai link ke page lain. <menu>... </menu> Directory List (DIR): untuk daftar item yang pendek atau kurang dari 20 karakter. <dir>... </dir> S1 Teknik Informatika - Unijoyo 18
Memuat Gambar: Memuat gambar ke dalam halaman Web <img src= URL name height= n width= n align= top center bottom ] /> S1 Teknik Informatika - Unijoyo 19
Hypertext Link: <a href= address >... </a> Link ke dokumen lain <a href= nama_dokumen >... </a> Link ke bagian tertentu dalam dokumen yang sama <a href= #target >... </a> <a href= target >... </a> Link ke alamat URL atau WebSite <a href= alamat_url >... </a> Link ke alamat Email <a href= mailto:alamat_email >... </a> Link File yang akan didownload <a href= nama_file >... </a> S1 Teknik Informatika - Unijoyo 20
Latihan: S1 Teknik Informatika - Unijoyo 21