Learn HTML Vol.3 - HTML Style

Posted by : fadly injoker 2017/07/27

BLC Telkom

Assalamualaikum Wr. Wb

Kembali lagi kita Belajar HTML, Setelah Sebelumnya kita Belajar tentang bagaimana membuat dan menyimpan halaman HTML ,
selanjutnya kita akan membahas seterusnya tentang HTMLmengenai style dan atribut HTML

Semua dokumen HTML harus memulai dengan deklarasi tipe dokumen: <! DOCTYPE html>.

Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </ html>.

Bagian yang terlihat dari dokumen HTML adalah antara <body> dan </ body>.

Saat ini kita akan belajar bagaimana membuat halaman dengan berbagai Style dan Atribut pada HTML

Style dan Atribut HTML

1. Background Color (Warna Latar Belakang)

Properti background-color mendefinisikan warna latar belakang untuk elemen HTML. Contoh dibawah ini menerapkan warna background lightgreen untuk halaman :

<body style="background-color:lightgreen;">

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf</p></body>

2. Text Color (Warna Teks) : Properti color mendefinisikanwarna teks untuk elemen HTML.
Contoh :

<h1 style="color:blue;">Ini adalah heading</h1>
<p style="color:red;">Ini adalah paragraf</p>

3. Font (Jenis Huruf) : font-family mendefinisikan font yang akan digunakan untuk elemen HTML. Contoh :

<h1 style="font-family:verdana;">Ini adalah heading</h1>
<p style="font-family:courier;">Ini adalah paragraf</p>

4. Text Size (Ukuran Teks) : font-size mendefinisikan ukuran teks untuk elemen HTML. Contoh :

<h1 style="font-size:300%;">Ini adalah heading</h1>
<p style="font-size:160%;">Ini adalah paragraf</p>

5. Text Alignment : text-align mendefinisikan perataan teks horisontal untuk elemen HTML. Contoh

<h1 style="text-align:center;">Header rata tengah</h1>

<h1 style="text-align:left;">Header rata kiri</h1>

<h1 style="text-align:right;">Header rata kanan</h1>

<h1 style="text-align:justify;">Header rata kanan-kiri</h1>

6. Pindah ke lain baris :

contoh :

<p>Aku<br>anak<br>RPL

HTML Text Formating Format-format yang dirancang untuk menampilkan jenis huruf dari teks :

<b>...</b> - mendefinisikan text bold
<strong>...</strong> - mendefinisikan teks kuat
<i>...</i> - mendefinisikan teks miring
<em>...</em> - mendefinisikan teks ditekankan
<mark>...</mark> - mendefinisikan teks ditandai
<small>...</small> - mendefinisikan teks kecil
<del>...</del> - mendefinisikan teks dihapus
<ins>...<ins> - mendefinisikan teks dimasukkan
<sub>...</sub> - mendefinisikan teks subscript
<sup>...</sup> - mendefinisikan teks superscript

7. Mengatur ukuran Gambar
Mengatur Ukuran Panjang dan tinggi bisa menggunakan persentase atau menggunakan px (pixel)

8. Atribut
HTML Attributes atau atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag / start tag. Cara mendefinisikan atribut dengan memberikan informasi name dan value dari suatu elemen, seperti name=”value”.
Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang merupakan atribut.

Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik. Biasanya menggunakan tanda petik (“…”). Tanda petik ini mengapit petikan langsung dari suatu nilai elemen. Tanda petik tunggal juga diperlehkan untuk digunakan walaupun dalam keadaan tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal yang mengapit petikan yang tersusun di dalam petikan lain.
Contoh :
name=’Kelompok “Pelajar” Indonesia

Referensi :

http://sharingilmu.web.id/mengatur-ukuran-warna-dan-jenis-huruf-pada-html/
http://web.pemrograman.org/html/atribut-html/

Sekian Terima Kasih
Wassalamualaikum Wr.Wb