Cherong's ritrovo: 2013

April 12, 2013

Desain Website Pada 000webhost

Seperti pada Postingan sebelumnya saya telah menulis tentang membuat website gratis sekarang saya ingin Memposting tentang mendesain website yang telah anda buat.

Jika anda sudah mempunyai alamat subdomain saya ucapkan selamat karna sedikit lagi anda akan memiliki sebuah domain yang dapat anda posting dengan tulisan anda.

Mendesain website pada 000webhost tidaklah sesulit yang anda bayangkan beberapa langka kecil yang harus anda lakukan ialah sebagai berikut.

Setelah anda berhasil login maka tampilan yang muncul akan seperti ini:

Klik Pada Go to CPanel kemudian Pilih

Baca selengkapnya »»

April 09, 2013

WebSite Gratis Di 000Webhosting

Untuk mendapatkan suatu website gratis tidak lepas dari penyedia website tersebut mungkin anda sudah mengetahui beberapa penyedia website gratis tersebut Namun di postingan ini saya ingin membahas tentang membuat website gratis pada 000webhost.com. Klick Icon di bawah untuk memulai

Daftar Untuk Menjadi Member terlebih dahulu (Gratis)

Baca selengkapnya »»

Kolom Scroll Pada Postingan

Tujuan membuat Kolom scroll pada postingan mungkin pada setiap blogger berbeda-beda ada yang ingin agar postingan terliat menarik, simple tampa banyak tulisan ataupun postingan terliat sesingkat mungkin.
Apapun itu Kolom scroll banyak membantu dalam memuat postingan antara lain mungkin memisahkan tulisan inti (Kutipan dsb.) dengan tulisan lain (pengantar).

Berikut adalah beberapa cara pembuatan Kolom Scroll yang mungkin membantu anda yang sering menulis blog.

Tulis terlebih dahulu Text yang belum ingin anda kolomkan pada bagian Compose jika anda ingin scroll kolom anda ada pada bagian tengah postingan.
(Misalnya Text pengantar)

Klik HTML yang ada pada sebelah Kiri Compose
Masukan Kode Berikut

<div style="background-color: white; border: 1px solid rgb(191, 189, 189);
height: 100px; overflow: scroll; padding: 5px; text-align: justify; width: 400px;">
Masukkan Tulisan atau teks sobat disini</div>

Bentuk yang akan muncul adalah seperti kolom berwarna kuning tetapi jika tulisannya lebih banyak maka kolom tersebut memiliki scroll yang dapat digeser kebawah dan keatas.
Ganti Tulisan Biru dengan text yang ingin anda Kolomkan
Anda dapat Mengatur Dimana text anda berada ditengah, kanan atau kiri dengan mengganti kode yang berhurufkan merah tersebut dengan center, left atau right.
Untuk Lebar Kolom Silakan Ganti pada Bagian Widtt sedangkan tinggi kolom dapat menggunakan height

Mungkin bagi anda yang sudah mengerti tentang pemrograman HTML anda tidak perlu mengikuti langka 1 ataupun 2 dan dapat lansung masuk melalui HTML kemudian lansung mengetik kode

Selain Cara Yang Diatas Anda Dapat Membuat Scroll dengan type yang lain seperti Ini

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 5400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">Masukkan Tulisan atau teks sobat disini
</div></span></span></span>

Selamat Mencoba

April 06, 2013

Menu Sederhana Pada HTML

Menu yang akan dibuat adalah menu untuk membuat sebuah web sederhana yang mengkin menampilkan berbagai item agar web terliat cukup menarik.

Bentuk yang akan tampil pada browser anda adalah seperti ini.Dan mungkin anda ingin membuat sebuah menu yang dapat roll down kebawah saat anda meletakan kursor anda pada salah satu menu tersebut

<!doctype html>

<head>

<style>

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding: 0; margin: 0;

}

body { font-size: 100%; font-weight: normal; background-color:#99FF66; font: 100% arial;

}

header, footer, section, article, nav { display:block;

}

#wrapper {position:relative; top:0; left:0;width:950px; margin:auto; text-align:center;

}

header {width:100%; height:80px; color:black; background-color:#FFCC00; padding-top:10px;

}

h1 { font-size:200%; font-weight:bold; margin-top:20px;

}

#main-content {width:950px; margin:50px auto 0 auto; background-color:white; color:black; text-align:center; font-weight:bold;

}

footer {margin:10px auto 0 auto; width:950px; font-weight:bold; text-align:center; background-color:#FFCC00; color:black; clear:both;

}

