Jumat, 06 Januari 2012

Tata Cara Memakai Editor HTML

Sepertinya masih banyak sobat blogger yang kebingungan dengan cara pemakaian dari HTML Editor! Kita tidak perlu susah² memahami bahasa HTML secara detail bila memang hanya mau memakainya saja. Sobat perlunya apa, kebutuhannya untuk apa dan mau sampai mana memakai HTML language ini. Koben ambil contoh kasus macam begini:
Kenal dengan Microsoft Office untuk ngeutik²? Berjalannya aktifitas mengetik di komputer tanpa adanya aplikasi/software Microsoft Office tidak mungkin bisa kita lakukan. Tahu dengan Adobe Photoshop untuk edit gambar atau lainnya? Ya sama saja sob, jadi editor HTML disini yaitu aplikasi buat kita belajar bahasa HTML :) Yang kalian perlu perhatikan hanya bahasa-bahasa dasarnya saja (kalau emang gak mau serius) Simpelnya lagi begini, editor post bloggereditor post blogger sarana kita membuat postingan!!! Itu kalau diperumpamakan sama saja dengan HTML Editor juga :)

Banyak jenis & fungsi dari Editor HTML itu sob. Beres dengan pengertian dari Editor-HTML, sekarang simak macam gaya penulisan dari Cascading Style Sheets (CSS).

  1. External Style Sheet
    2. Gaya penulisan CSS ini secara dasar seperti berikut<head> <link rel="stylesheet" type="text/css" href="http://link-your-host.css" media="screen" /> </head>Perhatikan tulisan yg diberi warna! Koben juga memakai trik ini CSS-nya :D Banyak lagi cara penulisan dari link .css tergantung format apa yg akan kita panggil nantinya. Ex: Print, ya medianya yg diganti bukan screen :)
  2. Internal Style Sheet
    3. Eksternal sudah pasti keluar/dari luar, inline ya dari dalam/di dalam. Gaya penulisan inline style sheet basicly like this<style type="text/css"> ATTRIBUTE CODED HERE </style><style type="text/css"> bisa jg dengan <style> ATTRIBUTE CODED HERE </style> saja. Gaya menulis ini banyak dipakai oleh para blogger bergaya Blogazine.
  3. Inline Styles
    4. Yang ini hampir sama dengan internal style sheet perbedaanya hanya pada metode penulisannya. Contoh: This is a Inline Styles<p style="font-weight:bold;color:red;text-decoration:blink">This is a Inline Styles</p>Pada editor blog post kita sudah punya yg beginian beberapa diantaranya kan ;)
Semoga mengerti sekarang sobatku tercinta :x Yuk kita coba bagaimana memakai Editor HTML dengan gaya penulisan Internal Style Sheet.
Pertama-tama buka ini terlebih dahulu MBT HTML Editor. Sesudah itu pencet tombol yg ada disana. Kemudian coba sekarang masukin bumbu CSS & HTML berikut pada kolom textarea sebelah kiri.
<style>
#loremdiv {
display: block;
margin: 0 auto;
cursor: pointer;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
height: 200px;
width: 200px;
background: #59F;
text-shadow: 1px 1px 3px #FFF; 
-webkit-transition: -webkit-border-radius 0.5s ease-in;-moz-transition:-moz-border-radius 0.5s ease-in;
-o-transition: border-radius 0.5s ease-in;-ms-transition:border-radius 0.5s ease-in;
transition: border-radius 0.5s ease-in
} 
#loremdiv:hover {
background: #F9F;
color: #FF6;
text-shadow: 1px 1px 3px #000; 
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
transform: rotate(1080deg);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease
}
</style>

<div id="loremdiv">
<div style="text-align:center;padding:45px;margin:0 auto">

http://beben-koben.blogspot.com/2011/12/creativity-using-css-keyframe.html

</div>
</div>
Perhatikan Koben membuat kombinasi antara Internal & Inline Style Sheet disana.

FINAL RESULT LIKE THIS:



http://beben-koben.blogspot.com/2011/12/creativity-using-css-keyframe.html
Itu merupakan struktur kode HTML. Masih tidak paham #-o ~X( Coba-coba saja sendiri sana, renungkan lah :)
Happy lah \m/
Diposting oleh di
Label: , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)