HTML dan CSS

Menulis HTML

Sebelum menulis HTML, sobat harus tahu dulu sintaks dan tag serta fungsi tag dan atribut dari tag itu.
Sintaks adalah aturan penulisan kode-nya dimana jika kodenya salah, maka program yang kita tulis akan gagal, mari kita mulai dengan

sintaks HTML

sintaks HTML ini ngga sulit untuk dimengerti, kita-kira seperti ini

<html> <head> <title>judul dokumen</title> </head> <body> <p>ini paragraf</p> </body> </html>

Keterangan
penulian html dimulai dengan karakter < *buka kurung siku*
Lalu di-ikuti dengan tag_html, dimana tag_html ini berfungsi untuk mendefinisikan anggaplah sebuah elemen

beberapa tag_html

  • html : mendefinisan document html
  • head : untuk elemen head
  • body : untuk elemen content
  • a : bisanya untuk link
  • p : untuk paragraf
  • b, strong : untuk text tebal
  • i, em : untuk text miring
  • img : untuk gambar, dan masih banyak lagi

Setelah menulis nama tag, kita harus menutup dengan tutup kurung siku > *ini jika kita nggak menambahkan atribut*

setiap tag_html harus ditutup dangan tag_html lagi dimana tag penutup ditambahkan /*slash atau garis miring*, contoh

<html> ditutup degan </html>, <head> ditutup dengan </head>, <body> ditutup dengan </body>, <p>ditutup dengan</p>

Jika terdapat beberapa tag maka penulisan tag akhir tidak boleh bersilang dan harus berurut.
contoh benar

<html> <body> </body> </html>

contoh salah

<html> <body> </html> </body>

Atribut HTML

didalam HTML kita juga mengenal atribut, contoh

<html lang="en-US"> <head> <title> </title> <head> <body> <p><span class="misal">misal ini text</span></p> </body> </html>

keterangan

  • yang diberi text-tebal dan berwarna biru adalah atribut
  • lang adalah atribut-nya, sedangkan en-US adalah value dari atribut-nya, sedangkan fungsinya? saya pikir sobat sudah tahu? lang singkatan dari language, en singkatan dari english sedangkan US singkatan dari United states
  • aturan penulisan atribut dimulai dengan _(spasi) lalu nama atribut diikuti dengan =(sama dengan) lalu "(tanda_petik) setelah itu masukan valuenya, kemudian ditutup dengan"(tanda petik lagi), kira-kira seperti ini _atribut="value"
  • atribut ini sudah memiliki aturan dimana beberapa tag_html sudah memiliki atribut khusus, alias atribut itu tidak bisa ditambahkan ke tag lain, misalnya : arribut href ditambahkan ke tag “P”, contoh
 <p href="value">tidak bisa!</p> 

well, untuk memulai belajar html, edit terserah.html tadi lalu isi dengan code markup ini, sudah saya tambahkan komentar

<!-- ini adalah komentar html, dimana komentar ini tidak akan ditampilkan. // setiap komentar diawali dengan <!-- komentar disini dan ditutup dengan - - > (tanpa spasi) // --> <html lang="en-US"><!-- setiap document html selalu diawali dengan tag HTML --> <head><!-- ini adalah tag HEAD, dimana seluruh element head tidak ditampilkan, dan biasanya befungsi untuk menjabarkan document HTML itu --> <title>belajar html</title><!-- tag title berfungsi untuk memberi judul --> <meta name="Description" content="belajar html"><!-- tag meta dengan atribut description berfungsi untuk menjelaskan deskripsi dari document html itu --> <meta name="author" content="indam"><!-- tag meta dengan atribut author berfungsi untuk menjelaskan si author, umumnya nama --> <link rel="stylesheet" type="text/css" href="lokasi_file_css.css"><!-- fungsi tag link dengan atribut rel value stylesheet ialah untuk memanggil document css, dengan href adalah lokasi_file.CSS --> <script type="text/javascript" src="lokasi_file_javascript.js"></script><!-- fungsi tag script dengan atribut src ialah memanggil eksternal file javascript --> <script type="text/javascript"> // fungsi ialah untuk menulis javascript, contoh // function indaam_url(){ document.write ("http://www.indaam.com"); } // jika ada waktu akan saya sharing </script> <style type="text/css"> /* fungsi tag style ialah untuk menulis internal style css, misal: */ /* body{ background:red; } */ </style> </head><!-- menutup tag head --> <body><!-- ini adalah tag body, dan seluruh markup didalam tag head akan ditampilkan --> <table border="1" cellspacing="0" cellpadding="0" width="100%"><!-- fungsinya membuat table --> <tr> <th colspan="3" width="100%" height="80px"> <h1><font face="Arial Black;">judul halaman</font></h1> </th> </tr> <tr> <td colspan="3" width="100%"> <div> <ul> <li><a href="http://google.com">google</a></li> <li><a href="http://facebook.com">facebook</a></li> <li><a href="http://wikipedia.org">wikipedia</a></li> <li><a href="http://detik.com">detikcom</a></li> <li><a href="http://kaskus.us">kaskus</a></li> <li><a href="#">email</a> <ul> <li><a href="http://gmail.com">gmail</a></li> <li><a href="http://mail.yahoo.com">yahoo</a></li> <li><a href="http://hotmail.com">hotmail</a></li> </ul> </li> <li><a href="http://youtube.com">youtube</a></li> <li><a href="http://indaam.com">indaam.com</a></li> </ul> </div> <!-- .list --> </td> </tr> <tr valign="top"> <td width="25%" align="center"> <h3>sidebar kiri</h3> <hr /> <ol> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> </ol> </td> <td width="50%"> <h2>content</h2> <hr /> <p>ini paragraf</p> <p><strong>ini text tebal</strong></p> <p><em>ini text miring</em></p> <p><em><font color="red">ini text miring warna merah</font></em></p> <p><a href="http://www.indaam.com">ini link menuju indaam.com</a></p> <p><img src="http://lh6.googleusercontent.com/_oGnS5ekKHo8/TaSW5-E6G1I/AAAAAAAAADU/Ti8fjYiLaOk/htmlcss.png" border="0" alt="" width="70" height="70" /></p> <p>ini gambar yang diambil dari <em>C:/Program Files/Mozilla Firefox/res/table-remove-column-hover.gif</em></p> <blockquote> <p><code> ini tag blockquote dan code<br /> </code> </p> </blockquote> </td> <td width="25%" align="right"> <h3>sidebar kanan</h3> <hr /> <div align="left"> <ul> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar <ol> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> </ol> </li> <li>daftar</li> <li>daftar</li> <li>daftar</li> </ul> </div> </td> </tr> <tr> <td colspan="3" height="50px"> <div> <p><small>ditulis oleh indam, url : <script type="text/javascript"> // kita juga bisa menambahkan tag script didalam tag body indaam_url();</script></small></p> </div> </td> </tr> </table><!-- penutup tag table --> </body><!-- penutup tag body --> </html><!-- penutup tag html --> <!-- fungsi tag h1, h2, h3, h4, h5, h6 ialah untuk membuat judul content tag ul befungsi untuk membuat daftar, dimana setiap tag di tulis dgn tag li tag ol befungsi untuk membuat daftar dengan angka, dimana setiap tag di tulis dgn tag li tag hr befunsi untuk membuat garis horisontal tag br befungsi untuk membuat baris baru tag a unumnya digunakan untuk membuat link --> 

