SlideShare une entreprise Scribd logo
1  sur  19
Pengenalan HTML
Matakuliah Pengenalan Internet

Oleh : Suparno
Email : endustong@yahoo.com
Blog : www.digdoyo.com
Pengertian
• HTML (Hypertext Markup Language) adalah
script utk menyusun dokumen Web. Dokumen
HTML disimpan dalam format teks reguler
dan mengan-dung tag-tag yang
memerintahkan browser utk mengeksekusi
perintah yang ispesifikasikan.
• HTML merupakan standard bahasa yg
digunakan untuk menampilkan dokumen
web.
Kegunaan HTML
• Mengontrol tampilan dari web page dan
contentnya.
• Mempublikasikan dokumen secara online
sehingga bisa di akses dari manapun.
• Membuat online form yang bisa di gunakan
untuk menangani pendaftaran, transaksi
secara online.
• Menambahkan objek-objek seperti image,
audio, video dan juga java applet dalam
dokumen HTML.
Browser dan Editor
• Browser : software untuk menterjemahkan
tag-tag HTML menjadi halaman web. (IE,
Netscape, Mozilla, Opera, Chrome dll)
• Editor : software untuk membuat dokumen
HTML. (FrontPage, Dreamweaver, Notepad,
dll)
Struktur Dokumen
• HTML : Utk memberitahu browser bahwa
didalamnya adalah dokumen HTML
• HEAD : Bagian header dokumen. Biasanya
memuat tag :
– TITTLE utk judul halaman web.
– META utk informasi mengenai dokumen seperti
Author Name, Keyword dll.

• BODY : Utk menampilkan teks, image, link
dan semua yang akan ditampilkan di web.
Tag
• Tag : teks khusus (markup) berupa dua
karakter “<“ dan “>” yang digunakan untuk
menuliskan perintah HTML.
• Umumnya berpasangan : Tag Pembuka – Tag
Penutup (ditambahkan tanda “/” sebelum
nama tag).
• Penulisan tag tidak Case Sensitive
<HTML>
……
</HTML>
Element
Element terdiri atas tiga bagian, yaitu tag
pembuka, isi, dan tag penutup.
Sebagai contoh untuk menampilkan judul
dokumen HTML pada web browser digunakan
element title.
<title> (tag pembuka)
Judul dokumen (isi)
</title> (tag penutup)
Attribute
• Attribute mendefinisikan property dari suatu
element HTML, yang terdiri atas nama
attribute dan nilai attribute
• Secara umum nilai attribute harus diapit
tanda kutip satu („) atau tanda kutip dua (“)
<body bgcolor="black" text="yellow">
hasilnya warna text kuning, latar belakang
hitam
Element HTML
• Menyatakan pada browser bahwa dokumen
Web yang digunakan adalah HTML.
• Syntax Penulisan
<html>
…………
</html>
Element HEAD
• Merupakan header/kepala dari dokumen
HTML.
• Tag <head> dan tag </head> harus terletak di
antara element html.
• Syntax Penulisan
<html>
<head>
…..
</head>
</html>
Element TITTLE
• Merupakan judul dari dokumen HTML yang
ditampilkan pada jendela browser.
• Tag <title> dan tag </title> harus terletak di
antara element head.
• Syntax Penulisan
<head>
<tittle>
…..
</tittle>
</head>
Element BODY
• Elemen yang digunakan untuk menampilkan isi
dokumen HTML pada jendela browser.
• Tag <body> dan tag </body> harus terletak di
bawah element head.
• Syntax Penulisan
<body>
…..
</body>
Element BODY
• Elemen ini memiliki attribute yang
menspesifikasikan warna dan latarbelakang
dokumen yang ditampilkan pada browser.
• Syntax Penulisan
<body text=“wtext" bgcolor=“wlatar"
background=“wlatargambar" link=“wlink"
alink=“wlinkaktif" vlink=“wlinkkunjungan">
..............
</body>
Format Text HTML
• Mengatur format atau tampilan-tampilan
teks dalam dokumen html agar tampil lebih
menarik.
• Elemen-elemen yang digunakan :
– BR (Break Line) : utk ganti baris, tanpa tag
penutup
– P (Paragraph) : utk ganti paragraf diikuti baris
kosong diawal dan diakhir paragraf.
Elemen P memiliki attribute align dgn nilai left,
center dan right
Format Text HTML
• Elemen-elemen yang digunakan :
– H1, H2, H3, H4, H5, H6 (Heading) : utk membuat
judul teks dengan 6 jenis ukuran huruf dan
tercetak tebal. Memiliki attribute align dgn nilai
left, center dan right
– B (Bold) : utk menebalkan tampilan teks
– I (Italic) : utk menampilkan teks miring
– U (Underline) : utk memberi garis bawah pd teks
– PRE (Preformat) : utk menampilkan teks apa
adanya
Format Text HTML
• Elemen-elemen yang digunakan :
– CENTER : utk menampilkan teks dgn posisi
horizontal di tengah
– BASEFONT : utk mengubah dasar ukuran huruf
tampilan dari browser. Memiliki attribute size
dgn nilai 1 – 7 pixel. Tidak mempunyai tag
penutup.
– FONT : utk mengubah jenis, ukuran dan warna
huruf. Memiliki attribute color utk warna, face
utk jenis huruf dan size utk ukuran huruf
Format Text HTML
• Elemen-elemen yang digunakan :
– HR (Horizontal Rule) : utk membuat garis
horizontal. Tanpa tag penutup. Memiliki
attribute align dgn nilai left, center, right
attribute size utk ketebalan garis, attribute
width utk panjang garis dan attribute noshade
utk membuat garis solid
Hyperlink
Digunakan untuk menghubungkan halaman
yang ada dalam satu situs (Internal Link) atau
pada situs yang lain (Eksternal Link).
Hyperlink mempunyai atribute : href, name dan
target
href : sebagai hypertext reference eksternal URI
(uniform resource identifier)
name : menghubungkan ke tujuan dlm halaman
web (anchor)
target : utk menampilkan halaman web pada
satu jendela yg sama atu jendela baru
Hyperlink
Syntax Hyperlink
<a href=“URI” name=“Name” target=“Target”>
hypertext</a>
URI
= alamat URL absolute/relatif
Name
= nama anchor/penghubung pada
halaman web
Target
= tempat menampilkan halaman
(_blank, _top, _self, _parent)
Hypertext = visualisasi teks yang di
tampilkan

