Belajar HTML5 - Panduan lengkap langsung Praktek untuk Pemula

Tutorial Hari Ini
Pengantar Pemrograman Web-HTML
Persiapan Penulisan HTML
Memahami Struktur Penulisan HTML
Latihan Penggunaan TAG HTML
Pembahasan Materi Selanjutnya

Penutup

Pengantar Pemrograman Web-HTML

Hai sahabat semua, apa khabar ? semoga sehat selalu. Pada tutorial hari ini belajar tentang dasar-dasar pemrograman web berbasis HTML. Sahabat semua, diluar sana sudah banyak sekali yang membahas tentang pemrograman web dari dasar sampai studi kasus begitupun dilingkungan kampus akan selalu diberikan materi dengan judul "Pemrogaman Web Dasar 1". Dari pengalaman penulis dilingkungan kampus masih banyak adik-adik mahasiswa baru yang masih kesulitan memahami apa yang diberikan sehingga membutuhkan banyak catatan atau referensi dari berbagai sumber yang ada, salah satunya mungkin dari tutorial ini.

Perlukah belajar HTML? jawabannya perlu, karena HTML merupakan bahasa yang digunakan untuk membangun antarmuka halaman web, serta dapat digabungkan dengan bahasa pemrograman yang lain dapat berfungsi sebagai logika dan mengelola data. Oleh sebab itu pengetahuan tentang HTML sangat penting dalam pembangunan aplikasi web. Hampir semua bahasa pemrograman berbasis web menerapkan code dasarnya adalah HTML, ketika mau belajar PHP Native, framework yang saat ini banyak digunakan, seperti CodeIgniter, Laravel dll. Untuk itu, bahasa HTML wajib dikuasai terlebih dahulu.

Apa HTML itu?

» HTML, merupakan singkatan dari Hyper Text Markup Language

» HTML, merupakan bahasa markup(penanda) standar untuk membuat halaman Web

» HTML, menggambarkan struktur dari halaman Web

» HTML terdiri dari serangkaian elemen-elemen

» Elemen HTML akan ditampilkan lewat browser, menampilkan konten-konten, seperti:

"Judul halaman", "sebuah paragraf", "tautan ke url.video", "gambar-gambar", dll.

HTML5 memiliki beberapa TAG baru untuk memperkaya struktur halaman, seperti <article>, <nav>, <aside> dan <header>, selain TAG untuk struktur halaman juga memilki TAG baru multimedia, antara lain <audio>, <video> dan <canvas>.

Baca juga: Sejarah HTML Wikipedia

Sejarah Singkat Hyper Text Markup Language

Tahun 1991, HTML dibuat oleh Tim Berners-Lee pembuatan ini belum resmi diumumkan.

Tahun 1995, HTML 2.0. versi kedua dirilis oleh IETF.

Pada tahun yang sama tahun 1995, dirilis HTML 3.0 versi ini banyak penambahan fitur baru dan memberikan banyak kemudahan kepada web master, salah satunya seperti untuk mendesain halaman web, tetapi fitur-fitur yang baru ini agak memperlambat web browser.

Tahun 1999, HTML 4.01 dirilis yang mana merupakan versi utama dan versi ini banyak digunakan sehingga versi yang paling sukses sebelum rilis versi 5.0.

Tahun 2014 oleh World Wide Web Consortium (W3C), Rilis versi HTML 5.0. merupakan pengembangan versi (extended version) dari HTML 4.01 sampai sekarang, merupakan standar dari HTML. (sumber: id.wikipedia.org)

Baca juga: HTML Tutorial

Persiapan Penulisan HTML

Untuk membuat aplikasi berbasis web dengan HTML tentunya memerlukan persiapan-persiapan terutama yang berkaitan dengan penulisan HTML. Persiapan dan media yang diperlukan adalah, sbb:

» Komputer PC/Laptop/Netbook

» Sistem Operasi Multiplatform (Windows, Linux, MacOS)

» Text Editor (PSPad, Notepad/Notepad++, Visual Studio Code, Atom, Sublime Text3, dll)

» Browser (Google Chrome, Mozila Firefox, Microsoft Edge, dll)

» Estimasi waktu kira-kira 25 menit

» Tidak kalah penting secangkir kopi... he he he optional saja

» Mulai belajar...

Memahami Struktur Penulisan HTML

Penulisan struktur HTML terdiri atas <TAG> pembuka artinya penanda pembuka, kemudian isi dari halaman atau konten dan diakhiri dengan </TAG> penutup artinya penanda penutup. <TAG> atau penanda merupakan kata kunci didalam halaman web yang menentukan bagaimana web browser memformat dan menampilkan isi atau konten. Aturan penulisan <TAG> pembuka dan </TAG> penutup adalah, sbb:

Sintaks: <TAG>isi atau konten</TAG>

Struktur penulisan dasar dari HTML 4.01 adalah, sbb:

<html>

<head>

<title>Judul Aplikasi Web, ditampilkan di title Browser</title>

