HTML | Istilah populer dalam situsweb

Halaman ini menjabarkan secara detail tentang apa yang ingin Anda ketahui

| English | | Filipino | | Indonesia | | Malay | | Thai | | Vietnamese |
6 kali dilihat

HTML | Istilah populer dalam situsweb

dipublikasi pada : 13 September 2020

Deskripsi

Setiap spesifikasi bidang ilmu pasti memiliki istilah-istilah khusus tersendiri yang suka atau tidak suka harus dikuasai untuk mencapai pemahaman yang baik tentang apa yang dipelajari. Dalam dunia developer website atau pengembang situs web kita sering melihat atau mendengar tentang HTML, CSS atau javascript. Tapi kita terkadang tidak atau belum begitu memahami apa arti istilah-istilah itu sebenarnya.

Sebelum seseorang terjun ke dunia developer, ia harus mengetahui istilah-istilah tersebut. Developer website tidak jauh dari dunia koding. Istilah koding akan terus melekap pada istilah-istilah bahasa pemrograman yang ada seperti yang disebut di atas tadi, HTML, CSS, dan seterusnya. Koding ini akan berguna untuk menerjemahkan keinginan developer dan perangkat yang digunakan, ini akan berguna sebagai jalan komunikasi antara developer dan perangkat.

Baiklah, untuk menjaga agar isi artikel ini tidak melebar dari judul artikel ini, penulis tidak akan berpanjang lebar lagi. Inilah istilah-istilah yang sering digunakan oleh developer. Istilah-istilah ini sebisa mungkin disajikan secara lengkap.


1. HTML

Hypertext Markup Language (HTML) adalah bahasa markup standar untuk dokumen yang dirancang untuk ditampilkan di browser web. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa skrip seperti JavaScript.

HTML adalah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium.

Browser web menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen tersebut menjadi halaman web multimedia. HTML mendeskripsikan struktur halaman web secara semantik dan awalnya menyertakan isyarat untuk tampilan dokumen.

Elemen HTML adalah blok bangunan halaman HTML. Dengan konstruksi HTML, gambar dan objek lain seperti bentuk interaktif dapat disematkan ke halaman yang dirender. HTML menyediakan sarana untuk membuat dokumen terstruktur dengan menunjukkan semantik struktural untuk teks seperti judul, paragraf, daftar, tautan, kutipan, dan item lainnya. Elemen HTML digambarkan dengan tag, ditulis menggunakan tanda kurung sudut. Tag seperti < img /> dan < input /> secara langsung memasukkan konten ke dalam halaman. Tag lain seperti < p > mengelilingi dan memberikan informasi tentang teks dokumen dan mungkin menyertakan tag lain sebagai sub-elemen. Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menafsirkan konten halaman.

HTML dapat menyematkan program yang ditulis dalam bahasa skrip seperti JavaScript, yang memengaruhi perilaku dan konten halaman web. Penyertaan CSS menentukan tampilan dan tata letak konten. World Wide Web Consortium (W3C), mantan pengelola HTML dan pemelihara standar CSS saat ini, telah mendorong penggunaan CSS di atas HTML presentasi eksplisit sejak 1997.

Fungsi HTML

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

HTML berfungsi untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Secara spesifik, HTML memiliki fungsi sebagai berikut :

  • Membuat halaman web.
  • Menampilkan berbagai informasi di dalam sebuah browser Internet.
  • Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

Perbedaan HTML dan HTML5

Anda mungkin pernah mendengar HTML5? apa bedanya HTML dengan HTML? Anda mungkin masih menduga kedua istilah itu sama saja?.

HTML4 (belakangan ini sering disebut sebagai “HTML”) dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014. Dikenal sebagai HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini. Salah satu fitur canggih di HTML5 adalah support untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa melakukan file video dan audio yang di-embed ke halaman website dengan memanfaatkan tag < audio ></ audio > & < video ></ video >. Fitur tersebut juga memiliki support bawaan untuk grafis vektor (SVG) yang dapat diskalakan dan MathML untuk formula matematika dan ilmiah.

HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang bermanfaat tak hanya bagi pembaca, tapi juga mesin pencari.

Tag semantic yang paling banyak digunakan adalah :

<article></article >, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>.

Tabel berikut menjelaskan informasi tentang perbedaan antara HTML dan HTML5 yang signifikan:

# HTML HTML5
1 Tidak mendukung audio dan video tanpa menggunakan dukungan flash player. mendukung kontrol audio dan video dengan penggunaan tag audio dan video.
2 Menggunakan cookie untuk menyimpan data sementara. Menggunakan database SQL dan cache aplikasi untuk menyimpan data offline.
3 Tidak mengizinkan JavaScript berjalan di browser. Memungkinkan JavaScript berjalan di latar belakang. Hal ini dimungkinkan karena API pekerja Web JS dalam HTML5.
4 Grafik vektor dimungkinkan dalam HTML dengan bantuan berbagai teknologi seperti VML, Silver-light, Flash, dll. Grafik vektor juga merupakan bagian integral dari HTML5 seperti SVG dan kanvas.
5 Tidak memungkinkan efek seret dan lepas. Memungkinkan efek seret dan lepas.
6 Tidak mungkin menggambar bentuk seperti lingkaran, persegi panjang, segitiga, dll. HTML5 memungkinkan untuk menggambar bentuk seperti lingkaran, persegi panjang, segitiga, dll.
7 Bekerja dengan semua browser lama. Didukung oleh semua browser baru seperti Firefox, Mozilla, Chrome, Safari, dll.
8 HTML versi lama kurang ramah seluler. Bahasa HTML5 lebih ramah seluler.
9 Deklarasi Doctype terlalu panjang dan rumit. Deklarasi Doctype cukup sederhana dan mudah.
10 Elemen seperti nav, header tidak ada. Elemen baru untuk struktur web seperti nav, header, footer dll.
11 Pengkodean karakter panjang dan rumit. Pengkodean karakter sederhana dan mudah.
12 Hampir tidak mungkin untuk mendapatkan GeoLocation pengguna yang sebenarnya dengan bantuan browser. Seseorang dapat melacak GeoLocation pengguna dengan mudah dengan menggunakan JS GeoLocation API.
13 Tidak dapat menangani sintaks yang tidak akurat. Mampu menangani sintaks yang tidak akurat.
14 Atribut seperti charset, async, dan ping tidak ada di HTML. Atribut charset, async, dan ping adalah bagian dari HTML 5.

Penyempurnaan Elemen HTML dalam HTML5, termasuk diantaranya menghapus elemen berikut :

# Elemen di HTML Elemen di HTML5
1 applet setara dengan: object
2 acronym setara dengan: abbr
3 dir setara dengan: ul
4 frameset Dihapus
5 frame Dihapus
6 noframes Dihapus
7 strike Tidak ada tag baru. CSS digunakan untuk ini
8 big Tidak ada tag baru. CSS digunakan untuk ini
9 basefont Tidak ada tag baru. CSS digunakan untuk ini
10 font Tidak ada tag baru. CSS digunakan untuk ini
11 center Tidak ada tag baru. CSS digunakan untuk ini
12 tt Tidak ada tag baru. CSS digunakan untuk ini

Atribut dalam HTML

Di dalam HTML terdapat beberapa atribut yang biasa digunakan, penulis akan sajikan point secara garis besarnya saja untuk menyederhanakan atas penjelasan lainnya. Itu seperti :

  • CLASS
<div class="big-box yellow-box">Ini kotak kuning besar.</div>
  • ID
<div id="my-box">Ini kotak saya! Letakkan teks Anda di beberapa kotak lain.</div>
  • HREF
<a href="http://google.com">Google itu!</a>
  • Body
<html>
  <head>
    <title>Contoh tag body</title>
  </head>
  <body>
    Ini ada di dalam body!
  </body>
</html>
  • Children
<ul id="parent">
  <li id="child">Saya anak dari orang tua!</li>
</ul>
  • Comments
<!-- Ini adalah komentar HTML! -->
  • Div
<div>Ini adalah elemen div.</div>
  • Html
<!DOCTYPE html>
<html>

Bagian html ini memuat kode sisi halaman web.

</html>
  • Head
<html>
  <!-- bagian "head" -->
  <head>
  </head>
  <!-- bagian "head" -->
  <body>
  </body>
</html>
  • Headings. Bagian heading dapat berisi h1, h2, h3, h4, h5, atau h6. Berikut contohnya :
<h1> Ini adalah sebuah header H1 ! </h1>
<h2> Ini adalah sebuah header H2 ! </h2>
<h3> Ini adalah sebuah header H3 ! </h3>
... dan seterusnya.
  • Horizontal rules. Teks "hr" akan memberi spasi horizontal dengan garis hitam setebal 1px.
Teks blog anda.
<hr>
...teks berikutnya.
  • Hyperlinks
<a href="url this link goes to">Teks tautan</a>
Teks berikut ini <a href="http://google.com">pergi ke Google</a>.
  • Images
<img src="./assets/img/gambarku.png" class="style" alt="gambar saya">
  • Line breaks
<p> Beberapa teks <br/> yang mencakup dua baris </p>
  • Links
<link type="text/css" rel="stylesheet" href="styles.css" />
  • Lists
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

dapat juga dijabarkan berupa :

<div class="col-md-12" >
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
  </div>
</div>
  • Paragraphs
<p> Ini adalah teks paragraf! </p>
  • Semantic formatting
<p> <strong> Peringatan: </strong> Asam dapat menyebabkan luka bakar yang parah </strong> </p>
  • Tables
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
  • Tags & Elements
<tag attribute='value'>konten</tag keyword>
  • Title
<title>Artikel Saya</title>

Tags:

Komentar