SlideShare a Scribd company logo
Elemen Dasar HTML
    •Paragraf
    •Blockqoute
    •Preformatted Text
    •Divider dan Center
    •Karakter Spesial
    •Komentar
© B.Very Christioko, S.Kom
Paragraf
• Elemen <P>………..</P> digunakan untuk menandai
  sekumpulan teks sebagai suatu paragraf.
• Tag <P> untuk awal paragraf dan tag </P> digunakan
  untuk mengakhiri paragraf.
• Tag paragraf memiliki atribut yang dapat dipakai
  sebagai tambahan untuk pemformatan paragraf, sbb:
Contoh 1 (tanpa atribut)
<html>
<body>
 <p>Paragraf satu.</p>
 <p>Paragraf dua.</p>
 <p>Paragraf tiga.</p>
 <p>Elemen paragraf didefinisikan dengan
 menggunakan tag P.</p>
</body>
</html>
Hasil:
Contoh 2 (dengan atribut)
<html>
<body>
 <p align="right">Paragraf dengan perataan kanan.</p>
 <p align="center">Paragraf dengan rata tengah.</p>
 <p align="left">Paragraf tiga.</p>
 <p align="justify">Paragraf dengan perataan
 justify.</p>
</body>
</html>
Hasil:
Blockqoute
• Tag <BLOCKQUOTE> digunakan untuk
  menuliskan suatu kutipan teks. Browser
  biasanya menampilkan kutipan teks dengan
  mengidentifikasikan teks tersebut atau
  dengan mengabaikan spasi dalam teks seperti
  tag paragraf. Kutipan teks dinyatakan dengan
  indentasi yang menjorok ke dalam dan
  berbeda dalam satu paragraf.
Contoh 1:
<html>
<body>
<h3>Teknologi Universal Serial Bus (USB)</h3>
<blockquote> Pada awal tahun 1977 tepatnya komputer dengan
prosesor Pentium, beberapakomputer sudah mempunyai piranti
baru untuk memudahkan pengguna komputer dalam menangani
masalah kabel yang bayak.<br>
Teknologi baru tersebut dinamalan Universal Serial Bus atau
yang lebih dikenal dengan USB. Memang masih bayak yang tidak
mengetahui apa dan fungsi teknologi ini. Oleh sebab itu bab ini
akan memperkenalkan apa yang dimaksud dengan USB dan
kegunaannya.</blockquote>
<h5>Disadur dari Buku " Pengantar Sistem Komputer" Hal:134
<h5>
</body>
</html>
Hasil:
Preformatted Text
• Pada tag paragraf, penekanan tombol ENTER,
  Tab, Spasi tidak memberikan pengaruh pada
  web page yang kita buat. Untuk menambahkan
  spasi dan enter pada teks dalam web page dapat
  menggunakan tag <PRE>…..</PRE>. Sehingga
  teks yang berada di dalam tag pre akan
  mengikuti sesuai dengan pengetikan yang kita
  lakukan
Contoh:
Hasil:
Divider dan Center
• Elemen DIV digunakan untuk membagi-bagi
  dokumen HTML dalam suatu hieraki yang
  terstruktur.
• Teks yang dikelilingi oleh tag <DIV>……..</DIV>
  akan diformat menurut nilai atribut ALIGN yang
  ditentukan di dalamnya.
• Nilai atribut ALIGN yaitu, Left, Center dan
  Right.
• Penggunaan DIV dengan Align=”center” dapat
  diganti dengan tag <CENTER>….<CENTER>.
  Keduanya menghasilkan hasil yang sama
Contoh:
<html>
<body>
<div align="left">Teks rata kiri dalam tag DIV</div>
<div align="right">Teks rata kanan dalam tag DIV</div>
<div align="center">Teks rata tengah dalam tag
 DIV</div>
<br>
<center> teks ini menggunakan perintah center sebagai
 pengganti align center pada div </center>
</body>
</html>
Hasil:
Karakter Spesial
• Karakter-karakter spesial adalah karakter-karakter
  yang penggunaannya dalam HTML harus menggunakan
  kode-kode tertentu.
