Thursday, April 18, 2019

Program C# unity : Materi 1 - Method pada Unity



Di Unity ada beberapa Method utama yang sering digunakan dalam pembuatan game, berikut adalah method-method C# unity.

Void Awake

Void Awake adalah method yang akan dieksekusi terlebih dahulu sebelum Method Void Start()

contoh :
void Awake(){
anim = GetComponent<Animator>();
player = GameObject.Find("Player");
partikel = enemy.GetComponent<ParticleSystem>();
darahUtama = GetComponent<DarahUtama>();
}

Void Start

Void Start() hanya akan melakukan eksekusi listing program satu kali dan di awal saat program dijalankan. 

contoh :

void Start(){
umur = 20;
darahPemain = DarahUtama;
Phi = 3.14159265;
}

Void Update

Void Update() akan melakukan eksekusi program per frame artinya akan terus melakukan eksekusi listing program selama program berjalan. Void Update() digunakan untuk melakukan eksekusi perintah yang selalu berubah sesuai kondisi.

contoh :
void Update(){
time += Time.DeltaTime;
Debug.Log("void update");
if(darah <= 0) { Die();}
}

Void FixedUpdate

Memiliki fungsi yang sama dengan void Update(), perbedaannya void Update() lebih fokus ke perubahan grafis game dan void FixedUpdate() lebih fokus ke perubahan fisik pada objek.

contoh : 
void FixedUpdate(){
rigidbody.AddForce(Vector3.up);
}

Void LateUpdate

LateUpdate akan terlambat dieksekusi ketika program dijalankan, contoh yang paling sering digunakan adalah ketika camera mengikuti gerakan pemain.

contoh : 
void LateUpdate(){
Vector3 targetCamPos = target.position + offset;
transform.position = Vector3.Lerp (transform.position, targetCamPos, smoothing * Time.deltaTime);
}

Void OnGUI

OnGUI biasa digunakan pada Unity versi 4.5 kebawah, method ini digunakan untuk melakukan eksekusi perintah atau komponen GUI.

contoh :
void OnGUI(){
GUI.Button(new Rect(10,10,100,20), "Tombol");
}


Reviewer: FajarYusuf.Com
ItemReviewed: Program C# unity : Materi 1 - Method pada Unity

HTML Tables

HTML Tables

Contoh Tabel  HTML :
CompanyContactCountry
FajarYusuf.ComFajar M. YusufIndonesia
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Mendefinisikan Table HTML

Tabel HTML didefinisikan dengan tag <table> .

Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah header tabel didefinisikan dengan tag <th>. Secara default, judul tabel akan tebal dan posisi ditengah. Sebuah data / sel tabel didefinisikan dengan tag <td>.

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Kamu bisa mencoba disini, Hasil :
Mendefinisikan Table HTML
klik gambar untuk memperbesar

Catatan: <td> adalah elemen untuk wadah data tabel.
Mereka dapat berisi segala macam elemen HTML, termasuk teks, gambar, daftar, tabel lain, dll


HTML Table - Menambahkan Border atau Garis Tepi

Jika kamu tidak menentukan border untuk sebuah table, maka table akan ditampilkan tanpa border.

Sebuah border diatur dengan menggunakan CSS border properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Gunakan properti border CSS untuk menambahkan border ke tabel.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Border atau Garis Tepi
klik gambar untuk memperbesar


Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.

HTML Table - Borders Runtuh Satu Garis

Jika kamu ingin border runtuh ke dalam satu border, tambahkan CSS border-collapse properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>Jika kamu ingin border menjadi satu border satu garis solid, tambahkan properti CSS border-collapse.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Borders Runtuh Satu Garis
klik gambar untuk memperbesar

HTML Table - Menambahkan Sel Padding

Sel Padding menentukan ruang antara isi sel dan border.

Jika kamu tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan CSS padding properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Padding sel menentukan ruang antara konten sel dan batasnya.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Sel Padding
klik gambar untuk memperbesar


HTML Table - Judul Tabel Rata Kiri

Secara default, judul tabel akan menjadi tebal dan rata tengah.

Untuk membuat rata kiri untuk judul tabel, gunakan CSS text-align properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Judul Tabel Rata Kiri
klik gambar untuk memperbesar


HTML Table - Menambahkan Spasi Border

Spasi perbatasan menentukan ruang antara sel-sel.

