Belajar Html5 Paling Mudah dan Contohnya Lengkap Untuk Pemula

66
Belajar HTML5
Belajar HTML5

Bidhuan.id – Bagaimana cara Belajar html5 itu? Belajar html5 sekarang ini memang kian digemari ya sobat. Banyak perguruan tinggi khususnya swasta menerapkan materi ini untuk memberikan bekal kepada para mahasiswanya agar mampu bersaing di dunia kerja kelak. Tapi faktanya ternyata banyak mahasiswa yang memanfaatkan kepandaiannya dalam mengoperasikan html5 sebagai ladang bisnis meskipun masih berstatus mahasiswa.

Mereka banyak mengambil job freelancer yang bisa dengan mudah dicari via online dan bisa memilahnya sesuai dengan materi yang dikuasai seperti halnya belajar html5. Yang terpenting adalah portofolio dan kalimat penawaran yang anda kirim kepada para owner. Jika sekali saja mereka senang dengan pekerjaan anda, maka peluang besar untuk di hire menyelesaikan proyek berikutnya pun sangat terbuka lebar buat mereka. Karena penulis sendiri pun dulu waktu masih menjadi mahasiswa jika seperti demikian.

Baca juga mengenai cara menghilangkan adware adcash di laptop dan macbook

Perkenalan Seputar HTML  

Pengenalan HTML5
Pengenalan HTML5

Bagi anda yang masih awam, pasti akan bertanya – tanya, apa sih sebenarnya yang dimaksud dengan html? Html bisa dikatakan sebagai proses awal dalam membangun sebuah website. Untuk membuat website yang baik dan berkualitas, tentu saja dibutuhkan keahlian dalam mengolah html.

Namun perlu anda ketahui bahwasannya pembuatan website bisa mempunyai kualitas yang baik jika terdapat komponen pendukung lainnya meliputi php dan juga javascript. Karena tanpa keberadaan kedua komponen tersebut tampilan website akan terasa hambar selayaknya kata pepatah mengatakan bagaikan sayur tanpa garam.

Komponen – Komponen yang Berpengaruh dan Mendukung Kinerja HTML

Dalam pembuatan sistem, tentu saja tidak akan lepas dari yang namanya komponen – komponen pendukungnya sobat. Tanpa keberadaan komponen – komponen tersebut, pengerjaan kode dengan menggunakan html tidak akan bisa berjalan dengan lancar. Lantas apa saja komponen – komponen yang dimaksud tersebut? Inilah pembahasannya sobat, antara lain sebagai berikut :

  • Javascript

Jika membahas mengenai javascript, rasa – rasanya memang sangat menarik sobat. Terlebih lagi jika dihubungkan dengan html. Seperti yang sudah penulis bahas di atas tadi, bahwasannya html itu merupakan dasar pembuatan web program, namun masih dengan tampilan yang membosankan karena memang statis (kaku). Dengan adanya javascrip, maka tampilan web tersebut akan menjadi lebih dinamis karena akan terjalin interaksi yang mumpuni antar laman web yang sudah dibuat. Selain itu juga mampu menyediakan fitur – fitur bagus yang akan menambah daya tarik tersendiri.

Sebagai pemula, memang untuk memahami berbagai komponen yang bisa mendukung html cukup menyulitkan. Tetapi tanpa adanya javascript, daya jual suatu web tidak akan mudah memunculkan ketertarikan konsumen. Jadi untuk menciptakan web yang sempurnya, anda juga wajib mempelajari javascript ya sobat.

  • PHP

Survei membuktikan dibanyak web server yang digunakan di seluruh penjuru dunia, 75 persen diantara adalah php sobat. Bahasa pemrogramman yang digadang – gadang mampu memanipulasi html sehingga bisa tampil dinamis. Tanpa adanya bahasa pemrogramman php ini, maka tampilan web yang anda buat akan tampak statis, kaku dan sangat membosankan. Sudah bisa dipastikan banyak orang yang kurang berminat untuk mampir ke web yang anda buat tersebut.

Cara Mengoperasikan HTML yang Baik

Sebagai bahasa awal yang wajib anda pahami sebelum menginjak ke pembahasan yang lebih banyak, maka dari itu jangan sia – siakan kesempatan yang ada ya sobat. Banyak – banyaklah berlatih jika ingin segera menguasainya. Sebagai pemula anda memang perlu mempelajari dasar – dasarnya dan sesegera mungkin untuk bisa mengoperasikan dengan mempraktekkannya secara langsung ya sobat. Inilah informasi lengkap mengenai bagaimana cara mengoperasikan html yang baik, antara lain sebagai berikut.

  • Menggabungkan Sel Tabel

