Assalamu'alaikum Warahmatullahi Wabarakatuh
Hallo semuanya .. semoga dalam kondisi sehat semua yaaa para pembaca yang insyaAllah dirahmati Allah... Terima kasih sudah mampir ke halaman ini lagi... :)
.
Baik hari ini izinkan saya berbagi untuk penguatan materi konsep dasar dalam menyiapkan sebuah website sebagai media konten digital menggunakan CMS (Content Management System), siapa yang sudah punya blogger atau alamat wordpress ? yups pada materi sebelumnya itu termasuk salah satu contoh CMS. tahu tidak sebelum membangun sebuah CMS itu ada kode yang ditulis salah satunya menggunakan HTML. Hayooo apa sih HTML itu ?
Yups yang sudah belajar bareng pasti tahu kan HTML itu apa, Nah iyaa ... betul. 😇
HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.
HTML sebenarnya bukanlah bahasa pemrograman, artinya HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Contoh kode atau script membuat paragraf. siap membuat kode HTML, pastiii siap yaa ? jangan lupa berdoa yaa sholih, sholihah,
Bissmillahirrahmanirrahim ...
Karena kemarin kita praktikumnya dibulan Agustus tema kali ini kita ambil Pahlawan ya sholih sholihah.. Yuks cekidot... Bisa diikuti langkah-langkahnya yaa😍
.
OKEEE... Sebelum koding atau menulis kode dasar HTML siapkan dulu ya Teks editornya, yaitu instal aplikasi Notepad++ di komputer terlebih dahulu (bisa download/mencari di internet). Jika sudah silahkan buka dan buat lembar kerja baru, kemudian simpan ke direktori komputer kalian masing-masing ke dalam folder yang sudah disiapkan terlebih dahulu, oke lalu simpan file dengan nama index.html. terdapat struktur kode untuk menampilkan jenis tulisan, garis horizontal, tabel, tulisan berjalan, membuat bacground , memberikan link dan menambah gambar pada halaman web.
Pertama-tama kalian bisa buat kode di teks editor notepad dan disimpan dengan nama file index.html.
Contoh kode sederhana file index.html
<!DOCTYPE html>
<html>
<head>
<title> BIOGRAFI PAHLAWAN </title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1><b><center>PPM MBS YOGYAKARTA </h1></center>
<h4> <b><center> DAFTAR NAMA PAHLAWAN NASIONAL</h4></center>
<h6><b> <center> TABEL PAHLAWAN</h6></center>
<hr>
<b><marquee direction='right'> KELAS 9.E-K Tahun Ajaran 2024-2025</b></marquee>
<br>
<center><img src="pahlawan.jpg" alt="pahlawan" width="800" height="300" /></center>
</center>
<center> <table border="1" cellpadding="10">
<th> NAMA PAHLAWAN</th>
<th>TTL</th>
<th>FOTO</th>
<tr>
<td>Ir. Soekarno </td>
<td>Surabaya, 06 Juni 1901 </td>
<td> <center><img src="soekarno.JFIF" alt="soekarno" width="80" height="100" /></center></td>
</tr>
<tr>
<td>Mohammad Hatta</td>
<td>Bukit Tinggi, 12 Agustus 1902</td>
<td> </td>
</tr>
<tr>
<td>Cut Nyak Dien</td>
<td>Aceh, 1848</td>
<td> </td>
</tr>
<tr>
<td>Jendral Soedirman</td>
<td>Purbalingga, 24 Januari 1916</td>
<td> </td>
</tr>
<tr>
<td>R.A Kartini</td>
<td>Jepara, 21 April 1879</td>
<td> </td>
</tr>
<tr>
<td>Pangeran Diponegoro</td>
<td>Yogyakarta, 11 November 1785</td>
<td> </td>
</tr>
<tr>
<td>Sultan Hasanudin</td>
<td>12 Januari 1631 </td>
<td> </td>
</tr>
<tr>
<td>Ki Hajar Dewantara</td>
<td>Yogyakarta, 02 Mei 1889 </td>
<td> </td>
</tr>
<tr>
<td>Dewi Sartika</td>
<td>Bandung, 04 Desember 1884 </td>
<td> </td>
</tr>
<tr>
<td>Kapitan Pattimura</td>
<td>Maluku, 08 Juni 1783 </td>
<td> </td>
</tr>
</table></center>
<center>
<h2><i> Gudangnya Developer Indonesia </h2></i>
<h3> <u>Membina Iman, Akhlak dan Ilmu </h3></u>
<li><a href="https://ekayani871.blogspot.com/">Blog Ustadzah EKA </a></li>
<li><a href="https://linktr.ee/ekayani871">Contact Ustadzah Eka</a></li>
<li><a href="https://mbs.sch.id">WEBSITE PONDOK KU</a></li>
<h5> Semangat Belajar dan Berlatih </h5></center>
</body>
</html>
.
Kedua kalian buat file baru di lembar notepad dengan nama penyimpanan file yaitu style.css untuk pemanggilan tampilan pada background web yang sudah kita buat.
kode css bisa diikuti atau difariasi sesuai kreatifitas
berikut contoh file style.css :
body {
background-image: url('indonesia.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
...
Alhamdulillah sudah jadi jangan lupa di simpan yaa atau ctrl+s pada file index.html dan style.css.
Hasil Halaman WEBSITE sederhanya sudah bisa ditampilkan :)
Selamat mencobaaaa yaaaa ..
see you ...
Judul Web Yaitu BIOGRAFI PAHLAWAN seperti dibawah ini
💫💫💫💫💫💫💫
Eitzzz.. untuk latihan mandiri kalian bisa lengkapi gambar pahlawannya yaaa.. kalo sudah berhasil boleh komen dan berkabar dengan ustadzah.. Happy Koding semuanyaaa :)
Wassalamu'alaikum Warahmatullahi Wabarakatuh
Komentar