Life is the struggle

The struggle needs the sacrifice of the body, the soul, and everything to actualize the hope, the dream, and the love.
Hidup ini Sebuah Perjuangan.
Perjuangan Perlu Pengorbanan atas Jiwa, Raga, dan Segala Kepunyaan demi Terwujudnya Harapan, Impian, Cita-cita, dan Cinta.

Putaran Kehidupan (Rotation of Life)

Life in the World rightly rotates and Walks; it is certainty.
Kehidupan Dunia Berputar dan Berjalan; ialah Keniscayaan

Jembatan Kehidupan (The Bridge of the World)
Ikhsan Falihi pada Sebuah Jembatan

Andai Jembatan ini adalah Penghubung Tujuan. Niscaya Lautan Luas Ini Adalah KEILMUAN. Ijinkan Kuberpijak dan Kumelalui Jembatan Keilmuan tuk Meraih Keselamatan dan Keberhasilan.

IKHSAN Falihi di Pinggir Laut.
(IKHSAN Falihi On The Seaside)

Andai Lautan Itu Luasnya Rinduku, Maka Bentangan Rindu Tiada Surut. Begitu pun Jua Kalian Puas Melarungkan Berjuta IMPIAN.

Penangkal Covid-19

Makanan Penambah Kekebalan Tubuh untuk Menangkal Covid-19

Showing posts with label HTML Permulaan. Show all posts
Showing posts with label HTML Permulaan. Show all posts

Friday, September 12, 2025

HTML Unordered List atau Daftar Tanpa Nomor Urut

9/12/2025 07:15:00 PM    


HTML Unordered List atau Daftar Tanpa Nomor Urut

Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.


Untuk menampilkan daftar barang atau benda tanpa nomor urutnya, maka gunakan kode 

<ul><li> </li></ul> 

<li> </li> digunakan untuk setiap benda yang didaftar. 

<ul> </ul> digunakan untuk membungkus kode <li> </li> 


Langkah-langkahnya

1. Tulislah perintah berikut

<!DOCTYPE html>

<html>

<body>

</body>

</html>

secara manual di halaman kosong di Google Docs.

2. Tulislah kode paragraf 

<p> </p> ke dalam kode  <body> </body>

sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> </p>

</body>

</html>

3. Tulislah kode <ul><li> </li></ul> 

 ke dalam kode <p> </p>

 sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> 

<ul><li> </li></ul> 

</p>

</body>

</html>

4. Tulislah tiga benda yang masing-masing dimasukkan ke dalam kode <li> </li>

Misalnya

<li> Blogger </li>

<li> Google </li>

<li> Google Adsense </li>

sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> 

<ul>

<li> Blogger </li>

<li> Google </li>

<li> Google Adsense </li>

</ul> 

</p>

</body>

</html>

5. Copy-lah seluruh kode tersebut 

6. Kemudian beralih ke Blogger.

Bukalah akun Blogger anda.

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.

7. Pilihlah Publikasikan

Maaf, beberapa langkah sudah saya potong karena saya pikir anda sudah menguasai dan hafal langkah-langkah tersebut sehingga tidak perlu semua langkah secara detail ditampilkan di sini untuk selanjutnya.


Kode selengkapnya berikut:

<!DOCTYPE html>

<html>

<body>

<p> 

<ul>

<li> Blogger </li>

<li> Google </li>

<li> Google Adsense </li>

</ul> 

</p>

</body>

</html>


Hasil tampilannya sebagai berikut: 

  • Blogger
  • Google
  • Google Adsense


Read More

HTML Ordered List atau Daftar Bernomor Urut

9/12/2025 06:48:00 PM    


HTML Ordered List atau Daftar Bernomor Urut

Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.


Untuk menampilkan daftar barang atau benda beserta nomor urutnya, maka gunakan kode 

<ol><li> </li></ol> 

<li> </li> digunakan untuk setiap benda yang didaftar. 

<ol> </ol> digunakan untuk membungkus kode <li> </li> 


Langkah-langkahnya

1. Tulislah perintah berikut

<!DOCTYPE html>

<html>

<body>

</body>

</html>

secara manual di halaman kosong di Google Docs.


2. Tulislah kode paragraf 

<p> </p> ke dalam kode  <body> </body>

sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> </p>

</body>

</html>


3. Tulislah kode <ol><li> </li></ol> 

 ke dalam kode <p> </p>

 sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> 

<ol><li> </li></ol> 

</p>

</body>

</html>


4. Tulislah tiga benda yang masing-masing dimasukkan ke dalam kode <li> </li>

Misalnya

<li> jeruk </li>

<li> mangga </li>

<li> pisang </li>

sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> 

<ol>

<li> jeruk </li>

<li> mangga </li>