</head>

<body>

<h1><b>Judul Aplikasi H1</b></h1>

<h2><b>Sub Judul Aplikasi H2</b></h2>

<> ... </>

<p>paragraf isi sub judul H2</p>

<h3><b>Sub Judul Aplikasi H3</b></h3>

<p>paragraf isi sub judul H3</p>

</body>

</html>

Struktur penulisan dasar dari HTML 5.0 adalah, sbb:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Judul Aplikasi Web, ditampilkan di title Browser</title>
</head>
<body>
<h1><b>Judul Aplikasi H1</b></h1>

<h2><b>Sub Judul Aplikasi H2</b></h2>

<p>paragraf isi sub judul H2</p>

<h3><b>Sub Judul Aplikasi H3</b></h3>

  <p>paragraf isi sub judul H3</p><br>
<div>
<img src="gamabr | foto">
   </div>
<audio controls>
       <source src="nama-video" type="audio/mp3|mp4">
   </audio>
<ul><span>Tema | judul terdiri dari:</span>
<a href="link1"><li><span>Keterangan link1</span></li></a>
<a href="link2"><li><span>Keterangan link2</span></li></a>

<a href="link3"><li><span>Keterangan link3</span></li></a>

</ul>
</body>
<footer>

</footer>
</html>

Keterangan singkat:

» ,  TAG ini untuk memberi komentar/keterangan.

» <!DOCTYPE html>, TAG ini berfungsi memulai mendeklarasikan code HTML & diletakkan

pada baris pertama.

» <html> --- </html>, ini merupakan TAG pembuka dan penutup.

» <Meta charset ="utf-8">, TAG ini berfungsi bila menggunakan karakter khusus

» <head><title></title></head>, setiap TAG akan selalu ditulis berpasangan dan

seterusnya seperti itu, penanda dibuka dan penanda ditutup.

» <a href="link">, TAG ini berfungsi menuju ke alamat lain dapat berupa text, gambar dll.

DOCTYPE(document type declaration), merupakan sebuah keterangan yang wajib ditulis untuk memberitau web browser tentang aturan penulisan dari dokumen yang akan ditampilkan. Doctype dideklarasikan pada baris pertama halaman HTML.

Charset UTF-8 merupakan meta TAG yang paling sering digunakan dalam HTML5, aturan penulisannya adalah sebagai berikut <meta charset="UTF-8">.

Meta TAG merupakan sebuah instruksi kepada web browser untuk menerjemahkan karakter-karakter khusus seperti penggunaan (ASCII dan ANSI) pada halaman HTML, hampir setiap halaman HTML5 menggunakan meta TAG ini. Perintah dari charset="UTF-8" berfungsi untuk menerjemahkan bit-bit di dalam halaman HTML5 menjadikan sebuah karakter.

Latihan Penggunaan TAG HTML5

Pada latihan dasar-dasar penggunaan TAG HTML5 disini menggunakan text editor PSPad yang sederhana tapi lengkap dengan browsernya. PSPad dapat didownload disini .

Untuk memperjelas pemahaman penjelasan singakat sebelumnya, mari mulai dengan praktikum dengan langkah kerjanya, sbb:

Langkah-1: aktifkan text editor yang digunakan, dalam kasus in menggunakan PSPad editor.

Keterangan:

Setelah text editor PSPad diaktifkan klik combo box kemudian akan ditampilkan beberapa pilihan Bahasa pemrograman.
Pada kasus ini pilih yang HTML.
Setelah scriptnya di ketik jalankan / RUN dengan memilih salah satu HTML Page Preview atau HTML Preview Web Server.

Langkah-2: ketikkan atau lengkap strktur script HTML berikut ini

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Latihan1</title>

</head>

<body>

<H1><b>Selamat Belajar Pemrograman WEB Pagi Pemula</b></h1>

<h2><u>Dengan Bahasa HTML5 Yang Powerfull</u></h2>

<h3><i>Di Blog www.geriatama.com</i></h3>

<h4>Semangat...!</h4>

<br>

<h5><b>Catatan:</b><br>

>>letak folder pada kasus ini di C:/laragon/www/html.<br>

>>folder dapat dibuat atau diletakkan dimana saja (bebas)</h5>

</body>

</html>

Langkah-3: setelah disimpan dan jalankan / RUN, hasilnya, sbb:

Materi Selanjutnya

Penutup

Sekian pembahasan tutorial belajar HTML5, mengenai pengantar HTML5, sejarah singkat HTML serta memahami TAG (penanda) pada struktur penulisan HTML. Pada latihan kesatu dibahas cara penggunaan header (h1,h2,h3) untuk penataan tulisan, juga penggunaan b(bold/tebalkan), i(italic/miring), u(underline/garis bawah) dan br(line break/baris baru) serta cara penggunaan PSpad editor yang sederhana tapi powerfull.

Sekian dan terima kasih sudah mengikuti terus tutorial diblog ini, semoga bermanfaat.

Salam penulis.🙏