P - 5 Bab 4 : HTML (Hypertext Markup Language) fileKonsep Dasar HTML 2. Struktur Dokumen HTML 3. Tag...

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

P - 5Bab 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 HTML2. Struktur Dokumen HTML3. Tag HTML4. Gaya Penulisan5. Head, Body & Text6. Image & Background Sound7. Hyperlink8. Images9. Table10. 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


◦ 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 seperti berikut ini.


http://fti.mercubuana-yogya.ac.id/




• 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



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 <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 Keterangan<HTML>

<HEAD> … </HEAD><BODY> … </BODY>

</HTML>

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



<th> Menyisipkan sel judul tabel<tr> 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 : 052671 </BR>

</DIV>



</BODY></HTML>

Hasil Di Web Browser :

4.8 Head, Body & Text

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

Tag Keterangan<title> … </title> Judul dokumen<bash href = ”…”> Tag yang menyatakan URL asal dari suatu dokumen<link href = “…”> Tag yang menyatakan hubungan antara suatu

dokumen dengan dokumen lain<meta name = “…” content = “…”> Tag yang menyatakan suatu meta-informasi dalam

suatu dokumen HTML<isindex> Tag yang menyatakan bahwa dokumen ini

diperkenankan diindeks oleh server web<style ahref = ”…”> Tag yang mendefinisikan style dari dokumen

Contoh :<HTML>

<HEAD><TITLE>Contoh Head</TITLE>

</HEAD><BODY>

Contoh Head</BODY>

</HTML>



BodyTag yang diperbolehkan diletakkan pada bagian body, antara lain :

Tag KeteranganColor Warna Background Latar belakangText Color Warna teksLink Color Warna link

Contoh :

<HTML><HEAD>

<TITLE>Contoh Body</TITLE></HEAD><BODY BGCOLOR = “#00FFFF ” TEXT = “#FF0000” LINK = “#0000FF ”

VLINK = “ #800080” ALINK = “#FF0000”>Contoh Body Color

</BODY></HTML>

TextBeberapa format text yang akan digunakan antara lain :



Tag KeteranganFont, 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)



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=http://www.dnd-sq.tk>

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

<IMG SRC = “…” HEIGHT = “…” WIDTH = “…” ALT = “…” ALIGN = “…” BORDER = “…” CLASS = “…” ID = “…” NAME = “…” STYLE = “…”>

Keterangan :

Source KeteranganIMG URL imageHEIGHT Ukuran tinggi image (pixel)WIDTH Ukuran lebar image (pixel)ALT Teks tool tipsALIGN Rata images (left, right, top, texttop, middle, absmiddle,

baseline, bottom, absbottom)BORDER Lebar border (pixel)CLASS Alamat Style CSS (jika menggunakan)ID IdentifierNAME Nama imageSTYLE Styling

Contoh :Source HTML :<img src= "http://www.permataindonesia.ac.id/wp-content/uploads/2011/05/logo-pi.jpg" width=360 height=360 border=2>

Hasil :



Hyperlink Images✔ Tag yang digunakan <a herf =”…”></a>✔ Source HTML :

<A HREF = “….”><IMG SRC = “…”>

</A>

✔ Contoh :<a href=http://www.permataindonesia.ac.id>

<img src="http://www.permataindonesia.ac.id/wp-content/uploads/2011/05/logo-pi.jpg" width=360 height=360 border=2></a>

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 Namab) Script HTML yang telah dibuat.c) Print Screen hasil tampilannya.d) Simpan dengan nama Tugas_PWEB_HTML.docx

Date post:	02-Mar-2019
Category:	Documents
Upload:	lenga
View:	223 times
Download:	0 times

P - 5 Bab 4 : HTML (Hypertext Markup Language) fileKonsep Dasar HTML 2. Struktur Dokumen HTML 3. Tag...

Documents