• Beranda
  • All
  • Wawasan Keprofesian – HTML (HyperText Markup Language)

Wawasan Keprofesian – HTML (HyperText Markup Language)

Hi, Mathematicians!🧮

Wawasan Keprofesian telah hadir kembali dengan topik baru, yaitu..

 🌟HTML🌟

Sebenarnya HTML itu apa, sih? Apa saja fungsinya? Dan bagaimana cara pakainya?🤷🏻‍♀⁉ 

Yuk, temukan jawabannya disini!🤩↙

 

Apa itu HTML (HyperText Markup Language)?

HyperText Markup Language adalah bahasa markup yang umumnya digunakan untuk menyusun bagian paragraf, heading, maupun link pada halaman web. Bahasa markup sendiri adalah bahasa yang digunakan untuk menentukan struktur dan format konten pada halaman web. Sebuah halaman HTML dibangun oleh blok-blok konten yang disebut elemen HTML.

 

Apa aja, sih, Fungsi dari HTML?

HTML memiliki beberapa fungsi, diantaranya untuk: 

  1. Membuat Halaman Website

HTML memiliki fungsi utama untuk membuat halaman website. HTML adalah pondasi utamanya, lalu dalam pembuatan website HTML biasanya berpasangan dengan CSS untuk mempercantik dan Javascript yang berguna untuk memberikan animasi dan kontrol fungsi.

  1. Mengarahkan Pengguna ke Halaman Lain (Hyperlink)

Tag HTML juga memiliki fungsi untuk mengarahkan pengguna ke halaman atau website lain melalui sebuah teks. Fungsi ini disebut juga dengan hyperlink yang membuat pengguna mudah mendapatkan informasi yang berhubungan dengan halaman web yang sedang dibaca.

  1. Sebagai Pondasi Website

HTML dibutuhkan untuk membuat tampilan website yang lebih menarik. Bahasa markup ini juga menjadi pondasi utama pada saat pembuatan website. Karena nantinya, beberapa bahasa pemrograman akan diaplikasikan pada HTML.

 

Perintah Dasar dalam HTML

Berikut sejumlah Tag HTML dasar yang umum digunakan pada HTML, antara lain:

  1. <! DOCTYPE html> : Deklarasi untuk mendefinisikan dokumen menjadi HTML
  2. <html> : Tag pembuka untuk membuat dokumen HTML
  3. <head> : Informasi meta tentang dokumen
  4. <title> : Membuat judul halaman yang nantinya akan ditampilkan di browser
  5. <body> : Tempat dibuatnya semua konten website menggunakan HTML
  6. <p> : Berfungsi untuk paragraf teks
  7. <a> : Digunakan untuk membuat hyperlink ke halaman website lain
  8. <hr> : Dipakai untuk membuat garis horizontal. Biasanya sering digunakan sebagai pemisah konten
  9. <div> : Merupakan tag untuk mengelompokkan elemen lainnya, sehingga memungkinkan kontrol yang lebih baik terhadap style dan layout. ‘<div>’ adalah block-level element yang akan membuat baris baru saat dibuat
  10. <span> : Tag untuk mengelompokkan elemen lainnya, tetapi sebagai inline element. Tidak akan membuat baris baru saat dibuat.

 

Cara Menggunakan HTML

  1. Pilih Editor Kode HTML

Pastikan editor kode yang dipilih memiliki fitur untuk menyederhanakan proses development seperti: penandaan syntax, penyelesaian otomatis, deteksi error, integrasi, dan preview langsung. Beberapa rekomendasi editor kode: Notepad++, Atom, VSCode.

  1. Rencanakan Tata Letak Website

Tata letak (layout) akan membantu menentukan kegunaan dan navigasi website yang mencakup header, footer, dan navigasi website.

  1. Mulai Tulis Kode HTML

Berikut cara membuat website dengan HTML menggunakan VSCode:

  • Buat folder baru di komputer Anda. Folder ini akan menjadi direktori untuk semua file website.
  • Buka VSCode → File → Open Folder.
  • Temukan folder baru tersebut lalu klik Select Folder.
  • Pilih New File. Beri nama file tersebut dengan index.html dan tekan enter.
  • Klik Create File untuk mengonfirmasi.
  • Ketika diminta untuk membuka tab editor index.html, masukkan struktur dasar dokumen HTML berikut:

<!DOCTYPE html>

<html>

   <head>

      <title> </title>

   </head>

   <body>

   </body>

</html>

  1. Buat Elemen dalam Tata Letak

Tambahkan kode HTML ke dalam file index.html untuk membuat elemen-elemen yang berfungsi untuk memisahkan website menjadi beberapa bagian dan menjadi tempat penampung konten.  

Letakkan elemen-elemen ini di antara tag <body></body> dalam kode file index.html. Perhatikan apakah setiap elemen memiliki tag penutup yang sesuai karena terdapat beberapa elemen yang tidak memiliki tag penutup (self closing) contohnya: <img>, <br>, dan <hr>

  1. Tambahkan Konten HTML

Mulailah mengisi dengan konten website, seperti teks, gambar, link, atau video. Contoh tag yang akan digunakan untuk menambahkan konten website: <h1> dan <p>, <nav> dan <a>, <img>.

  1. Ubah Layout Website dengan CSS

Buat file style.css dan hubungkan stylesheet tersebut ke dokumen HTML dengan menambahkan kode berikut di antara tag pembuka dan penutup <head> pada index.html:

<link rel=”stylesheet” href=”style.css”>

  1. Sesuaikan Tampilan Website HTML dengan Properti CSS

 

Pekerjaan yang Menggunakan HTML

  • Front-end developer
  • Back-end developer
  • Full-stack developer
  • UI/UX designer
  • Software engineer
  • Software developer

 

Sumber

https://www.hostinger.com/id/tutorial/apa-itu-html

https://www.codepolitan.com/interactive-coding/html/lessons/9/

https://www.biznetgio.com/news/apa-itu-html

https://www.domainesia.com/berita/html-adalah/#Fungsi_HTML

https://kelas.work/blogs/mengenal-bahasa-pemrograman-html-dan-fungsi-utamanya

https://www.revou.co/panduan-teknis/tag-html

https://id.scribd.com/doc/28293306/Perintah-Dasar-HTML

https://www.hostinger.com/id/tutorial/cara-membuat-website-dengan-html

 

 

 

Departemen Rotasi

Kabinet Eskalasi

Himatika UGM

Leave A Comment

Your email address will not be published.

*