Warung Bebas
Tampilkan postingan dengan label Website. Tampilkan semua postingan
Tampilkan postingan dengan label Website. Tampilkan semua postingan

Senin, 12 Maret 2012

Belajar HTML dari dasar bagian 3

Baris dan Paragraf
Biasanya dalam membuat baris kita menggunakan tombol Enter, tetapi dalam pembuatan kode HTML biarpun tombol Enter di tekan baris tidak akan berpindah ke bawahnya dan membentuk baris baru.jika anda mengetikan kode seperti ini di Notepad 
baris 1
baris 2
baris 3
Maka hasilnya akan tetap 1  baris bukan 3 baris seperti ini
Lantas bagaimana caranya  ? Gunakan tag <br> tanpa tag penutup Contoh ketikan kode di Notepad seperti ini 
<html>baris 1 <br>
baris 2<br>
baris 3<br></html> dan simpan dengan nama Baris.html. lihat hasilnya di bawah

Berikutnya kita akan belajar membuat paragraph. Gunakan tag <p> Contoh tag
<p>Ini paragraph pertama <p>Ini paragraaf kedua<p>Ini paragraph ketiga
Hampir sama dengan membuat baris Cuma kalau baris jarak antara barisnya lebih dekat di banding paragraph. Dalam tag untuk membuat paragraph juga di kenal tag <dd> untuk membuat paragraph agak menjorok kedalam. Tambahkan tag <dd> pada awal paragraph seperti ini contoh ketikan kode seperti ini
<dd>Hampir sama dengan membuat baris Cuma kalau baris jarak antara <br>barisnya lebih dekat di banding paragraph. Dalam tag untuk membuat paragraph juga di kenal.
Simpan dengan nama Dd.html dan buka di browser dan lihat hasilnya

Tanda melingkar pada gambar di atas menunjukan bahwa paragraph dengan tag <dd> hasilnya akan menjorok kedalam. Masih ada lagi tag untuk paragraph yaitu<BLOCKQUOTE> <DL><DT>. Saya jelaskan dulu untuk tag <BLOCKQUOTE> fungsinya untuk membuat semua paragraph agak menjorok ke dalam. Contoh ketikan kode seperti ini di notepad :
<blockquote>Hampir sama dengan membuat baris Cuma kalau baris jarak antara <br>barisnya lebih dekat di banding paragraph. Dalam tag untuk membuat paragraph juga di kenal.
Sedangkan tag <DL> fungsinya untuk menandai di mulai dan di akhirinya daftar definisi, disini kita tambahkanlagi tag <DD>  dan <DT>.fungsinya untuk apa ? ikuti terus pembelajaran ini. Kita akan belajar membuat daftar definisi. Tag <DL> di letakan di awal paragraph lalu tag <DT> kemudian tag <DD>  dan paragrafnya Contoh ketikan di Notepad dan simpan dengan nama DL.html
<DL>
<DT><B>Pengertian Komputer </B>
<DD>Istilah komputer (computer) diambil dari bahasa Latin  computare  yang berarti menghitung (to compute). Dengan demikian komputer  dapat diartikan sebagaialat hitung. Komputer bukan sekedar mesin hitung tetapi komputer mempunyai kemampuan yang dapat membantu manusia dalam menyelesaikan pekerjaan.</DL>
<DL>
<DT><B>Internet</B>
 <DD>Internet  (Interconnected Network) merupakan jaringan komputer yang terdiri dari ribuan jaringan komputer independen yang dihubungkan antara satu dengan yang lainnya</DL>.Hasilnya seperti di bawah ini
Pada teks pengertian computer dan internet tertulis tebal sedangkan isi definisinya semua barisnya agak menjorok kedalam.

Penomoran
Ada dua macam penomoran yaitu daftar tak berurut(Bullet) dan daftar berurut(Numbering).

Contoh daftar tak berurut (Bullet)
  • Daftar satu
  • Daftar dua
  • Daftar tiga

Contoh daftar berurut( Numbering)

1  Daftar satu
2  Daftar dua
3  Daftar tiga
Untuk membuat daftar item berurut gunakan tag <UL> sedangkan untuk daftar berurut gunakan tag <OL> dan setiap itemnya di tandai dengan tag <LI>

Contoh daftar item tak berurut

<UL>

<LI>Daftar satu</LI>

<LI>Daftar dua</LI>

<LI>Daftar tiga</LI>

