Selamat Datang Di Blog Saya , Keep Enjoy !

Selasa, 28 Februari 2012

Belajar Dasar-Dasar HTML/CSS + Contoh

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 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 ;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 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
Diposting oleh di 20.17

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)