Belajar HTML5 - 4 Langkah Cara Membuat Web langsung Praktek bagi Pemula

Tutorial Hari Ini

Pengantar
Fungsi Dasar Tag-tag HTML

Bekerja Dengan Tag-tag HTML
Penerapan Ke Aplikasi Tag HTML

Pembahasan Materi Selanjutnya
Penutup

Pengantar

Hai sahabat semua, apa khabar? Tutorial hari ini merupakan lanjutan dari tutorial sebelumnya, Belajar HTML5 - Panduan lengkap langsung Praktek untuk Pemula. Sahabat semua, pada kesempatan ini penulis akan membagi kembali pengalaman kecil bagaimana cara membuat tampilan web yang sederhana dengan 4 langkah menggunakan sebagian kecil dari TAG HTML5, tentunya tampilan ini dapat lebih dikembangkan lagi dengan memanfaatkan TAG yang lain. Sahabat bila fokus kemateri ini, sahabat dapat menyelesaikan dalam 20-25 menit. Baik mulai belajar.

Fungsi Dasar Tag-tag HTML

Pengertian dan Fungsi HTML, fungsi-fungsi dasar dari tag html adalah untuk membentuk halaman utama web sehingga pemahaman tentang tag html perlu dipersiapkan. Berikut ini merupakan daftar dari TAG HTML5 beserta fungsinya.

Daftar TAG Standar:

TAG Standar

Fungsi atau Kegunaan

<!DOCTYPE>
<html></html>

<title></title>

<body></body>

<h1>s/d </h6>

<p></p>

<br>

<hr>

TAG ini, berfungsi menentukan tipe dokumen.

TAG ini, berfungsi untuk memulai membuat halaman dokumen HTML.

TAG ini, berfungsi untuk membuat judul sebuah halaman.

TAG ini, berfungsi untuk membuat halaman utama dari web.

TAG ini, berfungsi untuk membuat judul web (heading).

TAG ini, berfungsi untuk membuat paragraf pada halaman web.

TAG ini, berfungsi untuk berpindah ke baris berikutnya.

TAG ini, berfungsi untuk membuat garis.

TAG ini, berfungsi untuk memberi keterangan atau komentar.

Daftar TAG untuk Memformat

TAG Format

Fungsi atau Kegunaan

<b>

<blockquote>

<center>

<dfn>
<font>

<i>

<pre>

<q>

<small>

<strong>

<style>

<sub>
<sup>

<time>

yang lain dapat dibaca . . .

TAG ini, berfungsi untuk membuat huruf tebal (bold).

TAG ini, berfungsi untuk membuat bagian text yang dikutip dari sumber lain.

TAG ini, berfungsi untuk menampilkan teks ditengah.

TAG ini, berfungsi untuk membuat definisi.

TAG ini, berfungsi untuk mendeklarasikan font, warna, dan ukuran untuk teks .

TAG ini, berfungsi untuk membuat huruf miring (italic).

TAG ini, berfungsi untuk memformat teks seperti diawal.

TAG ini, berfungsi untuk membuat kutipan pendek.

TAG ini, berfungsi untuk membuat text terformat kecil

TAG ini, berfungsi untuk membuat teks pekat atau tebal.

TAG ini, berfungsi untuk medefinisikan style pada CSS.

TAG ini, berfungsi untuk membuat teks subskrip

TAG ini, berfungsi untuk membuat teks superscripted (pangkat).

TAG ini, berfungsi untuk membuat tanggal atau waktu.

sumber: https://id.wikipedia.org/wiki/HTML5

Daftar TAG Frame Dan Images

TAG Frame & Images

Fungsi atau Kegunaan

FRAME:
<frame>

<frameset>

<noframes>

<iframe>

IMAGES:
<img>
<map>
<area>

<canvas>

<figcaption>

<figure>

TAG ini, berfungsi untuk membuat sebuah jendela (bingkai) dalam sebuah frameset.

TAG ini, berfungsi untuk membagi (sudah tidak disupport lagi di HTML5).

TAG ini, berfungsi untuk membuat konten alternatif yang tidak mendukung frame (suda tidak disupport lagi di HTML5).

TAG ini, berfungsi untuk membuat sebuah bingkai.

TAG ini, berfungsi untuk mengambil gambar.

TAG ini, berfungsi untuk membuat gambar-peta

TAG ini, berfungsi untuk membuat area dalam gambar-peta.

Digunakan untuk menggambar grafik, melalui JavaScript.

TAG ini, berfungsi untuk membuat sebuah caption untuk elemen.

TAG ini, berfungsi untuk membuat konten mandiri.

Daftar TAG List, Links Dan Audio(Video)

TAG List, Links, Audio

Fungsi atau Kegunaan

List:
<ul>

<ol>

<li>

<dir>

<dl>

<dt>

<dd>

<menu>

<command>

Links:
<a>
<link>

<nav>
Audio/Video:
<audio>
<source>

<track>

<video>

TAG ini, berfungsi untuk membuat daftar dengan selain nomor.

TAG ini, berfungsi untuk membuat daftar dengan nomor.

TAG ini, berfungsi untuk membuat sebuah item daftar.

