Berbagai banyak website yang ada di internet yang ada sekarang banyak yang menggunakan form login untuk masuk kedalam website tersebut, hal ini dikarenakan untuk menjaga keamanan dari suatu website agar tidak semua orang bisa masuk kedalam website tersebut dan menjaga privasi seseorang agar tidak di acak2 orang yang iseng.
sebagai contoh, ketika kita akan masuk situs jejaring sosial yang nge-trend pada saat ini seperti facebook atau friendster.kita harus memasukkan sebuah alamat email dan password.begitu juga ketika kita akan mengakses sebuah email,maka anda disuruh untuk login terlebih dahulu.
untuk memasuki sebuah halaman website yang seperti ini, sebelum dapat mencari data yang diperlukan dari website
tersebut Anda diminta untuk memasukkan user id yang merupakan pengenal Anda dan password yang hanya diketahui oleh Anda sendiri, sehingga hanya user yang telah memiliki haklah yang diizinkan untuk mengakses situs tersebut.
Untuk dapat mengakses situs ini, user yang login harus memberikan user id dan password dengan benar. User id dan password yang telah diberikan akan divalidasi dengan database yang sudah ada di server. Apabila user id terdaftar dan password yang diberikan juga cocok dengan data yang terdapat dalam database, maka user akan diberi wewenang untuk masuk ke dalam sebuah halaman web.
pada kesempatan kali ini, saya akan mencoba membuat tulisan sederhana tentang pembuatan form login dengan menggunakan PHP.
1.Ketikkan kode program berikut pada notepad:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Form_Login</title>
</head>
<body>
<?php
$adminpass = "5f4dcc3b5aa765d61d8327deb882cf99"; //password is "password"
(md5 encryption).
function admin(){
if(isset($_GET['logout'])) {
unset($_SESSION['logpassneh']);
echo"<META HTTP-EQUIV=\"refresh\" CONTENT=\"0; URL=$_SERVER[PHP_SELF]\">";
}
else {
// this page secret if you correct enter password.
echo"<h1>Login Successful....<br />This is Page Secret<br />Thanks for
Login</h1>
<a href=\"$_SERVER[PHP_SELF]?logout=1\">Logout</a>";
// end of page secret
} }
if(isset($_POST['password'])) {
$_POST['password']=md5($_POST['password']);
if($_POST['password']==$adminpass) {
$_SESSION['logpassneh'] = $_POST['password'];
admin(); }
else {
$true = explode("'", "Selamat Datang. ' Coba Login Lagi!");
echo"<h1><font color=green>$true[0]</font></h1><a
href=\"$_SERVER[PHP_SELF]\">$true[1]</a>"; } }
elseif(isset($_SESSION['logpassneh'])) {
if($_SESSION['logpassneh']==$adminpass) {
admin(); } }
else {
echo"
<form method=POST>
Username<br />
<input type=username size=20 name=username> <br /><br />
Password<br />
<input type=password size=20 name=password> <br /><br />
<input type=submit name=login value=\"LOGIN \">
</form>"; }
?>
</body>
</html>
2.Simpan kode program tadi, misal: demo_form_login.php
3.Kemudian jalankan di browser, tetapi jalankan XAMPP atau Wamp Server terlebih dahulu.
4.Hasil dari program diatas.
Program diatas.
Senin, 29 Maret 2010
Pembuatan Form Login
Berbagai banyak website yang ada di internet yang ada sekarang banyak yang menggunakan form login untuk masuk kedalam website tersebut, hal ini dikarenakan untuk menjaga keamanan dari suatu website agar tidak semua orang bisa masuk kedalam website tersebut dan menjaga privasi seseorang agar tidak di acak2 orang yang iseng.
sebagai contoh, ketika kita akan masuk situs jejaring sosial yang nge-trend pada saat ini seperti facebook atau friendster.kita harus memasukkan sebuah alamat email dan password.begitu juga ketika kita akan mengakses sebuah email,maka anda disuruh untuk login terlebih dahulu.
untuk memasuki sebuah halaman website yang seperti ini, sebelum dapat mencari data yang diperlukan dari website
tersebut Anda diminta untuk memasukkan user id yang merupakan pengenal Anda dan password yang hanya diketahui oleh Anda sendiri, sehingga hanya user yang telah memiliki haklah yang diizinkan untuk mengakses situs tersebut.
Untuk dapat mengakses situs ini, user yang login harus memberikan user id dan password dengan benar. User id dan password yang telah diberikan akan divalidasi dengan database yang sudah ada di server. Apabila user id terdaftar dan password yang diberikan juga cocok dengan data yang terdapat dalam database, maka user akan diberi wewenang untuk masuk ke dalam sebuah halaman web.
pada kesempatan kali ini, saya akan mencoba membuat tulisan sederhana tentang pembuatan form login dengan menggunakan PHP.
1.ketikkan kode program berikut di notepad
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Form_Login</title>
</head>
<body>
<?php
$adminpass = "5f4dcc3b5aa765d61d8327deb882cf99"; //password is "password"
(md5 encryption).
function admin(){
if(isset($_GET['logout'])) {
unset($_SESSION['logpassneh']);
echo"<META HTTP-EQUIV=\"refresh\" CONTENT=\"0; URL=$_SERVER[PHP_SELF]\">";
}
else {
// this page secret if you correct enter password.
echo"<h1>Login Successful....<br />This is Page Secret<br />Thanks for
Login</h1>
<a href=\"$_SERVER[PHP_SELF]?logout=1\">Logout</a>";
// end of page secret
} }
if(isset($_POST['password'])) {
$_POST['password']=md5($_POST['password']);
if($_POST['password']==$adminpass) {
$_SESSION['logpassneh'] = $_POST['password'];
admin(); }
else {
$true = explode("'", "Selamat Datang. ' Coba Login Lagi!");
echo"<h1><font color=green>$true[0]</font></h1><a
href=\"$_SERVER[PHP_SELF]\">$true[1]</a>"; } }
elseif(isset($_SESSION['logpassneh'])) {
if($_SESSION['logpassneh']==$adminpass) {
admin(); } }
else {
echo"
<form method=POST>
Username<br />
<input type=username size=20 name=username> <br /><br />
Password<br />
<input type=password size=20 name=password> <br /><br />
<input type=submit name=login value=\"LOGIN \">
</form>"; }
?>
</body>
</html>
2.kemudian simpan kode program diatas. misal Demo_Form_Login.php
3.lalu jalankan di browser. dengan mengaktifkan XAMPP terlebih dahulu.
sebagai contoh, ketika kita akan masuk situs jejaring sosial yang nge-trend pada saat ini seperti facebook atau friendster.kita harus memasukkan sebuah alamat email dan password.begitu juga ketika kita akan mengakses sebuah email,maka anda disuruh untuk login terlebih dahulu.
untuk memasuki sebuah halaman website yang seperti ini, sebelum dapat mencari data yang diperlukan dari website
tersebut Anda diminta untuk memasukkan user id yang merupakan pengenal Anda dan password yang hanya diketahui oleh Anda sendiri, sehingga hanya user yang telah memiliki haklah yang diizinkan untuk mengakses situs tersebut.
Untuk dapat mengakses situs ini, user yang login harus memberikan user id dan password dengan benar. User id dan password yang telah diberikan akan divalidasi dengan database yang sudah ada di server. Apabila user id terdaftar dan password yang diberikan juga cocok dengan data yang terdapat dalam database, maka user akan diberi wewenang untuk masuk ke dalam sebuah halaman web.
pada kesempatan kali ini, saya akan mencoba membuat tulisan sederhana tentang pembuatan form login dengan menggunakan PHP.
1.ketikkan kode program berikut di notepad
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Form_Login</title>
</head>
<body>
<?php
$adminpass = "5f4dcc3b5aa765d61d8327deb882cf99"; //password is "password"
(md5 encryption).
function admin(){
if(isset($_GET['logout'])) {
unset($_SESSION['logpassneh']);
echo"<META HTTP-EQUIV=\"refresh\" CONTENT=\"0; URL=$_SERVER[PHP_SELF]\">";
}
else {
// this page secret if you correct enter password.
echo"<h1>Login Successful....<br />This is Page Secret<br />Thanks for
Login</h1>
<a href=\"$_SERVER[PHP_SELF]?logout=1\">Logout</a>";
// end of page secret
} }
if(isset($_POST['password'])) {
$_POST['password']=md5($_POST['password']);
if($_POST['password']==$adminpass) {
$_SESSION['logpassneh'] = $_POST['password'];
admin(); }
else {
$true = explode("'", "Selamat Datang. ' Coba Login Lagi!");
echo"<h1><font color=green>$true[0]</font></h1><a
href=\"$_SERVER[PHP_SELF]\">$true[1]</a>"; } }
elseif(isset($_SESSION['logpassneh'])) {
if($_SESSION['logpassneh']==$adminpass) {
admin(); } }
else {
echo"
<form method=POST>
Username<br />
<input type=username size=20 name=username> <br /><br />
Password<br />
<input type=password size=20 name=password> <br /><br />
<input type=submit name=login value=\"LOGIN \">
</form>"; }
?>
</body>
</html>
2.kemudian simpan kode program diatas. misal Demo_Form_Login.php
3.lalu jalankan di browser. dengan mengaktifkan XAMPP terlebih dahulu.
Senin, 15 Maret 2010
Passing Argumen di PHP
Pada kesempatan kali ini, saya akan membahas tentang Pasing Argumen di dalam PHP, yang pertama adalah Passing by Value dan Passing by Reference.
Passing by Value
Passing by value adalah semua nilai yang di-pass masuk atau keluar dari fungsi, bukan by reference. ini berarti PHP membuat kopian dari nilai original dan nilai kopian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya.
contoh:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Passing by Value</title>
</head>
<body>
<?php
function tambah_string ($str) {
$str = $str . ", Malang";
return $str;
}
//
$str = "Universitas Negeri Malang";
echo "\$str = $str<br>";
echo tambah_string ($str). "<br>";
echo "\$str = $str<br>";
?>
Output dari program:
Passing by reference
berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas, kita akan modifikasi menjadi mekanisme passing by reference.
contoh:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Passing by reference</title>
</head>
<body>
<?php
function tambah_string (&$str) {
$str = $str . ", Malang";
return $str;
}
//
$str = "Universitas Negeri Malang";
echo "\$str = $str<br>";
echo tambah_string ($str). "<br>";
echo "\$str = $str<br>";
?>
</BODY>
</HTML>
Output dari program diatas:
Passing by Value
Passing by value adalah semua nilai yang di-pass masuk atau keluar dari fungsi, bukan by reference. ini berarti PHP membuat kopian dari nilai original dan nilai kopian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya.
contoh:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Passing by Value</title>
</head>
<body>
<?php
function tambah_string ($str) {
$str = $str . ", Malang";
return $str;
}
//
$str = "Universitas Negeri Malang";
echo "\$str = $str<br>";
echo tambah_string ($str). "<br>";
echo "\$str = $str<br>";
?>
Output dari program:
Passing by reference
berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas, kita akan modifikasi menjadi mekanisme passing by reference.
contoh:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Passing by reference</title>
</head>
<body>
<?php
function tambah_string (&$str) {
$str = $str . ", Malang";
return $str;
}
//
$str = "Universitas Negeri Malang";
echo "\$str = $str<br>";
echo tambah_string ($str). "<br>";
echo "\$str = $str<br>";
?>
</BODY>
</HTML>
Output dari program diatas:
Minggu, 07 Maret 2010
Membuat Kalkulator Sederhana
Pada kesempatan kali ini, kita akan belajar mencoba membuat kalkulator sederhana dengan 4 operator yaitu: penambahan, pengurangan, pembagian dan perkalian. Kalkulator ini menggunakan bahasa HTML dan javascript. Sebelum kita membuat programnya ada baiknya kita mengerti sedikit teori tentang javascript dan elemen2nya…!
Semoga bermanfaat bagi temen2…!
Elemen Dasar JavaScript
JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript.
- Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
- Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek yaitu;
<form>
<input type="text" name="myName" id="myID" />
</form>
- Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek—misalnya button atau teks—diklik.
- Me-retrieve Nilai
• Text Field
Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.
• Select (Combo Box)
Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.
Untuk operasi cepat—tanpa perlu klik button—pada select, kita bisa menambahkan event onchange.
• Check Box
Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.
berikut ini adalah kode program untuk membuat kalkulator sederhana:
<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" xml:lang="en" lang="en">
<head>
<title>Kalkulator Sederhana</title>
<script language="javascript" type="text/javascript">
<!--
var flag = false;
function isi(num) {
if (flag) calc.x.value += num;
else calc.y.value += num;
}
function tambah()
{
calc.operator.value = ' + '
flag = true;
calc.y.focus()
}
function kurang()
{
calc.operator.value = ' - '
flag = true;
calc.y.focus()
}
function kali()
{
calc.operator.value = ' * '
flag = true;
calc.y.focus()
}
function bagi()
{
calc.operator.value = ' / '
flag = true;
calc.y.focus()
}
//-->
</script>
</style>
</head>
<form name="calc">
<tr>
<td>
<input type="text" name="x" size="2" />
<select name="operator" onchange="setSelected(this);">
<option>-Operator-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" name="y" size="2" />
<input type="button" name="hasil" value="=" onclick="calc.k.value=eval(calc.x.value+calc.operator.value+calc.y.value)" />
<input type="text" name="k" size="2" disabled=true/>
<br/>
</td>
</tr>
</table>
</form>
</body>
</html>
dan ini adalah output program tersebut.
Semoga bermanfaat bagi temen2…!
Elemen Dasar JavaScript
JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript.
- Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
- Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek yaitu;
<form>
<input type="text" name="myName" id="myID" />
</form>
- Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek—misalnya button atau teks—diklik.
- Me-retrieve Nilai
• Text Field
Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.
• Select (Combo Box)
Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.
Untuk operasi cepat—tanpa perlu klik button—pada select, kita bisa menambahkan event onchange.
• Check Box
Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.
berikut ini adalah kode program untuk membuat kalkulator sederhana:
<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" xml:lang="en" lang="en">
<head>
<title>Kalkulator Sederhana</title>
<script language="javascript" type="text/javascript">
<!--
var flag = false;
function isi(num) {
if (flag) calc.x.value += num;
else calc.y.value += num;
}
function tambah()
{
calc.operator.value = ' + '
flag = true;
calc.y.focus()
}
function kurang()
{
calc.operator.value = ' - '
flag = true;
calc.y.focus()
}
function kali()
{
calc.operator.value = ' * '
flag = true;
calc.y.focus()
}
function bagi()
{
calc.operator.value = ' / '
flag = true;
calc.y.focus()
}
//-->
</script>
</style>
</head>
<form name="calc">
<tr>
<td>
<input type="text" name="x" size="2" />
<select name="operator" onchange="setSelected(this);">
<option>-Operator-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" name="y" size="2" />
<input type="button" name="hasil" value="=" onclick="calc.k.value=eval(calc.x.value+calc.operator.value+calc.y.value)" />
<input type="text" name="k" size="2" disabled=true/>
<br/>
</td>
</tr>
</table>
</form>
</body>
</html>
dan ini adalah output program tersebut.
Senin, 01 Maret 2010
Membuat desain WEB sederhana
HTML (Hypertext Markup Language)
Pengertian HTML
HTML (Hypertext Markup Language) merupakan sebuah bahasa yang mengkombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.
Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag html dan diakhiri dengan komplemennya, yakni tag html tag. Sebagai tambahan, dokumen HTML juga menyertakan tiga pasang tag.
Tag head: digunakan untuk menyatakan informasi mengenai dokumen HTML.
Tag title: digunakan untuk menambahkan title di title bar browser.
Tag body: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.
Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :
1.buat file Tugas_praktikum.html,sebagaiberikut:
<!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" xml:lang="en" lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="Tugas_praktikum.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="Um.jpg">
</div>
<div id = "box7">
<img src="Gerbang-wbl.jpg">
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> Search :
</div>
<div id = "box2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Profil</a></p>
</div>
<div id = "box4">
<a href="link.html"><font color="black"> Foto</a></p>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="Jardiknas.jpg">
</div>
<div id = "box9">
<img src="angkatan_Q1.jpg">
</div>
</div>
<div id="content">
<b>Jardiknas <br/></b>
<br/>
Ini adalah acara Jardiknas yang diselenggarakan di Gedung Sasana Budaya Universitas Negeri Malang, pada:<br/>
Tanggal : 2 Desember 2007 <br/>
Tempat : Gedung Sasana Budaya <br/>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kajur Cup</li>
<li>Lomba Desain Web(E2C)</li>
<li>SNEIE</li>
</div>
</div>
<div id="footer">
<h3 align="Center"><b>by : anh_design</b></h3>
</div>
</div>
</body>
</html>
2. kemudian buat file Tugas_praktikum.css, dengan isi sebagai berikut:
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
Pengertian HTML
HTML (Hypertext Markup Language) merupakan sebuah bahasa yang mengkombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web.
Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag html dan diakhiri dengan komplemennya, yakni tag html tag. Sebagai tambahan, dokumen HTML juga menyertakan tiga pasang tag.
Tag head: digunakan untuk menyatakan informasi mengenai dokumen HTML.
Tag title: digunakan untuk menambahkan title di title bar browser.
Tag body: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.
Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :
1.buat file Tugas_praktikum.html,sebagaiberikut:
<!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" xml:lang="en" lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="Tugas_praktikum.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="Um.jpg">
</div>
<div id = "box7">
<img src="Gerbang-wbl.jpg">
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> Search :
</div>
<div id = "box2">
<a href="link.html"> <font color="black">About Us</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Profil</a></p>
</div>
<div id = "box4">
<a href="link.html"><font color="black"> Foto</a></p>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="Jardiknas.jpg">
</div>
<div id = "box9">
<img src="angkatan_Q1.jpg">
</div>
</div>
<div id="content">
<b>Jardiknas <br/></b>
<br/>
Ini adalah acara Jardiknas yang diselenggarakan di Gedung Sasana Budaya Universitas Negeri Malang, pada:<br/>
Tanggal : 2 Desember 2007 <br/>
Tempat : Gedung Sasana Budaya <br/>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kajur Cup</li>
<li>Lomba Desain Web(E2C)</li>
<li>SNEIE</li>
</div>
</div>
<div id="footer">
<h3 align="Center"><b>by : anh_design</b></h3>
</div>
</div>
</body>
</html>
2. kemudian buat file Tugas_praktikum.css, dengan isi sebagai berikut:
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
Senin, 22 Februari 2010
Membuat desain web tabel dengan Html
Berikut ini adalah kebutuhan-kebutuhan yang minimal diperlukan:
a. WampServer (Paket web server Apache, PHP, dan MySQL.)
b. Web Browser (Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding, sebaiknya juga memanfaatkan browser lain.)
c. Editor Teks (Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web.)
d. HTML Validator (Untuk menghasilkan dokumen HTML yang valid, diwajibkan memasang validator, misalnya berupa add-on pada browser.)
berikut ini cara membuat tabel di sebuah website menggunakan html:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
3. Simpan dokumen HTML dengan nama TugasPraktikumFix.html dan letakkan di lokasi
direktori web.
4. Untuk menguji hasilnya, buka browser dan arahkan ke alamat TugasPraktikumFix.html.
*** Publikasi Halaman Web ***
Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.
Langkah yang diperlukan untuk publikasi ini sangat sederhana.
1. Pastikan bahwa file dokumen sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.
a. WampServer (Paket web server Apache, PHP, dan MySQL.)
b. Web Browser (Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding, sebaiknya juga memanfaatkan browser lain.)
c. Editor Teks (Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web.)
d. HTML Validator (Untuk menghasilkan dokumen HTML yang valid, diwajibkan memasang validator, misalnya berupa add-on pada browser.)
berikut ini cara membuat tabel di sebuah website menggunakan html:
1. Buka editor teks.
2. Ketikkan teks (kode-kode HTML) berikut:
3. Simpan dokumen HTML dengan nama TugasPraktikumFix.html dan letakkan di lokasi
direktori web.
4. Untuk menguji hasilnya, buka browser dan arahkan ke alamat TugasPraktikumFix.html.
*** Publikasi Halaman Web ***
Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya ketika aplikasi masih dalam tahap pengembangan.
Langkah yang diperlukan untuk publikasi ini sangat sederhana.
1. Pastikan bahwa file dokumen sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk Apache (versi tunggal) adalah htdocs.
2. Pastikan bahwa web server sudah dijalankan.
3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.
Selasa, 16 Februari 2010
Langganan:
Postingan (Atom)