• Tanda < dan > adalah salah satu contoh dari karakter
  spesial. Karakter-karakter ini merupakan karakter
  khusus yang digunakan untuk menandai suatu tag
  HTML.
• Untuk menampilkan karakter-karakter ini dalam suatu
  web page diperlukan suatu kode khusus yang disebut
  entity .
• Terdapat dua macam entity dalam HTML, yaitu
  karakter entity dan numerik entity yang menggunakan
  suatu kode angka untuk mewakili suatu karakter
  spesial. Karakter entity menggunakan suatu nama
  tertentu sebagai ganti karakter spesial dan diawali
  dengan tanda & serta diakhiri dengan tanda ;.
Karakter Spesial
• Contoh entity karakter




• Numerik entity menggunakan suatu kode angka
  untuk mewakili suatu karakter spesial dan
  diawali dengan tanda &# dan diakhiri dengan
  tanda ;. Salah satu contoh numerik entity adalah
  &#187 yang mewakili karakter >>.
Contoh:
Hasil:
Referensi Karakter Spesial
• http://www.degraeve.com/reference/specialcha
  racters.php
• http://webdesign.about.com/library/bl_htmlco
  des.htm
• http://www.webmonkey.com/2010/02/special_
  characters/
Komentar
• Komentar digunakan untuk memberikan suatu
  penjelasan perintah HTML yang tidak akan
  ditampilkan di dalam browser. Untuk membuat
  komentar suatu teks diapit oleh tanda <!-- dan ditutup
  dengan -->.

• Contoh:
  <html>
  <body>
  <!--komentar ini tidak akan dimunculkan di browser-->
  <p>Contoh penulisan teks biasa</p>
  </body>
  </html>

More Related Content

What's hot

Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
Saikhu Zaenul
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphpAfdi Njomplank
 
Modul table html
Modul table htmlModul table html
Modul table html
Dhita Maretha
 
07 css box model
07 css box model07 css box model
07 css box model
Amiroh S.Kom
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
Siigit Aziz
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10
Suparno Oke
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Student
imaru.wordpress.com
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
I Made Adiguna
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlgueste0c708
 
8.materi desain frame (ok)
8.materi desain frame (ok)8.materi desain frame (ok)
8.materi desain frame (ok)Nacha Evangelion
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
edy sinaga
 
Materi Dasar Microsoft Word
Materi Dasar Microsoft WordMateri Dasar Microsoft Word
Materi Dasar Microsoft Word
Dika Marpeti
 
Pert 03 HTML dan Web Programming
Pert 03 HTML dan Web ProgrammingPert 03 HTML dan Web Programming
Pert 03 HTML dan Web Programming
Putu Mardika
 
Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadArdiyanto Top
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot comantony96
 
Dasar HTML
 Dasar HTML Dasar HTML

What's hot (17)

Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
 
Modul table html
Modul table htmlModul table html
Modul table html
 
07 css box model
07 css box model07 css box model
07 css box model
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Student
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
8.materi desain frame (ok)
8.materi desain frame (ok)8.materi desain frame (ok)
8.materi desain frame (ok)
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
 
Materi Dasar Microsoft Word
Materi Dasar Microsoft WordMateri Dasar Microsoft Word
Materi Dasar Microsoft Word
 
Pert 03 HTML dan Web Programming
Pert 03 HTML dan Web ProgrammingPert 03 HTML dan Web Programming
Pert 03 HTML dan Web Programming
 
Membuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepadMembuat desain website berbasis html dengan notepad
Membuat desain website berbasis html dengan notepad
 
Dasar html
Dasar htmlDasar html
Dasar html
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot com
 
Dasar HTML
 Dasar HTML Dasar HTML
Dasar HTML
 

Viewers also liked

5.menyisipkan gambar & link (ok)(2)
5.menyisipkan gambar & link (ok)(2)5.menyisipkan gambar & link (ok)(2)
5.menyisipkan gambar & link (ok)(2)Nacha Evangelion
 
7.materi membuat form (ok)
7.materi membuat form (ok)7.materi membuat form (ok)
7.materi membuat form (ok)
Nacha Evangelion
 