nav ul {position:absolute; top:100px; left:9%; width: 780px; list-style: none; height: 36px;

}

nav li { float: left; width: 120px;

}

nav a { color: #000; font-size: 100%; font-weight:bold; text-decoration: none; text-align:center; border: 1px solid #000; padding: 5px; display: block;

background-color: white;

}

nav a:hover { font-weight: bold; background-color:green; color:white;

}

.clear { clear:both;

}

</style>

</head>

<body>

<h1>This is the header</h1>

</header>

<nav>

<ul>

</nav>

<br>

<br>This content panel can contain several columns<br/><br>

</div>

<footer>A footer goes here

</footer>

</div>

</body>

</html>

Selamat Mencoba.

Maret 21, 2013

Membuat Table dan Form Sederhana Di HTML

Kali ini saya akan menunjukan cara membuat from dan table pada desain HTML serta cara menampilkan checkbox, radio button serta penimputan passsword.

<html>
<body>
    <form>
        silakan masukan data pribadi anda : <br />
        <table border="10"> 
        <tr>
        <td>
        nama :</td><td> <input type ="text" name ="txtnama"> </td></tr>
        <tr>
        <td>alamat :</td><td> <input type="text" name ="txtalamat" size="50"></td></tr>
        <tr>
        <td>masukan password anda :</td><td> <input type="password" maxlength="6"></td></tr>
        <tr>
        <td>
        hobby anda (boleh lebih dari satu) :</td><td>
        <input type ="checkbox" name="hobby" value ="baca">membaca
        <input type ="checkbox" name="hobby" value ="Oraga">olahraga
        <input type ="checkbox" name="hobby" value ="nonton">menonton
        </td></tr>
<tr>
        <td> jenis kelamin :</td>
<td><input type ="radio" name="jk" value ="pria"> laki-laki <input type ="radio" name="jk" value ="wanita"> perempuan</td>
</tr>
<tr>
<td>
<HR>
<input type ="submit" value="kirim">
<input type ="reset" value="hapus"></td></tr>
</table>
</form>
</body>
</html>

Keterangannya:

huruf yang saya warnai adalah cara menambahkan TextBox, Radio Button dan Checkbox kedalam sebuah tampilan HTML
Sedangkan untuk warna yang biru jika button kirim di tekan maka kita akan menerima pemberitahuan simpan Password saat melakukan Login sebuah Akun.

Maret 20, 2013

Element - Element HTML

Dalam Pemrograman HTML tidak lepas dari pilihan element agar tampilannya menarik maupun pemrograman kita dapat berjalan dengan semestinya.

Maka dari itu tidak ada salahnya untuk mengetahui beberapa elemen yang mungkin dapat membantu anda yang sedang melakukan pemrograman HTML.

Berikut adalah beberapa element yang mungkin dapat bermanfaat.

ELEMEN DASAR

<HTML></HTML> (terdapat pada awal dan akhir dari file HTML)

<TITLE></TITLE> (harus selalu terdapat pada mukadimah)

<HEAD></HEAD> (Mukadima/Header; keterangan umum, seperti judul dsb.)

<BODY></BODY> (isi dari halaman HTML)

ANCANGAN STRUKTURAL

<H?></H?> (Heading/Kepala )

<H? ALIGN=LEFT|CENTER|RIGHT></H?> (Penataan (Align) Kepala )

<DIV></DIV> (Bagian (Division))

<DIV ALIGN=LEFT|RIGHT|CENTER></DIV> (Penataan Bagian)

<BLOCKQUOTE></BLOCKQUOTE> (Kutipan Blok /Block Quote; tampilan dengan jeda
terhadap batas pinggir)

