Pemograman HTML dengan CSS

Membuat Nama

<HTML>
<head>
<title>WEB Design : Satria Oskandar/title>
<style type=”text/css”>
body{color:black}
h1{color:lime}
</style>
</head>
<body>
<h1>Satria Blog</h1>
<p>Satria Oskandar Teknik Elektronika(D3).
</body>
</html>

Membuat Class

<html>
<head><title>Contoh CSS dengan class</title>
<style type=”text/css”>
@page{layout:column}
@frame toc{width:20%}
@frame main{width:80%;}
ul.toc{flow:toc;target:main}
body{flow:main}
</style>
<body>
<ul>
<li><A HREF =”css1.html”>Satria Blog</A>
<li><A HREF =”Daftar Terurut.html”>Daftar Mata Kuliah Yang Sekarang</A>
<li><A HREF =”css6.html”>Tabel mahasiswa</A>

</ul>
<p>Satria Oskandar adalah mahasiswa Universitas Negeri Padang (UNP)</p>
</body>
</html>

Contoh Penggunaan Pseudo-element

<html>
<head><title>Contoh Penggunaan Pseudo-element</title>
<style type=”text/css”>
P{font-size:14pt;line-height:16pt;font-family:helvetica}
P:first-letter{font-size:20%;float:left}

</style>
</head>
<body>
<p>a What’s Up Man Welcome Back To My Blog</p>
</body>
</html>

Perbandingan Posisi Teks

<html>
<head>
<title>Perbandingan Posisi Teks di dalam atau di luar</title>
<style type=”text/css”>
UL {list-style:outside}
UL.compact{list-style:inside}
</style>
</head>
<body>
<UL>
<li>Nama       : Satria Oskandar
<li>NIM       : 87249
<li>Alamat      : Kota Padang
<li>TmptLhr     : Padang
</UL>
<UL>
<li>Nama    : Sri Yana Rahmawati
<li>NIM        : 0710038105006
<li>Alamat    :  Kota Padang
<li>TmptLhr    : Padang
</UL>
</body>
</html>

Membuat Tabel

