Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Thursday, 17 April 2014

Membuat Baris dan Paragraf - HTML

Dalam sebuah dokument HTML, tombol enter tidak berfungsi sebagai baris baru dalam penulisan. Melainkan harus menggukan tag-tag khusus yang seperti <br>. Tag ini tidak memiliki penutup. Jadi, apabila sebuah penulisan HTML disisipi oleh tag ini, maka karakter selanjutnya akan dimulai di baris baru di bawahnya.

Baris Baru - <br>
Tag <br> digunakan sebagai baris baru dalam dokumen HTML (pengganti enter). Tag ini tidak memiliki penutup seperti tag lainnya. Jadi, tidak perlu memberikan tag </br> dalam dokument HTML.

Silahkan Anda buat dokumen HTML dengan isi seperti dibawah ini
<html>
    <body>
        Ini adalah teks yang saya buat<br>
        maka baris ini selanjutnya<br>
        ini juga
    </body>
</html>
Dari skrip di atas akan menghasilkan seperti di bawah ini
Ini adalah teks yang saya buat
maka baris ini selanjutnya
ini juga


Paragraf - <p>
Tag <p> menandai sebuah paragraf dalam dokumen HTML. Semua karakter yang diapit oleh tag ini akan memulai pada baris baru dengan jeda satu spasi, dan satu spasi baris baru untuk karakter setelahnya. Perhatikan contoh di bawah ini.
<html>

    <body>


        kalimat pertama yang ditulis

        <p>

        maka baris adalah paragraf yang dibuat sebagai contoh

        </p>

        ini juga adalah kalimat terakhir

    </body>

</html>
Maka akan menghasilkan output seperti di bawah ini
kalimat pertama yang ditulis

maka baris adalah paragraf yang dibuat sebagai contoh

ini juga adalah kalimat terakhir
Silahkan Anda coba sendiri. Kreasikan dan kombinasikan kedua tag tersebut dan lihatlah hasilnya.
Saya rasa demikian tutorial hari ini. Kita akan bertemu lagi pada tutorial selanjutnya. sampai jumpa.

Gaya Variasi Tulisan - HTML

Bagaimana cara membuat variasi pada tulisan HTML. Kali ini kita akan mempelajarinya. Tag sederhana untuk mandai sebuah tulisan adalah <font> dengan beberapa atribut di dalamnya

Atribut adalah nilai dalam sebuah tag. Dengan memberikan nilai pada tag kita bisa mengatur bentuk dari isi tag tersebut.

Perhatikan pada contoh di bawah ini:

<html>
<body>

Ini tulisan biasa <br />
<font size="5">ini tulisan dengan besar bernilai lima</font>

</body>
</html>

Setelah memberikan tag seperti berwarna merah di atas maka akan menghasilkan seperti ini:

Ini tulisan biasa
ini tulisan dengan besar bernilai lima


Pada contoh tersebut akan membuat tulisan yang diapit oleh tag <font> akan membesar dengan nilai 5 dengan attribut size, nilai dari attribut size adalah 1 yang terkecil sampai 7 tulisan paling besar. Cara lainnya juga bisa dengan memberikan nilai piksel pada attribut "size". Contoh: <font size="20px">. Maka tulisan akan membesar senilai 20 piksel.

Attribut-atribut sederhana dan sering digunakan lainnya yang bisa Anda tambahkan pada tag adalah

Tag Fungsi Contoh
color memberikan warna tulisan color="blue"
color="#ff00ff"
family membuat tulisan dengan gaya family="arial"
family="verdana"
dan lain-lain
size membuat tulisan besar size=6
size="14px"
background-color memberikan warna latar pada tulisan background-color="red"
background-color="#fff000"

Atribut lainnya akan kita pelajari setahap demi setahap. Sampai jumpa pada pelajaran selanjutnya.

Tuesday, 18 March 2014

Symbol/Character Code of HTML

Today, I am gonna share a collection of character/symbol code of HTML. You can use this code to make a symbol or character which is not in the keyboard. Or for purposes that do not allow scripts to use / display certain symbols, you can replace it with this code.

Please check it out in the list below. Thank for visit my blog. have you fun and see yaa in next articles.



Symbol/CharacterDescriptionNumber Code HTMLName Code HTML
0 Nol &#48;
1 Satu &#49;
2 Dua &#50;
3 Tiga &#51;
4 Empat &#52;
5 Lima &#53;
6 Enam &#54;
7 Tujuh &#55;
8 Delapan &#56;
9 Sembilan &#57;
Tanda kanan ke kiri &#8207; &rlm;
Tanda kiri ke kanan &#8206; &lrm;
­ Tanda penghubung halus &#173; &shy;
Zero width joiner &#8205; &zwj;
Zero width non-joiner &#8204; &zwnj;
' Kutip satu &#39;
- Tanda kurang &#45;