Untuk mengatur jarak perbatasan untuk tabel, gunakan CSS border-spacing properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies menentukan ruang antara sel.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Spasi Border
klik gambar untuk memperbesar

Catatan: Jika tabel telah menggunakan border-collapse, border-spacing tidak akan berpengaruh.

HTML Table - Sel Span Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan colspan atribut:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Sel yang menggabungkan dua kolom </h2>
<p>Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan. </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Good</td>
    <td>55577884</td>
    <td>55577885</td>
  </tr>
</table>

</body>
</html>
Hasil :
 HTML Table - Sel Span Banyak Kolom
klik gambar untuk memperbesar

HTML Table - Sel Span Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan rowspan atribut:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan.</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Good</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577884</td>
  </tr>
  <tr>
    <td>55577885</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Sel Span Banyak Baris
klik gambar untuk memperbesar

HTML Table - Menambahkan Caption

Untuk menambahkan keterangan pada tabel, gunakan tag <caption>:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>

<h2>Table Caption</h2>
<p>Untuk menambahkan judul ke tabel, gunakan tag caption.</p>

<table style="width:100%">
  <caption>Saldo Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td>January</td>
    <td>Rp.100.000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>Rp.500.000</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Caption
klik gambar untuk memperbesar

Catatan: Tag <caption> harus dimasukkan segera setelah tag <table>.

Sebuah Gaya Khusus untuk Table

Untuk menentukan gaya khusus untuk tabel khusus, menambahkan id atribut ke table :

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
Sebuah Gaya Khusus untuk Table
klik gambar untuk memperbesar


Ringkasan

Gunakan HTML elemen <table> untuk mendefinisikan tabel
Gunakan HTML elemen <tr> untuk menentukan baris tabel
Gunakan HTML elemen <td> untuk mendefinisikan tabel data
Gunakan HTML elemen <th> untuk menentukan meja pos
Gunakan HTML elemen <caption> untuk mendefinisikan judul tabel
Gunakan CSS border properti untuk menentukan garis tepi
Gunakan CSS border-collapse properti untuk runtuh garis tepi
Gunakan CSS padding properti untuk menambahkan padding untuk sel
Gunakan CSS text-align properti untuk menyelaraskan teks sel
Gunakan CSS border-spacing properti untuk mengatur jarak antara sel-sel
Gunakan colspan atribut untuk membuat rentang sel banyak kolom
Gunakan rowspan atribut untuk membuat rentang sel banyak baris
Gunakan id atribut untuk mendefinisikan unik satu tabel

Reviewer: FajarYusuf.Com
ItemReviewed: HTML Tables

Monday, April 15, 2019

Tutorial HTML Links

Tutorial HTML Links

Link ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk dapat mengklik jalan mereka dari satu halaman ke halaman yang lain, atau dari satu situs ke situs yang lain.

Link HTML - Hyperlink

link pada HTML adalah hyperlink.

Kamu dapat mengklik link dan melompat ke halaman dokumen yang lain.

Bila kamu memindahkan mouse di atas link, panah mouse akan berubah menjadi tangan kecil.
Catatan: Sebuah link pada HTML tidak harus hanya berupa teks. Link pada HTML dapat berupa gambar atau elemen lain yang ada pada HTML.

Link HTML - Sintaks

Dalam HTML, link yang dapat didefinisikan dengan tag  <a> :
<a href="url">link text</a>
Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p><a href="https://www.fajaryusuf.com/">Kunjungi website pemrograman Indonesia</a></p>

