P - 5 Bab 4 : HTML (Hypertext Markup Language)

Transkripsi

1 P - 5 Bab 4 : HTML (Hypertext Markup Language) 4.1 Tujuan Mengerti konsep dasar, struktur, gaya penulisan, sound & background sound, hyperlink serta images, table, form & frame HTML. 4.2 Materi 1. Konsep Dasar HTML 2. Struktur Dokumen HTML 3. Tag HTML 4. Gaya Penulisan 5. Head, Body & Text 6. Image & Background Sound 7. Hyperlink 8. Images 9. Table 10. Form 11. Frame HTML 4.3 Apakah HTML itu? HTML merupakan bahasa untuk mendeskripsikan halaman web. Dengan kata lain HTML merupakan bahasa utama dari web browser. HTML singkatan untuk Hyper Text Markup Language HTML bukanlah bahasa pemrograman, HTML merupakan bahasa markup Sebuah bahasa markup adalah seperangkat tag markup HTML menggunakan tag markup untuk mendeskripsikan halaman web. HTML merupakan suatu bahasa yang digunakan untuk membuat suatu bentuk format halaman WEB. PSIK V (Pemrograman II/ PHP MySQL) - 1

2 Apa yang terlihat pada saat melihat halaman di Internet adalah merupakan interpretasi HTML terhadap web browser yang digunakan. Untuk melihat kode HTML dari suatu halaman di Internet, cukup klik "View" pada menu utama browser pilih "View Source". Contoh : Web Permata Indonesia permataindonesia. ac.id seperti berikut ini. PSIK V (Pemrograman II/ PHP MySQL) - 2

3 Apa kegunaan HTML? Jika ingin membuat website, tidak ada cara lain kecuali menggunakan HTML. Bahkan jika Anda menggunakan sebuah aplikasi untuk membuat website (contoh : Aptana Studio, Dreamweaver), maka pengetahuan dasar tentang HTML dapat mempermudah dan membuat website lebih baik. HTML mudah untuk dipelajari dan digunakan. Secara sederhana HTML dapat digunakan untuk membuat website. Dokumen HTML = Halaman Web Dokumen HTML mendeskripsikan halaman web Dokumen HTML berisi tag HTML dan teks biasa Dokumen HTML juga disebut halaman web Tujuan dari web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Browser tidak PSIK V (Pemrograman II/ PHP MySQL) - 3

4 menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi dari halaman tersebut : 4.4 Konsep Dasar HTML Eksetensi dari file HTML umumnya *.htm atau *.html. HTML juga bersifat Multi Platform (dapat berjalan pada sistem operasi apapun). HTML disebut sebagai Markup Language karena dalam text HTML mengandung tag tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Dalam membaca teks HTML tidak harus membaca dokumen tersebut secara berurutan dari atas ke bawah, tetapi dapat secara langsung ke topik tertentu dengan mengunakan Link (teks penghubung). Ciri-ciri dari dokumen HTML : o Terdapat Tag HTML Tang ditandai dengan < dan >. PSIK V (Pemrograman II/ PHP MySQL) - 4

5 Dalam penulisan kode HTML harus diawali dengan <tag_pembuka> dan diakhiri dengan </tag_penutup>. o Terdapat ELEMENT HTML, yang terdiri dari 2 bagian : HEAD merupakan kepala dokumen dari HTML, yang berfungsi untuk memberikan informasi tentang dokumen. BODY merupakan tubuh dari HTML, yang berfungsi untuk menentukan bagaimana isi suatu dokumen yang akan ditampilkan pada web browser. Dalam penulisan dokumen HTML dapat digunakan : o Text Editor Geany Gedit Kwrite Notepad ++ dll o Web Browser Mozilla Firefox Google Chroome Opera dll 4.5 Struktur dari dokumen HTML adalah sebagai berikut : Struktur <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Keterangan Tag Awal HTML Head HTML Kepala HTML Body HTML Tubuh HTML Tag Penutup HTML Keterangan : Tag Awal HTML, sebagai tanda awal dokumen HTML Head HTML, untuk tag informasi halaman title, base,isindex,link,script,style & meta. Body HTML, berisi atribut seperti background, Warna teks, warna link, warna visited link, warna active link, dll. Tag Penutup HTML PSIK V (Pemrograman II/ PHP MySQL) - 5

