HTML | Istilah popular di laman web 0 masa dilihat

Penerangan

Setiap spesifikasi bidang yang tepat mempunyai istilah tersendiri yang menyukainya atau tidak, ia mesti dikuasai untuk mencapai pemahaman yang baik tentang apa yang sedang dikaji. Dalam dunia pembangun laman web atau pembangun laman web, kita sering melihat atau mendengar mengenai HTML, CSS atau javascript. Tetapi kadang-kadang kita tidak atau tidak benar-benar memahami maksud istilah ini.

Sebelum seseorang memasuki dunia pemaju, dia mesti mengetahui syarat-syarat ini. Pembangun laman web tidak jauh dari dunia pengekodan. Istilah pengekodan akan terus disertakan dalam istilah bahasa pengaturcaraan yang ada seperti yang disebutkan di atas, HTML, CSS, dan sebagainya. Pengekodan ini akan berguna untuk menerjemahkan kehendak pembangun dan peranti yang digunakan, ini akan berguna sebagai cara komunikasi antara pembangun dan peranti.

Baiklah, untuk memastikan kandungan artikel ini tidak melebar dari tajuk artikel ini, penulis tidak akan membincangkannya lagi. Ini adalah istilah yang sering digunakan oleh pembangun. Syarat-syarat ini dikemukakan secara lengkap sebanyak mungkin.


1. HTML

Hypertext Markup Language (HTML) adalah bahasa markup standard untuk dokumen yang dirancang untuk dipaparkan dalam penyemak imbas web. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa skrip seperti JavaScript.

HTML adalah bahasa markup utama web dan berjalan secara semula jadi di setiap penyemak imbas dan dikendalikan oleh World Wide Web Consortium.

Penyemak imbas web menerima dokumen HTML dari pelayan web atau dari storan tempatan dan menukar dokumen menjadi halaman web multimedia. HTML menerangkan struktur laman web secara semantik dan pada mulanya merangkumi isyarat untuk penampilan dokumen.

Elemen HTML adalah asas penyusun halaman HTML. Dengan konstruk HTML, gambar dan objek lain seperti bentuk interaktif dapat dimasukkan ke dalam halaman yang diberikan. HTML menyediakan kaedah untuk membuat dokumen terstruktur dengan menunjukkan semantik struktur untuk teks seperti tajuk, perenggan, senarai, pautan, petikan, dan item lain. Elemen HTML diwakili oleh tag, ditulis menggunakan tanda kurung sudut. Teg seperti < img /> dan < input /> langsung memasukkan kandungan ke dalam halaman. Tag lain seperti < p > mengelilingi dan memberikan maklumat mengenai teks dokumen dan mungkin merangkumi tag lain sebagai sub-elemen. Penyemak imbas tidak memaparkan tag HTML, tetapi menggunakannya untuk menafsirkan kandungan halaman.

HTML dapat menyematkan program yang ditulis dalam bahasa skrip seperti JavaScript, yang mempengaruhi perilaku dan kandungan halaman web. Kemasukan CSS menentukan penampilan dan susun atur kandungan. World Wide Web Consortium (W3C), mantan penyelenggara HTML dan pemelihara standard CSS semasa, telah mendorong penggunaan CSS berbanding HTML persembahan eksplisit sejak 1997.

Fungsi HTML

HTML (HyperText Markup Language) adalah bahasa yang menggunakan tanda-tanda tertentu (tag) untuk mewakili kod yang mesti ditafsirkan oleh penyemak imbas supaya halaman dapat dipaparkan dengan betul.

HTML berfungsi untuk mengatur serangkaian data dan maklumat sehingga dokumen dapat diakses dan ditampilkan di Internet melalui perkhidmatan web. Secara khusus, HTML mempunyai fungsi berikut:

  • Buat laman web.
  • Paparkan pelbagai maklumat dalam penyemak imbas Internet.
  • Buat pautan ke laman web lain dengan kod tertentu (hiperteks).

Perbezaan antara HTML dan HTML5

Anda mungkin pernah mendengar tentang HTML5? apakah perbezaan antara HTML dan HTML? Anda mungkin masih mengesyaki bahawa kedua-dua istilah itu sama ?.

HTML4 (baru-baru ini disebut sebagai "HTML") dirilis pada tahun 1999 dan versi terbarunya diperkenalkan kepada umum pada tahun 2014. Dikenal sebagai HTML5, versi terbaru ini menambahkan lebih banyak fitur baru pada bahasa mark up. Salah satu ciri canggih dalam HTML5 adalah sokongan untuk penyisipan audio dan video. Jadi, daripada menggunakan Flash player, kita dapat menyematkan fail video dan audio di halaman web menggunakan tag < audio > </ audio > & < video > </ video >. Ia juga mempunyai sokongan terpadu untuk grafik vektor berskala (SVG) dan MathML untuk formula matematik dan saintifik.

HTML5 juga memperkenalkan beberapa peningkatan semantik. Tanda semantik baru menghantar maklumat kepada penyemak imbas mengenai makna kandungan, yang berguna bukan hanya untuk pembaca, tetapi juga untuk mesin pencari.

Tanda semantik yang paling banyak digunakan adalah:

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

Jadual berikut memberikan maklumat mengenai perbezaan ketara antara HTML dan HTML5:

#HTMLHTML5
1 Tidak menyokong audio dan video tanpa menggunakan sokongan pemain flash. menyokong kawalan audio dan video dengan penggunaan tag audio dan video.
2 Gunakan kuki untuk menyimpan data buat sementara waktu. Menggunakan pangkalan data SQL dan cache aplikasi untuk menyimpan data di luar talian.
3 Tidak membenarkan JavaScript berjalan di penyemak imbas. Membolehkan JavaScript berjalan di latar belakang. Ini mungkin kerana API pekerja JS Web dalam HTML5.
4 Grafik vektor boleh didapati dalam HTML dengan bantuan pelbagai teknologi seperti VML, Silver-light, Flash, dll. Grafik vektor juga merupakan bahagian yang tidak terpisahkan dari HTML5 seperti SVG dan kanvas.
5 Tidak membenarkan kesan drag and drop. Membolehkan kesan seret dan lepas.
6 Tidak mungkin melukis bentuk seperti bulatan, segi empat tepat, segitiga, dan lain-lain. HTML5 memungkinkan untuk melukis bentuk seperti bulatan, segi empat tepat, segitiga, dll.
7 Berfungsi dengan semua penyemak imbas lama. Disokong oleh semua penyemak imbas baru seperti Firefox, Mozilla, Chrome, Safari, dll.
8 Versi HTML yang lebih lama kurang mesra telefon bimbit. Bahasa HTML5 lebih mesra telefon bimbit.
9 Pengisytiharan Doctype terlalu panjang dan rumit. Pengisytiharan Doctype agak mudah dan ringkas.
10 Elemen seperti nav, header tiada. Elemen baru untuk struktur web seperti nav, header, footer dll.
11 Pengekodan watak yang panjang dan kompleks. Pengekodan watak yang ringkas dan mudah.
12 Hampir mustahil untuk mendapatkan Lokasi Geo sebenar pengguna dengan bantuan penyemak imbas. Seseorang dapat mengesan GeoLocation pengguna dengan mudah dengan menggunakan JS GeoLocation API.
13 Tidak dapat menangani sintaks yang tidak tepat. Mampu menangani sintaksis yang tidak tepat.
14 Atribut seperti charset, async, dan ping tidak ada dalam HTML. Atribut charset, async, dan ping adalah sebahagian daripada HTML 5.

Penambahbaikan pada Elemen HTML dalam HTML5, termasuk membuang elemen berikut :

#Elemen dalam HTMLElemen dalam HTML5
1 applet sama dengan: object
2acronymsama dengan: abbr
3dirsama dengan: ul
4framesetDipadamkan
5frameDipadamkan
6noframesDipadamkan
7strikeTidak ada tag baru. CSS digunakan untuk ini
8bigTidak ada tag baru. CSS digunakan untuk ini
9basefontTidak ada tag baru. CSS digunakan untuk ini
10fontTidak ada tag baru. CSS digunakan untuk ini
11centerTidak ada tag baru. CSS digunakan untuk ini
12ttTidak ada tag baru. CSS digunakan untuk ini

Atribut dalam HTML

Dalam HTML terdapat beberapa atribut yang biasa digunakan, penulis hanya akan memaparkan poin-poin secara garis besar untuk mempermudah penjelasan lain. Ia seperti:

  • CLASS
<div class="big-box yellow-box">Ini kotak kuning besar.</div>
  • ID
<div id="my-box">Ini kotak saya! Masukkan teks anda ke dalam kotak lain.</div>
  • HREF
<a href="http://google.com">Google itu!</a>
  • Body
<html>
  <head>
    <title>Contoh tag body</title>
  </head>
  <body>
    Ini ada dalam body!
  </body>
</html>
  • Children
<ul id="parent">
  <li id="child">Saya anak kepada ibu bapa!</li>
</ul>
  • Comments
<!-- Ini adalah komen HTML! -->
  • Div
<div>Ini adalah elemen div.</div>
  • Html
<!DOCTYPE html>
<html>

Bahagian html ini memuatkan kod sisi halaman web.

</html>
  • Head
<html>
  <!-- bahagian "head" -->
  <head>
  </head>
  <!-- bahagian "head" -->
  <body>
  </body>
</html>
  • Headings. Bahagian tajuk boleh mengandungi h1, h2, h3, h4, h5, atau h6. Inilah contohnya :
<h1> This is an H1 header ! </h1>
<h2> This is an H2 header! </h2>
<h3> This is an H3 header! </h3>
... and so on.

*Horizontal rules. Teks "hr" akan memberi ruang mendatar dengan garis hitam setebal 1px.

Teks blog anda.
<hr>
... teks seterusnya.
  • Hyperlinks
<a href="url this link goes to">Teks pautan</a>
Teks berikut <a href="http://google.com">pergi ke Google</a>.
  • Images
<img src="./assets/img/gambarsaya.png" class="style" alt="gambar saya">
  • Line breaks
<p> Sebilangan teks <br/> merangkumi dua garisan </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>

juga boleh diterjemahkan sebagai :

<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 perenggan! </p>
  • Semantic formatting
<p> <strong> Amaran: </strong> Asid boleh menyebabkan luka bakar yang serius </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'>kandungan</tag keyword>
  • Title
<title>Artikel Saya</title>

Tags: Kod Rujukan pada 13 September 2020

Komen

Forum Diskusi

Post a reply
3335 views

Balas ke diskusi ini