By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
Rating Website | Jasa Pembuatan Website | Jasa SEORating Website | Jasa Pembuatan Website | Jasa SEORating Website | Jasa Pembuatan Website | Jasa SEO
  • Home
  • Belajar SEO
  • SEO
    SEO
    Situs anda tidak mampu bersaing dengan kompetitor? belajar tentang apa itu SEO, bagaimana praktik menjalankan SEO yang benar dalam kumpulan artikel kami
    Show More
    Top News
    Cara Optimasi Website WordPress Untuk Menghindari Penalti SEO
    Cara Optimasi Website WordPress Dengan 9 Cara Mudah
    April 19, 2022
    Mudahnya Memulai Bisnis Online Bersama Rumahweb
    Mudahnya Memulai Bisnis Online Bersama Rumahweb
    Mei 28, 2022
    seo on page adalah
    SEO On Page Adalah Cara Mudah Untuk Masuk Google Page 1
    Agustus 11, 2022
    Latest News
    Google Bisnisku Ditangguhkan, Apa Yang Harus Dilakukan?
    November 12, 2022
    Blog Competition RumahWeb 2022, Tips Dan Trik Meraih Juara 1
    Juni 10, 2022
    Asal Usul Internet, Perkembangan Dan Cara Kerja Internet
    Mei 28, 2022
    Cara Meningkatkan Brand Awareness: Panduan Lengkap & Strategi
    Mei 14, 2022
  • Techno
    Techno
    Perkembangan teknologi yang semakin pesat tak luput dari sorotan kami, informasi techno dikemas dalam kumpulan artikel yang membahas tips dan trik dalam dunia teknologi
    Show More
    Top News
    laptop terbaik untuk bisnis online
    Laptop Terbaik Untuk Bisnis Online Anda di Tahun 2022
    Mei 24, 2022
    Keamanan Transaksi Produk Dan Layanan Kesehatan di SehatQ
    Keamanan Transaksi Produk Dan Layanan Kesehatan di SehatQ
    April 27, 2022
    Cara Menggunakan Microsoft Excel
    Cara Menggunakan Microsoft Excel Dengan 11 Rumus Rahasia
    Maret 20, 2022
    Latest News
    Apa Perbedaan SSD dan HDD? Ini Yang Perlu Anda Tahu
    Mei 24, 2022
    Rekomendasi Laptop Bisnis Terbaik 2021 ASUS ExpertBook B Series
    Mei 30, 2022
    Cara Memilih Laptop Terbaik Untuk Desain Grafis
    Mei 24, 2022
    Kit Microsoft Adaptive Mouse Hands-On: Dirancang Secara Inklusif
    Mei 20, 2022
  • Tips & Trik
    Tips & Trik
    Teknologi memberikan dampak signifikan bagi kehidupan manusia, tips dan trik mengulas dunia teknologi dikemas dalam kumpulan artikel yang informatif hanya untuk anda..
    Show More
    Top News
    aplikasi dan situs penghasil uang per hari
    12 Situs Penghasil Uang Per Hari Yang Perlu Anda Coba
    Oktober 20, 2022
    Download Video Dari Youtube Tanpa IDM
    Download Video Dari Youtube Tanpa IDM Dengan 4 Situs Ini Gratis
    Maret 20, 2022
    Cara Mengatasi Windows Cannot Access The Specified Device Path or File
    Cara Mengatasi Windows Cannot Access The Specified Device Path or File
    Maret 20, 2022
    Latest News
    Google Bisnisku Ditangguhkan, Apa Yang Harus Dilakukan?
    November 12, 2022
    Apa Itu Pengusaha? dan Bagaimana Cara Menjadi Pengusaha?
    November 12, 2022
    Pengertian Kewirausahaan, Definisi dan Contoh Pengusaha Sukses
    November 12, 2022
    Apa itu Segmentasi Pasar? Panduan Lengkap dan Contoh
    Juni 3, 2022
  • Reviews
    Reviews
    Reviews perkembangan teknologi masa kini mulai dari gadget, reviews aplikasi, reviews produk, reviews tema dan plugin dll, dikemas dalam artikel informatif untuk anda
    Show More
    Top News
    laptop terbaik untuk bisnis online
    Laptop Terbaik Untuk Bisnis Online Anda di Tahun 2022
    Mei 24, 2022
    Laptop bisnis terbaik ASUS ExpertBook
    Laptop Bisnis Terbaik ASUS ExpertBook B9 Review
    Mei 30, 2022
    bengkel planet ban terdekat
    900+ Bengkel Planet Ban Terdekat di Kota Anda
    Juli 13, 2022
    Latest News
    Manfaat Menerapkan Software Akuntansi Kledo di Bisnis UMKM Anda
    November 2, 2022
    Software Akuntansi Kledo, Software Akuntansi Online Gratis Untuk UMKM
    November 2, 2022
    Blog Competition RumahWeb 2022, Tips Dan Trik Meraih Juara 1
    Juni 10, 2022
    Asal Usul Internet, Perkembangan Dan Cara Kerja Internet
    Mei 28, 2022
  • WordPress Theme
    WordPress Theme
    Situs yang ciamik, full fitur dan memiliki page speed yang maksimal tak lepas dari dukungan WordPress Theme yang SEO friendly, dapatkan informasi tentang reviews, tutorial…
    Show More
    Top News
    Astra WordPress Theme
    Astra WordPress Theme, Tema Terbaik Untuk Page Speed Maksimal
    April 6, 2022
    Tema WordPress Gratis Terbaik
    10 Tema WordPress Gratis Terbaik Download Gratis
    Juni 6, 2022
    tema wordpress avada
    Tema WordPress Avada V7.5 Reviews, Apakah Cocok Untuk Situs Anda?
    Maret 20, 2022
    Latest News
    10 Tema WordPress Gratis Terbaik Download Gratis
    Juni 6, 2022
    ThemeForest vs Elegant Themes Mana Yang Lebih Baik?
    Maret 19, 2022
    Enfold WordPress Theme Reviews, Tema Terlaris Di Tahun 2015
    Maret 20, 2022
    Tema WordPress Avada V7.5 Reviews, Apakah Cocok Untuk Situs Anda?
    Maret 20, 2022
  • More
    • WordPress Plugin
    • Games
    • Streaming
    • Online Shop
  • Bookmarks
