View
225
Download
0
Category
Preview:
Citation preview
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.
S1 Teknik Informatika - Unijoyo 3
� 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.
S1 Teknik Informatika - Unijoyo 4
<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>
S1 Teknik Informatika - Unijoyo 5
<html><head>
<title> HTML </title></head><body>
Kami sedang mulai belajar HTML</body>
</html>
S1 Teknik Informatika - Unijoyo 6
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
S1 Teknik Informatika - Unijoyo 7
� 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 - Unijoyo 8
�Menggunakan warna<body bgcolor=#nnnnnn> . . . </body>
S1 Teknik Informatika - Unijoyo 9
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>
S1 Teknik Informatika - Unijoyo 10
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: ../
S1 Teknik Informatika - Unijoyo 11
� 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>
S1 Teknik Informatika - Unijoyo 12
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>
S1 Teknik Informatika - Unijoyo 13
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>
S1 Teknik Informatika - Unijoyo 14
�Untuk menulis kutipan teks:<blockquote> . . . </ blockquote >
S1 Teknik Informatika - Unijoyo 15
�Untuk menulis teks pada baris berikutnya:<br>
S1 Teknik Informatika - Unijoyo 16
�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 - Unijoyo 17
� Bold:<b> . . .</b>
� Emphasized:<em> . . . </em>
� Italic:<i> . . . </i>
� Superscript:<sup> . . .</sup>
� Subscripted:<sub> . . . </sub>
� Struck trough:<del> . . . </del>
S1 Teknik Informatika - Unijoyo 18
�Garis horisontal untuk memisahkan teks dengan tekslain.<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]
[noshade]> </hr>
S1 Teknik Informatika - Unijoyo 19
� 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>
S1 Teknik Informatika - Unijoyo 20
� Memuat gambar ke dalam halaman Web<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
S1 Teknik Informatika - Unijoyo 21
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>
S1 Teknik Informatika - Unijoyo 22
� 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
S1 Teknik Informatika - Unijoyo 23
� 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.
S1 Teknik Informatika - Unijoyo 24
Recommended