Arsip Penulis: smpngodean2@gmail.com

PERTEMUAN 3 — Input Pengguna

Tinggalkan Balasan

1. Tujuan Pembelajaran

  1. Memahami fungsi input() dalam Python.
  2. Membuat program yang dapat bertanya kepada pengguna.
  3. Menyimpan jawaban pengguna ke dalam variabel.
  4. Membedakan input berupa teks dan angka.
  5. Menggunakan int() untuk mengubah teks menjadi angka.
  6. Menampilkan kembali informasi yang diberikan pengguna.
  7. Menggunakan if untuk membuat respons berbeda.
  8. Membuat Program Interview sederhana.

2. Apa Itu Input Pengguna?

Bayangkan kita membuat program seperti ini:

print(“Halo!”)
print(“Selamat datang di program saya.”)

Program hanya berbicara.
Tetapi bagaimana kalau kita ingin program bertanya?
Misalnya:
Siapa nama kamu?
Kemudian siswa mengetik:
Budi

Program harus bisa menerima jawaban tersebut.

Nah, untuk itulah kita menggunakan:

input()
Pengertian sederhana

input() adalah perintah Python untuk menerima data yang diketik oleh pengguna melalui keyboard.

Contoh:

nama = input(“Siapa nama kamu? “)

Ketika program dijalankan:

Siapa nama kamu? Budi

Python menerima “Budi” dan menyimpannya ke dalam variabel nama.

3. Memahami Variabel

Sebelum masuk lebih jauh, pahamai dulu konsep variabel.
Variabel bisa kita bayangkan sebagai kotak penyimpanan.
Misalnya:
nama = “Budi”
Artinya:
nama
↓
┌─────────┐
│ Budi │
└─────────┘
Kita bisa mengambil isi kotak tersebut:
print(nama)
Hasil:
Budi
Dengan input(), isi kotaknya berasal dari pengguna.
nama = input (“Siapa nama kamu? “)
Misalnya pengguna mengetik:
Andi
Maka:
nama
↓
┌─────────┐
│ Andi │
└─────────┘

  1. Struktur Dasar input()
    Bentuk paling sederhana:
    input(“Pertanyaan”)
    Contoh:
    input(“Siapa nama kamu? “)
    Tetapi biasanya hasil input kita simpan ke variabel:
    nama = input(“Siapa nama kamu? “)
    Strukturnya:
    nama = input(“Siapa nama kamu?”)
    │ │

│ └── pertanyaan kepada pengguna
│
└── tempat menyimpan jawaban

FLOWCHART

5. Contoh Program Pertama

Mari kita buat program sederhana.

nama = input(“Siapa nama kamu? “)

print(“Halo”, nama)

6. Mengubah Input Menjadi Angka

Untuk mengubah teks menjadi bilangan bulat, kita menggunakan:
int()
Contoh:
umur = int(input(“Berapa umur kamu? “))
Perhatikan prosesnya:
Pengguna mengetik
↓
“14”
↓
input()
↓
int()
↓
14

Sekarang umur benar-benar berupa angka.
Contoh:
umur = int(input(“Berapa umur kamu? “))
print(“Tahun depan umur kamu:”, umur + 1)
Jika pengguna memasukkan:
14
hasil:
Tahun depan umur kamu: 15

7. Membuat Program Interview

Sekarang kita masuk ke latihan utama.

Program harus bertanya:

Nama
Umur
Hobi
Cita-cita

Kuis python 1

Kuis Python V4.2

Kuis Python

Isi identitas peserta sebelum memulai.

Token Kuis

Masukkan token yang diberikan guru.

Kuis Python

00:00

Hasil Kuis

Benar:
Salah:

Dashboard Guru

Login untuk melihat rekap dan pengaturan token.

Dashboard Guru

Peserta0
Selesai0
Berlangsung0
Rata-rata0
Tertinggi0
Lulus0
NoNamaKelasAbsenNilaiBenarSalahStatus

⚙️ Pengaturan Token

Target: SEMUA, tingkat 7/8/9, satu rombel, atau kombinasi seperti 7A,7C. Waktu mengikuti timezone Spreadsheet. Pilih tanggal dan jam langsung dari kalender.

🔄 Reset Pengerjaan

Reset dapat dilakukan untuk semua peserta pada token, satu kelas, atau satu peserta. Riwayat nilai tidak dihapus.

INFORMASI KEHADIRAN DAN NILAI

Tinggalkan Balasan

Ekstrakurikuler Kelas Coding Pemrograman Python

Administrasi Ekstra
ADMINISTRASI EKSTRA
Masuk

Silakan masuk menggunakan akun Anda.

PERTEMUAN 2 — Variabel & Tipe Data

Tinggalkan Balasan

Materi: Siswa memahami variabel sebagai tempat menyimpan data dan mengenal string, integer, float, serta boolean.

Contoh Kode: 

nama = “Budi”
umur = 13
tinggi = 150.5
sudah_makan = True

print(nama)
print(umur)

Latihan: Buat variabel nama, umur, kelas, hobi, dan tinggi; lalu tampilkan.
Tantangan: Buat kartu biodata digital dengan minimal 5 variabel.

Mini Project: Biodata Digital.

1. Apa itu Variabel?

Variabel adalah wadah atau tempat di memori komputer untuk menyimpan data, sedangkan tipe data adalah jenis nilai yang disimpan di dalam wadah tersebut.

Kita bisa mempelajari konsep lengkapnya berdasarkan penjelasan dari Belajar Python berikut ini:

Pengertian Variabel

  • Variabel berfungsi sebagai penanda atau label nama agar data mudah dipanggil kembali.
  • Nilai dimasukkan menggunakan tanda sama dengan (=).
  • Python tidak memerlukan deklarasi tipe data secara manual karena sifatnya dinamis.

Aturan penulisan nama variabel:
Harus diawali dengan huruf atau garis bawah (_), tidak boleh angka.
Bersifat case-sensitive (huruf besar dan kecil dibedakan).
Tidak boleh memakai kata kunci bawaan seperti print.

Contohnya:

nama = “Budi”
Pada kode tersebut:
nama → nama variabel
= → operator untuk memberikan nilai
“Budi” → nilai yang disimpan
Variabel nama sekarang menyimpan data Budi.
Kemudian kita bisa menampilkan isinya:

python
nama = “Budi”
print(nama)
Hasil:

Budi

Contoh Variabel dalam Python

nama = “Siti”
kelas = “7A”
umur = 13
tinggi = 155.5
Variabel tersebut menyimpan data yang berbeda-beda.

2. Tipe Data Python

Setiap data yang disimpan dalam variabel memiliki tipe data.
Beberapa tipe data dasar dalam Python adalah:

A. String (str)
B. Integer (int)
C. Float (float)
D. Boolean (bool)

Macam-Macam Tipe Data Utama

  • Integer (int): Bilangan bulat, contohnya 10 atau 32.
  • Float (float): Bilangan desimal atau pecahan, contohnya 0.5 atau 1.3
  • String (str): Teks atau kumpulan karakter yang diapit tanda petik.
  • Boolean (bool): Nilai kebenaran yang berisi True atau False.

B. Integer (int)

Integer digunakan untuk menyimpan bilangan bulat.
Contoh:
umur = 13
jumlah_siswa = 32
tahun = 2026
Integer tidak menggunakan tanda petik.
Benar:
umur = 13
Berbeda dengan:
umur = “13”

13 adalah integer, sedangkan “13” adalah string karena menggunakan tanda petik.

C. Float (float)

Float digunakan untuk menyimpan bilangan desimal.

Contoh:

tinggi = 155.5
berat = 45.7
nilai = 89.5
Contoh program:
nilai = 85.5
print(nilai)
Hasil:
85.5

D. Boolean (bool)

Boolean digunakan untuk menyimpan nilai benar atau salah.
Nilainya hanya ada dua:

True
False

Contoh:

lulus = True
terlambat = False
Perhatikan bahwa True dan False menggunakan huruf kapital di awal.

  1. Mengecek Tipe Data dengan type()
    Python menyediakan fungsi type() untuk mengetahui jenis data.
    Contoh:
    nama = “Budi”
    umur = 13
    nilai = 89.5
    lulus = True

