Introduction to HTML

5 min readMay 21, 2024

Frontend — HTML Series From Website Development Path MySkill.id

Yuk subscribe untuk me dapatkan email notifikasi setiap ada artikel terbaru oleh MySkill

Apa itu Code Editor?

Code Editor adalah sebuah perangkat lunak yang dirancang khusus untuk membantu programer dalam menulis, mengedit, dan mengelola kode lebih efisien. Ia menyediakan fitur-fitur seperti highlighting syntax, auto-completion, deteksi kesalahan, dan formatasi kode, yang mempermudah proses pengembangan kode.

Fitur-fitur Utama dari Code Editor

Berikut ini beberapa fitur yang harus ada dalam sebuah Code Editor:

Highlighting Syntax: Fitur ini memberi warna pada bagian-bagian kode, memudahkan pemahaman dan pengorganisasian kode.
Auto-completion: Fitur ini membantu programer dalam menulis kode lebih cepat dengan mengambil data dari variabel, fungsi, dan modul yang telah diimport.
Deteksi Kesalahan: Code Editor dapat mendeteksi kesalahan syntax dan kesalahan lainnya secara real-time, mempermudah programer dalam mengidentifikasi dan memperbaiki kesalahan.
Formatasi Kode: Fitur ini secara otomatis mengatur kode sesuai dengan standar tertentu, membuat kode lebih rapi dan mudah dibaca.
Ekstensibilitas: Banyak Code Editor mendukung plugin dan ekstensi, yang memungkinkan programer dalam menambahkan fitur-fitur baru dan mengatur lingkungan coding sesuai keinginan.

Code Editor Populer

Berikut ini beberapa Code Editor populer yang biasa digunakan oleh programer:

Visual Studio Code (VS Code)

VS Code adalah Code Editor yang dikembangkan oleh Microsoft dan dapat digunakan secara gratis. Ia mendukung banyak bahasa pemrograman dan platform, dengan fitur-fitur seperti:

IntelliSense: Menyediakan selesaian kode yang smart berdasarkan variabel, definisi fungsi, dan modul yang diimport.
Debugging: Menyediakan alat debugging untuk berbagai bahasa pemrograman dan runtime.
Kontrol Versi: Dukungan built-in untuk Git sebagai kontrol versi.
Ekstensibilitas: Memiliki ribuan ekstensi untuk fitur tambahan dan pengaturan lingkungan coding.

Sublime Text

Sublime Text adalah Code Editor ringan dan cepat yang populer karena kecepatannya dan kesederhanaannya. Ia mendukung banyak bahasa pemrograman dan platform, dengan fitur-fitur seperti:

Goto Anything: Navigasi cepat ke file, simbol, atau baris.
Banyak Pilihan: Edit banyak baris atau bagian kode secara bersamaan.
Panel Perintah: Mengakses berbagai fungsi dan perintah tanpa meninggalkan keyboard.
Kontrol Paket: Menambah dan mengelola paket untuk fitur tambahan.

Tom

Atom memiliki beberapa fitur lain yang menarik, antara lain:

Teletype: Fitur ini memungkinkan programer bekerja sama dalam real-time dengan para kolaborator.
Pengembangan Paket: Atom memiliki fitur pengembangan paket yang memudahkan programer dalam membuat dan mengembangkan paket baru.
Tema dan Pengaturan: Atom menawarkan banyak tema dan pengaturan yang dapat disesuaikan, memungkinkan programer dalam mengatur lingkungan coding sesuai keinginan.

Pilih Code Editor yang Tepat

Pilih Code Editor yang tepat sangat penting dalam mempermudah pekerjaan programer. Berikut beberapa faktor yang harus dipertimbangkan saat memilih Code Editor:

Bahasa Pemrograman: Pastikan Code Editor yang dipilih mendukung bahasa pemrograman yang digunakan.
Integrasi: Perhatikan integrasi dengan tools dan layanan lainnya, seperti kontrol versi, debugging, dan lain-lain.
Ekstensibilitas: Code Editor yang memiliki banyak ekstensi dan plugin dapat meningkatkan produktivitas programer.
Performa: Code Editor yang cepat dan ringan akan mempermudah pekerjaan programer.
Kustomisasi: Code Editor yang mudah dikustomisasi akan membuat programer merasa lebih nyaman dalam bekerja.

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Ia menentukan struktur, tata letak, dan konten dari sebuah halaman web. Dengan HTML, Anda dapat membuat teks, gambar, video, dan formulir yang dapat ditampilkan di browser.

