Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Minggu, 08 Desember 2013

NAVIGASI DALAM DOKUMEN HTML

Session 9: Navigasi Di Dalam Dokumen
Assalamualaikum, wr, wb..

`Navigasi Di Dalam Dokumen...`

Dokumen kita akan lebih bagus jika dapat melakukan navigasi untuk klik sebuah link dan berpindah ke area lainnya di dalam halaman yang sama. Anda akan menggunakan tag anchor biasa (<A HREF>) kecuali jika area tersebut terdapat di halaman yang lain, kita akan menggunakan nama bagian dari dokumen, yang dimulai dengan #. untuk nama bagian dokumen, pergi ke area yang akan anda beri nama, dan tempatkan <a name="nama_area">text</a>, lalu panggil link ke tempat itu dari manapun selain dokumen itu, gunakan <a href="#nama_area">teks</a> Contoh :

<a href="#bagian2">Ke Bagian 2</a><br> bla<br> bla<br> bla<br> bla<br> bla<br> bla<br> <a name="bagian2">Selamat datang di Bagian 2!</a>

Ke Bagian 2

bla

bla

bla

bla

bla

bla

Selamat datang di Bagian 2!

Saat anda sudah menentukan nama bagian, anda juga dapat memanggilnya dari dokumen lain... untuk contoh, jika anda memberi nama bagian di dalam index.html dengan panggilan bagian2, anda dapat memanggil dari bookmarks.html menggunakan <a href="index.html#bagian2">.

halama HTML anda...

Tambahkan kode dibawah ini pada halaman home page anda ("Home.htm"): (teks warna biru yang akan ditambahkan)

<html> <head><title>Home Pageku</title></head>  <body background="bgnd.gif">  <center><font color="Blue&quot><h1>nama home page anda </h1></font></center>  <hr>  ini adalah home page <a href="mailto:alamat email anda"><img src="bullet.gif" border=0><b>nama anda</b>.<img src="bullet.gif" border=0></a> <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p>  <hr>  <li><a href="#FavLinks">Website Favorit saya</a></li>  <li><a href="#Hobbies">Hoby saya</a></li> </ol> <hr>  <a name="FavLinks"> <h2>Web site favourite saya</h2> <br> <br>  <ul> <li> <a href="http://www.xencon.com"&gtXenon Web Design</a> </li> <li> <a href="http://www.microsoft.com"&gtMicrosoft</a> </li> <li> <a href="http://www.jskulit.com"&gtweb produsen jaket</a> </li> <li> <a href="http://www.sybase.co.za"&gtSybase South Africa</a> </li> </ul>

<hr>



<a name="Hobbies">

<h2>Hobi saya</h2>

</a>

Tuliskan tentang hobi anda disini.

</body>

</html>

Simpan file dengan nama "Home.htm".

Wassalam... n smoga bermanfaat

Baca Selengkapnya »

Sabtu, 07 Desember 2013

CLEAN CODE, COMMENTS, DAN ESCAPE CODES

Session 8 : Clean code, Komentar, dan Escape codes

Assalamualaiku, wr,wb..
Kali ini saya akan membahas tiga hal yang dianggap kecil tapi penting untuk diperhatikan.
Mari kita simak apa maksud dari hal yang dibicarakan diatas, Berikut penjelasannya..

Clean Code...

Yang dimaksud Clean code adalah bahwa kode HTML anda mengikuti semua peraturan dalam pengkodean, Berikut beberapa cara untuk menjaga kode anda termasuk Clean code :

- Jangan menggunakan karakter spesial kedalam kode anda apabila anda ingin menampilkan karakter spesial tersebut tampil sesuai dengan bentuk karakternya disini disebut Escape codes.
Contohnya karakter "<", ">", "©", "&", dan " itu sendiri. Berikut karakter pengganti untuk karakter spesial

Untuk karakter < ganti dengan mengetikan <
Untuk karakter > ganti dengan mengetikan >
Untuk karakter © ganti dengan mengetikan ©
Untuk karakter & ganti dengan mengetikan &
Untuk karakter " ganti dengan mengetikan "