<li> pisang </li>

</ol> 

</p>

</body>

</html>


5. Copy-lah seluruh kode tersebut 

6. Kemudian beralih ke Blogger.

Bukalah akun Blogger anda.

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.

7. Pilihlah Publikasikan

Maaf, beberapa langkah sudah saya potong karena saya pikir anda sudah menguasai dan hafal langkah-langkah tersebut sehingga tidak perlu semua langkah secara detail ditampilkan di sini untuk selanjutnya.


Kode selengkapnya berikut:

<!DOCTYPE html>

<html>

<body>

<p> 

<ol>

<li> jeruk </li>

<li> mangga </li>

<li> pisang </li>

</ol> 

</p>

</body>

</html>


Hasil tampilannya sebagai berikut: 

1. jeruk

2. mangga

3. pisang


Read More

HTML Comment atau Komentar

9/12/2025 06:23:00 PM    

 


HTML Comment atau Komentar

Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.


Untuk menyertakan komentar ke dalam kode HTML tapi tidak ditampilkan, maka gunakan kode 

<!-- Tulislah komentar di sini -->


Langkah-langkahnya

1. Tulislah perintah berikut

<!DOCTYPE html>

<html>

<body>

</body>

</html>

secara manual di halaman kosong di Google Docs.


2. Tulislah paragraf berikut

<p> 

BELAJAR HTML PERMULAAN BERSAMA IKHSAN 

</p>

<p> 

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>

yang diletakkan ke dalam kode <body></body>

sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p> 

BELAJAR HTML PERMULAAN BERSAMA IKHSAN 

</p>

<p> 

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>

</body>

</html>


3. Kemudian lakukan pembungkusan paragraf pertama dengan kode comment dan buatlah komentar baru sesudah paragraf kedua, misalnya komentar baru tersebut begini “Ini Komentar yang Disembunyikan” yang dibungkus oleh kode comment  <!--  -->


<!DOCTYPE html>

<html>

<body>

<!-- 

<p> 

BELAJAR HTML PERMULAAN BERSAMA IKHSAN 

</p>

-->

<p> 

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>

<!-- 

“Ini Komentar yang Disembunyikan”

 -->

</body>

</html>


Perhatikan!

Semua teks yang dibungkus dengan kode comment tidak ditampilkan, semua disembunyikan agar tidak terbaca oleh publik.


4. Copy-lah seluruh kode tersebut 

5. Kemudian beralih ke Blogger.

Bukalah akun Blogger anda.

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


Maaf, beberapa langkah sudah saya potong karena saya pikir anda sudah menguasai dan hafal langkah-langkah tersebut sehingga tidak perlu semua langkah secara detail ditampilkan di sini untuk selanjutnya.


Kode selengkapnya berikut:


<!DOCTYPE html>

<html>

<body>

<!-- 

<p> 

BELAJAR HTML PERMULAAN BERSAMA IKHSAN 

</p>

-->

<p> 

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>

<!-- 

“Ini Komentar yang Disembunyikan”

 -->

</body>

</html>


Hasil tampilannya sebagai berikut: 

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.






Read More

HTML Image atau Gambar

9/12/2025 01:55:00 PM    


HTML Image atau Gambar

Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.


Untuk menampilkan gambar dengan kode HTML, maka HTML 5 juga bisa menyajikannya dengan menggunakan kode 

<img src=" " alt=" " width=" " height="  ">

Arti kode tersebut adalah

1. <img>

img adalah singkatan dari image (gambar) merupakan kode atau tag HTML untuk menampilkan gambar. Kode ini tidak memiliki penutup (tidak ada </img>).

2. src=" "

src adalah singkatan dari source (sumber), artinya alamat gambar yang akan ditampilkan, bisa berupa:

a. URL (contoh: src="https://example.com/gambar.jpg")

b. Path lokal (contoh: src="images/foto.png")

Jika src=" " dikosongkan, maka tidak ada gambar yang akan ditampilkan.

3. alt=" "

alt adalah singkatan dari alternative text, artinya teks alternatif yang akan ditampilkan jika gambar gagal dimuat. Juga berguna untuk aksesibilitas, seperti pembaca layar untuk pengguna tunanetra.

Contoh: alt="Foto pemandangan pegunungan"

4. width=" "  height=" "

width artinya lebar gambar, height artinya tinggi gambar.

Digunakan untuk mengatur ukuran gambar secara eksplisit.

Satuan default (ukuran normal) adalah piksel (px), kecuali ditentukan lain (misalnya %).

Contoh: width="300" artinya lebar gambar 300 piksel.

Jika dikosongkan, maka ukuran gambar mengikuti ukuran aslinya.


Langkah-langkahnya

1. Tulislah perintah berikut

<!DOCTYPE html>

