Rama Hamdi's Blogger: 2012

Rabu, 05 Desember 2012

Latihan HTML UKM Cybertech Politeknik Negeri Padang

Latihan 1

Input

Output

Latihan 2

Input

Output

Latihan 3

Input

Output

Latihan 4

Input

Output

Latihan 5

Input

Output

Latihan 6

Input

Output

Latihan 7

Input

Gambar Output HTML

Selasa, 27 November 2012

Apa itu HTML?

HTML = HyperText Markup Language. Bahasa Markup ( berdasarkan id.wikipedia, bahasa markup berarti kombinasi teks dan informasi tambahan mengenai teks tersebut. markup = markah/penanda, atau dalam HTML <tag> yang memberikan fungsi tertentu ) yang digunakan untuk membuat sebuah halaman web. HTML adalah standar yang digunakan untuk sebuah halaman web. HTMl di definisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Itu tadi definisi dari HTML. bisa dijelaskan lebih detil lagi?

Hmm… Sederhananya begini. Saya yakin anda semua mengetahui file .doc nya microsoft word. nah, ini ada jenis file, yang namanya HTML. kalau file microsoft word itu .doc, file HTML ini ekstensinya .htm atau .html. HTML ini merupakan file yang di taruh pada satu komputer ( server ) dan dapat di akses oleh komputer lain melalui aplikasi web browser. isi file HTML terdiri dari dua jenis : konten dan atribut. konten merupakan informasi dari file HTML itu sendiri, yang ditampilkan pada halaman browser. sedangkan atribut merupakan tag yang memiliki fungsi tertentu, dan tidak ditampilkan di halaman browser.
Contoh :

<html>
<head>
</head>
<body>
ini konten. <a href=”">ini link</a>
</body>
</html>

tulisan ini konten dan ini link merupakan konten. dan ini ditampilkan pada browser. yang berada di dalam tanda < dan > merupakan atribut. Atribut tidak di tampilkan di halaman browser.
masih agak bingung? ok. buka aplikasi notepad anda, copy kode diatas dan paste pada notepad. Save dengan nama contoh1.html. File HTML dapat dibuat menggunakan berbagai aplikasi editor kode. Namun sederhananya, Anda dapat membuat file HTML menggunakan aplikasi notepad yang pastinya terinstall di semua komputer ber OS windows. cukup tuliskan kodenya, lalu save dengan nama file + .htm atau .html . Contoh : namafile.htm. sekarang, buka file yang anda save tadi. dobel klik, dan file tersebut akan terbuka pada browser default anda. Anda akan paham apa maksud kami setelah itu.

File HTML PASTI dimulai dengan dengan tag <html> ( kecuali deklarasi file. hanya deklarasi file yang ditulis sebelum tag <html>. kita bicarakan ini nanti ) dan ditutup dengan tag </html>. Setiap file html di dalam tag <html> terbagi kedalam dua bagian : head dan body.

bagian head dimulai dengan tag <head> dan ditutup dengan tag </head>. Bagian head ini berisikan atribut – atribut yang berisi informasi mengenai halaman web, dan link menuju file file CSS atau JavaScript yang memberi efek untuk halaman web tersebut
bagian body dimulai dari tag <body> dan ditutup dengan tag </body> bagian body berisi konten yang ditampilkan pada browser, dan atribut – atribut pendukungnya,

Dasar Dasar HTML untuk Design Website atau Blog

Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :

* CARA MEMASUKKAN GAMBAR

kode :

<img src="http://ubb.ac.id/gambar.jpg" border="0" height="17" width="90">

keterangan :

yang warna biru adalah lokasi gambar kamu.

height="17" width="90" adalah ukuran lebar dan tinggi gambar

hasil :

* CARA MEMBUAT LINK

Kode :

<a href="http://www.ubb.ac.id" >UBB </a>

Keterangan :

Text warna biru adalah link yang dituju.

Tulisan "UBB" adalah tulisan yang ditampilkan.

Jika ingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :

<a href="http://www.ubb.ac.id" target="_blank"><img src="http://www.ubb.ac.id/gambar.jpg" border="0" height="17" width="90"> </a>

Jika ingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://www.ubb.ac.id"

Hasil :

UBB
(dibuka pada window yg sama)

(dibuka pada window baru

* CARA MENGETENGAHKAN TEXT/GAMBAR

Kode :

<center>text</center>

Keterangan :

Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar

* CARA MEMBUAT BARIS BARU

Kode :

 

Keterangan :

Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH

Kode :

text

text

text

Hasil :

Tebal

Miring

Garis Bawah

* MEMBERI WARNA TEXT

 text merah

 text orange

Keterangan :

Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.

Hasil :

text merah

text orange

* KODE-KODE WARNA

Warna Kode

#000000

#999999

#FFFFFF

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#9900FF

#FF6600

Kode-kode Warna untuk HTML

Di dalam dunia web/blog, warna itu sangat penting dan sangat berpengaruh terhadap penampilan web/blog. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalau kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Oleh karena itulah dibawah ini dibuat Chart HTML Kode Warna bagi yang membutuhkan kode-kode warna.
Cara penggunaannya cukup mudah, tinggal klik warna yang dipilih, maka kode warnanya akan tampil di kotak "kode warna:".

PENULISAN KARAKTER-KARAKTER KHUSUS

Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :

Karakter	Kode
>	>
<	<
&	&
"	"
(spasi)

Cara Membuat Kotak Blogroll dan Marquee

Ada dua macam kotak blogroll yaitu:

1. Kotak Blogroll Model Textarea
Cara membuatnya :

Pasang code berikut ini di kedalam element (Page Element --> Add Page Element --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);

overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 
#link2 
#link3 
#link...

</div>

keterangan:

- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kita bisa merubahnya dan menyesuaikanya dengan ukuran yg disuka.

- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link, juga bisa diisi dengan banner link.

- Jika ingin daftar link-linknya berjajar, maka hilangkan kode  

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah). Link-link atau isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Cara membuatnya :

Pasang code berikut ini di kedalam element (Page Element --> Add Page Element --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 
#link2 
#link3 
#link... 

</marquee>

Keterangan :

- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode  .
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......

Kamis, 22 November 2012

CARA INSTALISASI WINDOWS XP PADA VIRTUAL BOX

Sebelum melakukan instalasi yang perlu dipersiapkan adalah:

VirtualBox, yang dapat didownload dari situs resminya secara gratis https://www.virtualbox.org/wiki/Downloads
File ISO dari sistem operasi yang akan diinstal, untuk ubuntu dan distro linux lainnya dapat didownload langsung pada situs resminya, sedangkan untuk sistem operasi windows Anda dapat membuat file ISO dari CD/DVD instalasi windows dengan image disk creator seperti Alcohol 120%, UltraISO, PowerISO dan lain sebagainya.

Setelah mempersiapkan hal-hal yang dibutuhkan saatnya instalasi.
PROSES INSTAL
1. Silahkna buka file VirtualBox yang telah Anda download tadi dan akan muncul jendelaseperti dibawah ini

Cara Instal VirtualBox di Windows dengan guest OS Windows XP

2. Lanjutkan proses instalasi dengan cara klik tombol Next, biasanya tidak ada kendala, tapi nanti akan ada peringatan yang memberitahukan bahwa jaringan yang ada akan diputus sementara ketika proses instalasi berlangsung, klik Yes untuk melanjutkan
3. Setelah instalasi selesai sekarang masuk pada proses instalasi sistem operasi guest.

PROSES INSTALASI SISTEM OPERASI GUEST
1. Untuk menginstal sistem operasi guest yang perlu dilakukan adalah menekan tombol New pada jendela VirtualBox Manager

2. Akan muncul jendela New Virtual Mechine Wizard, klik Next

3. Pada jendela selanjutnya silahkan memilih jenis OS yang akan diinstal untuk guest OS, dalam artikel ini saya menggunakan Windows XP, setelah dipilih klik Next untuk melanjutkan

4. Selanjutnya tentukan berapa banyak memory (RAM) yang digunakan untuk menjalankan VirtualBox. Geser slider ke kanan untuk menambah angka

5. Selanjutnya centang Boot Hard Disk dan pilih Create new hard disk setelah itu klik Next

6. Jendela selanjutnya hanya berisi pemberitahuan bahwa Anda telah masuk pada sesi Create New Virtual Disk Wizard, klik Next saja

7. Tentukan besar virtual disk yang dibuat bersifat tetap atau dinamis. Untuk menghemat sebaiknya pilih dinamis saja, pilih Dynamically expanding storage dan klik Next

8. Dijendela selanjutnya silahkan tentukan lokasi virtual disk dibuat, dan tentukan ukuran maksimal dari virtual disk tersebut. Ukuran default yang disarankan adalah 10GB tapi Anda apat menentukan lebih kecil dari itu selama Anda yakin space tersebut sudah cukup untuk kebutuhan Anda nanti.

9. Selanjutnya Anda akan diberikan informasi berisi tipe, lokasi dan ukuran virtual disk yang dibuat, klik Finish

10. Selanjutnya berisi informasi tentang nama, tipe os, base memori, boot hardisk dari mesin virtual yang dibuat tadi, klik Finish

11. Mesin virtual Anda telah berhasil dibuat, tetapi proses ini belum selesai Anda perlu menginstal sistem operasi guest, untuk itu silahkan klik dua kali pada WinXP

12. Selanjutnya Anda akan disambut dengan tampilan awal wizard, klik Next

13. Silahkan pilih tempat dimana lokasi installer dari sistem operasi, bila Anda menggunakan ISO silahkan pilih file ISO tersebut, bila menggunakan CD/DVD silahkan pilih Drive dari CD/DVD ROM