6 4.6 Tag HTML Tag <a> <b> <big> <blink> <blockquote> <body> <br> <center> <cite> <div> <em> <font> <head> <html> <i> <small> <strikc> <strong> <sub> <sup> <title> <h1> <p> <form> <input> <option> <select> <textarea> <img> <dd> <dl> <dt> <li> <ol> <ul> <caption> <table> <td> Keterangan Membuat hyperlink Format bold (tebal) teks Membesarkan teks Membuat teks berkedip Membuat kutipan Body (tubuh) HTML Format pindah baris Format rata tengan Menformat teks Membentuk format tulisan diposisikan Menampilkan teks dengan penekanan Menentukan jenis dan atribut font Head (kepala) HTML Tag HTML (dokumen HTML) Format Italic (miring) teks Format teks kecil Membuat garis mendatar Menampilkan teks dengan penekanan kuat Teks subscript Teks superscript Judul dokumen HTML Headline Format paragraf Form input (masukan) Field input Mendefinisikan item untuk objek input select Menu Pop Up Field input Memasukkan gambar Menyisipkan keterangan deskripsi dalam daftar definisi Menyisipkan daftar definisi dalam dokumen Judul definisi Item daftar Daftar berurutan Daftar tidak berurutan Judul tabel Membuat tabel Menyisipkan data sel tabel PSIK V (Pemrograman II/ PHP MySQL) - 6

7 <th> <tr> Menyisipkan sel judul tabel Mendefinisikan baris tabel 4.7 Gaya Penulisan Gaya penulisan pada HTML : Dalam penulisan kode HTML harus diawali dengan <tag_pembuka> dan diakhiri dengan </tag_penutup>. Pada saat menuliskan kode-kode HTML, Spasi dan Tab sekali atau beberapa kali tidak akan berpengaruh terhadap tampilan halaman HTML. Hanya memudahkan pembacaan kode HTML. Untuk pengaturan : o Spasi = o Ganti baris = <BR \> o Penulisan HTML juga menggunakan prameter-parameter tambahan, yakni mengkondisikan sebuah blok dengan bentuk bentuk yang diatur, misalnya untuk membuat tulisan diposisikan digunakan kode <div> dan diakhiri</div>. Kode tersebut belum mempunyai parameter tambahan artinya belum jelas seuatu block diposisikan dimana (kanan/kiri/tengah), untuk itu kode <div> harus ditambahkan parameter yakni align. o Contoh : Source HTML : <div align=center>posisi Tulisan Di Tengah</div> Source HTML : <div align=left>posisi Tulisan Di Kiri</div> Source HTML : <div align=right>posisi Tulisan Di Kanan</div> Contoh : <!--Wellcome.html-!> <HTML> <TITLE> Wellcome </TITLE> <BODY> <DIV ALIGN = CENTER> WELCOME TO POLITEKNIK KESEHATAN PERMATA INDONESIA </DIV> <DIV ALIGN = JUSTIFY> NAMA : DHYN <BR /> NIM : </BR> </DIV> PSIK V (Pemrograman II/ PHP MySQL) - 7

8 </BODY> </HTML> Hasil Di Web Browser : 4.8 Head, Body & Text Head Tag yang diperbolehkan diletakkan pada bagian head, antara lain : Tag <title> </title> <bash href = > <link href = > <meta name = content = > <isindex> <style ahref = > Keterangan Judul dokumen Tag yang menyatakan URL asal dari suatu dokumen Tag yang menyatakan hubungan antara suatu dokumen dengan dokumen lain Tag yang menyatakan suatu meta-informasi dalam suatu dokumen HTML Tag yang menyatakan bahwa dokumen ini diperkenankan diindeks oleh server web Tag yang mendefinisikan style dari dokumen Contoh : <HTML> <HEAD> <TITLE>Contoh Head</TITLE> </HEAD> <BODY> Contoh Head </BODY> </HTML> PSIK V (Pemrograman II/ PHP MySQL) - 8

9 Body Tag yang diperbolehkan diletakkan pada bagian body, antara lain : Tag Color Background Text Color Link Color Contoh : Warna Latar belakang Warna teks Warna link Keterangan <HTML> <HEAD> <TITLE>Contoh Body</TITLE> </HEAD> <BODY BGCOLOR = #00FFFF TEXT = #FF0000 LINK = #0000FF VLINK = # ALINK = #FF0000 > Contoh Body Color </BODY> </HTML> Text Beberapa format text yang akan digunakan antara lain : PSIK V (Pemrograman II/ PHP MySQL) - 9

10 Tag Keterangan Font, Size, Color <font face =. size = color = > </font> Paragraf <p> </p> Aligment <div align= > </div> (center, left, right) Blackquote <blockquote> </blockquote> Preformatted Text <pre> </pre> Document Division <div align = > </div> (center, left, right) Line Break <hr align = size= color = > Comment <! - - Comment - -!> 4.9 Sound & Background Sound Sound Syarat agar sound dapat dimainkan pada web browser yaitu dengan melengkapi plugin multimedia pada web browser tersebut. Tag yang digunakan untuk menampilkan sound pada web browser <SOUND SRC= > Contoh : <SOUND SRC= contoh_sound.wav > Keterangan : Menampilkan file contoh_sound dengan format *.wav. Background Sound Digunakan untuk memainkan sound secara otomatis. Tag yang digunakan yaitu dengan menabahkan BG <BGSOUND SRC = >. Contoh : <BGSOUND SRC= contoh_sound.wav > Format Sound Format sound yang sering dipakai : 1. *.WAV (Wave File) 2. *.MIDI (MIDI File) 3. *.AU (Audio File) 4. *.RA (Real Audio) PSIK V (Pemrograman II/ PHP MySQL) - 10

11 4.10 Hyperlink Hyperlink merupakan fasilitas dan kemampuan HTML yang menghubungkan suatu link dengan halaman WEB lain. Pembuatan link pada HTML menggunakan tag <A HREF> Source HTML : <A HREF= > </A> Contoh : <a href= Contoh Hyperlink </a> Hasil : 4.11 Images Images (gambar) merupakan salah satu element yang sangat penting, dengan alasan sebagai berikut : Memegang peranan penting dalam layout halaman web agar lebih menarik. Informasi images. Format Images Format gambar yang sering dipakai antara lain: 1. *.JPG / *.JPEG (Joint Picture Expert Network) 2. *.GIF (Graphics Interchange Format) 3. *.PNG (Portable Network Graphics) 4. *.BMP PSIK V (Pemrograman II/ PHP MySQL) - 11

12 Ketentuan pemilihan gambar : Karena setiap format images mempunyai kelebihan dan kelemahan masing-masing, maka harus ditentukan format images yang sesuai dengan tujuan. Menampilkan Images Tag yang digunakan untuk menapilkan images <img>. Source HTML : <IMG SRC = HEIGHT = WIDTH = ALT = ALIGN = BORDER = CLASS = ID = NAME = STYLE = > Keterangan : Source IMG HEIGHT WIDTH ALT ALIGN BORDER CLASS ID NAME STYLE Keterangan URL image Ukuran tinggi image (pixel) Ukuran lebar image (pixel) Teks tool tips Rata images (left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom) Lebar border (pixel) Alamat Style CSS (jika menggunakan) Identifier Nama image Styling Contoh : Source HTML : <img src= " width=360 height=360 border=2> Hasil : PSIK V (Pemrograman II/ PHP MySQL) - 12

13 Hyperlink Images Tag yang digunakan <a herf = ></a> Source HTML : <A HREF =. > <IMG SRC = > </A> Contoh : <a href= <img src=" width=360 height=360 border=2> </a> Hasil : PSIK V (Pemrograman II/ PHP MySQL) - 13

14 4.12 Evaluasi 1. Buat Directory Di XAMPP dengan Nama "Praktikum_HTML1". 2. Buat File HTML dengan menggunakan editor text (Intype, Notepad ++, Gedit, dll) : File HTML yang menampilkan : 1. NIM, 2. Nama, 3. Alamat, 4. Akun Facebook, 5. Akun Twitter, 6. Alamat , 7. Selanjutnya buat paragraf berisi biodata singkat dengan format paragraf rapi. Background (warna latar) tidak boleh PUTIH. Simpan dengan "Biodata.HTML". 3. Hasil : a) NIM dan Nama b) Script HTML yang telah dibuat. c) Print Screen hasil tampilannya. d) Simpan dengan nama Tugas_PWEB_HTML.docx PSIK V (Pemrograman II/ PHP MySQL) - 14