Pertemuan Ke-2 (HTML) · Istilah-istilah dalam HTML Tag Utama dalam struktur dokumen HTML Contoh HTML sederhana Penggunaan komentar ... Mendeskripsikan tujuan pengkodean tertentu

Pertemuan Ke-2(HTML)

D3 Manajemen Informatika - Unijoyo 1

HTML?Istilah-istilah dalam HTMLTag Utama dalam struktur dokumen HTMLContoh HTML sederhanaPenggunaan komentarTag-tag dalam <body>

S1 Teknik Informatika - Unijoyo 2

� 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: NotepadLinux: gEdit, mcedit, pico, dan vi.

� Web browser untuk menampilkan dokumen web yang dibuat.Contoh:Windows: Internet Explorer, Opera dan FirefoxLinux: Firefox dan Conqueror.


� Tag - Digunakan untuk menentukan tingkah lakuweb browser. Dinyatakan dengan tanda lebih kecil“<“ (tag awal) dan tanda lebih besar “>” (tagakhir).Tag kontainer:

<namatag> ..... </namatag>

� Element – Jenis-jenis dari tag. HTML mempunyaibanyak elemen untuk berbagai keperluan denganberbagai bentuk penggunaan.

� Attribute - Digunakan untuk memodifikasi nilaidari elemen HTML. Suatu elemen biasanya akanmempunyai banyak atribut.


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

</body></html>


<html><head>

<title> HTML </title></head><body>

Kami sedang mulai belajar HTML</body>

</html>


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


� 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


�Menggunakan warna<body bgcolor=#nnnnnn> . . . </body>


Script:<html>

<head><title> Penggunaan Latar BelakangWarna </title>

</head><body bgcolor="cyan">Kami sedang mulai belajarPemrograman Basis Data Berbasis Web

</body></html>

Tampilan:

�Menggunakan gambar<body background=“nama_file_gambar”> . . . </body>


Script:<html>

<head><title> Penggunaan Latar Belakang

Gambar </title></head><body background="./gambar/picture01.jpg">

Kami sedang mulai belajarPemrograman Basis Data Berbasis Web

</body></html>

Tampilan:

�Dalam direktori yg sama: ./�Dalam direktori sebelumnya: ../


� 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>


Script:<html><head><title> Heading </title>

</head><body>

<h1 align="center"> Heading 1: Materi HTML </h1><h2 align="center"> Heading 2: Materi HTML </h2><h3 align="center"> Heading 3: Materi HTML </h3><h4 align="center"> Heading 4: Materi HTML </h4><h5 align="center"> Heading 5: Materi HTML </h5><h6 align="center"> Heading 6: Materi HTML </h6>

</body></html>

Tampilan:

� Paragraf yang bisa diatur perataannya (kiri, tengah,kanan):<p [align=”left”|”center”|”right”]> . . . </p>


Script:<html><head>

<title> Paragraf </title></head><body><h2 align="center"> Materi HTML </h2><p align="right">Kami sedang mulai

belajar Pemrograman Basis Data BerbasisWeb. Pada awal materi kami diperkenalkanpada konsep dasar Web </p>

<p align="left">Saat ini masuk kemateri Dasar-dasar HTML </p></body>

</html>

Tampilan:

�Untuk menampilkan teks sama seperti yangdiketikkan dalam dokumen HTML:<pre> . . . </pre>


�Untuk menulis kutipan teks:<blockquote> . . . </ blockquote >


�Untuk menulis teks pada baris berikutnya:<br>


�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>


� Bold:<b> . . .</b>

� Emphasized:<em> . . . </em>

� Italic:<i> . . . </i>

� Superscript:<sup> . . .</sup>

� Subscripted:<sub> . . . </sub>

� Struck trough:<del> . . . </del>


�Garis horisontal untuk memisahkan teks dengan tekslain.<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]

[noshade]> </hr>


� Unordered lists <UL>: daftar item dengan tanda bullet.<ul [type=“disc”|”square”|”circle”] > . . . </ul>

� Ordered Lists <OL>: untuk membuat daftar item yangterurut.<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 linkke page lain.<menu> . . . </menu>

� Directory List (DIR): untuk daftar item yang pendek ataukurang dari 20 karakter.<dir> . . . </dir>


� Memuat gambar ke dalam halaman Web<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />


Script:<html><head>

<title> Insert Gambar </title></head><body>

<b> Aloooo ... </b><img src="./TFR2A.gif" >

</body></html>

Tampilan:

Format:<a href=”address” > . . . </a>

� Link ke dokumen lain<a href=”nama_dokumen” > . . . </a>

� Link ke bagian tertentu dalam dokumen yangsama<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>


� HTML digunakan untuk menentukan tampilan suatu teksdan tingkat kepentingan dari teks tersebut dalam suatudokumen

� Tag-tag utama dalam dokumen HTML adalah <head> dan<body>.

� <head> digunakan untuk memberikan informasi mengenaidokumen HTML, seperti TITLE, TITLE, BASE, ISINDEX, LINK,SCRIPT, STYLE dan META.

� <body> digunakan untuk menyimpan informasi atau datayang akan ditampilkan di dalam dokumen HTML. Di dalamtag ini, dapat dilakukan berbagai macam pengaturan,misalnya mengatur warna latar belakang, membuatheading, membuat paragraf, membuat preformatted text,membuat blockquote, membuat break, memformat font,memformat dokumen, membuat garis pemisah horisontal,membuat list/daftar, memuat gambar, membuat hypertextlink, dan lain-lain


� Chris Bates [2006]. Web Programming: BuildingInternet Applications, Third Edition, John Wiley& Sons Ltd, England.

� Husni [2007]. Pemrograman Database BerbasisWeb, Graha Ilmu, Yogyakarta.

� Sebesta, R.W. [2002], Programming the WorldWide Web, Addison Wesley.

� Sutarman, S.Kom [2003]. Membangun AplikasiWeb dengan PHP dan MySQL, Graha Ilmu,Yogyakarta.

Documents

Pertemuan Ke-2 (HTML) · Istilah-istilah dalam HTML Tag Utama dalam struktur dokumen HTML Contoh HTML sederhana Penggunaan komentar ... Mendeskripsikan tujuan pengkodean tertentu