際際滷

際際滷Share a Scribd company logo
Dasar-dasar HTML
Donny Reza, S.Kom
Aplikasi IT-1
Teknik Informatika
Universitas Komputer Indonesia
HTML
HTML (Hypertext Markup Language) merupakan bahasa yang
digunakan untuk membangun halaman website.
HyperText: Text yang ditampilkan pada komputer atau alat elektronik
lainnya dengan merujuk ke text lainnya yang dapat diakses, biasanya
dengan mengeklik mouse atau menekan tombol tertentu.
HyperText tidak terbatas pada text, tapi juga dapat berisi tabel atau
gambar. HyperText merupakan dasar dari struktur web.
(http://en.wikipedia.org/wiki/Hypertext )
Markup: Kode yang diperlukan agar dapat dibaca oleh browser.
(Intro To HTML 4.01, Dawn Friedman)
Elemen dan Tag HTML
<title>This is a title</title>
Contoh elemen HTML
<title>This is a title</title>
Ini merupakan Tag Awal Ini merupakan tag
akhir/tag penutup
Ini merupakan isi/konten
Elemen dan Tag HTML
Elemen dan Tag
Tag penutup tidak harus selalu ada,
terutama untuk tag-tag yang tidak memiliki
konten teks. Contohnya:
<img />, tag untuk menampilkan gambar
<hr />, tag untuk membuat garis horizontal
<br />, tag untuk loncat ke baris baru
<!DOCTYPE html>
<html>
<head>
<title>Halaman 1</title>
</head>
<body>
<! comment -->
<h1>Judul</h1>
<hr />
</body>
</html>
Struktur HTML
Struktur HTML
Doctype digunakan untuk menginformasikan browser, HTML versi apa yang
digunakan.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML Basic 1.1 (quick reference):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
HTML 5
<!DOCTYPE HTML>
Sumber doctype di atas bisa dilihat di http://www.w3.org/QA/2002/04/valid-dtd-
list.html dan http://www.w3schools.com/tags/tag_DOCTYPE.asp
Struktur HTML
<html> merupakan root atau induk dari seluruh tag
html.
<head> ,merupakan kepala dari halaman html,
pada bagian ini biasanya digunakan untuk
elemen-elemen yang tidak ditampilkan oleh
browser.
<body>, merupakan isi dari halaman website, apa
pun yang akan ditampilkan oleh browser,
ditempatkan di bagian ini.
Latihan
<html>
<head>
<title>Web Pertama</title>
</head>
<body>
<h1>Web Pertama Saya</h1>
<h2>Aplikasi IT-1</h2>
</body>
</html>
Simpan dengan nama latihan1.html
Tag Heading
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
Tag Paragraph
<p>Dari 66.778 desa yang tersebar di Indonesia, baru
sekitar 24.000 atau 36% di antaranya yang sudah
terjangkau layanan telekomunikasi. Sedangkan sisanya,
42.778 desa atau sekitar 64% di antaranya, masih dalam
tahap rencana pembangunan.</p>
<p>Demikian dipaparkan Eddy Kurnia, Head of Corporate
Communication Telkom. Rencana pembangunan ini
akan digarap Telkom bersama anak perusahaan
selulernya, Telkomsel, dalam program Universal Service
Obligation (USO).</p>
Karakter Khusus
Dalam HTML dapat digunakan
simbol tertentu yang dapat
digunakan untuk
mewakili/mengganti suatu
karakter.
Sebagai contoh, tag html
menggunakan karakter < dan >.
Maka, agar browser dapat
menampilkan karakter tersebut,
digunakan simbol khusus, yaitu
&lt; untuk karakter < dan &gt;
untuk karakter >
Contoh Karakter Khusus
<p>Dalam matematika, tanda lebih besar
diwakili oleh simbol &gt; dan tanda lebih
kecil diwakili oleh simbol &lt;.</p>

More Related Content

Similar to Dasar-dasar HTMLDasar-dasar HTML0001.ppt (20)

Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
Resa Firmansyah
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)
Arifin Swift
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
T Ghazali
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
ssuser71d74a
HTML
HTMLHTML
HTML
ANDREAS MAHLAN
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
Dedy Setiawan
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
NansyeDeboraLitaay
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
http://www.facebook.com/SeikatKasihDanSayang
DASAR HTML
DASAR HTMLDASAR HTML
DASAR HTML
Sahrul Sindriana
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
AndreianYusuf
Mpw
MpwMpw
Mpw
Khoirul Habib
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
vicky alhuda
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
Deka M Wildan
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
rahmi wahyuni
Tugas2 1300631019
Tugas2 1300631019Tugas2 1300631019
Tugas2 1300631019
setiyo muji
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
Desma_susanti
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
Toni Tegar Sahidi
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
RaniRatnaningsih2
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
FAUZY38
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
Resa Firmansyah
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)
Arifin Swift
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
T Ghazali
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
ssuser71d74a
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
Dedy Setiawan
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
NansyeDeboraLitaay
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
AndreianYusuf
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
Deka M Wildan
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
rahmi wahyuni
Tugas2 1300631019
Tugas2 1300631019Tugas2 1300631019
Tugas2 1300631019
setiyo muji
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
Desma_susanti
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
Toni Tegar Sahidi
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
RaniRatnaningsih2
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
FAUZY38