Contenu connexe

Tendances

Tendances (19)

Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015
 
HTML
HTMLHTML
HTML
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
Html
HtmlHtml
Html
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
 
07 css box model
07 css box model07 css box model
07 css box model
 
HTML+CSS
HTML+CSSHTML+CSS
HTML+CSS
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
 
Html 5
Html 5Html 5
Html 5
 
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)
 
01 html
01 html01 html
01 html
 
Dasar pemrograman web HTML
Dasar pemrograman web HTMLDasar pemrograman web HTML
Dasar pemrograman web HTML
 
Pengantar html
Pengantar htmlPengantar html
Pengantar html
 
Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2
 
Modul table html
Modul table htmlModul table html
Modul table html
 

Similaire à HTML Pengenalan

PWPB pertemuan 5 XII SMK Al Falah Bandung
PWPB pertemuan 5 XII SMK Al Falah BandungPWPB pertemuan 5 XII SMK Al Falah Bandung
PWPB pertemuan 5 XII SMK Al Falah Bandungabdurrochim41
 
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.pptxAndreianYusuf
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar htmlDedy Setiawan
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLNurdin Al-Azies
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadidedd_simbolon
 
pertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.pptpertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.pptFatoni Pinocchio
 
Pengantar pemrograman web HTML
Pengantar pemrograman web HTMLPengantar pemrograman web HTML
Pengantar pemrograman web HTMLI Gede Iwan Sudipa
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxssuser71d74a
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Studentimaru.wordpress.com
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxBeeOkee
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisrahmantaufik00
 
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiResa Firmansyah
 

Similaire à HTML Pengenalan (20)

PWPB pertemuan 5 XII SMK Al Falah Bandung
PWPB pertemuan 5 XII SMK Al Falah BandungPWPB pertemuan 5 XII SMK Al Falah Bandung
PWPB pertemuan 5 XII SMK Al Falah Bandung
 
Download Kodr kode HTML
Download Kodr kode HTMLDownload Kodr kode HTML
Download Kodr kode HTML
 
Html
HtmlHtml
Html
 
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
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTML
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
 
pertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.pptpertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.ppt
 