save, lalu jalankan, silakan diedit untuk belajar
Tambahan *
yang perlu diperhatikan didalam HTML ialah penempatan dan susunan tag, kita harus tahu tag mana yang bisa dan tidak bisa ditutup dengan tag lain, contoh salah <p><body></body></p>, jika diperhatikan dari sintaks-nya, memang benar, tapi HTML itu sudah memiliki aturan dalam susunan tag-nya. salah satu contoh, tag body tidak boleh berada di dalam tag P dan tag body ini hanya boleh berada didalam tag HTML. begitupun dengan tag style, link, meta, title yang hanya boleh berada didalam tag head.

Dasar-dasr CSS “cascading style sheet”

sederhananya CSS adalah bahasa yang berfungsi untuk merubah tampilan halaman web “sebenarnya tag_html”. itu definisi saya tentang css, untuk lebih jelasnya silakan googling :)

cara kerja css

cara kerja css ini sangat simple, kita hanya perlu tulis selector berserta property dan valuenya, maka tampilan tag-html juga akan berubah, misal: ingin merubah tag body, tulis seperti ini

body{ /*warna latar belakang*/background-color:/*misal*/yellow;/*kuning*/ /* warna */color: red ;/* merah*/ }

ok, untuk percobaan coba edit terserah.html tadi lalu masukan style ini

body{ background-color:yellow; color: red ; }

tepat dibawah <style type="text/css">

lalau jalankan terserah.html
nah, terlihat kan perubahanya?
keterangan*
body, adalah yang akan kita ubah
background-color adalah property dimana tag body nanti akan memiliki nilai yellow, jadi logikanya warna latar body akan menjadi yellow atau kuning, simple kan?

komentar css

