Kamis, 07 Juni 2012

Coding-Coding HTML Bagian 3


Membuat Background Color of a Single Cell :

<table style="background-color:lightblue;">

<tr style="background-color:blue;color:white;">

<th>Table header</th><th>Table header</th>

</tr>

<tr>

<td>Table cell 1</td><td style="background-color:lightgreen;">Table cell 2</td>

</tr>

</table>

Membuat Background Color of a Table Row :

<table style="background-color:lightblue;">

<tr style="background-color:blue;color:white;">

<th>Table header</th><th>Table header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

 

Membuat Background Color for the Whole Table :

<table style="background-color:lightblue;">

<tr>

<th>Table header</th><th>Table header</th>

</tr>

<tr>

<td width="20%">Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

Membuat Background Image :

<div style="background-image:url(/pix/smile.gif);

            background-repeat:repeat;

            width:200px;

            height:200px;">

<p>HTML background code is limited, CSS background code is much better!</p>

</div>

<p style="font-size:10px;"><a href="http://www.quackit.com/create-a-blog/">How to make a blog</a></p>

 

Membuat Backgrounds for the Whole Page :

<html>
<head>
</head>
<body style="background-color:#eeeeee;">
Link gambar di sini
</body>

Membuat Buletan pada teks Dengan tulisan Romawi :

<ul style="list-style-type:upper-roman;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Buletan pada teks Dengan tulisan Hiragana :

<ul style="list-style-type:hiragana;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Buletan pada teks Dengan tulisan Katakana :

<ul style="list-style-type:katakana;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Buletan pada teks Dengan tulisan Katakana-iroha :

<ul style="list-style-type:katakana-iroha;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a


Membuat Buletan pada teks Dengan tulisan Hiragana-Iroha:

<ul style="list-style-type:hiragana-iroha;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a


Membuat Buletan pada teks tidak ada:

<ul style="list-style-type:none;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Buletan pada teks dengan tulisan cjk-ideographic :

<ul style="list-style-type:cjk-ideographic;">

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>

<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Buletan pada teks dengan tulisan Hebrew:

<ul style="list-style-type:hebrew;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Buletan pada teks dengan menggunakan angka Nol :

<ul style="list-style-type:decimal-leading-zero;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a

Membuat Background Music :


<embed name="lostmojo"
src="/web_design/lostmojo.wav"
loop="false"
hidden="true"
autostart="true">
</embed>





Menambahkan Kontrol Audio:

<embed name="lostmojo"
src="/web_design/lostmojo.wav"
loop="false"
width="300"
height="90"
hidden="false"
autostart="false">
</embed>

Menambahkan Email Kita:

<a href="mailto:homer@example.com">Email Homer</a>

Menambahkan Gambar pada Command Teks:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:330px;height:221px; background:url(‘masukan web Link Gambar’);">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-size:10px;"><a href="masukan link web blog kita /">How to make a blog</a></p>



Merubah Warna teks /ukuran pada command teks:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:330px;height:221px;font:30px/40px cursive;color:#ffffff; background:url('Masukkan web link gambar');">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-size:10px;"><a href="masukan link blog kita /">How to make a blog</a></p>

Memasukan video :

<object width="425px" height="360px" >
               <param name="allowFullScreen" value="true"/>
               <param name="wmode" value="transparent"/>
               <param name="movie" value="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor="/>
               <embed src="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=" width="425" height="360" allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>
</object>




Membuat HTML Pop up Windows :

<script type="text/javascript">

// Popup window code

