Tutorial Lengkap Belajar HTML Dasar Untuk Pemula

HTML adalah bahasa markup utama untuk menggambarkan struktur halaman web. HTML menjadi bahasa paling penting dalam pembuatan sebuah website.

Pengertian HTML

HTML adalah singkatan dari HyperText Markup Language. HTML adalah blok bangunan dasar dari World Wide Web.

Hypertext adalah teks yang ditampilkan di komputer atau perangkat elektronik lainnya dengan referensi ke teks lain yang dapat segera diakses pengguna, biasanya dengan klik mouse atau penekanan tombol.

Selain teks, hypertext dapat berisi tabel, daftar, formulir, gambar, dan elemen presentasi lainnya. Ini adalah format yang mudah digunakan dan fleksibel untuk berbagi informasi melalui Internet.

Bahasa markup menggunakan set tag markup untuk mengkarakterisasi elemen teks dalam dokumen, yang memberikan instruksi kepada browser web tentang bagaimana dokumen seharusnya muncul.

HTML awalnya dikembangkan oleh Tim Berners-Lee pada tahun 1990. Dia juga dikenal sebagai bapak web. Pada tahun 1996, World Wide Web Consortium (W3C) menjadi otoritas untuk mempertahankan spesifikasi HTML. HTML juga menjadi standar internasional ( ISO ) pada tahun 2000. HTML5 adalah versi terbaru dari HTML. HTML5 menyediakan pendekatan yang lebih cepat dan lebih kuat untuk pengembangan web.

Kegunaan HTML

Ada banyak hal yang dapat Anda lakukan dengan HTML.

  • Anda dapat mempublikasikan dokumen secara online dengan teks, gambar, daftar, tabel, dll.
  • Anda dapat mengakses sumber daya web seperti gambar, video atau dokumen HTML lainnya melalui hyperlink.
  • Anda dapat membuat formulir untuk mengumpulkan input pengguna seperti nama, alamat email, komentar, dll.
  • Anda dapat memasukkan gambar, video, klip suara, film flash, aplikasi, dan dokumen HTML lainnya langsung di dalam dokumen HTML.
  • Anda dapat membuat versi offline situs web Anda yang berfungsi tanpa internet.
  • Anda dapat menyimpan data di browser web pengguna dan mengakses nanti.
  • Anda dapat menemukan lokasi pengunjung situs web Anda saat ini.

Daftar tidak berakhir di sini, ada banyak hal menarik lainnya yang dapat Anda lakukan dengan HTML. Anda akan mempelajari semuanya secara rinci di bab-bab mendatang.

[irp]

Elemen HTML

Elemen HTML mewakili semantik, atau makna. Misalnya, title Elemen tersebut mewakili judul dokumen. Sebagian besar elemen HTML ditulis dengan tag awal (atau tag pembuka) dan tag akhir (atau tag penutup), dengan konten di antaranya.

Elemen juga dapat berisi atribut yang menentukan properti tambahan elemen. Misalnya, paragraf, yang diwakili oleh pelemen, akan ditulis sebagai:

Catatan: Semua elemen tidak memerlukan tag akhir untuk hadir. Ini disebut sebagai elemen kosong , elemen yang menutup sendiri atau elemen yang tidak berlaku .

Tag HTML Vs Elemen

Secara teknis, elemen HTML adalah kumpulan tag awal, atributnya, tag akhir dan semua yang ada di antaranya. Di sisi lain, tag HTML baik membuka atau menutup digunakan untuk menandai awal atau akhir suatu elemen.

Namun, dalam penggunaan umum, istilah elemen HTML dan tag HTML dapat dipertukarkan, misalnya tag adalah elemen adalah tag. Demi kesederhanaan situs web ini, istilah “tag” dan “elemen” digunakan untuk mengartikan hal yang sama – karena akan menentukan sesuatu di halaman web Anda.

Ketidaksensitifan Tag dan Atribut HTML

Dalam HTML, nama tag dan atribut tidak peka huruf besar-kecil. Ini berarti tag <P>, dan tag <p>mendefinisikan hal yang sama dalam HTML yang merupakan paragraf.

