Cara menggunakan html pake bahasa apa?

Binar Academy - Tahukah kamu bahwa HTML sering digunakan oleh sebagian besar website yang ada saat ini? Oleh karena itu, penting buat kamu untuk belajar HTML. Apalagi jika kamu tertarik untuk membuat pemrograman website, HTML menjadi hal pertama yang wajib kamu kenal loh!

Table of Contents Show

Sebelum mulai, mari kita ketahui apa itu HTML!
Mempelajari HTML
Siapkan File HTML Pertama Kamu!
Struktur Dasar HTML
Mengenal Apa Itu HTML
Bagaimana Cara Kerja HTML
Kelebihan dan Kekurangan HTML
Kelebihan-kelebihan yang dimiliki HTML
Kekurangan-kekurangan yang dimiliki HTML
Kumpulan Tag-tag pada HTML
Contoh Pemrograman Menggunakan HTML
Kesimpulan dan Penutup
HTML menggunakan bahasa apa?
Bagaimana cara menggunakan HTML?
HTML dimulai dengan kode apa?
Apa saja yang dibutuhkan untuk belajar HTML?

Sebelum mulai, mari kita ketahui apa itu HTML!

Sumber: feeCodeCamp

HTML atau Hypertext Markup Language mempunyai peran untuk menentukan struktur tampilan dan konten dalam sebuah website. Tentunya HTML tidak bekerja sendiri untuk membangun sebuah website. Diperlukan juga CSS dan JavaScript untuk membuat tampilannya menjadi bagus dan interaktif.

Perlu diketahui bahwa syntax pada HTML selalu dimulai dengan tag di dalam <> dan diakhiri dengan tag .

Mempelajari HTML

Sumber: Computer Bild

Untuk mempelajari HTML, kamu perlu menyiapkan 2 tools, yaitu aplikasi text editor dan browser. Text editor berfungsi untuk menuliskan syntax dalam proses coding. Sementara browser berguna untuk melihat hasil kode yang sudah dibuat.

Text editor yang disarankan untuk belajar HTML antara lain Sublime, Notepad++, atau Visual Studio Code. Tapi jika kamu belum mempunyai semua aplikasi tersebut, kamu bisa mulai menggunakan Notepad saja. Sementara browser yang disarankan antara lain Firefox, Chrome, atau Edge.

Baca Juga: Perbedaan Coding dan Programming yang Perlu Diketahui

Siapkan File HTML Pertama Kamu!

Setelah menyiapkan tools diatas, maka mari kita mulai untuk membuat file HTML pertama kamu. Caranya gampang banget loh! Pertama, buka aplikasi text editor yang tadi sudah disiapkan. Kemudian ketik kode seperti contoh di bawah ini.

‍

Jika sudah selesai mengetik, simpan file tersebut dengan nama index.html.

Untuk melihat hasilnya, klik dua kali pada file yang sudah kamu buat tadi. Jika muncul pilihan aplikasi, pilihlah browser untuk membukanya. Maka di browser akan tampak “Halo Dunia!”.

Struktur Dasar HTML

Sumber: Unsplash

Coba perhatikan lagi kode yang sudah kamu ketik di text editor tadi. Di dalamnya terdapat tiga tag penting, yaitu , , dan . Ketiga tag inilah yang menjadi struktur utama atau struktur dasar penyusun HTML.

Deklarasi

Bagian yang pertama adalah deklarasi. Fungsinya untuk menyatakan jenis dokumen beserta dengan tipenya. Contoh di atas menggunakan deklarasi yang menandakan bahwa HTML yang digunakan adalah versi 5.

Di bawah tag tersebut ada . Tag wajib ada dalam setiap dokumen HTML. Tanpa tag tersebut, file HTML tidak bisa di compile dan output nya tidak akan tampil di browser. Sementara atribut lang=”en” menyatakan bahwa dokumen yang kamu buat berbahasa Inggris.

Tag ditutup dengan . Namun sebelum itu masih ada dua tag penting yang akan dibahas di bawah ini.

Head

Head adalah kepada dari file HTML. Pembentukan bagian head dimulai ketika kamu mengetik dan diakhiri dengan tag . Bagian head ini dipakai untuk menulis tag yang akan dibaca oleh mesin. Contoh tag tersebut antara lain:

Jika saat ini banyak sekali muncul beragam aplikasi digital baik di smartphone maupun laptop. Nah, dibalik sebuah aplikasi yang sering anda gunakan, terdapat bahasa pemrograman yang membentuk sebuah tampilan aplikasi. Bahasa pemrograman digunakan untuk menjalankan instruksi didalam komputer.

Apabila anda tidak suka menggunakan bahasa pemrograman terstruktur, anda dapat menggunakan bahasa pemrograman yang lebih fleksibel. Misalnya saja HTML, HTML bahkan dapat dengan mudah anda pelajari karena ekstensi ini mempunyai kumpulan tags yang mudah diingat.

Seorang programmer pasti sudah tidak asing dengan istilah HTML ini. Namun, apabila anda adalah seorang pemula, sangat dsarankan anda untuk mempelajari dasar – dasar yang membentuk sebuah program terlebih dahulu. Agar dalam membuat aplikasi nantinya, anda sudah dapat mengerti logika aplikasi tersebut. Lalu, Jika anda belum mengetahui secara lengkap tentang HTML. Yuk, simak artikel berikut ini.

Daftar Isi

Mengenal Apa Itu HTML

HTML merupakan sebuah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium. Untuk cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web.

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. Saat ini dalam pengembangannya HTML , sudah memsauki HTML 5 dan masih dikembangkan lagi untuk berbagai fiturnya.

Bagaimana Cara Kerja HTML

Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga user internet bisa melihat dan membacanya.

Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah.

Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.

Baca Juga : Panduan Lengkap Belajar Bahasa Pemrograman PHP untuk Pemula

Kelebihan dan Kekurangan HTML

Meskipun HTML sudah menjadi standar dalam website, seiring teknologi yang maju dan banyak prubahan-perubahan tentunya HTML sendiri memiliki kekurangan dan kelebihan.

Kelebihan-kelebihan yang dimiliki HTML

html merupakan bahasa yang bersifat cross-platform (bisa digunakan dibanyak platform) seperti: Linux, macOS, Windows, da lainnya. Karena HTML sendiri memiliki karakter ASCII, sehingga cukup ditulis dalam text editor,
html juga bersifat open-source (gratis),
merupakan bahasa markup yang rapih dan juga konsisten,
tidak memerlukan kopiler sehingga dijalankan secar alami disetiap web browser,
html sudah terintegrasi dengan bahasa lain seperti: Node.js, Php, Backend, Active Server Pages, VBScript, Tcl, Perl dan lainnya. Dengan begitu akan memperbagus dan juga memepercantik halaman web,
standar web resmi oleh world wide web consortium (W3C),
bisa menyisipkan gambar, animasi berupa java applet, hyperlink, dan banyak lagi.

Kekurangan-kekurangan yang dimiliki HTML

halaman yang dihasilkan statis, untuk itu jika kita ingin membuat halaman web yang dinami kita memerlukan
pemrograman lain seperti: Javascript, VBScript dan lainnya,
kurang cepat untuk fitur-fitur baru di beberapa browser,
memiliki banyak tag yang harus dipelajari.
halaman tidak interkaktif, untuk itu kita perlu pemrograman lain seperti: Perl atau Tcl.
Perilaku web browser dalam membaca document html susah diprediksi, contohnya browser lama yang tidak bisa merender tag-tag html yang baru.

Kumpulan Tag-tag pada HTML

Setelah anda mengetahui kekurangan hingga kelebihan dari HTML. Berikut ini adalah daftar tag-tag yang sering digunakan pada saat kita ingin membuat file HTML :