<html>
<head>
<MARQUEE><FONT COLOR=”9966FF”SIZE=”5″>Membuat Table Nama Mahasiswa jurusan Teknik Elektronika</FONT></MARQUEE>
<style type=”text/css”>
h1{color:blue}
table{background:#ff0;border-collapse:collapse}
TD{background:red;border:double black}
</style>
<head>
<BR>
<body>
<P ALIGN=”CENTER”>
<tabLE border=”5″>
<TR>
<BR>
<td> Satria Oskandar </td>
<td> Alfiyan </td>
<td> Dirga Pratama </td>
<td> Febriyan Ramadhani</td>
<td> Agung Virnando </td>
<td> Ultra Melta</td>
</TR>
<TR>
<td> Fauziah Syafril </td>
<td> Megah Utami </td>
<td> Sri Asih Lestari </td>
<td> Cici Astria </td>
<td> Meta Silvia </td>
<td> Eza Fitri Hasril </td>
</TR>
<TR>
<td> Rahmat Ferry</td>
<td> Ramit Danil</td>
<td> Andri Liska Putra </td>
<td> Ade Fitra Zikry </td>
<td> Yudha Pratama </td>
<td> Sabtu Apendi </td>

</TR>
</BODY>
<HTML>

Penggunaan Baris Dalam Tabel

<html>
<head>
<MARQUEE><FONT COLOR=”lime”SIZE=”8″>Membuat Table Nama Mahasiswa jurusan Teknik Elektronika</FONT></MARQUEE>
<style type=”text/css”>
h1{color:lime}
table{background:#f8f;border-collapse:collapse}
</style>
<h1>penggunaan baris dalam tabel</h1>
<table style=”border-collapse:collapse;border:solid;”}
<tr><td style=”border-right:hidden;border-botton:hidden”>3</td>
<td style=”border:solid”>Satria Oskandar</td></tr>

<tr><td style=”border:none”></td>
<td style=”border:solid”>AgungVirnando</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>E</td>
<td style=”border:solid”>Febriyan Ramadhani</td></tr>

<tr><td style=”border:none”></td>
<td style=”border:solid”>Despenra</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>D</td>
<td style=”border:solid”>Dirga Pratama</td></tr>

<tr><td style=”border:none”></td>
<td style=”border:solid”>Ultra Melta</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>2</td>
<td style=”border:solid”>Fauziah Syafril</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>/</td>
<td style=”border:solid”>Megah Utami</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>3</td>
<td style=”border:solid”>Meta Silvia</td>E</tr>

<tr><td style=”border:none”></td>
<td style=”border:solid”>Eza Fitri Hasril</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>E</td>
<td style=”border:solid”>Cici Astria</td>D</tr>

<tr><td style=”border:none”></td>
<td style=”border:solid”>Alfiyan</td></tr>

<tr><td style=”border-right:hidden;border-botton:hidden”>D</td>
<td style=”border:solid”>Yona Siska Sari</td>2</tr>
</table>
</html>

Tabel Lanjutan

<html>
<head>
<MARQUEE><FONT COLOR=”ff0000″SIZE=”5″>Table Lanjutan</FONT></MARQUEE>
<style type=”text/css”>
h1{color:blue}
table{background:#ff0;border-collapse:collapse}
td{background:red;border:double black}
</style>
</head>
<table>
<caption><b>DAFTAR BIAYA PERJALANAN</caption>
<th></th>
<th>makan</th>
<th>hotel</th>
<th>transportasi</th>
<th>subtotal</th>
</tr>
<tr>
<th id=”san-jose”axis=”sanjose”>sanjose</th>
</tr>
<tr>
<th headers=”san-jose”>3 desember 2009</th>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
<td></td>
</tr>
<tr>
<th headers=”san-jose”>4 desember 2009</th>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
<td></td>
</tr>
<tr>
<th headers=”san-jose”>subtotal</th>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
<td>379.02</td>
</tr>
<tr>
<th id=”seattle”axis=”seattle”>seattle</th>
</tr>
<tr>
<th headers=”seattle”>5 desember 2009</th>
<td>96.25</td>
<td>109.00</td>
<td>36.00</td>
<td></td>
</tr>
<tr>
<th headers=”seattle”>6 desember 2009</th>
<td>35.00</td>
<td>109.00</td>
<td>36.00</td>
<td></td>
</tr>
<tr>
<th headers=”seattle”>subtotal</th>
<td>131.25</td>
<td>218.00</td>
<td>72.00</td>
<td>421.25</td>
</tr>
<tr>
<th>totals</th>
<td>196.27</td>
<td>442.00</td>
<td>162.00</td>
<td>800.27</td>
</tr>
</table>

Penggunaan Linesheet

<html>
<head>
<title>Penggunaan InLinesheet S@tri@</title>
</head>

<body LINK=”#ff8080″VLINK=”#ff0066″ ALINK=”a05050″ STYLE=”background:#555fff;color:purple”>
<h1 ALIGN=”center” STYLE=”background:Black ; font: 36pt/40pt courier;font-variant: small-caps; border:
thick dashed purple”>Welcome to S@tri@ Blog</h1>
<br><br>
<p><span STYLE=”margin-left: 25px”>Hi guys ini merupakan blog pertama saya disini  teman-teman semua bisa melihat siapa dan bagaimana serta profil dari saya serta berbagai macam  aplikasi dan tutorial yagn penting n dirasa perlu buat pengembangan ilmu dan pengetahuan teman-teman semua…OK</span>
Tetapi ini bukan berarti bahwa blog yang saya buat sangat sempurna  namun ini sangat jauh dari kesempurnaan , ku harap teman-teman ngerti dengan hal ini, sebagai pemula saya harus belajar lebih banyak lagi agar bisa terus maju dan berkembang . Silahkan, anda cari informasi di Blogini <a HREF=”css3.html”> css </a>
<div><div STYLE=”font-weight: bold; margin-left: 30px”>
<span STYLE=”font size: x-large; color white”>M</span>eMerindukan sesuatu yang Terbaik yang pernah kau berikan</div>
Mo Tau.Check it Out??</div>

<h2 STYLE=”background:#000080; color:lime; line-height: 50px; font-size: 40px”>
Sesuatu Yang sangat berarti Untuk ku Dan Dirinya <em STYLE=”font-weight: 900″>SAYA</em>menulisnya</h2>
<ul>
<li>’There Once Was A Man From Nantucket’-
<span STYLE=”font-family:’comic sans ms’,fantasy;color:rgb(100%,100%,0%)”>Anonymous</span></li>
<li>’Cool In Fur’-
<span STYLE=”font-family:’comic sans ms’,fantasy;color:rgb(100%,100%,0%)”>Harry B.Foot</span></li>
<li>And My All Time Fave:
<ul>
<li STYLE=”font-size: x-large; font-style: italic”>’A Toast To My Toaster’-
<span STYLE=”font-family:’comic sans ms’,fantasy;color:rgb(100%,100%,0%)”>Me!</span></li>
</ul>
</li></ul>
<blocquote STYLE=”bakground: #000080; color: #00ff00; margin-left: 2cm”>Brought to you by the letter
<span STYLE=”font-family:’comic sans ms’,fantasy;color:rgb(100%,100%,0%)”>&quot;H&quot;</span>
and <span STYLE=”Padding: 20px; border: 20px groove #ffffbb”>Satria Oskandar</span></blockquote>

<div STYLE=”background: #000080; font-weight: bold; margin-left: 30px”>
<span STYLE=””font-size: x-large; color:#ffffff”> K</span>etika kamu melihat karya – karya besar tersebut,
Silahkan Anda mencari sponsor !!!</div>

<p STYLE=”font: 12pt/14pt Comic Sans MS; margin \: 5px 0px 2px 25px; border: medium dashed black;
background: white url(http://www.foo.com/image.gif) repeat-x fixed top right}”>
<span STYLE=”font: 20pt/23pt courier; font-variant: small-caps; border: thick dashed purple}”>
PENTING: JIKA KAMU INGIN</span>
Mengetahui Lebih Detil Mengenai Saya, kunjungi di <a HREF=”http://www.s@tri@’s.com/id2/fajarku”&gt;
Blog saya </a> temukan dan berbagi informasi menarik, di alamat tersebut </p>
<h6 style+”font-size: xx-small ! important; color: red ! important”> ini WEB site paling aku gemari untuk dikunjungi
<a HREF=”http://www.indowebster.com”&gt; </a> </h6>
</body>
</html>

Plain HTML

<html>
<head>
<title>Contoh Plain HTML</title>
</head>

<body BGCOLOR=”#000000″ TEXT =”#80c0c0″ LINK=”#ff8080″ VLINK=”#ff0000″ ALINK=”#a05050″>
<div ALIGN=”center”>

<table BGCOLOR=”#00ff00″ BORDER=3 BORDERCOLOR=”#0000ff”><tr>

<td><h1><font FACE=”Arial” SIZE=6><font SIZE=7>W</font>ELCOME TO MY
Blog!!!</font></h2></td>

</tr></table>
</div>
<br><br>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hai….!!! Jika kamu membaca dan menemukan my Blog!!!
Congratulation!!! Saya tahu sangat sulit untuk menemukan ini, tetapi saya berharap anda dapat
menikmatinya. Sekarang silahkan anda mencari informasi di <a HREF=”http://www.mysite.com
/coolsites.html”>cool site</a> or mengisi My <a HREF=”http://www.mysite.com/questbook.html”&gt;
quest book</a></p></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <b><font SIZE=6 COLOR=”#ffffff”>S</font>
ajak nan indah</b> tersedia disini, apakah anda ingin meminjam?</div>

<h6><font SIZE=4 COLOR=”#00ff00″> Sesuatu yang telah lama Di tunggu <em><b>SAYA</b></em>
Dan Yang Telah lama Dinanti</font></h6>
<ul>
<li>’There Once Was A Man From Nantucket’ – <font FACE= “‘comic sans ms’,fantasy” COLOR=”#eeffdd”>
Anonymous</font></li>
<li>’Cool In Fur’ – <font FACE=”‘comic sans ms’,fantasy” COLOR=”ffaadd”>Satria Oskandar</font><li>
<li>And My All Time Fave:
<ul>
<li><font SIZE=4><i>’A Toast To My Toaster’ –

<font FACE=”‘comic sans ms’,fantasy” COLOR=”aaaabb”>Me!!!</font></i></font></li>
</ul>
</li></ul>

<table BGCOLOR=”#000100″><tr>
<td WIDTH=50>&nbsp;</td>
<td><font COLOR=”#00ccee”>Brought to you by the letter
<font FACE=”‘comic sans ms’,fantasy” COLOR=”#ffff00″>&quot;S&quot;</font> and <u>Joe Shmoe</u>
</font></td></tr></table>

<div><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font SIZE=6 COLOR=”#ffffff”>J</font>ika menginginkan
karya besar tersebut, hubungi sponsor Anda !!!!!</b></div>

<table BGCOLOR=”#000000″ BORDER=2 BORDERCOLOR=”#00bbaa”><tr>
<td WIDTH=6>&nbsp;</td>
<td><font SIZE=8>PENTING </font>Jika anda ingin mengetahui lebih lanjut tentang saya, kunjungi
<a HREF=”http://www.angelfire.com/id2/fajarku”>Blog Saya</a> dapatkan informasi menarik
dari WEB tersebut</td></tr></table>

</h6><font SIZE=1 COLOR=”#ff0000″>WEB yang menjadi kesukaan saya adalah
<a HREF=”http://www.muthahhari.or.id”>Yayasan Muthahhari Bandung </a>Berminat kunjungi aja ya!!!
</font></h3>
</body>
</html>


Pengaturan Font

<html>
<head>
<title>Contoh Pengaturan Properti Font</title>
</head>

<style>
<!-

body
{font-family:Algerian;
font-size:30;
font-weight:bold
line-height:100%;
color:lime;
margin-top:.4in;
text-align:center;
background:darkslategreen}
->
</style>

<body>
<span style = “color:slateblue;font-size:205”> The Big Family’s
</span>
<br>
<span style = “margin-top:-2.15in;text-indent:.04in”> style sheets &nbsp
</span>
</body>
</html>

Type Is Blurred

<html>
<head>
<title>type is Blurred?</title>
<style>
<!–
body {background: black}
.logo1 {margin-top:-10px;
color:#00ff00;
font-size: 130px;
font-family: Impact,sans-serif;}
.logo1b{margin-top: -40px;
color:#00ff00;
font-size: 130px;
font-family: Impact, sans-serif;}
.logo2 {margin-top: -152px;
color:#00ff00;
font-size: 130px;
font-family: Impact, sans-serif;}
.logo3 {margin-top: -162px;
color:#0000A0;
font-size: 130px;
font-family: Impact, sans-serif;}
.byline {margin-top: -16px;
color:#800080;
font-size: 22px;
font-family: Impact, sans-serif;}
.topline{color:#800080;
font-size: 11px;
margin-left: 20px;
font-weight: bold;
font-family: Arial, sans-serif;}
.A:link{font-size: 10px;
text-decoration:none;
color:#888;
font-family: Verdana, sans-serif;}
.A:visited{font-size: 10px;
text-decoration:none;
color:#888;
font-family: Verdana, sans-serif;}
–>
</style>
</head>
<body><!-toolbar_start-><!-toolbar_exempt-><!-toolbar_end->
<center>
<table width=560 height=30 cellpadding=0 cellspacing=0 border=0>
<tr>
<TD width=30% align=left valign=top height=20><A
href=”css4.html”>Previous</A></TD>
<TD width=40% align=center valign=top><A
href=”Biodata.html”>Tentang Aku</A></TD>
<TD width=30% align=right valign=top><A
href=”css1.html”>Next</A></TD>
</tr>
</table>
<table width=560
cellpadding=0
cellspacing=0
bordercolordark=black
bordercolorright=red
border=0>
<tr>
<TD width=25% align=left>&nbsp;</TD>
<TD width=50% div>Directed By Satria Oskandar</div>
<TD width=25% align=right>&nbsp;</TD>
</tr>

<tr>
<td colspan=3>
<div align=center>Dunia</div>
<div align=center>Dunia</div>
<div align=center></div>
<div align=center>Dunia</div>
<div align=center>Tanpa</div>
<div align=center>Tanpa</div>
<div align=center>Tanpa</div>
<div align=center>Tanpa</div>
<div align=center>Batas</div>
<div align=center>Batas</div>
<div align=center>Batas</div>
<div align=center>Batas</div>
<div align=center>Satria Picture’s Movies</div>
</td>
</tr>
</table>
</center>
</body>
</html>

Daftar Terurut

<html>
<head>
<title>Membuat Daftar Terurut</title>
<style type=”text/css”>
h1{color:lime}
LI:before
{
display:maker;
conten:counter(mycounter,lower-roman)”.”;
counter-increment:mycounter;
}
</style>
</head>
<body>
<h1>Daftar Mata Kuliah Yang Sekarang</h1>
<hr>
<br>
<ol>
<li>WEB Programming.
<li>Visual Programming.
<li>Teknik Antar Muka Dan Mikrokontroller.
<li>Jaringan Komputer.
<li>Sistem Informasi.
<li>Sistem Operasi Dan Jaringan.
</ol>
</body>
</html>

Tunjangan Anak

<HTML>
<HEAD>
<a href=”lanjutan.html”>Lanjutan</a>
<body background =”Q.jpg”>
<TITLE>Contoh Penggunaan IF-ELSE</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
var tunjangan_anak=0;
var jumlah_anak=2;
var gaji_pokok=250000;
var status=2;
if(status==1)
{
tunjangan_anak=0
}
else
{
if(jumlah_anak>3)
{
tunjangan_anak=3*0.15*gaji_pokok
}
else
{
tunjangan_anak=jumlah_anak*0.15*gaji_pokok
}
}
document.write(“<P><b>Tunjangan Anak=</b>”+tunjangan_anak)
</SCRIPT>
<BODY>
</BODY>
</HTML>

2 Responses to Pemograman HTML dengan CSS

  1. agus wibowo mengatakan:

    klo ditunjukan tampilannya langsung tambah keren tulisannya nih

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

%d blogger menyukai ini: