Download - Pemrograman Basis Data Berbasis Web 03
![Page 1: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/1.jpg)
11S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo
PemrogramanPemrograman Basis Data Basis Data
BerbasisBerbasis WebWeb
PertemuanPertemuan KeKe--33
(HTML)(HTML)
OlehOleh: : NoorNoor IfadaIfada
![Page 2: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/2.jpg)
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.
![Page 3: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/3.jpg)
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.
![Page 4: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/4.jpg)
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>
![Page 5: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/5.jpg)
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>
![Page 6: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/6.jpg)
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
![Page 7: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/7.jpg)
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
![Page 8: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/8.jpg)
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>
![Page 9: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/9.jpg)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 99
Relative Path
• Dalam direktori yg sama: ./
• Dalam direktori sebelumnya: ../
![Page 10: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/10.jpg)
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>
![Page 11: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/11.jpg)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1111
ParagrafParagraf::
• Paragraf yang bisa diatur perataannya(kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
![Page 12: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/12.jpg)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1212
Preformatted TextPreformatted Text::
• Untuk menampilkan teks sama sepertiyang diketikkan dalam dokumen HTML:<pre> . . . </pre>
![Page 13: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/13.jpg)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1313
BlockquoteBlockquote::
• Untuk menulis kutipan teks:<blockquote> . . . </ blockquote >
![Page 14: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/14.jpg)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1414
BreakBreak::
• Untuk menulis teks pada baris berikutnya:<br>
![Page 15: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/15.jpg)
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>
![Page 16: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/16.jpg)
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>
![Page 17: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/17.jpg)
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>
![Page 18: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/18.jpg)
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>
![Page 19: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/19.jpg)
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”] />
![Page 20: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/20.jpg)
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>
![Page 21: Pemrograman Basis Data Berbasis Web 03](https://reader035.vdocuments.site/reader035/viewer/2022071600/613d16ba736caf36b7592db7/html5/thumbnails/21.jpg)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2121
LatihanLatihan::