Html
HtmlHtml
Html
 
Pengantar pemrograman web HTML
Pengantar pemrograman web HTMLPengantar pemrograman web HTML
Pengantar pemrograman web HTML
 
Dasar-dasar H t m l
Dasar-dasar H t m lDasar-dasar H t m l
Dasar-dasar H t m l
 
Pelatihan website#1
Pelatihan website#1Pelatihan website#1
Pelatihan website#1
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Student
 
Praktek
PraktekPraktek
Praktek
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
 
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
 
Html Dasar#1_ANFALAB.pdf
Html Dasar#1_ANFALAB.pdfHtml Dasar#1_ANFALAB.pdf
Html Dasar#1_ANFALAB.pdf
 

Dernier

Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMmulyadia43
 
Kontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptx
Kontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptxKontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptx
Kontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptxssuser50800a
 
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docxLK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docxPurmiasih
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)MustahalMustahal
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDmawan5982
 
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...Kanaidi ken
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BModul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BAbdiera
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASKurniawan Dirham
 
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDPPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDNurainiNuraini25
 
Dinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapDinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapsefrida3
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxazhari524
 
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptxMiftahunnajahTVIBS
 
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi SelatanSosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatanssuser963292
 
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdfMODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdfNurulHikmah50658
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptArkhaRega1
 
CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7IwanSumantri7
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 

Dernier (20)

Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
 
Kontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptx
Kontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptxKontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptx
Kontribusi Islam Dalam Pengembangan Peradaban Dunia - KELOMPOK 1.pptx
 
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docxLK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
LK.01._LK_Peta_Pikir modul 1.3_Kel1_NURYANTI_101.docx
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
Prakarsa Perubahan ATAP (Awal - Tantangan - Aksi - Perubahan)
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SD
 
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase BModul Ajar Bahasa Indonesia Kelas 4 Fase B
Modul Ajar Bahasa Indonesia Kelas 4 Fase B
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
 
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SDPPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
PPT AKSI NYATA KOMUNITAS BELAJAR .ppt di SD
 
Dinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genapDinamika Hidrosfer geografi kelas X genap
Dinamika Hidrosfer geografi kelas X genap
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptx
 
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
11 PPT Pancasila sebagai Paradigma Kehidupan dalam Masyarakat.pptx
 
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi SelatanSosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
Sosialisasi PPDB SulSel tahun 2024 di Sulawesi Selatan
 
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdfMODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
MODUL 1 Pembelajaran Kelas Rangkap-compressed.pdf
 
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 pptppt-modul-6-pend-seni-di sd kelompok 2 ppt
ppt-modul-6-pend-seni-di sd kelompok 2 ppt
 
CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7CAPACITY BUILDING Materi Saat di Lokakarya 7
CAPACITY BUILDING Materi Saat di Lokakarya 7
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 