print(type(nama))
print(type(umur))
print(type(nilai))
print(type(lulus))
Hasilnya kira-kira:
<class ‘str’>
<class ‘int’>
<class ‘float’>
<class ‘bool’>
Artinya:
str → String
int → Integer
float → Bilangan desimal
bool → Boolean

PERTEMUAN 1 Mengenal programming, menjalankan Python, dan menggunakan print().

Tinggalkan Balasan

Pemrograman adalah cara kita memberi instruksi kepada komputer untuk melakukan tugas tertentu menggunakan bahasa yang dimengerti komputer, seperti Python.

Mengenal Python

  • Bahasa ramah pemula: Python menggunakan tata bahasa yang mirip seperti bahasa Inggris.
  • Tanpa titik koma: Anda tidak perlu menulis tanda titik koma (;) di akhir baris kode Python.
  • Serbaguna: Digunakan untuk membuat website, pengolahan data, hingga kecerdasan buatan.

Cara Menjalankan Python

  • Lewat Terminal/Shell: Buka terminal komputer, ketik python atau python3, lalu tekan Enter.
  • Lewat File Teks: Tulis kode di text editor atau IDE (seperti PyCharm atau VS Code), simpan dengan ekstensi .py, lalu jalankan.
  • Menggunakan Thonny IDE Python untuk pemula

Menggunakan Fungsi print()

Fungsi print() berguna untuk menampilkan teks, angka, atau hasil perhitungan ke layar monitor.

  • Mencetak Teks: Gunakan tanda petik (satu atau dua) di dalam tanda kurung. pythonprint("Halo, dunia!")
  • Menghitung Angka: Tanpa tanda petik jika ingin melakukan operasi matematika. python print(5 + 3)

Contoh Kode: print(“Halo!”)
print(“Nama saya Andi”)
print(“Saya sedang belajar Python”)

Latihan: Buat program yang menampilkan nama, umur, sekolah, kelas, hobi, dan cita-cita.

Tantangan: Buat tampilan ‘PROFIL SAYA’ yang rapi dengan garis pembatas.

Mini Project: Robot Perkenalan: komputer seolah-olah memperkenalkan dirinya.

Belajar Pemrograman Python Dasar

Tinggalkan Balasan

Tujuan 

  • Mengenal cara berpikir komputer dan dasar Python.
  • Membuat program interaktif menggunakan input, kondisi, dan perulangan.
  • Menggunakan list dan fungsi.
  • Membuat serta mempresentasikan game/aplikasi sederhana.

Pengenalan dengan Python

Apa itu Python dan kenapa belajar Python?

Apa saja alat-alat yang diperlukan untuk belajar python?

Bagaimana cara membuat program python?

Apa yang harus dipelajari selanjutnya?

Penilaian Akhir ekstrakurikuler TIK kelas Coding

Tinggalkan Balasan

Soal Project Akhir Web Sederhana: Halaman Profil Sederhana
Tujuan : Membuat sebuah halaman web sederhana yang berfungsi sebagai halaman profil pribadi atau tokoh fiktif menggunakan HTML.

Membuat Project web profil pribadi

  1. Buatlah Project web pribadi menggunakan HTML
  2. Pada project itu, buatlah minimal tiga halaman web, yakni home, biodata, dan about. Boleh ditambah halaman lain misal : kontak, galeri dll.

Pelaksanaan :

Untuk kelas yang hari rabu, ujian dilaksanakan pada
hari Rabu 21 Mei 2025
Untuk kelas yang hari kamis, ujian dilaksanakan pada
hari Kamis 05 juni 2025

Aturan :

  1. Akan menggunakan 3 Lab.komputer (timur,tengah dan barat)
  2. 1 komputer untuk 1 siswa
  3. Boleh menggunakan HP dengan syarat download terlebih dahulu Aplikasi Code Studio di Playstore
  4. Open Book (boleh buka referensi lain, buku, hp dsb)

Project ini akan dinilai berdasarkan:

Kesesuaian dengan persyaratan yang disebutkan di atas.
Struktur HTML yang valid dan rapi.
Penggunaan elemen HTML yang tepat.
Kejelasan dan keterbacaan kode
Selamat mengerjakan project akhir web sederhana.

semua materi dan contoh ada di web https://kelascoding.smpn2godean.sch.id/

