Kamis, 31 Mei 2018

WEB DESIGN PERTEMUAN 2 Membuat Web dengan Navigasi Sederhana

Membuat Web dengan Navigasi Sederhana

Untuk membuat web ini kita memerlukan 2 File HTML serta 2 FIle gambar (optional sebagai contoh)
1. Link 1 (sebagai halaman pembuka)* File Running
2. Link 2 (sebagai halaman gambar)






1. Link 1



<html>
<head>
<meta name="Author" content="Awan">
<title> Pertemuan 2 </title>
<link rel="shortcut icon" href="gelas.ico"> <!--Menampilkan Favicon-->

</head>
<body bgcolor="red"> <!--Memberikan warna Background -->
<font face="Arial" color="#fff">
<nav align="center"> <!--Membuat Navigator Bar-->
   <a href="link1.html"> Home </a> |
<a href="link2.html"> Map Picture on Tab </a> |
<a href="link2.html" target="blank"> Map Picture on New Tab </a> |<!--Link New Tab -->
<a href="mailto:dwiprasetiyo859@gmail.com"> Contact Us </a> <!-- Mengirimkan Email -->
</nav>

<p>
<h1 align="center"> NAVIGATION BAR </h1>
<h3 align="center"> pertemuan 2 </h3>
</p>
</font>
</body>
</html>

2. Link 2


<html>
<head>
<meta name="Author" content="Pras">
<title> Pertemuan 2 </title>
<link rel="shortcut icon" href="gelas.ico"> <!--Menampilkan Favicon-->

</head>
<body bgcolor="orange"> <!--Memberikan warna Background -->
<font face="Arial" color="#fff">
<nav align="center"> <!--Membuat Navigator Bar-->
   <a href="link1.html"> Home </a> |
<a href="link2.html"> Map Picture on Tab </a> |
<a href="link2.html" target="blank"> Map Picture on New Tab </a> |<!--Link New Tab -->
<a href="mailto:dwiprasetiyo859@gmail.com"> Contact Us </a> <!-- Mengirimkan Email -->
</nav>

<p>
<h1 align="center"> IMAGE MAPS </h1>
<h3 align="center"> pertemuan 2 </h3>
</p>

<p>
<center>
<a href="link1.html"> <img src="bii.png" height="50%"> </a> <!-- Link pada Gambar-->
&nbsp
<img src="gelas.jpg" height="50%" usemap="#peta"> <!-- Link di bagian tertentu -->
<map name="peta">
<area shape="rect" coords="30,30,70,85" href="link1.html" />
<area shape="circle" coords="350,150,30" href="link1.html" />
</p>
</font>
</body>
</html>
Read More ->>

WEB DESIGN PERTEMUAN 3 Cara Membuat Table dengan HTML

Cara Membuat Table dengan HTML




Simpan dengan nama Table.html 

<html>
<head>
<title> Pertemuan 3 </title>
</head>

<body>
<h1> Pertemuan 3
<br> TABEL </h1>

<p> Tabel 1 = Align & Valign </p>
<table border="1" height="200px" width="500px">
<tr>
<td align="center"> A1 </td>
<td align="right"> A2 </td>
</tr>

<tr>
<td valign="top"> B1 </td>
<td valign="bottom"> B2 </td>
</tr>
</table>

<p> Tabel 2 = Colspan & Rowspan </p>
<table border="1" height="200px" width="500px">
<tr>
<td  align="center" bgcolor="blue"> Biru </td>
<td align="center" bgcolor="red"> Merah </td>
</tr>

<tr>
<td colspan="2" align="center" bgcolor="yellow"> Kuning </td>
</tr>

<tr>
<td align="center" bgcolor="green"> Hijau </td>
<td rowspan="2" align="center" bgcolor="hotpink"> Pink </td>
</tr>
<td align="center" bgcolor="black"><font color="white"> Hitam </font></td>
<tr>

</tr>
</table>
</body>
</html>
Read More ->>

Membuat Web menggunakan CSS, Section, dan Script

Membuat Web menggunakan CSS, Section, dan Script

