SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (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
 

Similar a 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
 

Similar a 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
 

Último

Pertemuan 3-bioavailabilitas-dan-bioekivalensi.ppt
Pertemuan 3-bioavailabilitas-dan-bioekivalensi.pptPertemuan 3-bioavailabilitas-dan-bioekivalensi.ppt
Pertemuan 3-bioavailabilitas-dan-bioekivalensi.pptNabilahKhairunnisa6
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxmtsmampunbarub4
 
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptP_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptAfifFikri11
 
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup BangsaDinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup BangsaEzraCalva
 
Pembahasan Soal UKOM gerontik persiapan ukomnas
Pembahasan Soal UKOM gerontik persiapan ukomnasPembahasan Soal UKOM gerontik persiapan ukomnas
Pembahasan Soal UKOM gerontik persiapan ukomnasAZakariaAmien1
 
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxherisriwahyuni
 
PLaN & INTERVENSI untuk sekolah yang memerlukan
PLaN & INTERVENSI untuk sekolah yang memerlukanPLaN & INTERVENSI untuk sekolah yang memerlukan
PLaN & INTERVENSI untuk sekolah yang memerlukanssuserc81826
 
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxMATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxrofikpriyanto2
 
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 TesalonikaMateri Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 TesalonikaSABDA
 
Demonstrasi Kontekstual Modul 1.2. pdf
Demonstrasi Kontekstual  Modul 1.2.  pdfDemonstrasi Kontekstual  Modul 1.2.  pdf
Demonstrasi Kontekstual Modul 1.2. pdfvebronialite32
 
slide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfslide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfNURAFIFAHBINTIJAMALU
 
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.aechacha366
 
Materi power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .pptMateri power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .pptAcemediadotkoM1
 
Modul Ajar Matematika Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar Matematika Kelas 2 Fase A Kurikulum MerdekaModul Ajar Matematika Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar Matematika Kelas 2 Fase A Kurikulum MerdekaAbdiera
 
modul 1.2 guru penggerak angkatan x Bintan
modul 1.2 guru penggerak angkatan x Bintanmodul 1.2 guru penggerak angkatan x Bintan
modul 1.2 guru penggerak angkatan x BintanVenyHandayani2
 
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptxKonflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptxintansidauruk2
 
1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf
1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf
1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdfsandi625870
 
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxKeberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxLeniMawarti1
 
MA Kelas XII Bab 1 materi musik mkontemnporerFase F.pdf
MA Kelas XII  Bab 1 materi musik mkontemnporerFase F.pdfMA Kelas XII  Bab 1 materi musik mkontemnporerFase F.pdf
MA Kelas XII Bab 1 materi musik mkontemnporerFase F.pdfcicovendra
 
PPT kecerdasan emosi dan pengendalian diri.pptx
PPT kecerdasan emosi dan pengendalian diri.pptxPPT kecerdasan emosi dan pengendalian diri.pptx
PPT kecerdasan emosi dan pengendalian diri.pptxINyomanAgusSeputraSP
 

Último (20)

Pertemuan 3-bioavailabilitas-dan-bioekivalensi.ppt
Pertemuan 3-bioavailabilitas-dan-bioekivalensi.pptPertemuan 3-bioavailabilitas-dan-bioekivalensi.ppt
Pertemuan 3-bioavailabilitas-dan-bioekivalensi.ppt
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
 
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.pptP_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
P_E_R_I_L_A_K_U__K_O_N_S_E_L_O_R__v.1.ppt
 
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup BangsaDinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
Dinamika perwujudan Pancasila sebagai Dasar Negara dan Pandangan Hidup Bangsa
 
Pembahasan Soal UKOM gerontik persiapan ukomnas
Pembahasan Soal UKOM gerontik persiapan ukomnasPembahasan Soal UKOM gerontik persiapan ukomnas
Pembahasan Soal UKOM gerontik persiapan ukomnas
 
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
 
PLaN & INTERVENSI untuk sekolah yang memerlukan
PLaN & INTERVENSI untuk sekolah yang memerlukanPLaN & INTERVENSI untuk sekolah yang memerlukan
PLaN & INTERVENSI untuk sekolah yang memerlukan
 
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptxMATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
MATERI 1_ Modul 1 dan 2 Konsep Dasar IPA SD jadi.pptx
 
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 TesalonikaMateri Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
Materi Kelas Online Ministry Learning Center - Bedah Kitab 1 Tesalonika
 
Demonstrasi Kontekstual Modul 1.2. pdf
Demonstrasi Kontekstual  Modul 1.2.  pdfDemonstrasi Kontekstual  Modul 1.2.  pdf
Demonstrasi Kontekstual Modul 1.2. pdf
 
slide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdfslide presentation bab 2 sain form 2.pdf
slide presentation bab 2 sain form 2.pdf
 
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
PUEBI.bahasa Indonesia/pedoman umum ejaan bahasa Indonesia pptx.
 
Materi power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .pptMateri power point Kepemimpinan leadership .ppt
Materi power point Kepemimpinan leadership .ppt
 
Modul Ajar Matematika Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar Matematika Kelas 2 Fase A Kurikulum MerdekaModul Ajar Matematika Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar Matematika Kelas 2 Fase A Kurikulum Merdeka
 
modul 1.2 guru penggerak angkatan x Bintan
modul 1.2 guru penggerak angkatan x Bintanmodul 1.2 guru penggerak angkatan x Bintan
modul 1.2 guru penggerak angkatan x Bintan
 
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptxKonflik, Kekerasan, dan Perdamaian Bagian 1.pptx
Konflik, Kekerasan, dan Perdamaian Bagian 1.pptx
 
1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf
1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf
1.2.a.6 Dekon modul 1.2. DINI FITRIANI.pdf
 
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptxKeberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
Keberagaman-Peserta-Didik-dalam-Psikologi-Pendidikan.pptx
 
MA Kelas XII Bab 1 materi musik mkontemnporerFase F.pdf
MA Kelas XII  Bab 1 materi musik mkontemnporerFase F.pdfMA Kelas XII  Bab 1 materi musik mkontemnporerFase F.pdf
MA Kelas XII Bab 1 materi musik mkontemnporerFase F.pdf
 
PPT kecerdasan emosi dan pengendalian diri.pptx
PPT kecerdasan emosi dan pengendalian diri.pptxPPT kecerdasan emosi dan pengendalian diri.pptx
PPT kecerdasan emosi dan pengendalian diri.pptx
 

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