sama seperti HTML, kita juga bisa menambahkan komentar kedalam style yang kita tulis, komentar ini fungsinya ialah agar orang yang membaca bisa memahami style yang kita tulis, tentunya kita juga dimudahkan dalam mengingat code yang kita tulis.
aturan penulisan komentar css diawali dengan /*(slah + bintang) tulis komentar disini dan diakhiri dengan */(bintang + slash).
keunikan komentar css
tidak seperti HTML yang penulisan komentarnya hanya diluar tag, komentar css ini lebih enak digunakan, kita bisa menulis komentar diantara property, value, maupun selector, contoh :

h1/* ini komentar css, komentar css yang kita tulis tidak akan dijalankan */ {/* ini komentar css*/ color/* ini komentar css*/:/* ini komentar css*/blue;/* ini komentar css*/ }/* ini komentar css*/ /* dan ini komentar css*/

jika tanpa komentar seperti ini

h1{color:blue;}

metode penulisan css

didalam css, kita mengenal 4 metode penulisan, diantaranya inline style, internal style, external style, import style, berikut keteranganya

inline style

inline style : inti dari penulisan inline style ini ialah css-nya langsung ditulis bersamaan dengan tag html, contoh <span style='color:pink;'>warna pink.</span> Dan property dan value cssnya ditulis didalam value atribut html :)

internal style

internal style : metode internal style maksudnya ialah style css-nya digabung atau ditulis bersamaan dengan tag-tag html, namun penempatan style css-nya harus didalam tag <style type="text/css"> /*disini*/ </style> dan harus diletakan di element head

<head> <style type="text/css"> /*disini*/ </style> </head>
eksternal style

eksternal style : external style ini ialah metode penulisan css, dimana source style-nya terpisah dengan document html, dan untuk memangilnya kita menggunakan ini <link rel="stylesheet" type="text/css" href="lokasi_file_css.css"> dimana value darihref adalah lokasi_file_css-nya

import style : hampir sama dengan external style, document html dan source css-nya terpisah. bedanya kita memanggil source css-nya dengan sintaks seperti ini

/* misal */ @import url(lokasi_file_css-nya); /* end */

dan penempatanya bisa di internal style maupun external style.
keunikan dari import style ini ialah, kita bisa mengimport beberapa file css sekaligus dan didalam import tadi masaih bisa diimpor lagi :)

maksudnya gini, misal sobat membuat file css dengan nama misal-satu.css dan misal-dua.css
nah untuk memangginnya kita menggunkan sintaks seperti ini

/* mengimport css */ @import url(misal-satu.css);/*jika disimpan di-folder yang sama*/ @import url(misal-dua.css);/* jika disimpan di folder yang sama*/ /* end */

seperti yang terurai diatas, didalam file yang di import tadi kita bisa mengimport lagi, contohnya : isi dari file misal-satu.css seperti ini

/* misal */ @import url(nama_folder/import_lagi.css); /* end */

