Hallo blogger!
Ini adalah tulisan pertama saya di margasatrya.com, dulunya saya sudah pernah menulis sebagai guest blog di salah satu blog temen saya, sayangnya blog temen saya itu tiba-tiba vakum dan nggak ada kabarnya lagi, jujur saja saya kecewa karena blognya ditutup dengan gituh aja, yang membuat lebih kecewa ialah ‘apa dia nggak mikir kepada si penulis tamu?’ saya yakin semua pemulis tamu, pasti berpikir keras agar tulisanya nanti bisa bermanfaat untuk orang banyak dan tidak kadaluarsa.
ok, tulisan yang ingin saya bagi nanti tentang dasar-dasar HTML dan CSS, kategori ini saya pilih karena sasuai dengan kemampuan saya dan tidak rumit saya rasa 
, selain itu dasar-dasar HTML dan CSS ini sangatlah penting karena untuk masuk ke pemrograman yang lebih extreme dan sukar, sobat harus bisa dasar-dasarnya dulu kan?
Well, mungkin basa-basinya membuat sobat jenuh? mari kita mulai dangan
Dasar Dasar HTML
HTML adalah bahasa markup yang berfungsi untuk membuat halaman web, dimana sintaks html ini hanya bisa dijalankan oleh engine layout. Contoh engine layout adalah webkit, webkit ini tertanam di chrome browser, safari browser dan kalau nggak salah juga digunakan oleh dreamweaver versi *lupa*
Apa yang diperlukan untuk belajar html?
Tidak sulit belajar html ini, selain sintaksnya yang mudah banget, software yang di butuhkan juga nggak sulit didapat dan free.
Ok, untuk belajar html sobat wajib memiliki ini : text-editor dan browser(peramban).
Text editor : nantinya text-editor ini akan kita gunakan untuk menulis source kode html itu, text-editor yang saya rekomendasikan adalah notepad++, saya tidak menyarankan untuk menggunakan notepad dan
Browser : nantinya kita gunakan untuk melihat hasil source kode yang kita tulis.
Memulai html
tahap pertama buka notepad atau notapad++, lalu save as dengan nama terserah.html, setelah itu jalankan terserah.html dengan cara klik kanan lalu open with > pilih > firefox *jika ada*, pilih lainya jika ngga ada *opera, chrome, ie dll.* karena terserah.html masih blank maka ketika dijalankan tampilanyapun putih polos
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 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 class="header" colspan="3" width="100%" height="80px"> <h1><font face="Arial Black;">judul halaman</font></h1> </th> </tr> <tr> <td colspan="3" width="100%"> <div class="list"> <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 class="sideleft" 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 class="content" 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 class="sideright" 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 class="footer"> <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 dari href 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 <span style=’font-size:2px’>coba cari dimana saya letakkan source css home indaam.com, #PR hohohoho, tapi jagan pake pengaya/plugins ya </span>
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> <span 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 class="header" colspan="3" width="100%" height="80px"> <h1><font face="Arial Black;">judul halaman</font></h1> </th> </tr> <tr> <td colspan="3" width="100%"> <div class="list"> <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 class="sideleft" 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 class="content" 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 class="sideright" 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 class="footer"> <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. Pada terserah.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
contoh tiga
contoh tiga ini disertai dengan contoh icon-icon yang dibuat dengan css dan html. karena sourcenya kepanjangan, silakan copy lalu paste url ini http://sites.google.com/site/indaamwp/myfile/sample.zip ke address bar.
Weel, sekalian tulisan dari saya, jika ada kata yang tidak nyaman dan terkesan menggurui, sebelumnya saya minta maaf. So, mohon dimaklumin yah
setelah saya baca ulang, tulisan diatas masih sangat penuh dengan kekurangan, jadi buat yang ingin menambahkan atau memberi kritik untuk kesalahan dan salah persepsi, silakan tinggalkan komentar /* pastikan sudah membaca dan tes contohnya */.
/* belajar membutuhkan waktu dan extra kesabaran untuk mengerti sesuatu */
Artikel Belajar Dasar-Dasar HTML/CSS + Contoh ditulis oleh MargaSatrya.