Reading: Contoh HTML Terbaik dan Contoh Coding HTML Website
Share
Notification Show More
Aa
Rating Website | Jasa Pembuatan Website | Jasa SEORating Website | Jasa Pembuatan Website | Jasa SEO
Aa
  • Belajar SEO
  • Artikel SEO
  • Techno
  • Review
  • Tips Dan Trik
  • WordPress Theme
  • WordPress Plugin
  • Games
  • Streaming
  • Online Shop
  • Bookmarks
  • Home
    • SEO Untuk Pemula
    • My Bookmarks
  • Reading Post
    • Tips Dan Trik
    • Techno
    • Artikel SEO
    • Theme Dan Plugin
    • WordPress Theme
    • WordPress Plugin
    • Games
    • Reviews
    • Online Shop
  • About Us
    • Contact Us
    • Privacy Policy
    • Disclaimer
    • Cookies Policy
Follow US
@2021 - Rating Website All Right Reserved. SEO by otonet.co.id
Rating Website | Jasa Pembuatan Website | Jasa SEO > Techno > Contoh HTML Terbaik dan Contoh Coding HTML Website
Techno

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.

Torque
Last updated: 2022/05/08 at 10:07 AM
By Torque Mei 8, 2022
Share
Contoh HTML Terbaik dan Contoh Coding HTML Website
SHARE

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.

