SlideShare a Scribd company logo
1 of 14
HTML
HEADER ATAU KEPALA TULISAN 
Header adalah huruf-huruf berukuran 
khusus yang digunakan untuk menuliskan 
judul bab atau sub bab. 
Ada enam tingkatan header mulai dari H1 
hingga H6. H1 adalah header yang paling 
besar dan H6 adalah header yang paling 
kecil.
<HTML> 
<BODY> 
<H1>Header level 1</H1> 
<H2>Header level 2</H2> 
<H3>Header level 3</H3> 
<H4>Header level 4</H4> 
<H5>Header level 5</H5> 
<H6>Header level 6</H6> 
</BODY> 
</HTML>
PARAGRAF 
Untuk membuat paragraf pada HTML maka 
digunakan Tag P <P>. Biasanya tag P ini sepasang 
dengan memberi </P>. 
<HTML> 
<BODY> 
Paragraf pertama <P>Paragraf kedua <P>Paragraf 
ketiga 
</BODY> 
</HTML>
NOTASI KHUSUS 
• Kita telah mengetahui bahwa browser tidak 
mengenal pembuatan baris dengan tombol 
Enter. 
• Disamping itu, browser juga tidak mengenal 
pembuatan spasi lebih dari satu spasi dengan 
menekan tombol Spasi ataupun tombol Tab. 
Nah, bagaimana caranya 
• membuat lebih dari satu spasi dalam dokumen 
HTML? Pembuatan spasi dalam kode-kode HTML 
diganti tulisan &nbsp; 
• seperti yang bisa kita lihat pada contoh berikut 
ini:
<HTML> 
<BODY> 
kata-kata ini diantara satu spasi 
sedangkan<br>kata-kata &nbsp;&nbsp;&nbsp; 
ini &nbsp;&nbsp;&nbsp; diantara 
&nbsp;&nbsp;&nbsp; lima 
&nbsp;&nbsp;&nbsp; spasi 
</BODY> 
</HTML>
± tanda plus minus &plusmn; 
© hak cipta atau copyright &copy; 
® terdaftar atau registered &reg;
ALIGNMENT ATAU PERATAAN 
• Dalam tulisan cetak, dikenal tiga atau empat 
macam perataan yaitu rata kiri (align left), di 
tengah (center), rata kanan (align right) 
dan rata kiri dan kanan (justify). 
• Tag Header dan Tag Paragraf dapat disisipi 
dengan atribut align untuk melakukan 
perataan ini.
<HTML> 
<BODY> 
<H1>Header level 1</H1> 
<H2 align="center">Header level 2</H2> 
<H3 align="right">Header level 3</H3> 
<BODY> 
<HTML>
<HTML> 
<BODY> 
<P>paragraf rata kiri adalah default 
<P align="center">paragraf di tengah 
<P align="right">paragraf rata kanan 
<P align="justify">paragraf rata kiri dan kanan 
paragraf rata kiri dan kanan paragraf rata kiri 
dan kanan paragraf rata kiri dan kanan 20X 
</BODY> 
</HTML>
MENAMPILKAN APA ADANYA 
Meskipun browser tidak mengenali spasi lebih 
dari sekali , tabulasi dan pembuatan baris 
dengan enter, namun dengan menggunakan 
tag <PRE> maka browser akan menampilkan 
teks apa adanya, maksudnya spasi dianggap 
spasi, tabulasi dianggap tabulasi dan enter 
dianggap enter. Bahkan font-nya pun muncul 
sesuai aslinya
<HTML><BODY> 
<PRE> 
<B>Pantun Petuah</B> 
Berakit-rakit ke hulu 
Bersenang-senang kemudian 
Bersakit-sakit dahulu 
Bersenang-senang kemudian 
</PRE> 
</BODY> 
</HTML>
Latihan 2 
• Untuk apa Saya datang ke SMAN 1 Bangkinang 
– 5 Baris dengan variasi warna sebanyak 7 warna yang 
berbeda (Ukuran Font Standard) 
• Apa yang anda cari di SMAN 1 Bangkinang 
– 3 Baris dengan variasi warna sebanyak 5 warna yang 
berbeda 
• Apa kendala anda Selama di SMAN 1 Bangkinang 
– 3 Baris dengan variasi warna sebanyak 6 warna yang 
berbeda (Ukuran Font Standard)
MENURUT ANDA, BAGAIMANA INTERNET ITU 
MUNCUL DI LAYAR MONITOR ANDA SETELAH 
DI KETIK URLNYA…? 
CONTOH : WWW.YOUTUBE.COM

More Related Content

What's hot

What's hot (9)

Desain web 1
Desain web 1Desain web 1
Desain web 1
 
Soal html KOde
Soal html KOdeSoal html KOde
Soal html KOde
 
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
 
PWEB HTML
PWEB HTMLPWEB HTML
PWEB HTML
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
 
Pengantar html
Pengantar htmlPengantar html
Pengantar html
 
Html dasar 123
Html dasar 123Html dasar 123
Html dasar 123
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot com
 

Similar to Belajar membuat website 2

Similar to Belajar membuat website 2 (20)

Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Pertemuan 02
Pertemuan 02Pertemuan 02
Pertemuan 02
 
Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 
Modul HTML
Modul HTMLModul HTML
Modul HTML
 
materi html xii mm.ppt
materi html xii mm.pptmateri html xii mm.ppt
materi html xii mm.ppt
 
Materi_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.pptMateri_Pengenalan_HTML_Revisi.ppt
Materi_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
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Modul css
Modul cssModul css
Modul css
 