</UL> . Ketikan di notepad dan simpan dengan nama LI.html maka hasilnya seperti di bawah ini
Contoh daftar item berurut
<oL>
<LI>Daftar satu</LI>
<LI>Daftar dua</LI>
<LI>Daftar tiga</LI>
</oL>.
Ketik di notepad maka hasilnya seperti di bawah ini
Kita pun dapat membuat daftar item bertingkat dengan menambahkan tag <UL> untuk item tak berurut dan tag<OL> untuk daftar berurut. Kita letakan tag penambahan tsb di tingkat bawah setelah item.
Contoh ketikan kode seperti ini dan simpan dengan nama item tingkat.html
<oL>
<li>Daftar belanjaan</li>
<uL>
<li>Bawang</li>
<li>Brambang</li>
<li>Merica</li>
<li>Ketumbar</li>
<ul>
<li>Beli di pasar karanganyar</li>
<li>Beli di pasar Thengok</li>
<li>atau di pasar Kejawang</li></ul>
</ul>
</oL>
lalu buka di browser hasilnya seperti ini
Dari daftar item di atas secara default memunculkan item Bullet dengan tanda lingkaran dan kotak hitam. Sebenarnya kita bisa mengatur sendiri tanda item di atas dengan menambahkan tag “circle” untuk lingkaran bolong , “square”untuk kotak hitam dan “disc” untuk lingkaran hitam Contoh kodenya begini..
<oL>
<li>Daftar belanjaan</li>
<uL type="square">
<li>Bawang</li>
<li>Brambang</li>
<li>Merica</li>
<li>Ketumbar</li>
<ul type="disc">
<li>Beli di pasar karanganyar</li>
<li>Beli di pasar Thengok</li>
<li>atau di pasar Kejawang</li></ul>
</ul>
</oL>
Hasilnya anda bisa lihat di browser seperti pada gambar di bawah
Untuk item Numbering anda bisa mengganti type dengan Simbol 1,a,A,I. Jika di terapkan di kode maka dalam browser hasilnya seperti  di bawah ini
Membuat link
Link adalah teks yang apabila di klik akan membawa kita ke suatu halaman. Disini saya akan mengajarkan cara membuat link  Sederhana seperti  ini
Ketikan kode di notepad <a href=”http://amir-silangit.blogspot.com”>Blog saya</a>. Akan menghasilkan link dengan teks Blog saya yang apabila di klik akan menuju Blog saya ini. Saya anjurkan pengetikan teks nama blog atau situs lengkap dengan http,titik dua dan slash 2. Jangan lupa tambahkan tanda petik sebelum dan sesudah nama situs. Jangan sampai salah pengetikan kode karena jika salah biarpun Cuma 1 karakter hasilnya link  tidak tampil atau tak bisa di klik.


Membuat table
Untuk cara membuat table sudah saya artikelkan di blog ini, Silahkan lihat disini    


Memasukan gambar
Gambar berfungsi untuk memperjelas artikel atau memperindah tampilansuatu situs atau blog. Lalu..bagaimana caranya untuk memasukan gambar tersebut ? caranya sudah saya artikelkan di blog saya ini. Klik disini Untuk mempelajarinya.
Untuk cara Memasukan teks dalam kotak klik disini
Untuk cara membuat teks dan gambar /banner berjalan klik disini
Cukup segini sajalah…kalau anda bisa semua itu lebih dari cukup…selanjutnya anda bisa belajar dari sumber sumberlain yang pastinya trik HTML masih banyak sekali. Silahkan beri komentar bagaimana artikel yang saya buat. Apakah bisa di mengerti atau kurang paham…thanks
Semoga membantu.
Salam.
Amir.

Bagian 1 2 3

Jumat, 02 Maret 2012

Belajar HTML dari dasar bagian 2

kurung runcing,tanda dan (&) tanda petik (“) plus (+) dll. Dalam posting blog jika kita ingin menampilkan notasi tsb tidak bisa langsung menuliskanya karena hasilnya tidak akan muncul. Caranya yaitu dengan menambahkan kode kode. Lihat daftar kode untuk notasi di bawah
< kurung runcing buka &lt;
> kurung runcing tutup &gt;
& dan &amp;
" tanda petik ganda &quot;
+ tanda plus minus &plusmn;
© hak cipta atau copyright &copy;
® terdaftar atau registered &reg;
Jika tag tsb di tuliskan di notepad hasilnya seperti di bawah