&#8722; &minus;
Garis en &#8211; &ndash;
Garis em &#8212; &mdash;
Spasi en &#8194; &ensp;
Spasi em &#8195; &emsp;
Spasi tipis &#8201; &thinsp;
! Tanda seru &#33;
" Kutip ganda &#34; &quot;
# Simbol pagar &#35;
$ Simbol dollar &#36;
% Simbol persen &#37;
& Simbol dan &#38; &amp;
( Kurung buka &#40;
) Kurung tutup &#41;
* Tanda bintang &#42;
, Tanda koma &#44;
. Tanda titik &#46;
/ Garis miring &#47;
: Titik dua &#58;
; Titik koma &#59;
? Tanda tanya &#63;
@ Simbol [at] &#64;
[ Kurung siku buka &#91;
\ Garis miring terbalik/backslash &#92;
] Kurung siku tutup &#93;
^ Tanda sisipan/sirkumfleksa &#94;
ˆ
&#710; &circ;
_ Garis bawah &#95;
` Tanda petik &#96;
{ Kurung kurawal buka &#123;
| Garis tegak/pipe &#124;
} Kurung kurawal tutup &#125;
~ Simbol ekuivalen &#126;
¡ Tanda seru terbalik &#161; &iexcl;
¦ Garis tegak terputus &#166; &brvbar;
¨ Titik dua di atas huruf vokal &#168; &uml;
¯ Garis atas &#175; &macr;
´ Aksen akut &#180; &acute;
¸ Spasi cedilla &#184; &cedil;
¿ Tanda tanya terbalik &#191; &iquest;
˜
&#732; &tilde;
Kutip kiri tunggal &#8216; &lsquo;
Kutip kanan tunggal &#8217; &rsquo;
Kutip rendah tunggal &#8218; &sbquo;
Kutip kiri ganda &#8220; &ldquo;
Kutip kanan ganda &#8221; &rdquo;
Kutip rendah ganda &#8222; &bdquo;
Menit &#8242; &prime;
Detik &#8243; &Prime;
Panah kiri tunggal &#8249; &lsaquo;
Panah kanan tunggal &#8250; &rsaquo;
Garis atas &#8254; &oline;
¢ Simbol sen &#162; &cent;
£ Simbol pondsterling &#163; &pound;
¤ Simbol mata uang &#164; &curren;
¥ Simbol yen &#165; &yen;
Simbol Euro &#8364; &euro;
+ Tanda tambah &#43;

&#8853; &oplus;

&#8855; &otimes;

&#8727; &lowast;
< Kurang dari &#60; &lt;
= Sama dengan &#61;

&#8800; &ne;
> Lebih dari &#62; &gt;
± Simbol lebih kurang &#177; &plusmn;
« Panah kiri ganda &#171; &laquo;
» Panah kanan ganda &#187; &raquo;
× Simbol perkalian &#215; &times;
÷ Simbol pembagian &#247; &divide;

&#8704; &forall;

&#8706; &part;

&#8707; &exist;

&#8709; &empty;

&#8711; &nabla;

&#8712; &isin;

&#8713; &notin;

&#8715; &ni;

&#8719; &prod;

&#8721; &sum;

&#8730; &radic;

&#8733; &prop;

&#8736; &ang;

&#8743; &and;

&#8744; &or;

&#8745; &cap;

&#8746; &cup;

&#8747; &int;

&#8756; &there4;

&#8764; &sim;

&#8773; &cong;

&#8776; &asymp;

&#8801; &equiv;

&#8804; &le;

&#8805; &ge;

&#8834; &sub;

&#8836; &nsub;

&#8835; &sup;

&#8838; &sube;

&#8839; &supe;

&#8869; &perp;

&#8901; &sdot;

&#8968; &lceil;

&#8969; &rceil;

&#8970; &lfloor;

&#8971; &rfloor;

&#9674; &loz;
Panah atas &#8593; &uarr;
Panah kanan &#8594; &rarr;
Panah bawah &#8595; &darr;
Panah kiri &#8592; &larr;
Simbol Enter/Carriage return &#8629; &crarr;
Panah kiri kanan &#8596; &harr;
§ Simbol bagian/seksi &#167; &sect;
© Simbol hak cipta (Copyright) &#169; &copy;
¬ Simbol bukan &#172; &not;
® Simbol merek dagang terdaftar (Registered trademark) &#174; &reg;
° Simbol derajat &#176; &deg;
µ Simbol mikro &#181; &micro;
Simbol pilcrow, simbol paragraf &#182; &para;
· Titik tengah, koma Georgia &#183; &middot;
Ellipsis horisontal &#8230; &hellip;

&#9824; &spades;

&#9827; &clubs;

&#9829; &hearts;

&#9830; &diams;
Salib &#8224; &dagger;
Salib ganda &#8225; &Dagger;
Peluru &#8226; &bull;
Per mil &#8240; &permil;
¼ Satu per empat &#188; &frac14;
½ Satu per dua, setengah &#189; &frac12;
¾ Tiga per empat &#190; &frac34;
¹ Pangkat satu &#185; &sup1;
² Pangkat dua, kuadrat, persegi &#178; &sup2;
³ Pangkat tiga, kubik &#179; &sup3;

&#8734; &infin;
A
&#65;
a
&#97;
ª Indikator ordinal feminin &#170; &ordf;
Á
&#193; &Aacute;
á
&#225; &aacute;
À
&#192; &Agrave;
à
&#224; &agrave;
Â
&#194; &Acirc;
â
&#226; &acirc;
Ä
&#196; &Auml;
ä
&#228; &auml;
Ã
&#195; &Atilde;
ã
&#227; &atilde;
Å
&#197; &Aring;
å
&#229; &aring;
Æ
&#198; &AElig;
æ
&#230; &aelig;
B
&#66;
b
&#98;
C
&#67;
c
&#99;
Ç
&#199; &Ccedil;
ç
&#231; &ccedil;
d
&#100;
D
&#68;
Ð
&#208; &ETH;
ð
&#240; &eth;
e
&#101;
E
&#69;
É
&#201; &Eacute;
é
&#233; &eacute;
È
&#200; &Egrave;
è
&#232; &egrave;
Ê
&#202; &Ecirc;
ê
&#234; &ecirc;
Ë
&#203; &Euml;
ë
&#235; &euml;
f
&#102;
F
&#70;
ƒ
&#402; &fnof;
g
&#103;
G
&#71;
h
&#104;
H
&#72;
i
&#105;
I
&#73;
Í
&#205; &Iacute;
í
&#237; &iacute;
Ì
&#204; &Igrave;
ì
&#236; &igrave;
Î
&#206; &Icirc;
î
&#238; &icirc;
Ï
&#207; &Iuml;
ï
&#239; &iuml;
j
&#106;
J
&#74;
k
&#107;
K
&#75;
l
&#108;
L
&#76;
m
&#109;
M
&#77;
n
&#110;
N
&#78;
Ñ
&#209; &Ntilde;
ñ
&#241; &ntilde;
o
&#111;
O
&#79;
º Indikator ordinal maskulin &#186; &ordm;
Ó
&#211; &Oacute;
ó
&#243; &oacute;
Ò
&#210; &Ograve;
ò
&#242; &ograve;
Ô
&#212; &Ocirc;
ô
&#244; &ocirc;
Ö
&#214; &Ouml;
ö
&#246; &ouml;
Õ
&#213; &Otilde;
õ
&#245; &otilde;
Ø
&#216; &Oslash;
ø
&#248; &oslash;
Œ
&#338; &OElig;
œ
&#339; &oelig;
p
&#112;
P
&#80;
q
&#113;
Q
&#81;
r
&#114;
R
&#82;
s
&#115;
S
&#83;
Š
&#352; &Scaron;
š
&#353; &scaron;
ß
&#223; &szlig;
t
&#116;
T
&#84;
Þ
&#222; &THORN;
þ
&#254; &thorn;
Merek dagang &#8482; &trade;
u
&#117;
U
&#85;
Ú
&#218; &Uacute;
ú
&#250; &uacute;
Ù
&#217; &Ugrave;
ù
&#249; &ugrave;
Û
&#219; &Ucirc;
û
&#251; &ucirc;
Ü
&#220; &Uuml;
ü
&#252; &uuml;
v
&#118;
V
&#86;
w
&#119;
W
&#87;
x
&#120;
X
&#88;
y
&#121;
Y
&#89;
Ý
&#221; &Yacute;
ý
&#253; &yacute;
ÿ
&#255; &yuml;
Ÿ
&#376; &Yuml;
z
&#122;
Z
&#90;
Α Alpha &#913; &Alpha;
α alpha &#945; &alpha;
Β Beta &#914; &Beta;
β beta &#946; &beta;
Γ Gamma &#915; &Gamma;
γ gamma &#947; &gamma;
Δ Delta &#916; &Delta;
δ delta &#948; &delta;
Ε Epsilon &#917; &Epsilon;
ε epsilon &#949; &epsilon;
Ζ Zeta &#918; &Zeta;
ζ zeta &#950; &zeta;
Η Eta &#919; &Eta;
η eta &#951; &eta;
Θ Theta &#920; &Theta;
θ theta &#952; &theta;
ϑ Simbol theta &#977; &thetasym;
Ι Iota &#921; &Iota;
ι iota &#953; &iota;
Κ Kappa &#922; &Kappa;
κ kappa &#954; &kappa;
Λ Lambda &#923; &Lambda;
λ lambda &#955; &lambda;
Μ Mu &#924; &Mu;
μ mu &#956; &mu;
Ν Nu &#925; &Nu;
ν nu &#957; &nu;
Ξ Xi &#926; &Xi;
ξ xi &#958; &xi;
Ο Omicron &#927; &Omicron;
ο omicron &#959; &omicron;
Π Pi &#928; &Pi;
π pi &#960; &pi;
ϖ Simbol pi &#982; &piv;
Ρ Rho &#929; &Rho;
ρ rho &#961; &rho;
Σ Sigma &#931; &Sigma;
σ sigma &#963; &sigma;
ς sigmaf &#962; &sigmaf;
Τ Tau &#932; &Tau;
τ tau &#964; &tau;
Υ Upsilon &#933; &Upsilon;
υ upsilon &#965; &upsilon;
ϒ Simbol upsilon &#978; &upsih;
Φ Phi &#934; &Phi;
φ phi &#966; &phi;
Χ Chi &#935; &Chi;
χ chi &#967; &chi;
Ψ Psi &#936; &Psi;
ψ psi &#968; &psi;
Ω Omega &#937; &Omega;
ω omega &#969; &omega;

Non-breaking space &#160; &nbsp;

Spasi &#32;

Sunday, 16 March 2014

Membuat Dokument HTML

Pada pelajaran sebelumnnya kita telah membahas tentang Tag dan cara penggunaanya. Pada tutorial hari ini kita akan belajar membuat dokument sederhana yang memuat/menampilkan sebuah halaman website yang diisi dengan beberapa Tag/kode sederhana.

Pada pembahasan yang lalu kita telah mengerti bagaimana membuat sebuah dokumen agar dikenal sebagai dokumen HTML dengan memberi ekstensi .html pada dokumen tersebut. Sebelum kita memulai pelajaran hari ini saya ingin mengulas sedikit mengenai cara mengakses sebuah halaman.


INFO PLUS
Sebuah situs biasanya menyimpan file dokumen pada sebuah server yang online agar pengunjung dapat mengaksesnya dan tampil pada komputer pengunjung tersebut. perhatikan pola pada gambar di bawah ini




Si pemilik situs menletakkan dokumennya pada sebuah server yang selalu online, dan kemudian pengunjung dengan mengetik alamat situsnya tersebut dan menerima tampilan dari dokumen pada komputer yang digunakan. Proses dua arah ini terjadi kerita pengguna melakukan request ke server dan kemudian server mengirimkan permintaan tersebut. Untuk itulah dibutuhkan server yang selalu online agar situs yang dimaksud dapat diakses.

Jika Anda bertanya bagaimana membuat server atau mengirimkan dokumen tersebut ke server agar bisa diakses secara online. Saya rasa mungkin saya akan menjawabnya nanti setelah Anda betul-betul menguasai bahasa pemrograman ini ditutorial lanjutan.

Ada juga cara membuat server pada lokal komputer kita. Tapi saya rasa kalau hanya untuk mengakses dokument HTML mungkin hal itu tidak perlu kita lakukan. Kita bisa mengakses dokumen/halaman tersebut dimana saja kita letakkan. yang kemudian kita buka menggunakan browser. Sebenarnya server tidak hanya berguna sebagai tempat penyimpanan. Tapi juga sebagai pengolah data sebelum dikirimkan ke komputer pengguna/pengunjung. Karena untuk sebuah proses yang dinamis dan pengumpulan informasi sehingga data harus tersaji dalam kondisi siap. Mengenai hal ini juga kita akan bahas dan pelajari pada tutorial lanjutan. Karena untuk mengolah data pada server itu menggunakan bahasa pemrograman yang berbeda. Jadi kuasai terlebih dahulu bahasa sederhana ini.


Kita mulai membuat sebuah halaman HTML. Pada pembahasan sebelumnya kita telah menentukan sebagai contoh tempat penyimpanan file HTML pada disk E dalam folder website (E://website). Jadi selanjutnya kita akan selalu menyimpan file buatan di folder tersebut. Anda bisa menyesuaikan jika Anda ingin menyimpan pada tempat yang berbeda.
Pertama, buatlah document baru dan simpan pada folder tersebut. caranya ada dua:
  1. Pada folder tersebut. Klik kanan -> Pilih New -> Text Document. Lalu ubah namanya sesuai keinginan Anda ditambah akhiran ".html". Contoh : index.html
  2. Bukalah notepad Anda. pada notepad tersebut pilih menubar file -> Save. Kemudian simpan dengan nama sesuai keinginan Anda ditambah akhiran .html
Pada kedua cara di atas. Saya menyarankan agar Anda menggunakan cara kedua. Karena pada cara pertama akan menimbulkan beberapa perbedaan untuk komputer dengan pengaturan hidden extention. Dokumennya akan dikenal hanya sebagai teks biasa bukan dokumen HTML.

Setelah Anda selesai membuat dokumen dengan akhiran .html, mari kita coba mengisinya dengan beberapa Tag. 

<html>
<head>
<title>Pelajaran Pertama Ku</title>
</head>
<body>

<h1>Halaman HTML Buatan Ku</h1>

<div>
Ini adalah paragraf. Tag <div> digunakan untuk menandai sebuah paragraf. Hari ini saya belajar membuat dokumen HTML sederhana dan menampilkannya pada komputer dengan browser yang saya gunakan sekarang. Tampilan ini dibuat sedemikian rupa agar menarik dan nyaman di mata pengunjung sekalian
</div>

baris baru <br>
baris jeda satu spasi <p>
jeda di antaranya

<p>

<b>tulisan tebal</b> <br>
<i>tulisan mirig</i> <br>
<u>tulisan garis bawah<br>
<s>tulisan coret</s>

<div>
tulisan biasa tanpa rataan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang <i>agar dapat</i> melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini <s>cukup</s> menjadi paragraf panjang.
<div>

<div>
<justify>
tulisan dengan rataan kiri dan kanan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar <b>dapat melihat jelas hasil dan perbedaannya</b> dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.
</justify>
<div>

<div>
<center>
tulisan ditengah. berhubung saya bingung <u>mau nulis apa biar paragraf ini </u> menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.
</center>
<div>

Silahkan Anda coba menulis seperti di atas dan lihatlah hasilnya dengan browser Anda. Maka akan tampak seperti dibawah ini


Halaman HTML Buatan Ku

Ini adalah paragraf. Tag
digunakan untuk menandai sebuah paragraf. Hari ini saya belajar membuat dokumen HTML sederhana dan menampilkannya pada komputer dengan browser yang saya gunakan sekarang. Tampilan ini dibuat sedemikian rupa agar menarik dan nyaman di mata pengunjung sekalian


baris baru
baris jeda satu spasi
jeda di antaranya


tulisan tebal
tulisan mirig
tulisan garis bawah
tulisan coret
tulisan biasa tanpa rataan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.

tulisan dengan rataan kiri dan kanan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang
tulisan ditengah. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.

Silahkan Anda berkreasi dengan imajinasi Anda. pahami dan kuasai terlebih dahulu. Selanjutnya kita Akan membahas mengenai TAG lanjutan lainnya. Sampai jumpa.

Sunday, 9 March 2014

Halaman HTML

Sebelumnya kita sudah membahas mengenai pengertian HTML. Kali ini mari kita bahas tentang Halaman HTML dan cara menampilkannya pada browser.

Halaman HTML merupakan sebuah halaman dimana termuat dokumen dengan skrip atau perintah dalam HTML sehingga browser mengenalinya sebagai dokument/halaman HTML. Halaman HTML merupakan dokument dengan ekstensi ".html" (dot html). Contoh "halaman-depan.html".

Untuk penerapannya mari ikuti cara di bawah ini.
  1. Tentukan lokasi Anda menempatkan dokument HTML tersebut. agar lebih mudah saya ambil contoh misal diletakkan pada komputer di "drive E" dalam folder "website".
  2. Buatlah sebuah dokumen menggunakan "notepad" dengan nama "halaman-pertama.html" lalu simpan pada lokasi tadi (untuk nama terserah Anda. saya hanya menggunakan contoh agar selanjutnya lebih mudah dijelaskan)
Dengan begitu Anda telah berhasil membuat sebuah dokument HTML. Sekarang mari kita coba mengaksesnya menggunakan Mozilla Firefox atau browser lainnya.
  1. Buka software Firefox Anda atau browser yang Anda sukai lainnya
  2. Pada kolom URL ketiklah alamat penyimpanan dokument Anda tadi. yaitu "file:///E:/website/halaman-pertama.html".
Anda sudah bisa mengakses halaman Anda. Tetapi dokument tersebut masih kosong. Untuk alamat URL kalau biasanya kita mengakses sebuah situs pada internet misalkan Google, maka kita mengisi alamat situs/URL "http://www.facebook.com". Jadi, karena kita hanya mengakses halaman yang kita simpan pada disk di komputer, maka alamat situs/URLnya "file:///E:/website/halaman-pertama.html" seperti contoh di atas.

Selanjutnya bagaimana mengisi dokument html tersebut agar menampilkan sesuatu di dalamnya? Pada aturan yang benar untuk sebuah situs. dokument HTML selain menggunakan ekstensi ".html" juga memiliki tag pengenal/pembuka HTML. yaitu yang di tulis "<html>". Secara sederhana mari ikuti dan coba dengan contoh di bawah ini
<html>
<head>
<title>Halaman Pertama</title>
</head>
<body>
<h1>Halaman Pertama</h1>
Ini adalah dokument html halaman pertama yang saya buat
</body>
</html>
Setiap kode yang diapit oleh tanda "<" dan ">" disebut dengan TAG. Tag memiliki dua bagian, "Tag pembuka" dan "Tag penutup". Pada Tag penutup memiliki tanda garis miring (/) di dalamnya seperti </html>.

Isilah dokument "halaman-pertama.html yang Anda buat tadi dengan isi di atas yang saya contohkan. Kemudian cobalah buka pada browser Anda dengan memanggil URL "file:///E:/website/halaman-pertama.html". Kemudian lihatlah hasilnya!!!

Penjelasan singkat
  • <html> adalah Tag pengenal/pembuka dokumen HTML. Sehingga browser mengenalinya sebagai dokument HTML yang baik
  • <head> merupakan Tag biasa digunakan sebagai tempat informasi tentang halaman yang dibuat. Pada tingkat lebih tinggi, Tag <head> adalah tempat meletakkan skrip yang mengatur tampilan halaman yang lebih detail dan berbagai fungsi lainnya. Tag ini bisa ditinggalkan, hasilnya dokumen yang dibuat tidak akan memiliki informasi apapun di dalamnya dan hanya memuat isi utama dari dokument HTML tersebut
  • <title> merupakan Tag pemberi judul. Sehingga pada browser Anda mengenali halaman tersebut dengan judul yang telah dibuat
  • <body> Merupakan Tag yang memuat isi utama dari dokumen HTML. Di sinilah kita menulis isi dari dokumen kita.
  • <h1> adalah contoh salah satu skrip Tag yang memberi perintah untuk menampilkan tulisan yang besar dan menjadi judul utama dari isi dokumen tersebut. Nanti kita bahas acuan dan fungsu dari penggunaan tag ini dalam aturan internet. Biasanya ini sebagai salah satu aturan khusus untuk Search Engine Google.
Anda bisa perhatikan setiap Tag memiliki penutup (contoh: </html>, </head>, </body> dll..). Apabila Tag tidak memiliki penutup maka setiap isi dari dokumen yang diawali oleh tag tersebut hingga akhirnya akan dianggap memiliki nilai perintah dari Tag tersebut. Jadi, jangan lupa untuk menutup Tag yang telah ditentukan.

Demikian tutorial singkat mengenai HTML. Pada pelajaran selanjutnya kita akan membahas mengenai Tag dan beberapa perintah dalah HTML menggunakan TAG. Sampai jumpa di pelajaran selanjutnya. Selamat belajar.

Wednesday, 26 February 2014

Persiapan HTML

Sebelum memulai seperti biasa kita harus mempersiapkan segala hal. Terutama peralatan yang akan kita gunakan. Seperti sekolah, kita harus mempersiapkan buku, pensil dan alat-alat lainnya untuk membantu kita dalam belajar.

Beberapa hal yang harus disiapkan sebenarnya sederhana dan tidak perlu mengeluarkan biaya. seperti di bawah ini:

1. Komputer
Bisa berupa unit PC, notebook ataupun laptop. Karena yang dipelajari adalah bahasa komputer, sudah pasti ini adalah element pertama yang harus Anda miliki. Sedikit cerita, memang pada awalnya saya mengenal bahasa pemrograman hanya melalui ponsel. Karena waktu itu saya belum memiliki komputer. Saya mempelajari dua bahasa pemrograman dan memanfaatkan fitur aplikasi dan sebuah hosting yang support untuk kedua bahasa tersebut. Memang sangat merepotkan, tapi jangan menjadikan keterbatasan menjadi sebuah kendala untuk menguasai sesuatu. Hingga akhirnya saya bekerja dan mampu membeli seperangkat komputer dan langsung hanya dalam waktu 3 bulan saya telah merelease sebuah website dan toko online dinamis yang hingga sekarang saat tulisan ini dibuat masih saya kelola. Semua tergantung dari tekad, apapun bisa jadi mungkin dan tidak ada hal sekecil apapun yang sia-sia.

2. Software
Untuk mempelajari bahasa HTML Anda tidak perlu banyak software yang digunakan. cukup seperti di bawah ini
  1. Notepad
    Digunakan untuk menulis kode atau skrip bahasa. Hingga tulisan ini dibuat, notepad terbaik adalah "Notepad++". Dengan tampilan yang sederhana dan fitur yang bisa memudahkan dalam menyusun script dan kode.
  2. Browser
    Adalah software yang Anda gunakan untuk menjelajah dunia online. Software ini digunakan untuk menampilkan hasil dari skrip yang kita tulis. Seperti yang saya katakan sebelumnya, browser seperti penerjemah di dunia maya dan menampilkan dokumen yang telah disusun oleh pengirimnya. Untuk browser saya menyarankan Anda menggunakan Firefox. Karena tampilannya lebih sederhana, setiap browser sedikit banyak memiliki perbedaan dalam hal menampilkan dokumen yang dibuat.

Itulah tadi hal-hal yang sebaiknya Anda persiapkan. Jika Anda punya atau membutuhkan hal lainnya yang menurut Anda lebih memudahkan Anda. Silahkan gunakan. Tidak banyak bukan? Nanti jika kita sudah sampai pada tahap bahasa yang lebih rumit, Anda akan lebih banyak menggunakan software dan alat bantu.

Oh iya, sebelumnya saya minta maaf apabila tulisan saya ini agak sedikit bebas. Saya agak sedikit sulit untuk menulis artikel dalam bahasa baku dan formal. Saya rasa itu sangat membosankan. Jadi, harap maklum dengan apa yang Anda baca di sini. Saya bermaksud agar kita bisa lebih santai dalam belajar dan agar Anda tidak mengantuk dan bosan.

Berhubung saya lupa  apa yang ingin saya tulis lagi selanjutnya. Kita langsung saja memulai pelajaran HTML kita. Selamat belajar.

Monday, 24 February 2014

Berkenalan Dengan HTML

"Tak kenal maka tak sayang" sering dengar pribahasa itu kan? Sebelum memulai mempelajari HTML ada baiknya jika Anda mengenal terlebih dahulu tentang apa itu HTML. Hanya untuk sekedar mengenal. Mari kita simak bersama siapa HTML itu.

HTML
HTML adalah singkatan dari "HyperText Markup Language" yang kalau diterjemahkan adalah "Bahasa yang menandai pemicu teks". Kalau dijelaskan maknanya mungkin agak bingung. kurang lebih seperti ini. ialah sebuah bahasa yang membuat sebuah teks berubah menjadi sebuah bahasa/bentuk yang berbeda. Karena disebut pemicu teks, sehingga sebuah teks yang diberi pemicu dapat dimengerti oleh bahasa yang lain.

Bingung???

Saya juga bingung memberi penjelasannya, intinya secera sederhana HTML adalah bahasa yang digunakan untuk membuat sebuah tulisan atau bentuk dimengerti oleh komputer khususnya bahasa online sehingga menampilkan sebuah bentuk yang sering kita lihat di situs-situs internet. Kita ambil contoh situs jejaring terkenal Facebook. Untuk bisa menampilkan gambar pada komputer pengunjung yang sering kita lihat misalkan di beranda dan bagian lainnya yang mana dengan ciri khasnya berwarna biru dihasilkan oleh bahasa yang telah disusun sehingga kita bisa melihat situs Facebook sedemikian rupa. Walaupun sebenarnya Facebook menggunakan bahasa yang komplek lebih dari sekedar HTML biasa, karena alasan keamanan dan agar terlihat dinamis. Tapi tetap saja hampir sebagian besar situs Facebook juga disusun oleh bahasa HTML.

Paham??

Kalau masih belum paham mungkin Anda bisa mencari sumber referensi lain yang lebih pandai dari saya dalam hal menjelaskan... hihihihihi..

Beberapa fungsi dari HTML adalah untuk membuat sebuah dokumen memiliki aturan dan format dalam tampilan yang lebih mudah dan nyaman dilihat. HTML menterjemahkan sebuah berkas atau dokumen yang dikirimkan oleh seseorang melalui  media daring. Kemudian menampilakan dokument tersebut dalam tampilan dan format yang telah dibuat oleh si pengirimnya.

Jadi, selain pembuatnya harus menguasai dan menyelipkan kode bahasa HTML dalam berkasnya. si penerima juga harus punya penterjemahnya atau pembaca HTML. Siapa pembaca atau penterjemah HTML tersebut? ialah browser yang sering kita gunakan untuk berselancar di dunia maya seperti Internet Explorer, Firefox, Google Chrome dan masil banyak lagi. Kesimpulannya HTML adalah bahasa standar di dunia maya. Tidak mungkin Microsoft Word kita gunakan untuk membaca berkas HTML. Karena dia tidak memiliki bahasa yang sama.

Oke, lanjut. Masih banyak hal lagi mengenai HTML. misal tentang fungsinya dan cara kerjanya secara detail. Saya rasa lain waktu saya jelaskan hal tersebut karena Anda yang baru memulai ini mungkin akan sedikit pusing dengan seluk beluknya di alam maya yang membuatnya bisa sedemikian rupa. Anda akan mengerti jika Anda sudah berada di dalamnya. Saya akan postingkan hal ini di tengah pembelajaran kita mengenai HTML.

Belajar HTML (Awal)

Selamat datang di blog saya yang sederhana ini. Anda berada di halaman pertama blog tentang mempelajari bahasa pemrograman HTML.

Apakah Anda sedang ingin belajar bahasa pemrograman dari dasar sekali?

Apakah Anda ingin membuat website sendiri?

Apakan Anda bingung harus dari mana memulainya?

Pada kali ini saya akan mencoba membuat tutorial panduan belajar bahasa pemrograman. Untuk awal dan sangat dasar sekali bagi seorang pendatang baru dan pemula di dunia bahasa internet adalah mempelajari bahasa HTML. Ya bahasa ringan yang kalau diibaratkan di sekolah adalah belajar mengenal huruf dan membaca. Di sini Anda akan mendapat panduan bertahap mulai dari dasar sampai mahir. Jadi, Anda tidak perlu bingung harus memulai kemana dan bagaimana. Ikuti saja setiap lembar tulisan saya ini.

Sebelum memulai, saya sarankan untuk menyiapkan beberapa hal. Karena sesuai pengalaman saya, tanpa persiapan yang baik hasilnya akan terputus di tengah jalan.

Niat
Awalilah segala sesuatu dengan niat dan tekad untuk mencapai suatu tujuan. Dengan niat Anda akan memiliki dorongan untuk tetap semangat mengerjakan berbagai hal yang akan Anda lakukan

Waktu
Aturlah waktu luang Anda untuk duduk manis dan serius khusus untuk belajar. Jika Anda tidak menetapkan waktu dengan teratur, saya yakin yang akan Anda pelajari akan terasa acak-acakan dan membingungkan. Misalkan Anda punya waktu luang di sore hari. tidak perlu tiap hari, kapan waktu sore Anda kosong maka saat itulah Anda mengisi waktu Anda dengan belajar

Sabar
Ada dua hal yang penting yang harus Anda kontrol. Pertama sabar jika Anda tidak menguasi atau bingung dengan pelajaran yang Anda pelajari. Jangan menyerah, teruslah berusaha. Saya sangat yakin jika Anda bersabar pasti Anda bisa. Kedua bersabarlah jika Anda sangat bersemangat dan cepat menguasai materi. Tidak jarang seseorang yang sangat bersemangat karena sangat mudah menguasai suatu materi, sehingga dia terburu-buru dan ingin melanjutkan dan melompat ke tingkat yang lebih sulit. Saya pernah mengalaminya, alhasil saya melewatkan hal yang penting yang seharusnya saya kuasi sebelum berada di depan. Akibatnya saya mengulang dan bahkan lebih bingung lagi karenanya.

Yakin
Yakinkan untuk apa Anda mempelajari hal ini. Yakinkan bahwa hal ini sangat Anda butuhkan. Yakin bahwa ini akan sangat berguna bagi Anda. Yakin bahwa Anda akan bisa.

Itulah empat hal yang harus Anda persiapkan di diri Anda sebelum memulai ingin mempelajari bahasa pemrograman. Karena di sini bukan sekolah formal yang mewajibkan dan menuntut Anda untuk disiplin dan bekerja keras.

Jika Anda sudah siap dengan persiapan kita tadi, mari kita beranjak ke tahap selanjutnya.