Belajar membuat HTML style

Belajar membuat HTML style - posting kali ini saya akan membahas dan mengajarkan kepada anda tentang membuat style pada HTML, style pastinya tidak jauh - jauh dari design maupun pewarnaan, ukuran dlln. sebenarnya penggunaan style di HTML sangat mini digunakan dan lebih banyak penerapannya pada HTML.

ATTRIBUTE PADA STYLE

tag style berdiri sendiri pada HTML namun mempunyai pasangan dengan tag - tag yang ingin diberi style. jadi jika ingin membuat style pada HTML , cukup menambahkan syntax seperti ini setelah tag maupun id element HTML :

style="property:value;"

contoh penerapan sederhana dengan tag h1 :

<h1 style="property:value;">

HTML background COLOR.

memberikan warna pada background HTML , biasanya pada halaman web, akan hanya tercipta dengan warna putih standart. yang merupakan warna standart halaman web browser atau color default, warna ini bisa diubah dengan memasanga nilai attribute pada style pada tag body.

pada HTML hampir seluruh warna dapat dipakai dan penggunaan warna dipakai bukan saja dengan konstanta red, yellow ,blue dlln. namun penggunaan angka dan huruf bisa digunakan. seperti warna hitam black sama dengan = 000 dan warna putih sama dengan fff

sebelumnya jika anda mau memahami tentang warna bisa lihat di sini KODE WARNA. untuk kode - kode warna selain red,yellow,blue dlln.

untuk HTML background color contoh struktur kodenya seperti ini di tag <body> :

<body style="background-color:red;">

<body style="background-color:#ADD8E6;">

Dan berikut ini adalah contoh penerapannya dengan struktur HTML .

<!DOCTYPE html>
<html>
     <body style="background-color:lightblue;"> 
     <head>
            <title>Belajar HTML</title> 
      <head>
         <h1>Mengenai HTML Tittle Attribut</h1>
         <p>hello ini adalah halaman web yang terdiri dari struktur html</p>
  </body>
</html>

HTML TEXT COLOR.

pada umumnya kita melihat warna - warna teks HTML dengan warna hitam, namun dengan penerapan style maka nilai warna hitam dapat diubah sesuai nilai yang diterapkan pada style. contohnya , seperti ini :

<h1 style="color:red;">Ini adalah Heading 1</h1>

<p style="color:lightblue;">Ini adalah sebuah paragraf</p>

Contoh penerapan pada struktur HTML.

<!DOCTYPE html>
<html>
     <body style="background-color:lightblue;"> 
     <head>
            <title>Belajar HTML</title> 
      <head>
         <h1 style="color:red;">Mengenai HTML Tittle Attribut</h1>
         <p style="color:blue;">hello ini adalah halaman web yang terdiri dari struktur html</p>
  </body>
</html>

HTML Fonts

tiap font pada HTML umumnya hanya standart style font text biasa, dan dengan property nilai style anda dapat mengubah jenis font yang ingin digunakan pada halaman web browser. seperti heading anda dapat membuat style yang berbeda di tiap text, judul maupun paragraf. contohnya seperti di bawah ini :

<h1 style="font-family:verdana;">Ini adalah sebuah Judul h1 </h1>

<p style="font-family:courier;">ini adalah sebuah paragraf</p> .

HTML Text Size

yang mungkin anda ketahui bahwasannya ukuran pada font atau text di HTML mempunyai ukuran yang standart dengan ukuran 11px , namun dengan nilai style anda dapat mengubah ukurannya sesuai ukuran yang anda inginkan, beberapa ukuran meliputi tp,em, px, dan % . semuanya memiliki perbedaan ukuran.

jika menggunakan "%" (persen) maka text akan menjadi responsif terhadap halaman web browser maupun id element lainnya. namun jika menggunakan Px (pixel) ukuran text atau huruf tidak akan berubah.anda dapat mengetest ukuran - ukuran tersebut pada tag - tag yang anda gunakan.

contohnya seperti berikut ini :

<h1 style="font-size:300%;">INI MERUPAKAN SEBUAH JUDUL</h1>
<p style="font-size:160%;">ini merupakan sebuah paragraf</p>

Contoh penerapan pada struktur HTML.

<!DOCTYPE html>
<html>
     <body style="background-color:lightblue;"> 
     <head>
            <title>Belajar HTML</title> 
      <head>
         <h1 style="font-size:300%;">INI MERUPAKAN SEBUAH JUDUL</h1>
         <p style="font-size:160%;">ini merupakan sebuah paragraf</p>
  </body>
</html>

HTML Text Alignment

text aligment merupakan property dari text element html, mempunyai fungsi untuk meletakkan text pada sisi kanan, kiri maupun di tengah, kodenya berupa center,left,right,end, seperti berikut ini :

<h1 style="text-align:center;">JUDUL DI TENGAH</h1>

<h1 style="text-align:left;">JUDUL DI KIRI</h1>

<h1 style="text-align:right;">JUDUL DI KANAN</h1>

Contoh penerapan dengan struktur HTML :

<!DOCTYPE html>
<html>
     <body style="background-color:lightblue;"> 
     <head>
            <title>Belajar HTML</title> 
      <head>
         <h1 style="text-align:center;">JUDUL DI TENGAH</h1>
         <h1 style="text-align:left;">JUDUL DI KIRI</h1>
         <h1 style="text-align:right;">JUDUL DI KANAN</h1>    
</body> 
</html>

Penggabungan Nilai attribute style.

pada penerapan contoh - contoh diatas, saya mengajarkan dengan hanya satu nilai style saja, bagaimana jika digabungkan misalnya, memberi warna dan memberi ukuran. apakah bisa ? , semua bisa sob. asalkan nilai attribute stylenya benar, contoh sederhanya berikut ini :

<h1 style="text-align:center; font-size:150%; color:red; ">JUDUL DI TENGAH</h1>

tiap nilai value cukup di tutup seperti biasa dengan tanda titik koma ";" dan selanjutnya di lanjutkan nilai value attribute kedua dan seterusnya.

pada umumnya ini adalah pembelajaran pada CSS , HTML juga bisa memiliki nilai attribute style yang banyak. namun membuat pengkodingan HTML jadi kurang rapi dan rumit.

mungkin sampai sekian dulu artikel pembelajaran HTML kali ini, baca update artikel saya yang lainnya, dan jangan pernah segan dan berhenti belajar , semangat :) . jangan lupa juga terus mampir dan belajar disini. thanks.