</body>
</html>
Kamu bisa mencobanya disini, Hasil :
Link HTML - Sintaks
klik gambar untuk memperbesar
href atribut menentukan alamat tujuan link ( https://www.fajaryusuf.com/ ).

Link teks adalah bagian yang terlihat tampil di browser (Kunjungi website pemrograman Indonesia).

Melakukan klik pada link teks akan mengirim kamu ke alamat yang ditentukan.

Catatan: Tanpa garis miring pada akhir alamat subfolder pada situs, kamu mungkin akan menghasilkan dua permintaan ke server. Banyak server secara otomatis akan menambahkan garis miring ke akhir alamat, dan kemudian membuat permintaan baru.

Link lokal

Contoh di atas sebelumnya menggunakan URL absolut (alamat web penuh).

Sebuah link lokal (link ke situs web yang sama) ditentukan dengan URL relatif tanpa halaman index (tanpa https: // www ....).

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Local Links</h2>

<p><a href="/fajaryusufhtmleditor.html">Fajaryusuf HTML editor</a> adalah tautan ke halaman di situs web ini(local links).</p>

<p><a href="https://www.w3.org/">W3C</a> adalah tautan ke situs web di World Wide Web(eksternal links).</p>

</body>
</html>
Hasil :
Link lokal HTML
klik gambar untuk memperbesar

HTML Warna Link

Secara default, link akan muncul seperti ini (di semua browser) :

  • Link yang belum dikunjungi adalah teks yang digaris bawahi dan berwarna biru
  • Sebuah link yang pernah dikunjungi adalah teks yang digaris bawahi dan berwarna ungu
  • Link aktif adalah teks yang digaris bawahi dan berwarna merah

Kamu dapat mengubah warna default, dengan menggunakan CSS:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>Kamu bisa mengganti warna link default dengan CSS</p>

<a href="/fajaryusufhtmleditor.html/" target="_blank">FAJARYUSUF.COM HTML Editor</a> 

</body>
</html>
Hasil :
HTML Warna Link
klik gambar untuk memperbesar


Link yang sering bergaya sebagai tombol, dengan menggunakan CSS:
Ini adalah link

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>Sebuah link dengan gaya tombol</p>
<a href="https://www.fajaryusuf.com" target="_blank">ini link</a>

</body>
</html>
Hasil :
HTML Warna Link button
klik gambar untuk memperbesar


Untuk mempelajari lebih lanjut tentang CSS, silakan lihat tutorial CSS fajaryusuf.com.

Link HTML - Target Atribut

Target atribut dapat menentukan di mana letak untuk membuka dokumen terkait.

Target atribut dapat memiliki salah satu dari nilai berikut :

  • _blank - Membuka dokumen terkait di jendela baru atau tab
  • _self - Membuka dokumen terkait dalam window yang sama / tab seperti yang diklik (ini adalah pengaturan default)
  • _parent - Membuka dokumen terkait dalam kerangka induk
  • _top - Membuka dokumen terkait dalam tubuh penuh window
  • framename - Membuka dokumen terkait dalam bingkai bernama

Contoh ini akan membuka dokumen terkait dalam jendela browser / tab baru:

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.fajaryusuf.com/" target="_blank">Visit Website belajar pemrograman FajarYusuf.Com</a> 

<p>Jika Anda menetapkan atribut target ke "_blank", tautan akan terbuka di jendela atau tab browser baru.</p>

</body>
</html>
Hasil :
Link HTML - Target Atribut
klik gambar untuk memperbesar


Tip: Jika halaman Web Anda terkunci dalam bingkai, Anda dapat menggunakan target="_top"untuk keluar dari frame:

Contoh :

<!DOCTYPE html>
<html>
<body>

<p>terkunci oleh frame? <a href="https://www.fajaryusuf.com/html/" target="_top">Klik ini!</a></p>

</body>
</html>
Hasil :
Link HTML - Target Atribut
klik gambar untuk memperbesar


HTML Link - Gambar sebagai Link

Hal ini umum untuk menggunakan gambar sebagai link :

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Image Links</h2>

<p>Gambar adalah tautan. Anda bisa mengkliknya.</p>

<a href="http://fajaryusuf.com">
  <img src="https://1.bp.blogspot.com/-eNaxnaKmLsc/XFLJWZv3brI/AAAAAAAABa4/LduM-HUJAZYc1otZ162Y9rY1z3FymHH1wCK4BGAYYCw/s231/colorpicker.webp" alt="HTML tutorial" style="width:60px;height:50px;border:0">
</a>

<p>Saya telah menambahkan "border: 0" untuk mencegah IE9 (dan sebelumnya) menampilkan perbatasan di sekitar gambar.</p>

</body>
</html>
Hasil :
HTML Link - Gambar sebagai Link
klik gambar untuk memperbesar

Catatan: border:0; ditambahkan untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar (ketika gambar adalah link).

Link Judul

Title Atribut menentukan informasi tambahan tentang elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas sebuah elemen.

Contoh :
<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>Tittle Atribut menentukan informasi tambahan tentang suatu elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas elemen.</p>
<a href="https://www.fajaryusuf.com/" title="Judul ini akan muncul ketika mouse berada diatas elemen link">Kunjungi web belajar pemrograman FajarYusuf.Com</a>

</body>
</html>
Hasil :
Link Judul
klik gambar untuk memperbesar

Link HTML - Membuat Bookmark

bookmark HTML digunakan untuk memungkinkan pembaca untuk melompat ke bagian tertentu dari halaman Web.

Bookmark dapat berguna jika halaman Web kamu sangat panjang.

Untuk membuat link bookmark, kamu harus terlebih dahulu membuat bookmark, dan kemudian menambahkan link untuk itu.

Ketika link diklik, halaman akan gulir ke lokasi dengan penunjuk tersebut.

Contoh
Pertama, buat bookmark dengan idatribut:
<h2 id="C4">Bab 4</h2>
Kemudian, menambahkan link ke bookmark ( "Langsung ke Bab 4"), dari dalam halaman yang sama:
<a href="#C4">Langsung ke Bab 4</a>
Atau, menambahkan link ke bookmark ( "Langsung ke Bab 4"), dari halaman lain:

Contoh :
<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Langsung ke Bab 4 </a> </p>

<h2> Bab 1 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 2 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 3 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2 id = "C4"> Bab 4 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 5 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 6 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 7 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 8 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 9 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 10 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 11 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 12 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 13 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 14 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 15 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 16 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 17 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 18 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 19 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 20 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 21 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 22 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

<h2> Bab 23 </h2>
<p> Bab ini menjelaskan ba bla bla </p>

</body>
</html>
Hasil :
Link HTML - Membuat Bookmark
klik gambar untuk memperbesar

Link eksternal

halaman eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.

Contoh ini menggunakan URL lengkap untuk link ke halaman web:

Contoh :
<a href="https://www.fajaryusuf.com/">Pemrograman tutorial</a>

Contoh ini link ke halaman yang terletak di folder html di situs web saat ini:

Contoh :
<a href="/p/html-editor-fajaryusufcom.html">HTML Editor FajarYusuf.Com</a>



Ringkasan

  • Gunakan elemen <a> untuk mendefinisikan link
  • Gunakan href atribut untuk menentukan alamat link
  • Gunakan target atribut untuk menentukan di mana untuk membuka dokumen terkait
  • Gunakan <img> elemen (dalam <a>) untuk menggunakan gambar sebagai link
  • Gunakan id atribut (id = " value ") untuk menentukan bookmark di halaman
  • Gunakan href atribut (href = "#value ") untuk menghubungkan ke bookmark

Reviewer: FajarYusuf.Com
ItemReviewed: Tutorial HTML Links

Friday, April 12, 2019

HTML Styles - CSS

HTML Styles - CSS

Styling HTML dengan CSS

CSS singkatan C ascading S tyle S heets.

CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media lainnya .

CSS menghemat banyak pekerjaan dan juga dapat mengontrol tata letak beberapa  halaman web sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
Inline - dengan menggunakan atribut style dalam elemen HTML
Internal - dengan menggunakan <style> elemen di bagian <head>bagian
Eksternal - dengan menggunakan file CSS eksternal
Cara yang paling umum digunakan untuk menambahkan CSS, adalah menggunakan data file CSS yang terpisah. Namun, di sini kita akan menggunakan inline dan styling internal, karena ini lebih mudah untuk menunjukkan penggunaan CSS, dan lebih mudah bagi kamu untuk mencobanya sendiri.
Tip: kamu dapat mempelajari lebih banyak tentang CSS di Materi CSS .

CSS Inline 

CSS inline digunakan untuk menerapkan gaya yang unik untuk elemen HTML tunggal.

CSS inline menggunakan atribut gaya elemen HTML.

Contoh ini menetapkan warna teks dengan <h1> dengan elemen biru:

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Ini adalah Judul Berwarna Biru</h1>

</body>
</html>
Kalian bisa mencobanya disini, Hasil :
CSS Inline
klik gambar untuk memperbesar

CSS internal

CSS internal digunakan untuk menentukan style untuk sebuah halaman HTML.

CSS internal didefinisikan dalam bagian <head> dari halaman HTML, dengan <style> elemen:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Hasil :
CSS internal
klik gambar untuk memperbesar

CSS eksternal

Sebuah style sheet eksternal digunakan untuk mendefinisikan style untuk banyak halaman HTML.

Dengan style sheet eksternal, kamu dapat mengubah tampilan situs web secara keseluruhan, dengan hanya mengubah satu file!

Untuk menggunakan style sheet eksternal, dengan cara menambahkan link ke dalam <head> pada bagian dari halaman HTML:

Contoh :
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Ini tajuk</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>
Style sheet eksternal dapat ditulis dalam editor teks apapun. file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.

Berikut adalah code "styles.css" yang ada untuk contoh diatas:
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Hasil :
HTML Styles - CSS
klik gambar untuk memperbesar


CSS Fonts

CSS colorproperti digunakan untuk mendefinisikan warna teks yang akan digunakan.

CSS font-familyproperti digunakan untuk mendefinisikan font yang akan digunakan.

CSS font-size properti digunakan untuk mendefinisikan ukuran teks yang akan digunakan.

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Ini adalah Tajuk</h1>
<p>Ini adalah paragraf.</p>

</body>
</html>
Hasil :
CSS Fonts
klik gambar untuk memperbesar

CSS Border

CSS borderproperti digunakan untuk mendefinisikan perbatasan sekitar elemen HTML:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Border
klik gambar untuk memperbesar

CSS Padding

CSS paddingproperti digunakan untuk mendefinisikan padding (spasi) antara teks dan perbatasan:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Padding
klik gambar untuk memperbesar

CSS Margin

CSS marginproperti digunakan untuk mendefinisikan margin (ruang) di luar perbatasan:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 1px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>Ini Tajuk</h1>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p>Ini Paragraf</p>

</body>
</html>
Hasil :
CSS Margin
klik gambar untuk memperbesar

Id Atribut

Digunakan untuk menentukan gaya tertentu untuk satu elemen khusus, menambahkan idatribut elemen seperti berikut :
<p id="p01">Saya berbeda</p>
kemudian menentukan gaya untuk elemen dengan id tertentu:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
  color: blue;
}
</style>
</head>
<body>

<p>Ini Paragraf</p>
<p>Ini Paragraf</p>
<p id="p01">Ini Paragraf style berbeda dengan id p01</p>

</body>
</html>
Hasil :
Id Atribut
klik gambar untuk memperbesar

Catatan: Id dari elemen harus unik dalam suatu halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!

Kelas Atribut

Digunakan untuk menentukan gaya untuk jenis khusus dari elemen, menambahkan classatribut untuk elemen:
<p class="error">Saya berbeda</p>
kemudian menentukan gaya untuk elemen dengan kelas khusus:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
  color: red;
}
</style>
</head>
<body>

