Search

Tampilkan postingan dengan label Pemrograman Web. Tampilkan semua postingan
Tampilkan postingan dengan label Pemrograman Web. Tampilkan semua postingan

Senin, 25 Februari 2013

HTML Cheatsheet - Pemrograman Web

HTML Cheatsheet - Pemrograman Web 
Dibawah ini adalah daftar HTML Cheatsheet yang ada dalam bahasa pemrograman web, dan ini saya gunakan hanya sebagai pengingat buat saya sendiri, dan semoga bisa berguna juga bagi yang lainnya.
1. Tag Dasar
<html></html> Membuat dokumen HTML
<head></head> Berisi informasi penting yang tidak ditampilkan pada website
<body></body> Bagian yang akan ditampilkan pada halaman website
2. Atribut pada body
<body bgcolor="red"> Mengatur warna latar belakang
<body text="black"> Mengatur warna teks
<body link="blue"> Mengatur warna dari link
<body vlink="#ff0000"> Mengatur warna link yang diikuti
<body alink="#00ff00"> Mengatur warna link yang di klik
<body ondragstart="return false" onselectstart="return false"> Membuat seleksi pada teks dengan mouse maupun keyboard tidak bisa digunakan/ tidak aktif
3. Tag pada Teks
<pre></pre> Membuat teks yang ditulis seperti apa adanya
<hl></hl> Membuat judul dengan ukuran teks paling besar
<h6></h6> Membuat judul dengan ukuran teks paling kecil
<b></b> Membuat teks menjadi tebal (bold)
<i></i> Membuat teks miring
<tt></tt> Membuat teks berkesan seperti ditulis dengan menggunakanmesin ketik
<cite></cite> Membuat Kutipan (biasanya menjadi ditulis miring/italic)
<em></em> Membuat penekanan kata (dengan italic atau bold)
<strong></strong> Membuat penekanan kata (dengan italic atau bold)
<font size="3"></font> Mengatur ukuran huruf dari 1 sampai 7
<font color="green"></font> Mengatur warna huruf
4. Link
<a href="URL"></a> Membuat hyperlink
<a href="mailto:EMAIL"></a> Membuat link email
<a href="URL"><img src="URL"> </a> Membuat link pada gambar (image/link)
<a name="NAME"></a> Membuat target link pada halaman yang sama
<a href="#NAME"></a> Membuat link yang mengarah ke target link pada halaman yang sama
5. Pem-formatan
<p></p> Membuat paragrap
<p align="left"> Paragraf rata kiri (default), right (kanan), or center (tengah).
<br> Turun satu baris ke bawah/ pindah baris
<blockquote></blockquote> Membuat paragraph menjorok ke dalam pada 2 sisi
<dl></dl> Membuat daftar definisi
<dt> Pendahuluan tiap definisi
<dd> Pendahuluan tiap definisi
<ol></ol> Membuat list (daftar) dengan urutan angka
<ul></ul>  Membuat list (daftar) tanpa urutan angka
<li></li> masing-masing list dari tag <ul> maupun <ol>
<div align="left"> Tag untuk memformat sebagian besar blok menggunakan stylesheet (css)
<img src="name"> Menampilkan gambar/image
<img src="name" align="left"> Gambar (image):rata kiri (left), right, center; bottom, top, middle
<img src="name" border="1"> Mengatur garis tepi pada gambar/image
<hr /> Menambahkan garis horizontal
<hr size="3" /> Mengatur ketebalan garis horizontal
<hr width="80%" /> Mengatur lebar halaman sebesar 80% dari lebar absolute/ total
<hr noshade /> Membuat aturan tanpa efek bayangan
6. Tabel
<table></table> Mendefinisikan/ membuat tabel
<tr></tr> Baris pada tabel
<td></td> Kolom pada tabel
<th></th> Judul dari tabel (Sel normal dengan efek bold, dan rata tengah/centered)
7. Atribut pada Tabel
<table border="1"> Mengatur tebal garis tepi dari tabel
<table cellspacing="1"> Mengatur besarnya spasi antara sel pada tabel
<table cellpadding="1"> Mengatur besarnya spasi antara garis tepi sel dengan konten sel
<table width="500" or "80%"> Mengatur lebar tabel
<tr align="left"> atau <td align="left"> Mengatur alignment horizontal pada sel (left, center, atau right)
<tr valign="top"> atau <td valign="top">  Mengatur alignment vertikal pada sel  (top, middle, atau bottom)
<td colspan="2"> Mengatur penggabungan kolom (default=1)
<td rowspan="4">  Mengatur penggabungan baris  (default=1)
<td nowrap> Mencegah terjadinya tabel yang berantakan karena tidak sesuai dengan lebar halaman yang tersedia
8. Frame
<frameset></frameset> Mengganti tag <body> dalam dokumen frame
<frameset rows="value,value"> Mendefinisikan baris dalam frameset (dalam pixel atau persen)
<frameset cols="value,value"> Mendefinisikan kolom dalam frameset (dalam pixel atau persen)
<noframes></noframes> Mendefinisikan apa yang akan tampil pada browser yang tidak support pada frame
9. Atribut pada Frame
<frame src="URL"> Menentukan dokumen HTML mana yang akan ditampilkan
<frame name="name"> Memberi nama frame jadi bisa menjadi target bagi frame lain
<frame marginwidth="value"> Mendefinisikan margin kiri dan kanan frame; harus sama dengan atau lebih besar dari 1
<frame marginheight="value"> Mendefinisikan margin atas dan bawah frame; harus sama dengan atau lebih besar dari 1
<frame scrolling="value"> Mengatur apakah frame akan bisa di scroll atau tidak; dengan nilai :( yes, no, dan auto).
<frame noresize="noresize"> Mencegah pengguna untuk mengubah ukuran/ resize dari frame
10. Form
Untuk membuat form berfungsi anda memerlukan pemrograman di sisi server (PHP, ASP dll). Sedang pada HTML hanya akan membuat tampilannya saja di halaman website.
<form></form> Membuat form baru
<select multiple name="NAME" size=?></select> Membuat scrolling menu. Size mengatur jumlah menu yang muncul sebelum di scroll.
<option> Mengatur setiap item pada menu
<select name="NAME"></select> Membuat pulldown menu
<option>  Mengatur setiap item pada menu
<textarea name="NAME" cols=40 rows=8></textarea name> Membuat text box area. Columns mengatur lebarnya; rows mengatur tinggi text box.
<input type="checkbox" name="NAME"> Membuat checkbox. diikuti teks.
<input type="radio" name="NAME" value="x"> Membuat radio button. diikuti teks
<input type="text" name="NAME" size=20> Membuat text area hanya satu baris. Size mengatur panjang teks area (ukuran dalam jumlah karakter).
<input type="submit" value="NAME"> Membuat tombol submit
<button type="submit">Submit</button> Membuat tombol
<input type="image" border=0 name="NAME" src="name.gif"> Membuat tombol submit menggunakan gambar/image
<input type="reset"> Membuat tombol Reset