Nama TagKeterangan / KegunaanBasic<!DOCTYPE>Tag untuk menentukan tipe dokumen<html>Tag untuk membuat sebuah dokumen HTML<title>Tag untuk membuat judul dari sebuah halaman<body>Tag untuk membuat tubuh dari sebuah halaman<h1> to <h6>Tag untuk membuat heading<p>Tag untuk membuat paragraf<br>Memasukan satu baris putus<hr>Tag untuk membuat perubahan dasar kata didalam isi<!–…–>Tag untuk membuat komentarFormatting<acronym>Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)<abbr>Tag untuk membuat sebuah singkatan<address>Tag untuk membuat kontak alamat<b>Tag untuk membuat huruf bercetak tebal<bdi>Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)<bdo>Mengganti arah teks<big>Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)<blockquote>Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain<center>Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)<cite>Tag untuk membuat judul karya<code>Tag untuk membuat potongan kode komputer di antara text<del>Tag untuk membuat teks yang telah dihapus dari dokumen<dfn>Tag untuk membuat sebuah istilah definisi<em>Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)<font>Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)<i>Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood<ins>Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen<kbd>Tag untuk membuat input keyboard<mark>Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)<meter>Tag untuk membuat pengukuran skalar<pre>Tag untuk membuat teks terformat<progress>Memperlihatkan kemajuan tugas (tag baru HTML5)<q>Tag untuk membuat kutipan pendek<rp>Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)<rt>Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)<ruby>Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)<s>Tag untuk membuat teks yang tidak lagi benar<samp>Tag untuk membuat contoh keluaran dari program komputer<small>Tag untuk membuat teks kecil<strike>Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)<strong>Tag untuk membuat teks penting<sub>Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)<sup>Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)<time>Tag untuk membuat tanggal / waktu (tag baru HTML5)<tt>Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)<u>Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya<var>Tag untuk membuat sebuah variabel<wbr>Tag untuk membuat kemungkinan garis-putusForms<form>Tag untuk membuat sebuah form HTML untuk input pengguna<input>Tag untuk membuat sebuah kontrol input<textarea>Tag untuk membuat sebuah kontrol input multibaris (text area)<button>Tag untuk membuat sebuah tombol yang dapat diklik<select>Tag untuk membuat sebuah daftar drop-down<optgroup>Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down<option>Tag untuk membuat pilihan dalam daftar drop-down<label>Tag untuk membuat sebuah label untuk sebuah elemen <input><fieldset>Grup unsur terkait dalam bentuk<legend>Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details><datalist>Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)<keygen>Tag untuk membuat key-pair generator kolom input (tag baru HTML5)<output>Tag untuk membuat hasil penghitungan (tag baru HTML5)Frames<frame>Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)<frameset>Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)<noframes>Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)<iframe>Tag untuk membuat sebuah bingkaiImages<img>Tag untuk membuat gambar<map>Tag untuk membuat gambar-peta<area>Tag untuk membuat area dalam gambar-peta<canvas>Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)<figcaption>Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)<figure>Menentukan konten mandiri (tag baru HTML5)Audio/Video<audio>Tag untuk membuat isi suara (tag baru HTML5)<source>Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)<track>Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)<video>Tag untuk membuat sebuah video atau film (tag baru HTML5)Links<a>Tag untuk membuat hyperlink<link>Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)<nav>Tag untuk membuat navigasi link (tag baru HTML5)Lists<ul>Tag untuk membuat daftar dengan selain nomor<ol>Tag untuk membuat daftar dengan nomor<li>Tag untuk membuat sebuah item daftar<dir>Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)<dl>Tag untuk membuat sebuah daftar definisi<dt>Tag untuk membuat istilah (item) dalam daftar definisi<dd>Defines a description of an item in a definition list<menu>Tag untuk membuat deskripsi dari item dalam daftar definisi<command>Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)Tables<table>Tag untuk membuat tabel<caption>Tag untuk membuat sebuah caption tabel<th>Tag untuk membuat sebuah sel header tabel<tr>Tag untuk membuat baris dalam sebuah tabel<td>Tag untuk membuat sel dalam sebuah tabel<thead>Mengelompokan isi header dalam sebuah tabel<tbody>Mengelompokanisi tubuh dalam sebuah tabel<tfoot>Mengelompokan isi footer dalam sebuah tabel<col>Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup><colgroup>Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformatStyle/Sections<style>Tag untuk membuat informasi style untuk dokumen<div>Tag untuk membuat sebuah bagian dalam dokumen<span>Tag untuk membuat sebuah bagian dalam dokumen<header>Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)<footer>Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)<hgroup>Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)<section>Tag untuk membuat bagian dalam dokumen (tag baru HTML5)<article>Tag untuk membuat sebuah artikel (tag baru HTML5)<aside>Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)<details>Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)<dialog>Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)<summary>Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)Meta Info<head>Tag untuk membuat informasi tentang dokumen<meta>Tag untuk membuat metadata tentang dokumen HTML<base>Menentukan URL dasar / target untuk semua URL relatif dalam dokumen<basefont>Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)Programming<script>Tag untuk membuat script di sisi klien<noscript>Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien<applet>Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)<embed>Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5)<object>Tag untuk membuat sebuah objek yang ditanam<param>Tag untuk membuat sebuah parameter untuk objek

Contoh Pemrograman Menggunakan HTML

Nah, jika anda sudah mengetahui apa saja definisi dari HTML, dan memahami apa saja tags – tags yang penting dalam membangun HTML. Yuk, simak contoh penerapan tags pada pemrogaman berikut ini.

1. Dasar pemrograman web adalah dengan memasukan tag-tag seperti gambar di bawah,

- 1).Awalan untuk mulai mengkoding.
- 2) Untuk bagian atas web dalam berowser.
- 3) Untuk judul.
- 4).Untuk body/badan website dalam browser.
- 5)Untuk menandai dalam css/style web. Mulailah dengan (<…>…..<…/>) .

2. Save program yang anda buat tadi.

3. Lalu simpanlah program dengan diakhiran .html. Seperti gambat di bawah.

4. Setelah di save bukalah program yang anda buat maka anda akan langsung membuka browser dan program yang anda buat tadi akan masuk ke browser.

5. Selesai!

Baca Juga : Tutorial Cara Menggunakan XAMPP untuk Menjalankan PHP & MySQL

Kesimpulan dan Penutup

HTML merupakan sebuah dokumen yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Bagi anda yang ingin membuat website, HTML merupakan ekstensi yang cocok untuk anda.

Cara kerja HTML ini ialah,Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga user internet bisa melihat dan membacanya.

Jika nantinya anda ingin menampilkan sebuah perintah, anda dapat menyesuaikan dengan bahasa pemrograman yang anda gunakan. Perlu di ingat bahwa dalam menyimpan file .html, anda wajib menghafal apa saja isi dari file tersebut. Jika anda salah dalam menggunakan file yang dimaksud, maka website anda akan error nantinya. Selamat Mencoba!

HTML menggunakan bahasa apa?

HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal dengan SGML (Standard Generalized Markup Language). SGML adalah sebuah standar internasional untuk membuat dokumen dengan tanda (markup) seperti paragraf, list, heading, dan lain-lain.

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

HTML dimulai dengan kode apa?

Penjelasan: Kode diatas dimulai dengan tag html, didalamnya terdapat tag body. Di dalam tag body terdapat tag p untuk membuat paragraf. Agar lebih jelas berikut ini contoh penulisan elemen bersarang yang salah.