<p>Ini Paragraf.</p>
<p>Ini Paragraf.</p>
<p class="error">Ini Paragraf style berbeda dengan class error.</p>
<p>Ini Paragraf.</p>
<p class="error">Ini Paragraf style berbeda dengan class error juga.</p>

</body>
</html>
Hasil :
Kelas Atribut
klik gambar untuk memperbesar

Referensi eksternal

style sheet eksternal dapat dirujuk dengan URL penuh atau dengan path relatif ke halaman web saat ini.

Contoh yang menggunakan URL lengkap untuk link ke sebuah style sheet:

Contoh :
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Contoh yang menggunakan link ke style sheet yang terletak di folder html di situs web saat ini:

Contoh :
<link rel="stylesheet" href="/html/styles.css">

Contoh ini link ke style sheet yang terletak di folder yang sama dengan halaman saat:

Contoh :
<link rel="stylesheet" href="styles.css">

Ringkasan


  • Gunakan HTML styleatribut untuk styling inline
  • Gunakan HTML <style>elemen untuk mendefinisikan CSS internal yang
  • Gunakan HTML <link>elemen untuk merujuk ke file CSS eksternal
  • Gunakan HTML <head>elemen untuk menyimpan <style> dan <link> elemen
  • Gunakan CSS colorproperti untuk warna teks
  • Gunakan CSS font-familyproperti untuk font teks
  • Gunakan CSS font-sizeproperti untuk ukuran teks
  • Gunakan CSS borderproperti untuk perbatasan
  • Gunakan CSS paddingproperti untuk ruang di dalam perbatasan
  • Gunakan CSS marginproperti untuk ruang luar perbatasan