Untuk membuat web ini kita memerlukan file CSS yang harus di buat terlebih dahulu, Serta file image dan video untuk melengkapi web yang kita buat. Langsung saja kita membuat file CSS terlebih dahulu .
* kalau ingin meminta file video/image langsung tulis di kolom komentar yaaaa


1. CSS (simpan dengan extensi CSS)



header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color: #666666;
background-color: #000491;
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
background-color: #ffffff;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
border: 1px grey;}
header {
height: 250px;
background-image: url(header.png);}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: #ffffff;
background-color: #000;
height: 50px;}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.4;}

nav li {
float: left;
border-right:1px solid #bbb;}

nav li:last-child {
border-right: none;}

nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}

nav li a:hover:not(.active) {
background-color: #111;}

section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top: 40px;}

video {
width: 648px;
height: auto;
padding: 5px;}

figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #990c2b;
background-color: #efefef;}
a {
color: #000491;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: #000491;}
aside h2 {
padding: 30px 0px 10px 0px;
color: #000491;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
text-align: center;}

2. FIle Index HTML (file running)


<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<title> PLJ </title>
<script>
var txt="Politeknik LP3I jakarta ";
var kecepatan=100;
var segarkan =null;
function bergerak() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

<link href="images/style.css" style type="text/css" rel="stylesheet">
</head>

<body>
<div class="wrapper">
<header>
</header>

<nav>
<ul>
<li><a href="" class="current"> Beranda </a></li>
<li><a href=""> Visi & Misi </a></li>
<li><a href=""> Program Studi </a></li>
<li><a href=""> Konsentrasi </a></li>
<li><a href=""> Kontak </a></li>
</ul>
</nav>

<section class="courses">
<h2></h2>
<article>
<video controls>
<source src="images/testimoni.mp4" type="video/mp4">
</video>
<figure>
<img src="images/gedung.jpg" width="290" alt="foto" />

<figcaption>Gedung PLJ Kampus Bekasi </figcaption>
</figure>

<h2>Politeknik LP3I Jakarta</h2>
<h3> kampus Bekasi</h3>

<p>Alamat :  Jl. Jendral Sudirman A1-A1 Grandmall Bekasi</p>
</article>
</section>
<aside>
<section class="Populear-recipes">
<h2>Kampus Lainnya : </h2>
<a href="">PLJ Kampus Kramat</a>
<a href="">PLJ Kampus Jakarta utara</a>
<a href="">PLJ Kampus Sudirman</a>
<a href="">PLJ Kampus Cikarang</a>
</section>
<section>
<h2> Kontak </h2>
<p> Telp. (021) 88954722 <br>
Email.Bekasi@plj.ac.id</p>
</section>
</aside>
<footer>
&copy; 2018 Politeknik LP3I Jakarta Kampus Bekas
</footer>
</div>
</body>
</html>
Read More ->>

PERTEMUAN 10 Membuat Kalkulator Sederhana menggunakan HTML

PERTEMUAN 10 Membuat Kalkulator Sederhana menggunakan HTML

Dalam membuatnya kita perlu script yang berisi function serta beberapa varable didalamnya, Langsung aja contek kodingannya guysss.....





*simpan dalam bentuk hml yaa




<!DOCTYPE html>
<html>
<head>
<script>
// membuat fungsi dasar
function dasar() {
alert("Hello World");
}
//membuat fungsi dengan variabel
var variabel = function() {
alert("Hello world");
}
// membuat fungsi dengan tanda panah
var tandapanah = () => alert("Hello World");
// membuat fungsi dengan konstruktor
var kostruktor = new Function('alert("hello world")')

//kalkulator
function hitung() {
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil = myForm.opt.value;


if (pil == "tambah") {
var z= x + y;

} else if (pil == "kurang"){
var z = x - y;
} else if (pil == "kali") {
var z = x * y;
} else if (pil == "bagi") {
var z = x / y;
}
document.getElementById("hasil").innerHTML = z;
}
//bersihkan form
function bersihkan() {
document.form1.reset();
document.getElementById("hasil").innerHTML = "Hasil";
}
//hanya angka
function angkasaja(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;
return true;
}


</script>
</head>


<body>
<script>

document.write ("hello sedang Belajar ");
document.write ("Pertemuan 10 Design Web");
</script>
<br><br>
<input type="button" value="JSdasar" onclick="dasar()"/>
<br><br>
<input type="button" value="JSvariabel" onclick="variabel()"/>
<br><br>
<input type="button" value="JStandapanah" onclick="tandapanah()"/>
<br><br>
<input type="button" value="JSkostruktor" onclick="kostruktor()"/>
<br><hr>
<h1> KALKULATOR </h1>
<form name="form1" action="#">
<p>Bil 1 <input type="text" name="x" onkeypress="return angkasaja(event)" maxlength="3"> </p>
<p>Bil 2 <input type="text" name="y" onkeypress="return angkasaja(event)"> </p>
<h1 id="hasil"> HASIL <h1>
<p> Operator
<select name="opt"></p>
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
<input type="button" value="=" onclick="hitung()">
<input type="button" value="bersihkan" onClick="bersihkan()">
</form>

</body>
</html>
Read More ->>

Membuat Form Pendaftaran Mahasiswa dengan HTML menggunakan Bootstrap, CSS, dan JavaScript

Membuat Form Pendaftaran Mahasiswa dengan HTML menggunakan Bootstrap, CSS, dan JavaScript

Oke di sini ane mau share nih tutorialnya , pertama kita butuh file bootsrap, css, sama javascriptnya gan, tulis di kolom komentar kalau agan agan kepingin ya, oh iya jangan lupa buka file xamp di data C buat mengaktifkan bootsrap sama js nya gan,

Di Sini kita butuh 4 file HTML gan,
1. Index (File Running)
2. Home (Tampilan Depannye)
3. Pendaftaran (untuk bagian isi pendaftarannya)
4. Harga (tabel biaya pendaftarannya)





1. Index


<!DOCTYPE html>
<html>
<head>
<script>
function Login()
{
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
username=username.toLowerCase(); //tulisan bisa capslock bisa tidak

if (username=="admin" && password=="admin")
{
alert ("Selamat anda berhasil login")
window.location.href="pendaftaran.html";
}
else
{
alert ("Username atau Password salah")
}
}
</script>
</head>

<body style="background-color:#00253d;color:white;">
<form name="login">
<table width="255" cellpadding="4" align="center">
<tr height="300"> </tr>
<tr> <td> username </td>
<td> <input type="text" name="username"> </td> </tr>
<tr> <td> password </td>
<td> <input type="password" name="password"> </td> </tr>
<tr> <td colspan="2" align="right">
<input type="button" value="Login" onClick="Login()"> </td> </tr>
</table>
</form>
</body>
</html>

2. Home


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
 <h1>Slamat datang di LP3i</h1>
 <br>

 <form action="pendaftaran.html">
<button class="btn btn-warning" onclick=""> Pendaftaran </button>
</form>
<form action="harga.html">
<button class="btn btn-warning" onclick=""> Daftar Harga</button>
</form>
</body>
</html>

3. Pendaftaran


<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>
<script>
function hitungumur() {
var myForm = document.konten;
var x = document.getElementById("tahun").value

var y = 2018 - x;
document.getElementById("umur").value = y;
}
function angkasaja(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))

