HTML Penghias Teks Bagian 1
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.
Penghias Teks memiliki beberapa macam kode, diantaranya warna teks, warna background untuk teks, nama huruf, ukuran huruf, dan perataan teks.
Warna teks atau huruf:
Warna teks atau huruf menggunakan kode color: ;
Warna bisa diisi dengan kode hexadecimal atau hex, kode red green blue atau rgb, kode hue saturation lightness atau hsl, dan bisa nama warna secara langsung.
Kode Hex
Hex atau hexadecimal tersusun dari 6 digit yang dibentuk oleh huruf dipadu bilangan. Huruf dari abjad yang dimaksud yaitu A, B, C, D, E, F. Bilangan yang dimaksud yaitu 0,1, 2, 3, 4, 5, 6, 7, 8, 9.
Penulisan kode hex di HTML sebagai berikut:
Untuk merah color: #FF0000;
Untuk hijau color: #00FF00;
Untuk biru color: #0000FF;
Untuk abu-abu color: #808080;
Untuk hitam color: #000000;
Untuk putih color: #FFFFFF;
Kode rgb
rgb adalah warna aditif yang dibuat dengan mencampurkan cahaya red (merah), green (hijau), dan blue (biru) dalam berbagai intensitas. Nilainya biasanya antara:
0 hingga 255 (dalam desimal),
0% hingga 100% (dalam persentase)
Penulisan kode rgb di HTML dalam desimal sebagai berikut:
Untuk merah color: rgb(255, 0, 0);
Untuk hijau color: rgb(0, 255, 0);
Untuk biru color: rgb(0, 0, 255);
Untuk abu-abu color: rgb(128, 128, 128);
Untuk hitam color: rgb(0, 0, 0,);
Untuk putih color: rgb(255, 255, 255);
Penulisan rgb di HTML dalam persentase sebagai berikut:
Untuk merah color: rgb(100%, 0%, 0%);
Untuk hijau color: rgb(0%, 100%, 0%);
Untuk abu-abu color: rgb(50.2%, 50.2%, 50.2%);
Untuk hitam color: rgb(0%, 0%, 0%);
Untuk putih color: rgb(100%, 100%, 100%);
Kode hsl
hsl adalah hue, saturation %, lightness %.
Hue atau Tone artinya warna dasar:
Nilai hue dalam derajat (0–360) pada roda warna:
0° = Merah
120° = Hijau
240° = Biru
60° = Kuning
Saturation artinya kejenuhan):
Nilai saturation dalam persen (0%–100%)
0% = abu-abu (tanpa warna)
100% = warna paling jenuh (paling “hidup”)
Lightness artinya Kecerahan:
Nilai lightness dalam persen (0%–100%)
0% = hitam
50% = warna normal
100% = putih
Penulisan kode hsl di HTML sebagai berikut:
Untuk merah color: hsl(0, 100%, 50%);
Untuk hijau color: hsl(120, 100%, 50%);
Untuk biru color: hsl(240, 100%, 50%);
Untuk abu-abu color: hsl(0, 0%, 50%);
Untuk hitam color: hsl(0, 0%, 0%);
Untuk putih color: hsl(0, 0%, 100%);
Nama warna
Nama warna mengikuti nama warna yang seperti ditulis dalam bahasa Inggris.
Penulisan nama warna di HTML sebagai berikut:
Untuk merah color: red;
Untuk hijau color: green;
Untuk abu-abu color: gray;
Untuk hitam color: black;
Untuk putih color: white;
Warna background untuk teks:
Warna background untuk teks menggunakan kode background-color: ;
Warna bisa diisi dengan kode hexadecimal atau hex, kode red green blue atau rgb, kode hue saturation lightness atau hsl, dan bisa nama warna secara langsung.
Contoh
Kita mewarnai background dengan kode hexadecimal berikut:
Untuk merah background-color: #FF0000;
Untuk hijau background-color: #00FF00;
Untuk biru background-color: #0000FF;
Untuk abu-abu background-color: #808080;
Untuk hitam background-color: #000000;
Untuk putih background-color: #FFFFFF;
Langkah-langkahnya
1. Mulailah dengan menulis perintah
<!DOCTYPE html>
<html>
<body>
</body>
</html>
secara manual di halaman kosong di Google Docs.
Perhatikan!
Huruf demi huruf, tanda demi tanda, dan huruf besar (kapital) huruf kecilnya pada perintah tersebut tidak boleh keliru.
Dalam penulisan perintah tersebut huruf besar berbeda dengan huruf kecil.
2. Tulislah kode paragraf
<p> </p> yang diletakkan ke dalam kode <body></body>
sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p> </p>
</body>
</html>
3. Tulislah teks di dalam kode paragraf.
Misalnya
Paragraf 1:
<p> BELAJAR HTML PERMULAAN BERSAMA IKHSAN </p>
Paragraf 2:
<p> Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. </p>
Paragraf 3:
<p> Ikhsan meraih beasiswa ikatan dinas keguruan dan sudah pemberkasan CPNS Guru pada tahun 2000. Bersama semua ribuan alumni ikatan dinas dari seluruh perguruan tinggi negeri di seluruh Indonesia yang sudah berhasil mengikuti pemberkasan CPNS Guru, terpaksa harus menunggu tiga tahun lamanya dalam penantian antrian pengangkatan PNS. Tepat pada tahun 2004 waktunya SK PNS Guru diterbitkan, tetapi betapa kecewanya status kami semua dibatalkan secara sepihak oleh pemerintah dengan alasan TELAH BERLAKU UU OTONOMI DAERAH. SK PNS Guru pun tidak jadi terbit, justru SK Rekomendasi Penempatan yang diterbitkan dan dikirim ke seluruh Bupati/Walikota yang semula rencananya daerahnya akan ditempati PNS Guru baru alumni ikatan dinas. SK Rekomendasi Penempatan sungguh tak berarti apa-apa, nihil sama sekali. </p>
Paragraf 4:
<p> Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab. </p>
Paragraf 5:
<p> Kini Ikhsan juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing di swastaan. </p>
Paragraf pertama tersebut disisipi kode warna teks putih color: #FFFFFF; dan warna background merah background-color: #FF0000;
Letaknya kode menyusup ke kode <p>
Paragraf kedua tersebut disisipi kode warna teks hijau color: #00FF00; dan warna background biru background-color: #0000FF;
Letaknya kode menyusup ke kode <p>
Paragraf ketiga tersebut disisipi kode <br> warna teks putih color: #FFFFFF; dan warna background hitam background-color:#000000;
Letaknya kode menyusup ke kode <p>
Perhatikan!
Tanda kutip atau tanda petik tidak boleh miring. Seringkali terjadi perubahan kemiringan tanda kutip pada proses copy dari Google Docs lalu paste ke halaman Tampilan HTML di Blogger itu otomatis berubah menjadi miring sendiri. Oleh karena itu, sebelum dipublikasikan ketika selesai mem-paste di halaman Tampilan HTML di Blogger harus diperiksa terlebih dahulu keadaan tanda kutipnya. Kalau berubah miring harus diganti menjadi tegak.
sehingga kode menjadi
<!DOCTYPE html>
<html>
<body>
<p style="color: #FFFFFF; background-color: #FF0000;">
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</p>
<p style="color: #00FF00; background-color: #0000FF;">
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</p>
<p style="color: #FFFFFF; background-color: #000000;">
Ikhsan meraih beasiswa ikatan dinas keguruan dan sudah pemberkasan CPNS Guru pada tahun 2000. <br>
Bersama semua ribuan alumni ikatan dinas dari seluruh perguruan tinggi negeri di seluruh Indonesia yang sudah berhasil mengikuti pemberkasan CPNS Guru, terpaksa harus menunggu tiga tahun lamanya dalam penantian antrian pengangkatan PNS. <br>
Tepat pada tahun 2004 waktunya SK PNS Guru diterbitkan, tetapi betapa kecewanya status kami semua dibatalkan secara sepihak oleh pemerintah dengan alasan TELAH BERLAKU UU OTONOMI DAERAH. <br>
SK PNS Guru pun tidak jadi terbit, justru SK Rekomendasi Penempatan yang diterbitkan dan dikirim ke seluruh Bupati/Walikota yang semula rencananya daerahnya akan ditempati PNS Guru baru alumni ikatan dinas. <br>
SK Rekomendasi Penempatan sungguh tak berarti apa-apa, nihil sama sekali.
</p>
<p>
Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab.
</p>
<p>
Kini Ikhsan juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing di swastaan.
</p>
</body>
</html>
4. Copy-lah seluruh kode tersebut
5. Kemudian beralih ke Blogger.
Bukalah akun Blogger anda.
Pilihlah (tombollah) ikon tiga garis bertumpuk (yang berada di paling kiri paling atas, itu tepatnya di sebelah kiri ikon Blogger) untuk memunculkan semua menu yang tersusun menurun,
Pilihlah menu +POSTINGAN BARU (yang berada di paling atas) hingga terbukalah halaman baru yang kosong.
Bila sudah terbuka halaman baru yang kosong, pilihlah menu ikon <> (yang berada di kiri atas tepatnya di bawah tulisan judul).
Pilihlah menu Tampilan HTML (yang berada di sebelah atasnya menu Tampilan Menulis)
Di halaman menu Tampilan HTML inilah kita paste semua kode yang sudah kita copy dari Google Docs.
6. Pilihlah Publikasikan
7. Pilihlah KONFIRMASI
8. Kembali ke menu Blogger,
Pilihlah ikon tiga garis bertumpuk (yang berada di paling kiri paling atas, tepatnya di sebelah kiri ikon Blogger) sampai muncul semua menu secara menurun.
9. Pilihlah (tombollah) menu Lihat blog (yang berada di paling bawah) untuk melihat hasil tampilan kode yang terpublikasikan ke seluruh semesta raya, yang bisa dibaca oleh seluruh manusia di semua jagat raya.
Kode selengkapnya berikut :
<!DOCTYPE html>
<html>
<body>
<p style="color: #FFFFFF; background-color: #FF0000;">
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</p>
<p style="color: #00FF00; background-color: #0000FF;">
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</p>
<p style="color: #FFFFFF; background-color: #000000;">
Ikhsan meraih beasiswa ikatan dinas keguruan dan sudah pemberkasan CPNS Guru pada tahun 2000. <br>
Bersama semua ribuan alumni ikatan dinas dari seluruh perguruan tinggi negeri di seluruh Indonesia yang sudah berhasil mengikuti pemberkasan CPNS Guru, terpaksa harus menunggu tiga tahun lamanya dalam penantian antrian pengangkatan PNS. <br>
Tepat pada tahun 2004 waktunya SK PNS Guru diterbitkan, tetapi betapa kecewanya status kami semua dibatalkan secara sepihak oleh pemerintah dengan alasan TELAH BERLAKU UU OTONOMI DAERAH. <br>
SK PNS Guru pun tidak jadi terbit, justru SK Rekomendasi Penempatan yang diterbitkan dan dikirim ke seluruh Bupati/Walikota yang semula rencananya daerahnya akan ditempati PNS Guru baru alumni ikatan dinas. <br>
SK Rekomendasi Penempatan sungguh tak berarti apa-apa, nihil sama sekali.
</p>
<p>
Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab.
</p>
<p>
Kini Ikhsan juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing di swastaan.
</p>
</body>
</html>
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
Ikhsan meraih beasiswa ikatan dinas keguruan dan sudah pemberkasan CPNS Guru pada tahun 2000.
Bersama semua ribuan alumni ikatan dinas dari seluruh perguruan tinggi negeri di seluruh Indonesia yang sudah berhasil mengikuti pemberkasan CPNS Guru, terpaksa harus menunggu tiga tahun lamanya dalam penantian antrian pengangkatan PNS.
Tepat pada tahun 2004 waktunya SK PNS Guru diterbitkan, tetapi betapa kecewanya status kami semua dibatalkan secara sepihak oleh pemerintah dengan alasan TELAH BERLAKU UU OTONOMI DAERAH.
SK PNS Guru pun tidak jadi terbit, justru SK Rekomendasi Penempatan yang diterbitkan dan dikirim ke seluruh Bupati/Walikota yang semula rencananya daerahnya akan ditempati PNS Guru baru alumni ikatan dinas.
SK Rekomendasi Penempatan sungguh tak berarti apa-apa, nihil sama sekali.
Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab.
Kini Ikhsan juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing di swastaan.