Reviewer: FajarYusuf.Com
ItemReviewed: HTML Styles - CSS

Wednesday, April 10, 2019

HTML Color atau Warna pada HTML

HTML Color atau Warna pada HTML

Warna pada HTML ditentukan menggunakan nama warna yang telah ditetapkan, atau nilai-nilai pada RGB, HEX, HSL, RGBA, HSLA.

Memberi Warna HTML dengan Nama Warna

Dalam HTML, warna dapat ditentukan dengan menggunakan nama dari warna.

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>
Kamu bisa mencobanya klik disini, Hasil :
Memberi Warna HTML dengan Nama Warna
klik gambar untuk memperbesar

HTML mendukung 140 nama warna standar .

Warna Latar Belakang atau Background pada HTML

Kamu dapat mengatur warna latar belakang untuk setiap elemen pada HTML seperti berikut:
                  FajarYusuf.Com                

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color: DodgerBlue;">FajarYusuf.Com </h1>

<p style="background-color:Tomato;">
fajarYusuf.com dioptimalkan untuk pembelajaran, pengujian, dan pelatihan. Contoh mungkin disederhanakan untuk meningkatkan kemampuan membaca dan pemahaman dasar. Tutorial, referensi, dan contoh selalu ditinjau untuk menghindari kesalahan, tetapi kami tidak dapat menjamin kebenaran penuh dari semua konten. Saat menggunakan situs ini, Anda setuju untuk membaca dan menerima ketentuan penggunaan, cookie, dan kebijakan privasi kami.
</p>

