Scribd
Unggah
18 tayangan4 halaman

Materi HTML

Diunggah oleh

fhrzzz122
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
18 tayangan4 halaman

Materi HTML

Diunggah oleh

fhrzzz122
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Materi HTML

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk
membuat dan merancang halaman web. HTML memberikan struktur dasar untuk konten
yang ada di halaman web, seperti teks, gambar, tautan, tabel, dan elemen-elemen lainnya.

1. Struktur Dasar HTML


HTML menggunakan elemen-elemen yang terdiri dari tag pembuka dan tag penutup.
Berikut adalah struktur dasar dari sebuah halaman HTML:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

2. Tag HTML yang Sering Digunakan

- <html>: Tag pembuka untuk elemen HTML.


- <head>: Bagian yang berisi metadata, judul halaman, dan link ke file CSS eksternal.
- <title>: Menampilkan judul halaman di tab browser.
- <body>: Tempat untuk menampilkan konten utama halaman seperti teks, gambar, dll.
- <h1> - <h6>: Tag untuk heading, dengan <h1> adalah yang paling besar dan <h6> adalah
yang paling kecil.
- <p>: Tag untuk paragraf.
- <a href="URL">: Tag untuk membuat tautan/link.
- <img src="URL">: Tag untuk menampilkan gambar.
- <ul>: Tag untuk membuat daftar tak terurut (bullet).
- <ol>: Tag untuk membuat daftar terurut (nomor).
- <li>: Tag untuk item dalam daftar (baik terurut maupun tak terurut).
- <table>: Tag untuk membuat tabel.
- <tr>: Tag untuk baris tabel.
- <th>: Tag untuk header kolom tabel.
- <td>: Tag untuk sel data dalam tabel.
- <form>: Tag untuk membuat form.
- <input>: Tag untuk membuat input form.
3. Atribut HTML
Beberapa tag HTML memiliki atribut untuk memberikan informasi tambahan. Contohnya:

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


- src: Digunakan dalam tag <img> untuk menentukan sumber gambar.
- alt: Digunakan dalam tag <img> untuk memberi deskripsi gambar.
- id: Memberikan identifikasi unik pada elemen.
- class: Memberikan kelas pada elemen untuk penataan dengan CSS.

4. Struktur Dasar Formulir


Formulir adalah bagian penting dari halaman web untuk menerima input pengguna. Berikut
adalah contoh dasar formulir:

<form action="proses.php" method="POST">


<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Kirim">
</form>

5. Penggunaan Tabel
Tabel digunakan untuk menampilkan data dalam format baris dan kolom.

<table>
<tr>
<th>Nama</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jane</td>
<td>[email protected]</td>
</tr>
</table>

6. Pengenalan CSS
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain dan mengatur
tampilan halaman HTML. CSS memungkinkan kita untuk mengontrol tata letak, warna, font,
dan berbagai aspek desain lainnya dari elemen HTML tanpa mengubah struktur HTML itu
sendiri. CSS membantu memisahkan konten dari presentasi, membuat website lebih mudah
dikelola dan lebih fleksibel.

7. Struktur Dasar CSS


CSS dapat ditulis dalam tiga cara:
- Inline CSS: Ditulis langsung dalam atribut style pada tag HTML.
- Internal CSS: Ditulis dalam tag <style> di dalam bagian <head> dari halaman HTML.
- External CSS: Ditulis dalam file terpisah dengan ekstensi .css dan ditautkan ke halaman
HTML menggunakan tag <link>.

8. Selektor CSS
Selektor digunakan untuk memilih elemen HTML yang akan diberi style.

- Selektor Elemen (Tag): Menargetkan semua elemen dari tipe tertentu.


- Selektor ID: Menargetkan elemen dengan atribut id tertentu. ID harus unik dalam satu
halaman.
- Selektor Kelas (Class): Menargetkan elemen yang memiliki atribut class tertentu. Kelas
dapat digunakan berulang kali dalam satu halaman.
- Selektor Atribut: Menargetkan elemen berdasarkan atribut tertentu.

9. Properti CSS Dasar


- Warna: color, background-color
- Font dan Teks: font-family, font-size, font-weight, text-align
- Tata Letak (Layout): width, height, margin, padding, border
- Posisi dan Tampilan: position, display, float, clear

10. CSS Flexbox


Flexbox adalah model layout yang memungkinkan kita untuk membuat desain yang
responsif dan fleksibel. Ini sangat berguna untuk mengatur elemen dalam baris atau kolom.

11. CSS Grid


Grid adalah sistem layout dua dimensi yang memungkinkan penataan elemen dalam baris
dan kolom secara lebih kompleks.

12. Animasi dan Transisi


CSS memungkinkan kita untuk menambahkan animasi dan transisi untuk efek interaktif.

- Transisi: Mengubah properti elemen dengan efek yang halus.


- Animasi: Membuat perubahan berulang pada elemen.
13. Media Queries
Media queries digunakan untuk membuat desain responsif yang menyesuaikan tampilan
halaman berdasarkan ukuran layar perangkat.

14. Pseudo-Classes dan Pseudo-Elements


- Pseudo-Classes: :hover, :focus, :active, :first-child
- Pseudo-Elements: ::before, ::after, ::first-letter

15. CSS Variables


CSS variables memungkinkan kita untuk mendefinisikan nilai yang bisa digunakan kembali
di seluruh file CSS.

Anda mungkin juga menyukai