Modul dasar html
Modul dasar htmlModul dasar html
Modul dasar html
 
Modul 1 - HTML
Modul 1 - HTMLModul 1 - HTML
Modul 1 - HTML
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Web dasar i
Web dasar iWeb dasar i
Web dasar i
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
 
MODUL_HTML_TIK_XII
MODUL_HTML_TIK_XIIMODUL_HTML_TIK_XII
MODUL_HTML_TIK_XII
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
 
Pertemuan2
Pertemuan2Pertemuan2
Pertemuan2
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 

More from Nadya Olivia

More from Nadya Olivia (18)

Video editing@
Video editing@Video editing@
Video editing@
 
Frontpage
FrontpageFrontpage
Frontpage
 
Frontpage
FrontpageFrontpage
Frontpage
 
Materi ke 4
Materi ke 4Materi ke 4
Materi ke 4
 
Materi html ke 3
Materi html ke 3Materi html ke 3
Materi html ke 3
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Bahasa pemrograman pascal
Bahasa pemrograman pascalBahasa pemrograman pascal
Bahasa pemrograman pascal
 
Pengenalan pascal asli
Pengenalan pascal asliPengenalan pascal asli
Pengenalan pascal asli
 
jaringan komputer
jaringan komputerjaringan komputer
jaringan komputer
 
Jaringan komputer
Jaringan komputerJaringan komputer
Jaringan komputer
 
Jaringan komputer
Jaringan komputerJaringan komputer
Jaringan komputer
 
Casing
CasingCasing
Casing
 
Pengenalan komputer mulok
Pengenalan komputer mulokPengenalan komputer mulok
Pengenalan komputer mulok
 
Sistem bilangan4
Sistem bilangan4Sistem bilangan4
Sistem bilangan4
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
 

Belajar membuat website 2

  • 2. HEADER ATAU KEPALA TULISAN Header adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. Ada enam tingkatan header mulai dari H1 hingga H6. H1 adalah header yang paling besar dan H6 adalah header yang paling kecil.
  • 3. <HTML> <BODY> <H1>Header level 1</H1> <H2>Header level 2</H2> <H3>Header level 3</H3> <H4>Header level 4</H4> <H5>Header level 5</H5> <H6>Header level 6</H6> </BODY> </HTML>
  • 4. PARAGRAF Untuk membuat paragraf pada HTML maka digunakan Tag P <P>. Biasanya tag P ini sepasang dengan memberi </P>. <HTML> <BODY> Paragraf pertama <P>Paragraf kedua <P>Paragraf ketiga </BODY> </HTML>
  • 5. NOTASI KHUSUS • Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan tombol Enter. • Disamping itu, browser juga tidak mengenal pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab. Nah, bagaimana caranya • membuat lebih dari satu spasi dalam dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan &nbsp; • seperti yang bisa kita lihat pada contoh berikut ini:
  • 6. <HTML> <BODY> kata-kata ini diantara satu spasi sedangkan<br>kata-kata &nbsp;&nbsp;&nbsp; ini &nbsp;&nbsp;&nbsp; diantara &nbsp;&nbsp;&nbsp; lima &nbsp;&nbsp;&nbsp; spasi </BODY> </HTML>
  • 7. ± tanda plus minus &plusmn; © hak cipta atau copyright &copy; ® terdaftar atau registered &reg;
  • 8. ALIGNMENT ATAU PERATAAN • Dalam tulisan cetak, dikenal tiga atau empat macam perataan yaitu rata kiri (align left), di tengah (center), rata kanan (align right) dan rata kiri dan kanan (justify). • Tag Header dan Tag Paragraf dapat disisipi dengan atribut align untuk melakukan perataan ini.
  • 9. <HTML> <BODY> <H1>Header level 1</H1> <H2 align="center">Header level 2</H2> <H3 align="right">Header level 3</H3> <BODY> <HTML>
  • 10. <HTML> <BODY> <P>paragraf rata kiri adalah default <P align="center">paragraf di tengah <P align="right">paragraf rata kanan <P align="justify">paragraf rata kiri dan kanan paragraf rata kiri dan kanan paragraf rata kiri dan kanan paragraf rata kiri dan kanan 20X </BODY> </HTML>
  • 11. MENAMPILKAN APA ADANYA Meskipun browser tidak mengenali spasi lebih dari sekali , tabulasi dan pembuatan baris dengan enter, namun dengan menggunakan tag <PRE> maka browser akan menampilkan teks apa adanya, maksudnya spasi dianggap spasi, tabulasi dianggap tabulasi dan enter dianggap enter. Bahkan font-nya pun muncul sesuai aslinya
  • 12. <HTML><BODY> <PRE> <B>Pantun Petuah</B> Berakit-rakit ke hulu Bersenang-senang kemudian Bersakit-sakit dahulu Bersenang-senang kemudian </PRE> </BODY> </HTML>
  • 13. Latihan 2 • Untuk apa Saya datang ke SMAN 1 Bangkinang – 5 Baris dengan variasi warna sebanyak 7 warna yang berbeda (Ukuran Font Standard) • Apa yang anda cari di SMAN 1 Bangkinang – 3 Baris dengan variasi warna sebanyak 5 warna yang berbeda • Apa kendala anda Selama di SMAN 1 Bangkinang – 3 Baris dengan variasi warna sebanyak 6 warna yang berbeda (Ukuran Font Standard)
  • 14. MENURUT ANDA, BAGAIMANA INTERNET ITU MUNCUL DI LAYAR MONITOR ANDA SETELAH DI KETIK URLNYA…? CONTOH : WWW.YOUTUBE.COM