RocHmanovic Blog'S

Senin, 01 Maret 2010

Desain Layout dengan CSS 2

Na...Setelah desain layout 1 selesai, langkah selanjutnya bagaimana membuat tampilan seperti gambar diatas???????
membuat suatu desain layout dengan css yang lebih atraktif dibutuhkan Penambahan image dan background color pada masing-masing jenis css sangatlah dianjurkan sehingga membuat tampilan web Qt lebih menarik… seperti pada desain yang prtama,,desain layout2 masih memanfaatkan CSS untuk keperluan modifikasi tulisan dan gambar..

Dengan css, kita dapat mengatur style maupun perilaku dari suatu link. CSS juga memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

weeeees...Tidak usah panjang lebar y..capek --!!l ;D
Langsung saja qt bwt style2.css (gak harus ini lo) berikut ini:

Mystyle2.css

#wrapper {
margin: auto;
width: 750px;
background-image:url(backgound3.jpg);
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-repeat:no-repeat;
}
#logo {
float:left;
width: 78px;
height: 78px;
margin-top: 0px;
margin-left: 0px;
background: url(UM4.png) no-repeat;
border: 1px;
}
#Teknik {
float: left;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 78px;
border: 1px;
}
#menu {
width: 250px;
padding: 0;
height: 77px;
float:right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
margin-right: 2px;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#menu a:hover {
text-decoration: underline;
}
#inner {
float: left;
margin: 5px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
h4{
margin: 0;
text-transform: uppercase;
letter-spacing: .15em;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
background: #183134 no-repeat left center;
}

#leftmenu ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
font-size:13px
}
#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:#000066 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background:#000066 no-repeat left center; color: #ffffff
}

#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(top.jpg);
background-repeat:no-repeat;
border:1px solid green;
}

#content {
float: left;
width: 330px;
height: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px 5px 5px 10px;
background-color:#FFFFFF;
border: 1px;
}
#right {
float:right;
width:200px;
height:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 5px 0px 5px 0px;
padding: 10px 5px 5px 15px;
background-color:#CCCCCC;
border:1px;
}
#search{
padding:30px 0 0 10px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#footer {
clear: both;
height: 50px;
margin: 0px 0px 0px 0px;
background-image:url(backgound2.jpg);
font:Arial, Helvetica, sans-serif;
border: 1px;
}

Kemudian Buat desain layout seperti berikut:
Desain Layout2.Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Desain Layout2</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="wrapper">
<div id="header">

<div id="menu">
<ul id="main">
<li><a href="index.html"> Home |</a></li>
<li><a href="#">Sitemap |</a></li>
<li><a href="#">RSS |</a></li>
<li><a href="contact.html">Contact |</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
</div>
</div>
<div id="logo">

</div>
<div id = "Teknik">

<h1 align="left">TEKNIK ELEKTRO</h1>

</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="Menu1.jpg"></h4>
</li>
<li><a href="Home.html">Home </a></li>
<li><a href="News & Media.html">News & Media</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Tips & Triks.html">Tips & Triks</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
</div>

<div id="top">

</div>
<div id="content"><marquee behavior="scroll">Welcome to " TEKNIK ELEKTRO"
</marquee>
<p> </p>
<b>HTML<br/></b>
<br/>
HTML (Hypertext Markup Language) merupakan sebuah bahasa markup,</br>
bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah</br>
bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks</br>
tersebut. HTML merupakan dokumen standar yang digunakan untuk</br>
mendesain halaman web.
</div>
<div id="right">
<p>Events:</p>
<ul>
<li><a href="Panjat Tiang.html">Lomba Panjat Tiang Listrik</a></li>
<li><a href="Tarik Kabel.html">Lomba Tarik Kabel</a></li>
<li><a href="Nyetrum.html">Lomba Nyetrum</a></li>
<li><a href="Nyolder.html">Lomba Nyolder</a></li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><h2 align="center">farqva@gmail.com</h2>
</div>
</div>
</div>
</body>
</html>

Akhirnya desain layout sederhana yang qt bwat selesai…selanjutnya qt tinggal memodifikasi pa yang ingin qt ubah sehingga menjadi lebih menarik lagi..
Terima ksih telah membaca artikel ini semoga bermanfaat bagi semua…..

