Membuat tampilan website sederhana menggunakan kode HTML [Kelas XI] ~ INFORMATIKA SMA

Senin, Agustus 11, 2025

Membuat tampilan website sederhana menggunakan kode HTML [Kelas XI]

Agustus 11, 2025 Dasar HTML, HTML, Kode HTML, Website No comments

Hari ini, siswa kelas XI melakukan praktik membuat halaman website sederhana menggunakan bahasa HTML. Kegiatan dimulai dengan mengenal struktur dasar dokumen HTML, mulai dari <html>, <head>, hingga <body>.

Siswa kemudian menambahkan elemen-elemen dasar seperti judul halaman, teks paragraf, gambar, dan tautan. Tujuannya adalah agar mereka memahami bagaimana setiap tag HTML memiliki fungsi tertentu dalam membangun tampilan dan isi halaman.

Melalui praktik ini, siswa belajar bahwa membuat website tidak selalu membutuhkan software canggih. Cukup dengan teks editor sederhana dan browser, mereka sudah bisa menciptakan halaman web sendiri. Semoga keterampilan ini menjadi langkah awal untuk mengembangkan kreativitas dan kemampuan di bidang teknologi.

Materi HTML

https://informatikasegar.blogspot.com/2023/07/modul-pemrograman-web-11.html

Latihan membuat tabel

<html> <head> <title> Latihan Table </title> </head> <body> Tabel 1 <table border="1" width="500"> <tr> <td align="center">1</td> <td align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td align="center">7</td> <td align="center">8</td> <td align="center">9</td> </tr> </table> <p> Tabel 2 <table border="1" width="500"> <tr> <td align="center">1</td> <td colspan="2" align="center">2</td> </tr> <tr> <td align="center">3</td> <td align="center">4</td> <td align="center">5</td> </tr> <tr> <td colspan="2" align="center">6</td> <td align="center">7</td> </tr> </table> <p> Tabel 3 <table border="1" width="500"> <tr> <td colspan="3" align="center">1</td> </tr> <tr> <td colspan="2" align="center">2</td> <td align="center">3</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> </table> <p> Tabel 4 <table border="1" width="300"> <tr> <td rowspan="2" align="center">1</td> <td align="center">2</td> </tr> <tr> <td align="center">3</td> </tr> </table> <p> Tabel 5 <table border="1" width="300"> <tr> <td align="center">1</td> <td rowspan="2" align="center">2</td> </tr> <tr> <td align="center">3</td> </tr> </table> <p> Tabel 6 <table border="1" width="600"> <tr> <td align="center" width="200">1</td> <td colspan="2" align="center" width="400">2</td> </tr> <tr> <td align="center">3</td> <td colspan="2" align="center"> <table border="1" width="350"> <tr> <td colspan="2" align="center">4</td> </tr> <tr> <td align="center">5</td> <td align="center">6</td> </tr> </table> </td> </tr> <tr> <td colspan="2" align="center"> <table border="1" width="350"> <tr> <td rowspan="2">7</td> <td align="center">8</td> </tr> <tr> <td align="center">9</td> </tr> </table> </td> <td align="center" width="200">10</td> </tr> </table> </body> </html>

Membuat Halaman Situs <html> <head> <title> .:: SITUSKU ::. </title> </head> <body bgcolor="#000000" text="#FFFFFF"> <table border="1" align="center" width="80%"> <tr> <td colspan="2" align="center" height="100" bgcolor="#3A2BD1"> <font size="16" face="Arial">SITUSKU.COM </font><br> <hr width="500"> <br> <marquee direction="right">Terdepan Dalam Berita dan Gosip</marquee> </td> </tr> <tr valign="top"> <td width="200" height="450" bgcolor="green"> Home <br> <a href=informatika.html> Informatika</a> </td> <td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b> <br> Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari segala penjuru Indonesia.<br><br> Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip artis dan kuliner di Indonesia. </td> </tr> </table> </body> </html>

informatika.html

<html> <head> <title> .:: SITUSKU ::. </title> </head> <body bgcolor="#000000" text="#FFFFFF"> <table border="1" align="center" width="80%"> <tr> <td colspan="2" align="center" height="100" bgcolor="#3A2BD1"> <font size="16" face="Arial">SITUSKU.COM </font><br> <hr width="500"> <br> <marquee direction="right">Terdepan Dalam Berita dan Gosip</marquee> </td> </tr> <tr valign="top"> <td width="200" height="450" bgcolor="green"> <a href=latihan6.html>Home</a> <br>Informatika </td> <td bgcolor="#F75454">Halaman Informatika <b><i></td> </tr> </table> </body> </html>

Ketentuan Pengumpulan Tugas:

Semua file latihan Kode HTML mulai dari file:

Folder 1 berisi:

- latihan.html

- latihan2.html

- latihan3.html

- latihan4.html

- latihan5.html

- latihan6.html

Folder 2 berisi:

- home.html

- profile.html

- gallery.html

- gambar.jpg

Kedua folder dimasukkan ke dalam satu folder dan diberi nama kemudia upload ke alamat di bawah ini!

KELAS 11A

https://drive.google.com/drive/folders/1VifBJ11_NbXLsEfuIJhDvuh6TQ1wt3QI?usp=sharing

KELAS 11B

https://drive.google.com/drive/folders/10mWnMFjRjEnAGsDs6wwWtH-vpzIC0RrL?usp=sharing

Materi selanjutnya: https://informatikasegar.blogspot.com/2025/09/konfigirasi-xampp-server-kelas-11.html

0 comments:

Posting Komentar

Pastikan anda berkomentar dengan sopan, tidak mengandung pornografi dan unsur SARA. Terima kasih sudah berkomentar dengan bijak.

INFORMATIKA SMA

Labels

Blog Archive

Senin, Agustus 11, 2025