XPdKyZ3Dx8AsjrBpycdAEdBz2M6yyUpdeYe1l6qN
Bookmark

Tutorial Belajar html dasar untuk pemula

Banner Tutorial belajar html dasar untuk pemula

Belajar Html adalah hal wajib bagi seseorang untuk menjadi programmer yang handal

Ditutorial ini kamu akan belajar apa itu HTML?

Kenapa harus belajar HTML?

Struktur, kode, tag dan elemen didalam HTML?


Baik mari kita mulai.


Apa itu HTML?

HTML adalah singkatan dari Hypertext Markup Language yang mana berfungsi sebagai bahasa markup atau pondasi sebuah situs website yang akan dibangun.

Didalam HTML terdapat struktur standar untuk membuat sebuah website, yang mana struktur standar ini meliputi tag Html, tag Head dan tag Body. ketiga tag tersebut wajib ada dalam html.

Sejarah singkat HTML

HTML pertama kali diperkenalkan oleh Tim Berners-Lee pada tahun 1991, akan tetapi versi pertama yang diterbitkan secara resmi adalah HTML 1.0 pada tahun 1993. Versi ini memiliki sedikit elemen dasar seperti tajuk, paragraf, dan tautan.

Pada tahun 1995 HTML 2.0 dirilis dengan fitur tambahan seperti tabel, formulir, dan gambar. Ini merupakan langkah awal dalam pengembangan HTML sebagai standar untuk membuat halaman web.

Pada tahun 1997 HTML 3.2 diterbitkan oleh World Wide Web Consortium (W3C), Ini memiliki penambaan elemen baru seperti daftar terurut, daftar tak terurut, dan pemformatan teks yang lebih canggih. Versi ini juga mendukung penggunaan CSS (Cascading Style Sheets) untuk mengatur tampilan halaman web

Pada tahun 1999 HTML 4.01 adalah versi HTML yang paling umum digunakan sebelum diperkenalkannya HTML5. Ini mencakup peningkatan besar dalam penggunaan CSS dan memperkenalkan elemen-elemen baru seperti lapisan dan pemetaan gambar.

Pada tahun 2000 dirilis XHTML (eXtensible HyperText Markup Language) yang merupakan langkah maju dalam pengembangan HTML. Ini merupakan kombinasi antara HTML dan XML, dan memperkenalkan sintaks yang lebih ketat dan lebih konsisten. XHTML mendukung penggunaan CSS dan menawarkan kompatibilitas yang lebih baik dengan perangkat lunak dan browser.

Pada tahun 2014 HTML5 adalah versi terbaru dari HTML yang diperkenalkan pada tahun 2014. Ini adalah standar terbaru untuk pengembangan halaman web dan menyertakan fitur-fitur baru seperti elemen-elemen semantik (seperti header, nav, article, dll.), audio dan video, canvas untuk grafis, dukungan untuk penyimpanan lokal, dan banyak lagi. HTML5 juga mendukung pengembangan aplikasi web yang lebih interaktif dan responsif.

Kenapa harus belajar HTML?

Seperti yang dijelaskan di atas bahwa HTML adalah bahasa markup standar dalam pembuatan website

HTML adalah salah satu core atau  inti dalam pembuatan website yang dinamis dan responsive

