Cara Menganti Menambah Domain dan Block Domain di Localhost - Windows

Selamat Malam kawan ^_^
sudah lama tidak pernah pos sesuatu di blog nie ;v kayak syahrini ajah sesuatu ;v ckckckckck
stop, becanda ;v , malam ini ane mau pos aplikasi yang bisa di bilang sudah jadul ;3
aplikasinya terinspirasi dari xampp.

Aplikasi ini ane namain " Hosts Change and IP or Domain Block ", selain berfungsi untuk menganti Hostname bisa juga untuk memblock suatu domain.
Apa lagi yang sobat biasa main program web aplikasi sering nemuin url " localhost atau 127.0.0.1 " di aplikasi xampp
itu sudah bawaan dari settingan windowsnya, jadi tool ini berfungsi untuk merubahnya, bisa agan - agan ganti2 deh jadi domain sesuka hatinya
di sini ane contohin dengan domain " aihara.aru "




jadi tidak perlu pakai " localhost atau 127.0.0.1 " ^_^

Cara menggunakan tool :
[+] Untuk mengganti default localhost atau 127.0.0.1 di browser



yang saya kasih kotak itu bentuk pengaturannya ^_^
lalu tekan tombol Change.

[+] Untuk memblokir suatu web atau domain





Link Download Tool :
Here


terima kasih ^_^ kalau ada yang error silahkan komentar ya ^_^

Share Inject Isat July Versi 1 2015

Selamat Pagi Kawan ^_^

Pagi ini saya mau berbagi Injeck buat SSH ^_^

Yup Injecknya yaitu Isat ( Indosat )

Sobat bisa Comot langsung dah di bawah ^_^

Download Here

Selamat Net kawan ^_^

Gunakan dengan Bijak

Falcon-G21 Team Dark

Game Dari CMD Part #1

Assallamuallaikum Dan Selamat pagi sobat blogger :), Pasti sehat2kan.
Okeh saya tidak akan panjang lebar kali tinggi ngomongnya karena sobat di sini pasti tau semua tentang CMD klau tidaak tau #Plak Tepok Jidad ( Maaf Salah :v) liat di mari Menu Menu Pada CMD dan Trik CMD . Okeh disini saya anggap sobat sudah paham tentang CMD. Kita langsung ajah yuk, kemana?
lah pakai banyak tanyak, ya ke tkp ( Maaf adminnya baru habis kerja) XD :v

Alat dan Bahannya

1. PC dan laptop tentunya :v
2. Notepad kesayangan anda, kalau aku sih pakai iniSynwrite karena dia adalah sobat setia ane Mastah :3
3. Camilan + Minuman kalau ada.

 oke, sobat Copas kodenya v kodenya ane taruh di pastebin jadi saya kasih linknya dibawah ini

1. Sudoku Slover
2. Game Monopoly


Oke Semoga bermanfaat ya sobat SegaCrew Software Center, mari berkarya sobat :)
Eh, bukan sampai di sini ajah lo Game dari CMDnya, masih ada yang lain v karena mimin capek + ngatuk jadi wasallam dan selamat beraktifitas.

Jangan lupa Komentar dan Follow Fans Page kami :)

Cara Membuat Game Menggunakan Notepad Part 1

Ternyata Game Tidak Hanya Dibuat Dengan Software Ajak Gan, Kita Busa Membuatnya Tanpa banyak2 Software Yang Digunakan Cukup Hanya Dengan Notepad atau Text Editor Kesayangan Sobat.....
Kita Langsung Ajak Ke Projekknya

Pertama-tama kita buka notepad atau teks editor kesyangan sobat, disini saya memnggunakan SynWrite....
Agan Bisa Download Di  Disini

copy paste kode dibawah ini :

@echo off

title Magic Of The QuiZz

color ff
color 0a

:menu
cls
echo Welcome On The game! Enjoy To Play!
echo This Game Create By Azwar Anas
echo Link blog : http://anas-tav.blogspot.com
echo 1) Play!
echo 2) How To Play
echo 3) Home
set /p number=