Gunakan tanda kutip dalam nilai atribut... Contoh, Jika andai akan membuat garis horizontal dengan lebar setengahny dari layar, ketik <hr width="50%"> bukan mengetikan <hr width=50%>, atau jika anda ingin membuat ukuran sebesar 5 <hr size="5"> bukan <hr size=5>.

Penulisan tag jangan bersilangan / Overlaps... maksud bersilangan disini misalkan Tag A pembuka, Tag B pembuka, Tag A penutup, lalu Tag B penutup. ini akan menyebabkan error pada browser yang sensitif. Contohnya, itu akan menyebabkan penapsiran kode yang tidak tepat pada Navigator 4.0 Beta1, .

Contonya:

Cara yang salah (Bersilangan/Overlaps):
<font size=+1><b>Ini hurup tebal dan ukuran ditambah 1</font></b>

Cara yang benar (Tidak Overlap):
<font size=+1><b>Ini hurup tebal dan ukuran ditambah 1</b></font>
Cara yang salah (Overlaps):
<a href="here.html"><i>Link ini tulisan miring</a></i>

Cara yang benar (Tidak Overlap):
<a href="here.html"><i>Link ini tulisan miring</i></a>

Tag Komentar / Comments...

Jika anda menulis dokumen HTML, kadang-kadang anda ingin meletakan sedikit keterangan terhadap kode yang dituliskan untuk anda sendiri dengan begitu anda akan dapat menafsirkan kodetersebut di lain waktu. Komentar tidak akan tampil pada browser ketika halaman ditampilkan ... ini hanya akan tampil saat kode HTMLnya ditampilkan. Anda boleh memulai komentar dengan diawali karakter .

halama HTML anda...

Tambahkan kode dibawah ini pada halaman home page anda ("Home.htm"): (teks warna biru yang akan ditambahkan)

<html> <head><title>Home Pageku</title></head>  <body background="bgnd.gif">  <center><font color="Blue&quot><h1>nama home page anda </h1></font></center> <hr>

ini adalah home page <a href="mailto:alamat email anda"><img src="bullet.gif" border=0><b>nama anda</b>.<img src="bullet.gif" border=0></a>
<p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p>
<hr>
<h2>Web site favourite saya</h2>
<br>


<ul>
<li> <a href="http://www.xencon.com"&gtXenon Web Design</a> </li>
<li> <a href="http://www.microsoft.com"&gtMicrosoft</a> </li>
<li> <a href="http://www.jskulit.com"&gtweb produsen jaket</a> </li>
<li> <a href="http://www.sybase.co.za"&gtSybase South Africa</a> </li>
</ul>

</body>
</html>

Simpan file dengan nama "Home.htm".

Sekian dulu pembahasan Session 8 tentang Clean code, Comment, dan Escape codes.

Wassalam.. n smoga bermanfaat

Baca Selengkapnya »

Senin, 02 Desember 2013

LIST, LIST, LIST

Session 7: Lists, Lists, Lists

LIST UNORDERED...

List yang tidak bernomor adalah pertama dari tiga type list . Mungkin jenis ini list yang paling banyak anda gunakan .

Contoh list Unordered...

pensil
bulpoin
penghapus
kertas
lem

Perhatikan bentuk berupa Bullet sebelum masing-masing dari daftar list. Sekarng kode HTML untuk list unordered diatas sbb...

<ul>
 <li>pensil</li>
 <li>bulpoin</li>
 <li>penghapus</li>
 <li>kertas</li>
 <li>lem</li>
</ul>

Tag <ul> untuk pembukaan Unordered tag List. Untuk itu, </ul> adalah tag penutupnya. Diantara dua tag yang anda tempatkan pada LIST ITEM , masing-masing mempunyai tag pembuka <li>, dan tag penutup </li>. Tidak ada batasan nomor pada item list yang terdapat pada single list.

LIST ORDERED...

List ORDERED, juga termasuk list nomor, strukturnya sama dengan list UNORDERED, hanya saja mempunyai nomor angka pada masing-masing item. Juga, tag pembuka list <ol> seperti halnya <ul>, dan penutup tag </ol> seperti halnya </ul>. item pada list masih menggunakan tag yang sama .

Contoh list ORDERED...

pensil
bulpoin
penghapus
kertas
lem

Perhatikan bentuk berupa nomor/angka sebelum masing-masing dari daftar list. Sekarng kode HTML untuk list ordered diatas sbb...

<ol>
 <li>pensil</li>
 <li>bulpoin</li>
 <li>penghapus</li>
 <li>kertas</li>
 <li>lem</li>
</ol>

List Definition...

type list ini sedikit menyulitkan, tapi masih sangat gampang untuk digunakan. Ini dimulai dengan tag pembukaan <dl>, dan diakhiri dengan tag penutup</dl>. Ini mempunyai tag <dt> untuk Definition Term, dan <dd> untuk Definition Definition. Tag-tag tersebut tidak memerlukan tag penutup.

Contoh list Definition...

alliance: Serikat, relationship, atau hubungan kekeluargaan, pernikahan, atau kepentingan umum.
alligator: Besar reptil amphibi dengan taring yang sangat tajam, powerful jaws.
alliterate: untuk menyusun atau berbicara dengan memakai kata-kata yang permulaanya sama bunyinya.

berikut HTML kode untuk list Definition List...

<dl>
 <dt>alliance
 <dd>Serikat, relationship, atau hubungan kekeluargaan, pernikahan, 

atau kepentingan umum.
 <dt>alligator
 <dd>Besar reptil amphibi dengan taring yang sangat tajam, powerful jaws.
 <dt>alliterate
 <dd>untuk menyusun atau berbicara dengan memakai kata-kata yang 

permulaanya sama bunyinya.
</dl>

halama HTML anda...

Tambahkan kode dibawah ini pada halaman home page anda ("Home.htm"): (teks warna biru yang akan ditambahkan)

<html> <head><title>Home Pageku</title></head> <body background="bgnd.gif"> <center><font color="Blue&quot><h1>nama home page anda </h1></font></center> <hr> ini adalah home page <a href="mailto:alamat email anda"><img src="bullet.gif" border=0><b>nama anda</b>.<img src="bullet.gif" border=0></a> <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p> <hr> <h2>Web site favourite saya</h2> <br> <ul> <li> <a href="http://www.xencon.com"&gtXenon Web Design</a> </li> <li> <a href="http://www.microsoft.com"&gtMicrosoft</a> </li> <li> <a href="http://www.jskulit.com"&gtweb produsen jaket</a> </li> <li> <a href="http://www.sybase.co.za"&gtSybase South Africa</a> </li> </ul>
</body>

</html>

Simpan file dengan nama "Home.htm".

Session 8

Baca Selengkapnya »

LINKS DAN GAMBAR

Session 6: Links dan gambar (Images)

Link Anchor...

Tanpa link, World Wide Web tidak akan jadi web sama sekali! untuk menambahkan link... anda akan menambahkan tag <a href="lokasi"> tag pembuka dan </a> tag penutup. Apapun akan tampil dengan tambahan garis bawah dan warna, dan jika anda klik yang bergaris bawah itu akan mengirim browser ke lokasi diantara tanda kutip.

Contoh link...

Kunjungi Produsen jaket kulit asli garut!

Kunjungi <a href="http://www.jskulit.com/">Produsen jaket kulit asli garut</a>!

Catatan: Meskipun link biasanya digunakan untuk mengirim seseorang ke web yang lain, anda juga dapat menggunakannya untuk mengirim email ke alamat tertentu dengan menggunakan lokasi mailto:user@host.

Contoh Mailto: Link...

Kirim email ke Siganteng kalem!

Kirim email ke <a href="mailto:hero.sipatis@yahoo.com">Siganteng kalem</a>!

Link dengan gambar...

Anda juga boleh menggunakan gambar (pictures) pada halaman web anda, sepanjang gambar file format .gif atau .jpg (atau .jpeg). Anda tidak dapat menggunakan format file .bmp tag standar link dengan gambar adalah <img src="lokasi">. Juga dianjurkan untuk menambahkan atribut HEIGHT dan WIDTH ke tag IMG, yang akan mengatur ukuran gambar yang pantas. Juga dianjurkan untuk menggunakan ALT="Sebutan lain dari gambar" untuk pengganti dikala gambar belum tampil. (tag IMG tidak mempunyai tag penutup!)

Contoh standar link gambar...

<img src="ie.gif"ALT="Masuk Internet Explorer Sekarang">