<html>

<body>

</body>

</html>

secara manual di halaman kosong di Google Docs.


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. Kemudian lakukan penyisipan kode image ke paragraf 


Alamat image berikut saya persiapkan untuk disisipkan


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg



Masukkan alamat image ini


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg


ke dalam tanda kutip di kode src=" "

sehingga kode menjadi

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg" alt=" " width=" " height="  ">


Kemudian masukkan teks GAMBAR DARI BLOGGER ke kode alt=" "

sehingga kode menjadi

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width=" " height="  ">


Kemudian masukkan bilangan 300 ke kode width=" " dan bilangan 340 ke kode height="  ">

sehingga kode menjadi

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width="300" height="340">


Kemudian kode tersebut dimasukkan ke dalam kode paragraf <p> </p> sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg" alt="GAMBAR DARI BLOGGER" width="300" height="340">

</p>

</body>

</html>


Sekarang kode keseluruhannya menjadi


<!DOCTYPE html>

<html>

<body>

<p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg” alt="GAMBAR DARI BLOGGER" width="300" height="340">

</p>

</body>

</html>


4. Copy-lah seluruh kode tersebut 

5. Kemudian beralih ke Blogger.

Bukalah akun Blogger anda.

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


Maaf, beberapa langkah sudah saya potong karena saya pikir anda sudah menguasai dan hafal langkah-langkah tersebut sehingga tidak perlu semua langkah secara detail ditampilkan di sini untuk selanjutnya.


Kode selengkapnya berikut:


<!DOCTYPE html>

<html>

<body>

<p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHn68VQvJWx69D9k2dhvJYPdZQ2Vtu18hSl_CZegxOvsgfp4z38aPHSNbTNIAU2HzkIp7fHxzRMrKkE4uAv15_-9N40eWzIaK3JmOphK3bBtUlk3ieZx_K9vEMqarrXuJdtUWRVChSf4n/s200/FB_IMG_1537679484080.jpg”  alt="GAMBAR DARI BLOGGER" width="300" height="340">

</p>

</body>

</html>

hasil tampilannya sebagai berikut

Read More

Thursday, September 11, 2025

HTML Anchor atau Link

9/11/2025 12:29:00 PM    

 

HTML Anchor atau Link

Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.


HTML Link digunakan untuk membuat tautan (hyperlink) yang memungkinkan pengguna berpindah dari satu halaman ke halaman lain, baik di dalam situs (web, website, blog) yang sama maupun ke situs lain.

Link atau anchor artinya jangkar memiliki kode

<a href="">nama link</a>

<a> adalah anchor tag yang bergunak untuk membuat link.

href adalah atribut yang selalu menempel di <a>, ia menentukan tujuan tautan.

Teks nama link di antara <a>...</a> adalah teks yang bisa diklik, yang bisa dilihat dan dibaca oleh pembaca.


Bagaimana caranya agar kita bisa menulis kode-kode beberapa link berikut ini:


Alamat Link Logo Blogger

https://www.blogger.com/img/logo_blogger_40px_2x.png


Alamat Link Blogger

https://www.blogger.com


Alamat Link Blogger Ikhsan Falihi

http://ikhsanfalihi.blogspot.com


Alamat Link Judul Postingan di Blogger Ikhsan Falihi

https://ikhsanfalihi.blogspot.com/2012/09/sekilas-tentang-penulis-blog-ini.html


Langkah-langkahnya

1. Tulislah perintah berikut

<!DOCTYPE html>

<html>

<body>

</body>

</html>

secara manual di halaman kosong di Google Docs.


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. Kemudian lakukan penyisipan kode link ke paragraf 


Beberapa alamat link berikut kita sisipkan satu demi satu: 

(kode yang diawali http atau https itu di-copy paste saja. Kalau ditulis secara manual pasti membutuhkan waktu yang sangat lama)


Alamat Link Logo Blogger

https://www.blogger.com/img/logo_blogger_40px_2x.png


Alamat Link Blogger

https://www.blogger.com


Alamat Link Blogger Ikhsan Falihi

http://ikhsanfalihi.blogspot.com


Alamat Link Judul Postingan di Blogger Ikhsan Falihi

https://ikhsanfalihi.blogspot.com/2012/09/sekilas-tentang-penulis-blog-ini.html


Perhatikan teks berawalan http atau https, teks inilah yang akan kita sisipkan ke dalam tanda kutip ke kode  

<a href=" ">nama link</a>


Untuk link 1

Misalnya kita menulis teks Alamat Link Logo Blogger ke ke kode untuk mengganti teks nama link  

<a href=" ">Alamat Link Logo Blogger</a>


Masukkan alamat link ini

https://www.blogger.com/img/logo_blogger_40px_2x.png