Bagian-bagian Dasar HTML

Berikut adalah beberapa bagian dasar dari HTML:

Doctype

Doctype adalah perintah yang menentukan versi HTML yang digunakan. Untuk HTML 5, doctype ditulis sebagai berikut:

<!DOCTYPE html>

Tag <html></html>

Tag <html></html> menandai bahwa konten yang ada didalamnya adalah konten HTML.

Tag <head></head>

Tag <head></head> menyimpan informasi tentang halaman web, seperti judul, deskripsi, dan referensi file lain yang digunakan.

Tag <title></title>

Tag <title></title> menentukan judul halaman web. Judul ini akan ditampilkan di tab browser atau jendela browser.

Tag <body></body>

Get My Skill’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Tag <body></body> menyimpan konten utama dari halaman web.

Contoh HTML Sederhana

Berikut adalah contoh HTML sederhana:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Selamat Datang ke Belajar HTML</h1>
    <p>Ini adalah paragraf pertama.</p>
    <p>Ini adalah paragraf kedua.</p>
  </body>
</html>

Dalam contoh di atas, kita memiliki doctype HTML 5, tag <html>, tag <head> dengan judul <title>, dan tag <body> dengan beberapa paragraf.

Tipe-tipe Elemen HTML

Berikut adalah beberapa tipe elemen HTML yang umum digunakan:

Heading (<h1> sampai <h6>)

Elemen heading digunakan untuk membuat judul atau subjudul. Tingkatan heading lebih rendah memiliki ukuran teks yang lebih kecil.

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

Paragraf (<p>)

Elemen paragraf digunakan untuk membuat paragraf teks.

<p>Ini adalah paragraf.</p>

Tautan (<a>)

Elemen tautan digunakan untuk membuat hyperlink.

<a href="https://www.example.com/">Kunjungi Situs Web Kami</a>

Gambar (<img>)

Elemen gambar digunakan untuk menampilkan gambar.

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

Form (<form>)

Elemen form digunakan untuk membuat formulir input, seperti formulir kontak atau login.

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

Tabel (<table>)

Elemen tabel digunakan untuk membuat tabel.

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>24</td>
  </tr>
</table>

Dalam HTML, dapat membuat halaman web dengan menggunakan elemen-elemen di atas. Selain itu, HTML memiliki banyak elemen lain yang dapat digunakan untuk membuat halaman web lebih lengkap dan interaktif.

Struktur HTML

HTML menggunakan tag untuk menentukan struktur dari sebuah halaman web. Tag adalah kata kunci yang diawali dengan tanda kurung siku < dan diakhiri dengan tanda kurung siku >. Tag biasanya berpasangan, yaitu ada tag pembuka dan tag penutup. Tag pembuka diawali dengan tanda kurung siku < dan tag penutup diawali dengan tanda kurung siku </.

Contoh:

<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Judul Utama</h1>
    <p>Paragraf 1</p>
    <p>Paragraf 2</p>
  </body>
</html>

Tag HTML

Berikut adalah beberapa tag HTML yang sering digunakan:

Tag `<html>`

Tag <html> adalah tag utama dari sebuah halaman web. Tag <html> menentukan awal dan akhir dari sebuah halaman web.

Tag <head>

Tag <head> menentukan bagian kepala dari sebuah halaman web. Tag <head> biasanya digunakan untuk menambahkan judul, meta tag, dan link ke file CSS atau JavaScript.

Tag <title>

Tag <title> menentukan judul dari sebuah halaman web. Judul akan ditampilkan di tab browser atau di jendela judul browser.

Tag <body>

Tag <body> menentukan bagian badan dari sebuah halaman web. Tag <body> biasanya digunakan untuk menambahkan konten ke dalam halaman web.

Tag <h1> sampai <h6>

Tag <h1> sampai <h6> digunakan untuk membuat heading. Tag <h1> adalah heading level 1 dan tag <h6> adalah heading level 6.

