Dasar-Dasar Html
Kali ini saya akan membahas tentang tag/kode-kode yang di gunakan untuk membuat suatu website sederhana. menggunakan kode html, html adalah singkatan dari Hypertext Markup Language dan biasa di gunakan untuk mendesain tampilan web..
script html dapat dibuat atau di desain dengan banyak software.. salah satunya... keluarga adobe.. yaitu adobe dreamweaver... bisa juga menggunakan notepad untuk web sederhana.. dan banyak lagi..
kode Html memiliki beberapa struktur sebagai berikut:
Struktur
Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan
Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih
baik
mempraktekan langsung struktur ini sbg perancangan halaman web kita.
Listing 1 menunjukkan struktur suatu halaman HTML sederhana:
Listing 1
<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>
<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!–halaman CONTENT dimulai –>
<B>Yang ditampilkan di browser, cuma tulisan ini.
</BODY>
</HTML>
Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?
Listing 2
<B>Untuk menampilkan tulisan cetak tebal</B><BR>
<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>
<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>
<BR> digunakan untuk menampilkan baris baru.
Listing 3
<P> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.
</P>
Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup
tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.
Listing 4
Bekerja dengan Heading
Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai
tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:
<H1>Level – 1 </H1>
<H2>Level – 2 </H2>
<H3>Level – 3 </H3>
<H4>Level – 4 </H4>
<H5>Level – 5 </H5>
Listing 5
Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.
sebagai berikut
o Ordered List
o Unordered List
Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan
Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.
Cobalah kode di bawah ini:
<OL>
<LI>Java
<LI>C++
</OL>
kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita
menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>
sebagai di bawah ini:
Listing 6
<UL>
<LI>Java
<LI>C++
</UL>
Listing 7
Penerapan Definisi List
Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing 7 dibawah ini.
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
Listing 8
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara
otomatis dari kiri ke kanan. Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
Membuat Links
Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling
berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,
pada browser secara otomatis Kita ke halaman web itu .
Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks
Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan
tag </a> dan itu mewakili anchor.
Listing 9
<A href =http://andi-mandiri.blogspot.com>ilusiandi </A>
href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili
Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan
bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,
kode berikut memanggil lokasi andi-mandiri.blogspot.com didalam suatu jendela browser baru
ketika seseorang mengklik teks.
Listing 10
<A href = http://andi-mandiri.blogspot.com>ilusiandi </A>
contoh :
Facebook
Listing 11
satu lagi tag yang dapat mempercantik tampilan web kamu dengan tulisan berjalan yaitu tag <marquee> Teks ini akan berjalan </marquee>
Contoh:
contoh script.. silahkan copy paste script ini pada aplikasi notepad.. lalu kamu simpan dengan extensi .html
<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<marquee> teks ini akan berjalan </marquee>
</BODY>
</HTML>
Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html
script html dapat dibuat atau di desain dengan banyak software.. salah satunya... keluarga adobe.. yaitu adobe dreamweaver... bisa juga menggunakan notepad untuk web sederhana.. dan banyak lagi..
kode Html memiliki beberapa struktur sebagai berikut:
Struktur
Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan
Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih
baik
mempraktekan langsung struktur ini sbg perancangan halaman web kita.
Listing 1 menunjukkan struktur suatu halaman HTML sederhana:
Listing 1
<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>
<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!–halaman CONTENT dimulai –>
<B>Yang ditampilkan di browser, cuma tulisan ini.
</BODY>
</HTML>
Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?
Listing 2
<B>Untuk menampilkan tulisan cetak tebal</B><BR>
<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>
<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>
<BR> digunakan untuk menampilkan baris baru.
Listing 3
<P> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.
</P>
Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup
tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.
Listing 4
Bekerja dengan Heading
Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai
tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:
<H1>Level – 1 </H1>
<H2>Level – 2 </H2>
<H3>Level – 3 </H3>
<H4>Level – 4 </H4>
<H5>Level – 5 </H5>
Listing 5
Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.
sebagai berikut
o Ordered List
o Unordered List
Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan
Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.
Cobalah kode di bawah ini:
<OL>
<LI>Java
<LI>C++
</OL>
kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita
menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>
sebagai di bawah ini:
Listing 6
<UL>
<LI>Java
<LI>C++
</UL>
Listing 7
Penerapan Definisi List
Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing 7 dibawah ini.
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
Listing 8
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara
otomatis dari kiri ke kanan. Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
Membuat Links
Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling
berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,
pada browser secara otomatis Kita ke halaman web itu .
Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks
Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan
tag </a> dan itu mewakili anchor.
Listing 9
<A href =http://andi-mandiri.blogspot.com>ilusiandi </A>
href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili
Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan
bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,
kode berikut memanggil lokasi andi-mandiri.blogspot.com didalam suatu jendela browser baru
ketika seseorang mengklik teks.
Listing 10
<A href = http://andi-mandiri.blogspot.com>ilusiandi </A>
contoh :
Listing 11
satu lagi tag yang dapat mempercantik tampilan web kamu dengan tulisan berjalan yaitu tag <marquee> Teks ini akan berjalan </marquee>
Contoh:
contoh script.. silahkan copy paste script ini pada aplikasi notepad.. lalu kamu simpan dengan extensi .html
<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<marquee> teks ini akan berjalan </marquee>
</BODY>
</HTML>
Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html
Post a Comment