Pemrograman Basis Data Berbasis Web 03

11S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo

PemrogramanPemrograman Basis Data Basis Data

BerbasisBerbasis WebWeb

PertemuanPertemuan KeKe--33

(HTML)(HTML)

OlehOleh: : NoorNoor IfadaIfada

S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 22

HTMLHTML

• singkatan dari HyperText Markup Language

• menentukan tampilan suatu teks dan tingkat kepentingan dariteks tersebut dalam suatu dokumen.

Software yang diperlukan:

• Text editor sederhana.

Contoh:

Windows: Notepad

Linux: gEdit, mcedit, pico, dan vi.

• Web browser untuk menampilkan dokumen web yang dibuat.

Contoh:

Windows: Internet Explorer, Opera dan Firefox

Linux: Firefox dan Conqueror.


IstilahIstilah--istilahistilah dalamdalam HTML:HTML:

• Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir).Tag kontainer:

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

• Element – Jenis-jenis dari tag. HTML mempunyai banyakelemen untuk berbagai keperluan dengan berbagai bentukpenggunaan.

• Attribute - Digunakan untuk memodifikasi nilai dari elemenHTML. Suatu elemen biasanya akan mempunyai banyakatribut.


Tag Tag UtamaUtama dalamdalam strukturstruktur

dokumendokumen HTML:HTML:<html><!– untuk menyatakan suatu dokumen HTML -->

<head><!-- memberikan informasi mengenai dokumen HTML >

<!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE danMETA >

</head><body>

<!-- menyimpan informasi atau data yang akan ditampilkan dalamdokumen HTML >

</body></html>


ContohContoh HTML HTML sederhanasederhana::

<html>

<head>

<title> HTML </title>

</head>

<body>

Kami sedang mulai belajar HTML

</body>

</html>


PenggunaanPenggunaan komentarkomentar::

Format:

<! -- >

Fungsi:

• Memberi nama aplikasi

• Mendeskripsikan tujuan pengkodean tertentu didalam file

• Memberi nama pengarang

• Memberi tanggal pembuatan

• Memberi nomer versi

• Memberi informasi hak cipta


TagTag--tag tag dalamdalam <body>:<body>:

• 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


MembuatMembuat warnawarna latarlatar belakangbelakang::

• Menggunakan warna

<body bgcolor=#nnnnnn> . . . </body>

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


Relative Path

• Dalam direktori yg sama: ./

• Dalam direktori sebelumnya: ../


Heading:Heading:

• Untuk judul atau sub judul dalam dokumenHTML<h1 [align=”left”|”center”|”right”]> . . . </h1>

<h2 [align=”left”|”center”|”right”]> . . . </h2>

.

.

.

<h6 [align=”left”|”center”|”right”]> . . . </h6>


ParagrafParagraf::

• Paragraf yang bisa diatur perataannya(kiri, tengah, kanan):

<p [align=”left”|”center”|”right”]> . . . </p>


Preformatted TextPreformatted Text::

• Untuk menampilkan teks sama sepertiyang diketikkan dalam dokumen HTML:<pre> . . . </pre>


BlockquoteBlockquote::

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


BreakBreak::

• Untuk menulis teks pada baris berikutnya:<br>


FontFont::

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


Format Format dokumendokumen::

• Bold:

<b> . . .</b>

• Emphasized:

<em> . . . </em>

• Italic:

<i> . . . </i>

• Superscript:

<sup> . . .</sup>

• Subscripted:

<sub> . . . </sub>

• Struck trough:

<del> . . . </del>


GarisGaris pemisahpemisah horisontalhorisontal::

• Garis horisontal untuk memisahkan teksdengan teks lain.<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]>

</hr>


ListList//DaftarDaftar::

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

• Ordered Lists <OL>: untuk membuat daftar item yang terurut.

<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 link ke page lain.<menu> . . . </menu>

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


MemuatMemuat GambarGambar::

• Memuat gambar ke dalam halaman Web <img src=”URL”|”name” height=”n” width=”n”

align=”top”|”center”|”bottom”] />


Hypertext Link:Hypertext Link:

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

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

• Link ke bagian tertentu dalam dokumen yang sama<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>


LatihanLatihan::

Pemrograman Basis Data Berbasis Web 03

Documents