Latihan coding web dasar – Pengenalan HTML, HTML5 dan CSS

Seri pertama latihan coding web kali ini akan saya mulai dengan pengenalan HTML, HTML5, CSS.

Struktur Dasar HTML

learnPada dasarnya, Ketika Anda melihat sebuah halaman web, Anda melihat kata dan kalimat. Namun ada kalanya halaman web terdiri dari teks yang di format menggunakan style tersendiri daripada plaint teks seperti biasanya. Kata-kata tersebut biasanya memiliki karakteristik gaya, seperti perbedaan ukuran huruf dan warna. Dalam beberapa kasus, di dalam sebuah halaman web juga menampilkan gambar-gambar atau mungkin video. Kadang juga terdapat formulir dimana kamu bisa memasukkan (atau mencari) informasi, atau merubah penampilan web sesuai dengan keinginan Anda. Kadang dalam sebuah halaman juga terdapat konten bergerak dan konten yang berubah sedangkan yang lainnya tidak. – Developer Mozilla.

Jadi sebenarnya HTML merupakan tingkatan paling bawah dalam pemrograman sebuah website. Sedangkan CSS merupakan beautifier yang digunakan untuk mempercantik tampilan halaman, pada tingkatan lanjut, pemrograman web dapat ditambahkan dengan Ajax, JavaScript dan Jquery serta beberapa bahasa pemrograman lainnya.

  • HTML (Hypertext Markup Language) merupakan bahasa penanda (syntax) yang digunakan untuk memberikan konten (teks) struktur dan makna semantik. dengan kata lain, HTML adalah bahasa untuk menampilkan konten dalam bentuk yang dapat dipahami oleh umum, Selain ini dalam makna yang sebenarnya HTML juga memiliki kemampuan untuk menghubungkan teks aktif dengan suatu halaman yang lain yang biasanya kita sebut dengan kata “Link“. Sedangkan;
  • CSS (Cascade Style Sheet) adalah bahasa yang digunakan untuk mempercantik gaya penampilan syntax html.

Sebelum mask ke dalam tutorial anda perlu menguasai pengenalan HTML, fungsi HTML, konsep HTML, cara kerja HTML dan cara penulisan HTML dari dasar. Didalam HTML dikenal istilah elemen dan tag, attribut, dan struktur dokumen HTML.

Elemen

Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya a, i, u, h1, h2, h3, h4, h5, h6, pre, div, span, em, li, ul, del, strong, dan masih banyak lagi.

Tags

HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih “tag” yang mengekspresikan konten. Tag diawali dan diakhiri dengan  kurung siku, dan tag “penutup” (tag yang menandakan akhir dari konten) diawali dengan garis miring.

Sebagai contoh, elemen paragraf terdiri dari tag pembuka “<p>” dan tag penutup “</p>”. Contoh berikit menampilkan sebuah paragraf yang terdapat dalam elemen paragraf HTML:

<p> Ini adalah contoh paragraf menggunakan tag &ltp&gt didalam html. </p>

hasilnya ketika ditampilkan di browser:

Ini adalah contoh paragram menggunakan tag <p> didalam html.

Anda tentu menyadari ada huruf &ltp&gt diatas, tapi ketika ditampilkan pada browser, tanda tersebut akan menghasilkan tanda kurung siku seperti pada tag yang kita gunakan tetapi jika menggunakan tanda kurung siku untuk menuliskan tag dalam bentuk plain text / teks biasa didalam html tidak akan dibaca sebagai teks tetapi akan dibaca sebagai tag juga.

Attribut

Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan oleh semua elemen.

Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks. Jadi pendeknya ada beberapa ketentuan penggunaan atribut didalam HTML yang perlu diperhatikan pada saat coding.

Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “class” untuk klasifikasi elemen, atau “id” untuk identifikasi elemen spesifik. Ada pula elemen href (Hyperlink reference) yang digunakan sebagai atribut wajib pada elemen anchor a untuk membuat link.

Struktur Dasar HTML – Dasar Elemen Building Block HTML

HTML terdiri dari sekumpulan elemen-elemen. Elemen-elemen mendefinisikan arti semantik dari konten yang bersangkutan. Elemen-elemen mengikutsertakan saja yang terdapat di dalam tag elemen yang berkesesuaian, termasuk tag mereka sendiri. Sebagai contoh, elemen “<p>” mengindikasikan sebuah paragraf; elemen “<img>” mengindikasikan sebuah gambar (image). Untuk melihat daftar elemen-elemen dasar HTML bisa dilihat pada artikel Panduan tambahan – Elemen dasar HTML.

Contoh elemen-elemen dasar dalam sebuah dokumen HTML sederhana dapat dilihat pada gambar berikulatihan1a

 

 

Apa arti dari struktur HTML pada gambar diatas? Mari kita lihat satu per satu.

Elemen DOCTYPE
Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada struktur HTML.
Elemen HTML
Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.
Elemen head
Elemen head pada dokumen digunakan untuk menguraikan berbagai metadata (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman yang ditampilkan pada browser.
Elemen title
Merupakan elemen yang menampilkan judul halaman pada browser, anda dapat memperhatikannya pada Tab browser anda. berbeda dengan elemen H1.
Elemen body
Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.
Elemen link
Elemen yang mendefiniskan link eksternal dan beberapa metadata dari berkas yang diakses oleh link tersebut. Contoh diatas, link yang diakses adalah sebuah berkas stylesheet dengan nama style.css dan merupakan berkas yang berisi text untuk styling konten.
Elemen h1
Elemen h1 adalah elemen heading 1 yang digunakan untuk judul halaman, berbeda dengan elemen title, elemen h1 akan menampilkan teks dalam ukuran yang besar sesuai dengan defenisinya pada stylesheet yang diterapkan oleh browser atau oleh stylesheet pengguna.
Elemen p
Elemen p berarti paragraph, itu berarti elemen ini meng-handle konten jenis paragraf, elemen ini dapat memiliki sisipan elemen lain seperti elemen a didalamnya. Semua konten didalam elemen p ini akan dianggap sebagai paragraf oleh browser.
Elemen a
Elemen a atau anchor merupakan elemen yang digunakan untuk meng-handle referensi tujuan keluar, maksudnya adalah jika ada link yang ingin dihubungkan dengan konten maka anda dapat menggunakan elemen a ini. Contohnya ketika ingin menghubungkan sebuah kata dengan link diluar halaman ini maka anda dapat menyisipkan elemen a diikut tag href (hyperlink reference) seperti pada contoh diatas.
Elemen br
Elemen ini berarti break new line yaitu elemen yang memungkin browser untuk membuat baris baru ketika me-render halaman anda. Anda dapat melihat perbedaan antara hasil render web page dengan script asli yang dituliskan seperti pada gambar dibawah.render
Jika diperhatikan, walaupun pada baris kode digunakan enter untuk memisahkan paragraf yang panjang, browser tetap akan me-rendernya sebagai paragraf tanpa ada baris baru, sedangkan baris yang menggunakan <br> dianggap sebagai baris baru.
Itulah beberapa contoh elemen yang biasanya ditemukan dalam sebuah struktur HTML sebuah halaman situs web.
Sekian dulu untuk artikel kali ini, selanjutnya saya akan menulis lagi sambungan dari artikel ini tentang Pengenalan HTML, HTML5 dan CSS
Sumber referensi: Situs Developer mozilla
Salam, r4ndieL

Leave a Reply

Your email address will not be published. Required fields are marked *