Tetapi dalam XHTML mereka peka huruf besar-kecil dan tag <P>berbeda dari tag <p>.

Kiat: Kami merekomendasikan penggunaan huruf kecil untuk tag dan mengaitkan nama dalam HTML, karena dengan melakukan ini Anda dapat membuat dokumen Anda lebih sesuai untuk pemutakhiran di masa mendatang.

Atribut

Parameter tertentu sering disertakan dalam tag pembuka untuk memberikan properti elemen tambahan (seperti pewarnaan, pengukuran, lokasi, perataan, atau tampilan lainnya) ke data di antara tag markup. Parameter ini disebut Atribut .

Nilai Atribut

Sebagian besar atribut membutuhkan nilai. Dalam HTML, nilainya dapat dibiarkan tanpa tanda kutip  name=value jika tidak menyertakan spasi ( ), atau dapat dikutip dengan tanda kutip tunggal atau ganda ( name='value'atau name="value"). Disarankan untuk menyertakan nilai atribut dalam tanda kutip.

Contoh Atribut

Dalam contoh di bawah,  href adalah atribut dan tautan yang disediakan adalah nilainya.

Tautan HTML didefinisikan dengan <a> tag. Anda akan belajar tentang tautan di tutorial selanjutnya.

Catatan: Nilai atribut umumnya tidak peka terhadap huruf besar-kecil, kecuali nilai atribut tertentu, seperti atribut id dan class. Namun, Konsorsium World Wide Web (W3C) merekomendasikan huruf kecil untuk nilai atribut dalam spesifikasinya.

Heading

Heading di dalam struktur HTML berfungsi sebagai Judul. Judul membantu dalam menentukan hierarki dan struktur halaman web. HTML menggunakan enam level tag heading <h1> untuk <h6>; semakin tinggi angka tingkat pos, semakin penting artinya – jadi <h1> tentukan pos yang paling penting, sedangkan pos <h6> yang paling tidak penting dalam dokumen.

Pentingnya Heading / Judul

  • Judul HTML memberikan informasi berharga dengan menyoroti topik-topik penting dan struktur dokumen.
  • Jangan gunakan judul untuk membuat teks BESAR atau tebal. Gunakan hanya untuk menyorot judul dokumen Anda dan untuk menunjukkan struktur dokumen.
  • Karena mesin pencari menggunakan judul untuk mengindeks struktur dan konten halaman web Anda, jadi gunakan dengan sangat bijak di halaman web Anda.
  • Gunakan <h1>pos sebagai pos utama, diikuti dengan <h2>pos, kemudian pos yang kurang penting <h3>, dan sebagainya.

Tip: Dokumen pada umumnya harus memiliki tepat satu <h1>elemen untuk menandai tajuk paling penting, diikuti oleh <h2><h3>dan seterusnya.

Paragraf

Penulisan Paragraf

Elemen paragraf yang digunakan untuk mempublikasikan teks di halaman web. Paragraf didefinisikan dengan <p>. Tag paragraf sangat mendasar dan biasanya tag pertama yang Anda perlukan untuk mempublikasikan teks Anda di halaman web.

Catatan: Browser style sheet bawaan secara otomatis membuat spasi di atas dan di bawah konten paragraf, tetapi Anda bisa mengaturnya menggunakan CSS.

HTML Line Break

The <br>elemen digunakan untuk menyisipkan baris baru tanpa memulai sebuah paragraf baru.

Komentar pada HTML

Komentar biasanya ditambahkan dengan tujuan membuat kode sumber lebih mudah dimengerti. Ini dapat membantu pengembang lain (atau Anda di masa depan ketika Anda mengedit kode sumber) untuk memahami apa yang Anda coba lakukan dengan HTML. Komentar penting bagi pemrogram tetapi biasanya diabaikan oleh browser.

Komentar HTML dimulai dengan <!--, dan diakhiri dengan -->, Lihat contoh di bawah ini:

Tautan

Membuat Tautan HTML