<EM></EM> ( Penekanan (Emphasis; umumnya huruf miring)

<STRONG></STRONG> ( Penguatan (Strong Emphasis; umumnya huruf tebal)

<CITE></CITE> (Kutipan singkat / Citation; umumnya huruf miring)

<CODE></CODE> (Code - untuk source code listings)

<SAMP></SAMP> (Sample Output/ Contoh Keluaran )

<KBD></KBD> (Keyboard Input; Masukan Papan Ketik)

<VAR></VAR> (Variable)

<DFN></DFN> (Definition - jarang dipakai)

<ADDRESS></ADDRESS> (Alamat Pengaran)

<BIG></BIG> (Huruf ukuran Besar)

<SMALL></SMALL> (Huruf Ukuran Kecil)

FORMAT TAMPILAN

<B></B> (Bold)

<I></I> (Italic)

<U></U> (Underline - jarang digunakan)

<STRIKE></STRIKE> (Strikeout /Huruf Coret)

<S></S> (Strikeout)

<SUB></SUB> (Subscript/Huruf Geser Bawah)

<SUP></SUP> (Superscript/Huruf Geser Atas)

<TT></TT> (Typewriter - huruf berjarak tetap/Huruf Mesin Ketik)

<PRE></PRE> (Pra-format Preformatted/Menampilkan dengan jarak
pra-format)

<PRE WIDTH=?></PRE> (mengatur jarak huruf kebawah)

<CENTER></CENTER> (Center - Rata Tengah ; berlaku untuk teks maupun
gambar)

<BLINK></BLINK> (Blinking - Huruf Kedip; tag terlucu sampai kini)

<FONT SIZE=?></FONT> (Ukuran Huruf ; boleh diisi dari 1 sampai 7)

<FONT SIZE="+|-?"></FONT> (Rubah Ukuran Huruf)

<BASEFONT SIZE=?> (Basis Ukuran Huruf; Boleh diisi 1 sampai 7; ukuran
standard/default=3)

<FONT COLOR="#$$$$$$"></FONT> (Warna Huruf)

<FONT FACE="***"></FONT> (Pilih Jenis Huruf)

<MULTICOL COLS=?></MULTICOL> (Teks Multi Kolom

<MULTICOL GUTTER="10 pixels"></MULTICOL> (Jarak Batas Kolom)

<MULTICOL WIDTH=?></MULTICOL> (Lebar Kolom)

<SPACER> (Celah (Spacer)

<SPACER TYPE=horizontal| vertical|block> (Jenis Cela)

<SPACER SIZE=?> (Ukuran Celah)

<SPACER WIDTH=? HEIGHT=?> (Dimensi Celah)

<SPACER ALIGN=left|right|center> (Penataan Celah)

Keterangan :

"?" dapat diisi dengan angka dengan format "3" atau sebagainya
"horizontal| vertical" block dapat dipilh salah satunya
"left|right|center" dapat dipilh salah satunya
"#$$$$$$" dapat diisi dengan Format "#ff99666" dan dapat di ganti.

Semoga Berguna

Maret 19, 2013

Saya mengamsumsi anda sudah cukup mengenal keywords pada program HTML seperti <tag>, <a href>, <p> ,<br>, <frameset>,<frame> <header>, <footer> dan anda sudah cukup mengetahui tentang fungsinya tersebut sehingga memudahkan dalam mebuat program ini....

Berikut saya akan membuat contoh web sederhana yang mungkin membantu anda.
contoh webesite yang akan saya berikan modelnya seperti ini

Tetapi sebulum anda membuatnya anda sebaiknya sudah memiliki beberapa desain web sederhananya sehingga membantu agar desain ini berjalan.

Berikut adalah kodingnya beserta penjelasan singkatnya

<!DOCTYPE HTML>
<html lang=en>
<head>
<title>Simplistic HTML5</title>
<meta charset=utf-8>
<style>
body { width:500px; margin:auto;
}
header, nav, article, footer { display:block;
}
header { width:500px; background-color:#FF9966; text-align:center; margin:auto;
}
nav { float:left; width:25%; background-color: #FF9966; margin-bottom:10px;
}
article { float:right; width:70%; background-color:#FF9966; margin-bottom:10px;
}
footer { clear:both; background-color:#FF9966; text-align:center;
}
h2 { font-size:large; font-weight:bold; margin-top:0; margin-bottom:0;
}
</style>
</head>
<body>
<header>
<h1>header goes here</h1>
</header>
<nav>
<ul>

<li><a href="page-one.html" >Page One</a></li>
<li><a href="page-two.html" >Page Two</a></li>
<li><a href="index.html" >Home page</a></li>

</ul>
</nav>
<article>
<h2>Article</h2>
Are you illiterate? Write today for free course.
</article>
<article>
<h2>Another Article</h2>
Stock up for Christmas. Limited to one per family.
</article>
<footer>
Footer. Perhaps for a copyright statement
</footer>
</body>
</html>

<!DOCTIPE HTML> merupakan bahasa programan untuk HTML5 jika yang anda pelajari masih versi XHTML maka anda cukup menghapusnya dan tidak perlu menulisnya
<html lang=en> Ini merupakan pemerograman menggunakan bahasa inggris jika anda ingin mengganti dalam bahasa lain bisa di liat di sini
untuk yang saya coret anda bisa menggantinya dengan nama desain anda sendiri yang telah anda miliki.

Silakan Mencoba.... Tinggalkan Komen jika blum jelas....