Skip to main content

CSS : Cara menggabungkan HTML dengan CSS

Cara menggabungkan HTML dengan CSS

Sebenarnya ada tiga macam cara untuk menggabungkan antara file HTML dengan file CSS.
Berikut ini ketiga cara untuk menggabungkan file HTML dengan CSS :

1.Inline Style

Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini contoh penulisan Inline Style:

<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
</head>
<body>
<p>
<h2 style=”color:#FFCC00″>Contoh untuk Inline Style
</p>
</h2>
</body>
</html>


2.Embedded Style

Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page ) dan penulisan file CSS sebelum ….</head>.
Berikut ini contoh penulisannya :

<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<style type=”text/css”>
h2{
color:#FFCC00;
background:#CC0000;
}
</style>
</head>
<body>
<p>
<h2>Contoh untuk Embedded Style
</p>
</h2>
</body>
</html>



3.Link Style

Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di antara <head>…</head>.

Untuk cara Link Style ini yang banyak dipakai oleh para Web Design atau programmer karena cara Link Style adalah cukup satu kali penulisan file CSS yang nantinya dipakai oleh seluruh halaman Website.

Biasanya para Web Design menamai file Link Style CSS dengan nam style.css.
Berikut ini contoh filenya:

h2{
color: #FFCC00;
background: #CC0000;
}

Simpan file stye.css didalam directori yang sama dengan file html yang akan kita buat dan buat folder css masukan file dalam folder css tersebut agar terkesan rapih.


buat file htmlnya dengan listing berikut :

<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p>
<h2>Contoh untuk Link Style
</p>
</h2>
</body>
</html>



Catatan :
  • Untuk menyisipkan Link ke file style.css penempatannya harus diantara <head>….</head>.
  • Anda bisa membuat lebih file css lebih dari satu sesuai dengan kebutuhan.





Selanjutnya anda bisa mempelajari Property Pada CSS.



Labels:

Comments

Post a Comment

Popular posts from this blog

Menambahkan Peraturan Komentar Pada Blog

Menambahkan Peraturan Komentar Pada Blog : Ngblog Menulis sebuah artikel dan dikomentari dengan link aktif/promosi produk dan kata kata spam lainnya memang tidak mengenakan anda mungkin akan sangat merasa kecewa sekali, anda mungkin seperti menulis sebuah artikel namun tidak dihargai karyanya oleh orang lain. Mungkin membuat aturan berkomentar di blog adalah salah 1 cara menetralisirnya, mungkin jika ada aturan tersebut orang berpikir 2 kali untuk meninggalkan komentar Spam, lalu bagaimana cara membuat aturan komentar tersebut? langsung saja kita praktekan Ikuti langkah berikut : Login ke bloger,masuk ke blog yang anda inginkan, Klik Setelan -> POS-KOMENTAR   Scroll kebawah dan cari menu "pesan formulir komentar" klik tambahkan , dan isi kolom sesuai keinginan kalian atau peraturan yang kalian inginkan.  Setelah selesai silakan klik simpan setelan dipojok kanan atas. Lihat hasilnya di blog kalian ,akan seperti ini : Jika ada pertanyaan...
21 comments
Baca Lebih »

Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner.

Hai Pembaca FajarYusuf.Com yang pintar dan berwawasan tinggi, kali ini FajarYusuf.Com akan post Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner . Mari kita membuat program konversi bilangan yang sangat mudah di buat dengan menggunakan bahasa pemrograman C++. Yaitu dengan menggunakan type data long, untuk Hexadesimal dengan rumus : <<hex<<desimal (merubah dari bilangan Desimal ke Hexadesimal) , untuk Oktal dengan rumus : <<oct<<desimal (merubah dari bilangan Desimal ke Oktal). Dan untuk biner dilakukan pembagian 2. Contoh Coding Program C++ Konversi Bilangan: #include<iostream> using namespace std; int main() { long desimal, pembagi=1073741824, bit; cout<<"Nilai Desimal : "; cin>>desimal; cout<<"Hexadesimal = "<<hex<<desimal<<endl; cout<<"Oktal = "<<oct<<desimal<<endl; ...
Post a Comment
Baca Lebih »

Array Pada Golang

Array Array adalah sebuah urutan bernomor elemen type tunggal dengan panjang yang tetap. Di Go bisa digunakan array seperti koding ini: var x [5] int Arti dari baris diatas yaitu x adalah contoh variabel array yang terdiri dari 5 urutan bertipe integer. Mari kita coba membuat codingan array  kalian bisa mencobanya klik disini  : package main import "fmt" func main() { var x [5]int x[4] = 100 fmt.Println(x) } Kamu akan melihat hasil output ini: [0 0 0 0 100] x [4] = 100 jika dibaca akan seperti ini "mengatur elemen ke-5 dari array x menjadi 100". Kelihatannya agak aneh bahwa x [4] mewakili elemen ke-5 dan bukannya yang ke-4. Untuk urutan array tidak sama seperti string, array diindeks mulai dari 0 .  Kita bisa mengubah fmt.Println (x) menjadi fmt.Println (x [4]) dan kita juga akan mendapatkan hasil yang sama yaitu 100. Berikut ini contoh program lain yang menggunakan array: package main import "fmt" func main() { var x [5]flo...
Post a Comment
Baca Lebih »