Remake Game The New Tebak Gambar Jadi Bukan Tebak Gambar
Tidak terasa sudah 9 tahun berlalu yah. Tahun 2015 yang lalu saya merilis game The New Tebak Gambar. Game ini berawal d…
Baca Selengkapnya
Featured Post
Membangun Website dengan CSS (Bagian 2)
Sebelumnya: Membangun Website dengan CSS (Bagian 1)
Di entri kali ini aku akan menjelaskan bagaimana CSS dituliskan bersamaan dengan HTML. Ada 3 cara yang bisa kamu pilih untuk meletakkan CSS, yaitu: sebaris (inline), internal, dan eksternal. Kebanyakan CSS ditulis secara eksternal. Namun, di dalam template Blogger ditulis secara internal. Pasti penasaran dengan apa yang dimaksud penulisan sebaris, internal, ataupun eksternal. Berikut adalah ulasannya.
Kode di atas akan menghasilkan persegi panjang dengan latar abu-abu, lebar 300px, dan tinggi 200px.
Berkas HTML - index.html
Berkas CSS - style.css
Semua gaya penulisan bisa kamu coba untuk menemukan kelebihan dan kekurangannya. Setiap gaya penulisan punya tempat sendiri sesuai dengan kasus yang kamu hadapi.
Selanjutnya: Membangun Website dengan CSS (Bagian 3)
Penulisan Sebaris
Penulisan CSS dengan cara sebaris adalah cara yang paling mudah dilakukan. Biasanya penulisan sebaris dilakukan apabila hanya ingin melakukan kustomisasi pada satu elemen unik saja, karena dinilai lebih efektif daripada penulisan internal maupun eksternal. Berikut adalah cara menuliskan CSS sebaris:<div style="width: 300px; height: 200px; background: #ccc;"></div>Kode di atas akan menghasilkan persegi panjang dengan latar abu-abu, lebar 300px, dan tinggi 200px.
Penulisan Internal
Penulisan CSS selanjutnya adalah dengan cara internal. Penulisan secara internal ini lebih efektif apabila jumlah elemen yang dikustomisasi semakin banyak, namun masih ingin menjadikan antara berkas HTML dan CSS masih dalam satu berkas .html. Cara menulisnya adalah dengan menambahkan elemen <style> pada elemen <head>. Berikut adalah contoh penulisan CSS internal.<html>
<head>
<style>
body {
background: #eee;
margin: 0px;
padding: 0px;
}
#kotak {
background: #f00;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="kotak"></div>
</body>
</html>Penulisan Eksternal
Pada penulisan eksternal, CSS diletakkan di berkas yang terpisah dengan HTML. Berkas CSS dikenal dengan .css. Kelebihan dari penggunaan penulisan CSS eksternal ini, kita bisa melakukan kendali style dengan mudah tanpa harus melakukan penggantian satu per satu di elemen yang terpasang di HTML. Untuk kasus yang sama, penulisan internal sebelumnya akan ditulis dengan penulisan eksternal.Berkas HTML - index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="kotak"></div>
</body>
</html>Berkas CSS - style.css
body {
background: #eee;
margin: 0px;
padding: 0px;
}
#kotak {
background: #f00;
width: 500px;
height: 300px;
}Semua gaya penulisan bisa kamu coba untuk menemukan kelebihan dan kekurangannya. Setiap gaya penulisan punya tempat sendiri sesuai dengan kasus yang kamu hadapi.
Selanjutnya: Membangun Website dengan CSS (Bagian 3)
Mungkin Kamu Juga Suka...
Comments
Subscribe to:
Post Comments (Atom)
iskael rasa enny tapi tulisan John :D
ReplyDeleteditunggu tutorial berikutnya
wekeke, ini templatenya loh Iska yang bikin :P
Deleteharusnya komennya
Delete"ini yang nulis john, tapi yang balesin komen enny" :D
ini blog baru ya :) asyikkk aku ikutan belajar ya disini
ReplyDeleteiya mba blog baru :)
Deleteayo belajar di sini tp blm diisi banyak nih, hehehe
waini.. tetep om..belum mudeng juga.he.he... masalah sperti ini..he.he.
ReplyDeleteya kan tidak harus dibaca sekali langsung paham :D
Deletekalo bicara soal CSS..aku lempar handuk saja dech , nyerah :-)
ReplyDeletekalo aku ambil handuk om, lalu mandi :D
DeleteSering banget pake yang inline-style, soalnya males ngedit file style.css, hehe
ReplyDeletewekekek ... inline emang cara yang aman dan solutif :D
Deletejohn ini bikinnya dimana? gedit? terus disimpan dalam format apa?
ReplyDeleteiya, di gedit bisa
Deletesave sesuai yang nama yang tertera di atasnya
kalo yang .html di-save .html juga
yang .css juga di-save .css yo :)