ke dalam tanda kutip

sehingga kode menjadi

<a href="https://www.blogger.com/img/logo_blogger_40px_2x.png">Alamat Link Logo Blogger</a>


Kemudian kode tersebut dimasukkan ke dalam kode paragraf <p> </p> sehingga kode menjadi

<!DOCTYPE html>

<html>

<body>

<p>

<a href="https://www.blogger.com/img/logo_blogger_40px_2x.png">Alamat Link Logo Blogger</a>

</p>

</body>

</html>


Untuk link 2, link 3, dan link 4 dilakukan dengan cara yang sama dengan link 1. 

Sisipkan kode <br> di antara link tersebut agar setiap link berada di baris yang berbeda-beda.

Tanda kutip jangan miring saat paste di halaman Tampilan HTML di Blogger.


Sekarang kode keseluruhannya menjadi


<DOCTYPE html>

<html>

<body>

<p>

<a href="https://www.blogger.com/img/logo_blogger_40px_2x.png">Alamat Link Logo Blogger

</a>

<br>

<a href="https://www.blogger.com">Alamat Link Blogger

</a>

<br>

<a href="https://ikhsanfalihi.blogspot.com">Alamat Link Blogger Ikhsan Falihi

</a>

<br>

<a href="https://ikhsanfalihi.blogspot.com/2012/09/sekilas-tentang-penulis-blog-ini.html”> Alamat Link Judul Postingan di Blogger Ikhsan Falihi

</a>

</p>

</body>

</html>


5. Copy-lah seluruh kode tersebut 

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

7. Pilihlah Publikasikan

8. Pilihlah KONFIRMASI

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

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

<a href="https://www.blogger.com/img/logo_blogger_40px_2x.png">Alamat Link Logo Blogger

</a>

<br>

<a href="https://www.blogger.com">Alamat Link Blogger

</a>

<br>

<a href="https://ikhsanfalihi.blogspot.com">Alamat Link Blogger Ikhsan Falihi

</a>

<br>

<a href="https://ikhsanfalihi.blogspot.com/2012/09/sekilas-tentang-penulis-blog-ini.html"> Alamat Link Judul Postingan di Blogger Ikhsan Falihi

</a>

</p>

</body>

</html>


Hasil tampilannya sebagai berikut: 

Alamat Link Logo Blogger
Alamat Link Blogger
Alamat Link Blogger Ikhsan Falihi
Alamat Link Judul Postingan di Blogger Ikhsan Falihi


Tombollah (kliklah) setiap link tersebut agar anda tahu hasilnya


Read More

Wednesday, September 10, 2025

HTML Font Face Size Color

9/10/2025 10:04:00 PM    

 

HTML Font Face Size Color

Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.


Menghias teks pada jenis huruf, ukuran huruf, dan warna huruf dapat dilakukan secara bersama-sama dengan menggunakan kode 

        <font face=" " size=" " color=" ">  </font>


Langkah-langkahnya

1. Tulislah perintah berikut

<!DOCTYPE html>

<html>

<body>

</body>

</html>

secara manual di halaman kosong di Google Docs.


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.

Paragraf yang sudah pernah kita tulis di Google Docs dan sudah disimpan di Google Docs bisa di-copy lagi. 

Misalnya 

Paragraf 2:

<p> Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. </p>


4. Kemudian lakukan penyisipan kode font ke paragraf sebagai berikut:

<p> 

<font face="Courier" size="1" color="red">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

<p> 

<font face="Times New Roman" size="7" color="blue">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

<p> 

<font face="Arial" size="2" color="green">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>


sehingga kode menjadi


<!DOCTYPE html>

<html>

<body>

<p> 

<font face="Courier" size="1" color="red">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

<p> 

<font face="Times New Roman" size="7" color="blue">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

<p> 

<font face="Arial" size="2" color="green">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

</body>

</html>


5. Copy-lah seluruh kode tersebut 

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

7. Pilihlah Publikasikan

8. Pilihlah KONFIRMASI

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

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

<font face="Courier" size="1" color="red">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

<p> 

<font face="Times New Roman" size="7" color="blue">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

<p> 

<font face="Arial" size="2" color="green">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</font>

</p>

</body>

</html>


Hasil tampilannya sebagai berikut:

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.


Read More

HTML Font Color

9/10/2025 09:45:00 PM    


HTML Font Color
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.

Menghias teks pada warna huruf menggunakan kode 
        <font color=" ">  </font>

Color di dalam HTML meliputi:
red = merah
green = hijau
blue = biru
yellow = kuning
dan sebagainya

