Hypertext PowerPoint Presentation, PPT

Hypertext PowerPoint Presentation, PPT - DocSlides

. Markup. . Language. (HTML. ). BAB 2. Intro. HTML : format . standar. . untuk. . membuat. . dokumen. web. Spesifikasi. HTML . standar. (HTML 4.01 ) : http://www.w3.org/TR/html4. HTML . merupakan. ID: 605051

By pasty-toler
Watch All docs

Likes : 5
Views : 32

Download this presentation

Click below link (As may be) to get this presentation.

Hypertext

Download Note - 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.

Presentations text content in Hypertext

Hypertext Markup Language (HTML)
BAB 2
Intro
HTML : 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
biasa
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
)
Contoh Isi Dokumen HTML
<html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. </body></html>
Tag HTML
Tag
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
s
edangkan
yang
tag
yang mengandung garis miring ( / ) adalah penutup elemen atau akhir
elemen
Jenis Tag HTML
Containers
Standalone
tag
Tag HTML - Containers
C
ara
penulisannya dengan cara
berpasangan
mempunyai
tag
pembuka dan penutup
tag
Contoh
:
<
body>
… </
body>
<b … </
b>
<
i>
… </
i>
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
website
Contoh
:
<
img>
untuk menampilkan gambar
<
br>
untuk memberi jarak antar teks ( vertikal)
<
hr>
untuk membuat garis
Jenis Tag HTML secara fungsional
Tag
Dasar
Tag
Pemformatan
Tag Computer Output
Tag
Cititation
,
Quotation
,
Definition
Tag
Link
Tag
Image
0
Tag Dasar
1
Tag Pemformatan
2
Tag Computer Output
3
Tag Cititation, Quotation, Definition
4
Tag Link
5
Tag Image
6
Tag Judul (Heading)
<hn>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 6
7
Tag Paragraf (Paragraph)
paragrafUntuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.Homepage ini masih dalam tahap pengembangan, oleh karena itutampilannya masih terlalu sederhana.Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
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.
8
Tag Atribut 1 (Bold, Italic, Underline)
Kalimat yang dicetak tebalKalimat yang dicetak miringKalimat yang digarisbawahi 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
Kata dapat dicetak
tebal
,
miring
,
garis bawah
,
tebal
miring
, dan
kombinasi
di tengah huruf normal
9
Tag Atribut 2 (Superscript, Subscript)
bagian yang dicetak tinggibagian yang dicetak rendah Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
(x1 + x2)2 = x12 + x22 + 2x1x22H2 + O2 = 2 H2O
(x
1
+ x
2
)
2
= x
1
2
+ x
2
2
+ 2x
1
x
2
2H
2
+ O
2
= 2 H
2
O
0
Tag Ganti Baris (Break line)
Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) :
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
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.
1
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
Ukuransatu,dua,tiga,empat,lima,enam,tujuh
kalimat kalimat n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)
Ukuran
2
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 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
Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan
3
Tag Font (color)
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color
Warna
Red
MaroonLimeGreenBlueNavyYellowFuschiaAqua
Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua
<font
color="#
RRGGBB"
>
kalimat
RR
= 00 .. FF (intensitas warna merah dalam heksadesimal)
GG
= 00 .. FF (intensitas warna hijau dalam heksadesimal)
BB
= 00 .. FF (intensitas warna biru dalam heksadesimal)
4
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> Sektor tersebut merupakan ...Fasilitas penginapan di Indonesia:<ol> <li>Losmen</li> 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 ...
5
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.
6
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.
7
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
8
Latihan Soal
Cari dan pelajarilah contoh lain dari Form and Input Tag pada HTML!
Buatlah
sebuah
halaman
html
sederhana
yang
menampilkan
informasi
data
diri
/
profil
Anda
.
9