Style website

Diposting oleh
1.Cascading Style Sheet (CSS)
      Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.


Penulisan

Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
    color: #0789de;
   }
Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :

Inline Style Sheet

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
 
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
 
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
 

Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>.Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
 
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point  </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan background biru</p>
</body>
</html>
 

Contoh Berkas CSS

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
 
<body>
 
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
 
</body>
</html>
 
2.HTML(Hyper Text Mark up Language)
 
Sebuah Home Page, Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Bila para pembaca sekalian tidak senang mengutak-atik file HTML pada blogger,itu sebenarnya wajar, apalagi untuk yang pemula (saya juga). Sebab, kemungkinan takut terjadi apa-apa pada blognya (hayo ngaku?). Sebenarnya ga usah takut, Bahasa HTML berbeda dengan Bahasa Pemrogaman yang membutuhkan logika tingkat tinggi(walaupun bentuknya sama-sama rumit), HTML cuma butuh kreativitas kita, kok bisa gimana? Karena keindahan sebuah Home Page tergantung bagaimana kita memadukan warna dan bidang yang di bentuk dari Bahasa HTML tadi.. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya  

   
  



 CARA MEMASUKKAN GAMBAR 



kode : 



<img src="http://i496.photobucket.com/albums/rr329/grandisyf/blogbanner.gif" border="0" height="17"
width="90"> 



keterangan : 



yang warna PUTIH adalah lokasi
gambar kamu. 



height="17"
width="90" adalah ukuran lebar dan tinggi
gambar 



* CARA MEMBUAT LINK 



Kode : 



<a href="http://blog-triks.blogspot.com" >trik blog </a> 



Keterangan : 



Text warna biru adalah link yang
dituju. 



Tulisan "trik blog"
adalah tulisan yang ditampilkan. 



Jika pingin yang dikasih link bukan
tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti
diatas, sehinga kodenya akan seperti ini : 



<a href="http://blog-triks.blogspot.com" target="_blank"><img
src="http://i496.photobucket.com/albums/rr329/grandisyf/blogbanner.gif 

" border="0" height="17"
width="90">
</a> 



Jika pingin link yang dituju dibuka
dalam window baru maka tambahkan kode target="_blank" setelah
kode "http://trik-tips.blogspot.com" 







* CARA MENGETENGAHKAN TEXT/GAMBAR 



Kode : 



<center>text</center> 



Keterangan : 



Ganti tulisan "text"
dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar 







* CARA MEMBUAT BARIS BARU 



Kode : 



<br> 



Keterangan : 



Tambahkan kode tersebut sebelum
objek (text/gambar) yang dinginkan 



 MEMBUAT HURUF TEBAL, MIRING DAN
BERGARIS BAWAH 



Kode : 



<b>text</b> 



<i>text</i> 



<u>text</u> 



Hasil : 



Tebal 



Miring 



Garis Bawah 







* MEMBERI WARNA TEXT 



<font color="#FF0000">
text </font> 



<font color="red">
text </font> 



Keterangan : 



Ganti text yang dicetak tebal dengan
warna atau kode warna kesukaanmu. 



* KODE-KODE WARNA 



 


  

Warna


  

Kode


 



  

  

#000000


 



  

  

#999999


 



  

  

#FFFFFF


 



  

  

#FF0000


 



  

  

#00FF00


 



  

  

#0000FF


 



  

  

#FFFF00


 



  

  

#00FFFF


 



  

  

#FF00FF


 



  

  

#9900FF


 



  

  

#FF6600


 





* PENULISAN KARAKTER-KARAKTER KHUSUS 



Ada beberapa karakter yang tidak
bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi
untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh
karakter-karakter tersebut : 



 


  

Karakter


  

Kode
  


 



  

> 


  

&gt;


 



  

< 


  

&lt;


 



  

&


  

&amp;


 



  

"


  

&quot;


 



  

(spasi)


  

&nbsp;


 








 
 


Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)