Paragraf HTML
<p>Elemen HTML mendefinisikan sebuah paragraf :
contoh :
<p> Ini adalah paragraph.</p>
<p> Ini adalah paragraph.</p>
<p> Ini adalah paragraph.</p>
Catatan: Browser secara otomatis menambahkan beberapa spasi putih (margin) sebelum dan sesudah paragraf.
Tampilan HTML
Anda tidak bisa yakin bagaimana HTML akan ditampilkan.
Layar besar atau kecil, dan ukuran jendela akan menciptakan hasil yang berbeda.
Dengan HTML, Anda tidak dapat mengubah output HTML yang muncul dengan menambahkan spasi ekstra atau baris tambahan kedalam kode sintaks HTML Anda.
Browser akan menghapus spasi tambahan dan garis tambahan ketika halaman ditampilkan:
contoh :
<!DOCTYPE html>
<html>
<head>
<html>
<head>
<p>
Paragraf ini
mengandung banyak garis
dalam kode sumber,
tetapi browser
mengabaikannya.
</p>
<p>
Paragraf ini
mengandung banyak ruang
dalam kode sumber,
tetapi browser
mengabaikannya.
</ p>
<p>
Jumlah baris dalam paragraf tergantung pada ukuran jendela browser. Jika Anda mengubah ukuran jendela browser, jumlah baris dalam paragraf ini akan berubah.
</ p>
</body>
</html>
</html>
Catatan: jangan lupa tag akhir Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag akhir:
contoh :
<p> Ini adalah paragraph.
<p> Ini adalah paragraph.
<p> Ini adalah paragraph.
Contoh di atas akan berfungsi di sebagian besar browser, tetapi jangan bergantung padanya, karena tidak memakai tag akhir dapat menghasilkan hasil atau kesalahan yang tidak terduga.
Baris HTML Breaks
<br>Elemen HTML mendefinisikan jeda baris .
Gunakan
<br>jika Anda menginginkan jeda baris (baris baru) tanpa memulai paragraf baru:
contoh : <p> Ini adalah paragraf <br> dengan jeda baris. </p>
Tag<br> adalah tag kosong, yang berarti bahwa ia tidak memiliki tag akhir.Elemen HTML <pre>
<pre>Elemen HTML mendefinisikan teks yang telah diformat.
Teks di dalam
<pre>elemen ditampilkan dalam font dengan lebar tetap (biasanya Courier), dan mempertahankan spasi dan jeda baris:
contoh :
<pre>
Kamu ada di atas lautan.
Kamu ada di atas laut.
Kamu ada di atas lautan.
Oh, bawa kembali Dia kepada saya.
</ pre>
Atribut Gaya HTML
Mengatur gaya elemen HTML, dapat dilakukan dengan
styleatribut.styleAtribut HTML memiliki sintaks berikut :
contoh : <tagname style="property:value;">
Property adalah properti CSS. Value adalah nilai CSS.
Warna Latar Belakang HTML
Background-colorproperti mendefinisikan warna latar belakang untuk elemen HTML.
Contoh ini menetapkan warna latar belakang untuk sebuah halaman ke powderblue:
contoh :
<body style="background-color:powderblue;">
<h1> Ini adalah Judul</h1>
<p> Ini adalah paragraph.</p>
<p> Ini adalah paragraph.</p>
</body>
Warna Teks HTML
Colorproperti mendefinisikan warna teks untuk elemen HTML:
contoh :
<h1 style="color:blue;">ini judul</h1>
<p style="color:red;">ini adalah paragraf</p>Font HTML
Font-familyproperti mendefinisikan font yang akan digunakan untuk elemen HTML:
contoh :
<h1 style="font-family:verdana;">ini judul</h1>
<p style="font-family:courier;">ini adalah paragraf</p>Ukuran Teks HTML
Font-sizeproperti mendefinisikan ukuran teks untuk elemen HTML:
contoh :
<h1 style="font-size:300%;">ini judul</h1>
<p style="font-size:160%;">ini adalah paragraf</p>
<p style="font-size:160%;">ini adalah paragraf</p>
Penyelarasan Teks HTML
Text-alignproperti mendefinisikan perataan teks horisontal untuk sebuah elemen HTML:
contoh :
<h1 style="text-align:center;">Judul DI tampilkan DI tengah</h1>
<p style="text-align:center;">Paragraf DI tampilkan Di Tengah.</p>
<p style="text-align:center;">Paragraf DI tampilkan Di Tengah.</p>
catatan :
Tulisan Rata Kiri
<h1 style="text-align:left;">Judul DI tampilkan DI tengah</h1>
<p style="text-align:left;">Paragraf DI tampilkan Di Tengah.</p>
<p style="text-align:left;">Paragraf DI tampilkan Di Tengah.</p>
Tulisan Rata Tengah
<h1 style="text-align:center;">Judul DI tampilkan DI tengah</h1>
<p style="text-align:center;">Paragraf DI tampilkan Di Tengah.</p>
<p style="text-align:center;">Paragraf DI tampilkan Di Tengah.</p>
Tulisan Rata Kanan
<h1 style="text-align:right;">Judul DI tampilkan DI tengah</h1>
<p style="text-align:right;">Paragraf DI tampilkan Di Tengah.</p>
<p style="text-align:right;">Paragraf DI tampilkan Di Tengah.</p>
Ringkasan Bab
- Gunakan
styleatribut untuk menata elemen HTML - Gunakan
background-coloruntuk warna latar belakang - Gunakan
coloruntuk warna teks - Gunakan
font-familyuntuk font teks - Gunakan
font-sizeuntuk ukuran teks - Gunakan
text-alignuntuk perataan teks
Selamat Mencoba dan semoga bermanfaat.
Penjelasannya sangat lengkap sekali, terima kasih atas ilmunya
ReplyDeleteterimakasih atas kunjungannya semoga bermanfaat untuk kita semua AAMIIN.
Delete