Warna tulisan
Sekarang kita akan memberi efek warna pada Tulisan dan latarbelakang atau background. Untuk member warna pada Tulisan gunakan tag  <font color=”warna”> Tulisan Disini</font> Contoh
<font color=”blue”> Tulisan ini berwarna biru</font>
<font color=”#000000”> Tulisan ini berwarna  hitam</font>
<font color=”#FFFF00”> Tulisan ini berwarna kuning</font>
Ketikan di Notepad dan simpan dengan nama Fontcolor.html. Lihat hasilnya di bawah

Selain dengan nama warna dalam bahasa inggris anda juga bisa member nama warna dengan angka heksa. Tambahkan tada pagar (#) sebelum kode. di bawah adalah daftar angka heksa untuk warna.
black #000000 
blue #0000FF
olive #808000
white #FFFFFF
fuchsia #FF00FF
green #008000
red #FF0000
gray #808080
teal #008080
yellow #FFFF00
silver #C0C0C0
navy #000080
lime #00FF00
maroon #800000
purple #800080
aqua #00FFFF
Selain atribut color kita juga bisa menambahkan atribut lainya misal jenis font (face),ukuran font (size) Contoh ketikan kode di bawah di Notepad
<font color=”blue” size=”2” face=”helvetica”> Tulisan ini berwarna biru jenis Helvetica dan berukuran 2</font>.  Ada banyak macam font seperti Helvetica,verdana,arial,Harrington,impact dll. Simpan dengan nama atributfont.html dan buka di browser, Lihat hasilnya di bawah.

Ukuran Tulisan
Kita akan belajar membuat ukuran tulisan dengan tag <H1></H1>. Ada 6 ukuran tulisan dari H1 yang paling besar dan H6 paling kecil. Contoh ketikan kode seperti ini 
<h1>Ini huruf ukuran 1</h1>
<h2>Ini huruf ukuran 2 </h2>
<h3>Ini huruf ukuran 3 </h3>
<h4>Ini huruf ukuran 4 </h4>
<h5>Ini huruf ukuran 5 </h5>
<h6>Ini huruf ukuran 6 </h6>. Simpan dengan nama atributfont.html dan buka di browser maka hasilnya seperti di bawah ini.

Untuk background atau latar belakang tambahkan tag <body bgcolor=”disini warna”></body> Contoh ketikan kode seperti ini di notepad seperti ini
<body bgcolor="blue" text="black"> Tulisan ini berwarna hitam dengan latar belakang biru <body>. Simpan dengan nama Background.html dan buka di browser. Lihat hasilnya di bawah.

Untuk memberi ketebalan huruf gunakan tag <b></b>
Untuk memiringkan huruf gunakan tag <i></i>
Dan untuk member garis bawah huruf gunakan tag <u></u>
Contoh  ketikan kode di bawah pada Notepad
<b>ini tulisan tebal</b><i>ini tulisan miring</i><u>dan ini tulisan bergaris bawah</u>. Simpan dengan nama Biu.html dan lihat hasilnya di bawah

Bagian 3 

  • Rahasia mencari uang di internet akhirnya di ungkap + Bonus pulsa Rp 50.000 klik disini
  • Promosikan bisnismu 100 x lebih cepat + Bonus pulsa Rp 5.000  klik disini
  • 1 JAM BISA BUAT WEBSITE +Bonus pulsa Rp 5.000 klikdisini 

Belajar HTML dari dasar bagian 1

  HTML adalah suatu teks dokumen biasa dalam bentuk kode  yang bisa di terjemahkan oleh browser menjadi berbagai bentuk tulisan atau gambar. Pengetahuan tantang HTML merupakan  yang paling mendasar sebagai  modal paling utama jikalau anda ingin belajar membuat website. HTML ( Hypertext markup language) dalam blogpun perlu di mengerti untuk mengatur tampilan agar blog bisa lebih menarik di lihat. Juga sebelum mempelajari pemrograman misal bahasa PHP,C,C++ anda harus mengetahui tag tag HTML terlebih dahulu supaya pembelajaran menjadi lebih mudah. Dalam tag HTML  kita akan mengenal tag pembuka yang menyatakan bahwa ini adalah halaman HTML yaitu <HTML> dan tag penutupnya yang sebelum hurufnya di tambah tanda slash </HTML>. Kemudian tag title <TITLE> </TITLE> yang menyatakan bahwa ini adalah sebuah judul dan tag Body  <BODY>  </BODY>  yang menyatakan bahwa ini adalah isi dari dokumen HTML dan <HEAD></HEAD>   yang menyatakan bahwaini adalah bagian kepala dokumen.Dalam pembuatan tag HTML harus di akhiri dengan ekstensi htm atau html dan penulisan kode HTML  juga tidak boleh salah biarpun satu karakter karena jika salah maka browser tidak bisa menterjemahkanya . Ingat..htm atau html untuk ekstensinya. Penulisan kode ini tidak pengaruh case sensitive atau huruf besar/kecil  tetapi pengaruh pada nama file misal Center.html dengan CENTER.HTML itu beda. Sedangkan <html> dengan <HTML> juga <Html> hasilnya sama saja.
OK…langsung saja…
Kita akan belajar membuat peletakan paragraph dengan tag.
Format teks/tulisan
Pertama kita akan membuat tulisan judul dokumen.Ketikan di editor html misal Notepad. Cara membukanya klik Start > All programs > Acessories > Notepad kode tersorot di bawah ini
<HTML><HEAD><TITLE>Belajar HTML</TITLE></head></html>. Simpan dengan nama Head.html pada folder misal My Documents dan buka di browser caranya pada menu file klik Openfile atau Ctrl+O dan pilih folder tadi maka hasilnya seperti di bawah ini
 

Tulisan rata di sebelah kanan dengan tag <p align=”right”> .
Tulisan rata kiri dengan tag <p align=”left”>.
Rata tengah <p align=”center”>.
Tulisan ini rata kiri dan kanan <p align=”justify”>
Ketikan kode seperti ini
<pre><p align="left">Tulisan ini di kiri
<p align="center">Tulisan ini ditengah
<p align="right">Sedangkan ini di kanan
Simpan dengan nama Align.html dan buka di browser maka hasilnya seperti di bawah


Tag  <pre> di atas maksudnya adalah untuk menganggap bahwa spasi adalah spasi,Enter adalah enter sedangkan Contoh di atas merupakan penggunaan tag <pre> sebelum pengetikan kode. Anda perhatikan setelah kata  “di kiri” seharusnya di tambahkan tag <br> untuk membuat atau pindah ke baris baru tetapi karena sudah ada tag <pre> maka tag<br> tak lagi di tambahkan. Untuk menuliskan spasi itu sendiri harus dengan kode html yaitu &nbsp; . Coba anda praktekan sendiri mengetikan kode tanpa mengetikan kode &nbsp;. Contoh ketikan kode di Notepad seperti ini 
ini&nbsp;jaraknya&nbsp;satu&nbsp;spasi <br>
sedangkan&nbsp;&nbsp;&nbsp;ini&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;spasi <br>
dan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ini&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spasi.
Maka hasilnya seperti di bawah ini

ini jaraknya satu spasi
sedangkan   ini   3   spasi
dan       ini       7       spasi.

Bagian 1  2  3 
  • Rahasia mencari uang di internet akhirnya di ungkap + Bonus pulsa Rp 50.000 klik disini
  • Promosikan bisnismu 100 x lebih cepat + Bonus pulsa Rp 5.000  klik disini
  • 1 JAM BISA BUAT WEBSITE +Bonus pulsa Rp 5.000 klikdisini 

Senin, 30 Januari 2012

Cara membuat website dengan mudah

  Pelajari 3 langkah jitu membuat website dengan cepat,Mudah dan Murah sekarang juga.
KLIK DISINI Jika Anda Capek dan Bosan, dengan berbagai iming-iming dan peluang
yang ditawarkan di internet, sementara anda bahkan BELUM bisa membuat
website sendiri... maka perhatikan yang BARU ini...


  •  Rahasia mencari uang di internet akhirnya di ungkap + Bonus pulsa Rp 50.000 klik disini
  • Promosikan bisnismu 100 x lebih cepat + Bonus pulsa Rp 5.000  klik disini
  • 1 JAM BISA BUAT WEBSITE +Bonus pulsa Rp 5.000 klikdisini 

Senin, 23 Januari 2012

Cara membuat banner berjajar

Langsung..ga usah basa basi.
1.    Contoh efek default/standar yang bergerak dari kanan ke kiri.
Tagnya :
<marquee><a href=" Disini tempat link tujuan "><img src="Disini tempat kode banner ”/></a></marquee>

2.    Contoh Efek berhenti jika mouse di arahkan ke banner
Tagnya:
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><a href=" Disini tempat link tujuan  "><img src="Disini tempat kode banner” /></a></marquee>
Selanjutnya anda bisa berkreasi sendiri…
Selamat mencoba
Salam
Amir.

 

Kaya dari Internet Copyright © 2012 Fast Loading -- Powered by Blogger