Kampus STT Ibnu Sina Batam "Kampus Unggulan" Berbasis Imam dan Tagwa
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 copyBerikut 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 © 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 :
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 © 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 © 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
Langganan:
Postingan (Atom)
Popular Posts
- Cara Membuat tabel menggunakan Notepad++
- Cara menggabungkan Css dan html
- Cara memasukkan link ke html menggunakan notepad++
- Visi, Misi, Dan Tujuan STT Ibnu Sina Batam
- RANCANGAN DATABASE ATM SE-INDONESIA
- Cara Membuat popups pada jquery mobile
- Cara mengatur posisi biodata di website
- Sejarah berdirinya STT Ibnu Sina Batam
- Apple Watch lacks 'kill switch' to thwart thefts
- Sedikit cerita mengenai mata kuliah yang saya senangi selama kuliah di STT Ibnu Sina Batam
Pengunjung
Blog Archive
Diberdayakan oleh Blogger.