terdapat beberapa alasan mengapa kamu harus belajar html sebagai awal untuk menjadi programmer yang handal

  1. HTML adalah bahasa markup dasar untuk membangun halaman web. Dengan memahami HTML, kamu akan mempelajari struktur dasar dan elemen-elemen yang digunakan untuk mengatur konten pada halaman web. Ini adalah fondasi yang penting untuk memahami bagaimana halaman web bekerja.
  2. Dengan HTML, kamu dapat mengontrol dan mengatur konten pada halaman web. kamu dapat membuat judul, paragraf, daftar, tabel, gambar, tautan, dan elemen-elemen lainnya dengan menggunakan tag HTML. Ini memberi kamu kemampuan untuk mempresentasikan informasi secara terstruktur dan mudah dibaca oleh pengguna.
  3. HTML adalah standar yang diterima secara luas dan didukung oleh berbagai jenis perangkat dan browser web. Ketika kamu menggunakan HTML untuk membangun halaman web, konten kamu dapat diakses dengan mudah oleh pengguna di berbagai perangkat, termasuk komputer, laptop, tablet, dan ponsel.
  4. HTML bekerja sama dengan teknologi web lainnya, seperti CSS (Cascading Style Sheets) dan JavaScript. Dengan memahami HTML, kamu dapat memahami bagaimana halaman web dapat diatur dan dihias dengan menggunakan CSS, serta bagaimana fungsionalitas interaktif dapat ditambahkan menggunakan JavaScript.
  5. Jika kamu tertarik dalam karir di bidang pengembangan web, pengetahuan HTML adalah keahlian yang sangat dihargai. Kemampuan untuk membangun halaman web dengan baik dan memahami struktur dan tata letaknya adalah keterampilan dasar yang dibutuhkan oleh banyak perusahaan dan organisasi.
  6. Belajar HTML memungkinkan kamu untuk membuat dan mempublikasikan konten web sendiri. seperti blog pribadi, portofolio online, atau proyek pribadi lainnya.

Struktur kode, tag dan elemen didalam HTML

Sekarang kamu akan belajar dasar dasar html seperti struktur kode, tag dan elemen, sebelum memulai hal yang kamu  persiapkan adalah text editor seperti visual studio code dan web browser kesukaan kamu.

Setelah hal tersebut dipersiapkan, silakan buat sebuah folder dan buka folder tersebut di visual studio code

buat file pertama kamu dengan nama index.html

Didalam file index.html hal pertama yang dilakukan untuk bekerja di html adalah membuat strukturnya terlebih dahulu, kamu bisa membuatnya dengan menekan Shift dan tanda seru di keyboard kamu secara bersamaan dan tekan Tab, maka secara otomatis struktur dasar html akan dibuatkan.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Setelah struktur html standar kamu buat, sekarang waktu nya kita mulai belajar ngoding di html

Menampilkan Hello World

Untuk menampilkan Hello World di browser dengan html kamu bisa mengetik Hello World di dalam tag body

<body>
  Hello World
</body>
Menampilkan hello world ke browser

Membuat komentar di Html

Di Html kita bisa membuat komentar, yang dimana komentar ini berguna untuk membarikan informasi atau penjelasan singkat terkait kode yang sedang kita buat.

<body>
    <!-- Ini adalah komentar di HTML -->
</body>

Komentar ini tidak akan di eksekusi di dalam browser dan tidak mempengaruhi kode.

Membuat heading di Html

Di Html kita bisa membuat heading dari heading 1 sampai heading 6 yang dimana heading ini digunakan untuk memberikan hierarki dan tampilan visual yang berbeda pada teks di halaman web.

<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>
Menampilkan heading ke browser

Membuat format text di Html

Didalam html kita bisa membuat sebuah text memiliki gaya atau format tertentu dengan tag yang sudah disediakan Html

<body>
    <i>Text miring</i> <br />
    <b>Text tebal</b> <br />
    <u>Teks yang digarisbawahi</u> <br />
    <s>Teks yang disilang</s> <br />
    <sup>Superskrip</sup> <br />
    <sub>Subskrip</sub> <br />
    <mark>Teks yang disorot</mark> <br />
    <small>Teks dengan ukuran kecil</small> <br />
    <strong>Teks yang ditekankan</strong> <br />
    <em>Teks yang ditekankan</em> <br />
    <code>Kode yang digambarkan</code> <br />
    <pre>
      Teks dengan
      beberapa baris
      dan pemformatan yang
      dipertahankan
      </pre>
</body>

Pada setiap baris kode saya memberikan tag <br/> agar setiap baris text membentuk baris baru, hal ini mempengaruhi format text secara horinzotal atau vertikal

Format text di html

Itulah tutorial belajar html dasar yang wajib dipelajari dalam html.

Semoga tutorial ini bermanfaat buat kamu yang sedang belajar saat ini.

Next kita mau bahas apalagi?

1 komentar

1 komentar

  • Anonim
    Anonim
    27 Juli 2024 pukul 13.23
    Mantap
    Reply