Halo semua, ini adalah materi pertama yaitu HTML
HTML, atau Hypertext Markup Language, adalah bahasa markah yang digunakan untuk membuat halaman web dan konten online lainnya. HTML pertama kali dikembangkan pada awal 1990-an oleh Tim Berners-Lee, seorang ilmuwan komputer asal Inggris yang juga diakui sebagai penemu World Wide Web.
Pada awalnya, HTML diciptakan untuk memudahkan penyebaran informasi melalui internet. HTML memungkinkan penulis untuk membuat teks, gambar, audio, video, dan konten lainnya menjadi tautan yang saling terkait dalam dokumen web. Ini memungkinkan pengguna untuk berinteraksi dengan konten tersebut dan dengan mudah melompat dari satu bagian ke bagian lainnya.
Nah langsung saja tanpa berlama lama, kita akan menuju ke materi pertama
Pengenalan Text Editor
Text editor adalah program komputer yang digunakan untuk membuat, mengedit, menyimpan file teks, file konfigurasi, kode sumber program, dan sebagainya. text editor tersedia dalam berbagai bentuk dan ukuran, berikut beberapa text editor yang populer:
Diantara semua text editor, yang direkomendasikan adalah Visual Studio Code, karena text editor nya open source serta memiliki banyak fitur-fitur yang mendukung, dan powerful
1. VIM
2. EMACS
3. Sublime Text
4. Visual Studio Code
5. Atom
Selanjutnya kita akan belajar tentang apa itu sintaks dasar html
⚠Pengumuman: Jika kalian belum terlalu mengerti tentang apa itu pengenalan text editor, kalian pahami dulu yaa, supaya gak bingung belajarnya
Sintaks Dasar HTML
HTML memiliki sintaks dasar yang wajib kalian ketahui, yuk lihat sintaks nya sebelum masuk ke sintaks yang lebih mendalam.
Ini adalah contoh dari sintaks dasar html:
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini isi halaman web</p>
</body>
</html>
Penjelasannya:
<!DOCTYPE html>→ menandakan bahwa dokumen menggunakan HTML5<html>→ elemen utama pembungkus seluruh halaman<head>→ berisi informasi seperti judul halaman<body>→ berisi semua konten yang terlihat oleh pengguna
Jadi, sintaks dasar HTML adalah susunan kode yang menjadi pondasi utama dalam pembuatan sebuah website agar browser dapat membaca dan menampilkan isi halaman dengan benar.
Nah itu lah dia sintaks dasar html itu, gimana? Sudah Paham? Kita akan lanjut ke materi berikutnya yaitu, tag, attribut, dan element
⚠Pengumuman: Jika kalian belum terlalu mengerti tentang apa itu sintaks dasar html, kalian pahami dulu yaa, supaya gak bingung belajarnya
TAG, ATTRIBUT, DAN ELEMENT
1. TAG
Tag HTML adalah kode atau tanda khusus yang digunakan untuk mengatur dan memberi struktur pada konten di halaman web. Tag ditulis menggunakan tanda kurung sudut, yaitu < >, dan biasanya terdiri dari tag pembuka dan tag penutup.
Tag berfungsi untuk memberi tahu browser bagaimana suatu elemen harus ditampilkan, seperti teks, gambar, tabel, atau link.
2. ATTRIBUT
Atribut adalah informasi tambahan yang ditambahkan pada tag HTML untuk memberikan keterangan atau pengaturan tertentu pada suatu elemen. Atribut biasanya ditulis di dalam tag pembuka dan berfungsi untuk mengatur sifat atau tampilan elemen tersebut.
Atribut terdiri dari nama atribut dan nilai atribut, yang ditulis dengan tanda sama dengan (=) dan diapit tanda kutip.
3. ELEMENT
Elemen adalah bagian lengkap dalam HTML yang terdiri dari tag pembuka, isi atau konten, dan tag penutup. Elemen digunakan untuk membentuk struktur suatu halaman web agar browser dapat menampilkan isi sesuai dengan fungsinya.
Elemen merupakan gabungan dari tag dan isi yang ada di dalamnya. Dengan kata lain, elemen adalah satu kesatuan yang utuh.
Sebelum lanjut, aku mau ngasih fun fact nih, kalian tau game flappy bird versi web? Nah itu dibuat dari html juga loh, tapi ga semua ya, karena ada JavaScript, dan Canvas.
Penjelasan singkatnya seperti ini
Flappy Bird menggunakan HTML karena game tersebut dimainkan di browser. HTML berfungsi sebagai kerangka atau tempat untuk menampilkan game, seperti area permainan, skor, dan tombol. Selain HTML, game ini juga menggunakan JavaScript untuk mengatur gerakan burung dan rintangan agar game bisa dimainkan. Jadi, HTML digunakan sebagai dasar tampilan game di halaman web.
Nah setelah mengetahui kalau game flappy bird versi web itu dibuat dari html, dan kita juga telah belajar tag, attribut, dan element, kita akan langsung menuju ke materi berikutnya yaitu, Heading element
Heading Element
Heading element adalah elemen dalam HTML yang digunakan untuk membuat judul atau subjudul pada halaman web. Heading berfungsi untuk memberikan struktur pada isi halaman agar lebih rapi, mudah dibaca, dan mudah dipahami.
Dalam HTML, heading terdiri dari enam tingkatan, yaitu <h1> sampai <h6>.
<h1> → judul paling besar dan paling penting
<h2> → subjudul tingkat kedua
<h3> → subjudul tingkat ketiga
<h4> → heading ukuran sedang
<h5> → heading lebih kecil
<h6> → heading paling kecil
Contoh:
<h1>Judul Utama</h1>
Jadi, heading element digunakan untuk membuat judul pada halaman web dengan ukuran yang berbeda sesuai tingkat kepentingannya.
Nah itu lah Heading element, kita akan lanjut ke materi berikutnya