MEMBUAT WEB PROFILE PRIBADI MENGGUNAKAN HTML

Tinggalkan Balasan

Pada pertemuan kali ini kita akan membuat projek web profil pribadi dengan menggunakan lima halaman web, yaitu home, about, biodata, galeri dan contact.
Berikut tahapannya :

Tahap 1
1. Buat folder baru dengan nama iniwebku(atau dengan nama masing).
2. Buat folder lagi di dalam folder iniwebku dengan nama folder image, folder image ini nantinya untuk menyimpan file foto.
3. Strukturnya nanti jadi seperi ini.

4. File yang perlu dipersiapkan di tahapan ini adalah foto berformat .jpg
5. Langkah selanjutnya kita akan mulai menulis kode. Silakan buka folder iniwebku dengan Visual Studio Code. Caranya:
Klik menu File, lalu pilih Open Folder dan carilah folder iniwebku dengan begini kita sudah siap menuliskan kode.

Tahap 2

1.Membuat halaman home


Buat file baru bernama index.html di dalam folder iniwebku,
Setelah itu, isi dengan kode berikut:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iniwebku</title>
    <style>
        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #00c6ff, #0072ff);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }

        /* Container */
        .container {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            width: 80%;
            max-width: 600px;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            font-weight: 700;
        }

        p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .button {
            background-color: #ff6f61;
            color: white;
            padding: 15px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
        }

        .button:hover {
            background-color: #e95c4b;
        }

        footer {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 0.8rem;
        }

    </style>
</head>
<body>

    <div class="container">
        <h1>Selamat Datang di Personal Website saya!</h1>
        <p>Terima kasih telah mengunjungi website saya. saya senang dapat memberikan informasi dan layanan terbaik untuk Anda.</p>
        <a href="about.html" class="button">Jelajahi website Saya</a>
    </div>

    <footer>
        <p>&copy; exsan | 2025</p>
    </footer>

</body>
</html>

Jangan lupa untuk mengubah nama exsan dengan nama kamu.

Jika kita coba membuka file index.html, maka hasilnya akan seperti ini:

2. Membuat halaman about


Buat file baru dengan nama about.html