Tautan atau hyperlink adalah koneksi dari satu sumber daya web ke web yang lain. Tautan kadang disebut dengan link atau hyperlink. Tautan memungkinkan pengguna untuk berpindah dari satu halaman ke halaman lainnya, dari alamat web satu ke web lainnya di server mana saja di dunia. Tautan memiliki dua ujung yang disebut anchor (jangkar) dan arah (direction). Tautan dimulai pada jangkar sumber dan menunjuk ke jangkar tujuan, yang dapat berupa sumber daya web apa pun (misalnya gambar, klip audio atau video, dokumen HTML atau elemen dalam dokumen itu sendiri, dll.).

Sintaks Tautan HTML

Tautan ditentukan dalam HTML menggunakan <a>.

Tautan atau hyperlink dapat berupa kata, grup kata, atau gambar.

Atribut href di sumber menentukan alamat url tujuan.

Atribut Target dari Tautan

Atribut target memberitahu browser tempat membuka dokumen yang ditautkan. Ada empat target yang ditentukan. Setiap target dimulai dengan garis bawah ( _): _blank_parent_self_top.

Pemformatan

Menggunakan tag pemformatan teks Anda dapat membuat beberapa teks pada halaman web Anda tampil berbeda dari konten teks normal.

Tag Pemformatan HTML

Ada beberapa tag yang ada di HTML untuk memformat teks, seperti <b><i>dll. Tag pemformatan ini dapat membuat teks tebal, miring, sub / ditulis dengan huruf besar, dan banyak lagi.

Tag <strong> biasanya menjadikan sebagai <b>, dan <em>menjadikan sebagai <i>. Namun, ada perbedaan dalam arti tag ini.

Catatan: Tag <strong> dan  <em> merupakan tag logika. Gunakan tag ini ketika konten halaman Anda mengharuskan kata atau frasa tertentu ditekankan, dan jika Anda ingin menyorot kata-kata hanya untuk efek visual, gunakan tag <b> dan <i>.

Tag Format Teks HTML

Tanda Deskripsi
<b> Menentukan teks tebal.
<del> Menentukan teks yang dihapus.
<em> Menentukan teks yang ditekankan.
<i> Menentukan teks miring.
<ins> Menentukan teks yang disisipkan.
<mark> Menentukan teks yang ditandai / disorot.
<small> Menentukan teks kecil.
<strong> Menentukan teks yang kuat.
<sub> Menentukan teks subskrip.
<sup> Menentukan teks superskrip.

Kutipan HTML, Kutipan, dan Tag Definisi

Tanda Deskripsi
<abbr> Mendefinisikan singkatan.
<address> Menentukan informasi kontak untuk penulis / pemilik dokumen.
<bdo> Menentukan arah teks.
<blockquote> Menentukan kutipan panjang.
<q> Menentukan kutipan pendek.
<cite> Menentukan kutipan.
<dfn> Menentukan istilah definisi.

Tag Output Komputer HTML

Tanda Deskripsi
<code> Menentukan teks kode komputer.
<kbd> Menentukan teks keyboard.
<samp> Menentukan contoh kode komputer.
<var> Mendefinisikan sebuah variabel.
<pre> Menentukan teks yang telah diformat sebelumnya.

Styling

Aturan style/gaya menjelaskan bagaimana sebuah dokumen ditampilkan di browser web. HTML sangat terbatas dalam hal presentasi dokumen. Awalnya dirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada Desember 1996 oleh W3C , untuk memberikan cara yang lebih baik untuk menata elemen HTML.

Dengan CSS, menjadi mudah untuk menentukan warna yang digunakan untuk teks dan latar belakang, ukuran dan gaya untuk font, jumlah spasi/jarak antara elemen, menambahkan batas dan garis besar pada elemen dan sejumlah gaya lainnya.

Metode Menambahkan Style

Ada 3 metode untuk menambahkan style pada dokumen HTML.

Inline Styling – Menambahkan atribut style dalam tag HTML.

Contoh :

 

Embedded Styling – Menggunakan <style> elemen di bagian title.

Contoh :

 

External Style Sheet – Menggunakan elemen <link> untuk mengarahkan ke file CSS eksternal.

