Kamis, 07 Juni 2012
Coding-Coding HTML Bagian Akhir
Membuat
Tulisan Berjalan Ke atas :
<marquee behavior="scroll"
direction="up">Your upward scrolling text goes here</marquee>
<p
style="font-size:10px;"><a
href="http://www.quackit.com/create-a-blog/">How to make a
blog</a></p>
Mengatur
kecepatan Pergerakan Tulisan :
<marquee
behavior="scroll" direction="left"
scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll"
direction="left" scrollamount="10">Medium scroll
speed</marquee>
<marquee
behavior="scroll" direction="left"
scrollamount="20">Fast scroll speed</marquee>
<p style="font-size:10px;"><a
href="http://www.contoh.com/create-a-blog/">How to make a blog</a></p>
<marquee
behavior="scroll" direction="left"><img
src="/pix/smile.gif" width="100" height="100"
alt="smile" /></marquee>
<p style="font-size:10px;"><a
href="http://www.contoh.com/create-a-blog/">How to make a blog</a></p>
Membuat
Gambar dan Tulisan Berjalan Ke Kiri :
<marquee
behavior="scroll" direction="left">
<img
src="/pix/smile.gif" width="100" height="100"
alt="smile" />
<p>Sample text under a
<a href="http://www.quackit.com/html/codes/html_marquee_code.cfm">Marquee
image</a>.</p>
<p style="font-size:10px;"><a
href="http://www.contoh.com/create-a-blog/">How to make a
blog</a></p>
</marquee>
Membuka
Link Dengan Tampilan Jendela Baru:
Membuat Horizontal Scrolling Webpage:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal
Scroll Bar Example</title>
</head>
<body
style="width:120%;">
<h1>Horizontal
Scrolling</h1>
<p>Use
the bottom scroll bar to scroll horizontally... go on...<span
style="float:right;width:40px;">I didn't think you were even going
to notice me over here!</span></p>
<p
style="font-size:10px;"><a
href="http://www.quackit.com/create-a-blog/">How to make a
blog</a></p>
</body>
</html>
HTML
Link: Named Anchors
<h2>Link Targets<a
name="link_targets"></a></h2>
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>
<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>
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>
<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>
<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>
<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>
<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 >
< 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>
Langganan:
Postingan (Atom)