Pembelajaran pertama dalam proses pengoperasian html adalah pembuatan suatu tabel sobat. Anda wajib bisa mengoperasikan html sehingga tercipta sebuah tabel sederhana terlebih dahulu. Nah untuk membagun tabel dengan menggabungkan antar sel tabel anda butuh yang namanya atribut rowspan dan colspan. Kedua atribut ini biasanya diletakkan dari tag “td” yang ada pada sebuah tabel sobat. Agar lebih jelas lagi langsung saja kita praktek dengan menggunakan kode – kode berikut ini :

<!DOCTYPE html>
<html>
<head>
<title>Bagaimana Menggunakan Atribut Colspan dan Rowspan Pada Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table border=”1″>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td colspan=”2″ >Baris 2, Kolom 2 & 3</td>
</tr>
<tr>
<td rowspan=”2″> Baris 3 & 4, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>

Dan inilah hasil tampilannya sobat:

Bagaimana Menggunakan Atribut Colspan dan Rowspan Pada Tag Tabel
Bagaimana Menggunakan Atribut Colspan dan Rowspan Pada Tag Tabel
  • Membuat Judul Kolom Header 

Tahukah anda judul kolom header pada sebuah web itu sangat penting? Dengan adanya judul header, maka akan bisa mewakili apa yang nantinya akan dijelaskan pada kolom, baris atau pun tabel di bawahnya. Untuk lebih jelasnya anda bisa simak contoh kode di bawah ini yang akan memberikan informasi mengenai kegunaan kode tag “th”.

<!DOCTYPE html>
<html>
<head>
<title>Bagaimana Penulisan Tag th dalam Tabel HTML</title>
</head>
<body>
<h2>Belajar Tag th untuk Tabel HTML</h2>
<table border=”1″>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>

Tara inilah hasil tampilannya sobat:

Bagaimana Penulisan Tag th dalam Tabel HTML
Bagaimana Penulisan Tag th dalam Tabel HTML

Nah dengan adanya 2 contoh kasus di atas, anda akan lebih paham apa sebenarnya perbedaan tag td dan juga tag th. Untuk tag th sendiri di beberapa browser memang mempunyai tampilan yang sedikit berbeda. Misalnya saja kali penulis menggunakan browser Mozilla Firefox karena memang penulis menganggapnya lebih nyaman saja. Tampilan judulnya pada kolom terlihat tebal dan berada di tengah, namun jika anda menggunakan browser lain, kemungkinan akan berbeda. Bisa saja tidak terlihat tebal dan juga tulisan bisa berada di rata kanan atau pun rata kiri.

  • Membuat Judul Tabel

Jika judul kolom header saja penting, maka judul dari sebuah tabel akan jauh lebih penting sobat. Karena judul sebuah tabel bisa mewakili identitas dari keseluruhan tabel itu sendiri. Untuk itu penulis akan memberikan informasi melalui praktek secara langsung dengan menggunakan kode di bawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Cara Penulisan Tag Caption Tabel HTML</title>
</head>
<body>
<h2>Belajar Tag caption untuk Tabel HTML</h2>
<table border=”1″>
<caption>Contoh Caption Tabel</caption>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</table>
</body>
</html>

Tara inilah hasil tampilannya sobat:

Membuat Judul Tabel
Membuat Judul Tabel

Sekarang bagaimana apakah sudah tahu bedanya sebuah tabel tanpa judul dan tabel dengan judul? Pastinya akan lebih menarik tabel yang ada judulnya ya sobat dibandingkan tabel yang tidak ada judulnya.

  • Membuat Struktur Tabel

Sebuah tabel yang berkualitas, adanya suatu struktur tabel akan sangat membantu dalam mengatur bagaimana baiknya sebuah tabel ditampilkan. Untuk itu anda bisa menggunakan beberapa tag ini ya sobat, antara lain thead, tfoot dan tbody. Anda sekarang bisa langsung praktek saja dengan melihat kode – kode yang sudah penulis sediakan di bawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
<table border=”1″>
<thead>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</tbody>
</table>
</body>
</html>

Inilah hasil tampilannya :

Membuat Struktur Tabel
Membuat Struktur Tabel

Inilah sedikit ilmu yang bisa penulis bagikan kepada anda semua mengenai belajar html5. Semoga apa saja yang sudah penulis ulas dan jelaskan bisa menambah wawasan anda atau pun menambah kualitas anda dalam hal penguasaan html5 ya sobat. Penulis juga memohon maaf jika pembahasan pada kesempatan kali ini masih banyak kekurangannya. Sampai jumpa di kesempatan – kesempatan lain yang berharga dan tidak kalah menarik pembahasan – pembahasannya. Terima kasih dan sampai jumpa. Salam hangat dari penulis.

Baca juga mengenai belajar database mysql postgresql mongodb oracle dan sap hana itu mudah bagi pemula

ARTIKEL TERKAIT