TAG ini, berfungsi untuk membuat sebuah daftar direktori.

TAG ini, berfungsi untuk membuat sebuah daftar definisi.

TAG ini, berfungsi untuk membuat istilah (item) dalam daftar definisi.

Defines a description of an item in a definition list.

TAG ini, berfungsi untuk membuat deskripsi dari item dalam daftar definisi.

TAG ini, berfungsi untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta.

TAG ini, berfungsi untuk membuat hyperlink.

TAG ini, berfungsi untuk membuat hubungan antara dokumen dan sumber daya eksternal.

TAG ini, berfungsi untuk membuat navigasi.

TAG ini, berfungsi untuk membuat isi suara.

TAG ini, berfungsi untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>).

TAG ini, berfungsi untuk membuat trek teks untuk elemen media (<video> dan <audio>).

TAG ini, berfungsi untuk membuat sebuah video atau film.

tips: sahabat semua agar tidak membingungkan membaca daftar TAG yang sangat banyak gunakan terlebih dahulu apa yang sahabat akan buat, karena daftar TAG diatas masih ada beberapa lagi.

Baca juga: TAG HTML5 fungsi & kegunaannya.

Bekerja Dengan Tag-tag HTML

Sahabat semua untuk lebih memahami tag-tag dari HTML5, mari secara bersama-sama bekerja menggunakan tag HTML5 yang standar dahulu melalui latihan berikut ini.

Latihan-1: bekerja dengan tag standar untuk mencetak data diri

File: latihan1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Latihan1</title>
</head>
<body>
<h2><b>.: BIO DATA :.</b><h2>
<hr>
<h3>Nama lengkap : I Ketut Darmayuda</h3>
<h3>Alamat sekarang : LPH, Lembah Kenanga Y11, Cihanjuang</h3>
<h3>K o t a : Cimahi Utara</h3>
<h3>Provinsi : Jawa Barat</h3>
<img src="profile.jpg" width="150" height="150">
</body>
</html>

Penjelasan:

Script diatas berfungsi untuk menampilkan "Bio Data", dengan menggunakan tag standar, bila diamati tampilannya masih berantakan dan belum tertata, demikian juga dengan objek fofonya yang masih diletakkan dalam 1 folder.

Hasil:

Latihan-2: bekerja dengan TAG paragraf(p) berfungsi untuk mencetak text/kalimat dengan atribut serta TAG Ordered List(ol) dan Un-Ordered List (ul) yang berfungsi untuk mencetak daftar text.

File: latihan2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Latihan-2</title>
</head>
<body>
<h2><b>Latihan penggunaan Paragraf<b></h2>
<p align="left">Kalimat ini di cetak rata KIRI,
menggunakan perintah "attribut align = LEFT".</p>
<p align="center">Kalimat ini di cetak rata TENGAH,
menggunakan perintah "attribut align = CENTER".</p>
<p align="right">
Kalimat ini di cetak rata KANAN,menggunakan perintah "attribut align = RIGHT".</p>
<p align="justify">Kalimat ini di cetak rata KIRI dan KANAN,
menggunakan perintah "attribut align = JUSTIFY".

Dengan menggunakan tag ini, maka teks atau kalimat yang ditulis akan sama seperti perintah pembuatan paragraf pada pengolah kata Microsoft Word atau pengolah kata yang lain.

</p><hr>
<h2><b>Penggunaan Ordered List</b></h2>
<h3>.:Daftar Menu Makanan:.</h3>
<h5><b>A. Menu Makanan:</h5></b>
<ol type="1">
<li value="1"> Nasi Bebek Goreng</li>
   <li> Soto Ayam Madura</li>
   <li> Soto Ayam Lamongan</li>
   <li> Soto Campur</li>
   <li> Nasi Rowon Khas Jatim</li>
   <li> Nasi Pecel Khas Madium</li>
</ol>
<h5><b>B. Menu Minumam:</h5></b>
<ol type="a">
   <li> Es Teh</li>
   <li> Es Jeruk</li>
   <li> Es Degaan</li>
   <li> Es Onyen</li>
   <li> Es Campur</li>
   <li> Es Teler</li>
</ol><hr>
<h2><b>Penggunaan Un-Ordered List</b></h2>
<h3>.:Daftar Menu Makanan:.</h3><hr>
<h5><b>A. Menu Makanan:</h5></b>
<ul type="square">
   <li> Nasi Bebek Goreng</li>
   <li> Soto Ayam Madura</li>
   <li> Soto Ayam Lamongan</li>
   <li> Soto Campur</li>
   <li> Nasi Rowon Khas Jatim</li>
   <li> Nasi Pecel Khas Madium</li>
</ul>
<h5><b>B. Menu Minumam:</h5></b>
<ul type="circle">
   <li> Es Teh</li>
   <li> Es Jeruk</li>
   <li> Es Degaan</li>
   <li> Es Onyen</li>
   <li> Es Campur</li>
   <li> Es Teler</li>
</ul>
<h5><b>C. Menu Buah-Buahan:</h5></b>
<ul>
   <li> Apel</li>
   <li> Nanas</li>
   <li> Pisang</li>
   <li> Pepaya</li>
   <li> Melon</li>
   <li> Manggis</li>