if %number% == 1 goto Play!
if %number% == 2 goto How To Play
if %number% == 3 goto Exit

:Play!
cls
echo How Is Your name:
set /p name=
echo Halo %name%!
echo Are you going to start quiz? (Y/N)
set /p start=
if %start% == Y goto level1
if %start% == N goto menu
goto Play!

:How To play
cls
echo Select Your True Answer?
echo Goto menu? (Y/N)
set /p menugoto=
if %menugoto% == Y goto menu
if %menugoto% == N goto exit
goto How To Play

:Exit
cls
exit
goto Exit

:level1
cls
echo ok now start.
echo how results 10 + 10?
echo a) 1
echo b) 20
echo c) 500

set /p answer1=
if %answer1% == a goto wrong1
if %answer1% == b goto correct1
if %answer1% == c goto wrong1
goto level1

:correct1
echo Your Answer Is correct, Next To Level 2?(Y/N)
set /p NL1=

if %NL1% == Y goto level2
if %NL1% == N goto menu
goto correct1        

:Wrong1
Echo Your Answer Is Not correct, Pliese try Again? (Y/N)
set /p WA1=
if %WA1% == Y goto level1
if %WA1% == N goto menu
goto wrong1

:level2

cls
echo Who Linux Mascot Name?
echo a) Tux
echo b) Liona
echo c) David
echo d) Tom
set /p aa=
if %aa% == a goto correct2
if %aa% == b goto wrong2
if %aa% == c goto wrong2
if %aa% == d goto wrong2
goto level2

:correct2
echo Your Answer Is correct, Next To Level 3?(Y/N)
set /p NL1=
if %NL1% == Y goto level3
if %NL1% == N goto menu
goto correct2

:wrong2
cls
echo Your Answer Is Not correct, Plise try Again? (Y/N)
set/p retry=
if %retry% == Y goto level1
if %retry% == N goto exit
goto wrong2

:level3
cls
echo Who Name Pioneer Linux?
echo a) Thomas Alfa E.
echo b) James Watt
echo c) Linux Torvald

set /p answer3=
if %answer3% == a goto wrong3
if %answer3% == b goto wrong3
if %answer3% == c goto correct3
goto level3

:correct3
echo Your Answer Is correct, Next To Level 4?(Y/N)
set /p NL1=
if %NL1% == Y goto level4
if %NL1% == N goto menu
goto correct3

:wrong3
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level3
if %retry% == N goto exit
goto wrong3

:level4
cls
echo who is the inventor of the light?
echo a)Thomas Alvadison
echo b)Johan Edvard
echo c)John Shore
echo d)Samuel Miller
set /p aa=
if %aa% == a goto correct4
if %aa% == b goto wrong4
if %aa% == c goto wrong4
if %aa% == d goto wrong4
goto level4

:correct4
echo Your Answer Is correct, Next To Level 5?(Y/N)
set /p NL1=
if %NL1% == Y goto level5
if %NL1% == N goto menu
goto correct4

:wrong4
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level4
if %retry% == N goto exit
goto wrong4

:level5
cls
echo how the results of -20:(-2)?
echo a)10
echo b)5
echo c)20

set /p answer5=
if %answer5% == a goto correct5
if %answer5% == b goto wrong5
if %answer5% == c goto wrong5
goto level5

:correct5
echo Your Answer Is correct, Next To Level 6?(Y/N)
set/p NL1=

if %NL1% == Y goto level6
if %NL1% == N goto menu
goto correct1

:wrong5
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level5
if %retry% == N goto exit
goto wrong5

