Web Programming Basic
  • Pengenalan HTML
  • Pengenalan CSS
  • Tugas Pembelajaran CSS
  • Pengenalan Javascript Dan Dom
  • Membuat Halmaan Login
  • Membuat Halaman Dashboard
  • Pembelajaran Framework Bootstrap
  • Membuat tampilan login dengan framework bootstrap
  • Membuat Tampilan Dashboard Dengan Bootstrap
  • Membuat Tampilan Portofolio diri
  • Evaluasi Dan Pembuatan Akun Linkedin
  • Exam
Powered by GitBook
On this page

Pengenalan HTML

Tema: CRUD dan Upload File

Pendahuluan

  • Target Peserta: Pemula hingga menengah dalam pemrograman web.

  • Prerequisite: Peserta memiliki dasar pemahaman HTML, CSS, dan PHP.

  • Tujuan: Membekali peserta dengan kemampuan membangun aplikasi web sederhana menggunakan PHP Native, Tailwind CSS, dan JavaScript.

Pertemuan 1: Pengantar dan Persiapan

1.1. Persiapan Lingkungan

  • Instalasi XAMPP: Unduh dan install XAMPP.

  • Setup Project Folder:

    1. Buka folder htdocs di XAMPP (C:\xampp\htdocs).

    2. Buat folder baru bernama web_crud.

  • Struktur Dasar Dokumen HTML

    Setiap dokumen HTML dimulai dengan struktur dasar berikut:

    <!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di HTML!</h1>
</body>
</html>

    • <!DOCTYPE html>: Mendefinisikan dokumen sebagai HTML5.

    • <html>: Elemen root dari dokumen HTML.

    • <head>: Berisi informasi meta, link ke stylesheet, atau script eksternal.

    • <title>: Menentukan judul halaman yang muncul di tab browser.

    • <body>: Berisi konten utama yang ditampilkan di halaman web.

Heading

Elemen heading digunakan untuk judul atau subjudul. Tersedia dalam enam level, dari <h1> (yang terbesar) hingga <h6> (yang terkecil).

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

Paragraf

Elemen paragraf digunakan untuk menampilkan teks:

<p>Ini adalah sebuah paragraf.</p>

Tautan (Link)

Elemen <a> digunakan untuk membuat hyperlink:

<a href="https://www.example.com">Kunjungi Website</a>

  • Atribut href menentukan URL tujuan.

Gambar

Elemen <img> digunakan untuk menampilkan gambar:

<img src="gambar.jpg" alt="Deskripsi Gambar" width="300">

  • src: Sumber gambar.

  • alt: Teks alternatif jika gambar tidak ditampilkan.

  • width: Lebar gambar dalam piksel.

Daftar

  • Daftar Tidak Berurutan (Unordered List):

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

  • Daftar Berurutan (Ordered List):

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Tabel

Tabel digunakan untuk menampilkan data dalam bentuk grid.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Usia</th>
    </tr>
    <tr>
        <td>Ani</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>30</td>
    </tr>
</table>

  • <table>: Membuat tabel.

  • <tr>: Baris tabel.

  • <th>: Header tabel.

  • <td>: Sel data.

Elemen Formulir

  • <form>: Digunakan untuk membuat formulir.

  • <input>: Digunakan untuk berbagai jenis input (misalnya teks, tombol, checkbox).

  • <label>: Digunakan untuk memberi label pada elemen input.

  • <textarea>: Digunakan untuk input berupa teks panjang.

  • <button>: Digunakan untuk membuat tombol.

    <form action="/submit">
    <label for="name">Nama:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="message">Pesan:</label>
    <textarea id="message" name="message"></textarea><br><br>
    
    <button type="submit">Kirim</button>
</form>

Elemen Teks

  • <h1> hingga <h6>: Digunakan untuk membuat judul dengan berbagai tingkat. <h1> adalah yang paling besar dan penting, sementara <h6> adalah yang paling kecil.

    <h1>Judul Utama</h1>
<h2>Judul Sub</h2>

  • <p>: Digunakan untuk membuat paragraf.

    <p>Ini adalah paragraf pertama saya.</p>

  • <br>: Digunakan untuk membuat baris baru (break).

    Ini baris pertama.<br>Ini baris kedua.

  • <strong>: Memberikan penekanan pada teks dengan membuatnya tebal (bold).

    <strong>Penting!</strong>

  • <em>: Memberikan penekanan dengan membuat teks miring (italic).

    <em>Italics</em>

Atribut dalam HTML

Atribut digunakan untuk memberikan informasi tambahan pada elemen HTML. Berikut adalah beberapa atribut yang sering digunakan:

  • id: Memberikan identifikasi unik pada elemen.

    <h1 id="judul-utama">Selamat Datang</h1>

  • class: Digunakan untuk memberikan kelas atau grup untuk styling CSS atau JavaScript.

    <p class="teks-penting">Ini adalah teks penting.</p>

  • src: Digunakan untuk menentukan sumber gambar (untuk elemen <img>).

    <img src="logo.png" alt="Logo">

  • href: Digunakan untuk menentukan URL dalam tag <a>.

    <a href="https://www.example.com">Kunjungi Website</a>

  • alt: Memberikan teks alternatif untuk elemen gambar.

    <img src="gambar.jpg" alt="Deskripsi Gambar">

  • type: Digunakan untuk menentukan tipe input (misalnya dalam <input>).

    <input type="text">
<input type="password">

  • placeholder: Memberikan teks petunjuk di dalam input.

    <input type="text" placeholder="Masukkan nama Anda"
NextPengenalan CSS

Last updated 4 months ago