</ul>
</body>
</html>

Penjelasan:

Script diatas berfungsi untuk menampilkan “text/kalimat”, dengan menggunakan tag paragraf <p>...</p> dengan atribut Left, Right, dan Center, serta daftar kata menggunakan tag Ordered List <ol>...</ol> , dan tag Un-Ordered List <ul>...</ul>. TAG ini masih kategori standar.

Hasil:

Penerapan Ke Aplikasi Web

Setelah memahami secara singkat tag-tag HTML pada penjelasan sebelumnya, saatnya kita menerapkan tag-tag tersebut kedalam aplikasi web sederhana, langkah kerjanya, sbb:

Langkah-1: Buat rancangan aplikasi web terlebih dahulu, misalkan rancangannya, seperti berikut ini:

Pada rancangan di atas akan memanfaatkan TAG Frame untuk membagi tampilannya, yang terdiri dari:

Frame atas untuk logo dan data perusaan. Frame atas ini nama filenya logo.html.
Frame kiri untuk daftar menu navigasi yang akan menampilkan isi dari aplikasi webnya, dapat berupa tulisan dengan paragraf atau gambar-gambar atau video dan sebagainya. Frame kiri nama filenya menu.html.
Frame kanan untuk menampilkan isi dari hasil menu navigasi yang dipilih, Frame kanan nama filenya isi_web.html.
Merupakan sebuah file yang dinamakan dengan index.html, file ini berfungsi untuk mengintegrasikan ketiga file logo.html, menu.html, home.html

Langkah-2: Hasil dari rancangan yang sudah dibuat masing-masing filenya dibuat scriptnya, sebelumnya buat folder baru dan pada kasus ini menggunakan nama directory C:\laragon\ www\HTML5. Selanjutnya tambahkan subfolder dengan nama aplikasi dan img masing-masing digunakan untuk menyimpan file .html pada folder aplikasi dan file-file gambar disimpan di img. Buat ke 4 file tersebut masing-masing: index.html, logo.html, menu.html, dan home.html, sbb:

File: logo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body bgcolor="">
   <div>
      
       <img src="img/logo.png">
   </div>
</body>
</html>

File: menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title></title></head>
<body bgcolor="#0033FF">
<h2><font color="#FFFFFF">-Materi Belajar-</font></h2>
<a href="sistem_operasi.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Sistem Operasi</font></a><br>
<a href="basis_data.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Basis Data</font></a><br>
<a href="pemrograman.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Pemrograman</font></h3></a><br>
<a href="tipstriks.html" target="isi"><font size="4">
<h3><font color="#FFFFFF">Tips Belajar</font></h3></a>
<hr>
<h3>Informasi jadwal:</h3>
<ul>
<li><h4>Senin, 07.30-09.30 Wib</h4></li>
<li><h4>Rabu, 07.30-09.30 Wib</h4></li>
<li><h4>Jumat, 07.30-09.30 Wib</h4></li><br>
<li><a href="mailto: kontak">untuk informasi hubungi</a></li>
</ul>
</body>
</html>

File: home.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<head><title></title></head>
<body bgcolor="#F0FFFF">
<h1>SELAMAT DATANG DI WEB SITE Geriatama Dotkom</h1>
<h3><center>Testing halaman...</center></h3>
</body>
</html>

File: index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Halaman Index</title></head>
<frameset rows="23%,*" border="0">
   <frame name="header" src="logo.html">
  <frameset cols="20%,*">
  <frame name="menu" scrolling="no" src="menu.html">
  <frame name="isi" scrolling="no" src="home.html">
   </frameset>
</frameset>
</html>

File: sistem_operasi.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<head><title></title></head>
<body bgcolor="#F0FFFF">
<h1>SELAMAT DATANG DI MATA KULIAH SISTEM OPERASI</h1>
<h3><center>Testing halaman...</center></h3>
</body>
</html>

File: basis_data.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Basis Data</title>
</head>
<body bgcolor="#F0FFFF">
<h2>.:Daftar Database:.</h2><hr>
<h3><b>A. Jenis SQL:</h3></b>
<ul type="square">
   <li> SQL Server</li>
   <li> MySQL </li>
   <li> MariaDB </li>
   <li> PostgreSQL</li>
   <li> Oracle</li>
</ul>
<h3><b>B. NoSQL:</b></h3>
<ul type="circle">
   <li> MonggoDB</li>
   <li> CouchDB</li>
   <li> Cassandra</li>
   <li> Riak</li>
   <li> Redis(REmote DIctionary Server)</li>
</ul>
</body>
</html>

Hasil:

Hasil: Bila yang diklik Basis Data akan tampil, sbb:

Materi Selanjutnya

Penutup

Sekian pembahasan tutorial Belajar HTML5, 4 Langkah cara membuat Website sederhana bagi Pemula, dengan menggunakan TAG (penanda) yang paling sering digunakan pada HTML5, disarankan bagi pemula untuk latihan terus dan kembangkan ide-ide yang ada diseputar kita, untuk penggunaan gambar disesuaikan.

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

Salam.🙏