Tag <p>

Tag <p> digunakan untuk membuat paragraf.

Tag <a>

Tag <a> digunakan untuk membuat tautan. Atribut href digunakan untuk menentukan URL tujuan dari tautan.

Tag <img>

Tag <img> digunakan untuk menambahkan gambar ke dalam halaman web. Atribut src digunakan untuk menentukan URL gambar.

Tag <input>

Tag <input> digunakan untuk membuat input form. Atribut type digunakan untuk menentukan jenis input form.

Tag <br>

Tag <br> digunakan untuk membuat garis baru.

Tag <div>

Tag <div> adalah tag HTML yang digunakan untuk membuat kontainer atau seksi dalam halaman web. Kontainer ini biasanya digunakan untuk mengelompokkan elemen-elemen HTML dan mengatur tata letak halaman. Tag <div> tidak memiliki style atau format khusus, sehingga Anda dapat menggunakan CSS untuk mengatur tampilannya.

Learn More Via: myskill.id/course/prediction-model-use-case from Mobile Automation Path MySkill.id

Introduction to HTML

Apa itu Code Editor?

Fitur-fitur Utama dari Code Editor

Code Editor Populer

Visual Studio Code (VS Code)

Sublime Text

Tom

Pilih Code Editor yang Tepat

Apa itu HTML?

Bagian-bagian Dasar HTML

Doctype

Get My Skill’s stories in your inbox

Contoh HTML Sederhana

Tipe-tipe Elemen HTML

Heading (<h1> sampai <h6>)

Paragraf (<p>)

Tautan (<a>)

Gambar (<img>)

Form (<form>)

Tabel (<table>)

Struktur HTML

Tag HTML

Tag <html>

Written by My Skill

No responses yet

More from My Skill

Exploring the Home Tab

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Excel Introduction

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Data Cleansing, Sort, & Filter in Microsoft Excel

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Introduction to Excel

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Recommended from Medium

What Wealthy People Do Before 9 AM That Broke People Do Never

A five-year study tracked 233 millionaires and 128 people struggling financially. The differences weren’t income. They weren’t lucky. There…

What Should Programmers Do While the AI Writes Code?

Hint: not start another AI coding loop

20 Linux Commands That Turns Your Terminal Into a Loaded Weapon

Linux does not babysit you.

10 AI Tools Everyone Will Be Using in Six Months, But Almost Nobody’s Found Yet

You’re going to see these in someone’s toolkit next year and wonder why you didn’t hear about them first. Here’s your head start.

5 Claude Tricks That Give You an Unfair Advantage (Most People Still Use the Old Way)

Five habits pulled straight from Anthropic’s own documentation, not the recycled prompting tips still circulating everywhere else.

Sex for Rent in Germany: The Hidden Risk Behind the Housing Shortage

A student arriving in Munich with €380 available for housing faces an awkward piece of arithmetic. The median room in a shared flat now…

No responses yet

More from My Skill

Exploring the Home Tab

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Excel Introduction

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Data Cleansing, Sort, & Filter in Microsoft Excel

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Introduction to Excel

Microsoft Excel Basic Series from Microsoft Excel Path MySkill.id

Recommended from Medium

What Wealthy People Do Before 9 AM That Broke People Do Never

A five-year study tracked 233 millionaires and 128 people struggling financially. The differences weren’t income. They weren’t lucky. There…

What Should Programmers Do While the AI Writes Code?

Hint: not start another AI coding loop

20 Linux Commands That Turns Your Terminal Into a Loaded Weapon

Linux does not babysit you.

10 AI Tools Everyone Will Be Using in Six Months, But Almost Nobody’s Found Yet

You’re going to see these in someone’s toolkit next year and wonder why you didn’t hear about them first. Here’s your head start.

5 Claude Tricks That Give You an Unfair Advantage (Most People Still Use the Old Way)

Five habits pulled straight from Anthropic’s own documentation, not the recycled prompting tips still circulating everywhere else.

Sex for Rent in Germany: The Hidden Risk Behind the Housing Shortage

A student arriving in Munich with €380 available for housing faces an awkward piece of arithmetic. The median room in a shared flat now…

Tag `<html>`