More from Antonius Eko Yulianto (10)

DASAR - DASAR FOTOGRAFI PEMULA.pptx
DASAR  -  DASAR   FOTOGRAFI  PEMULA.pptxDASAR  -  DASAR   FOTOGRAFI  PEMULA.pptx
DASAR - DASAR FOTOGRAFI PEMULA.pptx
Antonius Eko Yulianto
Tugas DDKV Packaging Makanan.pptx
Tugas    DDKV   Packaging   Makanan.pptxTugas    DDKV   Packaging   Makanan.pptx
Tugas DDKV Packaging Makanan.pptx
Antonius Eko Yulianto
Peraturan Pertandingan Badminton.pptx
Peraturan   Pertandingan  Badminton.pptxPeraturan   Pertandingan  Badminton.pptx
Peraturan Pertandingan Badminton.pptx
Antonius Eko Yulianto
Contoh Desain Packaging Pizza jobsheet.pptx
Contoh Desain Packaging Pizza jobsheet.pptxContoh Desain Packaging Pizza jobsheet.pptx
Contoh Desain Packaging Pizza jobsheet.pptx
Antonius Eko Yulianto
TipografiDasarTipografiDasar00000001.ppt
TipografiDasarTipografiDasar00000001.pptTipografiDasarTipografiDasar00000001.ppt
TipografiDasarTipografiDasar00000001.ppt
Antonius Eko Yulianto
PERTEMUAN 1-Java Fundamental SMK TP.2023
PERTEMUAN 1-Java Fundamental SMK TP.2023PERTEMUAN 1-Java Fundamental SMK TP.2023
PERTEMUAN 1-Java Fundamental SMK TP.2023
Antonius Eko Yulianto
Materi Pengenalan PBO siswa SMK semester 2
Materi Pengenalan PBO siswa SMK semester 2Materi Pengenalan PBO siswa SMK semester 2
Materi Pengenalan PBO siswa SMK semester 2
Antonius Eko Yulianto
HAU eco lodge Pangandaran 2024.pdf
HAU eco lodge Pangandaran 2024.pdfHAU eco lodge Pangandaran 2024.pdf
HAU eco lodge Pangandaran 2024.pdf
Antonius Eko Yulianto
1b.-intro-php (2).ppt
1b.-intro-php (2).ppt1b.-intro-php (2).ppt
1b.-intro-php (2).ppt
Antonius Eko Yulianto
Sop pemeliharaan inventaris
Sop pemeliharaan inventarisSop pemeliharaan inventaris
Sop pemeliharaan inventaris
Antonius Eko Yulianto
DASAR - DASAR FOTOGRAFI PEMULA.pptx
DASAR  -  DASAR   FOTOGRAFI  PEMULA.pptxDASAR  -  DASAR   FOTOGRAFI  PEMULA.pptx
DASAR - DASAR FOTOGRAFI PEMULA.pptx
Antonius Eko Yulianto
Tugas DDKV Packaging Makanan.pptx
Tugas    DDKV   Packaging   Makanan.pptxTugas    DDKV   Packaging   Makanan.pptx
Tugas DDKV Packaging Makanan.pptx
Antonius Eko Yulianto
Peraturan Pertandingan Badminton.pptx
Peraturan   Pertandingan  Badminton.pptxPeraturan   Pertandingan  Badminton.pptx
Peraturan Pertandingan Badminton.pptx
Antonius Eko Yulianto
Contoh Desain Packaging Pizza jobsheet.pptx
Contoh Desain Packaging Pizza jobsheet.pptxContoh Desain Packaging Pizza jobsheet.pptx
Contoh Desain Packaging Pizza jobsheet.pptx
Antonius Eko Yulianto
TipografiDasarTipografiDasar00000001.ppt
TipografiDasarTipografiDasar00000001.pptTipografiDasarTipografiDasar00000001.ppt
TipografiDasarTipografiDasar00000001.ppt
Antonius Eko Yulianto
PERTEMUAN 1-Java Fundamental SMK TP.2023
PERTEMUAN 1-Java Fundamental SMK TP.2023PERTEMUAN 1-Java Fundamental SMK TP.2023
PERTEMUAN 1-Java Fundamental SMK TP.2023
Antonius Eko Yulianto
Materi Pengenalan PBO siswa SMK semester 2
Materi Pengenalan PBO siswa SMK semester 2Materi Pengenalan PBO siswa SMK semester 2
Materi Pengenalan PBO siswa SMK semester 2
Antonius Eko Yulianto
HAU eco lodge Pangandaran 2024.pdf
HAU eco lodge Pangandaran 2024.pdfHAU eco lodge Pangandaran 2024.pdf
HAU eco lodge Pangandaran 2024.pdf
Antonius Eko Yulianto