Kombinasi link dan gambar...

Sering kali anda akan ingin membuat link dengan gambar, jadi apabila seseorang klik pada gambar, itu akan membawa pada alamat web lain.
Ini lebih sederhana- anda hanya perlu menempatkan tag IMG diantara tag A HREF.
(<a href="Lokasi link"><img src="Lokasi gambar"></a>)
anda juga boleh menggunakan tag ALIGN dengan gambar!

Saat gambar termasuk link, defaultnya mempunyai border (garis tepi). Anda dapat mengatur lebar gambar - atau lainnya - dengan menggunakan tag border=n diantara tag img. n adalah lebar border (n = 0 untuk tana border).

Contoh link gambar...

<a href="http://www.microsoft.com/"><img src="ie.gif" align=right border=0></a>

Halaman HTML anda...

Klik kanan pada gambar ditengah garis hitam bok gambar, dan pilih "Save Image As" / "Save Picture As", atau semacamnya. Simpan dengan nama "bullet.gif" pada direktory yang sama anda menyimpan home page "Home.htm".

Tambahkan kode dibawah ini pada halaman home page anda ("Home.htm"): (teks warna biru yang akan ditambahkan)

<html> <head><title>Home pageku</title></head> <body background="bgnd.gif"> <center><font color="Blue"><h1>nama home page anda</h1></font></center> <hr> ini adalah home page <a href="mailto:alamat email anda"><img src="bullet.gif" border=0><b>nama anda</b>.<img src="bullet.gif" border=0></a> <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p> </body> </html>

Simpan file dengan nama "Home.htm".

Session 7

Baca Selengkapnya »

JENIS FONT DAN WARNA TEKS

Session 5: Jenis Fonts dan Warna teks

Jenis-jenis Fonts...

Browser-browser versi terbaru lebih banyak mendukung jenis font, dimana anda dapat mengganti jenis huruf (font) selain font normal. Caranya FACE="nama font" attribut tag <FONT>. Font yang paling dianjurkan adalah
Verdana, Arial, Helvetica, Impact, Comic Sans MS, dan jenis font lainnya. tapi jenis lainnya tidak begitu dianjurkan , karena browser versi lama belum support pada feature ini.

Contoh jenis-jenis Fonts...

<font size=+2 face="Verdana">Verdana</font>

Verdana

<font size=+2 face="Arial">Arial</font>

Arial

<font size=+2 face="Helvetica">Helvetica</font>

Helvectica

<font size=+2 face="Impact">Impact</font>

Impact

<font size=+2 face="Comic Sans MS">Comic Sans MS</font>

Comic Sans MS

Catatan: Jika anda tidak menemukan satu atau lebih font diatas, Berarti browser anda belum support jenis font yang bersangkutan.

Warna teks...

