HTML span: Tag Elemen

HTML elemen <span> adalah tag yang digunakan untuk mengelompokan elemen lainya pada web HTML, tetapi sebagai inline elemen. Outputnya tidak akan membuat baris baru atau menambahkan margin saat di buat, span berfungsi untuk mendefinisikan gaya tampil berbeda contoh seperti tulisan warna, jenis font custom, ukuran font yang berbeda.

1. html tag <span> teks berwarna
<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
</style>
</head>
<body>

<h2>Contoh HTML Elemen &lt;span&gt; teks berwarna</h2>

<p>Minuman apa yang kamu suka? <span style="color: coral; font-weight:bold;">JUS JERUK</span>
Apa warna dari buah Alpukat <span style="color: #437C17; font-weight:bold;">HIJAU</span>
</p>

</body>
</html>
Salin Kode . Lihat Hasil

2. html tag <span> dengan class style ccs
<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
  .sJusJeruk {color: coral; cursor:pointer; font-size:16px; font-weight:bold;}
  .sAlpukat {color: #437C17; cursor:pointer; font-size:16px; font-weight:bold;}
</style>
</head>
<body>

<h2>Contoh HTML Elemen &lt;span&gt; dengan class style css</h2>

<p>Minuman apa yang kamu suka? <span class="sJusJeruk">JUS JERUK</span>
Apa warna dari buah Alpukat <span class="sAlpukat">HIJAU</span>
</p>

</body>
</html>
Salin Kode . Lihat Hasil

3. html tag <span> hover: dengan class style css
<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
  .sJusJeruk {color: coral; cursor:pointer; font-size:16px; font-weight:bold;}
   .sJusJeruk:hover {border-radius:2px; box-shadow:0 0 4px #000; padding:6px;}
  .sAlpukat {color: #437C17; cursor:pointer; font-size:16px; font-weight:bold;}
   .sAlpukat:hover {border-radius:15px; box-shadow:0 0 4px #000; padding:6px;}
</style>
</head>
<body>

<h2>Contoh HTML Elemen &lt;span&gt; hover: dengan class style css</h2>
<p>Arahkan kursor anda ke tulisan berwarana Oren dan Hijau coba lihat apa yang terjadi.<p>
<p>Minuman apa yang kamu suka? <span class="sJusJeruk">JUS JERUK</span>
Apa warna dari buah Alpukat <span class="sAlpukat">HIJAU</span>
</p>

</body>
</html>
Salin Kode . Lihat Hasil

4. html tag <span> tipe teks style css
<!DOCTYPE html>
<html>
<head>
<style>
  body {color:#454545; font-family:monospace;}
  p {font-size:16px;}
  .span1 {color:#1B8A6B; font-weight:bold;}
  .span2 {font-weight:bold; text-decoration:underline;}
  .span3 {font-style:italic;}
  .span4 {color:#6698FF;font-family:serif; font-weight:bold;}
  .hover1 {color:coral;cursor:pointer;font-style:italic;}
  .hover1:hover {font-size:20px; font-weight:bold; padding:8px;}
</style>
</head>
<body>

<h2>Contoh HTML Elemen &lt;span&gt; teks style css</h2>

<p>teks dengan warna <span class="span1">ELF GREEN</span>, tulisan ditandai dengan <span class="span2">garis bawah Adalah Ini?</span> apakah &gt; <span class="span3">"ini adalah tulisan gaya miring"</span> Benar! - coba lihat <span class="span4">(Saya Menggunakan Font Serif, Tebal Dengan Warna Blue Sky)</span>
<br>
<span class="hover1">"coba perhatikan kalau saya di fokus maka akan membesar"</span>
</p>

</body>
</html>
Salin Kode . Lihat Hasil

Link 1


Link 2


Link 3


Link 4


...


Komentar

Posting Komentar