Website lebih modern menggunakan HTML 5
teknologi modern dalam mengembangkan website menjadi lebih intraktif serta responsive.
Halo para pelajar yang haus akan ilmu, salah satu ciri kemajuan adalah selalu belajar hal baru. disini, saya sharing kepada kamu tentang seputar HTML 5. bila ada keliru jangan lupa diluruskan ya hehehe…. saat ini website semakin canggih berbeda dengan website dahulu.
Perkembangan website semakin modern menyebabkan munculnya teknologi terbaru, tentu yang terbaru memiliki kelebihan salah satunya pada fungsionalitas. dari sumber yang saya baca bahwa, Html 4 kurang ideal dalam mengembangkan suatu website. mungkin itu menjadi sebab keluhan orang-orang dalam mengembangkan sebuah website.
Kemunculan teknologi baru mempermudah developer dalam membangun sebuah website. Html adalah bahasa Markup yang di gunakan dalam membangun kerangka pada website. saat ini html versi 5 yang terbaru, di rilis pada tahun 2014. tentu hal ini merupakan kabar gembira bagi pengembang website.
Tujuan terciptanya HTML 5
Kemunculan html 5 membawa angin segar di kalangan developer, karena memiliki fungsionalitas lebih baik dari versi sebelumnya. tentu perkembangan website yang semakin maju akan berdampak baik kedepannya.
Kurangnya keidealan dan kelemahan pada versi sebelumnya menyebabkan muncul HTML versi terbaru. W3C yang merupakan organisasi internasional yang bertanggung jawab atas standar web. membuat sebuah kelompok kerja di lakukan berbagai perusahan teknologi seperti Goggle, Microsoft, Apple, Opera dan Mozilla yang dinamai Html Working Group yang bertujuan membuat versi terbaru guna mengatasi kelemahan pada versi sebelumnya.
Berbagai tahap pengembangan, akhir rilis versi terbaru yang dapat di gunakan di kalangan pengembang.
Fitur terbaru pada HTML 5
Teknologi baru memungkin website menjadi lebih baik. dengan fitur-fitur yang ada mempermudahkan dalam pengembangan serta interaktif pada suatu website.
Kelompok kerja Html Working Group membuat fitur-fitur terbaru yang berhasil di rilis dari berbagai tahap pengembangan. adapun beberapa pembaharuan yang saya jabarkan yaitu.
Tag semantic
Struktur Html berupa tag-tag yang tersusun sesuai fungsinya. setiap tag memiliki informasi dan kegunaannya masing-masing. ada beberapa tag yang wajib pada struktur Html dan ada juga yang tidak. sebuah tag html yang bertujuan untuk mengetahui detail pada struktur halaman web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- tag semantic <header> -->
<header>
<div class="logo"></div>
<!-- tag sematic <nav> -->
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<!-- tag semantic <main> -->
<main>
<!-- membuat tag section -->
<section>
<h3>Belajar PHP dasar</h3>
<p>pembelajar dilakukan mulai dari dasar</p>
</section>
<section>
<h3>Belajr Javscript dasar</h3>
<p>pembelajar dilakukan mulai dari dasar</p>
</section>
</main>
<!-- membuat tag <footer> -->
<footer>
<p>©2023 copyRight - belajar</p>
</footer>
</body>
</html>Tag semantic memudahkan mesin pencarian dalam konsep menemukan, serta tag sematic tentu pengembang website mudah di baca dan dipelihara. sebelum rilis versi baru, tag semantic sudah ada namun tidak selengkap tag semantic pada versi baru. berikut beberapa tag semantic.
- <header>, tag ini menandakan bahwa bagian atas pada website. biasanya berisi sebuah Logo, Navigasi, atau keperluan lain seperti visual yang berada di atas halaman. dengan tag ini memungkinkan mesin pencarian mudah di temukan dan juga menandakan sebuah website yang bekuliatas.
- <nav>, ini berfungsi menandakan sebagai navigasi pada halaman web, biasanya terletak di atas maupun di bawah halaman website sesuai desain yang telah di buat.
- <article>, menandakan sebuah artikel pada halaman website. biasanya berisi topik seperti berita atau tulisan deksripsi sehingga mudah ditemukan oleh serach engine.
- <section>, digunakan ketika membuat sebuah pengelompokan pada makna tertentu, misalnya membuat satu topik artikel dalam satu pengelompokan maka perlu memakai section.
- <aside>, digunakan sebagai content sampingan. contohnya ketika kamu melihat blog, lalu di samping itu ada content seperti iklan atau content kecil. nah.. itu perlu penerapan tag tersebut.
- <main>, ini merupakan content utama. biasanya berisi section, article, atau tak lain yang diperlukan oleh content utama.
- <figure>, merupakan penanda sebagai content multimedia seperti gambar, audio, maupun video.
- <figcaption>, biasanya terletak di tag figure yang berguna sebagai memeberikan sebuah informasi/caption tambahan pada gambar, video, maupun video.
- <footer>, ini terletak di bawah halaman website yang menunjukan informasi seperti sitemap, hak cipta, atau informasi profil.
Dukungan multimedia yang lebih baik
multimedia merupakan informasi yang di kombinasi dari beberapa element seperti text, audio, maupun video. pada pembaharuan versi saat ini tentu menjadi lebih baik lagi.
dengan pembaharuan yang ada memepermudahkan para pengembang dalam mengolah content multimedia seperti membuat animasi CSS, webRTC, canvas, dan masih banyak lainnya.
berikut cara membuat video dengan html5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="tes.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>tujuan multimedia diterapkan agar website dapat tampil lebih menarik dan hidup. dengan kebutuhan content yang ada mempermudahkan pengunjung dalam mengolah sebuah informasi.
Adanya Canvas
Canvas merupakan sebagai alat untuk mengambar, membuat bentuk-bentuk, grafik, animasi, maupun vector. Html5 menerapkan fitur canvas ini agar pengembang tidak susah payah merapkan plugin seperti flash.
awalnya flash adalah teknologi yang di perlukan dalam membuat animasi maupun game, tetapi memiliki kelemahan salah satunya faktor keamanan. html5 hadir mendukung dengan perkembangan teknologi yang modern, flash ditinggalkan dan di ganti oleh Html 5.
Canvas merupakan element Html sehingga mudah dalam bekerja sama dengan javascript. membuat game dengan mudah di lakukan menggunakan canvas. fitur ini sudah dirancang berbagai kemudahan seperti proses penggambaran dan interaksi seperti 2D rendering conteks, webGL, maupun web audio API.
berikut cara penggunaan canvas dengan output menampilkan sebuah persegi bewarna biru.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contoh Tag Canvas</title>
<style>
canvas {
border: 3px solid rgb(90, 82, 82);
border-radius: 1rem;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 60, 100, 100);
ctx.clearRect(10, 10, 10);
</script>
</body>
</html>mendukung webRTC (web real-time communication)
ini adalah teknologi diamana kita bisa melakukan video dan audio secara real time. apa itu real-time? real-time merupakan suatu kondisi yang di proses secara langsung, contohnya video call. kita selaku pengguna video call tentu terlihat secara langsung tanggal dan tempat serta audio.
sebelum adanya teknologi webRTC ini, para developer harus menambahkan plugin browser agar bisa di digunakan. hal ini memungkinkan performa website menjadi lambat
pengunaan webRTC biasanya di pakai untuk membuat aplikasi chatingan, video call, berkolaborasi dengan bermain game dan masih banyak contoh lain.
Mendukung animasi CSS
style ini mungkin tidak asing lagi di kalangan developer webiste. teknologi ini merupakan bahasa stylesheet yang dapat mengatur layout, warna, font, ukuran dan masih banyak lainnya.
dukungan terhadap animasi CSS memudahkan dalam membuat animasi tanpa menggunakan canvas. kamu dapat membuat durasi sesuai keinginan.
berikut cara penggunaan animasi dengan CSS3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contoh Animasi CSS</title>
<style>
body {
background-color: darkgreen;
}
.center {
width: 100%;
height: 100vh;
display: grid;
place-content: center;
}
.box {
width: 100px;
height: 100px;
filter: blur(1em);
border-radius: 100%;
background-color: blue;
animation-name: example;
animation-duration: 0.2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.box2 {
margin-top: 2em;
}
@keyframes example {
from {
background-color: transparent;
}
to {
background-color: black;
}
}
</style>
</head>
<body>
<main>
<section class="center">
<div class="box"></div>
<div class="box box2"></div>
</section>
</main>
</body>
</html>dengan teknologi yang memadai kamu dapat membuat website yang keren dan baik tentunya.
sebenarnya masih ada beberapa fitur lagi yang tidak saya jabarkan, mungkin kamu bisa mencari di artikel lain ya.
Kesimpulan
website merupakan beberapa halaman yang mangandung sebuah infomasi. kerangka dasar berasal dari bahasa markup yaitu html. teknologi ini tentu memiliki perkembangan yang cukup panjang. hal ini karena beberapa faktor seperti kecantikan, kecepatan, maupun kemudahan.
html 5 lebih baik dari pada versi sebelumnya. terdapat kelemahan yang menyebabkan website kurang baik. pembaharuan yang terjadi menyebabkan suatu kebahagian, sehingga para developer dapat dengan mudah melakukan pembuatan serta
fitur-fitur yang ada mengubah beberapa kelemahan yang biasanya memakai plugin pihak ketiga, sekarang cukup dengan fitur-fitur html5 kamu bisa membuat website yang keren.
mungkin itu saja artikel dari saya, jika ada yang melenceng dan salah, jangan lupa di luruskan ya. jika ada kesalahan saya minta maaf. terimah kasih sudah membaca artikel saya.
