H
allo sobat AHS,, udah berapa hari nih ngga posting,, ngga terasa ya udah memasuki bulan agustus..
yap,, kali ini saya akan posting tentang
Bermain-main dengan HTML dan CSS ala AHS
sobat AHS,, bagi anda yang gemar update post atau gemar melakukan edit-edit template,, nah anda datang pada post yang tepat,,
sekarang,, saya akan ajari bagaimana bermain-main dengan HTML dan CSS itu,,
sulit kah itu??
jawabannya ya bagi anda yang tidak mau berusaha,tetapi tidak bagi anda yang ingin bisa HTML dan CSS,,
bagi saya
HTML dan CSS itu bila di pelajari terus-menerus tidak akan pernah berhenti dalam arti lain tidak akan pernah ada habisnya,,
karena apa? setiap manusia tidak pernah puas akan segala sesuatu,
contohnya lihat saja yang menjadi trend sekarang..
Flat Design,Valid HTML5,Valid CSS3,Responsive,SEO? *pfft.. #curhat sedikit bero ._.
oke,langsung masuk pembahasan..
Cara Gampang Bisa HTML dan CSS
- pertama, gampang sih sobat, untuk bisa HTML anda cukup memahami kode dibawah ini,,
<html>
<head>
<!-- meta tag -->
<title>TITLE-BLOG/WEB</title>
<style>
/* Pengaturan CSS disini */
</style>
</head>
<body>
<!-- isi content/pemanggil kode css diatas -->
</body>
</html>
sudah paham sobat??
- oke, lanjut,,.. kedua untuk memahami lebih dalam lagi saya kasih contoh dibawah
#AHS-kotak{width:100px;
height:100px;
color:#fff;
background:#2493C4;
font-size:normal;
margin-left:auto;
margin-right:auto;
text-align:center;
}
- coba anda copy sobat kode itu,lalu gunakan kode dibawah ini untuk memanggil css dari kotak itu
<div id="AHS-kotak">Teks-Disini</div>
atau bisa juga
<div id="AHS-kotak"/>
Selanjutnya gimana??...
ya selanjutnya,, tinggal atur sendiri bang..
Untuk mengaturnya sebetulnya tidak begitu sulit kok,hanya perlu pemahaman akan HTML dan CSS yang tepat.
Keterangan dari Kode Tutorial Diatas
| Kode Tutorial | Penjelasan |
|---|
| <div id="AHS-kotak"> | Kenapa kok id? kok bukan class?,,karena tanda "#" itu merupakan kode pemanggil HTML "ID" sedangkan tanda "." merupakan kode pemanggil HTML "Class" |
| width:100px;height:100px; | Kode itu untuk membuat kotak menjadi persegi saja,dalam hal ini dengan lebar 100px dan tinggi 100px |
| background:#2493C4 | Kode itu untuk memanggil background yang merupakan warna dari kotak itu,untuk menjadikannya transparant tinggal ubah aja kodenya menjadi background:rgba(0,0,0,0.7),,nah kode "a" itu untuk mengatur transparantnya,sedangkan kode " 0,0,0 " itu merupakan kode warna rgb(red,green,blue) |
| text-align:center | Kode itu untuk meratakan teks ketengah,untuk membuatnya menjadi kekiri/kekanan,silahkan ubah menjadi right atau left |
Oke sobat,,
selanjutnya anda tinggal memahami sendiri,lalu terus sering berlatih,,
QUOTE:
Jadilah Orang Yang Merendah Bila Anda Ingin Disegani Banyak Orang,Setelah Anda Hebat Bukan Berarti Waktunya Stop Belajar,Justru Harus Semakin Di Tingkatkan. #AHS-QUOTE
Cukup sekian posting hari ini,, di lain waktu kita akan membahas lagi,,bila ada kesulitan silahkan tanyakan.