Hypertext Markup Language (HTML)xa.yimg.com/kq/groups/22896681/239316676/name/03 - Hyper-Text... ·...

Jurusan Teknik InformatikaSekolah Tinggi Teknologi Telkom

Hypertext Markup Language (HTML)Hypertext Markup Language (HTML)

YFA

S1/IT/WE/E2/0806

CS4713

YFA: Web Engineering

Pengantar HTMLPengantar HTML

� Hypertext Markup Language (HTML) merupakan bahasa

pemrograman web berupa suatu format data yang digunakan

untuk membuat dokumen hypertext yang dapat dibaca,

diinterpretasikan dari satu platform komputer ke platform

komputer lainnya tanpa perlu melakukan suatu perubahan apa

pun.

� Dokumen HTML sebenarnya adalah suatu dokumen teks biasa.

Lalu kenapa disebut dengan HTML?

� HTML merupakan pengembangan dari SGML (Standard

Generalized Markup Language).


Dokumen HTMLDokumen HTML

MS-WordNotepadMs-FrontPageContoh Editor

TidakTidakYaMemiliki Link

YaTidakYaMemiliki Format

GrafisTeksTeksJenis

WYSIWYGTXTHTML


Elemen HTMLElemen HTML

� Elemen pada sebuah dokumen HTML dapat dibagi menjadi dua

kategori utama, yaitu:

� <HEAD> ... </HEAD> yang menyatakan informasi tentang dokumen tersebut, seperti judul dokumen, meta tag, atau

hubungannya dengan dokumen lainnya.

� <BODY> ... </BODY> yang menentukan bagaimana format dan isi suatu dokumen yang akan ditampilkan oleh web browser,

seperti paragram, tabel, frame, teks, gambar, hyperlink dll.


Tag HTMLTag HTML

� Tag dinyatakan dengan “<“ dan “>” .

� Tag dalam dokumen HTML biasanya merupakan suatu pasangan yaitu tag awal “<nama_tag>” dan tag akhir “</nama_tag>”.

� Contoh untuk menampilkan tulisan yang dicetak tebal:<b> Teks ini ditampilkan di web browser. </b>


Nested TagNested Tag

� Tag yang mengandung tag lain di dalamnya disebut nested tag.<tag1>

Teks ini untuk Tag1

<tag2>

Teks ini untuk Tag2

</tag2>

</tag1>


Tag Kosong dan Tag BeratributTag Kosong dan Tag Beratribut

� Bentuk:<tag> Teks </tag>

<tag>

<tag atribut=argumen> Teks </tag>

� Contoh:<title>Home Page Saya</title>

<br>

<font face="arial">Aplikasi Internet</font>


Struktur Dokumen HTMLStruktur Dokumen HTML

<HTML>

<HEAD>

***** Script Bagian Head *****

</HEAD>

<BODY>

***** Script Bagian Body *****

</BODY>

</HTML>


Bagian HEADBagian HEAD

<HEAD>

<TITLE>...........</TITLE>

<BASE HREF="...............">

<STYLE HREF="url_style_sheet">

<STYLE>............</STYLE>

<META NAME="..." CONTENT="...">

</HEAD>


Tag Pemformatan TextTag Pemformatan Text

� Paragraph: <P align=”left/center/right”> . . . </P>

� Preformatted Text: <PRE> . . . </PRE>

� BlockQuote: <BLOCKQUOTE> . . . </BLOCKQUOTE>

� DIV: <DIV align=”” class=”” style=””> . . . </DIV>

� Multi Kolom: <MULTICOL cols=”3” gutter=”25”> . . . </MULTICOL>


Karakter SpesialKarakter Spesial

� mewakili blank

� < mewakili <

� > mewakili >

� © mewakili ©

� » mewakili »

� dll


HeadingHeading

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>


Physical StylePhysical Style

� <B>…</B> untuk menebalkan teks

� <I>…</I> untuk membuat teks terlihat miring

� <U>…</U> untuk menggarisbawahi teks

� <S>…</S> untuk memberikan coretan pada teks

� <BLINK>…</BLINK> untuk membuat teks berkedip, hanya

ada pada Netscape

� <TT>…</TT> untuk menampilkan teks dalam font

typewriter

� <BIG>…</BIG> untuk membesarkan teks

� <SMALL>…</SMALL> untuk mengecilkan teks

� <SUB>…</SUB> untuk membuat teks subscript

� <SUP>…</SUP> untuk membuat teks superscript

Logical StyleLogical Style

� <DFN>…</DFN> untuk menandai suatu definisi (miring)

� <EM>…</EM> untuk menandai suatu penekanan teks (miring),

berasal dari kata “Emphasis”

� <CITE>…</CITE> untuk menandai suatu citation (miring)

� <CODE>…</CODE> untuk menyatakan suatu kode program,

ditampilkan dalam font fixed pitch atau monoscapced.

� <KBD>…</KBD> untuk menyatakan suatu keyboard, ditampilkan

dalam font monoscapced. Sering digunakan untuk pembuatan buku

petunjuk atau manual book

� <SAMP>…</SAMP> untuk menyatakan teks contoh, ditampilkan

dalam font monoscapced

� <STRONG>…</STRONG> untuk menyatakan teks dengan penekanan

yang kuat (tebal).

� <VAR>…</VAR> untuk menyatakan suatu variabel

�  untuk membuat suatu komentar atau keterangan.


Logical Style Logical Style (lanjutan)(lanjutan)

� Apa perbedaan antara Physical Style dan Logical Style?

� Format teks mana yang mungkin berubah-ubah, Physical Style

atau Logical Style?


FontFont

� Menentukan Ukuran Teks<font size = “…”> ….</font>

� Mengubah Warna Teks<font color = “…”> ….</font>

� Jenis Font<font face = “…”> ….</font>


Pemisah AntarteksPemisah Antarteks

<p>

Teks yang anda tuliskan akan terlihat berada dalam satu baris dan hanya akan pindah baris berikutnya jika telah melampaui lebar window browser. Tetapi anda dapat memaksakan teks anda untuk pindah ke baris berikutnya dengan menggunakan elemen <BR>

<BR><B>seperti yang terlihat dalam contoh ini,

<BR>brgitu juga dengan baris ini</B>

<P>

<img src=logo.gif align=left height=30%>Elemen <BR> juga dapat digunakan bersama-sama dengan gambar.

<br>Bahkan anda dapat membuat teks disebelah kiri atau kanan gambar untuk berpindah ke <b>bagian bawah gambar</b>

<br clear=left>sebelum teks memenuhi sebelah kiri atau kanan gambar


Pemisah Antarteks Pemisah Antarteks (lanjutan)(lanjutan)

� Atribut CLEAR mempunyai 3 buah nilai, yaitu:

�LEFT : Memindahkan teks ke bagian bawah gambar untuk

gambar yang berada di sebelah kiri teks

�RIGHT : Memindahkan teks ke bagian bawah gambar untuk

gambar yang berada di sebelah kanan teks

�ALL : Memindahkan teks ke bagian bawah gambar untuk

gambar yang memiliki teks dikiri dan kanannya.

� <NOBR>…</NOBR> untuk meniadakan ganti baris

� <HR size=”…” width=”…” align=”…”> untuk membuat

garis pemisah horisontal

� <SPACER type=”[horizontal/vertical]” size=”…”height=”…” width=”…” =”…” align=”…”> untuk

membuat spasi dalam ukuran pixel


LinkLink

� Anchor tag: penandaan untuk membuat link antara dua

halaman/dokumen yang terpisah atau ke area khusus pada satu

halaman web.

� Sintaks tag <a>:<a href=“path"> Link Teks </a>

� Selain atribut href, juga terdapat atribut target yang digunakan untuk membuat sebuah frame atau jendela (window)

baru untuk menampilkan halaman web lainnya yang dituju.


JenisJenis Path Path dalamdalam LinkLink

� Salah satu bagian terpenting dari suatu link yaitu path, yang

menyatakan lokasi file halaman/dokumen lain menjadi tujuan

dari link yang bersangkutan.

� Jenis path dalam HTML:

�Absolute path, link mengarah pada file yang lokasinya terpisah dari

dokumen HTML yang sedang aktif.

�Relative path, link mengarah pada file yang lokasinya relatif

terhadap dokumen HTML yang sedang aktif (dalam direktori yang

sama, subdirektori maupun dalam direktori yang lebih tinggi

tingkatannya dengan dokumen yang saat ini aktif).

ContohContoh Link Link –– 1 1



<a href="http://if.stttelkom.net">

Kunjungi Website Informatika STT TELKOM

</a>

<p>



<a href="dokumen2.html"> Buka Dokumen Kedua </a><br>

<a href="../dokumen3.html"> Buka Dokumen Ketiga </a><br>

<a href="info/rai/dokumen4.html"> Buka Dokumen Keempat </a>


Link Link keke BagianBagian TertentuTertentu daridari DokumenDokumen

� Link dapat juga digunakan untuk mengarahkan ke suatu bagian

tertentu dalam suatu dokumen HTML. Cara ini membutuhkan

pendefinisian nama untuk bagian/lokasi yang menjadi tujuan

dari link tersebut.


ContohContoh Link Link –– 2 2

<a href="#HTML"> Pengertian HTML </a><br><a href="link.html#CSS"> Pengertian CSS </a><br><a href="link.html#PHP"> Pengertian PHP </a><br><br><hr><p><H1>Pemrograman Web<br><i>Web Programming</i></H1><hr>

<p><a name="HTML"><H2>Pengertian HTML</H2><br>HTML adalah bla bla bla bla.. .<br> HTML .. .<br>

</a>

<p><a name="CSS"><H2>Pengertian CSS</H2><br>CSS adalah bla bla bla bla.. .<br> CSS .. .<br>

</a>

<p><a name="PHP"><H2>Pengertian PHP</H2><br>PHP adalah bla bla bla bla.. .<br> PHP .. .<br>

</a>


GambarGambar sebagaisebagai LinkLink

� Sebuah link dalam dokumen HTML dapat juga dikombinasikandengan sebuah gambar yang digunakan sebagai hyperlink. Hal ini dapat dilakukan dengan cara menempatkan tag <img>untuk menampilkan gambar di antara tag <a>.

� Sintaks tag <img>:<img src="path" align="top|middle|bottom|left|right" width=".. " height=".." border=".." alt="TeksKeterangan Gambar">

� Contoh:Link dapat juga dikombinasikan dengan menggunakangambar:

<br>

<a href="dokumen2.html">

<img src="link.jpg" alt="Buka Dokumen 2">

</a>


FormForm

� Form interaktif memungkinkan suatu web server menerima

data/informasi dari user melalui sejumlah elemen yang disebut

kontrol.

� Kontrol dapat berupa check box, radio button, push button, list

menu, textarea dan beberapa kontol lainnya.

� Tag <form> dalam dokumen HTML memiliki dua buah atribut

yaitu:

�Action, digunakan untuk menunjukkan URL atau dokumen

pemrosesan form selanjutnya.

�Method, digunakan untuk menunjukkan bagaimana cara form

tersebut diberlakukan.


SintaksSintaks FormForm

� Sintaks tag <form>:<form method="post|get" action="URL_script">

� Tag pendukung pembuatan form:

� Input tag <input>, memiliki beberapa tipe yaitu:

� Check box

� Radio

� Text

� Password

� Submit

� Reset

�Textarea tag <textarea>

�Select tag <select>


ContohContoh FormForm

<H1>Contoh Formulir Pendaftaran</H1><form method="post|get" action="URL_script"><pre>

Nama : <input type=text name="nama">Alamat : <input type=text name="alamat" size=40>No. HP : <input type=text name="hp" value="+62" size=15>

Jenis Kelamin : <input type=radio name="gender" value="Laki-laki"> Lakilaki<input type=radio name="gender“ value="Perempuan">Perempuan

Minat : <input type=checkbox name="minat" value="HTML">HTML<input type=checkbox name="minat" value="ASP">ASP<input type=checkbox name="minat" value="PHP">PHP


ContohContoh Form Form ((lanjutanlanjutan))

Username : <input type=text name="username" size=8 maxlength=8>Password : <input type=password name="password" size=8 maxlength=8>

Sistem Operasi : <select name="os"><option value="win98">Windows 98/ME</option><option value="winnt" selected>Windows

NT/2000/XP</option><option value="linux">Linux</option>

</select>

Catatan : <textarea name="catatan" cols=30 rows=5></textarea><br><input type=submit value="Simpan"> <input type=reset value="Ulangi">

</pre></form>


TableTable

� Tag yang berfungsi dalam pembuatan tabel meliputi:

�Table tag <table> </table>, digunakan untuk mendefinisikansebuah tabel. Table tag memiliki beberapa elemen yaitu align, background, bgcolor, border, cellpadding, cellspacing, bordercolor, width, valign serta rowspan dan colspan.

�Table data tag <td> </td>, digunakan untuk mendefinisikan isi

dari setiap sel atau kolom dalam baris tabel yang telah dibuatdengan tag <tr>.

�Table header tag <th> </th>, digunakan untuk mendefinisikanjudul setiap baris atau kolom.

�Table row tag <tr> </tr>, digunakan untuk mendefinisikansebuah baris dalam tabel.


ContohContoh Table Table –– 1 1

<table align=center border=1 cellpadding=5 cellspacing=2><tr>

<td colspan=2> </td><th colspan=3 bgcolor=#0099AA> Topik </th>

</tr><tr>

<td colspan=2> </td><th bgcolor=#0099AA> HTML </th><th bgcolor=#0099AA> ASP </th><th bgcolor=#0099AA> PHP </th>

</tr><tr>

<th rowspan=3 bgcolor=#0088CC> Waktu </th><th bgcolor=#0088CC> Pagi </th><td> Penuh </td><td> Kosong </td><td> Kosong </td>

</tr>


ContohContoh Table Table –– 1 1 ((lanjutanlanjutan))

<tr><th bgcolor=#0088CC> Siang </th><td> Penuh </td><td> Penuh </td><td> Kosong </td>

</tr><tr>

<th bgcolor=#0088CC> Malam </th><td> Kosong </td><td> Kosong </td><td> Penuh </td>

</tr></table>


FrameFrame

� Jendela web browser dapat dibagi menjadi beberapa bagian

yang lebih kecil dengan adanya frame set tag. Masing-masing

bagian tersebut dapat terdiri dari dokumen HTML tersendiri,

sehingga pada satu saat yang bersamaan dapat ditampilkan

beragam informasi.

� Tidak semua web browser mendukung pembentukan frame.

Beberapa web browser versi lama tidak bisa menampilkan

frame, untuk mengantisipasi hal tersebut dapat pula disertakan tag <noframes> ... </noframes> sebagaialternatif dokumen lain yang dijalankan sebagai pengganti.


FungsiFungsi FrameFrame

� Kemampuan frame ini memungkinkan untuk:

�Membuat suatu daftar isi (menu) pada satu frame, sementara sisi

frame yang lain digunakan untuk menampilkan isi (content).

�Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu

sisi frame, sedangkan sisi-sisi frame yang lainnya digunakan untuk

menampilkan isi atau informasi lain.

�Membuat suatu dokumen tanya-jawab (FAQ) dengan satu sisi frame

memuat daftar pertanyaan dan frame yang lain memuat jawaban

masing-masing pertanyaan tersebut.


SintaksSintaks FrameFrame

� Sebuah frame dalam dokumen HTML dapat dibuat dengganmenggunaan penandaan <frameset> dan <frame>.

� Tag <frameset> dibentuk dengan beberapa atribut:

�rows, digunakan untuk pembuatan frame secara mendatar denganmenentukan lebar masing-masing frame.

�cols, digunakan untuk pembuatan frame secara vertikal denganmenentukan lebar masing-masing frame.

� Tag <frame> dibentuk dengan beberapa atribut yaitu align, marginheight, marginwidth, name, noresize danscrolling.


ContohContoh Frame Frame

� Contoh: file frame.html<frameset rows="20%,*">

<frame src="frame-top.html">

<frameset cols="22%,*">

<frame src="frame-left.html">

<frame name="content" src="">

</frameset>

</frameset>

� Contoh: file frame-top.html<body bgcolor="#CCCCCC">

<center>

<H1> Rekayasa Aplikasi Internet</H1>

<H3> Contoh Penggunaan Frame</H3>

</center>

</body>


ContohContoh Frame Frame ((lanjutanlanjutan))

� Contoh: file frame-left.html

<body bgcolor="#CCCCCC">

<base target="content">

<b>

Menu Utama:<br>

<a href="content1.html">Pemrograman HTML</a><br>

<a href="content2.html">Pemrograman ASP</a><br>

<a href="content3.html">Pemrograman PHP</a><br>

</b>

</body>

� Sediakan juga file-file sebagai content yang dibutuhkan untuk

ditampilkan pada sisi frame yang lain, beri nama file-file tersebut

sesuai dengan contoh hyperlink pada pilihan menu yang Anda buat

dalam frame sebelah kiri.


Rekayasa Aplikasi Internet: HTML

YFA – Yanuar Firdaus A.W, ST., MT.

August 2006

http://www.yanuar.net

[email protected]

+62 888 275 1300

Hypertext Markup Language (HTML)xa.yimg.com/kq/groups/22896681/239316676/name/03 - Hyper-Text... ·...

Documents

Transcript of Hypertext Markup Language (HTML)xa.yimg.com/kq/groups/22896681/239316676/name/03 - Hyper-Text... ·...