Recently uploaded (20)

KUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdf
KUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdfKUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdf
KUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdf
PT. DUTA MEDIA PRESS
1. Trafo Tegangan 2. Trafo Tegangan Magnetik 3. Trafo Pembagi Tegangan Ka...
1. Trafo Tegangan  	2. Trafo Tegangan Magnetik  	3. Trafo Pembagi Tegangan Ka...1. Trafo Tegangan  	2. Trafo Tegangan Magnetik  	3. Trafo Pembagi Tegangan Ka...
1. Trafo Tegangan 2. Trafo Tegangan Magnetik 3. Trafo Pembagi Tegangan Ka...
poenyarha
1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx
1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx
1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx
SofyanSkmspd
Organ Pencernaan dan Fungsinya Kelas 8 Fase D.pptx
Organ Pencernaan dan Fungsinya Kelas 8 Fase D.pptxOrgan Pencernaan dan Fungsinya Kelas 8 Fase D.pptx
Organ Pencernaan dan Fungsinya Kelas 8 Fase D.pptx
IrfanIdris7
Rancangan Pembelajaran Semester Kartografi
Rancangan Pembelajaran Semester KartografiRancangan Pembelajaran Semester Kartografi
Rancangan Pembelajaran Semester Kartografi
khairizal2005
Danantara: Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...
Danantara:  Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...Danantara:  Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...
Danantara: Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...
Dadang Solihin
PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025
PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025
PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025
saichulikhtiyar274
PPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptx
PPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptxPPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptx
PPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptx
SausanHidayahNova
Sosialisasi Pesantren Ramadhan untuk sekolah.pptx
Sosialisasi Pesantren Ramadhan untuk sekolah.pptxSosialisasi Pesantren Ramadhan untuk sekolah.pptx
Sosialisasi Pesantren Ramadhan untuk sekolah.pptx
shofwanwinarlik
Rencana PS Bahasa Indonesia Format Baru.pdf
Rencana PS Bahasa Indonesia Format Baru.pdfRencana PS Bahasa Indonesia Format Baru.pdf
Rencana PS Bahasa Indonesia Format Baru.pdf
edenmanoppo
Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...
Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...
Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...
Murad Maulana
keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...
keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...
keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...
ssuser327180
PELAKSANAAN RPI MURID PENDIDIKAN KHASS.ppt
PELAKSANAAN RPI MURID PENDIDIKAN KHASS.pptPELAKSANAAN RPI MURID PENDIDIKAN KHASS.ppt
PELAKSANAAN RPI MURID PENDIDIKAN KHASS.ppt
ALEENMPP
SOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKA
SOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKASOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKA
SOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKA
azizwidyamukti02
Kiraan Kadar Nadi Karvonen nadi mak nadi rehat
Kiraan Kadar Nadi Karvonen nadi mak nadi rehatKiraan Kadar Nadi Karvonen nadi mak nadi rehat
Kiraan Kadar Nadi Karvonen nadi mak nadi rehat
ssuser7d8dcb
SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1
SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1
SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1
SABDA
Manual DIVI Builder (Bahasa Indonesia).pdf
Manual DIVI Builder (Bahasa Indonesia).pdfManual DIVI Builder (Bahasa Indonesia).pdf
Manual DIVI Builder (Bahasa Indonesia).pdf
Igen D
02_Konjugat_Bilangan_Kompleks (Unpak).pdf
02_Konjugat_Bilangan_Kompleks (Unpak).pdf02_Konjugat_Bilangan_Kompleks (Unpak).pdf
02_Konjugat_Bilangan_Kompleks (Unpak).pdf
AsepSaepulrohman4
Buku 1 tentang orang Hukum perdata Universitas Negeri Semarang
Buku 1 tentang orang Hukum perdata Universitas Negeri SemarangBuku 1 tentang orang Hukum perdata Universitas Negeri Semarang
Buku 1 tentang orang Hukum perdata Universitas Negeri Semarang
iztawanasya1
PPT Perkawinan (Poligami, Monogami).pptx
PPT Perkawinan (Poligami, Monogami).pptxPPT Perkawinan (Poligami, Monogami).pptx
PPT Perkawinan (Poligami, Monogami).pptx
rahmiati190700
KUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdf
KUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdfKUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdf
KUMPULAN CERPEN SMAN 2 MUARA BADAK KALIMANTAN TIMUR.pdf
PT. DUTA MEDIA PRESS
1. Trafo Tegangan 2. Trafo Tegangan Magnetik 3. Trafo Pembagi Tegangan Ka...
1. Trafo Tegangan  	2. Trafo Tegangan Magnetik  	3. Trafo Pembagi Tegangan Ka...1. Trafo Tegangan  	2. Trafo Tegangan Magnetik  	3. Trafo Pembagi Tegangan Ka...
1. Trafo Tegangan 2. Trafo Tegangan Magnetik 3. Trafo Pembagi Tegangan Ka...
poenyarha
1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx
1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx
1. -MICROTEACHING- Modul Penanganan Kekerasan.pptx
SofyanSkmspd
Organ Pencernaan dan Fungsinya Kelas 8 Fase D.pptx
Organ Pencernaan dan Fungsinya Kelas 8 Fase D.pptxOrgan Pencernaan dan Fungsinya Kelas 8 Fase D.pptx
Organ Pencernaan dan Fungsinya Kelas 8 Fase D.pptx
IrfanIdris7
Rancangan Pembelajaran Semester Kartografi
Rancangan Pembelajaran Semester KartografiRancangan Pembelajaran Semester Kartografi
Rancangan Pembelajaran Semester Kartografi
khairizal2005
Danantara: Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...
Danantara:  Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...Danantara:  Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...
Danantara: Pesimis atau Optimis? Podcast Ikatan Alumni Lemhannas RI IKAL Lem...
Dadang Solihin
PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025
PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025
PAPARAN INOPAMAS 2025 PASURUAN TAHUN 2025
saichulikhtiyar274
PPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptx
PPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptxPPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptx
PPT PAI-Kelompok 3-X MIPA 1-Sumber-sumber Hukum Islam (Ijtihad).pptx
SausanHidayahNova
Sosialisasi Pesantren Ramadhan untuk sekolah.pptx
Sosialisasi Pesantren Ramadhan untuk sekolah.pptxSosialisasi Pesantren Ramadhan untuk sekolah.pptx
Sosialisasi Pesantren Ramadhan untuk sekolah.pptx
shofwanwinarlik
Rencana PS Bahasa Indonesia Format Baru.pdf
Rencana PS Bahasa Indonesia Format Baru.pdfRencana PS Bahasa Indonesia Format Baru.pdf
Rencana PS Bahasa Indonesia Format Baru.pdf
edenmanoppo
Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...
Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...
Analisis Subjek Literatur Pada Disertasi Kajian Budaya dan Media (KBM) Sekola...
Murad Maulana
keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...
keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...
keutamaanDiskusi kelompok berlangsung dengan baik, dengan setiap siswa merasa...
ssuser327180
PELAKSANAAN RPI MURID PENDIDIKAN KHASS.ppt
PELAKSANAAN RPI MURID PENDIDIKAN KHASS.pptPELAKSANAAN RPI MURID PENDIDIKAN KHASS.ppt
PELAKSANAAN RPI MURID PENDIDIKAN KHASS.ppt
ALEENMPP
SOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKA
SOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKASOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKA
SOAL LATIHAN PJOK KELAS 4 SD KURIKULUM MERDEKA
azizwidyamukti02
Kiraan Kadar Nadi Karvonen nadi mak nadi rehat
Kiraan Kadar Nadi Karvonen nadi mak nadi rehatKiraan Kadar Nadi Karvonen nadi mak nadi rehat
Kiraan Kadar Nadi Karvonen nadi mak nadi rehat
ssuser7d8dcb
SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1
SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1
SABDA Ministry Learning Center: Go Paskah: Paskah dan Sekolah Minggu bagian 1
SABDA
Manual DIVI Builder (Bahasa Indonesia).pdf
Manual DIVI Builder (Bahasa Indonesia).pdfManual DIVI Builder (Bahasa Indonesia).pdf
Manual DIVI Builder (Bahasa Indonesia).pdf
Igen D
02_Konjugat_Bilangan_Kompleks (Unpak).pdf
02_Konjugat_Bilangan_Kompleks (Unpak).pdf02_Konjugat_Bilangan_Kompleks (Unpak).pdf
02_Konjugat_Bilangan_Kompleks (Unpak).pdf
AsepSaepulrohman4
Buku 1 tentang orang Hukum perdata Universitas Negeri Semarang
Buku 1 tentang orang Hukum perdata Universitas Negeri SemarangBuku 1 tentang orang Hukum perdata Universitas Negeri Semarang
Buku 1 tentang orang Hukum perdata Universitas Negeri Semarang
iztawanasya1
PPT Perkawinan (Poligami, Monogami).pptx
PPT Perkawinan (Poligami, Monogami).pptxPPT Perkawinan (Poligami, Monogami).pptx
PPT Perkawinan (Poligami, Monogami).pptx
rahmiati190700

