Kamis, 26 Maret 2015

CSS internal

assalamualaikum wr.wb
kali ini saya akan membagi latian css internal
apa itu css internal?
CSS internal adalah css yang langsung ada dalam html
contoh:

<HTML>
<HEAD>
<TITLE>pengaturan pada link background</title>
<style ="text/class">
A:link {text-decoration: none}
A:visited{text-decoration: none}
A:active {text-decoration: none}
A:hover {font-weight:none;color: red;background-color:blue;}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="144">
<a href="#">arahkan mouse sesini</a>
</td>
</tr>
<tr>
<td width="144">
<a href="#">arahkan mouse sesini</a>
</td>
</tr>
</table>
</body>
</html>

silahkan anda copy dan paste ke Notepad lalu simpan dengan ekstensi .html



selamat mencoba

Diposting oleh di Tidak ada komentar:

Template

assalamualaikum wr.wb
ini script table untuk membuat template
silahkan copy paste ke Notepad

<html>
<head><title>POOP</title>
<link href="csstable.css" rel="stylesheet" type="text/css">
</head>
<table border=1 cellpadding=2 cellspacing=2 align=center>
<tr bgcolor=blue>
 <th colspan=2 height=100 width=500><center> Welcome To My Site </td>
</tr>
<tr height=300 >
<td width=150 valign=top align=center><u> Menu <br><br>
                                      <a href=home.html> Home<br>
 <a href=biodata.html> Profil<br>
 <a href=galery.html> Gallery<br>
 <a href=aboutme.html> About me</td>
<td width=350>...</td>
</tr>
<tr>
<th colspan=2 height=50 width=500><center> copyright &copy; 2015 </td>
</tr>

silahkan simpan dengan ekstensi .html (ex: template.html)

untuk mempercantik ini ada cssnya :


/* CSS DOCUMENT */
TH {
color :#FFFFFF;
background-color : #336699;
border-width: 1px ;
border-style:solid;
border-color:red;
font-size: 9pt
}
TD {
color :red;
background-color :#E6E6FA;
border-width: 1px;
border-style:solid;
border-color:blue;
font-size: 9pt
}