</body>
</html>
Hasil :
HTML Color atau Warna pada HTML
klik gambar untuk memperbesar

Warna teks pada HTML

Kamu dapat mengatur warna teks:

FajarYusuf.Com

fajarYusuf.com dioptimalkan untuk pembelajaran, pengujian, dan pelatihan. Contoh mungkin disederhanakan untuk meningkatkan kemampuan membaca dan pemahaman dasar. 

Tutorial, referensi, dan contoh selalu ditinjau untuk menghindari kesalahan, tetapi kami tidak dapat menjamin kebenaran penuh dari semua konten. Saat menggunakan situs ini, Anda setuju untuk membaca dan menerima ketentuan penggunaan, cookie, dan kebijakan privasi kami.

Contoh :
<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">FajarYusuf.Com</h3>

<p style="color:DodgerBlue;">fajarYusuf.com dioptimalkan untuk pembelajaran, pengujian, dan pelatihan. Contoh mungkin disederhanakan untuk meningkatkan kemampuan membaca dan pemahaman dasar. </p>

<p style="color:MediumSeaGreen;">Tutorial, referensi, dan contoh selalu ditinjau untuk menghindari kesalahan, tetapi kami tidak dapat menjamin kebenaran penuh dari semua konten. Saat menggunakan situs ini, Anda setuju untuk membaca dan menerima ketentuan penggunaan, cookie, dan kebijakan privasi kami.</p>

</body>
</html>
Hasil :
Warna teks pada HTML
klik gambar untuk memperbesar

Warna Border pada HTML

Kamu dapat mengatur warna pada border seperti ini :

FajarYusuf.Com

FajarYusuf.Com

FajarYusuf.Com

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">FajarYusuf.Com</h1>

<h1 style="border: 2px solid DodgerBlue;">FajarYusuf.Com</h1>

<h1 style="border: 2px solid Violet;">FajarYusuf.Com</h1>

</body>
</html>
Hasil :
Warna Border pada HTML
klik gambar untuk memperbesar

Nilai Warna pada HTML

Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai RGB, nilai-nilai HEX, nilai-nilai HSL, nilai-nilai RGBA, dan nilai-nilai HSLA:

Sama seperti nama warna "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Sama seperti nama warna "Tomato", tetapi 50% transparan:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

</body>
</html>
Hasil :
Nilai Warna pada HTML
klik gambar untuk memperbesar


Nilai RGB pada HTML

Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb(red, green, blue)
Setiap parameter (red, green, blue) mendefinisikan intensitas warna antara 0 dan 255.

Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur untuk nilai tertinggi (255) dan yang lainnya diatur ke 0.

Untuk menampilkan warna hitam, semua parameter warna harus diatur ke 0, seperti ini: rgb (0, 0, 0).

Untuk menampilkan warna putih, semua parameter warna harus diatur ke 255, seperti ini: rgb (255, 255, 255).

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

<p>Dalam HTML, Anda dapat menentukan warna menggunakan nilai RGB.</p>

</body>
</html>
Hasil :
Nilai RGB pada HTML
klik gambar untuk memperbesar

Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk semua sumber cahaya 3:

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, kamu akan mendapatkan nuansa abu-abu yang berbeda.</p>

</body>
</html>
Hasil :
Nilai RGB pada HTML
klik gambar untuk memperbesar

Nilai HEX pada HTML

Dalam HTML, warna juga dapat ditentukan dengan menggunakan nilai heksadesimal dalam bentuk:
#rrggbb
Mana rr (merah), gg (hijau) dan bb (biru) adalah nilai-nilai heksadesimal antara 00 dan ff (sama seperti desimal 0-255).

Misalnya, #ff0000 ditampilkan sebagai merah, karena merah diatur untuk nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

<p>Dalam HTML, kamu dapat menentukan warna menggunakan nilai Hex.</p>

</body>
</html>
Hasil :
Nilai HEX pada HTML
klik gambar untuk memperbesar


Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk semua sumber :

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>

<p>Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, Anda akan mendapatkan nuansa abu-abu yang berbeda.</p>

</body>
</html>
Hasil :
Nilai HEX pada HTML
klik gambar untuk memperbesar

Nilai HSL pada HTML

Dalam HTML, warna dapat ditentukan dengan menggunakan hue, saturation, dan lightness (HSL) berupa:
HSL ( hue , saturation , lightnes)
Hue adalah gelar pada roda warna dari 0 sampai 360. 0 adalah merah, 120 adalah hijau, dan 240 berwarna biru.

Saturasi adalah nilai persentase, 0% berarti warna abu-abu, dan 100% adalah penuh warna.

Lightness juga persentase, 0% hitam, 50% adalah tidak terang atau gelap, 100% putih

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>Dalam HTML, Anda dapat menentukan warna menggunakan nilai HSL.</p>

</body>
</html>
Hasil :
HTML Color atau Warna pada HTML
klik gambar untuk memperbesar


Saturasi

Saturasi dapat digambarkan sebagai intensitas warna.

100% adalah warna murni, tidak ada warna abu-abu

50% adalah 50% abu-abu, tetapi kamu masih bisa melihat warna.

0% benar-benar abu-abu, kamu tidak dapat lagi melihat warna.

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>Dengan warna HSL, sedikit saturasi berarti lebih sedikit warna. 0% benar-benar abu-abu.</p>

</body>
</html>
Hasil :
Nilai HSL pada HTML
klik gambar untuk memperbesar


Lightness

Lightness warna dapat digambarkan sebagai seberapa banyak cahaya yang ingin kamu berikan pada warna, di mana 0% berarti tidak ada cahaya (hitam), 50% berarti 50% cahaya (tidak gelap atau terang) 100% berarti cahaya penuh (putih).

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>Dengan warna HSL, 0% terang berarti hitam, dan 100% terang berarti putih.</p>

</body>
</html>
Hasil :
lightness html
klik gambar untuk memperbesar

Nuansa abu-abu sering didefinisikan dengan menetapkan warna dan saturasi ke 0, dan menyesuaikan tingkat terang dari 0% sampai 100% untuk mendapatkan lebih gelap / nuansa cahaya:

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>

<p>Dengan warna HSL, nuansa abu-abu dibuat dengan mengatur saturasi ke 0%, dan menyesuaikan cahaya sesuai seberapa gelap / terang warna abu-abu seharusnya.</p>

</body>
</html>
Hasil :
Nilai HSL pada HTML
klik gambar untuk memperbesar

Nilai RGBA pada HTML

RGBA nilai warna merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang menentukan opacity untuk warna.

Sebuah nilai warna RGBA ditentukan dengan:
RGBA ( merah, hijau , biru, alpha )
Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>Anda dapat membuat warna transparan dengan menggunakan nilai warna RGBA.</p>

</body>
</html>
Hasil :
Nilai RGBA pada HTML
klik gambar untuk memperbesar

Nilai HSLA pada HTML

HSLA nilai warna merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity untuk warna.

Sebuah nilai warna HSLA ditentukan dengan:

HSLA ( hue, saturation , lightness, alpha )

Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Contoh :
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>Kamu dapat membuat warna transparan dengan menggunakan nilai warna HSLA.</p>

</body>
</html>
Hasil :
Nilai HSLA pada HTML
klik gambar untuk memperbesar


Reviewer: FajarYusuf.Com
ItemReviewed: HTML Color atau Warna pada HTML

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.