Sedikit cerita mengenai mata kuliah yang saya senangi selama kuliah di STT Ibnu Sina Batam



Kampus STT Ibnu Sina Batam "Kampus Unggulan" Berbasis Imam dan Tagwa
Gabung dengan kami, di Stt-Ibnusina.ac.id


RANCANGAN DATABASE ATM SE-INDONESIA



Kampus STT Ibnu Sina Batam "Kampus Unggulan" Berbasis Imam dan Tagwa
Gabung dengan kami, di Stt-Ibnusina.ac.id

Cara Membuat popups pada jquery mobile



Kampus STT Ibnu Sina Batam "Kampus Unggulan" Berbasis Imam dan Tagwa
Gabung dengan kami, di Stt-Ibnusina.ac.id

Cara mengatur posisi biodata di website

Note : #Text berwarna merah merupakan penjelasan. tidak usah di copy


Berikut contoh biodata yang saya buat di html :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="beruang.html">beruang</a><li>
<li><a href="ikan.html">ikan</a><li>
<li><a href="kucing.html">kucing</a><li>
<li><a href="ayam.html">ayam</a><li>

</ul>
</div>
<div id="navv">   <nih biodatanya
<ul>
<table bgcolor="#990000">
  <tr><td bgcolor="#990000" align="left">
    <font color="#FFFDF9">Nama : Anggi Nugraha</font></td>
   
  <tr><td bgcolor="#990000" align="left">
    <font color="#FFFDF9" >Kelas : 2c Teknik Informatika</font></td>
  <tr><td bgcolor="#990000" align="left">
    <font color="#FFFDF9"></font></td>
 <tr><td bgcolor="#990000" align="left">
    <font color="#FFFDF9" >Alamat : Tanjung Buntung</font></td>
<tr><td bgcolor="#990000" align="left">
    <font color="#FFFDF9" >Pekerjaan : Mahasiswa</font></td>
<tr><td bgcolor="#990000" align="left">
    <font color="#FFFDF9" >Hoby : googling, streaming, doodling</font></td>
  </tr>
</table> sampe sini biodatanya


</ul>
</div>

<div id="selection">
<h1><center>Ayam</center></h1>

<p>Ayam peliharaan (Gallus gallus domesticus) adalah unggas yang biasa dipelihara orang untuk dimanfaatkan untuk keperluan hidup pemeliharanya. </p>
<p>Ayam peliharaan (selanjutnya disingkat "ayam" saja) merupakan keturunan langsung dari salah satu subspesies ayam hutan yang dikenal sebagai ayam hutan merah (Gallus gallus) atau ayam bangkiwa (bankiva fowl).</p>


</div>
<br>
<br>
<div id="footer">
Copyright &copy; anggi nugraha
</div>
</body>
</html>

</head>
<body>
<div id="roti">
</div>
</html>

selanjutnya mengatur posisi di css, berikut kode css saya : 

 #image
 {
background-image:url("jeck.jpg");
padding-left:2180px;
height:300px;
}

 #header{
background-color:#990000;
color:white;
text-align:center;
padding:5px;
padding-left:10px;
 }

 #nav{
line-height:25px;
height:500px;
width:230px;
text-align:right;
float:left;
padding:25px;

 }

 #navv{
line-height:25px;
height:400px;
width:250px;
float:right;
padding:25px;
padding-left:10px;
 }
 #section{
width:550px;
float:left;
padding:10px;
}

#footer{
background-color:#990000;
color:white;
text-align:center;
padding:5px;
}

 #roti
 {
background-image:url("jeck.jpg");
padding-left:2180px;
height:400px;
}


ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li{
float: left;
}



a:link, a:visited{
display: block;
width: 120px;
font-weight: bold;
color: #FFFDF9;
background-color: #990000;
text-align: center;
padding: 5px;
text-decoration:none;
text-transform: uppercase;
}

a:hover, a:active{
background-color: #FF4848;
}


kode #navv{ merupakan kode yang dipakai untuk mengatur biodata 

</ul>
</div>
<div id="navv">   <nih "navv" yang di biodata guna agar terbaca di css
<ul>

untuk mengatur kiri kanannya cukup ganti float:right;  menjadi float:left;

hasilnya akan seperti ini : 



Intinya hanya mengatur "navv" saja. sengaja saya terangkan semua kode contoh html saya agar pembaca tidak bingung .

Terimakasih








Cara menggabungkan Css dan html


Note : #text berwarna merah merupakan penjelasan. tidak usah di copy

Sebelum melanjutkan saya akan menerangkan mengapa Css digabungkan ke Html.
jika kita membuat html, kita tidak bisa membuat menu hingga mengatur warna pada web. maka disinilah Css berperan. silahkan lihat tutor sederhana saya :


gambar diatas merupakan html tanpa menggunakan css, terlihat suram dan susunannya tidak menarik. berikut kode html dari gambar diatas sebelum digabungkan menggunakan css :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="xx">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="algoritmaII.html">Algoritma</a><li>
<li><a href="Flowchart.html">Flowchart</a><li>
<li><a href="Pseudocode.html">Pseudocode</a><li>
<li><a href="Deskripsi.html">Deskripsi</a><li>
</ul>
</div>
<br>
<div id="selection">
<h1><center>Algoritma</center></h1>

<p>Algoritma adalah Sistim kerja komputer memiliki brainware, hardware, dan software.</p>

<p>Tanpa salah satu dari ketiga sistim tersebut, komputer tidak akan berguna. Kita akan lebih fokus pada software komputer.</p>
</div>

<div id="footer">
Copyright &copy; AnggiNugraha
</div>
</body>
</html>

selanjutnya kita buat file css menggunakan notepad++ :


 #image
 {
background-image:url("OP.jpg");   <"OP.jpg ganti sesuai gambar yg ada di folder kamu
padding-left:2380px; 
height:300px;
}

 #header{
background-color:#DC143C;  #ganti warna sesukamu , klik disini untuk melihat kodenya.
color:white;
text-align:center;
padding:5px;
padding-left:150px;
 }
 #nav{
line-height:30px;
height:300px;
width:130px;
float:left;
padding:5px;
 }
 #section{
width:350px;
float:left;
padding:10px;
}

#footer{
background-color:#DC143C;
color:white;
text-align:center;
padding:5px;
}


ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li{
float: left;
}


a:link, a:visited{
display: block;
width: 120px;
font-weight: bold;
color: #FFF0F5;
background-color: #DC143C;
text-align: center;
padding: 5px;
text-decoration:none;
text-transform: uppercase;
}

a:hover, a:active{
background-color: #FFEBCD;
}


Save css yang kamu buat , misalnya "style.css" .
lalu kita kembali ke file sebelum dimasukkan css..

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="xx.css"> # ganti xx dengan file css yg kamu buat tadi
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="algoritmaII.html">Algoritma</a><li>
<li><a href="Flowchart.html">Flowchart</a><li>
<li><a href="Pseudocode.html">Pseudocode</a><li>
<li><a href="Deskripsi.html">Deskripsi</a><li>
</ul>
</div>
<br>
<div id="selection">
<h1><center>Algoritma</center></h1>

<p>Algoritma adalah Sistim kerja komputer memiliki brainware, hardware, dan software.</p>

<p>Tanpa salah satu dari ketiga sistim tersebut, komputer tidak akan berguna. Kita akan lebih fokus pada software komputer.</p>
</div>

<div id="footer">
Copyright &copy; AnggiNugraha
</div>
</body>
</html>

Maka hasilnya akan seperti ini :

















Cara memasukkan link ke html menggunakan notepad++


Note : #text berwarna merah merupakan penjelasan. tidak usah di copy

untuk memanggil file terlebih dahulu buat menggunakan notepad++ dengan type HTML

contoh :
<li><a href="algoritmaII.html">Algoritma</a><li>
<li><a href="Flowchart.html">Flowchart</a><li>
<li><a href="Pseudocode.html">Pseudocode</a><li>
<li><a href="Deskripsi.html">Deskripsi</a><li>

#silahkan lihat kode diatas, text Algoritma disebelah kanan (tanpa html) merupakan tampilan luar saat kita memanggil link. 

"algoritmaII.html" merupakan html yang saya panggil sehingga jika di save akan muncul seperti gambar dibawah ini :



Cara Membuat tabel menggunakan Notepad++

Note : #text berwarna merah merupakan penjelasan. tidak usah di copy



<h1 align="center">DATA MAHASISWA</i> #Judul dari tabel
<table align="center" width="550" border="2" cellspacing="0" cellpadding="3">
<tr> #Width untuk mengatur panjang tabel, cellpadding berguna untuk memberi jarak antara tulisan dengan kolom-kolom tabel, cellspacing berguna untuk memberi jarak antar kolom.

<body style="background-color:Peachpuff"></body> #Warna background dibelakang table , cukup ganti kode "peachpuff" dengan warna lain , klik disini untuk mencari warna.

#selanjutnya silahkan copy text berikut :
<th width="79" height="41" bgcolor="#FF6347">No.</th>
<th width="83" bgcolor="#FF6347">Npm</th>
<th width="92" bgcolor="#FF6347">Nama</th>
<th colspan="1" bgcolor="#FF6347">Jurusan</th>
</tr>
<tr>
<td align="center" bgcolor="#FFEFD5">1</td>
<td align="center" bgcolor="#FFEFD5">141012891022</td>
<td align="center" bgcolor="#FFEFD5">anggi nugraha</td>
<td align="center" bgcolor="#FFEFD5">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#AFEEEE">2</td>
<td align="center" bgcolor="#AFEEEE">141012891021</td>
<td align="center" bgcolor="#AFEEEE">andi</td>
<td align="center" bgcolor="#AFEEEE">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#FFDEAD">3</td>
<td align="center" bgcolor="#FFDEAD">141012891222</td>
<td align="center" bgcolor="#FFDEAD">fajar</td>
<td align="center" bgcolor="#FFDEAD">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#E0FFFF">4</td>
<td align="center" bgcolor="#E0FFFF">141012891322</td>
<td align="center" bgcolor="#E0FFFF">dina</td>
<td align="center" bgcolor="#E0FFFF">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#8FBC8B">5</td>
<td align="center" bgcolor="#8FBC8B">141012891026</td>
<td align="center" bgcolor="#8FBC8B">restu</td>
<td align="center" bgcolor="#8FBC8B">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#7FFFD4">6</td>
<td align="center" bgcolor="#7FFFD4">141012891072</td>
<td align="center" bgcolor="#7FFFD4">yoga</td>
<td align="center" bgcolor="#7FFFD4">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#FFB6C1">7</td>
<td align="center" bgcolor="#FFB6C1">141012811336</td>
<td align="center" bgcolor="#FFB6C1">amit</td>
<td align="center" bgcolor="#FFB6C1">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#E9967A">8</td>
<td align="center" bgcolor="#E9967A">141012891000</td>
<td align="center" bgcolor="#E9967A">cacing</td>
<td align="center" bgcolor="#E9967A">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#FFD700">9</td>
<td align="center" bgcolor="#FFD700">141012891152</td>
<td align="center" bgcolor="#FFD700">nana</td>
<td align="center" bgcolor="#FFD700">Teknik Informatika II</td>

</tr>
<tr>
<td align="center" bgcolor="#90EE90">10</td>
<td align="center" bgcolor="#90EE90">141012891778</td>
<td align="center" bgcolor="#90EE90">joni</td>
<td align="center" bgcolor="#90EE90">Teknik Informatika II</td>

</tr>
</table>
</html>

#Setelah selesai jangan lupa save file dengan type HTML. Contoh : kacang panjang.html


berikut contoh tabel saya : 

Jika kurang jelas silahkan klik disini