Markup Language HTML BAB 2 Intro HTML format standar untuk membuat dokumen web Spesifikasi HTML standar HTML 401 httpwwww3orgTRhtml4 HTML merupakan ID: 605051
Download Presentation The PPT/PDF document "Hypertext" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Hypertext Markup Language (HTML)
BAB 2Slide2
IntroHTML : format standar
untuk
membuat
dokumen
web
Spesifikasi
HTML
standar
(HTML 4.01 ) : http://www.w3.org/TR/html4
HTML
merupakan
bahasa
bertanda
,
menggunakan
rangkaian
teks
tertentu
(tag)
untuk
menandai
teks
yang
mempunyai
interpretasi
khusus
File HTML
berupa
file
teks
(
plain text file
),
bukan
binary file
,
sehingga
dapat
dibuat
menggunakan
editor
teks
biasaSlide3
Skema Dasar Dokumen HTML
<
HTML>
<HEAD>
<TITLE>
Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML>
HTML:
menandai
awal
dan
akhir
dokumen
HTML
HEAD:
menandai
bagian
header
dokumen
HTML
TITLE:
memberi
judul
pada
dokumen
HTML
BODY:
menandai
awal
dan
akhir
isi
dokumen
(yang
ditampilkan
)Slide4
Contoh Isi Dokumen HTML
<html>
<head>
<title>Homepage
saya
</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan
,
nama
saya ..... Ini adalah <i>homepage</i> <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>. </p> </body></html> <!-- akhir dokumen HTML -->Slide5
Tag HTMLTag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam
suatu
dokumen
HTML
Tag
dalam HTML terdiri dari tanda lebih kecil (<), tanda lebih besar (>), dan garis miring (/).Biasanya tag dituliskan secara berpasangan, misanya <h1> dan </h1> namun ada juga yang tidak.Tag yang tidak menggunakan garis miring (/) adalah tag pembuka atau awal elemen sedangkan yang tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemenSlide6
Jenis Tag HTMLContainers
Standalone
tag
Slide7
Tag HTML - ContainersCara
penulisannya dengan cara
berpasangan
mempunyai
tag
pembuka dan penutup tagContoh:<body> … </body><b … </b><i>
… </
i>Slide8
Tag HTML - Standalone tag
T
ag
yang bisa berdiri sendiri tanpa perlu mempunyai
tag penutup.Tag tersebut biasanya hanya berfungi menempatkan sebuah elemen pada halam websiteContoh:<img> untuk menampilkan gambar<br> untuk memberi jarak antar teks ( vertikal)<hr> untuk membuat garisSlide9
Jenis Tag HTML secara fungsional
Tag
Dasar
Tag
Pemformatan
Tag Computer OutputTag Cititation, Quotation, DefinitionTag LinkTag ImageSlide10
Tag DasarSlide11
Tag PemformatanSlide12
Tag Computer OutputSlide13
Tag Cititation, Quotation, DefinitionSlide14
Tag LinkSlide15
Tag ImageSlide16
Tag Judul (Heading)
<
h
n
>
Judul paragraf</hn>n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf
<h1>
Judul Tingkat 1
</h1><h2>Judul Tingkat 2</h2><h3>Judul Tingkat 3</h3><h4>Judul Tingkat 4</h4><h5>Judul Tingkat 5</h5><h6>Judul Tingkat 6</h6>
Judul Tingkat 1
Judul Tingkat 2
Judul Tingkat 3
Judul Tingkat 4
Judul Tingkat 5
Judul Tingkat 6Slide17
Tag Paragraf (Paragraph)
<p>
paragraf
</p>
Untuk menandai suatu paragraf.
Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.<p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.</p>
<p>
Homepage ini masih dalam tahap pengembangan, oleh karena itu
tampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p>Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.Slide18
Tag Atribut 1 (Bold, Italic, Underline)
<b>
Kalimat yang dicetak tebal
</b>
<i>
Kalimat yang dicetak miring</i><u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi.Kata dapat dicetak tebal, miring
,
garis bawah
, tebal miring, dan kombinasi di tengah huruf normal<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p>Slide19
Tag Atribut 2 (Superscript, Subscript)
<sup>
bagian yang dicetak tinggi
</sup>
<sub>
bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.<p>(x<sub>1</sub> + x<sub>
2
</sub>
)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p><p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O
(x
1
+ x
2
)
2
= x
1
2
+ x
2
2
+ 2x
1
x
2
2H
2
+ O
2
= 2 H
2
OSlide20
Tag Ganti Baris (Break line)
<br>
Untuk pindah ke baris berikutnya.
Bentuk penulisan lain yang dianjurkan (
XML style
) :<br />Perkenalkan,nama saya ..... Ini adalahhomepage pertama saya,karena saya baru belajar tentang caramembuat homepage.Homepage ini masih dalam tahap pengembangan,oleh karena itu tampilannya masih terlalu sederhana.
Paragraf
Paragraf
Ganti baris
<p>Perkenalkan,
<br />
nama saya ..... Ini adalah
<br />
homepage pertama saya,
<br />
karena saya baru belajar tentang cara
<br />
membuat homepage.</p>
<p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p>Slide21
Tag Font (size)
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.
Tag : font Parameter :
size
, face, color
Ukuran satu, dua, tiga, empat, lima, enam, tujuh
Ukuran
<font size="1">
satu,</font><font size="2">dua,</font><font size="3">tiga,</font><font size="4">empat,</font><font size="5">lima,</font><font size="6">enam,</font><font size="7">tujuh</font>
<font
size="
n"
>
kalimat
</font>
<font
size="
m"
>
kalimat
</font>
n
= 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)
m
= -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)
UkuranSlide22
Tag Font (face)
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.
Tag : font Parameter : size,
face
, color
Jenis huruf
<font
face="
nama font"> kalimat </font>nama font = Times New Roman, Arial, Courier New, Verdana, dll.Homepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembangan
<font face="Times New Roman">
Homepage ini masih dalam tahap pengembangan
</font>
<br />
<font face="Arial">
Homepage ini masih dalam tahap pengembangan
</font>
<br />
<font face="Courier New">
Homepage ini masih dalam tahap pengembangan
</font>
<br />
<font face="Verdana">
Homepage ini masih dalam tahap pengembangan
</font>Slide23
Tag Font (color)
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.
Tag : font Parameter : size, face,
color
Warna
Red
Maroon
Lime
GreenBlueNavyYellowFuschiaAqua<b><font color="#FF0000">Red</font><br /><font color="#800000">Maroon</font><br /><font color="#00FF00">Lime</font><br /><font color="#008000">Green</font><br /><font color="#0000FF">Blue</font><br /><font color="#000080">Navy</font><br /><font color="#FFFF00">
Yellow
</font>
<br />
<font color="#FF00FF">
Fuchsia
</font>
<br />
<font color="#00FFFF">
Aqua
</font>
</b>
<font
color="#
RRGGBB"
>
kalimat
</font>
RR
= 00 .. FF (intensitas warna merah dalam heksadesimal)
GG
= 00 .. FF (intensitas warna hijau dalam heksadesimal)
BB
= 00 .. FF (intensitas warna biru dalam heksadesimal)Slide24
Tag Enumerasi (List, Unordered List, Ordered List
)
<li>
item
</li>
Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>Ada beberapa sektor potensial:<li>Pariwisata</li><li>
Seni
</li>
<li>Budaya</li><br />Sektor tersebut merupakan ...<p>Fasilitas penginapan di Indonesia:<ol> <li>Losmen</li><br /> Losmen merupakan tempat penginapan yang berskala kecil <li>Hotel</li> <ul> <li>Hotel melati</li> <li>Hotel berbintang</li> </ul></ol>Perkembangan dalam ...
Ada beberapa sektor potensial:
Pariwisata
Seni
Budaya
Sektor tersebut merupakan …
Fasilitas penginapan di Indonesia:
1. Losmen
Losmen merupakan tempat penginapan
yang berskala kecil
2. Hotel
Hotel melati
Hotel berbintang
Perkembangan dalam ...Slide25
Tag Garis Mendatar (Horizontal Line)
<hr>
membentuk garis pemisah mendatar.
Bentuk penulisan lain yang dianjurkan (
XML style) : <hr />Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.<hr />Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
Homepage ini masih dalam tahap pengembangan,
oleh karena itu tampilannya masih terlalu sederhana.Slide26
Tag Gambar (Image)
<img src
="
NamaFileGambar"
>
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) : <img src="NamaFileGambar" />
<img src="cover.jpg" align="left" />
Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu <img src="logo.gif" alt="Logo" /> sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.Slide27
Form dan Input Tag di
HTML
Text
Field
<input type="text" name="firstname">
Textarea<textarea rows="4" cols="50">Isi</textarea>Checkboxes<input type="checkbox" name="tampilan" value="Ganteng">Radio Button
<input type="radio" name="sex" value="Laki-laki
">
Laki-laki<br>Slide28
Latihan SoalCari dan pelajarilah contoh lain dari Form and Input Tag pada HTML!
Buatlah
sebuah
halaman html sederhana yang menampilkan informasi data diri / profil Anda.