function newPopup(url) {

            popupWindow = window.open(

                        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

}

</script>

<a href="JavaScript:newPopup('Masukan link web kita');">Open a popup window</a>

 

Membuat Tulisan Berjalan ke kiri:

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

<p style="font-size:10px;"><a href="http://www.contoh.com/create-a-blog/">How to make a blog</a></p>

 

Membuat tulisan Nerjalan Ke kanan kiri :

<marquee behavior="alternate">Your bouncing text goes here</marquee>

<p style="font-size:10px;"><a href="http://www.contoh.com/create-a-blog/">How to make a blog</a></p>

Coding-Coding HTML Bagian 2

Membuat Table 1:
<table border='5'><tr><td>TEKS K0MENT KAMU</tr></td></table>
Membuat Table 2:
<table border="6" class="success"><tr><td align="center">TEKS COMENT COMENT KAMU</td></tr></table>
Membuat Table 3:
<div style="text-align:center;"><table style="background-color:#FF0000;border:8px #00FF00 dotted;"><tr><th><table border="4" style="background-color:#FFFFFF;"><tr><td><b class="err">TEKS COMEN KAMU</b></td></tr></table></th></tr>
Membuat Table Sederhana:
<div style="text-align:center;><table width="100%"border="3"><tr><td width="100%"bg color="#BBBBBB"a lign="center">tulisan</a></div>
Membuat Table sederhana dengan latar gambar :
<div style="text-align:center;
background-image:url(URL GAMBAR);
border:black 3px double;
padding:2px;margin:2px;color;green">tulisan kita</div>
Membuat Table dengan div style:
<div style="background-color:black;
border-style:ridge;border-width:2px;border-color:red;margin:2px">
<div style='background-color:black;
border-style:ridge;border-width:2px;border-color:silver;margin:2px;
padding:2px'>
<tr>
<td align='center' bgcolor='black'>
tulisan kamu
<img src="http://URL PHOTO KAMU"><br><b>
</b></td></tr>
Membuat Table sederhana dengan latar Gambar2:
div style="text-align:center;background-image:url(http://www.babadbali.com/image/aksarabali/logoaksara.jpg);border:black 3px double;padding:2px;margin:2px;color;green"></div>
Membuat Kombinasi huruf tebal,miring,garisbawah:
<b><i><u>Kombinasi</u></i></b>
Membuat Huruf Hidden :
<span style="visibility: hidden">Hilang</span>
Membuat Huruf Besar semua (uppercase):
<span style="text-transform: uppercase">Besar</span>
Membuat Huruf Small caps:
<span style="font-variant: small-caps">Alay</span>
Membuat Huruf Subscribe / kecil di bawah:
<p>4<sub>2</sub></p>
Membuat Huruf Superscribe / pangkat:
<p>4<sup>2</sup></p>
Membuat Huruf bergaris atas:
<span style="text-decoration: overline">Belajar</span>
Menentukan jenis huruf:
<p><font-family="Arial" >Belajar</font></p>
Mengatur posisi bullet:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

Membuat tabel border dot:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

Membuat tabel border groove :
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

Membuat tabel border Ridge:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>


Membuat tabel border Insert :
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

Membuat tabel border Outset :
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

Membuat Tabel berwarna :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel>

Membuat Tabel berwarna tak berbingkai :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel>

Membuat Subscrip Teks :
< sub > text < / sub >

Membuat Superscrip Teks :
< sup > text < / sup >

Membuat Mono Space :
< code > text < / code >

Membuat Quoted teks :
< q > tex < / q >



Membuat Teks Mesin Tik :
< tt>text kamu< /tt>

Membuat Menggunakan Classes :
<html>
<head>
<title>My Table Background Colors</title>
<style type="text/css">
.myTable { background-color:#FFFFE0;border-collapse:collapse; }
.myTable th { background-color:#BDB76B;color:white; }
.myTable td, .myTable th { padding:5px;border:1px solid #BDB76B; }
</style>
</head>
<body>
<table class="myTable">
<tr>
<th>Table header</th><th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>
</body>
</html>

Coding-Coding HTML Bagian 1

Berikut adalah coding pada HTML 

kode untuk membuat sepasi/Pindah baris:
<br>
Kode untuk membuat tulisan tebal:
<b>TEKS</b>
Kode untuk membuat tulisan besar:
<big>TEKS</big>
Kode untuk membuat tulisan bergaris tengah:
<s>TEKS</s>
Kode untuk membuat tulisan bergaris bawah:
<u>TEKS</u>
Kode untuk membuat tulisan berbedip:
<blink>TEKS</blink>
Kode untuk membuat tulisan berjalan kanan ke kiri:
<marquee>TEKS</marquee>
Kode untuk membuat tulisan posisi kiri:
<p align=left>TEKS</p>
Kode untuk membuat tulisan posisi tengah:
<p align=center>TEKS</p>
Kode untuk membuat tulisan posisi kanan:
<p align=right>TEKS</p>
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser:
<!– –>
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut:
<a href='http://URL KAMU'/>NAMA LINK</a>
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama:
<a name>
Sebagai awal dari Java applets:
<applet>
Mendefinisikan daerah yang dapat diklik (link) pada image map:
<area>
Membuat atribut teks default seperti jenis, ukuran dan warna font:
<basefont>
Memberi (suara latar) background sound pada halaman web:
<bgsound src='http:// URL LAGU'>
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link:
<body>
Membuat caption pada tabel:
<caption>
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser:
<comment>
Indents teks:
<dd>
Represents different sections of text:
<div>
Menambahkan sound or file avi ke halaman web:
<embed>
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks:
<font color='red' size='4'>TEKS</font>
Mendefinisikan input form:
<form>
Mendefinisikan frame:
<frame src='http://URL KAMU'></iframe>
Mendefinisikan attribut halaman yang akan menggunakan frame:
<frameset>
Mendefinisikan head document:
<head>            </head>
Membuat garis horizontal:
<hr>
Membuat garis horizontal dgn ukuran:
<hr size='4'>
dokumen html:
<html>
Membuat teks miring:
<i>TEKS</i>
Image, imagemap atau an animation:
<img>
Mendefinisikan input field pada form:
<input>
Membuat bullet point atau baris baru pada list
(berpasangan dengan tag dir, menu, ol and ul ):

<li>TEKS</li>
Mendefinisikan client-side map:
<map>
Mencegah ganti baris pada teks atau images:
<nobr>
Jika browser user tidak mendukung frame:
<noframes>
Mendefinisikan awal dan akhir list:
<ol>TEKS</ol>
Ganti paragraf:
<p>
Membuat teks dengan ukuran huruf yg sama:
<pre>
Mendefinisikan awal script dan akhir script:
<script>   </script>
Membuat tabel:
<table>
Kolom pada tabel:
<td>
Mendefinisikan title:
<title>TEKS</title>
Baris pada tabel:
<tr>
Membuat Tulisan Pelangi:
rainbow.arch.scriptmania.com/tools/rainbow_text/

Membuat Judul 1:
<h1>Judul 1</h1>
Membuat Judul 2:
<h2>Judul 2</h2>
Membuat Judul 3:
<h3>Judul 3</h3>
Membuat Tanda Kutip Kedalam:
<blockquote>Tanda kutip ke dalam</blockquote>
Membuat Daftar Terurut:
<ol><li>daftar 1</li><li>daftar 1</li></ol>
Membuat Daftar Butir:
<ul><li>daftar 1</li><li>daftar 1</li></ul>
Membuat Tulisan Miring:
<i>Tulisan miring</i>
Membuat Garis Bawah:
<u>Garis Bawah</u>
Membuat Tulisan Coret:
<s>Coret</s>
Membuat Teks Kecil:
<small>Teks kecil</small>

Membuat Paragraf Rata Kiri:
 <P align="left"> yang membuat paragraf menjadi rata kiri,</P>
Membuat Paragraf Rata Kanan:
<P align="right"> yang membuat paragraf menjadi rata kanan dan</P>
Membuat Paragraf Rata Tengah:
<P align="center"> membuat paragraf menjadi berada di tengah.</P>
Membuat text/post di tengah:
<p align=center>teks kamu</p>
Membuat text/post di kiri:
<p align="left">teks kamu</p>
Membuat text/post di kanan :
<p align="right">teks kamu</p>
Membuat Teks Warna:
<font color="warna">teks kamu</font>
Membuat garis warna:
<hr color=warna></hr>