3.elemen dasar html (ok)

Post on 08-Jul-2015

2.784 views 1 download

Transcript of 3.elemen dasar html (ok)

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

</body></html>

Hasil:

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.

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>

Hasil:

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

Contoh:

Hasil:

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

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-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 ;.

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 >>.

Contoh:

Hasil:

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/

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>