3.elemen dasar html (ok)

21
Elemen Dasar HTML Paragraf Blockqoute Preformatted Text Divider dan Center Karakter Spesial Komentar © B.Very Christioko, S.Kom

Upload: nacha-evangelion

Post on 08-Jul-2015

2.784 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: 3.elemen dasar html (ok)

Elemen Dasar HTML•Paragraf•Blockqoute•Preformatted Text•Divider dan Center•Karakter Spesial•Komentar

©B.Very Christioko, S.Kom

Page 2: 3.elemen dasar html (ok)

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:

Page 3: 3.elemen dasar html (ok)

Contoh 1 (tanpa atribut)

<html><body>

<p>Paragraf satu.</p><p>Paragraf dua.</p><p>Paragraf tiga.</p><p>Elemen paragraf didefinisikan denganmenggunakan tag P.</p>

</body></html>

Page 4: 3.elemen dasar html (ok)

Hasil:

Page 5: 3.elemen dasar html (ok)

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 perataanjustify.</p>

</body></html>

Page 6: 3.elemen dasar html (ok)

Hasil:

Page 7: 3.elemen dasar html (ok)

Blockqoute• Tag <BLOCKQUOTE> digunakan untuk

menuliskan suatu kutipan teks. Browserbiasanya menampilkan kutipan teks denganmengidentifikasikan teks tersebut ataudengan mengabaikan spasi dalam teks sepertitag paragraf. Kutipan teks dinyatakan denganindentasi yang menjorok ke dalam danberbeda dalam satu paragraf.

Page 8: 3.elemen dasar html (ok)

Contoh 1:<html><body><h3>Teknologi Universal Serial Bus (USB)</h3><blockquote> Pada awal tahun 1977 tepatnya komputer denganprosesor Pentium, beberapakomputer sudah mempunyai pirantibaru untuk memudahkan pengguna komputer dalam menanganimasalah kabel yang bayak.<br>Teknologi baru tersebut dinamalan Universal Serial Bus atauyang lebih dikenal dengan USB. Memang masih bayak yang tidakmengetahui apa dan fungsi teknologi ini. Oleh sebab itu bab iniakan memperkenalkan apa yang dimaksud dengan USB dankegunaannya.</blockquote><h5>Disadur dari Buku " Pengantar Sistem Komputer" Hal:134<h5></body></html>

Page 9: 3.elemen dasar html (ok)

Hasil:

Page 10: 3.elemen dasar html (ok)

Preformatted Text

• Pada tag paragraf, penekanan tombol ENTER,Tab, Spasi tidak memberikan pengaruh padaweb page yang kita buat. Untuk menambahkanspasi dan enter pada teks dalam web page dapatmenggunakan tag <PRE>…..</PRE>. Sehinggateks yang berada di dalam tag pre akanmengikuti sesuai dengan pengetikan yang kitalakukan

Page 11: 3.elemen dasar html (ok)

Contoh:

Page 12: 3.elemen dasar html (ok)

Hasil:

Page 13: 3.elemen dasar html (ok)

Divider dan Center• Elemen DIV digunakan untuk membagi-bagi

dokumen HTML dalam suatu hieraki yangterstruktur.

• Teks yang dikelilingi oleh tag <DIV>……..</DIV>akan diformat menurut nilai atribut ALIGN yangditentukan di dalamnya.

• Nilai atribut ALIGN yaitu, Left, Center danRight.

• Penggunaan DIV dengan Align=”center” dapatdiganti dengan tag <CENTER>….<CENTER>.Keduanya menghasilkan hasil yang sama

Page 14: 3.elemen dasar html (ok)

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>

Page 15: 3.elemen dasar html (ok)

Hasil:

Page 16: 3.elemen dasar html (ok)

Karakter Spesial

• Karakter-karakter spesial adalah karakter-karakteryang penggunaannya dalam HTML harus menggunakankode-kode tertentu.

• Tanda < dan > adalah salah satu contoh dari karakterspesial. Karakter-karakter ini merupakan karakterkhusus yang digunakan untuk menandai suatu tagHTML.

• Untuk menampilkan karakter-karakter ini dalam suatuweb page diperlukan suatu kode khusus yang disebutentity .

• Terdapat dua macam entity dalam HTML, yaitukarakter entity dan numerik entity yang menggunakansuatu kode angka untuk mewakili suatu karakterspesial. Karakter entity menggunakan suatu namatertentu sebagai ganti karakter spesial dan diawalidengan tanda & serta diakhiri dengan tanda ;.

Page 17: 3.elemen dasar html (ok)

Karakter Spesial

• Contoh entity karakter

• Numerik entity menggunakan suatu kode angkauntuk mewakili suatu karakter spesial dandiawali dengan tanda &# dan diakhiri dengantanda ;. Salah satu contoh numerik entity adalah&#187 yang mewakili karakter >>.

Page 18: 3.elemen dasar html (ok)

Contoh:

Page 19: 3.elemen dasar html (ok)

Hasil:

Page 20: 3.elemen dasar html (ok)

Referensi Karakter Spesial

• http://www.degraeve.com/reference/specialcharacters.php

• http://webdesign.about.com/library/bl_htmlcodes.htm

• http://www.webmonkey.com/2010/02/special_characters/

Page 21: 3.elemen dasar html (ok)

Komentar• Komentar digunakan untuk memberikan suatu

penjelasan perintah HTML yang tidak akanditampilkan di dalam browser. Untuk membuatkomentar suatu teks diapit oleh tanda <!-- dan ditutupdengan -->.

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