HTML adalah dasar dari pembangunan sebuah <b>web</b>. Sebelum Anda mempelajari bahasa pemrograman atau teknologi web lainnya, pemahaman dasar HTML sangat diperlukan, bahkan harus hukumnya 🤣. HTML Ini adalah fondasi yang diperlukan untuk memahami cara struktur dan tata letak halaman web dibangun.

## 1. Apa itu HTML?

HTML (Hypertext Markup Language) adalah bahasa markah yang digunakan untuk membuat struktur dasar halaman web. HTML memberikan dasar untuk menyusun dan memformat konten di web, seperti <b>teks, gambar, tautan, formulir, dan elemen-elemen lainnya</b>. Dengan menggunakan tag dan atribut HTML, Anda dapat mengatur bagaimana konten tersebut ditampilkan dan diorganisir di dalam browser.

Sampai saat ini, HTML telah mencapai versi 5 yang penuh dengan fitur keren! Salah satu fitur HTML5
adalah kemampuan untuk membuat streaming video tanpa perlu bantuan Adobe Flash.

Jadi, intinya adalah HTML adalah fondasi utama dalam pembuatan sebuah website. Untuk menjalankan file HTML, cukup gunakan web browser favorit Anda dan pastikan file HTML disimpan dengan ekstensi `.html`.

## 2. Text Editor untuk belajar HTML

Sebelum kita mulai menulis kode HTML, yang Anda butuhkan hanyalah sebuah <b>text editor</b> dan **browser**. Anda bisa memulai perjalanan ke dunia pemrograman web dengan hanya dua alat sederhana ini.

Oke jadi kalian bisa _install_ salah satu text editor dibawah ini:

**Text Editor:**
**1.Visual Studio Code (Rekomendasi)**
2.Sublime Text
3.Notepad++

Untuk **Web Browser** sendiri kalian bebas mau menggunakan apa saja, karena browser ini berguna untuk menjalankan/melihat kode HTML tersebut.

## 3. Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang harus diikuti. Ini termasuk elemen-elemen seperti `<html>`, `<head>`, dan `<body>`. Mari kita bahas secara singkat:

👉`<html>`: Ini adalah elemen utama yang mengelilingi seluruh konten HTML.
👉`<head>`: Bagian ini berisi informasi tentang dokumen, seperti judul halaman dan tautan ke file eksternal (misalnya, CSS atau JavaScript).
👉`<body>`: Ini adalah tempat di mana konten utama halaman web, seperti teks, gambar, dan tautan, ditempatkan.

**Gambaran Struktur HTML:**