:level6
cls
echo Inventors Who Bacteria?
echo a)Luna
echo b)Alexander Fleming
echo c)Alexander Grahambell
echo d)Muhammad Faqih`
set /p aa=
if %aa% == a goto wrong6
if %aa% == b goto correct6
if %aa% == c goto wrong6
if %aa% == d goto wrong
goto level6

:correct6
echo Your Answer Is correct, Next To Level7?(Y/N)
set/p NL1=

if %NL1% == Y goto level7
if %NL1% == N goto menu
goto correct7

:wrong6
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level7
if %retry% == N goto exit
goto wrong7

:level7
cls
echo how the results of -40:2:(-4)?
echo a)13
echo b)20
echo c)5

set/p answer7=
if %answer7% == a goto wrong7
if %answer7% == b goto wrong7
if %answer7% == c goto correct7
goto level7

:correct7
echo Your Answer Is correct, Next To Level8? (Y/N)
set/p NL1=

if %NL1% == Y goto level8
if %NL1% == N goto menu
goto correct7

:wrong7
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level7
if %retry% == N goto exit
goto wrong7

:level8
cls
echo Who is the President of Americans Now?
echo a)Barrak Obama
echo b)SBY
echo c)Soekarano
echo d)Moh.Hatta
set /p aa=
if %aa% == a goto correct8
if %aa% == b goto wrong8
if %aa% == c goto wrong8
if %aa% == d goto wrong8

:correct8
echo Your Answer Is correct, Next To Level9?(Y/N)
set/p NL1=

if %NL1% == Y goto level9
if %NL1% == N goto menu
goto correct8

:wrong8
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level8
if %retry% == N goto exit
goto wrong8

:level9
echo how the results of 3x(-2)=
echo a)-100
echo b)400
echo c)-6

set /p answer9=
if %answer9% == a goto wrong9
if %answer9% == b goto wrong9
if %answer9% == c goto correct9
goto level9

:correct9
echo Your Answer Is correct, Next To Level 10?(Y/N)
set/p NL1=

if %NL1% == Y goto level10
if %NL1% == N goto menu
goto correct1

:wrong9
cls
echo Your Answer Is Not correct, Plise try Again?(Y/N)
set/p retry=
if %retry% == Y goto level9
if %retry% == N goto exit
goto wrong9

:level10
cls
echo Who the inventor of the telephone?
echo a)James Bon
echo b)Muhammad Faqih
echo c)Alexander Grahambell
echo d)SBY
set /p aa=
if %aa% == a goto wrong10
if %aa% == b goto wrong10
if %aa% == c goto correct10
if %aa% == d goto wrong10
goto level10

:correct10
cls 
echo =============================================
echo          CONGRATULATIONS YOU WON!
echo               KEEP VISIT
echo         http://anas-tav.blogspot.com
echo =============================================
goto correct10

:wrong10
cls
echo YOU WILL LOSE THE GAME,TRY AGAIN!?(Y/N)
set/p retry=
if %retry% == Y goto level1
if %retry% == N goto exit
goto wrong10

Sekian Semoga Bermannfaat............

Membuat Banner Slideshow with JavaScript

Membuat Banner Slideshow dengan JavaScript

Banner Slideshow dengan menggunakan JavaScript berikut ini akan menampilakan banner serta link-nya masing-masing secara bergantian dengan waktu yang dapat kita tentukan sendiri.
Setelah dicoba dan di test, script ini dapat tampil dengan baik di Intenet Explorer, Mozilla Firefox, Google Chrome, Opera dan Safari.
Berikut adalah langkah-langkah untuk membuat Banner Slideshow dengan JavaScript.
Yang pertama kita lakukan adalah menyalin kode berikut ke Notepad kemudian simpan dengan nama "banner-slideshow.js".

/* Source Script http://javascript.internet.com Created by: Scragar | Licensed under: Public Domain */
function BannerSlideshow(){
// first, defaults:
  this.timer = 2;
  this.bannerNum = 0;// -1 = random
// then normal init work
  this.banners = [];
  this.binding = null;
  this.timeout = null;
  this.add = function(){// add a banner to the array
    this.banners[this.banners.length] = [arguments[0], arguments[1]];
  }
  this.bind = function(){// bind to an element
    if(typeof arguments[0] == 'string')
      this.binding = document.getElementById(arguments[0]);
    else
      this.binding = arguments[0];
    this.rotate();
  }
  this.rotate = function(){// the actual image rotator
    if( ! this.empty())
      return;
    var showNum, tmpA = document.createElement('a'), tmpImg = document.createElement('img');
    if(this.bannerNum < 0)// random
      showNum = Math.floor(Math.random()*this.banners.length);
    else// syncronous
      showNum = this.bannerNum=(++this.bannerNum >= this.banners.length)?0:this.bannerNum;
    tmpA.href = this.banners[showNum][0];
    tmpImg.src = this.banners[showNum][1];
    tmpA.appendChild(tmpImg);
    this.binding.appendChild(tmpA);
  }
  this.empty = function(){// empty the element if possible
    if(this.binding == null)
      return false;
    while(this.binding.hasChildNodes())
      this.binding.removeChild(this.binding.firstChild);
    return true;
  }
  this.startTimer = function(){// start the loop, normaly done during page load.
    this.stopTimer();
    this.timeout = window.setInterval(
      (function(x){
        return function(){
          x.rotate();
        }
      })(this), this.timer*1000);
  }
  this.stopTimer = function(){// stop the loop, nice to make available via a button.
    if(this.timeout != null)
      window.clearInterval(this.timeout);
    this.timeout = null;
  }
}

Setelah disimpan sekarang masukkan kedua kode JavaScript berikut di antara tag <head>, untuk script yang pertama sesuaikan ke lokasi dimana banner-slideshow.js tadi anda simpan:
JavaScript 1:

<script type="text/javascript" src="banner-slideshow.js"></script>

JavaScript 2:

<script type="text/javascript">
<!––
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
// Banner
var myBanner = new BannerSlideshow();
myBanner.add('#', 'banner1');
myBanner.add('#', 'banner2');
myBanner.add('#', 'banner3');
myBanner.add('#', 'banner4');
myBanner.timer = x;// x detik pergantian gambar.

// Set-up display
addLoadEvent(function(){
  myBanner.bind('my-banner');// nama id dari lokasi banner.
  myBanner.startTimer();
});
//––>
</script>

Kemudian masukkan kode berikut di antara tag <body> ke lokasi dimana kita akan menampilkan banner.

<div id="my-banner"></div>

Untuk menghilangkan border gambar di IE serta untuk pengaturan elemen div diatas tambahkan style berikut ke dalam CSS.

img{border:none;}
#my-banner{margin:0;} /*pengaturan CSS untuk banner*/

Selanjutnya kita akan mengatur link, gambar banner dan waktu dari rotasi banner dengan mengedit JavaScript yang kedua diatas.
Yang perlu kita ubah adalah:

myBanner.add('#', 'banner1');

Caranya dengan mengganti "#" dengan link tujuan dari banner kemudian "banner1" adalah link ke lokasi gambar. Untuk gambar bisa menggunakan jpg, gif atau png.
Kemudian kita dapat menambah atau mengurangi banner tersebut tergantung dengan jumlah banner yang kita inginkan. Seperti contoh diatas adalah untuk 4 banner.
Selanjutnya:

myBanner.timer = x;

Adalah untuk mengatur rotasi atau pergantian banner dalam satuan detik.

cara membuat table html

Sekilas tentang tabel.
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
	<tr>
		<td>Cell 1 - Baris 1 Kolom 1</td>
		<td>Cell 2 - Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Cell 3 - Baris 2 Kolom 1</td>
		<td>Cell 4 - Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Cell 5 - Baris 3 Kolom 1</td>
		<td>Cell 6 - Baris 3 Kolom 2</td>
	</tr> 
</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.
Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
	<tr>
		<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 1</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.
Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
	<tr>
		<td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
	</tr>
	<tr>
		<td style="width:50%">Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
	<tr>
		<td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
	<tr>
		<td style="width:50%;">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
	<tr>
		<td style="width:50%">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
	<tr>
		<th style="width:50%;">Header Kolom 1</th>
		<th>Header Kolom 2</th>
	</tr>
	<tr>
		<td>Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Disini adalah titel tabel ini

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
	<tr>
		<th style="background:red;width:50%;">Header Kolom 1</th>
		<th style="background:red;">Header Kolom 2</th>
	</tr>
	<tr>
		<td>Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.
Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.
Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
	<tr>
		<th style="background:red;width:50%;">Header Kolom 1</th>
		<th style="background:red;">Header Kolom 2</th>
	</tr>
	<tr>
		<td>Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
</table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.

HTML New

Pengenalan HTML

Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:

<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body>
</html>

Preview
Simpan file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all files". Kemudian buka browser, dari menu File klik Open dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " </…>". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.
Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor="0000ff">, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka " <html>" dan tag penutup " </html>" dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.
Baca juga Update dari Pengenalan HTML ini di Tutorial HTML.

Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:

<html>
<head>
<title>Disini titel websiteku</title>
</head>
<body>
Disini adalah konten yang tampil di browser
</body>
</html>

Preview
Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".

Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Baca juga Update dari Tag Dasar HTML ini di Tutorial HTML.

Format Font HTML

Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:

<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face="Verdana">Judul dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>
Untuk membuat ukuran (size):
<h1><font size="5">Judul dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>
Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>

Preview
Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size:
Atribut
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaannya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut adalah contoh penggunaan tag style sheets:

<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>

Preview
Untuk mengetahui lebih lanjut tentang CSS, nanti akan dibuat tutorial khusus untuk membahas hal ini.
Baca juga Update dari Format Font HTML ini di Tutorial HTML.

Format text HTML

Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:

<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini adalah halaman HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>

Preview
Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan contoh berikut ini:

<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>

Preview
Nah..udah tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Untuk melihat tag-tag apa saja yang tidak memerlukan tag penutup dapat dilihat di artikel tentang tag-tag html tanpa tag penutup.
Selanjutnya tag <h1>…</h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6.
Preview
Selanjutnya tag <!--…--> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikan oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal.
Dibawah ini adalah contoh format teks yang sering digunakan di dalam dokumen HTML :

<html>
<head></head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang mempelajari format-format teks.<br>
Contoh-contohnya adalah sebagai berikut:</p>
<p>Teks Normal<br>
<tt>Teks mesin ketik</tt><br>
<b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br>
<em>Teks miring dengan perintah Emphasized</em><br>
<u>Teks bergaris bawah (underline)</u><br>
<strike>Teks tercoret (strike)</strike><br>
<big>Teks lebih besar dari normal</big><br>
<small>Teks lebih kecil dari normal</small><br>
Teks menggunakan Subscript: Molekul Air adalah H<sub>2</sub>O<br>
Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body>
</html>

Preview
Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:

<html>
<body>
<pre>
   <b>PUITUIS ASA</b>
   Hari ini...
   Aku sedang belajar...
   Belajar tentang HTML.
      Sulit 'ntuk dimengerti,
      Karena banyaknya teks-teks aneh.
      Tapi biarlah...
   Akan kucoba...
   Sampai berhasil.
</pre>
</body>
</html>

Preview
Baca juga Update dari Format text HTML ini di Tutorial HTML.

Hyperlink HTML

Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:

<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/" target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>

Preview
Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :

<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>

Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.

<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>

Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi:

<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>

Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.

<a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>

Dalam contoh ini src atau source yaitu contoh.jpg sengaja dihapus agar alt-nya ditampilkan, maka hasilnya adalah:
Baca juga Update dari Hyperlink HTML ini di Tutorial HTML.

Background HTML

Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:

<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>
</body>
</html>

Preview
Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:

<body bgcolor="#FFFF00">
<body bgcolor="rgb(250,250,0)">
<body bgcolor="yellow">

Hasilnya akan sama. Ikuti link berikut ini untuk mengetahui Kode Hexadecimal dan Nilai RGB dari suatu warna, tapi maaf untuk nama warnanya cari sendiri aja deh…
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif, .jpg atau .png yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg

<html>
<head></head>
<body background="background.jpg">
<font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2">
<p><font face="Verdana" size="4" color="black">Hai... Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Biar bagaimanapun anda diwajibkan harus menyukainya...</font></p>
</body>
</html>

Preview
Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:

<html>
<head></head>
<body background="http://i52.tinypic.com/nmm2cz.jpg">
<p>Hai.. Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain! hua ha..ha..ha..</p>
<p>Mudah-mudahan yang punya website ngamuk sekalian deh...siapa takut!!</p>
</body>
</html>

Preview
Baca juga Update dari Background HTML ini di Tutorial HTML.