Contoh HTML Terbaik dan Contoh Coding HTML Website
Contoh HTML – HTML menyediakan struktur situs web. daftar berikut ini adalah beberapa contoh cara menggunakan sintaks HTML untuk membangun situs web, termasuk beberapa contoh coding html website yang lebih baru.
Pada postingan sebelumnya Tim Rating Website telah merilis artikel contoh web html yang sudah jadi untuk referensi anda dalam membangun situs web berbasis HTML5 yang elegan dan full fitur, kali ini kita akan memberikan contoh HTML dan contoh coding HTML website terbaru untuk anda.
- Advertisement -
Contoh HTML Terbaik dan Contoh Coding HTML Website
Contoh Atribut A HR
Atribut <a href>mengacu pada tujuan yang disediakan oleh tautan. Tag a(jangkar) mati tanpa <href>atribut. Terkadang dalam alur kerja Anda, Anda tidak menginginkan tautan langsung atau Anda belum mengetahui tujuan tautan.
Dalam hal ini, akan berguna untuk menyetel hrefatribut ke "#"untuk membuat tautan mati. Atribut hreftersebut dapat digunakan untuk menautkan ke file lokal atau file di internet.
Misalnya:
<html>
<head>
<title>Href Attribute Example</title>
</head>
<body>
<h1>Href Attribute Example</h1>
<p>
<a href="https://www.ratingwebsite.com/contribute/">rating website contribution page</a> shows you how and where you can contribute to rating website community and growth.
</p>
</body>
</html>Atribut <a href>ini didukung oleh semua browser.
Lebih banyak atribut:hreflang: Menentukan bahasa sumber daya yang ditautkan. target: Menentukan konteks di mana sumber daya tertaut akan terbuka. title: Mendefinisikan judul link, yang muncul kepada pengguna sebagai tooltip.
Contoh
<a href="#">ini adalah link mati</a>
<a href="https://www.ratingwebsite.com">ini adalah link hidup untuk rating website</a>
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>
Anchor Text Dalam Halaman
Anda juga dapat mengatur anchor text ke tempat halaman tertentu. Untuk melakukan ini, Anda harus terlebih dahulu menempatkan tab di lokasi pada halaman dengan tag dan atribut “nama” yang diperlukan dengan deskripsi kata kunci apa pun di dalamnya, seperti ini:
<a name="top"></a>
Deskripsi apa pun di antara tag tidak diperlukan. Setelah itu Anda dapat menempatkan tautan yang mengarah ke jangkar ini di tempat mana pun di halaman yang sama. Untuk melakukan ini, Anda harus menggunakan tag dengan atribut yang diperlukan “href” dengan simbol # (tajam) dan deskripsi kata kunci dari jangkar, seperti ini:
- Advertisement -
<a href="#top">Go to Top</a>
Link Gambar (Contoh HTML Terbaik dan Contoh Coding HTML Website)
Itu <a href="#">juga dapat diterapkan pada gambar dan elemen HTML lainnya.
Contoh
<a href="#">
<img itemprop="image" style="height: 90px;" src="https://bit.ly/36r5kss" alt="100+ Contoh Web HTML Yang Sudah Jadi Download Gratis">
</a>
Contoh
Contoh Target A
Atribut <a target>menentukan tempat untuk membuka dokumen tertaut dalam atag (anchor).
Contoh:
Atribut target dengan nilai “_blank” membuka dokumen tertaut di jendela atau tab baru.
<a href="https://www.ratingwebsite.com/" target="_blank">Rating Website</a>
Atribut target dengan nilai “_self” membuka dokumen yang ditautkan dalam bingkai yang sama dengan yang diklik (ini adalah default dan biasanya tidak perlu ditentukan).
<a href="https://www.ratingwebsite.com/" target="_self">Rating Website</a>
<a href="https://www.ratingwebsite.com/">Rating Website</a>
Atribut target dengan nilai “_parent” membuka dokumen tertaut di bingkai induk.
<a href="https://www.ratingwebsite.com/" target="_parent">Rating Website</a>
Atribut target dengan nilai “_top” membuka dokumen tertaut di seluruh badan jendela.
<a href="https://www.ratingwebsite.com/" target="_top">Rating Website</a>
Atribut target dengan nilai “framename” Membuka dokumen tertaut dalam bingkai bernama tertentu.
<a href="https://www.ratingwebsite.com/" target="framename">Rating Website</a>
Contoh Atribut Latar Belakang Body (Contoh HTML Terbaik dan Contoh Coding HTML Website)
Jika Anda ingin menambahkan gambar latar belakang alih-alih warna, salah satu solusinya adalah <body background>atributnya. Ini menentukan gambar latar belakang untuk dokumen HTML.
Sintaksis:
<body background="URL">
Atribut:
background - URL for background image
- Advertisement -
Contoh:
<html>
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
</body>
</html>Atribut body-background disusutkan
atribut body-background sudah tidak digunakan lagi di HTML5. Cara yang benar untuk menata <body>tag adalah dengan CSS.
Ada beberapa properti CSS yang digunakan untuk mengatur latar belakang suatu elemen. Ini dapat digunakan untuk mengatur latar belakang seluruh halaman.
Contoh Atribut Body Bgcolor (Contoh HTML Terbaik dan Contoh Coding HTML Website)
Atribut <body bgcolor>memberikan warna latar belakang untuk dokumen HTML.
Sintaks :
<body bgcolor="color">Nilai warna dapat berupa nama warna (seperti, purple) atau nilai heksagonal (seperti, #af0000).
Untuk menambahkan warna latar belakang ke halaman web, Anda dapat menggunakan <body bgcolor="######">atribut. Ini menentukan warna untuk dokumen HTML untuk ditampilkan.
Sebagai contoh:
<html>
<head>
<title>Body bgcolor Attribute example</title>
</head>
<body bgcolor="#afafaf">
<h1>This webpage has colored background.</h1>
</body>
</html>Anda dapat mengubah warna dengan mengganti ###### dengan nilai heksadesimal. Untuk warna sederhana Anda juga dapat menggunakan kata, seperti “merah” atau “hitam”.
Semua browser utama mendukung <body bgcolor>atribut tersebut.
Catatan:
- HTML 5 tidak mendukung
<body bgcolor>atribut. Gunakan CSS untuk tujuan ini. Bagaimana? Dengan menggunakan kode berikut:<body style="background-color: color">Tentu saja, Anda juga dapat melakukannya di dokumen terpisah daripada metode inline. - Jangan gunakan nilai RGB dalam
<body bgcolor>atribut karenargb()hanya untuk CSS, artinya tidak akan berfungsi di HTML.
Contoh Atribut Div Align
Atribut <div align="">digunakan untuk menyelaraskan teks dalam tag div ke Kiri, Kanan, tengah, atau ratakan.
Misalnya:
<html>
<head>
<title>Div Align Attribbute</title>
</head>
<body>
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
</body>
</html>
Penting!
Atribut ini tidak lagi didukung di html5. css adalah cara untuk pergi.
Atribut Div Align dapat digunakan untuk menyelaraskan konten dalam div secara horizontal. Dalam contoh di bawah ini, teks akan dipusatkan di dalam div.
- Advertisement -
<div align="center">
This Text Will Be Centered
</div>**Atribut ini tidak didukung di HTML5 dan CSS Text Align harus digunakan sebagai gantinya
Contoh Atribut Warna Font
Atribut ini digunakan untuk mengatur warna pada teks yang dilampirkan dalam <font>tag.
Penting:
Atribut ini tidak didukung di HTML5. Sebagai gantinya, artikel contoh HTML ini menetapkan metode CSS, yang dapat digunakan.
Catatan:
Warna juga dapat ditentukan menggunakan ‘kode hex’ atau ‘kode rgb’, alih-alih menggunakan nama.
Contoh:
Atribut nama warna
<html>
<body>
<font color="green">Font color example using color attribute</font>
</body>
</html>Atribut kode heksagonal
<html>
<body>
<font color="#00FF00">Font color example using color attribute</font>
</body>
</html>
atribut RGB
<html>
<body>
<font color="rgb(0,255,0)">Font color example using color attribute</font>
</body>
</html>
Contoh Atribut Ukuran Font
Atribut ini menentukan ukuran font sebagai nilai numerik atau relatif. Nilai numerik berkisar dari 1hingga menjadi 7yang 1terkecil dan 3default. Itu juga dapat didefinisikan menggunakan nilai relatif, seperti +2atau -3, yang menetapkannya relatif terhadap nilai atribut ukuran <basefont>elemen, atau relatif terhadap 3, nilai default, jika tidak ada.
Sintaksis:
<font size="number">
- Advertisement -
Contoh:
<html>
<body>
<font size="6">This is some text!</font>
</body>
</html>Catatan :The size attribute of <font> is not supported in HTML5. Use CSS instead.
Contoh Atribut Img Align
Atribut align gambar menentukan di mana gambar harus disejajarkan menurut elemen sekitarnya.
Nilai Atribut:
kanan – Ratakan gambar ke kanan kiri – Ratakan gambar ke kiri
atas – Ratakan gambar ke
bawah atas – Ratakan gambar ke
tengah bawah – Ratakan gambar ke tengah
Sebagai contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Align Attribute</title>
</head>
<body>
<p>
This is an example. <img src="image.png" alt="Image" align="middle" /> More text right here
<img src="image.png" alt="Image" width="100" />
</p>
</body>
</html>
Kami juga dapat menyelaraskan ke kanan jika kami ingin:
<p>This is another example<img src="image.png" alt="Image" align="right" /></p>
Harap perhatikan bahwa atribut align tidak didukung di HTML5, dan Anda harus menggunakan CSS sebagai gantinya. Namun, masih didukung oleh semua browser utama.
Atribut Lebar Img
Atribut ‘lebar’ HTML mengacu pada lebar gambar. Nilai dalam kutipan adalah jumlah piksel.
Misalnya, jika Anda sudah memiliki tautan ke gambar yang diatur melalui srcatribut, Anda dapat menambahkan atribut lebar seperti:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Width Attribute</title>
</head>
<body>
<img src="image.png" alt="Image" width="100" />
</body>
</html>
Pada cuplikan kode di atas terdapat tag gambar dan gambar disetel ke lebar 100 piksel.width="100"
Contoh Atribut Img Src
Atribut <img src>mengacu pada sumber gambar yang ingin Anda tampilkan. Tag imgtidak akan menampilkan gambar tanpa srcatribut. Namun, jika Anda mengatur sumber ke lokasi gambar, Anda dapat menampilkan gambar apa pun.
Ada gambar Logo ratingwebsite yang terletak dihttps://avatars0.githubusercontent.com/u/9892522?v=4&s=400
Anda dapat mengaturnya sebagai gambar menggunakan srcatribut.
<html>
<head>
<title>Img Src Attribute Example</title>
</head>
<body>
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400" />
</body>
</html>Atribut srcini didukung oleh semua browser.
Anda juga dapat memiliki file yang dihosting secara lokal sebagai gambar Anda.
Misalnya, <img src="images/ratingwebsite.jpeg>akan berfungsi jika Anda memiliki folder bernama imagesyang memiliki bagian ratingwebsite.jpegindex.htmlfile.
../files/index.html
..files/images/ratingwebsite.jpeg
Ringkasan
Apa itu Entitas HTML?
Entitas HTML adalah karakter yang digunakan untuk menggantikan karakter yang dicadangkan dalam HTML atau untuk karakter yang tidak muncul di keyboard Anda. Beberapa karakter dicadangkan dalam HTML. Jika Anda menggunakan tanda kurang dari(<) atau lebih besar dari(>) dalam teks Anda, browser mungkin mencampurnya dengan tag.
Untuk apa mereka digunakan?
Seperti yang disebutkan tentang entitas HTML digunakan untuk mengganti karakter yang dicadangkan yang dicadangkan oleh HTML.
- Advertisement -
Bagaimana cara anda menggunakannya?
Entitas karakter terlihat mirip dengan ini:
<!-- format &[entity_name]; -->
<!-- example for a less-than sign (<) -->
<Atau
<!-- &#[entity_number]; -->
<!-- example for a less-than sign (<) -->
<Panduan Referensi
Ini sama sekali bukan daftar yang lengkap tetapi tautan di bawah ini akan dapat memberi Anda lebih banyak entitas jika yang di bawah ini tidak sesuai dengan kebutuhan Anda. Selamat Coding :bowtie:
Character Entity Name Entity Number Description
  Space
! ! Exclamation mark
” " Quotation mark
# # Number sign
$ $ Dollar sign
¢ ¢ ¢ Cent sign
€ € € Euro sign
£ £ £ GBP sign
¥ ¥ ¥ Yen sign
% % Percent sign
& & & Ampersand
’ ' Apostrophe
( ( Opening/Left Parenthesis
) ) Closing/Right Parenthesis
* * Asterisk
+ + Plus sign
, , Comma
- - Hyphen
. . Period
/ / Slash
© © © Copyright
® ® ® Registered Trademark
” " " double quotation mark
> > > Greater-than sign
< < < Less-than sign
• • • Bullet pointContoh Formulir HTML
Pada dasarnya, formulir digunakan untuk mengumpulkan data yang dimasukkan oleh pengguna, yang kemudian dikirim ke server untuk diproses lebih lanjut. Mereka dapat digunakan untuk berbagai jenis input pengguna, seperti nama, email, dll.
Formulir berisi elemen kontrol yang dililitkan di sekitar <form></form>tag, seperti input, yang dapat memiliki tipe seperti:
textemailpasswordcheckboxradiosubmitrangesearchdatetimeweekcolordatalist
Example Code:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
<input type="radio" name="gender" value="male" />Male<br />
<input type="radio" name="gender" value="female" />Female<br />
<input type="radio" name="gender" value="other" />Other
<input list="Options" />
<datalist id="Options">
<option value="Option1"></option>
<option value="Option2"></option>
<option value="Option3"></option>
</datalist>
<input type="submit" value="Submit" />
<input type="color" />
<input type="checkbox" name="correct" value="correct" />Correct
</form>
Elemen lain yang membentuk dapat berisi:
textarea– adalah kotak multiline yang paling sering digunakan untuk menambahkan beberapa teks misalnya. komentar. Ukuran textarea ditentukan oleh jumlah baris dan kolom.select– bersama dengan<option></option>tag membuat menu pilih drop-down.button– Elemen tombol dapat digunakan untuk menentukan tombol yang dapat diklik.
INFORMASI LEBIH LANJUT TENTANG FORMULIR HTML.
Formulir HTML diperlukan ketika Anda ingin mengumpulkan beberapa data dari pengunjung situs. Misalnya, selama pendaftaran pengguna, Anda ingin mengumpulkan informasi seperti nama, alamat email, kartu kredit, dll.
Formulir akan mengambil input dari pengunjung situs dan kemudian akan mempostingnya ke aplikasi back-end seperti CGI, ASP Script atau PHP script dll. Aplikasi back-end akan melakukan pemrosesan yang diperlukan pada data yang diteruskan berdasarkan logika bisnis yang ditentukan di dalamnya aplikasi.
Ada berbagai elemen formulir yang tersedia seperti bidang teks, bidang teks, menu tarik-turun, tombol radio, kotak centang, dll.
Tag HTML <form>digunakan untuk membuat formulir HTML dan memiliki sintaks berikut
<form action="Script URL" method="GET|POST">form elements like input, textarea etc.</form>
Jika metode formulir tidak ditentukan maka akan default ke “GET”.
Tag formulir juga dapat memiliki atribut bernama “target” yang menentukan di mana tautan akan dibuka. Itu dapat terbuka di tab browser, bingkai, atau di jendela saat ini.
Atribut action mendefinisikan aksi yang akan dilakukan ketika form dikirimkan. Biasanya, data formulir dikirim ke halaman web di URL Skrip ketika pengguna mengklik tombol kirim. Jika atribut tindakan dihilangkan, tindakan diatur ke halaman saat ini.
Contoh Audio HTML5
Sebelum HTML5, file audio harus diputar di browser menggunakan plug-in seperti Adobe Flash. HTML
Cuplikan kode berikut menambahkan file audio dengan nama file tutorial.oggatau tutorial.mp3. Elemen menunjukkan file audio alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format pertama yang dikenali.
Example
<audio controls>
<source src="tutorial.ogg" type="audio/ogg" />
<source src="tutorial.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>Atribut controlsmencakup kontrol audio seperti putar, jeda, dan volume. Jika Anda tidak menggunakan atribut ini, maka tidak ada kontrol yang akan ditampilkan.
Elemen ini <source>memungkinkan Anda untuk menunjukkan file audio alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format pengenalan pertama. Teks antara <audio>dan </audio>tag dapat ditampilkan di browser yang tidak mendukung <audio>elemen HTML5.
Atribut putar otomatis akan secara otomatis memutar file audio Anda di latar belakang. Ini dianggap praktik yang lebih baik untuk membiarkan pengunjung memilih untuk memutar audio.
Atribut preload menunjukkan apa yang harus dilakukan browser jika pemutar tidak disetel ke putar otomatis.
Atribut loop akan memutar file audio Anda dalam loop berkelanjutan jika disebutkan
Karena ini adalah html5, beberapa browser tidak mendukungnya. Anda dapat memeriksanya di https://caniuse.com/#search=audio
Contoh Elemen Semantik HTML5
Elemen HTML semantik dengan jelas menggambarkan maknanya dengan cara yang dapat dibaca manusia dan mesin. Elemen seperti <header>, <footer>dan <article>semuanya dianggap semantik karena secara akurat menggambarkan tujuan elemen dan jenis konten yang ada di dalamnya.
Sejarah Singkat
HTML awalnya dibuat sebagai bahasa markup untuk menggambarkan dokumen di internet awal. Ketika internet tumbuh dan diadopsi oleh lebih banyak orang, kebutuhannya berubah. Di mana internet awalnya ditujukan untuk berbagi dokumen ilmiah, sekarang orang ingin berbagi hal lain juga. Dengan sangat cepat, orang-orang mulai ingin membuat web terlihat lebih bagus.
Karena web pada awalnya tidak dibuat untuk dirancang, pemrogram menggunakan peretasan yang berbeda untuk membuat segala sesuatunya ditata dengan cara yang berbeda. Daripada menggunakan <table></table>untuk menggambarkan informasi menggunakan tabel, programmer akan menggunakannya untuk memposisikan elemen lain pada halaman.
Saat penggunaan tata letak yang dirancang secara visual berkembang, pemrogram mulai menggunakan tag “non-semantik” generik seperti <div>. Mereka sering memberi elemen ini a classoridatribut untuk menggambarkan tujuan mereka. Misalnya, alih-alih <header>ini sering ditulis sebagai <div class="header">. Karena HTML5 masih relatif baru, penggunaan elemen non-semantik ini masih sangat umum di situs web saat ini.
Daftar elemen semantik baru
Elemen semantik yang ditambahkan dalam HTML5 adalah:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elemen seperti <header>, <nav>, <section>, <article>, <aside>, dan <footer>bertindak kurang lebih seperti <div>elemen. Mereka mengelompokkan elemen lain menjadi bagian halaman. Namun jika <div>tag dapat berisi jenis informasi apa pun, mudah untuk mengidentifikasi jenis informasi apa yang akan masuk ke <header>wilayah semantik.
Contoh tata letak elemen semantik oleh w3schools
Manfaat elemen semantik
Untuk melihat manfaat elemen semantik, berikut adalah dua buah kode HTML. Blok kode pertama ini menggunakan elemen semantik:
<header></header>
<section>
<article>
<figure>
<img />
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Sementara blok kode kedua ini menggunakan elemen non-semantik:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img />
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
Pertama, jauh lebih mudah dibaca . Ini mungkin hal pertama yang akan Anda perhatikan ketika melihat blok kode pertama menggunakan elemen semantik. Ini adalah contoh kecil, tetapi sebagai seorang programmer Anda dapat membaca ratusan atau ribuan baris kode. Semakin mudah untuk membaca dan memahami kode itu, semakin mudah membuat pekerjaan Anda.
Ini memiliki aksesibilitas yang lebih besar . Anda bukan satu-satunya yang menemukan elemen semantik lebih mudah dipahami. Mesin telusur dan teknologi bantu (seperti pembaca layar untuk pengguna dengan gangguan penglihatan) juga dapat lebih memahami konteks dan konten situs web Anda, yang berarti pengalaman yang lebih baik bagi pengguna Anda.
Secara keseluruhan, elemen semantik juga menghasilkan kode yang lebih konsisten . Saat membuat header menggunakan elemen non-semantik, pemrogram yang berbeda mungkin menulis ini sebagai <div class="header">, <div id="header">, <div class="head">, atau hanya <div>. Ada banyak cara untuk membuat elemen header, dan semuanya bergantung pada preferensi pribadi programmer. Dengan membuat elemen semantik standar, itu memudahkan semua orang.
Sejak Oktober 2014, HTML4 ditingkatkan ke HTML5, bersama dengan beberapa elemen “semantik” baru. Sampai hari ini, sebagian dari kita mungkin masih bingung mengapa begitu banyak elemen berbeda yang tampaknya tidak menunjukkan perubahan besar.
<section>dan<article>
“Apa bedanya?”, Anda mungkin bertanya. Kedua elemen ini digunakan untuk membagi konten, dan ya, keduanya pasti dapat digunakan secara bergantian. Ini masalah dalam situasi apa. HTML4 hanya menawarkan satu jenis elemen penampung, yaitu <div>. Saat ini masih digunakan di HTML5, HTML5 memberi kami <section>dan <article>dengan cara mengganti <div>.
Elemen <section>dan <article>secara konseptual serupa dan dapat dipertukarkan. Untuk memutuskan mana yang harus Anda pilih, perhatikan hal-hal berikut:
- Sebuah artikel dimaksudkan untuk didistribusikan secara independen atau dapat digunakan kembali.
- Bagian adalah pengelompokan konten secara tematik.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>
<header>dan<hgroup>
Elemen <header>umumnya ditemukan di bagian atas dokumen, bagian, atau artikel dan biasanya berisi judul utama dan beberapa alat navigasi dan pencarian.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
Elemen <hgroup>harus digunakan di mana Anda ingin judul utama dengan satu atau lebih subpos.
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
INGAT, bahwa <header>elemen dapat berisi konten apa pun, tetapi <hgroup>elemen tersebut hanya dapat berisi header lain, yaitu <h1>to <h6>dan include <hgroup>.
<aside>
Elemen <aside>tersebut dimaksudkan untuk konten yang bukan merupakan bagian dari aliran teks di mana ia muncul, namun masih terkait dalam beberapa hal. Ini <aside>sebagai sidebar untuk konten utama Anda.
<aside>
<p>
This is a sidebar, for example a terminology definition or a short background to a historical
figure.
</p>
</aside>
Sebelum HTML5, menu kami dibuat dengan <ul>‘s dan <li>‘s. Sekarang, bersama dengan ini, kami dapat memisahkan item menu kami dengan <nav>, untuk navigasi antar halaman Anda. Anda dapat memiliki sejumlah <nav>elemen di halaman, misalnya, navigasi global di bagian atas (di <header>) dan navigasi lokal di bilah sisi (dalam <aside>elemen) adalah hal yang biasa.
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
<footer>
Jika ada <header>harus ada <footer>. A <footer>umumnya ditemukan di bagian bawah dokumen, bagian, atau artikel. Sama seperti <header>konten umumnya metainformasi, seperti detail penulis, informasi hukum, dan/atau tautan ke informasi terkait. Hal ini juga berlaku untuk memasukkan <section>elemen dalam footer.
<footer>©Company A</footer><small>
Elemen tersebut <small>sering muncul di dalam a <footer>atau <aside>elemen yang biasanya berisi informasi hak cipta atau penafian hukum, dan cetakan halus lainnya. Namun, ini tidak dimaksudkan untuk membuat teks lebih kecil. Itu hanya menggambarkan isinya, bukan meresepkan presentasi.
<footer><small>©Company A</small> Date</footer><time>
Elemen ini <time>memungkinkan tanggal ISO 8601 yang tidak ambigu untuk dilampirkan ke versi tanggal tersebut yang dapat dibaca manusia.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>Mengapa repot-repot dengan <time>? Sementara manusia dapat membaca waktu yang dapat membedakan konteks dengan cara biasa, komputer dapat membaca tanggal ISO 8601 dan melihat tanggal, waktu, dan zona waktu.
<figure>dan<figcaption>
<figure>adalah untuk membungkus konten gambar Anda di sekitarnya, dan <figcaption>untuk memberi keterangan pada gambar Anda.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>Example Video HTML5
Sebelum HTML5, untuk memutar video di halaman web, Anda perlu menggunakan plugin, seperti Adobe Flash Player. Dengan pengenalan HTML5, Anda sekarang dapat menempatkannya langsung ke halaman itu sendiri. HTML
Untuk menyematkan file video ke halaman web, cukup tambahkan cuplikan kode ini dan ubah src file audio.
<video controls>
<source src="tutorial.ogg" type="video /ogg" />
<source src="tutorial.mp4" type="video /mpeg" />
Your browser does not support the video element. Kindly,update it to latest version.
</video>
Atribut kontrol mencakup kontrol video, mirip dengan putar, jeda, dan volume.
Fitur ini didukung oleh semua browser modern/yang diperbarui. Namun, tidak semua mendukung format file video yang sama. Rekomendasi saya untuk berbagai kompatibilitas adalah MP4, karena ini adalah format yang paling banyak diterima. Ada juga dua format lain (WebM dan Ogg) yang didukung di Chrome, Firefox, dan Opera.
Elemen ini memungkinkan Anda untuk menunjukkan file video alternatif yang dapat dipilih oleh browser. Browser akan menggunakan format pengenalan pertama. Di HTML5, ada 3 format video yang didukung: MP4, WebM, dan Ogg.
Teks di antara tag hanya akan ditampilkan di browser yang tidak mendukung
Ada beberapa elemen berbeda dari tag video, banyak dari penjelasan ini didasarkan pada dokumen web Mozilla (tautan di bawah). Masih ada lagi jika Anda mengklik tautan di bagian bawah.
Putar Otomatis
“putar otomatis” dapat diatur ke benar atau salah. Anda menyetelnya ke true dengan menambahkannya ke dalam tag, jika tidak ada di tag itu disetel ke false. Jika disetel ke true, video akan mulai diputar segera setelah buffer video cukup untuk dapat diputar. Banyak orang menganggap pemutaran otomatis video mengganggu atau mengganggu, jadi gunakan fitur ini dengan hemat. Perhatikan juga, bahwa beberapa browser seluler, seperti Safari untuk iOS, mengabaikan atribut ini.
<video autoplay>
<source src="video.mp4" type="video/mp4" />
</video>
Poster
Atribut “poster” adalah gambar yang ditampilkan pada video hingga pengguna mengklik untuk memutarnya.
<video poster="poster.png">
<source src="video.mp4" type="video/mp4" />
</video>
Kontrol
Atribut “controls” dapat disetel ke true atau false dan akan menangani apakah kontrol seperti tombol putar/jeda atau penggeser volume muncul. Anda menyetelnya ke true dengan menambahkannya ke dalam tag, jika tidak ada di tag itu disetel ke false.
<video controls>
<source src="video.mp4" type="video/mp4" />
</video>
Masih banyak lagi atribut yang bisa ditambahkan yang bersifat opsional untuk menyesuaikan pemutar video di halaman. Untuk mempelajari lebih lanjut, klik tautan di bawah ini.
Penyimpanan Web HTML5
Penyimpanan web memungkinkan aplikasi web menyimpan hingga 5MB informasi dalam penyimpanan browser per asal (per domain dan protokol).
Jenis Penyimpanan Web
Ada dua objek untuk menyimpan data pada klien:
window.localStorage: menyimpan data tanpa tanggal kedaluwarsa dan hidup sampai dihapus.
// Store Item
localStorage.setItem("foo", "bar");
// Get Item
localStorage.getItem("foo"); //returns "bar"window.sessionStorage: menyimpan data untuk satu sesi, dimana data hilang saat browser / tab browser ditutup.
// Store Item
sessionStorage.setItem("foo", "bar");
// Get Item
sessionStorage.getItem("foo"); //returns "bar"Karena implementasi saat ini hanya mendukung pemetaan string-ke-string, Anda perlu membuat serialisasi dan de-serialisasi struktur data lainnya.
Anda dapat melakukannya menggunakan JSON.stringify() dan JSON.parse().
Misalnya untuk JSON yang diberikan
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };Kami pertama-tama mengonversi objek JSON menjadi string dan menyimpannya di penyimpanan lokal:
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));Untuk mendapatkan objek JSON dari string yang disimpan di penyimpanan lokal:
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));Sample Tautan Mailto
Tautan mailto adalah sejenis hyperlink ( <a href=""></a>) dengan parameter khusus yang memungkinkan Anda menentukan penerima tambahan, baris subjek, dan/atau teks isi.
Sintaks dasar dengan penerima adalah:
<a href="mailto:friend@something.com">Some text</a>Lebih banyak kustomisasi!
Menambahkan subjek ke email itu:
Jika Anda ingin menambahkan subjek tertentu ke email itu, berhati-hatilah untuk menambahkan %20atau +di mana pun ada spasi di baris subjek. Cara mudah untuk memastikan bahwa itu diformat dengan benar adalah dengan menggunakan Decoder / Encoder URL .
Menambahkan teks isi:
Demikian pula, Anda dapat menambahkan pesan tertentu di bagian isi email: Sekali lagi, spasi harus diganti dengan %20atau +. Setelah parameter subjek, parameter tambahan apa pun harus didahului oleh&
Contoh: Katakanlah Anda ingin pengguna mengirim email ke teman mereka tentang kemajuan mereka di Free Code Camp:
Alamat : kosong
Subjek: Berita bagus
Tubuh: Saya menjadi pengembang
Tautan html Anda sekarang:
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>Di sini, kami membiarkan mailto kosong ( mailto:?). Ini akan membuka klien email pengguna dan pengguna akan menambahkan sendiri alamat penerima.
Menambahkan lebih banyak penerima:
Dengan cara yang sama, Anda dapat menambahkan parameter CC dan bcc. Pisahkan setiap alamat dengan koma!
Parameter tambahan harus didahului oleh &.
<a href="mailto:admin@ratingwebsite.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>