Desain Layout dengan CSS 1

Kali ini kita akan membuat sebuah layout seperti gambar di samping dengan menggunkan css. Apa itu css?????
ehm gampang…:D
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.

Untuk membuat desain layout web dengan css langkah pertama yaitu mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
berikut dan simpan dengan nama mystyle.css
Definisikan style seperti berikut dan simpan dengan nama mystyle.css.

Mystyle1.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}

#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}

#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}

Buat desain layout seperti berikut:

Desain Layout1.Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>
<div id = "wrapper">
<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>

<div id="footer">
Footer
</div>
</div>
</body>
</html>

Sekian dulu y semoga bermanfaat…Qt sambung Lg pada Desain layout 2 yang pastinya lebih kompleks…;D

Minggu, 21 Februari 2010

Frame

Frame memungkinkan kita untuk menampilkan lebih dari satu halaman
dokumen dalam satu waktu. Tidak seperti di tabel, tiap-tiap frame
mencerminkan halaman yang independen.
Untuk menciptakan frame, kita terlebih dahulu menciptakan tipe baru yang
disebut frameset.

Penjelasan lebih detail mengenai penggunaan frame dapat
dilihat pada kode berikut:

Sabtu, 20 Februari 2010

Desain table

Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam
bentuk baris dan kolom. Perpotongan baris dan kolom di dalam tabel disebut
sebagai sel.
Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan
data di dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data
tabular saja, namun juga mengizinkan kita melakukan pemformatan.
Terdapat 3 tag dasar dalam pembuatan table, yaitu:
Tag atau table heading yang berfungsi mendefinisikan header.
Tag atau table row yang berfungsi mendefinisikan baris.
Tag atau table data yang berfungsi mendefinisikan sel.

Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam
setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu
melakukan penggabungan (merge) sel.
Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar
baris (rowspan) atau kolom (colspan).
Contoh pembuatan desain web dengan memanfaatkan tabel dapat dilihat kodenya dibawah ini

Senin, 08 Februari 2010

metode penelitian

Penelitian ini adalah penelitian kuantitatif dalam bentuk penelitian survai. Pengumpulan data dengan tes, angket dan dokumen, analisis data yang digunakan adalah analisis statistik. Penelitian ini menggunakan pendekatan deskriptif korelasional. Setiap variable bebas (X) dikorelasikan dengan variabel terikat (Y), kemudian secara bersama-sama variabel bebas dikorelasikan dengan variabel terikat. Variabel penelitian ini dapat dilihat pada Tabel 3.1.

Penelitian ini menguji hubungan antara bakat mekanik, motivasi belajar, persepsi siswa tentang keterampilan mengajar guru dengan prestasi belajar service engine siswa SMK Negeri 1 Sedan Rembang Program Keahlian Mekanik Otomotif. Penelitian korelasi bertujuan untuk menemukan ada tidaknya hubungan dan apabila ada berapa eratnya hubungan tersebut serta berarti atau tidak hubungan itu (Arikunto, 2007:270).

Minggu, 10 Mei 2009

Program Sorting

/* Nama : fatkhur RochmaN
* NIM : 208533420031
* M.K. : AlgoritMa dan Struktur Data
* Praktek : (A) Membuat Program Pengurutan (Sort) dan Pencarian (Searching)
* No. Nama Buah
* -------------------------------
* 1. mangga
* 2. anggur
* 3. jeruk
* 4. salak
* 5. dukuh
* 6. apel
* 7. manggis
* 8. kiwi
* 9. nangka
* 10. belimbing
********************* ------------------------------- *************************/

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.IOException;