sumber : http://www.bum1.info/2012/05/html-cheatsheet.html

Minggu, 06 Januari 2013

Cara Menampilkan Gambar atau Foto di HTML

Posting kali ini saya akan membahas tentang bagaimana Cara Menampilkan Gambar atau Foto di HTML. untuk menampilkan gambar atau foto di html kita bisa menggunakan tag <IMG>.

cara menampilkan gambar atau foto dengan tag html <img> adalah sebagai berikut :

<img src="nama_file_gambar_atau_foto_beserta_ekstensinya">

misalkan saya mempunyai sebuah file gambar atau foto dengan nama dan ekstensinya gambar.jpg, kemudian saya akan menampilkan file tersebut di html, dengan menggunakan tag <IMG>. berikut cara penulisannya :

<img src="gambar.jpg">

Selain itu anda juga dapat menambahkan "alt" untuk menampilkan tulisan apabila cursor berada di atas gambar atau foto tersebut. dan juga kita juga menyesuaikan ukurannya sesuai dengan yang kita inginkan. berikut cara penulisannya :

<img src="gambar.jpg" width="250" alt="ini adalah gambar">

NOTE : syaratnya File html dan gambar atau foto harus berada dalam satu folder

Anda juga dapat memanggil gambar atau foto yang ada pada folder yang ada dalam folder tempat html anda berada. Misalkan saja kita membuat sebuah folder dengan nama Image di dalam folder tempat kita meletakkan file html. maka kodingnya akan menjadi seperti berikut :

<img src="image/gambar.jpg" width="250" alt="ini adalah gambar">


Penjelasan : 
  • src digunakan untuk memanggil file foto atau gambar
  • width digunakan untuk menentukan lebar foto
  • alt digunakan untuk memunculkan tulisan apabila cursor berada di atas file gambar atau foto

Sekian posting saya kali ini, semoga dapat membantu.
Selamat Mencoba!!

Minggu, 16 Desember 2012

Belajar Dasar Pemrograman Web HTML

Mari kita belajar dasar pemrograman web HTML. Saat sekarang ini website bukanlah hal yang wah lagi bagi kita. sudah banyak yang bisa membuat website dengan berbagai cara, salah satunya adalah dengan pemrograman web. pemrograman web biasanya berbasis HTML, PHP dan CSS. untuk memulai pemrograman web kita bisa memulai dari belajar pemrograman HTML, langkah pertama kita harus mengetahui struktur penulisan koding HTML. berikut stuktur penulisan koding HTML.

Struktur Penulisan HTML

<html>
    <head>
        <title></title>
    </head>
    <body>
       
    </body>
</html>

Langkah-langkah dalam menulis HTML :
  • Penulisan koding html harus dimulai dengan tag <html> dan ditutup dengan tag </html>
  • didalam tag <html> terdapat tag <head> dan ditutup dengan </head>,  di dalam tag <head> kita bisa membuat judul untuk web kita seperti gambar dibawah.
  • di dalam tag <head> terdapat tag <title> dan ditutup dengan </title> yang berfungsi untuk memberi judul pada web html yang kita buat.
  • selanjutnya didalam tag <html> juga terdapat tag <body> yang ditutup dengan </body>, di bagian tag <body> ini kita dapat mengisi dengan isi yang akan kita tampilkan di web kita.

Latihan HTML Pertama

1. buka notepad kemudian ketikkan kode dibawah ini
<html>
    <head>
        <title>Belajar Pemrograman WEB</title>
    </head>
    <body>
        ini adalah web html pertama saya
    </body>
</html>
2. simpan dengan nama "latihan.html" (menggunakan tanda kutip)
3. setelah disimpan jalankan dengan cara double klik file yang sudah kita buat tadi.


berikut hasilnya

Belajar Dasar Pemrograman Web HTML
Belajar Dasar Pemrograman Web HTML