Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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.
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 33
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.
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 44
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 55
ContohContoh HTML HTML sederhanasederhana::
<html>
<head>
<title> HTML </title>
</head>
<body>
Kami sedang mulai belajar HTML
</body>
</html>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 66
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 77
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 88
MembuatMembuat warnawarna latarlatar belakangbelakang::
• Menggunakan warna
<body bgcolor=#nnnnnn> . . . </body>
• Menggunakan gambar<body background=“nama_file_gambar”> . . . </body>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 99
Relative Path
• Dalam direktori yg sama: ./
• Dalam direktori sebelumnya: ../
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1010
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1111
ParagrafParagraf::
• Paragraf yang bisa diatur perataannya(kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1212
Preformatted TextPreformatted Text::
• Untuk menampilkan teks sama sepertiyang diketikkan dalam dokumen HTML:<pre> . . . </pre>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1313
BlockquoteBlockquote::
• Untuk menulis kutipan teks:<blockquote> . . . </ blockquote >
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1414
BreakBreak::
• Untuk menulis teks pada baris berikutnya:<br>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1515
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1616
Format Format dokumendokumen::
• Bold:
<b> . . .</b>
• Emphasized:
<em> . . . </em>
• Italic:
<i> . . . </i>
• Superscript:
<sup> . . .</sup>
• Subscripted:
<sub> . . . </sub>
• Struck trough:
<del> . . . </del>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1717
GarisGaris pemisahpemisah horisontalhorisontal::
• Garis horisontal untuk memisahkan teksdengan teks lain.<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]>
</hr>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1818
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1919
MemuatMemuat GambarGambar::
• Memuat gambar ke dalam halaman Web <img src=”URL”|”name” height=”n” width=”n”
align=”top”|”center”|”bottom”] />
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2020
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2121
LatihanLatihan::