Langkah-langkahnya
1. Tulislah perintah berikut
<!DOCTYPE html>
<html>
<body>
</body>
</html>
secara manual di halaman kosong di Google Docs.

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.
Paragraf yang sudah pernah kita tulis di Google Docs dan sudah disimpan di Google Docs bisa di-copy lagi. 
Misalnya 
Paragraf 2:
<p> Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. </p>

4. Kemudian lakukan penyisipan kode font ke paragraf sebagai berikut:
<p> 
<font color="red">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font color="blue">    
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font color="green">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>

sehingga kode menjadi

<!DOCTYPE html>
<html>
<body>
<p> 
<font color="red">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font color="blue">    
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font color="green">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
</body>
</html>

5. Copy-lah seluruh kode tersebut 
6. 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.
7. Pilihlah Publikasikan
8. Pilihlah KONFIRMASI
9. 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. 
10. 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> 
<font color="red">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font color="blue">    
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font color="green">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
</body>
</html>

Hasil tampilannya sebagai berikut:

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.


Read More

HTML Font Size

9/10/2025 09:33:00 PM    



HTML Font Size
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.

Menghias teks pada ukuran huruf menggunakan kode 
        <font size=" ">  </font>
Size di dalam HTML lama meliputi:
Size 1 sangat kecil
Size 2 kecil
Size 3 sedang, default
Size 4 agak besar
Size 5 besar
Size 6 sangat besar
Size 7 ekstra besar

Langkah-langkahnya
1. Tulislah perintah berikut
<!DOCTYPE html>
<html>
<body>
</body>
</html>
secara manual di halaman kosong di Google Docs.

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.
Paragraf yang sudah pernah kita tulis di Google Docs dan sudah disimpan di Google Docs bisa di-copy lagi. 
Misalnya 
Paragraf 2:
<p> Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. </p>

4. Kemudian lakukan penyisipan kode font ke paragraf sebagai berikut:
<p> 
<font size="1">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="2">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="3">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="4">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="5">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="6">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="7">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>

sehingga kode menjadi

<!DOCTYPE html>
<html>
<body>
<p> 
<font size="1">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="2">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="3">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="4">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="5">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="6">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="7">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
</body>
</html>

5. Copy-lah seluruh kode tersebut 
6. 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.
7. Pilihlah Publikasikan
8. Pilihlah KONFIRMASI
9. 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. 
10. 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> 
<font size="1">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="2">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="3">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="4">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="5">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="6">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
<p> 
<font size="7">  
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</font>
</p>
</body>
</html>

Hasil tampilannya sebagai berikut:

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.




Read More

HTML Font Face

9/10/2025 08:55:00 PM    



HTML Font Face
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.

Terdapat cara untuk menghias teks pada nama huruf atau jenis huruf menggunakan kode 
        <font face=" ">  </font>
    
Langkah-langkahnya
1. Tulislah perintah berikut
<!DOCTYPE html>
<html>
<body>
</body>
</html>
secara manual di halaman kosong di Google Docs.

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.
Paragraf yang sudah pernah kita tulis di Google Docs dan sudah disimpan di Google Docs bisa di-copy lagi. 
Misalnya 
Paragraf 1:
<p> BELAJAR HTML PERMULAAN BERSAMA IKHSAN </p>

4. Kemudian lakukan penyisipan kode font ke paragraf sebagai berikut:
<p> 
<font face="Arial">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
<p> 
<font face="Times New Roman">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
<p> 
<font face="Courier">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>

sehingga kode menjadi

<!DOCTYPE html>
<html>
<body>
<p> 
<font face="Arial">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
<p> 
<font face="Times New Roman">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
<p> 
<font face="Courier">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
</body>
</html>

5. Copy-lah seluruh kode tersebut 
6. 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.
7. Pilihlah Publikasikan
8. Pilihlah KONFIRMASI
9. 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. 
10. 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> 
<font face="Arial">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
<p> 
<font face="Times New Roman">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
<p> 
<font face="Courier">  
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</font>
</p>
</body>
</html>

Hasil tampilannya sebagai berikut

BELAJAR HTML PERMULAAN BERSAMA IKHSAN

BELAJAR HTML PERMULAAN BERSAMA IKHSAN

BELAJAR HTML PERMULAAN BERSAMA IKHSAN

Read More

Friday, September 5, 2025

HTML Penghias Teks Bagian 4

9/05/2025 03:12:00 PM    


HTML Penghias Teks Bagian 4
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.