Contoh :

Import CSS

Gambar

Web bukan hanya berisi teks, multi-media dan fitur multimedia HTML memungkinkan Anda untuk memasukkan gambar, klip audio, klip video, dan elemen multimedia lainnya di halaman web.

Tag <img> digunakan untuk menyisipkan gambar dalam dokumen HTML. Sintaks <img> dapat diberikan dengan:

Contoh memasukkan beberapa gambar dalam HTML

Catatan: Seperti <br><img>elemen juga merupakan elemen kosong , dan tidak memiliki tag penutup. Dalam XHTML menutup sendiri diakhiri dengan ” />“.

Mengatur Lebar dan Tinggi Gambar

Atribut lebar dan tinggi digunakan untuk menentukan tinggi dan lebar gambar. Nilai atribut ditentukan dalam piksel secara default.

Tag Gambar HTML

TandaDeskripsi<img>Menentukan gambar.<map>Menentukan gambar-peta.<area>Menentukan area yang dapat diklik di dalam peta-gambar.

Tabel

Tabel HTML memungkinkan untuk mengatur data seperti, teks, gambar, tautan, formulir, bidang formulir, tabel lain, dll. ke dalam baris dan kolom sel.

Tabel dalam HTML didefinisikan dengan tag  <table>.

Tabel dibagi menjadi baris dengan <tr>, yang merupakan singkatan dari baris tabel, dan setiap baris dibagi menjadi sel data dengan <td>, yang merupakan singkatan dari data tabel.

Sebuah <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll

Catatan: Peramban gaya bawaan akan menampilkan teks dalam <th> elemen sebagai tebal dan terpusat. Tapi, Anda bisa mengganti style sheet default browser menggunakan CSS .

List

List atau daftar di dalam HTML digunakan untuk mengelompokkan informasi yang terkait bersama. List pada HTML digunakan untuk menyajikan daftar informasi dengan cara yang baik dan semantik. Ada tiga jenis daftar dalam HTML dan masing-masing memiliki tujuan dan makna tertentu:

  • Unordered list (Daftar tidak berurutan) – Digunakan untuk mengelompokkan satu set item terkait, tanpa urutan tertentu.
  • Ordered list (Daftar yang berurutan) – Digunakan untuk mengelompokkan satu set item terkait, dalam urutan tertentu.
  • Description list (Daftar deskripsi) – Digunakan untuk menampilkan daftar istilah dan deskripsinya.

Unordered List (ul)

Unordered list yaitu digunakan untuk menulis daftar tidak berurutan, dibuat menggunakan <ul>tag, dan setiap item daftar dimulai dengan <li>tag.

Item daftar dalam daftar tidak berurutan ditandai dengan peluru (lingkaran hitam kecil), secara default.

Output dari contoh di atas akan terlihat seperti ini:

  • Kue Cokelat
  • Kue Bolu
  • Kue Nanas

Ordered List (ol)

Ordered List yaitu digunakan untuk membuat daftar yang diurutkan, dibuat menggunakan <ol>, dan setiap item daftar dimulai dengan <li>. Daftar yang dipesan berisi informasi di mana pesanan harus ditekankan.

Item daftar dalam daftar yang diurutkan ditandai dengan angka.

Output yang dihasilkan dari contoh di atas yaitu :

  1. Campur bahan
  2. Panggang dalam oven selama satu jam
  3. Diamkan selama sepuluh menit

Description list (dl)

Description list atau  daftar definisi adalah daftar item, dengan deskripsi setiap item.

Daftar definisi dibuat menggunakan <dl>. Tag <dl> digunakan dalam hubungannya dengan <dt>– mendefinisikan item dalam daftar, dan <dd>menjelaskan item dalam daftar:

Output dari contoh di atas akan terlihat seperti ini:

Roti
Makanan panggang yang terbuat dari tepung.
Kopi
Minuman yang dibuat dari biji kopi panggang.

Form

Form / Formulir HTML adalah bagian dari dokumen yang berisi kontrol interaktif yang memungkinkan pengguna untuk mengirimkan informasi ke server web.

Formulir HTML diperlukan untuk mengumpulkan berbagai jenis input pengguna, seperti detail kontak seperti nama, alamat email, nomor telepon, atau detail seperti informasi kartu kredit, dll.

Formulir berisi elemen khusus yang disebut kontrol seperti kotak input, kotak centang, tombol radio, tombol kirim, dll. Pengguna umumnya mengisi formulir dengan memodifikasi kontrolnya misalnya memasukkan teks, memilih item, dll. Dan mengirimkan formulir ini ke server web untuk diproses.

tag <form> digunakan untuk membuat bentuk HTML. Berikut ini contoh form input sederhana :

Elemen input

Ini adalah elemen yang paling umum dan sering digunakan dalam formulir HTML.

Ini memungkinkan Anda untuk menentukan berbagai jenis bidang input pengguna, tergantung pada atribut tipe. Elemen input dapat berupatext fieldcheckboxpassword fieldradio buttonsubmit buttonreset button , dll. Dan beberapa type input baru yang diperkenalkan dalam HTML5.

Jenis input yang paling banyak digunakan dijelaskan di bawah ini.

Input Teks

Catatan: Tag<label> untuk menentukan label untuk <input> elemen. Jika Anda ingin pengguna memasukkan beberapa baris, Anda harus menggunakan  <textarea>.

Demo Input Text

Input Password

Demo input password

Input Radio

Tombol radio digunakan untuk membiarkan pengguna memilih satu opsi dengan tepat dari serangkaian opsi yang ditentukan sebelumnya. Itu dibuat menggunakan <input>elemen yang typeatributnya memiliki nilai radio.

Catatan: Jika Anda ingin mengizinkan pengguna Anda memilih lebih dari satu opsi secara bersamaan, Anda harus menggunakan kotak centang (checkbox) sebagai gantinya.

Input Checkbox

Checkbox atau kotak centang memungkinkan pengguna untuk memilih satu opsi atau lebih dari serangkaian opsi yang ditentukan sebelumnya. Itu dibuat menggunakan <input> elemen yang type atributnya memiliki nilai checkbox.

Demo Checkbox

File Select box

Input File memungkinkan pengguna untuk mencari file lokal dan mengirimkannya sebagai lampiran ke data formulir. Biasanya ditampilkan sebagai kotak teks dengan tombol yang memungkinkan pengguna untuk mencari file. Namun, pengguna juga dapat mengetik lintasan dan nama file di kotak teks.

File box juga dibuat menggunakan <input> elemen, yang nilai type atributnya diset file.

Elemen Textarea

Textarea adalah kontrol input teks beberapa baris yang memungkinkan pengguna untuk memasukkan lebih dari satu baris teks. Kontrol input teks multi-baris dibuat menggunakan elemen <textarea>.

Demo Textarea

Elemen Select

Kotak pilih adalah daftar pilihan yang memungkinkan pengguna untuk memilih satu atau lebih opsi dari daftar pilihan yang ada. Kotak pilih dibuat menggunakan elemen <select> dan elemen <option>. Elemen opsi dalam <select> menentukan setiap item daftar.

iFrame

Penggunaan iFrame

Iframe digunakan untuk menampilkan halaman web di dalam halaman web lain

Frame iframe atau inline digunakan untuk menampilkan objek eksternal termasuk halaman web lain dalam halaman web. Sintaks dasar untuk menambahkan iframe dapat diberikan dengan:

URL menunjuk ke lokasi objek eksternal atau halaman web.

Mengatur Lebar dan Tinggi iframe

The heightdan widthatribut yang digunakan untuk menentukan tinggi dan lebar iframe.

Catatan: Nilai atribut widthdan heightditetapkan dalam piksel secara default, tetapi Anda juga dapat mengatur nilai dalam persentase (seperti “50%”).

Menghilangkan border iFrame

Attribut frameborder menentukan apakah ada atau tidak garis tepi iframe. Atribut ini bernilai 0 atau 1. Nilai default 1 menghasilkan garis tepi sementara nilai 0 menghapus perbatasan dari iframe.