Dasar-dasar HTMLDasar-dasar HTML0001.ppt

  • 1. Dasar-dasar HTML Donny Reza, S.Kom Aplikasi IT-1 Teknik Informatika Universitas Komputer Indonesia
  • 2. HTML HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membangun halaman website. HyperText: Text yang ditampilkan pada komputer atau alat elektronik lainnya dengan merujuk ke text lainnya yang dapat diakses, biasanya dengan mengeklik mouse atau menekan tombol tertentu. HyperText tidak terbatas pada text, tapi juga dapat berisi tabel atau gambar. HyperText merupakan dasar dari struktur web. (http://en.wikipedia.org/wiki/Hypertext ) Markup: Kode yang diperlukan agar dapat dibaca oleh browser. (Intro To HTML 4.01, Dawn Friedman)
  • 3. Elemen dan Tag HTML <title>This is a title</title> Contoh elemen HTML
  • 4. <title>This is a title</title> Ini merupakan Tag Awal Ini merupakan tag akhir/tag penutup Ini merupakan isi/konten Elemen dan Tag HTML
  • 5. Elemen dan Tag Tag penutup tidak harus selalu ada, terutama untuk tag-tag yang tidak memiliki konten teks. Contohnya: <img />, tag untuk menampilkan gambar <hr />, tag untuk membuat garis horizontal <br />, tag untuk loncat ke baris baru
  • 6. <!DOCTYPE html> <html> <head> <title>Halaman 1</title> </head> <body> <! comment --> <h1>Judul</h1> <hr /> </body> </html> Struktur HTML
  • 7. Struktur HTML Doctype digunakan untuk menginformasikan browser, HTML versi apa yang digunakan. HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML Basic 1.1 (quick reference): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> HTML 5 <!DOCTYPE HTML> Sumber doctype di atas bisa dilihat di http://www.w3.org/QA/2002/04/valid-dtd- list.html dan http://www.w3schools.com/tags/tag_DOCTYPE.asp
  • 8. Struktur HTML <html> merupakan root atau induk dari seluruh tag html. <head> ,merupakan kepala dari halaman html, pada bagian ini biasanya digunakan untuk elemen-elemen yang tidak ditampilkan oleh browser. <body>, merupakan isi dari halaman website, apa pun yang akan ditampilkan oleh browser, ditempatkan di bagian ini.
  • 9. Latihan <html> <head> <title>Web Pertama</title> </head> <body> <h1>Web Pertama Saya</h1> <h2>Aplikasi IT-1</h2> </body> </html> Simpan dengan nama latihan1.html
  • 11. Tag Paragraph <p>Dari 66.778 desa yang tersebar di Indonesia, baru sekitar 24.000 atau 36% di antaranya yang sudah terjangkau layanan telekomunikasi. Sedangkan sisanya, 42.778 desa atau sekitar 64% di antaranya, masih dalam tahap rencana pembangunan.</p> <p>Demikian dipaparkan Eddy Kurnia, Head of Corporate Communication Telkom. Rencana pembangunan ini akan digarap Telkom bersama anak perusahaan selulernya, Telkomsel, dalam program Universal Service Obligation (USO).</p>
  • 12. Karakter Khusus Dalam HTML dapat digunakan simbol tertentu yang dapat digunakan untuk mewakili/mengganti suatu karakter. Sebagai contoh, tag html menggunakan karakter < dan >. Maka, agar browser dapat menampilkan karakter tersebut, digunakan simbol khusus, yaitu &lt; untuk karakter < dan &gt; untuk karakter >
  • 13. Contoh Karakter Khusus <p>Dalam matematika, tanda lebih besar diwakili oleh simbol &gt; dan tanda lebih kecil diwakili oleh simbol &lt;.</p>