Sekarang kita mempraktekkan coding  penghias teks menggunakan kode-kode berikut: 
1. Bold text
Gunanya untuk menebalkan teks tanpa menambahkan arti penting.
Kodenya  <b></b>
2. Important text
Gunanya untuk menandai teks yang penting, biasanya tampil bold, tapi juga memberi makna semantik tambahan.
Kodenya  <strong> </strong>
3. Italic text
Gunanya untuk membuat teks menjadi miring tanpa menambah penekanan makna.
Kodenya.  <i> </i>
4. Emphasized text
Gunanya untuk memberi penekanan makna pada teks, biasanya juga tampil miring.
Kodenya  <em> </em>
5. Marked (highlighted) text
Gunanya untuk memberi efek sorotan/highlight pada teks (biasanya latar belakang kuning).
Kodenya <mark> </mark>
6.  Smaller text
Gunanya untuk menampilkan teks dengan ukuran lebih kecil dari teks biasa.
Kodenya <small> </small>
7. Deleted text
Gunanya untuk menandai teks yang telah dihapus (biasanya dengan garis coret).
Kodenya  <del> </del>
8. Inserted text
Gunanya untuk menandai teks yang telah ditambahkan, biasanya tampil dengan garis bawah.
Kodenya <ins> </ins>
9. <sup> - Superscript text
Gunanya untuk menulis teks dalam format superskrip (lebih kecil dan sedikit ke atas), seperti pangkat dalam Matematika.
Kodenya  <sup></sup>
10. Subscript text
Gunanya untuk menulis teks dalam format subskrip (lebih kecil dan sedikit ke bawah), seperti dalam rumus Fisika dan Kimia.
Kodenya  <sub> </sub>

Contoh
Paragraf pertama dibuat tebal (bold),
kodenya  <p> <b></b> </p>
paragraf kedua dibuat italic (miring),
kodenya <p>  <i></i> </p>
paragraf ketiga dibuat tebal (bold) dan italic (miring),
kodenya <p> <b>  <i> </i> </b> </p>
paragraf keempat dicoret (delete, del),
kodenya <p> <del> </del> </p>
paragraf kelima untuk beberapa kata dibuat ke atas dan di bawah seperti rumus kimia.
kodenya <p><sup></sup> <sub> </sub></p>

Langkah-langkahnya
1. Tulislah perintah berikut
<!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.
Beberapa paragraf yang sudah pernah kita tulis di Google Docs dan sudah disimpan di Google Docs bisa di-copy lagi. 
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>

4. Kemudian lakukan penyisipan kode ke setiap paragraf sebagai berikut:

<p> <b> 
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</b> </p>

<p>  <i> 
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. 
</i> </p>

<p> <b>  <i>
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. 
</i> </b> </p>

<p> <del> 
Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab.
</del> </p>

<p> 
Kini <sup> Ikhsan  </sup> juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing <sub> di swastaan. </sub>
</p>

sehingga kode menjadi

<!DOCTYPE html>
<html>
<body>
<p> <b> 
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</b> </p>
<p>  <i> 
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. 
</i> </p>
<p> <b>  <i>
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. 
</i> </b> </p>
<p> <del> 
Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab.
</del> </p>
<p> 
Kini <sup> Ikhsan  </sup> juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing <sub> di swastaan.</sub>
</p>
</body>
</html>

5. Copy-lah seluruh kode tersebut 
6. 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.
7. Pilihlah Publikasikan
8. Pilihlah KONFIRMASI
9. 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. 
10. 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> <b> 
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</b> </p>
<p>  <i> 
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000. 
</i> </p>
<p> <b>  <i>
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. 
</i> </b> </p>
<p> <del> 
Ikhsan menguasai tiga bahasa asing yaitu Bahasa Inggris, Bahasa Ibrani, dan Bahasa Arab.
</del> </p>
<p> 
Kini <sup> Ikhsan  </sup> juga menjadi pengajar Matematika, Fisika, dan Kimia disamping tiga bahasa asing <sub> di swastaan.</sub>
</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.>

Read More

HTML Penghias Teks Bagian 3

9/05/2025 01:52:00 PM    



HTML Penghias Teks Bagian 3
Diasuh dan diampu oleh Ikhsan, S.Pd., M.Pd.

Sekarang kita mempraktekkan coding  penghias teks menggunakan warna teks, warna background untuk teks, nama huruf, ukuran huruf, dan perataan teks secara bersama-sama.

Kode yang harus digunakan berikut
warna teks ialah color:  ;
warna background untuk teks ialah background-color:  ;
nama huruf ialah font-family: , ;
ukuran huruf ialah font-size:  ;
perataan teks ialah text-align:  ;
Kode tersebut kita sisipkan ke kode <p>

Contoh
Paragraf pertama dan paragraf ketiga sudah pernah kita tulis dan sudah kita simpan di Google Docs dihias dengan
warna teks kuning,
warna background untuk teks merah,
nama huruf Arial,
ukuran huruf 18 piksel,
perataan teks tengah.

sehingga kode yang diminta dapat ditulis

