2022 - 11 RPL 1
- - - -
Pemrograman Web
- - - -
- - - -
Kerjakanlah tugas berikut ini :
Selamat Datang di Blog
SMK Negeri 1 Talaga
SMK Negeri 1 Talaga..., Religius, Vokasional, Enterpreneur dan Profesional)
Jalan Sekolah No.20, Talagakulon, Kec. Talaga, Kabupaten Majalengka, Jawa Barat 45463
<<< Media Belajar Daring dan Tutorial >>>
Tampilkan postingan dengan label pemrograman web. Tampilkan semua postingan
Tampilkan postingan dengan label pemrograman web. Tampilkan semua postingan
P06 Praktek Online - Pemrograman HTML - Tabel (Table)
PEMROGRAMAN HTML - TABEL (TABLE)
Penerapan pemrograman HTML pada tabel, akan mengkombinaiskan kolom (column) dan baris (rows). dan dapat meggabungkan antar sel (cells) dengan Colspan dan Rowspan. Penggunaan tag HTML dalam Tabel, terdapat tanda tag ("<" dan ">").
misalnya :
>>> tag tabel pembuka <table> dan tag tabel penutup </table>
>>> tag menuliskan text tebal <b> dan </b>
>>> tag ini mengapit teks yang diberi format
Klik https://html-online.com/editor/ untuk mempraktekannya :
Petunjuk :
<td></td> untuk kolom
<tr></tr> untuk baris
colspan untuk gabung kolom
rowspan untuk gabung kolom
Contoh 1 :
Contoh 1 : Pembuatan Tabel dengan HTML (3 kolom dan 4 baris)
Contoh 2 :
Contoh 2 : Pembuatan Tabel dengan HTML (4 kolom dan 3 baris)
Contoh 3 :
Contoh 3 : Pembuatan Tabel dengan HTML (5 kolom dan 4 baris dengan Colspan)
Contoh 4 :
Contoh 4 : Pembuatan Tabel dengan HTML (5 kolom dan 4 baris dengan Rowspan)
- - - - -
TUGAS PRAKTEK ONLINE
Kerjakanlah Tugas di bawah ini....
Bagaimana pemrograman HTML nya dan kirim jawabannya via japri (wa)
Nomor 1 :
Buatlah pemrograman HTML untuk membuat tabel berikut :
Diketikan pada kotak yang kosong dengan nama sendiri dan nama siswa di kelasnya, beserta nilai1, nilai2 , nilai3 dengan nilai sembarang antara 80 sampai dengan 100.
Nomor 2 :
Buatlah pemrograman HTML untuk membuat tabel berikut :
Diketikan pada kotak yang kosong dengan nama sendiri dan nama siswa di kelasnya, beserta nilai PABP, nilai PPKn, nilai B. Indonesia, nilai Matematika dengan nilai sembarang antara 80 sampai dengan 100.
- - - - -
Sumber :
P04-1 Praktek Online - Pemrograman Web
P04-1 Praktik Online - Pemrograman Web
Praktekan pemrograman web berikut ini menggunakan https://html-online.com/editor/
Ikutilah contoh nya ....
- - - - -
Latihan 01
Panah Merah(Output / Hasil) dan Panah Biru (untuk pengetikan Pemrograman Web)
Tampilan dari https://html-online.com/editor/
Setelah dimodifikasi .....
Panah Merah (Output / Hasil) dan Panah Biru (untuk pengetikan Pemrograman Web)
- - - - -
Pertanyaan No. 1
Lat 01 (Bagaimanakah Pemrograman Web nya untuk menghasilkan output/hasil yang diharapkan di samping kiri (gambar di bawah ini).....?
Review Kembali materi Pemrograman HTML......
https://web-muchamadekisa.blogspot.com/2018/09/pemrograman-html.html
*** Ketikan jawaban pemrograman web nya pada form yang telah disediakan....
- - - - -
Pertanyaan No. 2
Lat 01 (Bagaimanakah
Pemrograman Web nya dengan ditambahkan pengetikan paragraph untuk menghasilkan output/hasil yang diharapkan di
samping kiri (gambar di bawah ini).....?
Review Kembali materi Pemrograman HTML dan cara pemrogrman HTML untuk pengetikan paragraph......
https://web-muchamadekisa.blogspot.com/2018/09/pemrograman-html.html*** Ketikan jawaban pemrograman web nya pada form yang telah disediakan....
- - - - -
Sumber :
* https://html-online.com/editor/
* https://html-online.com/editor/
Latihan 11 - HTML - Membuat Form Contact
Ketiklah program berikut pada editor HTML blogger :
<!DOCTYPE html>
<html>
<head>
<title>Contact
Us</title>
</head>
<body>
<form action="contact.php"
method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
<input
type="text" name="name" placeholder="your name..."
/>
</p>
<p>
<label>Subject:</label>
<input
type="text" name="subject" placeholder="subject..."
/>
</p>
<p>
<label>Email:</label>
<input
type="email" name="email" placeholder="your email..."
/>
</p>
<p>
<input
type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
Latihan 10 - HTML - Membuat form Login
Ketiklah program berikut pada editor HTML blogger :
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form
action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input
type="text" name="username" placeholder="username..." />
</p>
<p>
<label>Password:</label>
<input
type="password" name="password" placeholder="password..." />
</p>
<p>
<label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
</p>
<p>
<input
type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya sebagai berikut :
- - -
Latihan 9 - HTML Slide Marquee – Image
Ketiklah program berikut pada editor HTML blogger :
<marquee>
<img
src="https://www.smkn1panyingkiran.sch.id/images/phocagallery/Kumpulan_Logo/thumbs/phoca_thumb_m_lab2.jpg" width="450"
height="300"></img>
<img
src="https://www.smkn1panyingkiran.sch.id/images/phocagallery/Kumpulan_Logo/thumbs/phoca_thumb_m_praktik_jurusan1.jpg" width="450"
height="300"></img>
<img
src="https://www.smkn1panyingkiran.sch.id/images/phocagallery/Kumpulan_Logo/thumbs/phoca_thumb_m_pelatihan_jurusan.jpg"
width="450" height="300"></img>
</marquee>
Hasilnya sebagai berikut :
- - -
Latihan 8 - HTML - Frame - Video Youtube
Ketiklah program berikut pada editor HTML blogger :
<center>
<b><h3>
Tutorial Membuat Apps
dengan AppsGeyser
</h3></b>
<br>
<iframe width="450" height="300"
src="https://www.youtube.com/embed/H0M4a_A0Cfw"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
<br><br><br>
<hr>
<br><br><br>
<b><h3>
Presentasi Blog Sebagai
Media Pembelajaran
</h3></b>
<br>
<iframe width="450" height="300"
src="https://www.youtube.com/embed/LY4CEuhZpP0"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</center>
<br><br><br>
Hasilnya sebagai berikut :
- - -