Contents
Contoh HTML Terbaik dan Contoh Coding HTML Website Contoh HTML Terbaik dan Contoh Coding HTML WebsiteContoh Atribut A HRAnchor Text Dalam HalamanLink Gambar (Contoh HTML Terbaik dan Contoh Coding HTML Website)Contoh Target AContoh Atribut Latar Belakang Body (Contoh HTML Terbaik dan Contoh Coding HTML Website)Atribut body-background disusutkanContoh Atribut Body Bgcolor (Contoh HTML Terbaik dan Contoh Coding HTML Website)Contoh Atribut Div AlignPenting!Contoh Atribut Warna FontPenting:Catatan:Contoh:Contoh Atribut Ukuran FontContoh Atribut Img AlignAtribut Lebar ImgContoh Atribut Img SrcRingkasanApa itu Entitas HTML?Untuk apa mereka digunakan?Bagaimana cara anda menggunakannya?Panduan ReferensiContoh Formulir HTMLContoh Audio HTML5ExampleContoh Elemen Semantik HTML5Sejarah SingkatDaftar elemen semantik baruManfaat elemen semantik<section>dan<article><header>dan<hgroup><aside><footer><small><time><figure>dan<figcaption>Example Video HTML5Putar OtomatisPosterKontrolPenyimpanan Web HTML5Jenis Penyimpanan WebSample Tautan MailtoSintaks dasar dengan penerima adalah:Lebih banyak kustomisasi!Menambahkan subjek ke email itu:Menambahkan teks isi:Menambahkan lebih banyak penerima:Terima kasih telah menggunakan referensi Contoh HTML Terbaik dan Contoh Coding HTML Website. Selamat mengkoding!

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.

Contoh HTML Terbaik dan Contoh Coding HTML Website
Contoh HTML Terbaik dan Contoh Coding HTML Website

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>
anchor
Contoh HTML Terbaik dan Contoh Coding HTML Website

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)

Contoh HTML Terbaik dan Contoh Coding HTML Website
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 karena rgb()hanya untuk CSS, artinya tidak akan berfungsi di HTML.

Contoh Atribut Div Align

Contoh HTML Terbaik dan Contoh Coding HTML Website
Contoh HTML Terbaik dan Contoh Coding HTML Website

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

ukuran font
Contoh HTML Terbaik dan Contoh Coding HTML Website

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.jpegdalam, selama folder ‘gambar’ berada di lokasi yang sama dengan index.htmlfile.

../files/index.html

..files/images/ratingwebsite.jpeg

Ringkasan

coding
Contoh HTML Terbaik dan Contoh Coding HTML Website

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 (<) -->
&lt;

Atau

<!-- &#[entity_number]; -->
<!-- example for a less-than sign (<) -->
&#60;

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
&#32;	Space
!		&#33;	Exclamation mark
”		&#34;	Quotation mark
#		&#35;	Number sign
$		&#36;	Dollar sign
¢	&cent;	&#162;	Cent sign
€	&euro;	&#8364;	Euro sign
£	&pound;	&#163;	GBP sign
¥	&yen;	&#165;	Yen sign
%		&#37;	Percent sign
&	&amp;	&#38;	Ampersand
’		&#39;	Apostrophe
(		&#40;	Opening/Left Parenthesis
)		&#41;	Closing/Right Parenthesis
*		&#42;	Asterisk
+		&#43;	Plus sign
,		&#44;	Comma
-		&#45;	Hyphen
.		&#46;	Period
/		&#47;	Slash
©	&copy;	&#169;	Copyright
®	&reg;	&#174;	Registered Trademark
”	&quot;	&#34;	double quotation mark
>	&gt;	&#62;	Greater-than sign
<	&lt;	&#60;	Less-than sign
•	&bull;	&#8226	Bullet point

Contoh 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:

  • text
  • email
  • password
  • checkbox
  • radio
  • submit
  • range
  • search
  • date
  • time
  • week
  • color
  • datalist

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

Contoh HTML Terbaik dan Contoh Coding HTML Website
Contoh HTML Terbaik dan Contoh Coding HTML Website

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