Anda dapat mengganti warna teks dengan seting COLOR="warna font" attribut didalam tag <FONT>. warna diset dengan mengisi system hexadecimal (#000000 hitam ke #FFFFFF putih) tapi bisa juga di browser baru menggunakan kata sederhana dari warna. (Red untuk merah, Blue untuk biru, dst.)

Contoh warna teks...

<font color="Blue">ini warna biru!</font>

ini warna biru!

<font size=+2 face="Impact" color="Green">ini hijau dan dalam Impact Font!</font>

ini hijau dan dalam Impact Font!

<font color="Red">ini merah!</font>

ini merah!

Halaman HTML anda...

Tambahkan kode dibawah ini pada halama HTML anda ("Home.htm"): (teks warna biru adalah teks yang ditambahkan)

<html> <head><title>Home Pageku</title></head> <body background="bgnd.gif"> <center><font color="Blue"><h1>nama home page anda</h1></font></center> <hr> ini adalah home page <b>nama anda</b>. <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p> </body> </html>

Simpan file dengan nama "Home.htm".

Session 6

Baca Selengkapnya »

LEBIH BANYAK TAG

Session 4: Tag selanjutnya

Tag CENTER

Tag CENTER mempunyai maksud tersendiri. Tag pembukaan CENTER adalah <center> dan tag penutupnya </center>. Apapun yang anda ketikan diantara keduanya akan membuat teks anda berada ditengah!

Contoh tag CENTER

Judul halaman

<center><h1>Judul halaman</h1></center>

atribut BODY...

di bagian kesatu anda telah belajar tag BODY. Tag BODY mempunyai beberapa attribut... disini paling banyak digunakan...

BACKGROUND="lokasi gambar" - Gambar Background
BGCOLOR="#hexadecimal (kode warna)" - Warna Background
LINK="#hexadecimal (kode warna)" - Warna link
VLINK="#hexadecimal (kode warna)" - Warna link yang telah dikunjungi oleh user
TEXT="#hexadecimal (kode warna)" - Warna teks (anda bisa cari di internet tentang kode warna)

Halaman HTML anda...

Klik kanan di tengah gambar dibawah ini, dan pilih "Save Image As" / "Save Picture As", atau sejenisnya. simpan sebagai "bgnd.gif" di directory yang sama dimana anda menyimpan file "Home.htm"

Masukan kode dibawah ini pada halaman HTML anda ("Home.htm"): (teks warna biru yang akan ditambahkan)

<html> <head><title>Home pageku</title></head> <body background="bgnd.gif"> <center><h1>nama home page anda</h1></center> <hr> ini adalah home page <b>nama anda</b>. <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p> </body> </html>

simpan file dengan nama "Home.htm".

Session 5

Baca Selengkapnya »

KODE TAG

Session 3: kode Tag lainnya

Paragraphs...

Anda akan sering mengguanakan paragraph di dalam HTML, seperti anda menulis cerita. tag pembuka paragraph adalah <p>, dan tag penutup adalah </p>. tag penutup paragraph tidak selalu dibutuhkan, tapi saya menganjurkan selalu menggunakannya.

Contoh paragraph...

Saya membuat halaman ini dengan paragraph. Karena saya baru belajar HTML, jadi saya masih bingung!
<p>Saya membuat halaman ini dengan paragraph. Karena saya baru belajar HTML, jadi saya masih bingung!</p>

Properties format teks...

Jika halaman anda sepenuhnya tanpa format teks, itu akan terlihat kurang baik menjemukan dan membosankan.
Ini kenapa kita harus menggunakan format tag.
Berikut beberapa tag format teks :

<b> dan &</b> untuk tebal,

<i> dan </i> untuk miring,

<u> dan </u> untuk garisbawah, and

<tt> dan </tt> untuk tulisan tangan.

Properti format text...Tags untuk font

kode <font size=n> dan </font> tag-tag yang akan berguna.

n adalah nomor dari ukuran font dengan mengganti ukuran dari font yang sekarang.

n bisa jadi positif dan negatif: nomor positif akan menaikan ukuran font, dan nomor negatif akan mengecilkannya.

n juga bisa jadi nomor yang absolute, menandakan ukuran absolut untuk font (bukan ukuran relatif).

Contoh tag font...

Hero adalah seorang pengangguran yang ganteng ya kan? hehe..

<font size=+1>Hero</font> <font size=+2>adalah</font> <font size=+3>seorang</font> <font size+2>pengangguran</font> <font size=+1>yang</font> ganteng <font size=-1>ya kan? hehe..</font>

atribut ALIGN

Beberapa tag pendukung atribut ALIGN jika anda ingin membuat rata kiri, dari tengah, atau dari rata kanan. Atribut ALIGN tempatkan di pembukaan tag sebelum >.

Rata kiri

<h1 align=left>Rata kiri</h1>

Rata tengah

<h1 align=center>Rata tengah</h1>

Rata kanan

<h1 align=right>Rata kanan</h1>

Baris baru / LINE BREAK...

Saat HTML anda tanpil, normalnya teks akan menyatu dengan teks terakhir. Jika anda ingin membuat baris baru (ke baris yang lain) anda kan menggunakan tag <br>. Tag ini tidak mempunyai tag penutup.

Contoh tanpa LINE BREAK...

Pelajaran pertama.Pelajaran kedua.Pelajaran ketiga.

Pelajaran pertama. Pelajaran kedua. Pelajaran ketiga.
Contoh dengan LINR BREAK...

Pelajaran pertama.

Pelajaran kedua.

Pelajaran ketiga.

Pelajaran pertama.<br> Pelajaran kedua.<br> Pelajaran ketiga.<br>

Preformatted Text...

Jika anda ingin baris teks yang baik (sesuai dengan teks yang ditulis) itu menggunakan LINE BREAK tanpa tag <br> anda bisa menggunakan tag <pre> dan tag </pre>.

Contoh teks tana preformatting...

Nama saya Hero.
^ ^Pengangguran ^jelek
^tapi...

Nama saya Hero.
    ^   ^Pengangguran       ^jelek
    ^tapi...

HTML mengabaikan Extra Spasi kosong, jadi teks tidak membuat Extra spasi kosong.

Contoh teks memakai preformatting...

Nama saya Hero.
    ^   ^Pengangguran      ^jelek
    ^tapi...

<pre>
Nama saya Hero.
    ^   ^Pengangguran         ^jelek
    ^tapi...
</pre>

Halaman HTML anda...

Tambahkan ke halaman HTML anda ("Home.htm"), diantara baris <body> dan </body>:

<h1>nama Home Page anda</h1> <hr> Ini adalah Home page <b>nama anda</b>. <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p>

Simpan file dengan nama "Home.htm".

Session 4

Baca Selengkapnya »

COMMON TAG

Session 2: Common tags

Headings...

Headings adalah bagian tag terpenting dalam body dokumen HTML anda. anda akan terbiasa menggunakan heading untuk memberitahukan tema bagian yang ditampilkan dihalaman tersebut. tag pembukaan untuk heading adalah <hy> dan tag penutup adalah </hy> y = ukuran heading... dari 1 sampai 6. (1 terbesar, dan 6 terkecil)

Contoh tag-tag heading...

H1: Ini halaman saya.

<h1>H1: Ini halaman saya.</h1>

H2: Ini halaman saya.

<h2>H2: Ini halaman saya.</h2>

H3: Ini halaman saya.

<h3>H3: Ini halaman saya.</h3>

H4: Ini halaman saya.

<h4>H4: Ini halaman saya.</h4>

H5: Ini halaman saya.

<h5>H5: Ini halaman saya.</h5>

H6: Ini halaman saya.

<h6>H6: Ini halaman saya.</h6>

Garis Horizontal...

Garis horizontal digunakan untuk memisahkan area halaman. Garis horizontal adalah <hr>. Garis horizontal Tidak mempunyai tag penutup. Anda juga boleh menambahkan atribut tertentu pada tag <hr>, seperti WIDTH=n (untuk lebar menurut pixel) atau WIDTH=n% untuk lebar sesuai persentase layar, SIZE=n untuk membuat garis ukuran ketebalan tertentu menurut ukuran, dan NOSHADE untuk membuat garis tanpa bayangan. <hr> sederhana tanpa atribut akan membuat garis selebar layar sepenuhnya.

Contoh garis horizontal...

<hr width=50>

<hr width=50%>

<hr size=7>

<hr noshade>
Anda juga dapat menggunakan beberapa atribut didalam tag...

<hr width=50% size=10 noshade>

Session tiga...

Baca Selengkapnya »

Minggu, 01 Desember 2013

COMMON HTML TAGS

`Session 1: HTML dasar`

Tags...

Halaman yang sedang anda buka ini adalah dokumen HTML. Dokimen HTML terlihat lebih mirip proses dokumen word...

Anda bisa menampilkan hurup tebal dan miring, lebih besar and lebih kecil, atau terlihat sepertitulisan tangan.

tentu saja kode HTML untuk itu terlihat membingungkan...

Anda dapat mengatur <b>tebal</b> and <i>miring</i>, <font size=+2>lebih besar</font> dan <font size=-2>lebih kecil</font>, atau bisa juga <tt>tulisan tangan</tt>.

jadi apa maksud kode-kode diatas "<" and ">" ? saat anda menuliskan kata tertentu diantara kode-kode tersebut anda membuat tampilan tertentu dari kata yang dimasukan diantara tag. contoh tag <b> adalah mulai teks tebal, dan tag </b> adalah akhir dari teks tebal . Tag dengan slash(/) adalah tag penutup. tag yang sudah dibuka harus diikuti dengan tag penutup, tapi tidak semua. tag membuat struktur keseluruhan dokumen HTML.

<b>Teks ini tebal</b>
^^^--Tag pembuka    ^^^^--Tag penutup

Berikut dua macam kode HTML, kedua dari no dua dibawah ini salah, apakah itu?

#1 - tes kode HTML.

#1 - tes <b>kode</b> HTML.

#2 - tes kode HTML.

#2 - tes <b>kode<b> HTML.

Anda tentunya mencatat bahwa kode yang kedua tidak memakai garis miring (/) didalam tag setelah kata kode, yang menyebabkan browser menafsirkan kode sebagai awal hurup tebal untuk seterusnya! ini merupakan kesalahan biasa, jadi hati-hatilah!

Catatan: Tag-tag dalam HTML tidak sensitif dalam penulisan. Contoh... <title> dan <TitLE> keduanya mempunyai arti yang sama dan keduanya ditafsirkan sebagai maksud yang sama.

Struktur dokumen...

File HTML merupakan file teks normal...biasanya berektensi .htm, .html, atau .shtml. dokumen HTML memunyai dua bagian, head dan the body. bodi bagian lebih besar dari dokumen, seperti bagian surat yang akan anda kirim untuk teman anda. head bagian dari dokumen berisi konten judul atau title dan informasi serupa, dan bagian bodi berisi segala macam konten.

Contoh struktur dokumen HTML dasar...

<html> <head><title>Judul disini</title></head> <body>Bagian body disini</body> </html>
Anda boleh mencari cara lebih mudah untuk membaca jika anda menambahkan baris kosong baru seperti dibawah ini...

<html> <head> <title>Judul dimulai dari sini</title> </head> <body> Bagian body disini </body> </html>
Catatan: Tambahan spasi dan baris baru (baris kosong) akan diabaikan saat HTML menafsirkan... jadi tambahkan mereka jika anda menghendakinya.

Apapun yang dituliskan diantara tag TITLE akan menjadi judul, saat halaman ditampilkan akan terlihat di bagian atas layar. [Catatan: Anda tidak boleh menggunakan tag lain diantara tag TITLE (Contoh: Anda tidak dapat membuat kode seperti ini: <title><b>judul disini</b></title>.]

Contoh bagaimana judul akan tampil...

Di Netscape Navigator...

Netscape - [Judul disini] atau Judul disini - Netscape [depending on version]

Di Microsoft Internet Explorer...

Judul disini - Microsoft Internet Explorer

Apapun yang anda tempatkan diantara tag BODY akan menjadi bagian pokok dokumen windows, dan karna itu menjadi bagian terbesar dalam dokumen HTML.

Halaman HTML milik anda...

Untuk memulai membuat halaman HTML, ketikan kode dibawah dalam file teks baru:

<html> <head><title>Home pageku</title></head> <body> </body> </html>
Simpan file teks tersebut dengan nama "Home.htm".

Session 2

Baca Selengkapnya »

_

Minggu, 08 Desember 2013

NAVIGASI DALAM DOKUMEN HTML

Session 9: Navigasi Di Dalam Dokumen

`Navigasi Di Dalam Dokumen...`

Sabtu, 07 Desember 2013

CLEAN CODE, COMMENTS, DAN ESCAPE CODES

Session 8 : Clean code, Komentar, dan Escape codes

Senin, 02 Desember 2013

LIST, LIST, LIST

Session 7: Lists, Lists, Lists

LINKS DAN GAMBAR

Session 6: Links dan gambar (Images)

JENIS FONT DAN WARNA TEKS

Session 5: Jenis Fonts dan Warna teks

LEBIH BANYAK TAG

Session 4: Tag selanjutnya

Judul halaman

KODE TAG

Session 3: kode Tag lainnya

Rata kiri

Rata tengah

Rata kanan

COMMON TAG

Session 2: Common tags

H1: Ini halaman saya.

H2: Ini halaman saya.

H3: Ini halaman saya.

H4: Ini halaman saya.

H5: Ini halaman saya.

H6: Ini halaman saya.

Minggu, 01 Desember 2013

COMMON HTML TAGS

`Session 1: HTML dasar`

Session 1: HTML dasar

Entri Populer

Arsip Blog

Kategori

Mengenai Saya

Bahasa / Language