warna teks kuning ialah
color: #FFFF00; 
warna background untuk teks merah ialah
background-color: #FF0000;  
nama huruf Arial ialah
font-family: Arial, sans-serif; 
ukuran huruf 18 piksel ialah
font-size: 18px; 
perataan teks tengah ialah
text-align: center;

Jika kode-kode tersebut disisipkan ke kode <p> menjadi

<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;"> </p>
 
Langkah-langkahnya
1. Tulislah perintah berikut
<!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.
Beberapa paragraf yang sudah pernah kita tulis di Google Docs dan sudah disimpan di Google Docs bisa di copy lagi. 
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>

4. Kemudian lakukan penyisipan kode ke kode <p> pada paragraf pertama dan ketiga sebagai berikut:

<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;">
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</p>

<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;">
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>

sehingga kode menjadi

<!DOCTYPE html>
<html>
<body>
<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;">
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</p>
<p>
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</p>
<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;">
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>
<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>

5. Copy-lah seluruh kode tersebut 
6. 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.
7. Pilihlah Publikasikan
8. Pilihlah KONFIRMASI
9. 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:

<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;">
BELAJAR HTML PERMULAAN BERSAMA IKHSAN
</p>
<p>
Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.
</p>
<p style="color: #FFFF00; background-color: #FF0000;  font-family: Arial, sans-serif; font-size: 18px; text-align: center;">
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>
<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.




Read More

HTML Penghias Teks Bagian 2

9/05/2025 11:12:00 AM    



HTML Penghias Teks Bagian 2

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.


Sekarang kita menyajikan penghias teks menggunakan nama huruf, ukuran huruf, dan perataan teks. 


Nama Huruf

Nama huruf di dalam HTML menggunakan kode font-family:  ;

Nama huruf di dalam HTML itu beragam, diantaranya 

Terdapat lima kategori dasar dalam nama huruf (font), yaitu,:

1. Serif: font dengan kait di ujung huruf (misalnya: Times New Roman).

2. San-serif: font tanpa kait (misalnya: Arial, Helvetica).

3. Monospace: semua huruf memiliki lebar yang sama (misalnya: Courier New).

4. Cursive: font bercorak tulisan tangan (misalnya: Brush Script MT).

5. Fantasy: font dekoratif atau artistik (misalnya: Papyrus).


Nama-nama font yang umum digunakan antara lain:

Arial kategori sans-serif

Verdana kategori sans-serif

Helvetica kategori sans-serif

Times New Roman kategori serif

Georgia kategori serif

Courier New kategori monospace

Lucida Console kategori 

Comic Sans MS kategori cursive 

Brush Script MT kategori cursive

Impact kategori fantasy

Papyrus kategori fantasy


Contoh penulisan kode font-family di HTML 


<p style="font-family: Arial, sans-serif;">

</p>


atau


<p style='font-family: "Arial", sans-serif;'>

</p>


Ukuran Huruf

Ukuran huruf di dalam HTML menggunakan kode font-size:  ;

Ukuran huruf di dalam HTML itu beragam, diantaranya 

1. Ukuran Absolut

Ukuran ini tetap, tidak berubah tergantung pada elemen lain atau ukuran layar, diantaranya:

px

Piksel – satuan yang paling umum dan stabil,

Kodenya ialah font-size: 13px;

pt

Point – sering dipakai di dunia cetak,

Kodenya ialah font-size: 13pt;

cm

Centimeter – jarang digunakan di web,

Kodenya ialah font-size: 13cm;

mm

Milimeter – ukuran jarang digunakan,

Kodenya ialah font-size: 138mm;

in

Inch – 1 inch = 2.54 cm,

Kodenya ialah font-size: 13in;

2. Ukuran Relatif

Ukuran ini tergantung pada elemen induk atau ukuran default browser.

% = untuk ukuran relatif terhadap elemen induk,

Kodenya ialah font-size:5%;

em = untuk ukuran font dari elemen induk,

Kodenya ialah font-size: 1.5em;

rem = untuk ukuran font dari elemen html (root element),

Kodenya ialah font-size: 5rem;

vw = untuk ukuran relatif terhadap lebar viewport (layar),

Kodenya ialah font-size: 5vw;

vh = untuk ukuran relatif terhadap tinggi viewport,

Kodenya ialah font-size: 5vh;

ex = untuk ukuran relatif terhadap tinggi huruf “x” dari font saat ini (jarang dipakai),

Kodenya ialah font-size: 5ex;

ch = untuk ukuran relatif terhadap lebar karakter "0" (zero) dari font saat ini.

Kodenya ialah font-size: 5ch;

3. Keyword CSS

Ini adalah nilai-nilai kata kunci yang mudah digunakan tapi kurang fleksibel. Beberapa keyboard ini diantaranya:

xx-small = untuk ukuran sangat kecil,

Kodenya ialah font-size: xx-small;

x-small = untuk ukuran lebih kecil,

Kodenya ialah font-size: x-small;

small = untuk ukuran kecil

Kodenya ialah font-size: small;

medium = untuk ukuran default atau sedang,

Kodenya ialah font-size: medium;

large = untuk ukuran besar,

Kodenya ialah font-size: large;

x-large = untuk ukuran lebih besar,

Kodenya ialah font-size: x-large;

xx-large = untuk ukuran sangat besar,

Kodenya ialah font-size: xx-large;

larger = untuk ukuran relatif lebih besar dari induknya,

Kodenya ialah font-size: larger;

smaller = untuk ukuran relatif lebih kecil dari induknya.

Kodenya ialah font-size: smaller;


Contoh penulisan kode font-size di HTML 


<p style="font-size: 18px;">Ukuran font 18px</p>

<p style="font-size: 1.5em;">Ukuran font 1.5em</p>

<p style="font-size: large;">Ukuran font besar (large)</p>


Perataan Teks 

Perataan (alignment) teks di dalam HTML menggunakan kode text-align: ;

Perataan (alignment) teks di dalam HTML itu beragam, diantaranya:

1. Left (Rata Kiri)

Teks akan diratakan ke sisi kiri elemen.

Kodenya ialah text-align: left;

2. Right (Rata Kanan)

Teks akan diratakan ke sisi kanan elemen.

Kodenya ialah text-align: right;

3. Center (Tengah)

Teks akan diratakan ke tengah elemen.

Kodenya ialah text-align: center;

4. Justify (Rata Kiri-Kanan)

Teks akan diratakan ke kiri dan kanan, seperti di koran.

Kodenya ialah text-align: justify;


Contoh penulisan kode text-align di HTML:


<p style="text-align: left;">Ini adalah teks yang diratakan ke kiri.</p>

 

 

Langkah-langkahnya

1. Tulislah perintah berikut

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


4. Kemudian lakukan penyisipan kode ke kode </p>


Paragraf pertama tersebut disisipi kode nama huruf Arial, ukuran huruf 18 piksel, dan rata tengah. Kode yang kita pakai adalah

untuk nama huruf Arial font-family: Arial, sans-serif;

untuk ukuran huruf font-size: 18px;

untuk rata tengah text-align: center;

sehingga kode untuk paragraf pertama sebagai berikut 

<p style="font-family: Arial, sans-serif;font-size: 18px;text-align: center;">

BELAJAR HTML PERMULAAN BERSAMA IKHSAN

</p>

 

Paragraf kedua tersebut disisipi kode nama huruf Georgia, ukuran huruf 24 piksel, dan rata kanan. Kode yang kita pakai adalah

untuk nama huruf Georgia font-family: Georgia, serif;

untuk ukuran huruf font-size: 24px;

untuk rata kanan text-align: right;

sehingga kode untuk paragraf kedua sebagai berikut 

<p style="font-family: Georgia, serif; font-size: 24px; text-align: right;">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>


Paragraf ketiga tersebut disisipi kode nama huruf Verdana, ukuran huruf 26 piksel, dan rata tengah. Kode yang kita pakai adalah

untuk nama huruf Verdana font-family: Verdana, sans-serif;

untuk ukuran huruf font-size: 26px;

untuk rata tengah text-align: center;

sehingga kode untuk paragraf ketiga sebagai berikut 

<p style="font-family: Verdana, sans-serif; font-size: 26px; text-align: center;">

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>


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="font-family: Arial, sans-serif;font-size: 18px;text-align: center;">

BELAJAR HTML PERMULAAN BERSAMA IKHSAN

</p>

<p style="font-family: Georgia, serif; font-size: 24px; text-align: right;">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>

<p style="font-family: Verdana, sans-serif; font-size: 26px; text-align: center;">

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>

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


5. Copy-lah seluruh kode tersebut 

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

7. Pilihlah Publikasikan

8. Pilihlah KONFIRMASI

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

10. 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="font-family: Arial, sans-serif;font-size: 18px;text-align: center;">

BELAJAR HTML PERMULAAN BERSAMA IKHSAN

</p>

<p style="font-family: Georgia, serif; font-size: 24px; text-align: right;">

Ikhsan meraih wisudawan terbaik UNESA pada wisuda XLVI tahun 2000.

</p>

<p style="font-family: Verdana, sans-serif; font-size: 26px; text-align: center;">

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>

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

Read More

Thursday, September 4, 2025

HTML Penghias Teks Bagian 1

9/04/2025 08:38:00 AM    


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.

Read More

All the titles can be read in this link (Click on here)
Daftar semua judul dapat di baca di link sini ( Klik di sini)