STECHOQ TRAINING CENTER
1. HTML - Browser.html
HTML & Browser
Apa itu HTML dan Browser?
HTML (Hypertext Markup language), yap seperti yang kita ketahui jika HTML merupakan bahasa markup atau markah. Jadi HTML bukanlah bahasa pemrograman melainkan bahasa markah. Lalu kenapa kita harus belajar HTML? Dengan HTML kita dapat membuat sebuah halaman web dan menampilkan informasi yang ingin kita sampaikan di website, sedangkan maksud dari hypertext di sini adalah HTML dapat membantu kita menuju halaman lain dengan kode unik.
Kalian pasti sudah tidak asing lagi dengan browser, kita dapat mengakses berbagai informasi dengan browser, entah kita mengaksesnya dengan cara memasukkan keyword di dalamnya atau kita juga bisa mengaksesnya dengan link yang dibagikan oleh teman kita misalnya. Nah, dengan HTML website yang sudah kita buat dapat diakses oleh semua orang, karena kita dapat membuat kode unik atau yang kita kenal dengan link menggunakan tag HTML, nanti kita akan belajar lebih lanjut mengenai tag HTML
HTML Element
Dari gambar di atas dapat kita lihat jika elemen HTML terdiri dari tag pembuka <button> dan penutup </button>, tag di sini berfungsi untuk menentukan apa yang ingin kita buat, kemudian ada juga atribut dan yang terakhir adalah konten, konten berisi informasi yang ingin kita sampaikan menggunakan tag HTML tersebut.
Setelah kita mengenal HTML element ada juga empty HTML element, jika sebelumnya ada tag pembuka dan tag penutup namun tidak pada empty html element ini, contohnya <img />, tag img tidak membutuhkan tag pembuka dan penutup, kita bisa langsung menuliskan konten dan juga atribut dalam tag tersebut.
HTML Attribute
Masih ingat dengan materi sebelumnya? Di dalam tag html terdapat atribut yang dituliskan di dalam tag pembuka html. Apa fungsi dari atribut? Dengan atribut kita bisa mengatur text. styling text, memberi warna pada background, mengatur posisi elemen html, dan masih banyak lagi.
Atribut ditulis menggunakan kata khusus. sesuai dengan apa yang ingin kita lakukan dengan isi konten di dalam tag html tersebut.
Ada beberapa jenis atribut yang perlu kalian ketahui, namun kali ini kita akan mengenal dua atribut terlebih dahulu. Yuk kita simak!
Atribut Global
Merupakan atribut yang dapat digunakan pada seluruh elemen
|
class |
Menentukan class CSS yang akan digunakan |
|
id |
Menentukan id unik untuk elemen |
|
dir |
Menentukan arah teks (dari kiri ke kanan atau sebaliknya) |
|
accesskey |
Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen |
|
contenteditable |
Menentukan isi elemen bisa diedit atau tidak |
|
data-* |
Digunakan untuk menyimpan data |
|
draggable |
Menentukan apakah elemen bisa di drag atau tidak |
|
hidden |
Untuk menyembunyikan element |
|
lang |
Untuk menentukan bahasa yang digunakan di dalam elemen |
|
style |
Menentukan inline CSS untuk elemen |
|
tabindex |
Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan) |
|
tittle |
Menentukan informasi tambahan tentang elemen |
|
translate |
Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak |
Atribut Khusus
Disebut sebagai atribut khusus karena atribut ini hanya bisa digunakan pada elemen tertentu, sehingga tidak semua elemen dapat ditambahkan atribut ini di dalamnya.
|
Nama Atribut |
Tag Yang Dapat DIgunakan |
|
src |
<audio>,<embed>,<iframe>,<img> |
|
href |
<a>,<link> |
|
action |
<form> |
|
autoplay |
<audio>,<video> |
HTML Comment
Comment merupakan notes yang ada di dalam source code yang kita buat, apakah comment akan mengganggu? Tentu saja tidak, meskipun komentar kita ada di dalam source code, namun komentar tersebut tidak akan ditampilkan pada browser.
Jika begitu, kenapa kita harus menggunakan komentar?
Bayangkan jika kita sudah membuat source code untuk sebuah sistem, kemudian kita mempresentasikannya di depan dosen. Komentar dapat membantu kita dalam menjelaskan fungsi dari kode tersebut, atau jika terdapat error dalam kode kita tidak perlu membaca ulang dari awal, kita dapat langsung membenahi error tersebut dengan bantuan comment.
Heading
Ketika kita membaca sebuah buku, kita akan menemukan bab, di dalam bab ini akan akan bab lagi yang kita sebut dengan sub bab. Untuk memudahkan kita dalam membedakan bab dan sub bab di website, kita dapat menggunakan heading.
Heading dibedakan menjadi 6 tingkatan, kita langsung lihat contoh berikut:
Dari kode diatas akan ditampilkan sebagai berikut pada website kita
Tag HTML
Tabel-tabel di bawah akan mempermudah kalian untuk belajar tag beserta fungsinya. Tag html ini sangat mudah untuk dipelajari, jadi kalian jangan risau. Mari kita belajar tag html!
|
Nama Tag |
Kegunaan |
|
Basic |
|
|
<!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> |
Memasukkan satu garis putus |
|
<hr> |
Tag untuk membuat perubahan dasar kata di dalam isi |
|
<!--...--> |
Tag untuk membuat komentar |
|
Formatting |
|
|
<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 |
|
<blockquote> |
Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain |
|
<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 |
|
<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 |
|
<meter> |
Tag untuk membuat pengukuran skalar |
|
<pre> |
Tag untuk membuat teks terformat |
|
<progress> |
Memperlihatkan kemajuan tugas |
|
<q> |
Tag untuk membuat kutipan pendek |
|
<rp> |
Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby |
|
<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 |
|
<strong> |
Tag untuk membuat teks penting |
|
<sub> |
Tag untuk membuat teks subskrip (seperti dalam penulisan Zat Kimia) |
|
<sup> |
Tag untuk membuat teks superscript (seperti dalam penulisan akar kuadrat) |
|
<time> |
Tag untuk membuat tanggal / waktu |
|
<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-putus |
|
Forms |
|
|
<form> |
Tag untuk membuat sebuah form HTML untuk input pengguna |
|
<input> |
Tag untuk membuat sebuah kontrol input |
|
<textarea> |
Tag untuk membuat sebuah kontrol input multi baris (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 ditetapkan untuk kontrol input |
|
<keygen> |
Tag untuk membuat key-pair generator kolom input |
|
<output> |
Tag untuk membuat hasil penghitungan |
|
Frames |
|
|
<iframe> |
Tag untuk membuat sebuah bingkai |
|
Images |
|
|
<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 ) |
|
<figcaption> |
Tag untuk membuat sebuah caption untuk elemen <figure> |
|
<figure> |
Menentukan konten mandiri |
|
Audio/Video |
|
|
<audio> |
Tag untuk membuat isi suara |
|
<source> |
Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) |
|
<track> |
Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) |
|
<video> |
Tag untuk membuat sebuah video atau film |
|
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 |
|
Lists |
|
|
<ul> |
Tag untuk membuat daftar dengan selain nomor |
|
<ol> |
Tag untuk membuat daftar dengan nomor |
|
<il> |
Tag untuk membuat sebuah item daftar |
|
<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 |
|
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> |
Mengelompokan Isi 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 diformat |
|
Style/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/bagian |
|
<footer> |
Tag untuk membuat footer untuk dokumen atau bagian |
|
<hgroup> |
Pengelompokan elemen heading (<h1> sampai <h6>) |
|
<section> |
Tag untuk membuat bagian dalam dokumen |
|
<article> |
Tag untuk membuat sebuah artikel |
|
<aside> |
Tag untuk membuat konten lain selain dari konten halaman |
|
<details> |
Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan |
|
<dialog> |
Tag untuk membuat sebuah kotak dialog atau jendela |
|
<summary> |
Tag untuk membuat sebuah judul terlihat untuk elemen <detil> |
|
Meta Info |
|
|
<meta> |
Tag untuk membuat informasi tentang dokumen |
|
<head> |
Tag untuk membuat metadata tentang dokumen HTML |
|
<base> |
Menentukan URL dasar / target untuk semua URL relatif dalam dokumen |
|
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 |
|
<embed> |
Tag untuk membuat sebuah wadah untuk aplikasi eksternal |
|
<object> |
Tag untuk membuat sebuah objek yang ditanam |
|
<param> |
Tag untuk membuat sebuah parameter untuk objek |
Ayo Membuat Web Sederhana Dengan HTML!
Referensi
Last modified: Monday, 7 August 2023, 10:13 AM