![strukturhtml.png](https://res.cloudinary.com/developerpemula/image/upload/c_scale,w_400/co_rgb:808080,l_text:Verdana_50_bold_letter_spacing_10:developer%20pemula/a_-45/o_50/e_anti_removal,fl_layer_apply.tiled,g_center/v1700965047/developerpemula/assets/strujtur_html_ysavkb.png)

Untuk penulisan codenya seperti berikut:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Judul Halaman WEB</title>
  </head>
  <body>
    

    <h1>Selamat datang di halaman web developer pemula!</h1>
    <p>Ini adalah paragraf pertama cuyyy.</p>

    
  </body>
</html>
```

Penjelasan elemen-elemen pada code tersebut:

- `<!DOCTYPE html>`: Deklarasi tipe dokumen (Document Type Declaration). Ini memberitahu browser bahwa halaman web ini ditulis menggunakan standar HTML terbaru.
- `<html lang="en">`: Elemen `<html>` merupakan elemen root yang mengelilingi seluruh konten halaman web. Atribut lang digunakan untuk menentukan bahasa halaman web.
- `<head>`: Elemen `<head>` berisi informasi meta tentang dokumen, seperti karakter set yang digunakan, viewport untuk responsif design, dan judul halaman.
- `<meta charset="UTF-8">`: Mendefinisikan karakter set yang digunakan oleh halaman web. UTF-8 adalah karakter set yang umum digunakan untuk mendukung berbagai karakter dari berbagai bahasa.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Mengatur tampilan halaman web agar responsif terhadap berbagai lebar layar perangkat.
- `<title>Judul Halaman</title>`: Elemen `<title>` menentukan judul halaman yang akan ditampilkan di tab browser.
- `<body>`: Elemen `<body>` berisi seluruh konten halaman web, seperti teks, gambar, tautan, dan elemen-elemen lainnya.
- Komentar HTML: ``. Komentar digunakan untuk memberikan catatan atau keterangan di dalam kode HTML. Komentar tidak akan ditampilkan di halaman web.
- Elemen HTML lainnya: Dalam elemen `<body>`, Anda dapat menambahkan berbagai elemen HTML seperti heading `<h1>`, `<h2>`, dll., paragraf `<p>`, gambar `<img>`, tautan `<a>`, formulir `<form>`, dan lainnya sesuai dengan kebutuhan halaman web Anda.

## 4. Penggunaan Tag dan Atribut

Dalam HTML, Anda menggunakan tag untuk mengelilingi konten
dan memberikan instruksi pada browser tentang bagaimana
konten tersebut harus ditampilkan.

**Contoh tag dasar:**

tag `<p>` untuk paragraf dan `<img>` untuk gambar.
Atribut, di sisi lain, memberikan informasi tambahan tentang
elemen HTML. Misalnya, atribut src pada tag `<img>` digunakan
untuk menentukan lokasi gambar.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contoh Halaman HTML</title>
  </head>
  <body>
    <h1>Selamat Datang di Developer Pemula</h1>

    <p>Ini adalah contoh paragraf dalam HTML.</p>

    <img src="lokasi_gambar.jpg" alt="Deskripsi gambar" />
  </body>
</html>
```

## 5. Penjelasan dasar tentang Elemen, Tag, dan Konten

Dalam konteks HTML, elemen, tag, dan konten adalah konsep dasar yang membentuk struktur dan konten dari halaman web.

### 5.1 Elemen

Elemen adalah unit dasar dalam HTML yang terdiri dari tag, konten, dan kadang-kadang atribut. Setiap elemen dimulai dengan tag pembuka `<tag>` dan diakhiri dengan tag penutup `</tag>`, kecuali untuk elemen-elemen yang bersifat mandiri (self-closing), seperti tag gambar `<img>`.

Contoh elemen:

```html
<p>Ini adalah sebuah elemen paragraf.</p>
<img src="gambar.jpg" alt="Deskripsi gambar" />
<a href="https://www.contoh.com">Tautan ke Contoh</a>
```

### 5.2 Tag

Tag adalah bagian dari elemen yang memberi tahu browser cara merender atau menampilkan kontennya. Tag terdiri dari nama tag yang ditempatkan di dalam tanda kurung sudut (angle brackets). Ada tag pembuka dan tag penutup, kecuali untuk elemen-elemen yang bersifat mandiri yang hanya memiliki tag pembuka.

Contoh tag:

```html
<p>Ini adalah sebuah elemen paragraf.</p>
<img src="gambar.jpg" alt="Deskripsi gambar" />
<a href="https://www.contoh.com">Tautan ke Contoh</a>
```

Dalam contoh di atas, `<p>`, `<img>`, dan `<a`> adalah tag pembuka, sedangkan `</p>`, `/>`, dan `</a>` adalah tag penutup.

### 5.3 Konten

Konten adalah isi atau data yang ditempatkan di dalam elemen HTML. Konten dapat berupa teks, gambar, tautan, atau elemen HTML lainnya.

Contoh konten:

```html
<p>Ini adalah sebuah elemen paragraf.</p>
<img src="gambar.jpg" alt="Deskripsi gambar" />
<a href="https://www.contoh.com">Tautan ke Contoh</a>
```

Dalam contoh di atas, "Ini adalah sebuah elemen paragraf.", "gambar.jpg", "Deskripsi gambar", dan "Tautan ke Contoh" adalah konten dari masing-masing elemen.

**Gambar Ilustrasi elemen, tag, konten**

![tag-html-konten.png](https://res.cloudinary.com/developerpemula/image/upload/c_scale,w_500/c_limit,co_rgb:808080,h_112,l_text:Verdana_50_bold_letter_spacing_10:developerpemula,o_33,w_162/a_-45/o_50/e_anti_removal,fl_layer_apply.tiled,g_center/v1700970113/developerpemula/assets/elemen-tag-konten_bpod0a.png)

**Catatan:** Tidak semua elemen HTML memiliki tag penutup seperti: `<meta>` `<img>` `<src>`

Dengan konsep elemen, tag, dan konten, Anda dapat membangun struktur halaman web dengan menggunakan bahasa markah HTML. Setiap elemen HTML memberikan peran dan fungsi tertentu dalam menentukan struktur dan tampilan halaman web.

Oke mungkin, sampai disini dulu tutorial pada bagian pertama ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.

Pelajari dasar-dasar HTML dengan tutorial ini yang dirancang khusus untuk pemula. Mulai dari pengenalan HTML, Anda akan belajar tentang elemen, tag, dan konten, serta cara membangun struktur dasar halaman web.

Belajar HTML untuk Pemula: Pengenalan HTML

Seperti yang telah dibahas secara singkat pada tutorial HTML bagian pertama, Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML.

## 1. Tag HTML

Tag HTML adalah instruksi yang memberi tahu browser bagaimana menampilkan konten pada halaman web. Tag selalu dimulai dengan tanda kurung sudut `<` dan diakhiri dengan tanda kurung sudut terbalik `>`. Sebagian besar tag memiliki tag pembuka dan tag penutup untuk menandai awal dan akhir elemen.

Awalnya HTML cuma punya 18 tag. Sekarang HTML sudah punya sekitar 250 tag.

Apakah semua tag ini harus kita hafal?

Tentu tidak perlu, cukup ketahui tag-tag dasar saja.

Berikut ini daftar tag-tag dasar, yang menurut saya harus kamu ingat.

contoh tag:

- 👉`<html>` untuk memulai dokumen HTML.
- 👉`<p>` untuk paragraf.
- 👉`<h1>` hingga `<h6>` untuk heading
- 👉`<a>` untuk membuat tautan atau hyperlink.
- 👉`<head>` Bagian ini berisi informasi tentang dokumen, seperti judul halaman dan tautan ke file eksternal misalnya, CSS atau JavaScript).
- 👉`<body>` Ini adalah tempat di mana konten utama halaman web, seperti teks, gambar, dan tautan, ditempatkan. Apa pun yang Anda ingin tampilkan di halaman web Anda, biasanya akan berada didalam elemen `<body>`
dan masih banyak lagi tag html lainnya.

**Tag pembuka dan penutup:** 
**Konsep dasar dalam menandai elemen HTML:**
- 👉Tag pembuka dimulai dengan `<` diikuti oleh nama tag dan diakhiri dengan `>`. 
**Contoh: `<p>`.**
- 👉Tag penutup mirip dengan tag pembuka, tetapi memiliki garis miring sebelum nama tag. 
**Contoh: `</p>`.**
- 👉Beberapa tag bersifat mandiri dan tidak memiliki tag penutup, seperti tag gambar: `<img src="gambar.jpg" alt="Deskripsi gambar">`.

## 2. Elemen HTML

Element adalah isi atau objek yang berada di antara tag pembuka dan tag penutup. Setiap elemen HTML didefinisikan oleh satu atau lebih tag, yang mengelilingi dan menandai bagian tertentu dari konten. Elemen dapat berupa teks, gambar, tautan, atau elemen lainnya, dan setiap elemen memiliki fungsi dan tampilan yang berbeda tergantung pada jenisnya.

Berikut adalah beberapa contoh elemen HTML beserta penjelasan singkat tentang fungsinya:

- 👉`<html>`: Ini adalah elemen utama yang mengelilingi seluruh konten HTML.

```html
<html>
    
</html>
```
- 👉`<head>`: Bagian ini berisi informasi tentang dokumen, seperti judul halaman dan tautan ke file eksternal (misalnya, CSS atau JavaScript).
```html
<head>
    
</head>
```
- 👉`<body>`: Ini adalah tempat di mana konten utama halaman web, seperti teks, gambar, dan tautan, ditempatkan
```html
<body>
    
</body>
``` 
- 👉`<div>`: Elemen blok yang digunakan untuk mengelompokkan dan menyusun konten
- 👉`<span>`: Elemen inline yang digunakan untuk memberikan gaya atau manipulasi kecil pada teks.
```html
<div>
    
</div>

<p>Ini adalah <span>teks</span> dengan elemen span.</p>
``` 

Itu hanya beberapa contoh elemen HTML. Setiap elemen memiliki peran dan fungsi khusus dalam membentuk struktur dan tampilan halaman web.
## 3. Atribut HTML

Atribut HTML adalah informasi tambahan yang diberikan kepada elemen HTML untuk mengonfigurasi atau menentukan perilaku elemen tersebut. Atribut selalu terdapat di dalam tag dan memberikan informasi tambahan dalam bentuk pasangan nama-nilai (name-value pair). Atribut memberikan instruksi tambahan, seperti warna, ukuran, atau tautan. Beberapa atribut bersifat opsional, sementara yang lainnya wajib ada tergantung pada jenis elemen dan kebutuhan penggunaannya.

**Contoh:**
```html
<h1 align="center">Ini h1</h1>
``` 
- align="center":
- 👉 Nama Atribut: align
- 👉 Nilai Atribut: "center"
- 👉 **Penjelasan:** Atribut align digunakan untuk mengatur tata letak elemen. Dalam contoh ini, atribut ini digunakan untuk mengatur elemen `<h1>` agar terletak di tengah (center) halaman web.


Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.

Pelajari dasar HTML untuk pemula: Tag, Elemen, dan Atribut. Temukan konsep-konsep kunci dalam struktur halaman web. Tutorial singkat dan praktis untuk memulai pengembangan web Anda.

Belajar HTML untuk Pemula: Mengenal Tag, Elemen, dan Atribut

HTML (Hypertext Markup Language) memungkinkan Anda untuk membuat dan menyusun berbagai elemen, termasuk paragraf, untuk merancang halaman web. Pada tutorial ini, kita akan fokus pada cara membuat paragraf dalam HTML.

## 1. Mengapa Paragraf Penting

Paragraf merupakan elemen dasar dalam penyusunan teks pada halaman web. Penggunaan paragraf mempermudah pembaca dalam memahami dan mengikuti konten. Dengan menggunakan tag `<p>`, kita dapat membuat paragraf dengan mudah.
## 2. Struktur Dasar Paragraf HTML

Untuk membuat paragraf, kita menggunakan tag `<p>` di sekitar teks yang ingin dijadikan paragraf. Berikut contoh sederhana:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
      <p>Ini adalah paragraf pertama.</p>
      <p>Ini adalah paragraf kedua.</p>
  </body>
</html>
```

**Output:**

![tag-p.png](https://res.cloudinary.com/developerpemula/image/upload/v1701059070/developerpemula/assets/tag-p_pzawh8.png)

Dalam contoh di atas, setiap paragraf dibungkus oleh tag `<p>` yang memberi tahu browser bahwa ini adalah teks yang membentuk satu paragraf.

## 3. Atribut untuk Paragraf

Paragraf dalam HTML tidak memiliki atribut khusus yang wajib, namun ada beberapa atribut opsional yang dapat digunakan sesuai kebutuhan. Beberapa atribut umum yang dapat diterapkan pada tag `<p>` antara lain:

1. `style`: Digunakan untuk menyematkan aturan gaya langsung pada elemen HTML. Meskipun lebih umum untuk menggunakan CSS eksternal atau internal, `style` dapat digunakan untuk memberikan gaya langsung pada elemen tersebut.

Contoh:

```html
<p style="font-size: 16px; color: #333;">Paragraf dengan gaya langsung.</p>
```
2. `title`: Memberikan informasi tambahan ketika mouse diarahkan ke elemen tersebut. Ini akan menampilkan tooltip dengan teks yang diberikan.

Contoh:

```html
<p title="Informasi tambahan">Sentuh dengan mouse untuk melihat informasi tambahan.</p>
```

Ingatlah bahwa penggunaan atribut ini tergantung pada kebutuhan dan konteks spesifik dari halaman web yang Anda kembangkan. 

Dengan dasar-dasar membuat paragraf dalam HTML, Anda dapat mulai membangun struktur dasar halaman web Anda dengan lebih baik. Selanjutnya, Anda dapat mengeksplorasi elemen HTML lainnya untuk mengembangkan halaman web yang lebih kompleks.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Pelajari cara membuat paragraf dalam HTML dengan mudah. Tutorial untuk pemula dalam mengembangkan halaman web menggunakan HTML.

Belajar HTML untuk Pemula: Membuat Paragraf dalam HTML

Heading (judul) adalah elemen penting dalam struktur halaman web HTML. Mereka memberikan informasi hierarki tentang konten, membantu pembaca memahami bagaimana informasi disusun. Pada tutorial ini, kita akan mengenal konsep dan penggunaan tag heading dalam HTML.

## 1. Mengapa Heading Penting

Heading membantu dalam:

- **Organisasi Konten:** Menyusun konten agar mudah dipahami dan diikuti.
- **SEO (Search Engine Optimization):** Membantu mesin pencari memahami hierarki informasi halaman web.
- **Aksesibilitas:** Membantu pembaca layar dan pengguna dengan kebutuhan khusus untuk memahami struktur konten.
## 2. Tag Heading HTML

Dalam HTML, kita menggunakan tag `<h1>` hingga `<h6>` untuk membuat heading. Tag tersebut menunjukkan tingkat kepentingan dan hierarki, dengan `<h1>` sebagai heading paling utama dan `<h6>` sebagai yang paling rendah.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
  </body>
</html>
```

**Output:**

![heading.png](https://res.cloudinary.com/developerpemula/image/upload/v1701064096/developerpemula/assets/heading_qjbvhq.png)

### Tingkat Heading

Semakin tinggi angka heading, semakin rendah tingkat kepentingannya. Contoh, `<h1>` memiliki tingkat kepentingan tertinggi, sementara `<h6>` memiliki tingkat kepentingan terendah.

## 3. Menyusun Heading dengan Benar

Penting untuk menggunakan heading secara hierarkis dan logis. Hindari melompati tingkat heading atau menggunakan heading hanya untuk mengatur tampilan visual.

Contoh:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
   <h1>Judul Utama</h1>
  <h2>Bagian 1</h2>
    <h3>Sub-bagian 1.1</h3>
    <h3>Sub-bagian 1.2</h3>
  <h2>Bagian 2</h2>
    <h3>Sub-bagian 2.1</h3>
    <h3>Sub-bagian 2.2</h3>
  </body>
</html>
```


**Output:**

![tag-heading.png](https://res.cloudinary.com/developerpemula/image/upload/v1701064324/developerpemula/assets/heading_zcwwol.png)

Dengan kalian belajar dan memahami konsep heading dalam HTML, kalian dapat membangun struktur halaman web yang terorganisir dan mudah dipahami oleh pengguna.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Pahami konsep dan penggunaan tag heading dalam HTML. Tutorial lengkap untuk pemula dalam membangun struktur halaman web dengan benar.

Belajar HTML untuk Pemula: Membuat Heading dalam HTML

Memahami cara memformat teks dengan HTML adalah kunci dalam merancang tampilan halaman web. Pada tutorial ini, kita akan membahas tag-tag khusus yang digunakan untuk memformat teks dalam HTML.

## 1. Penggunaan Tag Teks Format

HTML menyediakan beberapa tag yang memungkinkan kita untuk memformat teks dengan cara tertentu. Berikut adalah beberapa tag yang umum digunakan:

- `<b>`: Bold (tebal)
- `<i>`: Italic (miring)
- `<u>`: Underline (garis bawah)
- `<s>` atau `<strike>`: Strikethrough (garis tengah)
- `<sup>`: Superscript (teks di atas garis)
- `<sub>`: Subscript (teks di bawah garis)

## 2. Tag Bold dan Italic

Tag `<b>` digunakan untuk membuat teks menjadi tebal (bold), sedangkan tag `<i>` digunakan untuk membuat teks menjadi miring (italic).

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<p>Ini adalah teks <b>tebal</b> dan <i>miring</i>.</p>

</body>
</html>
```

**Output:**

![tag-i-b.png](https://res.cloudinary.com/developerpemula/image/upload/v1701090967/developerpemula/assets/bold-italic_fp3gxl.png)

## 3. Tag Underline dan Strikethrough

Tag `<u>` digunakan untuk membuat teks menjadi bergaris bawah (underline), sedangkan tag `<s>` atau `<strike>` digunakan untuk menambahkan garis tengah pada teks (strikethrough).

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<p>Ini adalah teks dengan <u>garis bawah</u> dan <s>strikethrough</s>.</p>

</body>
</html>
```

**Output:**

![tag-u-s.png](https://res.cloudinary.com/developerpemula/image/upload/v1701090967/developerpemula/assets/tag-u_wpwpjs.png)

## 4. Tag Superscript dan Subscript

Tag `<sup>` digunakan untuk membuat teks menjadi superscript (teks di atas garis), sedangkan tag `<sub>` digunakan untuk membuat teks menjadi subscript (teks di bawah garis).

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<p>Ini adalah teks <sup>superscript</sup> dan <sub>subscript</sub>.</p>

</body>
</html>
```

**Output:**

![tag-sup.png](https://res.cloudinary.com/developerpemula/image/upload/v1701090967/developerpemula/assets/tag-sup_zuthyw.png)


Dengan penggunaan tag-tag format teks dalam HTML, Anda dapat meningkatkan estetika dan struktur halaman web Anda dengan lebih baik.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Pelajari cara memformat teks dalam HTML dengan tag-tag khusus. Tutorial praktis untuk pemula dalam merancang tampilan teks pada halaman web.

Belajar HTML untuk Pemula: Format Teks dalam HTML

Tabel adalah cara yang efektif untuk menyajikan data dengan rapi pada halaman web Anda. Dalam tutorial ini, kita akan mempelajari cara membuat tabel dalam HTML untuk merancang struktur data yang terorganisir.

## 1. Mengapa Tabel Penting

Tabel membantu dalam:

- **Menyusun Data:** Menampilkan data dalam format yang terstruktur.
- **Keterbacaan:** Memudahkan pembaca untuk memahami dan membandingkan data.
- **Estetika:** Meningkatkan tampilan halaman dengan penyajian data yang teratur.

## 2. Struktur Dasar Tabel HTML

Struktur dasar tabel HTML melibatkan penggunaan tag `<table>`, `<tr>` (baris), `<th>` (sel kepala), dan `<td>` (sel data).

- Tag `<table>` : Tag `<table>` digunakan untuk mendefinisikan tabel Anda. Ini adalah tag pembuka untuk tabel dan akan selalu ada di awal tabel Anda.
- Tag `<tr>` (Table Row) : Tag `<tr>` digunakan untuk membuat baris dalam tabel Anda. Setiap baris dalam tabel harus dimulai dengan tag `<tr>`.
- Tag `<th>` (Table Heading) : Tag `<th>` digunakan untuk membuat heading/kepala dalam tabel Anda.
- Tag `<tr>` (Table Row) : Tag `<tr>` digunakan untuk membuat baris dalam tabel Anda. Setiap baris dalam tabel harus dimulai dengan tag `<tr>`.

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Alam</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Naga</td>
    <td>22</td>
  </tr>
</table>


</body>
</html>
```

**Output:**

![table.png](https://res.cloudinary.com/developerpemula/image/upload/v1701094048/developerpemula/assets/table_grd4ps.png)

Seperti yang kita lihat pada hasil running tersebut tidak ada bentuk tabelnya atau garisnya, jika kita ingin melihat garis pada bordernya maka kita perlu menambahkan atribut.

- Atribut border

Atribut border digunakan pada tag `<table>` untuk mengatur ketebalan garis tepi tabel. Ini memungkinkan Anda untuk memberikan tabel Anda tampilan yang lebih jelas dan terstruktur. Misalnya, jika Anda ingin menambahkan garis tepi dengan ketebalan 1 piksel, Anda dapat melakukannya dengan atribut border="1"

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Alam</td>
    <td>23</td>
  </tr>
  <tr>
    <td>Naga</td>
    <td>22</td>
  </tr>
</table>


</body>
</html>
```

**Output:**

![tag-u-s.png](https://res.cloudinary.com/developerpemula/image/upload/v1701094047/developerpemula/assets/table-atribut_aah5bm.png)

## 3. Menggabungkan Sel dan Baris

Penggunaan atribut `colspan` dan `rowspan` memungkinkan penggabungan sel (merge) dalam tabel.

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<table border="1">
  <tr>
    <th>Nama</th>
    <th colspan="2">Informasi Kontak</th>
  </tr>
  <tr>
    <td>Alam</td>
    <td>alam@email.com</td>
    <td>123-456-789</td>
  </tr>
  <tr>
    <td>Naga</td>
    <td>naga@email.com</td>
    <td>987-654-3210</td>
  </tr>
</table>


</body>
</html>
```

**Output:**

![tabel-merge.png](https://res.cloudinary.com/developerpemula/image/upload/v1701094331/developerpemula/assets/tabel_gw74xo.png)


Dengan struktur dasar tabel HTML, Anda dapat menciptakan tata letak data yang sesuai dengan kebutuhan dan mendukung tampilan yang bersih pada halaman web Anda.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Pelajari cara membuat tabel dalam HTML untuk menyajikan data dengan rapi. Tutorial praktis untuk pemula dalam merancang struktur tabel pada halaman web.

Belajar HTML untuk Pemula: Membuat Tabel dalam HTML

Menampilkan gambar pada halaman web dapat memperkaya pengalaman pengguna dan membuat konten lebih menarik. Dalam tutorial ini, kita akan mempelajari cara menampilkan gambar pada HTML.

## 1. Penggunaan Tag Gambar

Tag `<img>` digunakan untuk menampilkan gambar pada HTML. Berikut adalah contoh penggunaan tag ini:

```html
<img src="lokasi-gambar/gambar.jpg" alt="Deskripsi Gambar">
```

## 2. Menentukan Lokasi Gambar

Atribut `src` (source) digunakan untuk menentukan lokasi atau URL gambar. Pastikan memberikan path atau URL yang benar:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<img src="https://www.situs-gambar.com/gambar.jpg" >

</body>
</html>

```

## 3. Memberikan Deskripsi

Atribut `alt` memberikan deskripsi singkat tentang gambar. Ini berguna jika gambar tidak dapat dimuat atau untuk aksesibilitas:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<img src="gambar.jpg" alt="Pemandangan Gunung">

</body>
</html>
```

## 4. Mengatur Lebar dan Tinggi

Atribut `width` dan `height` digunakan untuk mengatur lebar dan tinggi gambar dalam piksel:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

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

</body>
</html>
```


Dengan penggunaan tag `<img>` beserta atribut-atributnya, Anda dapat menampilkan gambar dengan mudah pada halaman web Anda.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Belajar HTML untuk Pemula: Menampilkan Gambar pada HTML

Hyperlink (tautan) adalah elemen penting dalam membangun navigasi dan menghubungkan berbagai halaman web. Pada tutorial ini, kita akan membahas cara membuat hyperlink dalam HTML untuk menambahkan tautan pada konten web Anda.

## 1. Menggunakan Tag Hyperlink

Untuk membuat hyperlink dalam HTML, kita menggunakan tag `<a>` (anchor). Tag `<a>` ini selalu disertai dengan atribut href (hypertext reference), di mana kita menentukan URL atau alamat yang akan dituju ketika tautan tersebut diklik.

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

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

</body>
</html>
```

Dalam contoh di atas, saat teks "Kunjungi google" diklik, halaman akan diarahkan ke situs Google "Menggunakan Tag Hyperlink `<a>`. Tag Hyperlink `<a>` ini selalu desertai dengan atribut **href (hypertext reference)** dimana atribut tersebut menentukan URL yang mau dituju ketika diklik.

## 2. Menggunakan Teks atau Gambar sebagai Hyperlink

Anda dapat menggunakan teks atau gambar sebagai hyperlink. Contoh di atas menggunakan teks sebagai tautan. Untuk menggunakan gambar sebagai tautan, Anda dapat memasukkan elemen `<img>` di dalam elemen `<a>`

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<a href="https://www.contoh-web.com">
  <img src="gambar.jpg" alt="Deskripsi gambarnya">
</a>

</body>
</html>
```

Dalam contoh ini, ketika gambar diklik, halaman akan diarahkan ke link yang ada di **href** tersebut.

## 3. Membuka Tautan dalam Jendela Baru

Untuk membuka tautan dalam jendela atau tab baru, Anda dapat menggunakan atribut `target` pada tag `<a>`. Atribut `target` memungkinkan Anda mengontrol di mana dokumen yang terhubung akan dibuka. Berikut adalah contoh penggunaan atribut `target`:

Contoh:
```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>
  <p>Klik tautan di bawah untuk membuka di tab baru:</p>
  <a href="https://www.google.com" target="_blank">Kunjungi google</a>
</body>
</html>
```

Dengan menambahkan atribut target="_blank", Anda memberi tahu browser untuk membuka tautan di jendela atau tab baru. 

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Pelajari cara membuat hyperlink dalam HTML untuk menghubungkan halaman web Anda. Tutorial praktis untuk pemula dalam menambahkan tautan pada konten HTML.

Belajar HTML untuk Pemula: Membuat Hyperlink dalam HTML

List adalah cara efektif untuk menyusun dan menyajikan informasi dengan terstruktur. Dalam tutorial ini, kita akan mempelajari cara membuat list dalam HTML untuk meningkatkan tata letak halaman web Anda.

## 1. Jenis List dalam HTML

HTML menyediakan dua jenis list utama: Ordered List (List Bernomor) dan Unordered List (List Tanpa Nomor). Selain itu, kita juga dapat membuat list berlapis dengan menyusun list dalam list (nested list).

## 2. List Bernomor Ordered List

List Bernomor menggunakan tag `<ol>` dan setiap item list ditempatkan dalam tag `<li>` atau bisa dibilang **list item**. 

Berikut adalah contoh penggunaan list bernomor:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<ol>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ol>

</body>
</html>

```

**Output:**

![tag-ol.png](https://res.cloudinary.com/developerpemula/image/upload/v1701100913/developerpemula/assets/ol_pdnhsh.png)

## 3. List Tanpa Nomor Unordered List

List Tanpa Nomor menggunakan tag `<ul>` dan juga setiap item list ditempatkan dalam tag `<li>` atau bisa dibilang **list item**. 

Contoh penggunaannya:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

</body>
</html>
```


**Output:**

![tag-ul.png](https://res.cloudinary.com/developerpemula/image/upload/v1701101071/developerpemula/assets/ul_vvyrni.png)

## 4. listitem: List Berlapis Nested List

List berlapis terbentuk dengan menempatkan list dalam list. Berikut adalah contoh nested list:

Contoh penggunaannya:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<ul>
  <li>Item pertama</li>
  <li>Item kedua
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item ketiga</li>
</ul>

</body>
</html>
```


**Output:**

![nested.png](https://res.cloudinary.com/developerpemula/image/upload/v1701101362/developerpemula/assets/nested-list_p94fz3.png)

Dengan menggunakan tag `<ol>` dan `<ul>` beserta tag `<li>`, Anda dapat membuat list dengan berbagai format dan tata letak untuk memenuhi kebutuhan halaman web Anda. 

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.


Belajar HTML untuk Pemula: Membuat List dalam HTML

Form adalah elemen penting dalam mengumpulkan informasi dari pengguna. Dalam tutorial ini, kita akan mempelajari cara membuat form dalam HTML untuk meningkatkan interaktivitas halaman web Anda.

## 1. Penggunaan Tag Form

Tag `<form>` digunakan untuk membuat form pada HTML. Berikut adalah contoh penggunaan tag ini:

```html
<form action="/proses-form" method="post">
  
</form>
```

## 2. Jenis Input Form

Dalam form, kita dapat menggunakan berbagai jenis elemen input untuk mengumpulkan informasi. Berikut adalah beberapa jenis input form yang umum digunakan:

- Text Input:

```html
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
```
- Password Input:

```html
<label for="password">Password:</label>
<input type="password" id="password" name="password">
```

- Checkbox:

```html
<input type="checkbox" id="setuju" name="setuju" value="setuju">
<label for="setuju"> Saya setuju dengan syarat dan ketentuan</label>
```
- Radio Button:

```html
<input type="radio" id="jenis-kelamin-pria" name="jenis-kelamin" value="pria">
<label for="jenis-kelamin-pria"> Pria</label>

<input type="radio" id="jenis-kelamin-wanita" name="jenis-kelamin" value="wanita">
<label for="jenis-kelamin-wanita"> Wanita</label>
```

Jadi kalau digabungkan kesemuanya, codenya seperti berikut:

```html
<!DOCTYPE html>
<html>
<head>
<title>Developer Pemula</title>
</head>
<body>

<form action="/proses-form" method="post">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  
  <input type="checkbox" id="setuju" name="setuju" value="setuju">
  <label for="setuju"> Saya setuju dengan syarat dan ketentuan</label>
  
  <input type="radio" id="jenis-kelamin-pria" name="jenis-kelamin" value="pria">
  <label for="jenis-kelamin-pria"> Pria</label>

  <input type="radio" id="jenis-kelamin-wanita" name="jenis-kelamin" value="wanita">
  <label for="jenis-kelamin-wanita"> Wanita</label>

</form>

</body>
</html>
```

**Output:**

![tabel-merge.png](https://res.cloudinary.com/developerpemula/image/upload/v1701104693/developerpemula/assets/form_zw0ftw.png)

## 3. Menambahkan Tombol Submit 

Untuk mengirimkan data form, tambahkan tombol submit dengan menggunakan elemen `<button>`

```html
<button type="submit">Kirim</button>
```
Tombol submit pada umumnya ditempatkan di dalam elemen `<form>`. Ini memungkinkan pengguna untuk mengirimkan data form ketika tombol submit ditekan.
 
## 4. Elemen Form Lainnya

Selain elemen-elemen input, kita juga dapat menggunakan elemen form lainnya seperti `<textarea>` untuk input teks yang lebih panjang dan `<select>` untuk dropdown menu:

- Textarea:

```html
<label for="komentar">Komentar:</label>
<textarea id="komentar" name="komentar" rows="4" cols="50"></textarea>
```
- Select (Dropdown Menu):

```html
<label for="pilih-kategori">Pilih Kategori:</label>
<select id="pilih-kategori" name="pilih-kategori">
  <option value="option1">Opsi 1</option>
  <option value="option2">Opsi 2</option>
  <option value="option3">Opsi 3</option>
</select>
```

Dengan penggunaan tag `<form>` dan elemen-elemen form, Anda dapat membuat form yang interaktif dan sesuai dengan kebutuhan halaman web Anda.

Oke mungkin, sampai disini dulu tutorial ini.. Semoga dapat dipahami dengan mudah.
Jangan lupa untuk menjaga diri Anda tetap up-to-date dengan perkembangan terbaru dalam HTML dan teknologi web lainnya. Dunia web terus berkembang, dan dengan tetap belajar, Anda akan selalu siap mengikuti perkembangan tersebut.

Pelajari cara membuat form dalam HTML untuk mengumpulkan informasi dari pengguna. Tutorial praktis untuk pemula dalam menambahkan elemen form pada halaman web.

developer<PEMULA/>

developer<PEMULA/>

Tutorial HTML5

10 Artikel 📖

1. Belajar HTML untuk Pemula: Pengenalan HTML

2. Belajar HTML untuk Pemula: Mengenal Tag, Elemen, dan Atribut

3. Belajar HTML untuk Pemula: Membuat Paragraf dalam HTML

4. Belajar HTML untuk Pemula: Membuat Heading dalam HTML

5. Belajar HTML untuk Pemula: Format Teks dalam HTML

6. Belajar HTML untuk Pemula: Membuat Tabel dalam HTML

7. Belajar HTML untuk Pemula: Menampilkan Gambar pada HTML

8. Belajar HTML untuk Pemula: Membuat Hyperlink dalam HTML

9. Belajar HTML untuk Pemula: Membuat List dalam HTML

10. Belajar HTML untuk Pemula: Membuat Form pada HTML