SILAHKAN PRAKTEKAN VIDEO TERSEBUT
VIDEO #1
Pengertian HTML dan Sejarahnya
Hypertext Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web. Sejarah HTML diciptakan oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss.
Versi pertama HTML dirilis oleh Tim Berners Lee pada tahun 1991, yang memiliki 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute (tag modifier) yang juga baru.
Ketika bekerja dengan bahasa markup ini, Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p> dan tag penutup </p>.
Berkat popularitasnya yang terus meningkat, bahasa markup ini kini dianggap sebagai standar web resmi.
Spesifikasi HTML dikelola dan dikembangkan oleh World Wide Web Consortium (W3C). Berdasarkan HTML Element Reference milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun sebagiannya sudah tidak lagi didukung oleh beberapa versi terbaru browser.
Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan diperkenalkannya HTML5, terdapat semantic baru seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam konten.
Nah, setelah Anda tahu apa itu HTML, selanjutnya kami akan membahas cara kerjanya.
Bagaimana Cara Kerja HTML?
Ekstensi file HTML adalah .html atau .htm, yang bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga user internet bisa melihat dan membacanya.
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak memiliki dokumennya sendiri-sendiri.
Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut juga elements), yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat hierarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.
Berikut contoh kode dari susunan atau struktur HTML:
- Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
- Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).
- Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.
- Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar.
Selain itu, beberapa contoh penggunaan umum HTML adalah:
- Pengembangan web. Developer menggunakan kode HTML untuk mendesain tampilan elemen halaman web di browser, seperti teks, hyperlink, dan file media.
- Navigasi internet. Pengguna bisa menelusuri dan menyisipkan link antara halaman dan website terkait karena HTML banyak digunakan untuk menyematkan hyperlink.
- Dokumentasi web. HTML bisa digunakan untuk mengatur dan memformat dokumen, mirip dengan Microsoft Word.
Pengertian Tag HTML dan Fungsinya
Tag HTML memiliki dua tipe utama: block-level dan inline tags.
- Elemen block-level memakai semua ruang yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf.
- Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings.
Tag Block-Level
Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>.
- Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
- Tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman.
- Tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.
- Heading memiliki 6 level. Level tersebut bervariasi, mulai dari <h1></h1> sampai <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.
- Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.
- Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar daftar tidak berurutan dalam HTML:
Tag Inline
Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italic.
Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link:
Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:
Jika ingin mempelajari lebih dalam tentang pengertian tag HTML serta tag HTML dan funsginya, silakan baca artikel cheat sheet kami, lengkap dengan link unduhan dokumen PDF untuk membantu Anda mempelajarinya.
Apa yang Membedakan HTML dengan HTML5?
Sejak pertama diperkenalkan, bahasa ini telah melewati perkembangan yang cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak sejarah dan mengukuhkan keberadaannya.
HTML4 (dikenal sebagai “HTML”) dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014, yaitu HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini.
Salah satu fitur canggih di HTML5 adalah dukungan untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa menyematkan file video dan audio ke halaman website dengan memanfaatkan tag <audio></audio> dan <video></video>. Fitur tersebut juga memiliki dukungan bawaan untuk SVG dan MathML untuk rumus matematika dan ilmiah.
HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang tak hanya bermanfaat bagi pembaca, tapi juga mesin pencari.
Tag semantic yang paling banyak digunakan adalah <article></article>, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>. Jika ingin mempelajari lebih lanjut, silakan baca artikel kami tentang perbedaan HTML dan HTML5.
Kelebihan dan Kekurangan HTML
Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya.
Berikut kelebihan HTML:
- Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
- Dijalankan secara alami di setiap web browser.
- Mudah dipelajari.
- Open-source dan sepenuhnya gratis.
- Rapi dan konsisten.
- Menjadi standar resmi web, dikelola oleh (W3C).
- Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.
Kemudian, kekurangan HTML adalah:
- Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
- Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
- Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.
- Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru.
Hubungan HTML, CSS, dan JavaScript
Meskipun dinyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa digunakan untuk menambah elemen dan membuat struktur konten.
Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan memberikan fungsi yang lebih canggih.
- CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi.
- JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto.
Jika digambarkan, berikut perbedaan HTML dan CSS dan JavaScript: HTML adalah orang yang tidak mengenakan busana apa pun, kemudian CSS adalah bajunya, kemudian JavaScript adalah aktivitas dan sikap orang tersebut.
Jadi, HTML Adalah…
Sampai di sini, Anda sudah mempelajari apa itu HTML, pengertiannya, dan cara kerjanya.
HTML adalah bahasa markup, bukan bahasa pemrograman, dan tidak memiliki kemampuan untuk membuat fungsionalitas yang dinamis. Dengan bahasa markup ini, user bisa mengelola dan memformat dokumen secara statis, sama seperti Microsoft Word.
Berdasarkan cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web (menggunakan coding sederhana).
HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa Anda tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript.
HTML (Hypertext Markup Language) adalah bahasa markah standar untuk membuat dan merancang halaman web. Berikut adalah beberapa hal yang dapat Anda lakukan dengan HTML:
1. **Menentukan Struktur Halaman:**
- Menggunakan elemen seperti `<html>`, `<head>`, dan `<body>` untuk menentukan struktur dasar halaman web.
2. **Menambahkan Teks:**
- Menampilkan teks dengan menggunakan elemen seperti `<p>` (paragraf), `<h1>` hingga `<h6>` (heading), dan `<span>`.
3. **Menambahkan Gambar:**
- Menyematkan gambar ke halaman menggunakan elemen `<img>`.
4. **Membuat Tautan:**
- Membuat tautan ke halaman lain menggunakan elemen `<a>` (anchor).
5. **Membuat Daftar:**
- Membuat daftar dengan menggunakan elemen `<ul>` (unordered list) atau `<ol>` (ordered list), serta `<li>` (list item).
6. **Menentukan Formulir:**
- Membuat formulir untuk mengumpulkan data dari pengguna menggunakan elemen `<form>`, `<input>`, `<select>`, `<textarea>`, dan lainnya.
7. **Menggunakan Elemen Semantik:**
- Menentukan makna dan struktur konten menggunakan elemen semantik seperti `<header>`, `<nav>`, `<article>`, `<section>`, `<footer>`, dll.
8. **Menambahkan Audio dan Video:**
- Menyematkan file audio dan video menggunakan elemen `<audio>` dan `<video>`.
9. **Menggunakan Tabel:**
- Membuat dan menata tabel dengan elemen `<table>`, `<tr>` (baris), `<th>` (sel header), dan `<td>` (sel data).
10. **Menambahkan Stil dengan CSS:**
- Menambahkan gaya dan tata letak ke halaman menggunakan CSS (Cascading Style Sheets).
11. **Menyematkan Script dengan JavaScript:**
- Menambahkan fungsionalitas dinamis ke halaman menggunakan JavaScript.
12. **Menyematkan Font dan Ikon:**
- Menggunakan elemen `<link>` untuk menyematkan font atau ikon dari sumber eksternal.
13. **Aksesibilitas:**
- Meningkatkan aksesibilitas menggunakan atribut `alt` pada elemen `<img>`, serta menyediakan struktur semantik.
14. **Membuat Halaman Responsif:**
- Menyesuaikan tata letak halaman agar dapat menanggapi perangkat dengan berbagai ukuran layar menggunakan CSS dan media queries.
15. **Menggunakan Elemen Canvas:**
- Membuat grafika dan gambar dinamis menggunakan elemen `<canvas>` dan JavaScript.
16. **Menggunakan SVG (Scalable Vector Graphics):**
- Menambahkan grafika vektor skalar ke halaman web menggunakan elemen `<svg>`.
17. **Menggunakan Metadata:**
- Menambahkan informasi metadata ke halaman menggunakan elemen seperti `<meta>`.
18. **Menanggapi Peristiwa (Event):**
- Menanggapi interaksi pengguna dengan halaman menggunakan JavaScript dan menanganinya melalui event.
Ini hanya beberapa contoh fungsionalitas dasar yang dapat Anda lakukan dengan HTML. Kombinasikan HTML dengan CSS dan JavaScript untuk membuat halaman web yang dinamis, menarik, dan responsif.
no nama siswa projek
1. ibnu 1,2,3
2. farel 1,3
3. nisa 1, 3
4 . hilmansyah 1
5. ana 1, 2, 3
6. M. refai 1,2,3
7. naura 1 ,2,3
8. keysa 1,2,3
9. cika 1
10. nabila 1
11. zalfa 1
12. siti kamila 1,
PROJECK WARNA
Anda dapat memberikan warna pada elemen HTML menggunakan properti CSS. Ada beberapa cara untuk menentukan warna, dan berikut adalah beberapa contoh:
### 1. **Menggunakan Nama Warna:**
Anda dapat menggunakan nama warna seperti "red", "blue", "green", dll. Contoh:
```html
<p style="color: red;">Ini adalah teks berwarna merah.</p>
```
### 2. **Menggunakan Kode Warna HEX:**
Anda juga dapat menggunakan kode warna HEX. Contoh:
```html
<p style="color: #ff0000;">Ini adalah teks berwarna merah.</p>
```
### 3. **Menggunakan Kode Warna RGB:**
Gunakan kode warna RGB. Contoh:
```html
<p style="color: rgb(255, 0, 0);">Ini adalah teks berwarna merah.</p>
```
### 4. **Menggunakan Kombinasi Warna:**
Beberapa properti CSS, seperti `background-color`, dapat digunakan untuk memberikan warna latar belakang elemen. Contoh:
```html
<div style="background-color: #3498db; color: #ffffff;">
Ini adalah teks pada latar belakang biru tua.
</div>
```
### 5. **Menggunakan Kelas atau ID CSS:**
Juga, Anda dapat menentukan warna melalui file CSS terpisah dengan menggunakan kelas atau ID pada elemen HTML. Contoh:
HTML:
```html
<p class="warna-merah">Ini adalah teks berwarna merah.</p>
```
CSS (dalam file terpisah atau dalam tag `<style>` di dalam tag `<head>`):
```css
.warna-merah {
color: red;
}
```
17/11/2023
buatkan ppt tema html dan siap di presentasikan dengan judul
gunakan APK https://gamma.app untuk membuat ppt
1.cara menambahkan warna pada html <ibnu>
2.memberi warna dengan kode hex <farel>
3.menggunakan kode warna rgb <nisa>
4.menggunakan kombinasi warna <hilmansyah>
5.menggunakan kelas atau id css<ana>
6.menentukan struktur halaman <refai>
7.menambahkan text <naura>
8.cara menambahkan gambar <keysa>
9.membuat tautan <cika>
10.membuat daftar menggunakan elment <nabila>
11. menentukan formulir <zalfa>
12. menambahkan audio dan video <siti kamelia>
Pastikan untuk menyesuaikan warna dan metode yang Anda pilih sesuai dengan kebutuhan desain dan preferensi Anda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<form>
<h2>Formulir Pendaftaran</h2>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Daftar</button>
</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Tabel HTML</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Contoh Tabel HTML</h2>
<table>
<thead>
<tr>
<th>waktu</th>
<th>tegangan</th>
<th>Kondisi lingkungan </th>
</tr>
</thead>
<tbody>
<tr>
<td>09.00</td>
<td>12 volt</td>
<td>cerah</td>
</tr>
<tr>
<td>10.00</td>
<td>13 volt</td>
<td>Berawan</td>
</tr>
<tr>
<td>11.00</td>
<td>14 volt</td>
<td>Berawan</td>
</tr>
</tbody>
</table>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
Kode yang Anda berikan adalah bagian dari dokumen HTML, yang merupakan bahasa markup yang digunakan untuk membuat halaman web. Berikut adalah penjelasan dari masing-masing bagian kode tersebut:
1. `<!DOCTYPE html>`: Ini adalah deklarasi tipe dokumen (DOCTYPE) yang memberi tahu browser bahwa dokumen ini adalah dokumen HTML5. Ini adalah versi terbaru dari HTML dan sangat umum digunakan.
2. `<html lang="en">`: Tag `<html>` adalah elemen root dari dokumen HTML. Semua elemen HTML lainnya ditempatkan di dalam tag ini. Atribut `lang="en"` menunjukkan bahwa bahasa utama yang digunakan dalam dokumen ini adalah bahasa Inggris (en).
3. `<head>`: Tag `<head>` mengandung meta-informasi tentang dokumen HTML, seperti judul halaman, link ke file CSS, skrip, dan informasi lain yang tidak terlihat langsung oleh pengguna tetapi penting untuk pengaturan halaman.
Berikut adalah penjelasan dari kode HTML yang Anda berikan:
1. `<meta charset="UTF-8">`: Tag ini mendefinisikan set karakter yang digunakan dalam dokumen HTML. `UTF-8` adalah standar pengkodean karakter yang mendukung hampir semua karakter dari semua bahasa yang digunakan di dunia. Ini memastikan bahwa teks dalam dokumen Anda akan ditampilkan dengan benar di semua perangkat.
2. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Tag ini digunakan untuk mengontrol tampilan dan skala halaman web di perangkat seluler. Atribut `width=device-width` mengatur lebar viewport agar sesuai dengan lebar layar perangkat. `initial-scale=1.0` menetapkan tingkat zoom awal saat halaman pertama kali dimuat, sehingga halaman tidak akan di-zoom secara otomatis oleh browser.
3. `<title>Contoh Tabel HTML</title>`: Tag `<title>` menetapkan judul halaman yang akan muncul di tab browser atau di judul jendela browser. Dalam contoh ini, judul halaman adalah "Contoh Tabel HTML".
4. `<style>`: Tag `<style>` digunakan untuk menulis CSS (Cascading Style Sheets) di dalam dokumen HTML. CSS adalah bahasa yang digunakan untuk mendesain dan mengatur tampilan elemen HTML, seperti warna, font, dan tata letak. Kode CSS yang ditulis di dalam tag `<style>` akan diterapkan langsung ke elemen-elemen di halaman web.
SUDAH
BalasHapus1,M ANANDA RAFEI
2.FAREL
3.IBNU
4.ANALAILI
5.KHAIRUNISA
6.HILMANSYAH
oto 2
BalasHapus1.danny
2.rizki dwi
3.arfan
4.amri