Modul 2 Memahami Dasar Hypertext Markup Language
bradinformatika
5 views
15 slides
Sep 15, 2025
Slide 1 of 15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
About This Presentation
Modul 2 HTML
Slide Content
Modul 2 : Dasar-dasar HTML (1) 1
Mempelajari dasar-dasar text formatting,
color,pattern dan graphics pada HTML
Memahami Dasar HTML (1)
Modul-2 :
Mempelajari dasar-dasar text formatting,
color,pattern dan graphics pada HTML
Memahami Dasar HTML (1)
Modul-2 :
Modul 2 : Dasar-dasar HTML (1) 2
Dalam modul ini akan dipelajari:
1.Dasar Text Formatting
2.Font
3.Color
4.Image
5.Link
NARASI
OFF
Dalam modul ini akan dipelajari:
1.Dasar Text Formatting
2.Font
3.Color
4.Image
5.Link
NARASI
OFF
Modul 2 : Dasar-dasar HTML (1) 3
1. HTML dan Text Formating
HTML : HyperText Markup Language adalah suatu
dokumen teks yang dirancang sedemikian rupa dalam
bentuk tag-tag sehingga pada saat dibaca oleh
BROWSER akan menampilkan
pesan/informasi/tampilan sesuai keinginan perancang
Format HTML adalah
<kodeTag> teks yang dikenai efek </kodeTag>
misal : <HTML> isi dok</HTML>
<TITLE>Judul dokumen </TITLE>
NARASI
OFF
1. HTML dan Text Formating
HTML : HyperText Markup Language adalah suatu
dokumen teks yang dirancang sedemikian rupa dalam
bentuk tag-tag sehingga pada saat dibaca oleh
BROWSER akan menampilkan
pesan/informasi/tampilan sesuai keinginan perancang
Format HTML adalah
<kodeTag> teks yang dikenai efek </kodeTag>
misal : <HTML> isi dok</HTML>
<TITLE>Judul dokumen </TITLE>
NARASI
OFF
Modul 2 : Dasar-dasar HTML (1) 4
Contoh tag HTML dan efeknya
<u><i>Hello</i><BR><b>BOS!!</b></u>
<font size=18>APA KABAR?</font>
HASIL PADA BROWSER ? klik
NARASI
OFF
Contoh tag HTML dan efeknya
<u><i>Hello</i><BR><b>BOS!!</b></u>
<font size=18>APA KABAR?</font>
HASIL PADA BROWSER ? klik
NARASI
OFF
Modul 2 : Dasar-dasar HTML (1) 5
2. Format HTML
<kode> Teks yang diformat </kode>
Dokumen HTML dimulai dengan <HTML> ditutup </HTML>
Secara umum isi dokumen HTML terdiri dari head dan body
<HTML>
</HTML>
<head>
bagian kepala dokumen
</head>
<body
bagian tubuh dokumen
</body>
Klik
untuk
melihat
struktur
HTML
2. Format HTML
<kode> Teks yang diformat </kode>
Dokumen HTML dimulai dengan <HTML> ditutup </HTML>
Secara umum isi dokumen HTML terdiri dari head dan body
<HTML>
</HTML>
<head>
bagian kepala dokumen
</head>
<body
bagian tubuh dokumen
</body>
Klik
untuk
melihat
struktur
HTML
Modul 2 : Dasar-dasar HTML (1) 6
Bagian <Head>...</Head>
Bagian ini berisi <TITLE> judul</TITLE>, yaitu
judul yang akan ditampilkan diatas dokumen
Berisi keterangan lain berkaitan dengan head
Tag header :
<H1> .. Judul model 1 </H1>
<H2> .. Judul model 2 </H2>
<H3> .. Judul model 3 </H3>
Dst sampai dengan H6
Bagian <Head>...</Head>
Bagian ini berisi <TITLE> judul</TITLE>, yaitu
judul yang akan ditampilkan diatas dokumen
Berisi keterangan lain berkaitan dengan head
Tag header :
<H1> .. Judul model 1 </H1>
<H2> .. Judul model 2 </H2>
<H3> .. Judul model 3 </H3>
Dst sampai dengan H6
Modul 2 : Dasar-dasar HTML (1) 7
Contoh efek pada TITLE dan <Hn>
Klik untuk
melihat efek
TITLE dan
Hn pada
browser
Contoh efek pada TITLE dan <Hn>
Klik untuk
melihat efek
TITLE dan
Hn pada
browser
Modul 2 : Dasar-dasar HTML (1) 8
3. Tag Format Teks dan font
<p> ..</p> :paragraf baru
<BR> : baris baru
<HR> = garis datar
<i> ..</i> : tulisan italic (miring)
<b>..</b> : tulisan bold (tebal)
<u>..</u> : tulisan underline (digaris bawahi)
<font face =“model” size =ukuran color=warna> .. </font>
Klik untuk lihat efek tag
3. Tag Format Teks dan font
<p> ..</p> :paragraf baru
<BR> : baris baru
<HR> = garis datar
<i> ..</i> : tulisan italic (miring)
<b>..</b> : tulisan bold (tebal)
<u>..</u> : tulisan underline (digaris bawahi)
<font face =“model” size =ukuran color=warna> .. </font>
Klik untuk lihat efek tag
Modul 2 : Dasar-dasar HTML (1) 9
Mencampur warna sendiri dengan RGB
Tag <font color=warna>
memnungkinkan kita untuk
mencampura warna
sendiri dengan komposisi
RGB, dengan tiap warna
diwakili oleh dua digit
Hexa sehingga : “FF0000”
= red
“00FF00” = green
“0000FF” = blue
Contoh Berikut ini warna
campuran
red+green=yellow,
red+blue=magenta
Mencampur warna sendiri dengan RGB
Tag <font color=warna>
memnungkinkan kita untuk
mencampura warna
sendiri dengan komposisi
RGB, dengan tiap warna
diwakili oleh dua digit
Hexa sehingga : “FF0000”
= red
“00FF00” = green
“0000FF” = blue
Contoh Berikut ini warna
campuran
red+green=yellow,
red+blue=magenta
Modul 2 : Dasar-dasar HTML (1) 10
4. Tag untuk meng-inset Image
<IMG SRC=“gambar” BORDER=n>
COntoh
Demo sebenarnya
4. Tag untuk meng-inset Image
<IMG SRC=“gambar” BORDER=n>
COntoh
Demo sebenarnya
Modul 2 : Dasar-dasar HTML (1) 11
Efek BORDER
BORDER=n
Dengan n menunjukkan tingkat ketebalan garis bingkai
Demo sebenarnya
Border 1Border 3Border 5Border 7
Efek BORDER
BORDER=n
Dengan n menunjukkan tingkat ketebalan garis bingkai
Demo sebenarnya
Border 1Border 3Border 5Border 7
Modul 2 : Dasar-dasar HTML (1) 12
5. Link
<A HREF=“alamat_link"> teks ke link</A>
alamat_link = nama file html/gambar atau alamat internet
Teks ke link = tulisan yang bergaris bawah menunjukkan link
Klik untuk lihat hasil
Demo sebenarnya
5. Link
<A HREF=“alamat_link"> teks ke link</A>
alamat_link = nama file html/gambar atau alamat internet
Teks ke link = tulisan yang bergaris bawah menunjukkan link
Klik untuk lihat hasil
Demo sebenarnya
Modul 2 : Dasar-dasar HTML (1) 13
Gambar sebagai link
Pada prinsipnya gambar juga
dapat dibuat linknya, yaitu
memadukan antara <A HREF>
dengan <IMG SRC> sbb :
<A HREF=“link">
<IMG SRC=“gambar_kelink"
BORDER=0>
Klik
Pada
gambar
Bolamp
demo
Gambar sebagai link
Pada prinsipnya gambar juga
dapat dibuat linknya, yaitu
memadukan antara <A HREF>
dengan <IMG SRC> sbb :
<A HREF=“link">
<IMG SRC=“gambar_kelink"
BORDER=0>
Klik
Pada
gambar
Bolamp
demo
Modul 2 : Dasar-dasar HTML (1) 14
Rangkuman
HTML adalah sebuah dokumen teks yang sebagian
teks tersebut adalah tag, yaitu kode yang berfungsi
sebagai pemformat efek keluaran pada browser
Dokumen HTML memiliki struktur :
<HTML>
<Head>.. </Head>
<Body> ..</Body>
</HTML>
Pada head dan body terdefinisi tag-tag yang berkaitan
dengan format huruf, warna, gambar, link dan lain-lain
Rangkuman
HTML adalah sebuah dokumen teks yang sebagian
teks tersebut adalah tag, yaitu kode yang berfungsi
sebagai pemformat efek keluaran pada browser
Dokumen HTML memiliki struktur :
<HTML>
<Head>.. </Head>
<Body> ..</Body>
</HTML>
Pada head dan body terdefinisi tag-tag yang berkaitan
dengan format huruf, warna, gambar, link dan lain-lain
Modul 2 : Dasar-dasar HTML (1) 15
Latihan
1.Buatlah dokumen HTML dengan ketentuan efek tulisan tulisan
pada browser adalah sebagai mana berikut ini
Halo Teknik Informatika
APA KABAR KAMU?
Keterangan :
Tulisan Halo (warna biru) dan Teknik Informatika (warna
merah dan miring) pakai huruf arial ukuran 12. Tulisan APA
KABAR KAMU? Tulisan berwarna kuning ukuran 16
2.Sempurnakan dokumen HTML di atas dengan tulisan Teknik
informatika adalah link pada suatu dokumen HTML lain yang
berisi penjelasan tentang teknik informatika
Latihan
1.Buatlah dokumen HTML dengan ketentuan efek tulisan tulisan
pada browser adalah sebagai mana berikut ini
Halo Teknik Informatika
APA KABAR KAMU?
Keterangan :
Tulisan Halo (warna biru) dan Teknik Informatika (warna
merah dan miring) pakai huruf arial ukuran 12. Tulisan APA
KABAR KAMU? Tulisan berwarna kuning ukuran 16
2.Sempurnakan dokumen HTML di atas dengan tulisan Teknik
informatika adalah link pada suatu dokumen HTML lain yang
berisi penjelasan tentang teknik informatika
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 5
- Slides 15
- Age 81 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
50 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
49 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
38 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
36 views
21
Know for Certain
DaveSinNM
24 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
27 views