HTML Pengenalan

  • 1. Pengenalan HTML Matakuliah Pengenalan Internet Oleh : Suparno Email : endustong@yahoo.com Blog : www.digdoyo.com
  • 2. Pengertian • HTML (Hypertext Markup Language) adalah script utk menyusun dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengan-dung tag-tag yang memerintahkan browser utk mengeksekusi perintah yang ispesifikasikan. • HTML merupakan standard bahasa yg digunakan untuk menampilkan dokumen web.
  • 3. Kegunaan HTML • Mengontrol tampilan dari web page dan contentnya. • Mempublikasikan dokumen secara online sehingga bisa di akses dari manapun. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. • Menambahkan objek-objek seperti image, audio, video dan juga java applet dalam dokumen HTML.
  • 4. Browser dan Editor • Browser : software untuk menterjemahkan tag-tag HTML menjadi halaman web. (IE, Netscape, Mozilla, Opera, Chrome dll) • Editor : software untuk membuat dokumen HTML. (FrontPage, Dreamweaver, Notepad, dll)
  • 5. Struktur Dokumen • HTML : Utk memberitahu browser bahwa didalamnya adalah dokumen HTML • HEAD : Bagian header dokumen. Biasanya memuat tag : – TITTLE utk judul halaman web. – META utk informasi mengenai dokumen seperti Author Name, Keyword dll. • BODY : Utk menampilkan teks, image, link dan semua yang akan ditampilkan di web.
  • 6. Tag • Tag : teks khusus (markup) berupa dua karakter “<“ dan “>” yang digunakan untuk menuliskan perintah HTML. • Umumnya berpasangan : Tag Pembuka – Tag Penutup (ditambahkan tanda “/” sebelum nama tag). • Penulisan tag tidak Case Sensitive <HTML> …… </HTML>
  • 7. Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title. <title> (tag pembuka) Judul dokumen (isi) </title> (tag penutup)
  • 8. Attribute • Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama attribute dan nilai attribute • Secara umum nilai attribute harus diapit tanda kutip satu („) atau tanda kutip dua (“) <body bgcolor="black" text="yellow"> hasilnya warna text kuning, latar belakang hitam
  • 9. Element HTML • Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. • Syntax Penulisan <html> ………… </html>
  • 10. Element HEAD • Merupakan header/kepala dari dokumen HTML. • Tag <head> dan tag </head> harus terletak di antara element html. • Syntax Penulisan <html> <head> ….. </head> </html>
  • 11. Element TITTLE • Merupakan judul dari dokumen HTML yang ditampilkan pada jendela browser. • Tag <title> dan tag </title> harus terletak di antara element head. • Syntax Penulisan <head> <tittle> ….. </tittle> </head>
  • 12. Element BODY • Elemen yang digunakan untuk menampilkan isi dokumen HTML pada jendela browser. • Tag <body> dan tag </body> harus terletak di bawah element head. • Syntax Penulisan <body> ….. </body>
  • 13. Element BODY • Elemen ini memiliki attribute yang menspesifikasikan warna dan latarbelakang dokumen yang ditampilkan pada browser. • Syntax Penulisan <body text=“wtext" bgcolor=“wlatar" background=“wlatargambar" link=“wlink" alink=“wlinkaktif" vlink=“wlinkkunjungan"> .............. </body>
  • 14. Format Text HTML • Mengatur format atau tampilan-tampilan teks dalam dokumen html agar tampil lebih menarik. • Elemen-elemen yang digunakan : – BR (Break Line) : utk ganti baris, tanpa tag penutup – P (Paragraph) : utk ganti paragraf diikuti baris kosong diawal dan diakhir paragraf. Elemen P memiliki attribute align dgn nilai left, center dan right
  • 15. Format Text HTML • Elemen-elemen yang digunakan : – H1, H2, H3, H4, H5, H6 (Heading) : utk membuat judul teks dengan 6 jenis ukuran huruf dan tercetak tebal. Memiliki attribute align dgn nilai left, center dan right – B (Bold) : utk menebalkan tampilan teks – I (Italic) : utk menampilkan teks miring – U (Underline) : utk memberi garis bawah pd teks – PRE (Preformat) : utk menampilkan teks apa adanya
  • 16. Format Text HTML • Elemen-elemen yang digunakan : – CENTER : utk menampilkan teks dgn posisi horizontal di tengah – BASEFONT : utk mengubah dasar ukuran huruf tampilan dari browser. Memiliki attribute size dgn nilai 1 – 7 pixel. Tidak mempunyai tag penutup. – FONT : utk mengubah jenis, ukuran dan warna huruf. Memiliki attribute color utk warna, face utk jenis huruf dan size utk ukuran huruf
  • 17. Format Text HTML • Elemen-elemen yang digunakan : – HR (Horizontal Rule) : utk membuat garis horizontal. Tanpa tag penutup. Memiliki attribute align dgn nilai left, center, right attribute size utk ketebalan garis, attribute width utk panjang garis dan attribute noshade utk membuat garis solid
  • 18. Hyperlink Digunakan untuk menghubungkan halaman yang ada dalam satu situs (Internal Link) atau pada situs yang lain (Eksternal Link). Hyperlink mempunyai atribute : href, name dan target href : sebagai hypertext reference eksternal URI (uniform resource identifier) name : menghubungkan ke tujuan dlm halaman web (anchor) target : utk menampilkan halaman web pada satu jendela yg sama atu jendela baru
  • 19. Hyperlink Syntax Hyperlink <a href=“URI” name=“Name” target=“Target”> hypertext</a> URI = alamat URL absolute/relatif Name = nama anchor/penghubung pada halaman web Target = tempat menampilkan halaman (_blank, _top, _self, _parent) Hypertext = visualisasi teks yang di tampilkan