5.menyisipkan gambar & link (ok)
5.menyisipkan gambar & link (ok)5.menyisipkan gambar & link (ok)
5.menyisipkan gambar & link (ok)
Nacha Evangelion
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)Nacha Evangelion
 
4.format html (ok)
4.format html (ok)4.format html (ok)
4.format html (ok)
Nacha Evangelion
 
Css dasar-lanjut
Css dasar-lanjutCss dasar-lanjut
Css dasar-lanjut
Nacha Evangelion
 
6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)Nacha Evangelion
 

Viewers also liked (7)

5.menyisipkan gambar & link (ok)(2)
5.menyisipkan gambar & link (ok)(2)5.menyisipkan gambar & link (ok)(2)
5.menyisipkan gambar & link (ok)(2)
 
7.materi membuat form (ok)
7.materi membuat form (ok)7.materi membuat form (ok)
7.materi membuat form (ok)
 
5.menyisipkan gambar & link (ok)
5.menyisipkan gambar & link (ok)5.menyisipkan gambar & link (ok)
5.menyisipkan gambar & link (ok)
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)
 
4.format html (ok)
4.format html (ok)4.format html (ok)
4.format html (ok)
 
Css dasar-lanjut
Css dasar-lanjutCss dasar-lanjut
Css dasar-lanjut
 
6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)6.materi pemanfaatan tabel (ok)
6.materi pemanfaatan tabel (ok)
 

Similar to 3.elemen dasar html (ok)

Bab i. html
Bab i. htmlBab i. html
Bab i. html
Dewa Dwi Antara
 
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
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
As Faizin
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
Dedy Setiawan
 
Download Kodr kode HTML
Download Kodr kode HTMLDownload Kodr kode HTML
Download Kodr kode HTML
Viktor Maruli Lubis
 
Html
HtmlHtml
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
Vicky Nitinegoro
 
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
 
HTML
HTMLHTML
Training HTML
Training HTMLTraining HTML
Training HTML
Yanwar Purnama
 
materi html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahamimateri html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahami
muhammadazi3
 
belajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkatbelajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkat
muhammadazi3
 
Web html
Web htmlWeb html
Web html
Fajar Baskoro
 
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
abdurrochim41
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
charismacholilia1
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
cigugurfree
 
Html
HtmlHtml
Desain web 1
Desain web 1Desain web 1
Desain web 1
Luiz Suarez Zikri
 

Similar to 3.elemen dasar html (ok) (20)

Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
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
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
Download Kodr kode HTML
Download Kodr kode HTMLDownload Kodr kode HTML
Download Kodr kode HTML
 
Html
HtmlHtml
Html
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
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
 
HTML
HTMLHTML
HTML
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
materi html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahamimateri html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahami
 
belajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkatbelajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkat
 
Web html
Web htmlWeb html
Web html
 
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
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Html
HtmlHtml
Html
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
 

3.elemen dasar html (ok)

  • 1. Elemen Dasar HTML •Paragraf •Blockqoute •Preformatted Text •Divider dan Center •Karakter Spesial •Komentar © B.Very Christioko, S.Kom
  • 2. Paragraf • Elemen <P>………..</P> digunakan untuk menandai sekumpulan teks sebagai suatu paragraf. • Tag <P> untuk awal paragraf dan tag </P> digunakan untuk mengakhiri paragraf. • Tag paragraf memiliki atribut yang dapat dipakai sebagai tambahan untuk pemformatan paragraf, sbb:
  • 3. Contoh 1 (tanpa atribut) <html> <body> <p>Paragraf satu.</p> <p>Paragraf dua.</p> <p>Paragraf tiga.</p> <p>Elemen paragraf didefinisikan dengan menggunakan tag P.</p> </body> </html>
  • 5. Contoh 2 (dengan atribut) <html> <body> <p align="right">Paragraf dengan perataan kanan.</p> <p align="center">Paragraf dengan rata tengah.</p> <p align="left">Paragraf tiga.</p> <p align="justify">Paragraf dengan perataan justify.</p> </body> </html>
  • 7. Blockqoute • Tag <BLOCKQUOTE> digunakan untuk menuliskan suatu kutipan teks. Browser biasanya menampilkan kutipan teks dengan mengidentifikasikan teks tersebut atau dengan mengabaikan spasi dalam teks seperti tag paragraf. Kutipan teks dinyatakan dengan indentasi yang menjorok ke dalam dan berbeda dalam satu paragraf.
  • 8. Contoh 1: <html> <body> <h3>Teknologi Universal Serial Bus (USB)</h3> <blockquote> Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium, beberapakomputer sudah mempunyai piranti baru untuk memudahkan pengguna komputer dalam menangani masalah kabel yang bayak.<br> Teknologi baru tersebut dinamalan Universal Serial Bus atau yang lebih dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa dan fungsi teknologi ini. Oleh sebab itu bab ini akan memperkenalkan apa yang dimaksud dengan USB dan kegunaannya.</blockquote> <h5>Disadur dari Buku " Pengantar Sistem Komputer" Hal:134 <h5> </body> </html>
  • 10. Preformatted Text • Pada tag paragraf, penekanan tombol ENTER, Tab, Spasi tidak memberikan pengaruh pada web page yang kita buat. Untuk menambahkan spasi dan enter pada teks dalam web page dapat menggunakan tag <PRE>…..</PRE>. Sehingga teks yang berada di dalam tag pre akan mengikuti sesuai dengan pengetikan yang kita lakukan
  • 13. Divider dan Center • Elemen DIV digunakan untuk membagi-bagi dokumen HTML dalam suatu hieraki yang terstruktur. • Teks yang dikelilingi oleh tag <DIV>……..</DIV> akan diformat menurut nilai atribut ALIGN yang ditentukan di dalamnya. • Nilai atribut ALIGN yaitu, Left, Center dan Right. • Penggunaan DIV dengan Align=”center” dapat diganti dengan tag <CENTER>….<CENTER>. Keduanya menghasilkan hasil yang sama
  • 14. Contoh: <html> <body> <div align="left">Teks rata kiri dalam tag DIV</div> <div align="right">Teks rata kanan dalam tag DIV</div> <div align="center">Teks rata tengah dalam tag DIV</div> <br> <center> teks ini menggunakan perintah center sebagai pengganti align center pada div </center> </body> </html>
  • 16. Karakter Spesial • Karakter-karakter spesial adalah karakter-karakter yang penggunaannya dalam HTML harus menggunakan kode-kode tertentu. • Tanda < dan > adalah salah satu contoh dari karakter spesial. Karakter-karakter ini merupakan karakter khusus yang digunakan untuk menandai suatu tag HTML. • Untuk menampilkan karakter-karakter ini dalam suatu web page diperlukan suatu kode khusus yang disebut entity . • Terdapat dua macam entity dalam HTML, yaitu karakter entity dan numerik entity yang menggunakan suatu kode angka untuk mewakili suatu karakter spesial. Karakter entity menggunakan suatu nama tertentu sebagai ganti karakter spesial dan diawali dengan tanda & serta diakhiri dengan tanda ;.
  • 17. Karakter Spesial • Contoh entity karakter • Numerik entity menggunakan suatu kode angka untuk mewakili suatu karakter spesial dan diawali dengan tanda &# dan diakhiri dengan tanda ;. Salah satu contoh numerik entity adalah &#187 yang mewakili karakter >>.
  • 20. Referensi Karakter Spesial • http://www.degraeve.com/reference/specialcha racters.php • http://webdesign.about.com/library/bl_htmlco des.htm • http://www.webmonkey.com/2010/02/special_ characters/
  • 21. Komentar • Komentar digunakan untuk memberikan suatu penjelasan perintah HTML yang tidak akan ditampilkan di dalam browser. Untuk membuat komentar suatu teks diapit oleh tanda <!-- dan ditutup dengan -->. • Contoh: <html> <body> <!--komentar ini tidak akan dimunculkan di browser--> <p>Contoh penulisan teks biasa</p> </body> </html>