Kemudian tulis kode berikut :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aboutme</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px 0;
        }

        .container {
            width: 100%;
            margin: 20px auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #333;
        }

        .bio-detail {
            margin-bottom: 15px;
        }

        .bio-detail label {
            font-weight: bold;
        }

        .bio-detail p {
            font-size: 16px;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 5px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
       
    </nav>

    <hr />

    <header style="text-align: center;">
        <img src="image/foto1.jpg" width="200" height="200" style="border-radius: 50%;"/>
        <h1>Muhammad Ichsanudin</h1>
        <p>(Software Engineer)</p>
    </header>

    <hr />

    <article style="text-align: center;">
        <h2>Overview</h2>
        <p>
            Haloo, saya adalah software engineer yang berdomisili di yogyakarta. </br>
            Saat ini sedang belajar HTML di SMPN 2 Godean bergabung dikelas coding
        </p>
    </article>

    <div style="max-width: 500px; margin: 3em auto">
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>Skill</th>
                    <th>Pengalaman</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li>HTML (Expert)</li>
                            <li>CSS (Beginner)</li>
                            <li>Javascript (Beginner)</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Freelancer di Internet</li>
                            <li>Leader Local Linux Community</li>
                            <li>Leader Local Linux Community</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2025 exsan.</p>
    </footer>
</body>
</html>


 maka hasilnya akan seperti ini:

3. Membuat halaman biodata

Buat file baru dengan nama biodata.html

Kemudian tulis kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Biodataku</title>
	<link rel="stylesheet" type="text/css" href="style.css">
 
</head>
<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
    </nav>
	<div class="kotak">
 
		<div class="judul">
			<h1>BIODATA DIRI</h1>
		</div>
 
		<div class="blok">
 
			<h2>Informasi</h2>			
			
			<div class="kiri">
				<img src="image/foto1.jpg">				
			</div>
 
			<div class="kanan">
				<table>
					<tr>
						<th>Nama</th>
						<th>:</th>
						<td>M. Ichsanudin</td>
					</tr>
					<tr>
						<th>Tempat</th>
						<th>:</th>
						<td>Sleman</td>
					</tr>
					<tr>
						<th>Tgl.Lahir</th>
						<th>:</th>
						<td>DD MM YYYY</td>
					</tr>
					<tr>
						<th>Agama</th>
						<th>:</th>
						<td>Islam</td>
					</tr>
					<tr>
						<th>Alamat</th>
						<th>:</th>
						<td>Jl. Godean, Yogyakarta</td>
					</tr>
					<tr>
						<th>Email</th>
						<th>:</th>
						<td>xsn@fullstackdev.com</td>
					</tr>
					<tr>
						<th>No.HP</th>
						<th>:</th>
						<td>+62812-3456-7890</td>
					</tr>
					<tr>
						<th>Website</th>
						<th>:</th>
						<td><a href="https://www.iniwebku.com">www.iniwebku.com</a></td>
					</tr>
				</table>
				
			</div>
 
		</div>		
 
		<div class="blok">
 
			<h2>Pendidikan</h2>			
			
			<div>
				<ul>
					<li><b>2000 - 2006</b> SD </li>
					<li><b>2006 - 2009</b> SMP </li>
					<li><b>2009 - 2012</b> SMA </li>
					<li><b>2012 - 2016</b> Sekolah Tinggi</li>
				</ul>
			</div>
 
		</div>
 
		<div class="blok">
 
			<h2>Pengalaman Kerja</h2>
			
			<div>
				<ul>
					<li>
						<b>2017 - 2019</b> - <i>Back-End Developer</i> - di Di PT. Teknologi Indonesia
					</li>
					<li>
						<b>2020 - Now</b> - <i> Software Engineer</i> - di Di SMPN 2 Godean
					</li>
				</ul>
			</div>
 
		</div>
 
		<div class="blok">
 
			<h2>Keahlian</h2>			
			
			<div>
				<ul>
					<li>HTML</li>
					<li>CSS</li>
					<li>JavaScript</li>
					<li>PHP</li>
						
				</ul>
			</div>
 
		</div>
	</div>
</body>
</html>



maka hasilnya akan seperti ini :

4. Membuat halaman galeri

Buat file baru dengan nama galeri.html

Kemudian tulis kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeri Foto dan Video</title>
    <style>
        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 2rem;
            font-weight: bold;
        }

        .container {
            padding: 30px;
            width: 90%;
            margin: 0 auto;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        /* Grid Layout for Gallery */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        /* Photo and Video Styling */
        .gallery-item {
            background-color: #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .gallery-item img, .gallery-item video {
            width: 100%;
            height: auto;
            display: block;
        }

        .gallery-item video {
            border-radius: 8px;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        /* Overlay Effect for Hover */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
            text-align: center;
            padding: 10px;
        }

        .overlay h3 {
            font-size: 1.5rem;
            margin: 0;
        }

        footer {
            text-align: center;
            background-color: #333;
            color: white;
            padding: 10px 0;
            margin-top: 40px;
        }

    </style>
</head>
<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
       
    </nav>
    <header>
        <h1>Galeri Foto dan Video</h1>
    </header>

    <div class="container">
        <h2>Jelajahi Koleksi Saya</h2>

        <!-- Galeri Grid -->
        <div class="gallery">
            <!-- Foto 1 -->
            <div class="gallery-item">
                <img src="image/roy.jpg" alt="Foto 1">
                <div class="overlay">
                    <h3>Foto 1</h3>
                </div>
            </div>
            <!-- Foto 2 -->
            <div class="gallery-item">
                <img src="image/ronaldo.jpg" alt="Foto 2">
                <div class="overlay">
                    <h3>Foto 2</h3>
                </div>
            </div>
            <!-- Video 1 -->
            <div class="gallery-item">
                <iframe width="420" height="315"
                    src="https://youtu.be/T_3h_TIJA64?si=1th7rY1AfiMduva6?controls=0">
                 </iframe>    
               
                <div class="overlay">
                    <h3>Video 1</h3>
                </div>
            </div>
            <!-- Foto 3 -->
            <div class="gallery-item">
                <img src="image/eric.jpg" alt="Foto 3">
                <div class="overlay">
                    <h3>Foto 3</h3>
                </div>
            </div>
            <!-- Video 2 -->
            <div class="gallery-item">
                <iframe width="420" height="315"
                src="https://youtu.be/BiWafKt68eI?si=wR2Oh7s9ivZo2RTx?controls=0">
             </iframe> 
                <div class="overlay">
                    <h3>Video 2</h3>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; exsan | 2025</p>
    </footer>

</body>
</html>

maka hasilnya akan seperti ini :

5. Membuat halaman kontak

berikutnya membuat halaman kontak, sama seperti sebelum2nya buat file baru dengan nama contact.html

tulis kode seperti berikut :

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contactme</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
        
    </nav>

    <hr />

    <div>
        <h1>Contact Me</h1>
        <form>
            <label for="email">Email</label><br />
            <input type="email" name="email" placeholder="alamat email"/>
            <br />
            <label for="message">Pesan</label><br />
            <textarea name="message" placeholder="Tulis pesan anda..." rows="4" cols="80"></textarea>
            <br />
            <br />
            <input type="submit" value="Kirim" />
        </form>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; XSN 2025.</p>
    </footer>
</body>
</html>

Hasilnya :

Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data.

Pre Test

Tinggalkan Balasan

Buatlah halaman web sederhana seperti berikut ini :

  1. gunakan pemformatan teks
  2. Warna dan font bebas


<!DOCTYPE html>
<html lang=”en”>

<HEAD>
<TITLE>pretest</TITLE>
</HEAD>
<BODY BGCOLOR=”lime” TEXT=”maroon”>
<font face=”algerian”> <B> Konsep Dasar Apa itu HTML </B> </font><br>
Sebelum belajar <i> HTML </i> dasar, kamu harus tahu apa itu <i> HTML </i>. <br>
Jadi, <i>HTML</i> yang merupakan singkatan dari <U> Hypertext Markup Language </U> <br>
adalah bahasa markup yang mendefinisikan <B><I><U>struktur dasar halaman website</B></I></U>. <br>

<p> <font color=”blue”> Nama dan kelas : …………… , </font> </p>

</BODY>
</html>

Membuat Tabel di HTML

Tinggalkan Balasan

Tabel terdiri dari 4 unsur utama:
Baris
Kolom
Sel
Garis
 
Berikut beberapa tag yang digunakan untuk membuat tabel di HTML:
 
Tag <table> untuk membungkus tabelnya
Tag <thead> untuk membungkus bagian kepala tabel
Tag <tbody> untuk membungkus bagian body dari tabel
Tag <tr> (table row) untuk membuat baris
Tag <td> (table data) untuk membuat sel
Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Baris

Kolom

Sel

Garis

Berikut beberapa tag yang digunakan untuk membuat tabel di HTML:

Tag <table> untuk membungkus tabelnya

Tag <thead> untuk membungkus bagian kepala tabel

Tag <tbody> untuk membungkus bagian body dari tabel

Tag <tr> (table row) untuk membuat baris

Tag <td> (table data) untuk membuat sel

Mari kita lihat contohnya:

!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Tabel HTML</title>
</head>
<body>
 
    <table>
        <tr>
            <td>Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr>
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>
 
</body>
</html>

 

   

 

     

 

       

Hasilnya :

Pada hasil diatas tidak muncul garisnya, untuk menampilkan garis silakan tambahkan atribut border=”1″ di dalam tag <table>.

Sehingga akan menjadi seperti ini:

Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada tag <table>.

Contoh:

<table border=”1″ cellpadding=”10″>

        <tr>

            <td>Baris 1 kolom 1</td>

            <td>baris 1 kolom 2</td>

        </tr>

        <tr>

            <td>Baris 2 kolom 1</td>

            <td>baris 2 kolom 2</td>

        </tr>

    </table>

Hasil :

Menambahkan Warna pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Contoh:

<table border=”1″ cellpadding=”10″>

        <tr>

            <td bgcolor=”yellow”>Baris 1 kolom 1</td>

            <td>baris 1 kolom 2</td>

        </tr>

        <tr bgcolor=”#00ff80″>

            <td>Baris 2 kolom 1</td>

            <td>baris 2 kolom 2</td>

        </tr>

    </table>

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.

Maka hasilnya akan seperti ini: