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

Program Studi DIII Rekam Medis POLITEKNIK KESEHATAN PERMATA INDONESIA Jl. Ringroad Utara No. 22, Gandok, Condong Catur, Depok, Sleman. Telp. (0274) 6411536, 7475694. Fax. (0274) 641153

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. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

4.3

Konsep Dasar HTML Struktur Dokumen HTML Tag HTML Gaya Penulisan Head, Body & Text Image & Background Sound Hyperlink Images Table Form Frame HTML 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


◦ ◦

◦

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 → http://permataindonesia.ac.id berikut ini.

seperti



•

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


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 “>”.



Dalam penulisan kode HTML harus diawali dengan dan diakhiri dengan . 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 : Text Editor  Geany  Gedit  Kwrite  Notepad ++  dll Web Browser  Mozilla Firefox  Google Chroome  Opera  dll 

o

o

o

4.5

Struktur dari dokumen HTML adalah sebagai berikut :

Struktur

… …

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



4.6

Tag HTML Tag

<em> <small> <strikc> <strong> <sub> <sup> <h1> <p> <form> <input> <option> <select> <textarea> <img> <dd> <dl> <dt> <li> <ol> <ul> <caption> <table> <td><br /> <br /> 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<br /> <br /> Program Studi DIII Rekam Medis POLITEKNIK KESEHATAN PERMATA INDONESIA Jl. Ringroad Utara No. 22, Gandok, Condong Catur, Depok, Sleman. Telp. (0274) 6411536, 7475694. Fax. (0274) 641153<br /> <br /> <th> <tr> 4.7<br /> <br /> Menyisipkan sel judul tabel Mendefinisikan baris tabel<br /> <br /> Gaya Penulisan<br /> <br /> • •<br /> <br /> •<br /> <br /> •<br /> <br /> 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
WELCOME TO POLITEKNIK KESEHATAN PERMATA INDONESIA

NAMA : DHYN
NIM : 052671



Hasil Di Web Browser :

4.8

Head, Body & Text Head Tag yang diperbolehkan diletakkan pada bagian head, antara lain : Tag

… <meta name = “…” content = “…”> <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 : <TITLE>Contoh Head Contoh Head



Body Tag yang diperbolehkan diletakkan pada bagian body, antara lain : Tag Color Background Text Color Link Color

Keterangan Warna Latar belakang Warna teks Warna link

Contoh : <TITLE>Contoh Body Contoh Body Color

Text Beberapa format text yang akan digunakan antara lain :



Tag Font, Size, Color Paragraf Aligment Blackquote Preformatted Text Document Division Line Break Comment 4.9

Keterangan
…

…
(center, left, right)
…
<pre> …
…
(center, left, right)

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” . ▪ Contoh :

Format Sound Format sound yang sering dipakai : 1. *.WAV (Wave File) 2. *.MIDI (MIDI File) 3. *.AU (Audio File) 4. *.RA (Real Audio)



4.10

Hyperlink Hyperlink merupakan fasilitas dan kemampuan HTML yang menghubungkan suatu link dengan halaman WEB lain.  Pembuatan link pada HTML menggunakan tag  Source HTML :

Contoh : Contoh Hyperlink

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



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 “”.  Source HTML :

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 :

Hasil :



Hyperlink Images ✔ Tag yang digunakan ✔ Source HTML :

✔

Contoh :

Hasil :



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 e-mail, 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

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

Recommend Documents