Elemen semantik meletakkan halaman oleh w3schools
Contoh HTML Terbaik dan Contoh Coding HTML Website

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:

  1. Sebuah artikel dimaksudkan untuk didistribusikan secara independen atau dapat digunakan kembali.
  2. 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>&copy;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>&copy;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

Contoh code audio
Contoh HTML Terbaik dan Contoh Coding HTML Website

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

Contoh HTML Terbaik dan Contoh Coding HTML Website
Contoh HTML Terbaik dan Contoh Coding HTML Website

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>

Terima kasih telah menggunakan referensi Contoh HTML Terbaik dan Contoh Coding HTML Website. Selamat mengkoding!

TAGGED: Contoh Web, Contoh Web HTML, Rating Website, Techno
Torque Mei 8, 2022 Mei 8, 2022
Share This Article
Facebook Twitter Whatsapp Whatsapp LinkedIn Print
By Torque
Follow:
SEO Seperti Permainan Yang Menantang Buat Gw, Rasanya Tidak Puas Jika 1 Kali Menaikan Konten Tapi Tidak Bisa Menduduki Page #1, Sedikit Berlapang Dada Sih Kalau Masih Ada di Page #2, Karena Terkadang Honda Beat Belum Tentu Bisa Nyalip Ninja 250ZX,>> (Buat Yang Ngerti Aja)
Leave a comment Leave a comment

NEWSLETTER

Sign up to get our latest news!

RECENT POST

google bisnisku ditangguhkan
Google Bisnisku Ditangguhkan, Apa Yang Harus Dilakukan?
SEO Tips Dan Trik
manfaat menerapkan software akuntansi
Manfaat Menerapkan Software Akuntansi Kledo di Bisnis UMKM Anda
Reviews
apa itu pengusaha? cara menjadi pengusaha
Apa Itu Pengusaha? dan Bagaimana Cara Menjadi Pengusaha?
Tips Dan Trik
Pengertian Kewirausahaan
Pengertian Kewirausahaan, Definisi dan Contoh Pengusaha Sukses
Tips Dan Trik
Jadi Pejuang Cuan Bersama Software Akuntansi Kledo
Software Akuntansi Kledo, Software Akuntansi Online Gratis Untuk UMKM
Reviews

NETWORK LINK

  • kabarbengkel.com
  • cucirobotdepok.com
  • mutiaracarcare.com
  • optimasibisnisku.com
  • nusantaracoffe.com
  • Otomotif
  • OtoNet Indonesia
  • atibening.com
  • newhoperehabbali.com
  • realautobenz.com
  • Theme WordPress Indonesia
  • Tutorial WordPress
  • Insantri
  • sanubaricontainer.com

ABOUT US

Logo Jasa Pembuatan Website Hitam

Rating Website Adalah Freelancer Jasa Pembuatan Website Company Profile, Website Organisasi, Website Toko Online, Website Berita Dan Jasa SEO, Backlink Drif Feed, Jasa PBN Profesional…

Fast Respons:   Pavicon Baru Rating Website  +62 812-1292-7351

We Are Open: 08:00 AM-17:00 PM

QUICK LINK

  • Tips Dan Trik
  • Techno
  • SEO
  • Reviews
  • WordPress Theme
  • WordPress Plugin
  • Games
  • Streaming

COMPANY

  • About Us
  • Contact Us
  • Web Desain
  • SEO Untuk Pemula
  • Privacy Policy
  • Disclaimer

NEWSLETTER

Sign up to get our latest news!

Find Us on Socials

@2021 - Rating Website All Right Reserved. SEO by otonet.co.id
  • Privacy Policy
  • Disclaimer
  • Cookies Policy
adbanner
AdBlock Detected
Our site is an advertising supported site. Please whitelist to support our site.
Okay, I'll Whitelist
RATING WEBSITELOGO BARU RATING WEBSITELOGO BARU
Welcome Back!

Sign in to your account

Register Lost your password?