Apa itu HTML

PROFIL PENULIS Nama : Muhamad Gyo Prastyo Tempat Tanggal Lahir : Semarang, 20 Mei 2007 Nama : Ganis Dwi Setiawan Tempat Tanggal Lahir : Semarang, 10 Juli 2007

KATA PENGANTAR Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha Penyayang, kami panjatkan puja dan puji syukur atas kehadirat-Nya, yang telah melimpahkan rahmat, hidayah, dan inayah-Nya kepada kami, sehingga kami dapat menyelesaikan e-Book tentang HTML. e-Book ini telah kami susun dengan maksimal dan mendapatkan bantuan dari berbagai pihak sehingga dapat memperlancar pembuatan e-Book ini. Untuk itu kami menyampaikan banyak terima kasih kepada semua pihak yang telah berkontribusi dalam pembuatan e-Book ini. Terlepas dari semua itu, kami menyadari sepenuhnya bahwa masih ada kekurangan baik dari segi susunan kalimat maupun tata bahasanya. Oleh karena itu dengan tangan terbuka kami menerima segala saran dan kritik dari pembaca agar kami dapat memperbaiki e-Book ini Akhir kata kami berharap semoga e-Book tentang HTML ini dapat memberikan manfaat maupun inspirasi terhadap pembaca.

DAFTAR ISI PENGERTIAN ......................................................................................................... 5 SEJARAH ................................................................................................................. 6 HTML PADA WEBSITE........................................................................................ 7 PENGERTIAN TAG HTML DAN FUNGSINYA ............................................... 8 TAG INLINE ............................................................................................................ 9 APA YANG MEMBEDAKAN HTML DENGAN HTML5? ............................ 10 HUBUNGAN HTML, CSS, DAN JavaScript ..................................................... 11 FUNGSI HTML ..................................................................................................... 12 BAGAIMANA CARA HTML BEKERJA ? ....................................................... 13

PENGERTIAN HTML adalah bahasa standar pemrogaman yang digunakan untuk Gambar 1.00 membuat halaman website, yang diakses melalui internet. Singkatan dari Logo HTML 5 \"Hypertext Markup Language\" atau \"bahasa markup\". https://commons.wikimedi a.org/wiki/File:HTML5_B Dilansir Techterms, \"Hypertext\" mengacu pada hyperlink yang mungkin adge.svg terdapat dalam halaman HTML. Bahasa markup ini mengacu pada cara tag yang digunakan, untuk menentukan tata letak halaman dan elemen di dalam halaman. HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan bisa dipahami oleh para pengguna internet. Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai metode yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan atau simbol yang muncul di halaman website. Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut akan muncul dengan huruf tebal atau bold di laman website. Melansir dari Nesabamedia, 'language' berarti bahasa pemrograman atau script. Disusun dari tag-tag tertentu yang akan diterjemahkan dalam teks atau visual yang bisa dilihat di website.

SEJARAH Sejarah HTML diciptakan oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Versi pertama HTML dirilis oleh Tim Berners Lee pada tahun 1991, yang memiliki 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag dan attribute (tag modifier) yang juga baru. Ketika bekerja dengan bahasa markup ini, Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p> dan tag penutup </p>. Gambar 1.01 | Tag HTML Source : https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya Spesifikasi HTML dikelola dan dikembangkan oleh World Wide Web Consortium (W3C). Berdasarkan HTML Element Reference milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun sebagiannya sudah tidak lagi didukung oleh beberapa versi terbaru browser. Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan diperkenalkannya HTML5, terdapat semantic baru seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam konten. Nah, setelah Anda tahu apa itu HTML, selanjutnya adalah membahas cara kerjanya.

HTML PADA WEBSITE Ekstensi file HTML adalah .html atau .htm, yang bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga user internet bisa melihat dan membacanya. Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak memiliki dokumennya sendiri - sendiri. Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut juga elements), yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat hierarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya. Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>. Berikut contoh kode dari susunan atau struktur HTML: Gambar 1.02 | Susunan atau Struktur HTML Source : https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya  Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.  Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).  Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.

 Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar. Selain itu, beberapa contoh penggunaan umum HTML adalah:  Pengembangan web. Developer menggunakan kode HTML untuk mendesain tampilan elemen halaman web di browser, seperti teks, hyperlink, dan file media.  Navigasi internet. Pengguna bisa menelusuri dan menyisipkan link antara halaman dan website terkait karena HTML banyak digunakan untuk menyematkan hyperlink.  Dokumentasi web. HTML bisa digunakan untuk mengatur dan memformat dokumen, mirip dengan Microsoft Word. PENGERTIAN TAG HTML DAN FUNGSINYA Tag HTML memiliki dua tipe utama: block-level dan inline tags. 1. Elemen block-level memakai semua ruang yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag block adalah heading dan paragraf. 2. Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings. TAG BLOCK LEVEL Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>. 1. Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML. 2. Tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman. 3. Tag <body></body> melampirkan semua konten yang muncul pada suatu halaman. Gambar 1.03 | Tag Block Level HTML Source : https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya

 Heading memiliki 6 level. Level tersebut bervariasi, mulai dari <h1></h1> sampai <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.  Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.  Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar daftar tidak berurutan dalam HTML: Gambar 1.04 | Tag Daftar Tidak Berurutan Dalam HTML Source : https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya TAG INLINE Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italic. Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link: Gambar 1.05 | Hyperlink HTML Source : https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya: Gambar 1.06 | Tag Inline Gambar HTML Source : https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya

APA YANG MEMBEDAKAN HTML DENGAN HTML5? Sejak pertama diperkenalkan, bahasa ini telah melewati perkembangan yang cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak sejarah dan mengukuhkan keberadaannya. HTML4 (dikenal sebagai “HTML”) dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014, yaitu HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini. Salah satu fitur canggih di HTML5 adalah dukungan untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa menyematkan file video dan audio ke halaman website dengan memanfaatkan tag <audio></audio> dan <video></video>. Fitur tersebut juga memiliki dukungan bawaan untuk SVG dan MathML untuk rumus matematika dan ilmiah. HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang tak hanya bermanfaat bagi pembaca, tapi juga mesin pencari. Tag semantic yang paling banyak digunakan adalah <article></article>, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>. KELEBIHAN DAN KEKURANGAN HTML Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya. Berikut kelebihan HTML:  Digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.  Dijalankan secara alami di setiap web browser.  Mudah dipelajari.  Open-source dan sepenuhnya gratis.  Rapi dan konsisten.  Menjadi standar resmi web, dikelola oleh (W3C).  Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js. Kemudian, kekurangan HTML adalah:  Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.

 Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.  Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.  Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak selalu bisa merender tag yang lebih baru. HUBUNGAN HTML, CSS, DAN JavaScript Meskipun dinyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa digunakan untuk menambah elemen dan membuat struktur konten. Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan memberikan fungsi yang lebih canggih.  CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi.  JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti slider, pop- up, dan galeri foto. Jika digambarkan, berikut perbedaan HTML dan CSS dan JavaScript: HTML adalah orang yang tidak mengenakan busana apa pun, kemudian CSS adalah bajunya, kemudian JavaScript adalah aktivitas dan sikap orang tersebut.

FUNGSI HTML 1. Membuat halaman website Fungsi pertama dari HTML adalah membuat halaman website. Jika kamu ingin mengembangkan suatu halaman website yang bisa dibaca dan dipahami dengan baik oleh pengguna internet, maka kamu wajib menggunakan HTML. 2. Sebagai dasar website Website yang kamu buat tentu memiliki beberapa fitur. Misalnya, dibuat menggunakan java script untuk mengatur perilaku web, menggunakan bahasa pemrograman server PHP, dan melakukan desain website menggunakan CSS, semua bahasa ini dapat diimplementasikan jika web memiliki bahasa HTML sebagai dasarnya. 3. Menandai teks pada halaman website Selanjutnya, fungsi HTML adalah untuk penulisan pada suatu halaman dokumen dengan tag dan simbol tertentu. Simbol dan tag tersebut biasanya yang menampilkan teks menjadi tebal, miring, bergaris dan lain sebagainya. Misalnya jika ingin membuat suatu teks menjadi teks miring atau italic di laman HTML harus ditulis kode <italic>. 4. Menampilkan media (video, gambar, tabel, dan lain-lain) di website Website yang menarik tentunya berisi video, gambar, tabel dan media lainnya. Biasanya tabel, gambar atau video tidak bisa langsung diletakkan di halaman website atau blog karena membutuhkan komponen tertentu yang menggunakan bahasa HTML. Dengan HTML ini lah kamu bisa menampilkan berbagai media sesuai kebutuhan. 5. Memungkinkan pengguna untuk diarahkan ke website lain Fungsi HTML tak hanya berhenti di empat poin tadi, kegunaan lain dari HTML adalah mengarahkan pengguna untuk mengakses halaman atau website lain melalui teks atau perintah tertentu. Fungsi HTML berikut disebut dengan hyperlink.

BAGAIMANA CARA HTML BEKERJA ? Pertama, cara kerja HTML adalah dimulai dari format file. File HTML selalu diakhiri dengan ekstensi .html atau .htm. Ekstensi ini biasanya bisa dilihat menggunakan web browser apa saja (Google Chrome, Safari, atau Mozilla Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga user internet dapat melihat dan membacanya. Biasanya, situs-situs akan menyertakan sejumlah halaman HTML yang berbeda-beda dan terdiri dari banyak halaman. Sebagai contohnya, halaman beranda (home), tentang kami, halaman kontak, blog dan lain sebagainya. Nah, masing-masing halaman berikut memiliki beberapa tags atau elemen yang disusun untuk membentuk sebuah halaman website. Tag tersebut akan membuat hierarki yang menyusun konten hingga menjadi sebuah bagian paragraf, ada heading, block dan konten lainnya. Lalu, elemen bahasa markup ini umumnya memiliki tag pembuka dan penutup menggunakan syntax <tag></tag>. Langkah terakhir dari cara kerja HTML adalah kamu perlu membuat websitenya online agar bisa diakses orang lain. Browser akan membaca dan merender file HTML menjadi tampilan sebuah website. Para visitor websitemu pun akan mudah membaca dan mendapatkan informasi yang mereka butuhkan. KESIMPULAN Sampai di sini, Anda sudah mempelajari apa itu HTML, pengertiannya, dan cara kerjanya. HTML adalah bahasa markup, bukan bahasa pemrograman, dan tidak memiliki kemampuan untuk membuat fungsionalitas yang dinamis. Dengan bahasa markup ini, user bisa mengelola dan memformat dokumen secara statis, sama seperti Microsoft Word. Berdasarkan cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web (menggunakan coding sederhana). HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa Anda tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript.

DAFTAR PUSAKA https://www.hostinger.co.id/tutorial/apa-itu-html#Pengertian_HTML_dan_Sejarahnya https://www.jagoanhosting.com/blog/html- adalah/#:~:text=HTML%20adalah%20singkatan%20dari%20Hypertext,link%20pada%20suatu%20we b%20page