<share gan> Belajar dasar - dasar HTML bagi yang belum bisa mudah kog di pahami

[LinuxManiax]

O.k gan langsung aja ke TKP..!

HTML adalah sebuah bahasa program yang digunakan untuk menuliskan sebuah dokumen atau informasi dan dibaca dengan menggunakan program browser seperti Mozilla, Internet Explorer, dll.

Oke, ane akan berbagi sedikit tentang dasar-dasar dari bahasa HTML. Semoga setelah agan membaca postingan kali ini, agan bisa lebih mengembangkannya.

Seperti biasa ane bilang, kalau mau belajar teknologi jangan menghapal, tapi pahamilah sruktur dan sistemnya.

langsung aja yah agan.

Tp jagn lupa gan kasih RT nya


[/quote]

[/spoiler]

Spoiler for open this:

Spoiler for open this:

for Pelajaran I; Kode Dasar HTML:






Kode dasar ini pasti terdapat di semua halaman web. Jadi, kode dasar inilah yang harus kamu kuasai terlebih dahulu.

















Jangan bingung melihat kode-kode di atas, karena akan saya jelaskan satu-persatu.

Setiap kode punya pasangan, dan setiap pasangan saya beri warna yang sama.. Karena itu, coba mempelajarinya dengan cara melihat dan membandingkan kode dengan warna yang berbeda-beda tersebut.

Berikut penjelasannya:

1.

Ini adalah kode atau tag yang terdapat di bagian atas dari semua halaman web.

(memang, pada halaman web masa kini, kadang-kadang ada juga kode tertentu yang terdapat sebelum kode HTML. Tapi ini kita abaikan dulu ya, berhubung ini masih pelajaran tingkat dasar)

Nah, setiap tag itu pasti ada tag penutupnya

(memang ada juga tag yang tak perlu pakai penutup, tapi ini akan kita pelajari nanti, ya�.)

Maka, tag penutup dari adalah

PERBEDAANNYA:

Pada setiap tag penutup, setelah �> Orang Bodoh�

Nah, itu adalah title atau judul dari halaman ini.

Jika ditulis, maka penulisannya sebagai berikut:

Belajar Dasar-Dasar HTML :: Orang Bodoh

Nah, gampang, bukan?

4.

Nah, body ini adalah tempat untuk meletakkan SEMUA HAL yang hendak kita tampilkan di halaman web kita.

Bila kode-kode lainnya adalah �urusan belakang layar�, maka BODY ini adalah �urusan di depan layar� atau �panggung yang akan ditonton oleh hadirin�.

Jadi, apapun yang kita letakan di bagian BODY, maka itulah yang akan dilihat oleh pengunjung website kita.



LATIHAN:

Ingat, jika kamu mau agar pelajaran ini mudah dipahami, jangan copy paste tulisan dibawah ini, tapi ketikkan ulang di notepad:





Website Pertama Gue





Ini dia website pertamaku, bagus kan?





Setelah selesai, klik �Save As�

Pada bagian �Save as type�, pilih �All Files�

Pada bagian �File Name�, beri nama �index.html� (tanda � harus disertakan)

Cari lokasi penyimpanan, misalnya di Desktop

Klik �Save�.

Nah, sekarang, coba masuk ke Desktop, klik dua-kali file �index.html� tadi, lalu lihatlah hasilnya.

Selamat mencoba!

Spoiler for open this:

Spoiler for open this:

Spoiler for open this:

for Pelajaran II; Rumus Penting Di Dalam Kode HTML:






Dalam pembuatan kode HTML, berlaku rumus �first come, last out�.

Maksudnya, kode yang pertama kali dimasukkan, maka dia harus terakhir kali ditulis.

Urutannya begini:

1 2 3 3 2 1

Agar tidak bingung, mari kita lihat contoh berikut:

adalah kode untuk membuat huruf tebal

adalah kode untuk membuat huruf miring

Misalkan kita hendak membuat huruf miring sekaligus tebal

CARA YANG BENAR:

ini huruf miring dan tebal

atau:

ini huruf miring dan tebal

CARA YANG SALAH:

ini huruf miring dan tebal

yang ini juga salah:

ini huruf miring dan tebal

Atau, coba lihat lagi kode dasar HTML di atas.

Semuanya ditulis dengan rumus �first come, last out� bukan?

Kode yang diletakkan paling awal, maka kode penutup pun diletakkan paling akhir.

Demikian seterusnya.

Spoiler for open this:

Spoiler for open this:

Spoiler for open this:

for Pelajaran III; Membuat Huruf Tebal, Miring, Bergaris Bawah, dan Efek Dicoret:






Hm, bocorannya sudah terdapat pada pelajaran II di atas

Ya, di atas saya sudah memberi contoh tentang cara membuat huruf tebal dan miring.

Sebelum dilanjut, saya ingatkan lagi:

1. Semua kode ini diletakkan di antara tag dan .

Kenapa? Sebab format huruf ini akan terlihat oleh pengunjung di halaman web kita nantinya.

2. Jangan copy paste, tapi salin ulang secara manual

3. kode-kode HTML ini silahkan tulis di Notepad saja

4. Semua kode pada pelajaran III ini harus pakai tag penutup. Bila tak ada tag penutup, maka halaman web anda akan kacau

5. Bila anda menggunakan lebih dari satu tag, ingatlah selalu rumus:

�first come, last out�

Oke, kita mulai ya:

1. membuat huruf tebal:

==>> sekarang ada yang baru, membuat huruf tebal disarankan pakai tag

2. membuat huruf miring:

==>> sekarang ada yang baru, membuat huruf miring disarankan pakai tag

3. membuat huruf bergaris bawah:

4. membuat huruf dengan efek dicoret:

LATIHAN:

Oke, sekarang langsung praktek saja ya�

Buka Notepad, lalu ketiklah kode-kode berikut secara manual.

Setelah itu, save dengan nama �pelajaran3.html�

Lalu buka dengan browser Anda.





Dasar-dasar HTML � Pelajaran 3





Ini huruf tebal dan miring sedangkan yang ini miring saja, yang ini tebal dan bergaris bawah, sedangkan ini tebal dan dicoret

Spoiler for open this:

Spoiler for open this:

Spoiler for open this:

for Pelajaran IV; Perataan Teks, Pergantian Baris, dan Pergantian Paragraf:






Oke, tag
dan
memang tidak membutuhkan tag penutup.

Khusus untuk kode
, pada kondisi tertentu dia membutuhkan tag penutup.

Misalnya, ketika kita menambahkan �perataan teks� pada kode ini.

Contoh:

Kita ingin membuat paragraf tertentu rata kanan.

Maka kodenya adalah:

ini dia paragraf yang rata kanan


Nah, pada kondisi seperti ini, tag perlu dibuatkan tag penutup
.



NB:

Kode seperti align=�right� ini sebenarnya hanya kode tambahan. Maksudnya, dia tidak berdiri sendiri. Dia harus dilekatkan pada kode lain.

Dalam contoh di atas, kode align=�right� dilekatkan pada kode


Nah, dalam perkembangannya nanti, kita akan tahu bahwa masih banyak kode lainnya yang termasuk kode tambahan.

Spoiler for open this:

[quote]

[spoiler=open this] for Pelajaran V; Membuat Link:






Link atau hyperlink adalah teks atau gambar atau unsur apapun, yang bila diklik akan membawa kita ke halaman web lain.

Cara membuat link ini sangat gampang.

Rumusnya sebagai berikut:

teks atau gambar atau apapun yang akan diberi link

Sebagai Contoh:

Di awal-awal tulisan ini saya menyisipkan link pada kata �saya�, yang mana jika di klik kamu akan dibawa ke halaman �About Me�

Cara membuatnya (Ini hanya contoh kalimat):

�Saya sudah beberapa bulan ini bergabung dengan Saya

Maka, di halaman web nanti akan terlihat seperti ini: Oke, saya akan mengajari sedikit tentang dasar-dasar dari bahasa HTML

Nah, bagian yang diberi warna biru (teks atau gambar atau apapun yang akan diberi link) bisa diisi dengan teks, gambar, atau apapun.

Apapun yang kita masukkan di sini, maka itulah yang nanti bisa diklik oleh pengunjung.

Jadi kita juga bisa meletakkan gambar atau apapun di sana.

CARA MEMBUAT AGAR LINK TERBUKA DENGAN JENDELA BARU:

Kalau Kamu mengklik link �Saya� yang saya buat di atas, maka hasilnya akan terbuka dengan jendela baru. Hal ini disebabkan karna saya mensettingnya untuk dibuka di jendela baru.

Namun bila tidak ada pengaturan khusus seperti itu, biasanya link akan terbuka di halaman yang sama. Bila kita mengklik sebuah link di halaman A, maka hasilnya akan �menimpa� halaman A tersebut.

Nah, bagaimana caranya agar link itu terbuka dengan jendela baru?

Caranya sangat gampang:

Kita tambahkan saja tag berikut ini di dalam kode HTML tersebut:

target=�_blank�

Berikut adalah kode lengkapnya (agar lebih mudah, dibuat dalam bentuk perbandingan ya�.)

Kode HTML sebelum ditambahkan ="Lime"]target=�_blank�:

�Oke, Sayaakan mengajari sedikit tentang dasar-dasar dari bahasa HTML

Kode HTML setelah ditambahkan target=�_blank�

�Ok, Sayaakan mengajari sedikit tentang dasar-dasar dari bahasa HTML

Nah, gampang sekali kan gan?















Selamat Mencoba Semoga Bermanfaat