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:

Senin, 16 Maret 2015

Form

assalamualaikum wr.wb
pada kesempatan kali ini saya akan membahas tentang Form HTML.
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. saya akan menyediakan beberapa script sekaligus untuk referensi agar mudah dipahami.
 - Yang pertama ini script yang sangat simple hanya menggunakan memasukan text

<!DOCTYPE>
<form><pre>
Nama : <input type="text" name="fname"><br>
Negara : <input name="negara" value=""><br>
</pre>
<input type="submit" value="Kirim">
<input type="reset" value="Batal">
</form>

berikut hasilnya :


- Ini script yang kedua udah mulai banyak script

<!DOCTYPE>
<form>
ISIKAN BIODATA DIBAWAH INI<pre>
Nama : <input type=text name=fname>

Kelas : <select name=kelas>
<option value="pilih" SELECTED>--PILIH--
<option value="X TKJ 1"> X TKJ 1
<option value="X TKJ 2"> X TKJ 2
<option value="X TKJ 3"> X TKJ 3
<option value="X TKJ 4"> X TKJ 4
</select> <hr  width=350 align=left>
Username : <input type=text name=fname maxlength=10>

Password : <input type=password name=password maxlength=6>

Re-Type Password : <input type=password name="repassword">
</pre>
<input type="submit" value="Kirim">
<input type="reset" value="Ulangi">

berikut hasilnya:


- Ini script yang ke tiga udah banyak kombinasi

<!DOCTYPE>
Isikan Biodata Sederhana
<form><pre>
Nama : <input type="text" name="fname" size=30 maxlensth=25>

Kelas : <input type="text" name="fkelas" size=10 maxlensth=7>

Jenis Kelamin :<input type=radio name=R1 value=laki-laki>Laki-Laki <Input type=radio name=R1 value=Perempuan>Perempuan

Agama : <select name=agama>
<option value="Pilih" SELECTED>--Pilih--
<Option value="Islam"> Islam
<option value="Kristen"> Kristen
<option value="Katolik"> Katolik
</select>
Hobby : <input type=checkbox name=Hobby> Membaca <input type=checkbox name=Gamers> Bermain Games
<input type=checkbox name=Berenang> Berengang
</pre>
<input type="submit" value="Kirim">
<input type="reset" value="Batal">


berikut hasilnya:



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

 sekian dari saya.

selamat mencoba






Diposting oleh di Tidak ada komentar:

Minggu, 15 Maret 2015

HTML 5

assalamualaikum wr.wb
pada kesempatan kali ini saya akan membahas HTML 5.
1. HTML 5 untuk menyisipkan Format tampilan audio
html 5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web dengan elemen <audio> ..... </audio> format suara yang telah didukung hingga saat ini adalah mp3, ogg, wap. tidak semua tipe file audio tersebut didukung oleh browser
-ogg
merupakan format audio yang didukung oleh mozilla, opera, chrome
-mp3
didukung oleh crome dan safari
-wav
didukng oleh mozilla dan opera

MIME  untuk format audio
digunakan untuk mekanisme mengirim berbagai informasi seperti teks, aplikasi, audio dan sebagainya agar browser tidak salah menerjemahkan konten yang diterima. berikut tipe MIME untuk format audio:
MP3  --------- audio/mp3
ogg    --------- audio/ogg
wav   --------- audio/wav

untuk latihan mari kita buat scriptnya
pertama siapkan notepad++ untuk membuat code (silahkan download di google banyak)
kedua siapkan browser terupdate / terbaru ( karena kalo browser lama tidak support HTML 5 ( kata pak Edi guru saya :D))
1. silahkan buka Notepad++ nya
2. silahkan copy script berikut ini

<!DOCTYPE HTML>
<html>
<head><title> Latihan Audio </head></title>
 <body>
<audio controls>
<source src="lagu.ogg" type="audio/ogg">
<source src="lagu.mp3" type="audio/mp3">
</audio>
 </body>
</html>

berikut keterakan dari script diatas:

  • yang berwarna Hijau itu script yang menandakan HTML 5
  • yang berwarna kuning itu judul yang nantinya akan tampil di status bar browser, disitu kita bisa isikan bebas sesuai keinginan
  • yang berwarna merah itu judul lagu. jadi lagu yang mau disisipkan harus berada di dalam satu folder. ingat judul lagu harus sama pada script dan pada dilagunya.
  • yang berwarna biru luget itu exstensinya
  • yang berwarna biru terang itu MIME TYPE nya yang tadi sudah dibahas diatas

3. jika sudah kita simpan code dengan cara CTRL+S atau FIle > Save. simpan dengan exstensi html (ex: latihan.html) ingat ya simpan dalam satu folder dengan lagunya
4. sekarang kita buka file html kita.


nb: ada banyak atribut atribut untuk file jenis audio





2. HTML 5 untuk menyisipkan Format tampilan video

selain format tampilan audio di html 5 juga bisa menampilkan format tampilan video.
Format tampilan file Video merupakan tag yang digunakan untuk menampilakn file video adalah <video> .... </video> samahalnya pada audio, video juga tidak semua format vidoe dapat ditampilkan pada web. sementara ini hanya dapat format video yang bisa diproses diantaranya: Webm, ogg, MP4

berikut atribut Video:
height   : <video height="240">        untuk mengatur tinggi video
width    : <video width="320">         untuk mengatur lebar video
loop      : <video loop="loop">         untuk mengatur video secara berulang
poster   : <video poster="anak.gif"> untuk memunculkan gampar/poster pada saat bufer atau diunduh.
sebenarnya masih banyak atribut atribut untuk file video.

untuk latian kita bisa lihat scipt dibawah ini :

 <!DOCTYPE HTML>
<html>
<head><title> Latihan Audio </title></head>
 <body>
<video controls=controls height="240" width="320" poster=gambar.jpg>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</audio>
 </body>
</html>

dan jika berhasil maka akan keluar video.. berikut ini schreenshoot menggunakan google chrome



selesai.
sekian yang saya bisa share

selamat mencoba
Diposting oleh di Tidak ada komentar:

Kamis, 12 Maret 2015

Membuat tabel pada HTML

tool yang disediakan:
1. Notepad ++
2. Browser (ex: Mozilla, Google Chrome)
Berikut ini script membuat Tabel pada HTML

<html>
<head><title>table</title></head>
 <body>
<table border=1 width=100%>
<tr align=center>
  <td colspan=3 height=100>Atas </td>
</tr>
<tr align=center height=300>
<td width=15%> Kiri </td>
<td> Tengah </td>
<td width=25%> Kanan </td>
</tr>
<tr align=center height=50>
<td colspan=3> Bawah </td>
</tr>
</table>
 <body>
</html>

anda tinggal copy code tersebut paste dalam notepad ++ dan simpan dengan exstensi html. contoh : Table.html
berikut Screen Shoot pada web browser Mozzila:


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