1. Apa Itu Html (Hypertext Markup Language)
2. Apa keterkaitannya dengan browser
3. Apa itu bahasa Markup, serta
4. Seperti apa struktur dan entitas Html
Ok tanpa basa basi lagi mari langsung ke topik materi ya
kita mulai dengan satu pertanyaan
1.Apa itu Html ?
HTML adalah bahasa markup yang digunakan untuk membuat halaman Web
Nah, HTML sendiri merupakan singkatan dari (Hypertext Markup Language)
Kamu tahu cara membuat text jadi bold di Whatsapp?
Caranya adalah dengan memberikan tanda bintang (*) di awal dan akhir dari kata atau kalimat.
Nah, tanda bintang (*) dan tulisan di dalamnya itulah yang disebut sebagai bahasa Markup.
secara garis besar , bahasa Markup itu format khusus dimana tulisan yang di rancang akan di proses menjadi tampilan tertentu.
HTML juga termasuk bahasa Markup. dengan menulis teks tertentu di HTML. kita bisa membuat browser menampilkan banyak hal, mulai dari gambar, tulisan yang bercetak miring atau bahkan sebuah daftar.
Nah, kalau di whatsapp tadi kita pakai tanda bintan (*) atau simbol lain untuk menampilkan sesuatu. Namun kalau di HTML, kita menggunakan yang namanya Tag.
Eh tapi biar gak pusing kita coba bikin dokumen HTML dulu yuk!
Coba sambil buka Pc/Laptop.
kita buat halaman sederhana untuk menampilkan tulisan Hello World
1.Buka text editor yang ada di laptop kalian. biar gampang , mungkin bisa pakai Notepad.
2.Setelah terbuka, isi dokument dengan tulisan <h1>Hello World</h1>
3.Simpan file baru sebagai extensi .html
contoh (file.html)
4.setelah disimpan buka dokument tersebut dengan menggunakan browser/double klik file
5.setelah terbuka maka tampilannya akan seperti gambar pertama di atas
Mari kita bahas satu persatu
<h1> adalah Tag
Hello World adalah konten
<h1>Hello World</h1> adalah element
"Jadi apa itu tag ?"
Dalam Html, Tag adalah semacam kode yang di taruh di dalam enclosing Tag (<>). Fungsinya bisa muncul ketika kode ini mengapit konten (Tulisan) yang kita tulis.
Nah, setiap Tag mempunyai representasi atau kegunaan yang berbeda beda, ini beberapa contohnya:
Nah, kita juga bisa menambahkan atribut di dalam suatu Element
Element pada contoh mengandung atribut bernama src. atribut tersebut akan merujuk ke suatu URL atau file bertipe gambar
Ok kita langsung maju ke penjelasan soal Hyperlink ya!
Hyperlink biasa di gunakan sebagai pintu ke halaman lain, maksudnya adalah ketika kita menekan link tersebut maka kita akan di arahkan ke halaman lain.
Nah, biar kamu lebih memahami hyperlink, kamu perlu tahu dulu struktur dari html itu sendiri.
kalau kamu cek gambar , itu adalah anatomi dari struktur dalam HTML. mari kita bedah satu persatu ya!
DOCTYPE
di masa awal HTML berkembang (1991/1992), DOCTYPE di maksudkan sebagai link ke serangkaian aturan yang harus diikuti oleh halaman HTML untuk dianggap sebagai perintah yang baik.Dengan begitu,HTML bisa melakukan pengecekan kesalahan secara otomatis dan melakukan hal lainnya.
Mereka dulu terlihat seperti ini
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
Nah <!DOCTYPE html> yang kamu lihat pada gambar adalah string karakter terpendek yang di anggap sebagai DOCTYPE yang valid.
Namun,akhir akhir ini DOCTYPE mulai ditinggalkan, kamu bisa langsung masuk ke bagian lainnya tanpa perlu menulis unsur ini.
"Lah,terus kenapa harus dipelajari?"
Ya biar kamu tahu paham .sejarahnya saja.Dan,biar kalau di ajak ngobrol orang lain kelihatan lebih keren~
HTML
Element ini membungkus semua konten di seluruh halamam, dan kadang kadang dikenal sebagai element root.
METADATA
Metadata itu sebagai data yang berfungsi untuk memberitahu informasi apa saja yang melekat pada suatu dokument.. ia seperti kartu tanda pengenal(KTP) tapi untuk dokument.
Element ini mengatur set karakter yang harus di gunakan dokument kita ke UTF-8.
ia mencakup hampir setiap karakter dari sebagian besar bahasa tulisan manusia.
Metadata dapat membantu kita menghindari beberapa masalah.jadi, unsur ini jangan di abaikan ya!
HEAD
element ini bertindak sebagai wadah untuk semua hal yang ingin kita sertakan pada halaman HTML namun tidak di tampilkan di halaman yang kita lihat.
Nah, si HEAD ini biasanya mengandung keyword dan deskripsi halaman kita, agar mudah di cari dan di kelola
TITLE
Element yang mengatur judul halaman yang muncul di tab browser tempat halaman di muat. ia juga dapat di gunakan untuk memberi penjelasan jika halaman di tandai sebagai bookmark atau favorite
BODY
Element ini berisi semua konten yang ingin kita tampilkan kepada user ketika mereka mengunjungi halaman kita. isinya bisa berupa teks,gambar,video,game,audio dan lain sebagainya.
oh,iya! kalau kamu perhatikan, bahasa markup itu lekat banget dengan simbol simbol yang kita kenal di bahasa manusia pada umumnya..Tapi, ada hal penting yang harus kamu catat terkait hal ini.
Apa tuh? mari kita cari tahu ya~
Dalam HTML, tanda kurang dari (<), lebih dari (>), kutip dua ("), kutip satu ('), serta tanda dan (&) dianggap sebagai karakter khusus. mereka adalah bagian dari syntax HTML.
Karena itu, mereka tidak bisa sembarangan di masukan ke dalam HTML.
"Berarti, kita tidak bisa membuat web menampilkan tulisan yang mengandung karakter karakter tersebut dong ?"
Tetap bisa kok! syaratnya, kita harus menggunakan referensi atau kode yang mewakili karakter khusus tadi. kamu bisa cek di daftar gambar di atas.
saat di praktekan, setiap referensi karakter harus di mulai dengan tanda dan (&) serta di akhiri dengan titik koma (;).
Oke, habis ini kita masuk ke pembahasan tentang komentar dalam HTML.
Dalam HTML, komentar itu adalah teks atau kode yang di tulis dalam suatu file.Tapi, teks tersebut akan di hiraukan ketika di jalanka.
Komentar berfungsi untuk memberikan tanda, atau memberi tahu depeloper lain apa yang kode ini lakukan, ini akan mempermudah dalam berkolaborasi.
Nah, karena kamu sudah tahu tentang komentar, coba kita cek kode kode dari sebuah halaman ya.
kalau kamu buka lagi browser di Pc/Laptop, kamu bisa cek klik kanan dan pilih inspect element (ctrl+shift+i), dengan cara itu , kamu bisa melihat kode HTML yang disusun untuk membuat tampilan pada halaman yang sedang kamu kunjungi.
Nah, cara tersebut sebenarnya di lakukan untuk proses debbuging. ini adalah proses untuk memeriksa dan/atau membenahi bug (kesalahan) dalam script kode.
caranya tidak jauh berbeda dengan yang sudah di jelaskan di atas.
kamu bisa buka depeloper tools dan tekan F12 kalau di (mac, cmd+opt+i).selanjutnya,tinggal kamu lakukan proses debbuging deh.
Nah,penjelasan lebih jauh soal proses debbuging bakal ada di sesi lain.
Sementara,kamu cukup tahu sampai sini dulu~
"Lah,terus tujuannya apa?"
Biar kamu tahu sebuah halaman web itu disusun dengan kode seperti apa. Selain itu,cara tersebut juga bisa di pakai untuk "nyolong ide" dan cari referensi untuk menyusun web sendiri.jadi, diingat ingat yaa~
Nah, supaya pembelajaran kita ingat kita rangkum ya!
HTML
Sebuah bahasa Markup yang di gunakan untuk memberi tahu browser apa yang harus di tampilkan.
Bahasa Markup
Sebuah teks yang akan di proses menjadi tampilan
Tag
Suatu karakter yang di bungkus oleh Enclosing tag di dalam sebuah dokument HTML,mempunyai representasi yang unik di dalam browser.
Element Bersarang
Element yang terdapat di dalam Element
Attribute
Suatu informasi yang terdapat di dalam suatu Element
Hyperlink
Suatu Element yang memiliki Referensi ke halaman lain. kalau kita klik element tersebut, kita akan di bawa menuju ke halaman lain
sebagai catatan,HTML itu sebenarnya cuma kerangka aja di dalam suatu website.
kita butuh Tools lain untuk menata kerangka kerangka itu biar website kita tampilannya keren.
salah satu Tools tersebut Bernama CSS (Cascading Stylesheet).
Nah, kita akan belajar soal itu di materi selanjutnya .jadi, persiapkan dirimu ya!
Sampai ketemu lagi~
