Sunday, November 5, 2017
Belajar HTML Dasar 2
Belajar HTML Dasar 2
Belajar HTML Dasar-2
MATERI :
Element B(bold), Element I(italic), Element (underline), Element BR(line break), Perintah tag <BLOCKQUOTE>, Preformatted Text <PRE>,Element H1,H2,H3,H4,H5,H6 <header>, Element ukuran font <FONT SIZE>, Element CENTER, Element BASEFONT, Element FONT, Membuat jenis huruf yang diinginkan dengan menggunakan Atribut FACE , Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan, Element HR(horizontal rule)
Objektif :
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks.
Element B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
Sintaks:
<b>
..........................
</b>
Element I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
Sintaks:
<i>
..........................
</i>
Element U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:
<u>
..........................
</u>
Element HR (Horizontal Rule)
Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid).
Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>
Begin Row (BR) atau Line Break
Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya.
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.
Sintaks:
<br>
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Ada 3 jenis payment processor yang sangat direkomendasikan untuk melakukan transaksi bagi pelaku bisnis secara online, contohnya yaitu : <BR>PayPal <BR>AlertPay <BR>LibertyReserve </BODY>
</HTML>
Element H1,H2,H3,H4,H5,H6 (Header)
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi horizontal dari header (default: "left").
Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>
x : 1 ... 6
Perintah tag Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Google Analytics</H3>
<BLOCKQUOTE>
Tool ini adalah milik Google yang mempunyai fiture yang cukup lengkap dan sangat handal, sehingga sangat banyak digunakan oleh para webmaster. Anda tidak perlu membayar untuk memakai tool ini, Tool ini cukup canggih digunakan untuk melacak keyword pengunjung blok Anda. </BLOCKQUOTE>
</BODY>
</HTML>
Preformatted Text <pre>
Element PRE berfungsi untuk menampilkan teks seperti apa adanya.
Sintaks:
<pre>
..........................
</pre>
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks ( misalnya tentang Google AdSense ).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
Sebagian besar blogger yang menambahkan fasilitas Google AdSense biasanya berfikir untuk menjadikan blognya sebagai monetize blog. Kadang Website dalam bentuk CMS juga dioptimasi agar bisa mendatangkan traffic sebanyak-banyaknya yang pada gilirannya meningkatkan peluang penambahan pendapatan di AdSense. </PRE>
</BODY>
</HTML>
Element BASEFONT
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3" pixel. Element ini tidak mempunyai tag penutup.
Sintaks:
<basefont size="pixel">
Element CENTER
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.
Sintaks:
<center>
Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = "Arial">Arial, contoh Hobi ngenet dapat duit<P>
<FONT FACE = "Verdana">Verdana , contoh Tips internet marketing <P>
<FONT FACE = "Times New Roman">Times New Roman, contoh Tips SEO<P>
</BODY>
</HTML>
Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = "green">AD Network<P>
<FONT COLOR = "#00FF00">Apartement Locator<P>
<FONT COLOR = "#0000FF">Art Supply Store<P>
</BODY>
</HTML>
LATIHAN :
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser favorit Anda
Latihan 1:
Menampilkan teks dengan ganti baris (element BR):
Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan JSP
Belajar bahasa pemrograman web.
Dengan materi dasar HTML.
Dan JSP.
Nama file: latihan2_1.html
<html>
<head>
<title>Latihan2-1</title>
</head>
<body>
Belajar bahasa pemgrograman web. Dengan mater dasar HTML. Dan JSP. <br>
<br>Belajar bahasa pemrograman web.<br>Dengan materi dasar HTML.<br>Dan JSP.
</body>
</html>
Latihan 2:
Menampilkan teks dalam bentuk paragraf (element P):
Tampilan teks sebelum paragraf.
Tampilan teks paragraf pertama.
Tampilan teks paragraf kedua.
Tampilan teks setelah paragraf.
Nama file: latihan2_2.html
<html>
<head>
<title>Latihan2-2</title>
</head>
<body>
Tampilan teks sebelum paragraf.
<p>Tampilan teks paragraf pertama.</p>
<p>Tampilan teks paragraf kedua.</p>
Tampilan teks setelah paragraf.
</body>
</html>
Tugas tambahan:
Gantilah setiap tag </p> dengan element BR, dan lihat hasilnya.
Latihan 3:
Menampilkan posisi horizontal kelurusan paragraf:
Paragraf ini pada posisi rata kiri (default)
Paragraf ini pada posisi rata tengah
Paragraf ini pada posisi rata kanan
Paragraf ini pada posisi rata kiri
Nama file: latihan2_3.html
<html>
<head>
<title>Latihan2-3</title>
</head>
<body>
<p>Paragraf ini pada posisi rata kiri (default)</p>
<p align="center">Paragraf ini pada posisi rata tengah</p>
<p align="right">Paragraf ini pada posisi rata kanan</p>
<p align="left">Paragraf ini pada posisi rata kiri</p>
</body>
</html>
Latihan 4:
Menampilkan teks sebagai header (element H):
Ini Heading-1
Ini Heading-2
Ini Heading-3
Ini Heading-4
Ini Heading-5
Ini Heading-6
Nama file: latihan2_4.html
<html>
<head>
<title>Latihan2-4</title>
</head>
<body>
<h1>Ini Heading-1</h1>
<h2>Ini Heading-2</h2>
<h3>Ini Heading-3</h3>
<h4>Ini Heading-4</h4>
<h5>Ini Heading-5</h5>
<h6>Ini Heading-6</h6>
</body>
</html>
Tugas tambahan:
Tempatkanlah tampilan isi element H3 di kanan dan H5 di tengah.
Latihan 5:
Menampilkan teks dalam format tebal, miring dan garis bawah:
Ini normal teks
Ini teks tercetak tebal (bold)
Ini teks tercetak miring (italic)
Ini teks tercetak garis bawah (underline)
Nama file: latihan2_5.html
<html>
<head>
<title>Latihan2-5</title>
</head>
<body>
Ini normal teks<br>
<b>Ini teks tercetak tebal (bold)</b><br>
<i>Ini teks tercetak miring (italic)</i><br>
<u>Ini teks tercetak garis bawah (underline)</u>
</body>
</html>
Tugas tambahan:
Buat teks tercetak miring dan tebal.
Latihan 6:
Menampilkan teks dalam bentuk apa adanya (element PRE):
Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis
Nama file: latihan2_6.html
<html>
<head>
<title>Latihan2-6</title>
</head>
<body>
<pre>
Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis
</pre>
</body>
</html>
Latihan 7:
Menampilkan teks pada posisi tengah jendela web browser (element CENTER):
Teks ini terletak di tengah layar web browser
dengan menggunakan element CENTER
Nama file: latihan2_7.html
<html>
<head>
<title>Latihan2-7</title>
</head>
<body>
<center>
Teks ini terletak di tengah layar web browser<br>
dengan menggunakan element CENTER
</center>
</body>
</html>
Latihan 8:
Menampilkan teks berdasarkan element BASEFONT:
Teks ini mempunyai size = 1
Teks ini mempunyai size = 2
Teks ini mempunyai size = 3
Teks ini mempunyai size = 4
Teks ini mempunyai size = 5
Teks ini mempunyai size = 6
Teks ini mempunyai size = 7
Nama file: latihan2_8.html
<html>
<head>
<title>Latihan2-8</title>
</head>
<body>
<basefont size="1">Teks ini mempunyai size=1<br>
<basefont size="2">Teks ini mempunyai size=2<br>
<basefont size="3">Teks ini mempunyai size=3<br>
<basefont size="4">Teks ini mempunyai size=4<br>
<basefont size="5">Teks ini mempunyai size=5<br>
<basefont size="6">Teks ini mempunyai size=6<br>
<basefont size="7">Teks ini mempunyai size=7
</body>
</html>
Latihan 9:
Menampilkan teks dengan menggunakan element FONT:
Teks dengan format color=fuchia; size=+2; face=verdana
Teks dengan format color=gray; size=6; face=algerian
Teks dengan format color=red; size=-1; face=impact
Nama file: latihan2_9.html
<html>
<head>
<title>Latihan2-9</title>
</head>
<body>
<font color="fuchsia" size="+2" face="verdana">
Teks dengan format color=fuchsia; size=+2; face=verdana<br>
</font>
<font color="gray" size="6" face="algerian">
Teks dengan format color=gray; size=6; face=algerian<br>
</font>
<font color="red" size="-1" face="impact">
Teks dengan format color=red; size=-1; face=impact
</font>
</body>
</html>
Latihan 10:
Menampilkan garis horizontal menggunakan elemen HR:
Nama file: latihan2_10.html
<html>
<head>
<title>Latihan2-10</title>
</head>
<body>
<hr align="left" size="6" width="30%">
<hr align="left" size="6" width="30%" noshade>
</body>
</html>
Available link for download
Friday, October 20, 2017
Belajar HTML tingkat lanjutan 2
Belajar HTML tingkat lanjutan 2
HTML-Tingkat lanjutan 2
Setelah Anda mempelajari HTML-Tingkat lanjutan 1 pada postingan ini sebelumnya mudah-mudahan Anda sudah memahami tentang elemen – element utama HTML tentang Format Font dan Text, , sekarang saya akan memaparkan tentang fungsi-fungsi elemen Hyperlink, Background , Alternatif link gambar , menentukan posisi gambar pada tingkatan HTML-lanjutan 2 ini, yang tentunya akan dibutuhkan jika Anda ingin memanipulasi content website Anda agar dengan mudah Anda memaksimalkan teknik SEO untuk mempromosikan website atau blog Anda.
Hyperlink HTML
Hyperlink digunakan untuk menghubungkan antar halaman 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://wordpress.htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>
Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html Anda dan harus tahu nama dan extentionnya, 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 gb. ini maka Anda akan dibawa ke Yahoo."><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>
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>
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">
Memasukan grafik atau gambar.
Memasukan gambar bisa dari harddisk CPU kita ataupun dari URL.untuk memasukangambar kedalam halaman web kode HTML yang dipakai adalah
<img src="alamat url gambar">
Untuk mengambil gambar menggunakan link URL, kita bisa menggunakan penyedia jasa penyimpanan gambar seperti photo bucket atau image schack, yang nantinya kita akan ambil link penyimpanan gambarnya untuk kita panggil dihalaman web kita, contohnya seperti ini, jika kita sudah mengupload gambar kita disalah satu penyedia jasa penyimpanan gambar tersebut maka yang harus kita lakukan adalah meng-copy paste direct link gambar tersebut. Contohnya direct link dari gambar
yang telah diupload adalah :
http://img665.imageshack.us/img665/3066/flower250x150.gif
maka untuk memanggilnya :
<img src=http://img665.imageshack.us/img665/3066/flower250x150.gif
Menentukan posisi gambar align
Untuk membuat gambar bisa berada diposisi kanan, kiri atau tengah maka kode HTML
yang digunakan adalah align="posisi gambar yang diinginkan" contohnya berikut ini :
<img src="http://img665.imageshack.us/img665/3066/flower250x150.gif" align="left">
untuk menentukan posisi gambar juga bisa menggunakan cara seperti ini :
<center><img src="http://img665.imageshack.us/img665/3066/flower250x150.gif" align="left"></center>
Memberikan keterangan pada gambar "Alt"
Jika Anda melihat gambar pada halaman Web, apabila kursor mouse mengenai gambar maka akan muncul keterangan pada gambar tersebut, agar gambar yang kita masukan kedalam web ada keterangan gambarnya, maka kode HTML yang digunakan adalah "alt" atau disebut juga alternative, dengan menambahkan keterangan pada gambar bisa membantu website kita cepat terindex oleh search engine google. Contohnya sebagai berikut :
<img src="http://img665.imageshack.us/img665/3066/flower250x150.gif” alt="keterangangambar">
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif atau .jpg 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">Halo semua Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Masukanlah gambar yang menarik bagi Anda...</font></p>
</body>
</html>
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://i1188.photobucket.com/albums/z405/ animated_favicon1.gif"> <p>Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain!</p> <p>semoga dapat memperindah tampilan website Anda…</p> </body> </html>
Untuk mempelajari HTML tingkat mahir silahkan Anda kunjungi disini…
Available link for download
Sunday, August 13, 2017
Belajar HTML Dasar 3
Belajar HTML Dasar 3
Belajar HTML-Dasar 3
Setelah Anda mempelajari HTML – Dasar 2 pada blok ini mengenai element-element text, kali ini saya akan mencoba memaparkan tentang mengenai elemen-elemen dasar Link <A> mudah-mudahan dengan mempelajari bagian ini anda dapat memahami penggunaan element-element untuk menghubungkan ke internal atau eksternal halaman web dan juga dilengkapi dengan elemen Daftar urutan yang nantinya berguna untuk membuat website atau blog Anda lebih kelihtan rapi.
Link/AnchorLink <A>
Objektif :
Setelah mempelajari materi Link ini diharapkan anda dapat memahami penggunaan element-element untuk menghubungkan ke internal atau eksternal halaman web.
Element :
Element </A>
Element </a> , befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target. Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.
Sintaks:
<a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self">
...........................
</a> -------------
Element </a> sering disebut juga dengan perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>.
Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A NAME="traffic">3 Cara meningkatkan traffic blog :</A>
<BLOCKQUOTE>
<P>1.Pakai Teknis SEO,<A HREF="http://bisnisonlinetop1.blogspot.com/2011/05/cara-cerdas-meningkatkan-pagerange.html">Baca selengkapnya</A>
<P>2.Niche Content
<P>3.Gratiskan apa yang bisa digratiskan
<P>
<A HREF="http://bisnisonlinetop1.blogspot.com/2011/05/keyword-teknis-seo.html">Untuk penjelasan lebih lanjut silahkan klik disini</A>
</BLOCKQUOTE>
<P><A NAME="traffic">link no error</A>
<BLOCKQUOTE>
<P>Pastikan tidak ada link yang error di blok Anda
<BR>Tidak kebayangkan pengunjung yang kecewa dan pergi karena ada link yang rusak.
</BLOCKQUOTE>
<P><A HREF="http://bisnisonlinetop1.blogspot.com/2011/05/seo-anchor-text-dan-teknis-optimasi-seo.html">Untuk cara teknis SEO baca selengkapnya</A>
<BLOCKQUOTE>
<P>Link navigasi blok harus tersusun secara rapi
<BR>Dan tidak membingungkan pengunjung.
</BLOCKQUOTE>
<P><A HREF="#traffic">kembali ke atas</A>
</BODY>
</HTML>
3 HTML Daftar Urutan
Objektif :
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.
Element :
Element OL(ordered list), Element UL(unordered list), Element LI(list item).
1. Element OL (Orderd List).
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.
Sintaks:
<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
</ol>
Ordered list digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara berurut. Ordered list dimulai dengan menggunakan tag <OL> dan diakhiri </OL>. Untuk menyatakan tiap bagiannya digunakan tag <LI> dimana tag ini tidak menggunakan penutup.
Contoh:
<HTML>
<HEAD><TITLE>Ordered List</TITLE></HEAD>
<BODY>
5 situs PTC yang sangat direkomendasikan
<OL>
<LI>NEOBUX <LI>ONBUX <LI>INCREASEBUX <LI>ClikSense <LI>SchnaapKliks </OL>
</BODY>
<HTML>
Ketika menggunakan perintah ordered list maka default penomoran adalah 1, 2, 3, …, Anda bisa mengubah nomor tersebut menggunakan atribut TYPE pada tag <OL>.
TYPE = 1; daftar berurut dengan nomor 1, 2, 3 (default)TYPE = I; daftar berurut dengan menggunakan bilangan Romawi besar (I, II, III, IV, …)TYPE = I; daftar berurut dengan menggunakan bilangan Romawi huruf kecil (i, ii, iii, iv, …)TYPE = A; daftar berurut dengan menggunakan abjad besar (A, B, C, D, …)TYPE = a; daftar berurut dengan menggunakan abjad kecil (a, b, c, d, …)
Selain mengubah jenis penomoran, HTML juga menyediakan perintah untuk menentukan nilai awal penomoran. Atribut yang digunakan adalah START = n, dimana n adalah nilai awal penomoran.
Contoh:
<HTML>
<HEAD>
<TITLE>OL atribut type</TITLE>
</HEAD>
<BODY>
<OL TYPE=A>
<LI>Tiga Payment Processor Yang Legitimasi : <OL TYPE=I>
<LI>PayPal <LI>AlertPay
<LI>LibertyReserve
</OL><LI>Tiga Lainnya : <OL TYPE=1 START=4>
<LI>Netteler <LI>HooPays <LI>WebMoney
</OL>
</BODY>
<HTML>
2. Element UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.
Sintaks:
<ul type="circle"|"square"|"disc">
..........................
</ul>
Berbeda dengan ordered list, dalam unordered list tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi defaultdalam unordered list. Untuk membuat daftar dengan tanda ini digunakan tag awal <UL> dan tag akhir </UL>. Sama seperti ordered list, untuk tiap-tiap bagian digunakan <LI> tanpa tag penutup.
Contoh:
<HTML>
<HEAD>
<TITLE>Element Unordered List</TITLE>
</HEAD>
<BODY>
Tiga Situs Bisnis Internet <UL>
<LI>PTC ( Paid To Click )
<LI>PTSurv. ( Paid To Surveys )
<LI>PPC ( Paid Per Click )
</UL>
</BODY>
<HTML>
Selain default tanda bullet, Anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak. Caranya dengan menggunakan atribut TYPE pada tag <UL>
Contoh:
<HTML>
<HEAD>
<TITLE>Element UL dengan atribut</TITLE>
</HEAD>
<BODY>
Jenis bisnis Internet Marketing <UL TYPE=square>
<LI>Ad Network <LI>Art Supply Store <LI>Amazon <LI>etc.
</UL>
</BODY>
<HTML>
3. Element LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.
Sintaks:
<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
..........................
</li>
Sampai disini saya harap Anda sudah dapat memahami seluiruh element dasar utama pada program HTML, untuk lebih memperdalamnya lagi silahkan Anda melanjutkannya ke tingkat lanjutan …!!!
Available link for download
Thursday, May 25, 2017
Belajar HTML tingkat lanjutan 1
Belajar HTML tingkat lanjutan 1
HTML Tingkat lanjutan 1
Jika Anda baru terjun di dunia maya khususnya ingin mengikuti bisnis secara online alias pemula (newbie) diharuskan Anda belajar tentang program web HTML. Di blog-bisnisonlinetop1 ini Anda akan mendapatkan tutorial, tips, triks dan artikel-artikel tentang bagaimana cara belajar HTML untuk membantu Anda dalam menjalani bisnis online tentang bagaimana membuat website agar profesional.
Di Internet sebenarnya kita bisa saja mendapatkan banyak template baik yang gratis maupun yang berbayar, namun untuk lebih baiknya agar Anda dapat memanipulasi tampilan website/blog secara elegan dan profesional khususnya script-script HTML yang berkaitan dengan promosi iklan Anda agar Anda tidak mengalami kesulitan untuk me-reposisikan tampilan-tampilan banner atau gambar, teks Link, dan untuk mempercantik tampilan website/blog Anda.
Di blog-bisnisonlinetop1 ini Anda akan mendapatkan tutorial belajar HTML yang disertai dengan contoh-contoh mulai dari dasar, sehingga akan mudah dipahami dan sangat cocok bagi Anda yang masih pemula.
Sebelumnya sudah dijelaskan pada blog ini tentang belajar dasar-dasar HTML untuk pemula dari dasar 1 , dasar 2 sampai dasar 3, agar Anda lebih mahir lagi mengenai HTML silahkan Anda mempelajari tingkat lanjutannya diblog ini , tentunya Anda sudah mengetahui untuk belajar program HTML Anda dapat menggunakan software program HTML seperti Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera Anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel yaitu Notepad yang sudah dijelaskan sebelumnya di blog ini, jika Anda ingin teks editor yang lebih interaktif Anda bisa menggunakan Notepad.
Dalam belajar sebaiknya Anda langsung praktek di program HTML Anda, sehingga akan lebih mudah untuk dipahami, Anda bisa ketik atau copy/paste contoh-contoh HTML-nya di Notepad program HTML Anda, simpan file dengan extention .html dan tampilkan di browser untuk melihat hasilnya.
Pengenalan HTML lanjutan :
Pengertian singkat tentang HTML
Sebenarnya sudah dijelaskan diblog ini tentang apa itu 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 texs, 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 Exsplorer, 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".
Sebelumnya sudah dijelaskan juga diblog ini tentang contoh suatu dokumen HTML yang sangat sederhana dengan menggunakan software text dokument HTML Notepad, pada bagian ini dijelaskan hanya untuk tingkat lanjutan belajar program 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>
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 penggunaanya 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>
Untuk mengetahui lebih lanjut tentang pemrograman CSS, nanti akan dibuat tutorial khusus untuk membahas hal ini.
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 Program HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku, tapi de-<br>
ngan baris baru.<br>
Ini baris paragraf baru yang lain.</p>
</body>
</html>
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 keduaku,…tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Sampai disini mudah-mudahan Anda memahami apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Kemudian ada <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.
Selanjutnya tag <!–…–> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikasn 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>
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>BELAJAR ITU INDAH</b>
Hari ini...
Aku sedang belajar HTML...
Belajar tentang HTML itu ternyata mudah.
Tidak sulit ntuk dimengerti,
Karena mudah di fahami teks-teks nya.
Tapi saya tetap belajar,… biarlah...
Akan kucoba belajar terus...
Sampai aku mahir.
</pre>
</body>
</html>
Sampai disini semoga Anda benar-benar memahami tentang format font dan paragraf dengan program HTML, untuk lanjutan belajar HTML dengan elemen gambar dan Hypertext silahkan Anda klik disini yaitu Belajar HTML tingkat lanjutan bagian ke 2
Available link for download
Monday, April 24, 2017
Belajar HTML Dasar I
Belajar HTML Dasar I
Dasar-Dasar HTML
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web.mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
- Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.
- Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
Kedua cara diatas memiliki Kelebihan dan kekurangan. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.
Struktur Dasar Dokumen HTML
Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY. Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal<HTML> dan tag akhir </HTML>. Standar penulisannya adalah: <HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
Contoh aplikasinya
Buatlah scrips teks seperti dibawah ini dengan menggunakan NotePad dan simpan filenya dengan nama latihan1.html
<HTML>
<HEAD>
<TITLE>Belajar Dasar-Dasar HTML</TITLE>
</HEAD>
<BODY>
Pelajaran Pertama saya mengenai pemerograman HTML, Ternyata Belajar HTML itu sangat mudah dan mengasyikan</BODY>
</HTML>
Keterangan:
- Tag
<TITLE>digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan. - <BODY> adalah isi dokumen yang akan ditampilkan dibrowser Anda
Untuk melihat hasilnya, silakan jalankan browser favorit Anda, dengan cara membuka file latihan1.html yang sudah Anda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah ini saya menggunakan browser Mozila Firefox :
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML.
Referensi Tag HTML
1. Heading
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.
Sintaks:
<head>
...........
</head>
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
2. Paragraf
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN="right">
Yang harus Anda sadari adalah mencari uang di internet bukanlah bisnis secara riil, tapi sebenarnya kita berhadapan dengan dunia maya, yang perlu Anda cermati hanyalah banyak jebakan dalam dunia maya yang begitu cerdas dan banyak situs-situs web bisnis online yang buat Anda ragu berhasil atau gagal untuk menjalaninya, sehingga banyak orang terperdaya, tertipu dan menyia-nyiakan waktu bahkan uangnya dan akhirnya tidak ada hasil sama sekali, salah satu penyebabnya adalah kurangnya pengetahuan yang mendalam tentang skill tekhnis dan strategy untuk sukses bisnis online. <P ALIGN="center">
Memang, sampai saat ini masih banyak orang tidak percaya bahwa bisnis secara online bisa membuat penggunanya menjadi kaya raya, itu tidak benar, sebab kenyataannya banyak orang menjadikan bisnis online sebagai sumber penghasilannya yang besar, segera ikuti petunjuk-petunjuk yang ada dalam blok saya ini, Anda akan diarahkan bagaimana keberhasilan para interneter kelas lokal maupun dunia yang membangun kekayaan secara bisnis online, dan rahasianya di kupas tuntas disini dan buktikan sendiri hasilnya, karena blog rahasia bisnis online ini adalah intisari dari ratusan situs web bisnis online dengan menggunakan trik dan strategy ampuh agar Anda bisa membangun kekayaan secara online . <P ALIGN="left">
Untuk menjalani bisnis online agar Anda sukses, langkah pertama yang harus Anda lakukan adalah melakukan persiapan. Tahapan ini sangat penting dan Anda harus melakukannya karena dalam artikel ini memberikan Anda bukti keberhasilan bukan saja hanya menambah pengetahuan Anda tentang bagaimana menjalani bisnis online. </P>
</BODY>
</HTML>
Dibawah ini adalah tampilan pada halaman browser dari contoh script diatas :
Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut :
a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
<p>
<b>
................
</b>
</p>
Contoh penulisan tag-tag yang salah
<p>
<b>
................
</p>
</b>
c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.
Sintaks:
<head>
...........
</head>
f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
.........
</title>
g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>
Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.
LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser favorit Anda
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web sangatlah mudah:)
Nama file: latihan1_1.html
<html>
<head>
<title>Latihan1-1</title>
</head>
<body>
Belajar bahasa pemrograman web sangatlah mudah:) </body>
</html>
Tugas tambahan:
Gantilah teks tersebut dengan teks sesuai dengan teks yang Anda inginkan.
Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web sangatlah mudah
Nama file: latihan1_2.html
<html>
<head>
<title>Latihan1-2</title>
</head>
<body text="red">
Belajar bahasa pemrograman web sangatlah mudah:) </body>
</html>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 3:
Merubah warna background menjadi hitam.
Nama file: latihan1_3.html
<html>
<head>
<title>Latihan1-3</title>
</head>
<body text="red" bgcolor="black">
Belajar bahasa pemrograman web sangatlah mudah:)</body>
</html>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html
<html>
<head>
<title>Latihan1-4</title>
</head>
<body text="red" bgcolor="aqua" background="./images/image027.jpg">
Belajar bahasa pemrograman web sangatlah mudah:) </body>
</html>
catatan:
./images/ = nama direktori file gambar disimpan
image027.jpg = nama file gambar
Tugas tambahan:
Cobalah untuk file gambar: image050.jpg, image052.jpg, image058.jpg dan image060.jpg.
Available link for download
Wednesday, March 15, 2017
Belajar Cara Mudah Forex Untuk Pemula
Belajar Cara Mudah Forex Untuk Pemula
Dasar-dasar FOREX bagi pemula
Semoga Blog-bisnisonlinetop1 ini merupakan pilihan yang tepat bagi Anda untuk mempelajari forex, karena di dalamnya telah di sediakan materi pembelajaran forex secara mudah, lengkap, dan ringkas dan dibedakan beberapa tingkatan, tahap pemula hingga mahir dan juga dilengkapi dengan teknik-tekniknya yang sering dipakai para trader yang sudah sudah sukses dalam menjalani bisnis ini.
Pengertian Forex
Forex, Adalah sebuah investasi yang memperdagangkan mata uang satu dengan mata uang lainnya. Merupakan singkatan dari Foreign Exhange atau pertukaran mata uang asing. Jika pada transaksi di money changer atau bank untuk jual beli antara US Dollar dengan Rupiah, maka disebut transaksi Forex Spot (jual beli terjadi ditempat - serah terima terjadi di tempat). Transaksi Forex yang non-Spot adalah transaksi jual beli kontrak mata uang, jadi tidak langsung serah terima barang, hanya kontraknya saja.
Lalu dari mana Anda memperoleh keuntungan dari Forex ini? Secara sederhananya, keuntungan dari Forex ini diperoleh dari nilai selisih ketika kita membeli dan menjual kembali mata uang negara yang bersangkutan. Maka forex trading digolongkan sebagai investasi dengan jangka waktu singkat.
Berikut ini adalah istilah – istilah yang harus diketahui sebelum menjalani bisnis online dalam mengikuti Program Forex :
Lot, Kontrak Mini dan Kontrak Standard / Regular
Jika kita membeli minyak, ukurannya adalah liter, jika gula pasir maka ukurannya adalah kilogram. Untuk forex ukurannya disebut Lot. Berapa sih besar 1 Lot itu? Jika di dunia Saham 1 Lot = 500 lembar saham, pada Forex 1 Lot = 10.000 mata uang bersangkutan, misal 1 Lot USD/JPY = 10.000USD dan 1 Lot GBP/USD = 10.000 GBP. Ukuran 1 Lot = 10.000 disebut Kontrak Mini, mengapa disebut Mini? Karena sebelumnya dalam dunia forex itu 1 Lot = 100.000 mata uang bersangkutan (disebut juga Kontrak Standard/Regular), kemudian karena tingginya minat dalam forex trading maka dibuat kontrak mini dimana 1 Lot = 10.000 mata uang bersangkutan.
Margin
Adalah jaminan dalam trading forex, anggaplah seperti Uang Muka pembelian sebuah rumah. Ketika Anda menyerahkan uang muka pembelian rumah sebesar 30 juta rupiah untuk rumah seharga 100 juta rupiah maka kita mendapatkan Kontrak perjanjian jual beli, secara hukum Anda pemilik sah rumah tersebut meskipun hanya memegang kontraknya. Kontrak ini dapat Anda jual pada harga penuh pada orang lain, misalnya menjadi 120 juta. Anda akan mendapatkan keuntungan bersih 20 juta (120 - 100jt). Hal yang sama berlaku dalam forex, yang diperdagangkan adalah kontrak mata uang, misal USD/JPY maka nilai 1 lot kontraknya adalah USD 10.000, untuk mendapatkannya kita cukup mengeluarkan margin (uang muka) sebesar USD 100. Mengapa USD 100? Ini terkait dengan Leverage yang dibahas di bawah.
Margin Trading. Pada prinsipnya perdagangan forex dengan sistem margin adalah pertukaran atau perdagangan mata uang dengan mata uang lainnya dalam satuan kontrak dengan jaminan atas transaksi ( necessary margin ). Artinya, perdagangan ini tidak melibatkan fisik dari mata uang, melainkan hanya nilainya saja ( akan dibahas lebih rinci di blok ini ). Dengan demikian, investor tidak perlu menyetor modal sebesar nilai fisik transaksinya.
Contoh:
Harga pasar GBP 1 = USD1.8850
Beli: USD 10,000 (1 lot)
Nilai transaksi: USD 18,850 (USD 10,000 x GPB 1.8850)
Initial margin: 1 %
Dibutuhkan dana: USD 100 (1%x USD 10,000)
Ketika harga pasar GPB 1 = USD 1.8950
Jual: USD10,000 (1 lot)
Diperoleh hasil: USD 18.950 (USD 10,000 x GPB 1.8950)
Keuntungan: USD 100 (USD 18.950 - USD 18.850)
Rate of Return: 100% (USD 100/USD 100 x 100%)
Perhatikan, untuk bertransaksi 1 lot cukup dengan dana USD 100, (bukan USD 10,000) dengan nilai kontrak USD 10,000 atau USD 1,000 dengan nilai kontrak 100.000 sebagai jaminan transaksi. Dengan sistem perdagangan margin ini investor bisa mendapat tingkat pengembalian yang jauh lebih besar. Dalam kasus kita di atas mencapai 100%. Sementara jika perdagangan di lakukan dengan sistem fisik, tingkat pengembalian ini hanya 10% (USD 100/USD 10,000 x 100%)
Margin disetorkan saat membuka posisi dan kemudian akan dikembalikan saat menutup posisi, sama seperti transaksi jual beli rumah tadi. Anda menyetor uang 30 juta saat membeli kemudian dijual kembali seharga 120 juta, saat Anda menerima uang 120 juta, maka 100juta kita serahkan pada penjual pertama dan penjual mengembalikan uang muka (modal awal) sebesar 30jt dan kita memiliki uang 30 juta dari modal awal dan kelebihan 20 juta.
Leverage
Adalah daya ungkit dalam trading Forex yaitu rasio untuk menentukan berapa margin (uang muka) yang diperlukan dalam melakukan transaksi, dimana rasio tersebut akan dikalikan dengan kontrak size. Contoh: Leverage 1:200 pada kontrak mini account 10.000 maka margin yang digunakan adalah (1/200) x 10.000 = 50 satuan mata uang yang diperdagangkan.
Jadi ringkasnya Leverage adalah pinjaman dari broker yang diberikan kepada trader, sehingga dana trader memiliki daya beli yang lebih besar. Leverage diartikan sebagai rasio perbandingan, misal 1:1, 1:100, 1:500, dan sebagainya. Artinya, kalau ada dana $100 di leverage 1:100 maka $100 tersebut memiliki kekuatan setara $10.000. Jika leverage 1:500, maka dana $100 tadi memiliki kemampuan untuk melakukan transaksi setara $50.000 atau 500x lipat lebih besar dari nominal dana itu sendiri.
Misal membuka posisi USD/JPY sebesar 1 lot untuk kontrak mini, maka yang dibeli adalah 10.000 USD, margin yang diperlukan adalah sebesar 1/200 x USD 10.000 = USD 50. Jika bertrading dengan GBP/USD maka margin yang digunakan adalah sebesar 50 Poundsterling. Untuk Standard account, kontrak yang digunakan adalah 100.000 dengan Leverage 1:100, jadi 1 lot USD/JPY = USD 100.000 dan margin yang diperlukan 1/200 x USD 100.000 = USD 1000.
Spread
Spread adalah selisih harga jual dan harga beli, misal ; jika kita buy GBPUSD, harganya adalah 1.6153, jika kita Sell, maka harganya adalah 1.6150, berarti selisih harga ( spread ) nya adaldh 3 pips. Semakin kecil Spread lebih menguntungkan para trader di Forex.
Swap
Swap atau juga biasa di sebut interest, adalah bisa di sebut biaya overnight atau juga bisa di sebut bonus overnight, atau transaksi yang menginap. yang di maksud menginap adalah melewati close market jam 4.30, jika posisi belum di close sampai dengan close market, maka akan di berlakukan swap. swap itu bisa plus bisa negatif.
Buy
adalah posisi dalam Forex Trading untuk Beli dan dilakukan jika harga diperkirakan akan naik. Singkatnya beli saat murah dan jual saat mahal, keuntungan Anda adalah selisih antara harga saat beli dengan saat jual kembali
Sell
adalah posisi dalam Forex Trading untuk Jual dan dilakukan jika harga diperkirakan akan turun sehingga ketika harga turun Anda dapat menutup posisi Sell anda dengan Buy yang lebih rendah. Singkatnya seperti konsinyasi, kita jual terlebih dahulu dengan harga mahal (pinjam) dan kemudian kita beli kembali ketika harga murah, selisihnya menjadi keuntungan kita.
Order dan Posisi
Ketika Anda menginginkan untuk membuka posisi anda membutuhkan suatu tempat untuk melakukan "entry" order. ketika anda meng-entry kemudian telah ter-execute maka posisi anda dalam keadaan "open" atau terbuka dan telah bertransaksi dengan real di pasar forex. pada satu point tertentu anda akan melakukan "exit" atau penutupan order dengan meng-close atau menutup posisi yang telah anda transaksikan sebelumnya. Posisi anda bisa jadi "long" (entry order adalah untuk melakukan buy/beli dan exit order adalah untuk melakukan sell/jual dalam sebuah instrument) atau "short" (entry order adalah untuk melakukan sell/jual dan exit order adalah untuk melakukan buy/bei dalam sebuah instrument).
Pada point tertentu ketika anda meletakkan entry order, anda membutuhkan definisi level harga, yang mana anda akan menentukan posisi beli atau jual dalam instrument. anda juga butuh spesifikasi type dan quantity dari instrument yang akan anda tradingkan. dan dibawah ini ada 3 type order yaitu:
- Market Order / Pasar Mata uang sebagai tempat pasar transaksi mata uang
- Stop Order / Menutup transaksi anda
- Limit Order / Batasan Transaksi
Order adalah pesanan untuk membeli atau menjual pada harga tertentu namun jika Order yang disampaikan ternyata match atau ada lawannya, contoh jika Anda order beli pada harga 9500 dan kebetulan ada yang mau jual pada harga yang sama, maka Order menjadi Posisi. Jadi selama pesanan belum match maka namanya tetap order namun sesudah match maka sekarang menjadi Posisi. Untuk menjual kembali posisi yang sudah Anda miliki (tutup posisi) maka dapat dilakukan dengan melakukan Order kembali tapi dengan arah berlawaran (jika posisi Buy maka ditutup dengan Sell dan sebaliknya)
Floating Loss/Profit dan Realized
Saat Anda mempunyai posisi beli di 9500 dan kemudian harga bergerak turun menjadi 9000, maka jika dihitung perkiraan kerugian Anda adalah 9000-9500 = -500. Namun nilai tersebut masih bisa berubah besok, entah bertambah turun menjadi 8700 atau kembali naik menjadi 9700. Nah, nilai -500 pada saat ini disebut Floating Loss (Rugi), jika nilainya positif, misalnya harga sekarang menjadi 10.000 maka selisihnya 10.000 - 9500 = +1000 disebut Floating Profit. Jika Anda memutuskan untuk menjual / menutup posisi Anda pada saat harga sedang 10.000, maka nilai +1.000 menjadi Realized Profit (bukan lagi Floating/mengambang tapi sudah menjadi Real/Nyata)
Pip
Adalah nilai 1 poin naik atau turunnya pergerakan harga. Untuk mini account, nilai 1 poinnya adalah $1, untuk standart account adalah $10.
Pip atau Percentage In Point adalah unit pengukuran terkecil dari harga mata uang. Hampir semua pasangan mata uang terdiri dari 5 digit dan kebanyakan mempunyai titik desimal setelah digit pertama. Sebagaimana ditunjukkan pada kebanyakan trading platform pip terletak pada desimal ke-4 setelah koma, singkatnya pip sama dengan perubahan terkecil pada desimal ke-4 yaitu 0.0001. Misalnya jika EUR/USD bergerak dari 1.5763 ke 1.5764 maka dikatakan terjadi pergerakan sebesar 1 pip.
Pengecualiannya pada pasangan mata uang yang mengandung JPY di mana pip terletak pada desimal ke-2 setelah koma misalnya GBP/JPY = 133.34 jika bergerak ke 133.33 maka dikatakan terjadi pergerakan 1 pip.
Profit (untung) dan loss (rugi) diukur dengan pip sebagai unit pengukurannya.
Analisa Teknikal
adalah sebuah analisa dalam Forex trading untuk mengukur pergerakan harga melalui grafik harga. Hal-hal yang patut diketahui dari analisa teknikal ini adalah trend, kejenuhan, support, ressisten, dan Pivot Point.
Analisa Fundamental
adalah sebuah analisa dalam Forex trading untuk memprediksi pergerakan harga berdasar berita-berita Fundamental. Berita Fundamental disini berupa berita ekonomi, poltik, dan keamanan yang mempengaruhi pergerakan harga.
Resistance
adalah batas harga atas yang merupakan harga psikologis, contohnya saat ini (tahun 2010) nilai tukar dollar adalah 9000 dan memiliki batas harga atas (resistance) 10.000 Rupiah, yang bisa diartikan kalau sampai harga tukar dollar menembus harga 10.000 rupiah maka ada kemungkinan akan naik terus menjauhi 10.000 tapi selama belum menyentuh 10.000 kemungkinan harga hanya akan bergerak naik turun di bawah 10.000.
Support
adalah batas harga bawah yang merupakan pasangan dari resistance (atas), contohnya saat ini (tahun 2010) nilai tukar dollar memiliki batas harga bawah (support) 8.500 Rupiah, yang bisa diartikan kalau sampai harga tukar dollar turun menembus harga 8.500 rupiah maka ada kemungkinan akan turun terus menjauhi 8500 tapi selama belum menyentuh 8500 kemungkinan harga hanya akan bergerak naik turun di atas 8500 (support) dan di bawah 10.000.(resistance)
Indicator Forex
Adalah tool atau alat bantu para trader untuk mem-prediksi pasar pada bursa forex. Dengan Indicator yang smart para trader mempermudah mem-prediksi naik turunnya harga nilai mata uang yang mereka trading sehingga banyak para trader profesional menjadikan dirinya sukses dalam dunia forex. Indicator Forex merupakan perangkat analisa teknikal untuk mengetahui trend sekaligus support-ressisten harga.
Untuk memulai trading FOREX GRATIS silahkan Anda DAFTAR DISINI
Available link for download