a: link {color:#000000;}
a:visited {
  color:EDEDED;
}
a:hover {
    background-color:#336699;
  color:#EED929;
  text-decoration:none;
}


silahkan simpan dengan ekstensi .css ingat dalam script html css diberikan nama csstable jadi css ini disimpan dengan nama csstable.css



selamat mencoba

Diposting oleh di Tidak ada komentar:

Promt dan Variabel (promt-2)

assalamualaikum wr.wb
buat latihan saya akan share prompt.
apa itu prompt ??
silahkan anda cari sendiri digoogle. :D
disini saya akan membuat promt untuk mengukur persegi / persegi panjang.
silahkan siapkan Notepad++ kalo tidak punya bisa juga pake Notepad biasa. tapi sebaiknya anda menggunakan Notepad++ karna untuk mempermudah.
silahkan copy promt:

 <html>
<head>
<title>latihan</title>
</head>
</body>
<script language="javascript">
<!--
 var panjang,lebar,luas;
 panjang=prompt("masukkan panjang","");
 lebar=prompt("masukkan lebar","");
 luas=panjang*lebar
 document.write(" jadi luasnya adalah ",luas);
 //-->
 </script>
 </body>

 </html>
silahkan copy dan pastekan pada Notepad++ dan disimpan dengan exstensi .html (ex: Promt.html). silahkan dibuka dengan browser yang ada tapi lebih baik pake mozilla firefox.


selamat mencoba

Diposting oleh di Tidak ada komentar:

Membuat Form BIodata (Form-3)

assalamualaikum wr.wb
pada kesempatan kali ini saya akan membahas tentang Form HTML. sebelumnya Form sudah dibahas pada entri yang kemarin tetapi karna Form sangat banyak jadi saya Post lagi. yang belum baca yang kemarin silahkan Klik Disini dan ini juga lanjutannya dengan yang Disini. tapi ini yang paling banyak modelnya munghin hampir sempurna
Form di html berfungsi untuk melewatkan data dari klien ke server. form di html dapat berupa elemen input seperti submit, reset, text, radio, checkbox, password.
untuk latihan mari kita liat scriptnya
pertama siapkan notepad++ untuk membuat code (silahkan download di google banyak)
kedua siapkan browser misalnya Mozilla atau Google Chrome
1. silahkan buka Notepad++ nya
2. silahkan liat scriptnya. 

<html>
<head>
<title>latihan</title>
</head>
<body>
<b> Isikan Biodata Sedederhana</b><br><br>
<form>
<pre>
Nama          : <input type=text name=fnama size=30 maxlength=25><br><br>
Kelas         : <input type=text name=fkelas size=10 maxlength=7><br><br>
Jenis kelamin : <input type=radio name=r1 value=laki-laki>Laki-Laki <input type=radio name=r1 value=perempuan>perempuan<br><br>
Agama         : <select name=agama>
<option value=pilih SELECTED>--Pilih--
<option value=Islam> Islam
<option value=kristen> kristen
<option value=katolik> katolik
    <option value=konghucu> konghucu
<option value=nasrani> nasrani
<option value=isis> isis
<option value=budha> budha
</select><br><br>
Hobi          : <input type=checkbox name=hobi1> Membaca    <input type=checkbox name=hobi1> Menulis
                <input type=checkbox name=hobi1> menggambar <input type=checkbox name=hobi1> futsal
                <input type=checkbox name=hobi1> bola       <input type=checkbox name=hobi1> minton

<input type=submit name=tkirim value=kirim> <input type=reset name=tbatal value=Batal>
</pre>
</form>
</body>
</html>


3. jika sudah kita simpan code dengan cara CTRL+S atau FIle > Save. simpan dengan exstensi html (ex: latihan.html)

4. selesai kita tinggal buka file htmlnya



silahkan mencoba

Diposting oleh di Tidak ada komentar:

Promt

assalamualaikum wr.wb
buat latihan saya akan share prompt.
apa itu prompt ??
silahkan anda cari sendiri digoogle. :D
silahkan siapkan Notepad++ kalo tidak punya bisa juga pake Notepad biasa. tapi sebaiknya anda menggunakan Notepad++ karna untuk mempermudah.
silahkan copy promt:

<script language="javascript">
<!--
 var nama;
 nama=prompt("isi nama anda","");
 document.write(nama);
 //-->
 </script>


lah kok cuma sedikit?? ya karna itu cuma dasar saja.
silahkan copy dan pastekan pada Notepad++ dan disimpan dengan exstensi .html (ex: Promt.html). silahkan dibuka dengan browser yang ada tapi lebih baik pake mozilla firefox.
jika benar akan terjadi :


selamat mencoba

Diposting oleh di Tidak ada komentar:

Membuat Form (Form-2)

assalamualaikum wr.wb
pada kesempatan kali ini saya akan membahas tentang Form HTML. sebelumnya Form sudah dibahas pada entri yang kemarin tetapi karna Form sangat banyak jadi saya Post lagi. yang belum baca yang kemarin silahkan Klik Disini
Form di html berfungsi untuk melewatkan data dari klien ke server. form di html dapat berupa elemen input seperti submit, reset, text, radio, checkbox, password.
untuk latihan mari kita liat scriptnya
pertama siapkan notepad++ untuk membuat code (silahkan download di google banyak)
kedua siapkan browser misalnya Mozilla atau Google Chrome
1. silahkan buka Notepad++ nya
2. silahkan liat scriptnya. 



<html>
<head>
<title>latihan</title>
</head>
<body>
<b> FORM BIODATA SISWA</b><br><br>
<form>
<pre>
<table border=1 width=700 height=100>
<tr>
<td width=300 height=20>Nama Siswa</td>
<td>:</td>
</tr>
<tr>
<td width=20 height=20>Tempat Tanggal Lahir</td>
<td>:</td><td><input type=text name=username size=10 >&nbsp;
<select name=tanggal>
                       <option value=pilih SELECTED>Tanggal
<option value=tgl>1
<option value=tgl>2
<option value=tgl>3
<option value=tgl>4
<option value=tgl>5
<option value=tgl>6
<option value=tgl>7
<option value=tgl>8
<option value=tgl>9
<option value=tgl>10
<option value=tgl>11
<option value=tgl>12
<option value=tgl>13
<option value=tgl>14
<option value=tgl>15
<option value=tgl>16
<option value=tgl>17
<option value=tgl>18
<option value=tgl>19
<option value=tgl>20
<option value=tgl>21
<option value=tgl>22
<option value=tgl>23
<option value=tgl>24
<option value=tgl>25
<option value=tgl>26
<option value=tgl>27
<option value=tgl>28
<option value=tgl>29
<option value=tgl>30
<option value=tgl>31
</select>&nbsp;
<select name=bulan
    <option value=pilih SELECTED>Bulan
    <option value=bulan>Januari
    <option value=bulan>Februari
<option value=bulan>Maret
<option value=bulan>April
<option value=bulan>Mei
<option value=bulan>Juni
<option value=bulan>Juli
<option value=bulan>Agustus
<option value=bulan>September
<option value=bulan>Oktober
<option value=bulan>November
<option value=bulan>Desember
</select>&nbsp;
<select name=tahun
<option value=pilih SELECTED>Tahun
<option value=tahun>1991
<option value=tahun>1992
<option value=tahun>1993
<option value=tahun>1994
<option value=tahun>1995
<option value=tahun>1996
<option value=tahun>1997
<option value=tahun>1998
<option value=tahun>1999
<option value=tahun>2000
<option value=tahun>2001
<option value=tahun>2002
<option value=tahun>2003
<option value=tahun>2004
<option value=tahun>2005
<option value=tahun>2006
<option value=tahun>2008
<option value=tahun>2009
<option value=tahun>2010
<option value=tahun>2011
<option value=tahun>2012
<option value=tahun>2013
<option value=tahun>2014
<option value=tahun>2015
</select>&nbsp;
</td></tr>
</center>
</form>
</body>
</html>

3. jika sudah kita simpan code dengan cara CTRL+S atau FIle > Save. simpan dengan exstensi html (ex: latihan.html)

4. selesai kita tinggal buka file htmlnya



selamat mencoba
Diposting oleh di Tidak ada komentar:

Kamis, 19 Maret 2015

Membuat CSS

assalamualaikum wr.wb
kali ini saya akan memberi gambaran tentang CSS.
CSS berfungsi untuk mempercantik atau memperindah tampilan HTML.
sebenarnya CSS dibagi menjadi tiga yaitu: Inline,Internal, dan eksternal. pagi ini saya akan membahas yang eksternal
sebelumnya siapkan alat alatnya.
1. Notepad ++
2. Browser
Pertama silahkan buka Notepad++ kemudian copy script dibawah ini:

<html>
<head>
<title> Table </title>
<link href=csstable.css rel=stylesheet type=text/css>
</head>
<body>
<table border width=250>
<tr align=center>
<th> No </th>
<th> Nama Siswa </th>
<th> Kelas </th>
</tr>
<tr align=center>
<td> 1 </td>
<td> Imam </td>
<td> X TKJ 1 </td>
</tr>
<tr align=center>
<td> 2 </td>
<td> Febri </td>
<td> X TKJ 1 </td>
</tr>
<tr align=center>
<td> 3 </td>
<td> Bangkit </td>
<td> X TKJ 1 </td>
</tr>


script diatas adalah script HTML jadi lilahkan save dengan cara klik file kemudian save dan menyimpannya dengan ekstensi .html (contoh csstable.html)
nb: yang berwarna merah adalah nama css yang akan kita buat. jadi harus sama agar bisa memanggil cssnya.
silahkan buka html tersebut dengan browser maka hanya akan tampil seperti berikut:


dan berikut kita buat CSSnya untuk mempercantik tampilannya.
silahkan copy script css berikut:

/* CSS Document */
TH {
color : #FFFFFF;
background-color : #336699;
border-width : 1px ;
border-style :solid;
border-color :red;
font-size: 9pt;
}
TD {
color : red;
background-color : #E6E6FA;
border-width : 1px ;
border-style :solid;
border-color :blue;
font-size: 9pt;
}


sekarang kita simpan css tapi ingat kita menyimpan css pada satu folder dalam html yang telah kita buat tadi.
dan berikut tampilan jika sudah diberi CSS:


lebih menarik kann....

selamat mencoba



Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)