public class Pengurutan
{
private static int ukuranVector;
public static String Arr [] = new String [5];

public static void main(String[] args)
{
System.out.print("Berapa Data yang Anda mau masukkan? ");
ukuranVector = inputData();
InsertArray();
BubbleSort();
Search();
}
private static int inputData() {
BufferedReader bfr = new BufferedReader(
new InputStreamReader(System.in));
String angkaInput = null;
try {
angkaInput = bfr.readLine();
} catch (IOException e) {
e.printStackTrace();
}
int Data = Integer.valueOf(angkaInput).intValue();
return Data;
}

public static String DataString()
{
BufferedReader bfr = new BufferedReader(new InputStreamReader(System.in));
String StringInput = null;

try {StringInput = bfr.readLine();}
catch (IOException e)
{ e.printStackTrace(); }
return StringInput;
}
public static void InsertArray()
{
for(int x = 0; x
{
System.out.print("Masukkan data Array ke "+x+" : ");
Arr[x] = DataString();
}
}

public static void BubbleSort()
{
System.out.println("*=============================================*");
System.out.println("* data terurut dengan Metoda BUBBLE SORT *");
System.out.println("*=============================================*");
for (int y=0; y < Arr.length; y++)
{
for (int x = y + 1; x < Arr.length; x++)
{
if (Arr[x].compareTo(Arr[y]) < 0)
{
String t = Arr[y];
Arr[y] = Arr[x];
Arr[x] = t;
}
}

System.out.println("Data ke "+y+" : "+Arr[y]);
}
}

private static void Search()
{
System.out.print("Masukkan data yang Anda cari : ");
String cari = DataString();

for (int x= 0; x
{
if (Arr[x].equals(cari))
{
System.out.println();
System.out.println("Data "+cari+" ada dalam Index ke "+x);
}
}
}
}

Kamis, 07 Mei 2009

Sistem Operasi

SISTEM OPERASI

Pendahuluan

Sistem Operasi didefinisikan sebagai sebuah program yang mengatur perangkat keras komputer, dengan menyediakan landasan untuk aplikasi yang berada diatasnya, serta bertindak sebagai penghubung antara para pengguna dengan perangkat keras. Sistem Operasi bertugas untuk mengendalikan (kontrol) serta mengkoordinasikan pengunaan perangkat keras untuk berbagai program aplikasi untuk bermacam-macam pengguna. Dengan demikian, sebuah Sistem Operasi bukan merupakan bagian dari perangkat keras komputer, dan juga bukan merupakan bagian dari perangkat lunak aplikasi komputer, apalagi tentunya bukan merupakan bagian dari para pengguna komputer.

Pengertian dari Sistem Operasi dapat dilihat dari berbagai sudut pandang. Dari sudut pandang pengguna, Sistem Operasi merupakan sebagai alat untuk mempermudah penggunaan komputer. Dalam hal ini Sistem Operasi seharusnya dirancang dengan mengutamakan kemudahan penggunaan, dibandingkan mengutamakan kinerja ataupun utilisasi sumber-daya. Sebaliknya dalam lingkungan berpengguna-banyak (multi-user), Sistem Operasi dapat dipandang sebagai alat untuk memaksimalkan penggunaan sumber-daya komputer. Akan tetapi pada sejumlah komputer, sudut pandang pengguna dapat dikatakan hanya sedikit atau tidak ada sama sekali. Misalnya embedded computer pada peralatan rumah tangga seperti mesin cuci dan sebagainya mungkin saja memiliki lampu indikator untuk menunjukkan keadaan sekarang, tetapi Sistem Operasi ini dirancang untuk bekerja tanpa campur tangan pengguna.

Dari sudut pandang sistem, Sistem Operasi dapat dianggap sebagai alat yang menempatkan sumber-daya secara efisien (Resource Allocator). Sistem Operasi ialah manager bagi sumber-daya, yang menangani konflik permintaan sumber-daya secara efisien. Sistem Operasi juga mengatur eksekusi aplikasi dan operasi dari alat M/K (Masukan/Keluaran). Fungsi ini dikenal juga sebagai program pengendali (Control Program). Lebih lagi, Sistem Operasi merupakan suatu bagian program yang berjalan setiap saat yang dikenal dengan istilah kernel.

Dari sudut pandang tujuan Sistem Operasi, Sistem Operasi dapat dipandang sebagai alat yang membuat komputer lebih nyaman digunakan (convenient) untuk menjalankan aplikasi dan menyelesaikan masalah pengguna. Tujuan lain Sistem Operasi ialah membuat penggunaan sumber-daya komputer menjadi efisien...