return false;
return true;
}
</script>
</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<hr>
<div class="col-md-6">
<form name="konten">
<div>
<h1> Form Pendaftaran Mahasiswa </h1>
<table class="table">
<tr>
<td> NAMA </td>
<td colspan="3"> <input type="text" class="form-control" placeholder="Nama Lengkap" name="nama"> </td>
</tr>
<tr>
<td> TEMPAT LAHIR </td>
<td colspan="3"> <input type="text" class="form-control" placeholder="Tempat Lahir" name="tempat"> </td>
</tr>
<tr>
<td> TGL LAHIR </td>
<td> <select id="tanggal" class="form-control"> <option> --Tanggal-- </option>
<script>
var tgl = 1;
while (tgl <= 31) { document.write("<option>" + tgl + "</option>");
tgl=tgl+1;
}
</script>
</select>
</td>
<td>
<select id="bulan" class="form-control"> <option> --Bulan-- </option>
<script>
var bulan=["Januari","Febuari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
for(i=0;i<=11;i++) {
document.write("<option>" + bulan[i] + "</option>");
}
</script>
</select>
</td>
<td>
<select id="tahun" onchange="hitungumur()" class="form-control"> <option> --Tahun-- </option>
<script>
var tahun=1945;
while(tahun<=2018) { document.write("<option>" + tahun + "</option>");
tahun=tahun+1;
}
</script>
</select>
</td>
</tr>
<tr>
<td> UMUR </td>
<td colspan="3"> <input type="text" id="umur" class="form-control"> </td>
</tr>
<tr>
<td> KONSENTRASI </td>
<td colspan="3"> <select id="kons" class="form-control"> <option> --Konsentrasi-- </option>
<script>
var kons = ["Teknik Informatika","Komputerisasi akuntansi","Hubungan Masyarakat",
"Bisnis Administrasi","Administrasi Perkantoran"];
for (i=0;i<= 4;i++) {
document.write("<option>" + kons[i] + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>No Telpon</td>
<td colspan="3"> <input type="text" class="from-control"
placeholder="no telp" name="ntelp" onkeypress="return angkasaja(event)" maxlength="13"> </td>
</tr>
</table>
<br>
<button class="btn btn-danger" onclick=""> clear </button>
</div>
</form>
</div>
</body>
</html>

4. Harga


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/bootstrap.css"> </script>
<title> PMB </title>

</head>
<body>
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> PMB UBS </a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html"> Home </a></li>
<li class="active"><a href="pendaftaran.html"> Pendaftaran </a></li>
<li> <a href="harga.html"> Tabel Harga </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-log-in">
</span> Logout </a></li>
</ul>
</div>
</nav>
<div class="col-md-12">
<h1> Tabel Harga </h1>
<table class="table table-hover">
<th> Konsentrasi </th>
<th> Biaya /Semester (1-4)</th>
<th> Biaya /Semester (5-6)</th>
<th> Total Biaya</th>
<script>
var kons=["Teknik Informatika","Komputerisasi akuntansi","Hubungan Masyarakat",
"Bisnis Administrasi","Administrasi Perkantoran"];
var biaya1=[8500000,7500000,7350000,8000000,8250000];
var biaya2=[7500000,6500000,6350000,7000000,7250000];

for (i=0;i<= 4;) {
var hasil=[(biaya1[i]*4)+(biaya2[i]*2)];
document.write("<tr><td>" + kons[i] + "</td><td>" + biaya1[i]+ " </td><td>"
+ biaya2[i] + "</td><td>" + hasil + "</td></tr>")
i++;
}
</script>
</table>

</html>
Read More ->>

Senin, 19 Februari 2018

Belajar Dasar-Dasar HTML

Belajar HTML - Konsep Dasar HTML

HTML adalah kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web. Si HTML inilah yang menyusun sebuah halaman web menjadi sebagaimana yang kita lihat melalui browser (penjelajah internet). So, belajar HTML dan mengerti bagaimana cara HTML bekerja akan sangat penting jika kamu ingin terjun ke dunia web development.

Sebenernya ketika bekerja dalam menampilkan dan menyusun sebuah halaman web si HTML ini nggak sendiri, dia juga dibantu oleh teman-temannya yang lain yaitu si CSS dan si JavaScript. Si HTML sendiri bertugas menyusun kerangka halaman web, si CSS yang akan merapihkan dan memperindah tampilan halaman web, sedangkan si JavaScript-lah yang bertugas membuat halaman web menjadi lebih interaktif. Pada kesempatan yang lain kita akan coba membahas CSS dan JavaScript, tapi untuk kali ini marilah kita buat si HTML menjadi tokoh utama :D
Perlu diperhatikan, HTML bukanlah sebuah bahasa pemrograman. HTML merupakan bahasa markup yang berisi perintah-perintah dengan format tertentu yang terstruktur untuk menampilkan tampilan tertentu. Baik, mari kita buat menjadi lebih sederhana. Misalnya di halaman web kita sering melihat ada teks yang ditulis tebal seperti berikut:
tulisan tebal
Nah untuk bisa membuat sebuah tulisan tebal seperti di atas, maka kita bisa membuatnya dengan HTML dengan kode berikut:
<strong>tulisan tebal</strong>
Sederhananya adalah, jika kita menuliskan kode seperti di atas, maka nanti si browser akan menampilkan tulisan tebal. Jadi HTML adalah format penulisan kode tertetu yang mampu dimengerti oleh browser untuk menampilkan tampilan tertentu.

Oke sekarang saya paham, selanjutnya dimana saya bisa menulis kode HTML dan bagaimana caranya?

Benar, untuk dapat membuat sebuah halaman web dan dapat ditampilkan oleh browser sebagaimana yang kita inginkan tentu dong ada aturan dan formatnya. Nggak mungkin kita tulis kode-kode HTML di Photoshop kemudian kita jalankan melalui browser. Ya nggak akan jalanlah. Untuk menulis kode HTML kita bisa menggunakan software code editor seperti Notepad, Notepad++, Sublime Text, Atom, atau yang lainnya. Dan agar kode kita mampu dibaca oleh browser dengan baik kita harus menyimpannya dalam format HTML yaitu .htm atau .html.
Berikut ini contoh sederhana penulisan kode HTML:
<!DOCTYPE HTML>
<html>
 <head>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>

  <p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>
 </body>
</html>
Kita bisa menuliskan kode tersebut pada code editor seperti Notepad, Sublime Text atau yang lainnya. Adapun code editor yang saya gunakan disini adalah Sublime Text 2. Sekali lagi kamu bebas menggunakan code editor yang lain, itu hanya masalah pilihan saja.
Kemudian kita simpan dengan format .htm atau .html, misalnya disini untuk contoh di atas kita simpan dengan nama index.html. Maka berikut ini tampilannya jika dibuka melalui browser:
Pada contoh kode HTML di atas kita bisa melihat bahwa untuk memulai menulis kode HTML maka kita harus memulainya dengan kode <html> dan ditutup dengan </html>. Adapun mengenai kode <!DOCTYPE HTML> itu berfungsi sebagai pengenal HTML5 (di lain kesempatan insya Allah akan kita bahas), sementara ikuti saja seperti demikian.
Kode-kode yang ada di antara <head> dan </head> berfungsi untuk memberikan informasi tambahan kepada browser, untuk contoh di atas misalnya ada <title> yang artinya memberikan informasi ke browser bahwa halaman web yang dibuat ini memiliki judul Selamat Datang HTML.
Apa yang ingin kita tampilkan pada browser terletak di antara kode <body> dan </body>. Yups, itulah inti dari kode kita. Disitulah kode-kode yang akan menyusun halaman web ditulis.
Sebagai penutup untuk panduan belajar HTML dasar ini saya ingin memberitahukan bahwa ada dua hal lainnya terkait HTML yang harus dipahami untuk memulai belajar HTML, yaitu TAG dan Atribut.

TAG

Sebenernya dari awal kita membahas HTML kita sudah berbicara tentang TAG, hanya saja belum saya jelaskan detailnya. TAG sederhananya adalah kode-kode tertentu yang menjadi pengenal bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser dengan tampilan tertentu. Misalnya tadi, untuk membuat sebuah tulisan tebal, maka kita bisa menggunakan TAG STRONG, atau TAG B. Untuk membuat paragraf kita bisa menggunakan TAG P. Dan masih banyak TAG HTML lainnya, tentunya dengan fungsi yang berbeda-beda. Dikesempatan lain akan kita pelajari lebih jauh. Untuk menuliskan TAG HTML kita bisa menggunakan huruf kecil ataupun kapital, bebas-bebas saja, browser sudah mengenalinya kok.

ATRIBUT

Atribut adalah karakteristik tambahan pada suatu TAG. Misalnya seperti yang sebelumnya sudah saya informasikan bahwa untuk membuat paragraf kita bisa menggunakan TAG P. Secara default paragraf yang akan ditampilkan oleh TAG Padalah rata kiri. Tapi jika kita ingin membuatnya rata tengah, kita bisa menambahkan atribut ALIGN dengan value CENTER ke dalam TAG P tersebut. Misalnya seperti berikut:
<p align="center">Untuk menampilkan tulisan rata tengah</p>
Setiap TAG memiliki atributnya masing-masing tergantung bagaimana sifat dari TAG tersebut. Dan sama seperti halnya dengan TAG, kita juga bebas menggunakan huruf kecil atau kapital dalam menuliskan atribut di dalam HTML.
Demikianlah sedikit panduan belajar HTML dasar, semoga dapat bermanfaat bagi temen-temen yang sedang dalam proses belajar untuk menjadi web developer. Tenang saja, belajar HTML itu nggak susah kok, asalkan dicoba untuk dipraktekan dan terus berlatih pasti akan mudah untuk dikuasai. Ini adalah tutorial pertama pada seri belajar html yang saya tulis, kedepannya saya akan coba melanjutkan pembahasan belajar html ini dengan tutorial-tutorial lainnya. Untuk tutorial selanjutnya kita akan coba belajar tentang konsep elemen di HTML.
Dan buat kamu yang ingin belajar secara interactive tentang HTML, kamu juga bisa belajar melalui Interactive Coding HTML, kami sudah menyusun materinya sedemikian rupa agar mudah dipahami. Sekali lagi selamat belajar.
Enjoy coding!
Read More ->>

Rabu, 22 April 2015

Selamat Datang Di Blog Imam Firdaus


Pengertian Sistem Komputer

pengertian sistem komputer
sistem komputer
Pengertian Sistem komputer adalah suatu jaringan elektronik yang terdiri dari Software dan Hardware yang melakukan tugas tertentu (menerima input, memproses input, menyimpan perintah-perintah, dan menyediakan output dalam bentuk informasi). Selain itu dapat pula diartikan sebagai elemen-elemen yang terkait untuk menjalankan suatu aktivitas dengan menggunakan komputer. Jika Anda tertarik untuk memperdalam masalah tersebut, maka jurusan yang sangat cocok untuk Anda adalah jurusan sistem komputer.
Komputer dapat membantu manusia dalam pekerjaan sehari-harinya, pekerjaan itu seperti: pengolahan kata, pengolahan angka, dan pengolahan gambar.
Elemen sistem komputer terdiri dari manusianya (brainware), perangkat lunak (software), set instruksi (instruction set), dan perangkat keras (hardware). Dengan demikian komponen tersebut merupakan elemen yang terlibat dalam suatu sistem komputer. Tentu saja hardware tidak berarti apa-apa jika tidak ada salah satu dari dua lainnya (software dan brainware).
Nah bagaimana apakah sekarang sudah mulai memahami apa arti dari sistem komputer? kalo masih belum, yuk Kita jabarkan lagi pengertian dan bagian sistem komputer secara bertahap.

Komponen Sistem Komputer

Komponen sistem komputer terdiri dari central processing unit (CPU), module memory, slot tambahan (expansion slot) dan sirkuit elektronik seperti kartu yang menempati expansion slot dimana semua perangkat tersebut terpasang di dalam papan utama (main board) bersama dengan disk drive, kipas dan power supply. Semua perangkat di luar sistem unit seperti monitor, keyboard, mouse dan sebagainya secara langsung atau tidak langsung berhubungan dengan unit sistem membantu kinerja unit sistem. Selain membantu kinerja unit sistem, komponen ini juga bisa membantu sistem operasi untuk berjalan secara normal dan stabil.

Bagian-bagian dari Unit Sistem

1. Bagian Depan Unit Sistem
Bagian depan dari unit sistem biasanya ditempati oleh tempat drive yang dapat dipergunakan dari depan, internal driver seperti hard disk drive yang terinstall secara internal di dalam slot tempat kosong dan sebagainya. Biasanya unit sistem memiliki tipe dan style yang beragam tergantung dari kebutuhan penggunaan hardware yang akan menempatinya. Pengertian unit sistem secara umum disamakan juga dengan “casing” komputer walaupun sebenarnya tidak benar.
2. Motherboard
Motherboard adalah sebuah papan integrasi dimana terdapat kumpulan chip yang mengatur segala kegiatan dalam PC dan terdapat satu chip utama yang dinamakan microprocessor (biasa disebut processor saja). Motherboard dibagi menjadi lima daerah fungsional yakni sub sistem processor dan chip pendukungnya, sub sistem ROM, sub sistem RAM, adaptor terintegrasi I/O (Input/Output) dan I/O yang meliputi slot ekspansi. Chip-chip tersebut disusun secara vertikal dengan pin 1 terletak di kiri atas. Masing-masing komponen ditandai dengan kode identifikasi dari printed circuit board dan memberi nomor lokasi chip dalam penambahan order dari kiri ke kanan serta dari atas ke bawah sehingga memungkinkan secara cepat dapat menempatkan IC pada  board. Generasi dari motherboard dibedakan berdasarkan atas kecepatan transfer data dalam satuan bit (Binary Digit). Generasi pertama memiliki kecepatan 8 bit kemudian muncul generasi 16 bit serta 32 bit.
3. BIOS
BIOS merupakan kepanjangan dari Basic Input Output System dan bentuk aplikasi paling rendah di dalam komputer untuk mengintegrasikan kinerja antar hardware dan sistem operasinya. Chip BIOS mudah dikenali, umumnya berada di permukaan chip BIOS diberi stiker yang menyatakan merk BIOS seperti AMI atau AWARD. Untuk komputer lama yang belum menggunakan bus PCI sehingga BIOS dipasang permanen pada motherboard. Saat ini sebagian besar motherboard sudah menggunakan Flash BIOS dimana isi dari BIOS dapat diganti. BIOS jenis ini merupakan ROM dengan tipe EEPROM (Electrically Erasable Read Only Memory). Beberapa chip ROM yang bukan EEPROM menghapusnya bukan dengan listrik tetapi dengan sinar UV sehingga chip ini diberi satu jendela kecil pada permukaan chip. Stiker penutup jendela digunakan untuk melindungi chip ini dari sengatan sinar matahari. Untuk melepas BIOS harus hati-hati agar pin tidak ada yang bengkok atau patah. Gunakan obeng kecil untuk membantu mengangkatnya.
4. Processor
Processor Merupakan bagian utama yang menjadi otak dari PC. Pada bagian ini semua kegiatan dalam PC dikontrol sehingga disebut sebagai Central Processing Unit (CPU). Processor terletak pada motherboard dengan ciri satu chip yang paling besar dan umumnya selalu diberi fan kecil yang berfungsi sebagai pendingin. Generasi processor antara lain : 286, 386 (SX, DX), 486 (SX, DX, DX2, DX4), Pentium (60, 75, 90, 100, 120, 133, 166, 180, 200, 233) biasa disebut Super AT, Pentium Pro untuk Server jaringan (150,180,200), Pentium Multi Media Extended (133, 166, 200, 233), Power AT yaitu generasi Pentium II MMX (Celeron,300, 333, 350, 400, 450), Pentium III (400, 450, 500, 600) dan generasi terbaru lainnya. Angka-angka yang mengikuti jenis processor menunjukkan kecepatan transfer data dalam satuan MHz atau GHz. 
Pada suatu keadaan tertentu dapat dilakukan peningkatan atau penaikan kecepatan dari processor yang dinamakan Up Grade. Untuk melakukan Up Grade harus diketahui jumper-jumper yang ada pada motherboard. Dalam Up Grade pada dasarnya adalah menaikkan kinerja processor dimana "memaksa" processor untuk bekerja sekian kali lebih cepat dari kemampuannya sehingga efek dari up grade adalah processor lebih cepat panas dan harus menambah fan yang lebih kuat atau pendingin yang lebih besar. Perlu diketahui pula bahwa dalam up grade usahakan jangan sampai Over clock yaitu suatu keadaan dimana processor bekerja melebihi kecepatan setingkat di atasnya. Misalnya processor Pentium 100 di up grade menjadi Pentium 180. Karena efek yang ditimbulkan dari up grade adalah pemanasan berlebih pada processor maka disarankan untuk tidak melakukan up grade dengan cara ini jika ingin processor memiliki umur panjang.
5. Memory
Merupakan bagian penting pada setiap sistem PC. Fungsi memory adalah sebagai terminal data dimana data yang dikirim dari dan ke processor terlebih dahulu disimpan dalam memory. Ada dua jenis memory yaitu ROM (Read Only Memory) dan RAM (Random Access Memory). ROM merupakan chip yang hanya dapat dibaca dan tak dapat ditulis. Data-data dalam ROM adalah data yang pre-programmed (telah diprogram oleh vendor) sebelum dipasang. ROM ini biasanya digunakan dalam BIOS komputer. 
Sedangkan RAM merupakan chip yang dapat diakses secara acak (random) dan tidak tergantung dari urutan alamat lokasi memory. Sifat terpenting dari RAM adalah chip ini bisa ditulis atau dibaca setiap saat sesuai keinginan pemakai selama komputer beroperasi. RAM sangat sesuai untuk menyimpan data sementara. Bila komputer dimatikan maka informasi atau data dalam RAM akan terhapus. Jenis memory yang dijual di pasaran antara lain : SIMM (Single In line Memory Module) dan DIMM (Dual  In line Memory Module). SIMM bekerja dengan mengisi ruang kosong dalam memory secara berurutan  dari yang rendah ke yang tinggi. DIMM dapat mengisi ruang kosong dalam memory secara acak tanpa berurutan. Memory jenis SDRAM (Synchronous Dynamic RAM) atau DDR memiliki cara kerjanya SIMM mau pun DIMM sehingga memory ini lebih fleksibel digunakan.
Bagaimana kawan, apakah sudah paham perbedaan ROM dan RAM?
6. Cache Memory
Ada dua tipe bentuk chip cache memory yaitu cache memory yang terdiri dari beberapa chip atau IC pada soket khusus dengan besar 256 Kb dan untuk meng-upgrade menjadi 512 Kb ditambahkan chip yang terpasang pada slot khusus. Sedangkan yang kedua adalah cache memory yang terpasang pada 2 chip melekat pada motherboard dengan ukuran 512 Kb. Chip yang sering dipakai adalah merk Tech dan Winbond. Fungsi dari Cache memory adalah bertindak sebagai buffer dari memory (RAM) sehingga proses transfer data dapat berlangsung lebih cepat dimana tidak sampai terjadi antrian panjang data pada RAM.
7. Expansion Slot dan Expansion Card
Expansion slots adalah sockets yang dipergunakan untuk melakukan koneksi secara langsung ke dalam electrical bus dan dapat ditambahkan sebagai circuit board di dalam motherboard. Jenis Expansion Cards diantaranya adalah Video Cards, Sound Cards, Modem Cards, Network Interface Cards (NIC). Laptops and portable computer biasanya memiliki PC Cards sendiri, yaitu  credit-card yang tipis yang dipergunakan untuk menambahkan memory, disk drives dan sebagainya. Beberapa slot yang bisa dipergunakan untuk menghubungkan dengan perangkat tambahan diantaranya Peripheral Component Interconnect (PCI), Accelerated Graphics Port (AGP), Industry Standard Architecture (ISA), Universal Serial Bus (USB), Small Computer System Interface (SCSI) dan Integrated Drive Electronics (IDE)
8. Port
Port adalah soket yang dapat dipergunakan untuk menempelkan perangkat dengan konektornya untuk bisa berhubungan dengan motherboard dimana perangkat keras tersebut tergantung dari perubahan teknologi yang berkembang. Biasanya ports dapat ditemukan pada belakang dari sebuah unit sistem namun atau juga terdapat di depannya.
Sekian dulu Pengertian Sistem Komputer yang bisa Saya tulis, semoga bisa Anda jadikan referensi, jika Anda masih membutuhkan materi pengenalan komputer, Anda juga bisa membaca update sebelumnya pada blog ini. Semoga bermanfaat.
Read More ->>