dengan demikian, selain mengimport misal-satu.css, kita juga mengimport import_lagi.css “terletak didalam nama_folder”, beribet gituh maksudnya untuk apa? dengan teknik ini, setidaknya kita bisa menyembunyikan style yang sudah kita tulis agar tidak dilihat netter yang belum paham struktur css :(
biasanya ini dilakukan agar design kita tidak dicontek oleh web lain. tapi, sekarang ini semua website sudah bisa kita contek tampilanya, kan sourcenya sudah ada, kita tinggal salin aja sourcenya hahahahaha ;coba cari dimana saya letakkan source css home indaam.com, #PR hohohoho, tapi jagan pake pengaya/plugins ya :) ;

sintaks css

sintaks css ini juga sangat mudah, kira-kira seperti ini

tag_html/* atau */ selector_id/* atau */ selector_class/* atau */ { property: value; property_lain: value; property_lain_lagi : value; } /* atau */ p{ font-family:arial; } .warna_merah{ color:red; } #id_unik{/* selector id diawali dengan # *pager * */ text-align:left; font-size:40px; } /* kira kira seperti itulah sintaksnya*/

keterangan*

  • diawali dengan selector, atau tag
  • lalu { *buka kurung karawal*
  • diikuti dengan property
  • setelah peroperty, tambahkan : *titik dua*
  • kemudian masukan value dari peroperty itu,
  • dan setiap value diakhiri dengan ; *titik koma*
  • untuk mengakhiri ditutup dengan } *tutup kurung karawal *
  • /* selesai */

selector id dan class

selector class

selector class : seperti yang terurai diatas, penulisan css selector class adalah seperti ini

.nama_class{/* diawali dengan dot lalu nama class */ color:red; }

agar style ini bisa berjalan kita harus menambahkan atribut class pada tag html dan valuenya diisi dengan nama_class

contoh

<span class='nama_class'>aaaaaaa</span> <div class='nama_class'>bbbbbbb</div>

dengan demikian tag html yang diberi atribut class dengan value nama_class akan memiliki style sesuai dengan property yang kita tulis *contoh diatas akan mambuat text aaaaaa dan bbbbbbb berwarna merah atau red*

contoh 2
edit kembali terserah.html
lalu tambahkan style ini

.sideleft{ background:black; color:white; font-weight:bold; }

tepat dibawah <style type="text/css">
save lalu jalankan terserah.html
nantinya sidebar kanan akan memiliki style warna-latar hitam, warna text putih dan hurufnya tebal, simple kan?

 

selector id

hampir sama dengan selector class, hanya saja id ini harus unik, jadi untuk pemakainya hanya boleh sekali

misal css-nya seperti ini

#nama_id{ /* misal */background:black; }

dan pada penulisan HTML, ID-nya pun harus ditulisa sekali

<div id="nama_id"> misal </div>

dan jika ditulis lebih dari sekali, maka itu salah!

property dan value

anggap saja property dalam css itu adalah style perintah, misal color, font, background dll.
property css ini sudah memiliki value khusus dengan kata lain property dan value dalam css tidak boleh dicampur aduk. contoh : color, karena property-nya adalah color maka valuenya harus warna pula, misal red, blue, silver, black, yellow dll. bisa juga dengan hex color, rgb, rgba, hsv.
Jadi, jika sobat menulis property color lalu valuenya adalah misal(arial, margin, left, 13px) itu salah besar. sama halnya jika sobat menulis property font lalu valuenya misal red.

Apa yang harus diperhatikan dari CSS

yang paling pertama adalah sintaks atau aturan penulisan dan yang kedua adalah propery dan value-nya, sobat juga harus tahu nilai defaut dari html, misal tag span, a, strong, em dsb memiliki style display:inline dan tag div, form, body dsb memiliki style display:block.

contoh css dan html

<!-- ini adalah komentar html, dimana komentar ini tidak akan ditampilkan. // setiap komentar diawali dengan <!-- komentar disini dan ditutup dengan - - > (tanpa spasi) // --> <html lang="en-US"><!-- setiap document html selalu diawali dengan tag HTML --> <head><!-- ini adalah tag HEAD, dimana seluruh element head tidak ditampilkan, dan biasanya befungsi untuk menjabarkan document HTML itu --> <title>belajar html</title><!-- tag title berfungsi untuk memberi judul --> <meta name="Description" content="belajar html"><!-- tag meta dengan atribut description berfungsi untuk menjelaskan deskripsi dari document html itu --> <meta name="author" content="indam"><!-- tag meta dengan atribut author berfungsi untuk menjelaskan si author, umumnya nama --> <link rel="stylesheet" type="text/css" href="lokasi_file_css.css"><!-- fungsi tag link dengan atribut rel value stylesheet ialah untuk memanggil document css, dengan href adalah lokasi_file.CSS --> <script type="text/javascript" src="lokasi_file_javascript.js"></script><!-- fungsi tag script dengan atribut src ialah memanggil eksternal file javascript --> <script type="text/javascript"> // fungsi ialah untuk menulis javascript, contoh // function indaam_url(){ document.write ("http://www.indaam.com"); } // jika ada waktu akan saya sharing </script> <style type="text/css"> /* source css by indaam : indaam.com */ body{ background:#f1f1f1; margin:0 auto; color:#333; padding:20px 0; } table, tr, th, td, hr{ outline:none!important; border:none!important; } hr{ height:0;} h1{ text-transform:uppercase; } h3{ font-size:19px; background:#ddd; text-transform:uppercase; border-bottom:2px groove #ddd; text-align:left; padding:10px 5px; color:#555; } .list{ background:#ccc; display:block; height:40px; padding:0 0 4px 20px; } .list ul{ list-style:none; margin:0; padding:0; clear:both; display:block; } .list ul li{ float:left; padding:0; margin:0; } .list ul li a, .list ul li a:link, .list ul li a:visited{ text-decoration:none; display:block; padding:12px 14px; background:#ccc; border-left:1px solid #ddd; color:#444; } .list ul li a:hover, .list ul li a:active{ background:#aaa; color:#222; } .list ul li ul{ width:120px; display:none; margin:0; position:absolute; } .list ul li:hover ul{ display:block; } .list ul li ul a{ width:120px; border-top:1px solid #ddd; } .sideleft, .sideright{ background:#ededed; } .sideleft ul, .sideleft ol, .sideright ol, .sideright ul{ list-style:none; margin:0; padding:0; text-align:left; } .sideleft ul li, .sideleft ol li, .sideright ol li, .sideright ul li{ padding:5px 0 0 10px; border-bottom:1px solid #ccc; text-transform:capitalize; margin:0 4px; } .footer{ border-top:2px groove #ddd; background:#d1d1d1; padding:20px 0; } .footer p{ text-align:right; padding:0 20px 0 0; } .footer p small{ font:normal 12px verdana; text-transform:lowercase; } .content{ color:#454; background:#d5d5d5; } .content h2{ font:normal bold 20px arial; text-transform:uppercase; border-bottom:2px groove #ccc; text-align:center; padding:9px 0; } .content p{ margin:0 7px; padding:0; font:normal normal 16px georgia; }/* end css */ </style> </head><!-- menutup tag head --> <body><!-- ini adalah tag body, dan seluruh markup didalam tag head akan ditampilkan --> <table border="1" cellspacing="0" cellpadding="0" width="100%"><!-- fungsinya membuat table --> <tr> <th colspan="3" width="100%" height="80px"> <h1><font face="Arial Black;">judul halaman</font></h1> </th> </tr> <tr> <td colspan="3" width="100%"> <div> <ul> <li><a href="http://google.com">google</a></li> <li><a href="http://facebook.com">facebook</a></li> <li><a href="http://wikipedia.org">wikipedia</a></li> <li><a href="http://detik.com">detikcom</a></li> <li><a href="http://kaskus.us">kaskus</a></li> <li><a href="#">email</a> <ul> <li><a href="http://gmail.com">gmail</a></li> <li><a href="http://mail.yahoo.com">yahoo</a></li> <li><a href="http://hotmail.com">hotmail</a></li> </ul> </li> <li><a href="http://youtube.com">youtube</a></li> <li><a href="http://indaam.com">indaam.com</a></li> </ul> </div> <!-- .list --> </td> </tr> <tr valign="top"> <td width="25%" align="center"> <h3>sidebar kiri</h3> <hr /> <ol> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> </ol> </td> <td width="50%"> <h2>content</h2> <hr /> <p>ini paragraf</p> <p><strong>ini text tebal</strong></p> <p><em>ini text miring</em></p> <p><em><font color="red">ini text miring warna merah</font></em></p> <p><a href="http://www.indaam.com">ini link menuju indaam.com</a></p> <p><img src="http://lh6.googleusercontent.com/_oGnS5ekKHo8/TaSW5-E6G1I/AAAAAAAAADU/Ti8fjYiLaOk/htmlcss.png" border="0" alt="" width="70" height="70" /></p> <p>ini gambar yang diambil dari <em>C:/Program Files/Mozilla Firefox/res/table-remove-column-hover.gif</em></p> <blockquote> <p><code> ini tag blockquote dan code<br /> </code> </p> </blockquote> </td> <td width="25%" align="right"> <h3>sidebar kanan</h3> <hr /> <div align="left"> <ul> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar</li> <li>daftar <ol> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> <li>daftar dgn angka</li> </ol> </li> <li>daftar</li> <li>daftar</li> <li>daftar</li> </ul> </div> </td> </tr> <tr> <td colspan="3" height="50px"> <div> <p><small>ditulis oleh indam, url : <script type="text/javascript"> // kita juga bisa menambahkan tag script didalam tag body indaam_url();</script></small></p> </div> </td> </tr> </table><!-- penutup tag table --> </body><!-- penutup tag body --> </html><!-- penutup tag html --> <!-- fungsi tag h1, h2, h3, h4, h5, h6 ialah untuk membuat judul content tag ul befungsi untuk membuat daftar, dimana setiap tag di tulis dgn tag li tag ol befungsi untuk membuat daftar dengan angka, dimana setiap tag di tulis dgn tag li tag hr befunsi untuk membuat garis horisontal tag br befungsi untuk membuat baris baru tag a unumnya digunakan untuk membuat link -->
Cara menjalankan contoh css dan html

Salin source diatas, paste ke notepad atau notepad++ lalu save as dgn nama terserah2.html *ekstensinya harus [dot]html * jalankan.

perbedaan antara terserah.html dan terserah2.html hanya terletak pada style css-nya saja. Padaterserah.html kita sama sekali tidak menambahkan style css atau murni html saja, sedangkan pada terserah2.html kita menambahkan beberapa baris css, jadi bisa dilihat sendiri perbedaanya :)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s