Scribd Logo
Upload

Welcome to Scribd!

  • Panduan Belajar HTML

    Uploaded by

    Petapa Genit
    5 views15 pages

    Original Title

    Panduan+Belajar+HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views15 pages

    Panduan Belajar HTML

    Uploaded by

    Petapa Genit

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Belajar HTML

    Oleh Syauqi Fuadi

    CopyRight2008

    Daftar isi
    Daftar isi.............................................................................................................................. 2 Bagian pertama ................................................................................................................... 3 Bagian kedua....................................................................................................................... 5 Heading ........................................................................................................................... 5 Paragraf ........................................................................................................................... 6 Style up your text ............................................................................................................ 6 List .................................................................................................................................. 7 All about picture ............................................................................................................. 8 Create Link...................................................................................................................... 9 Preformatted.................................................................................................................. 10 Special karakter............................................................................................................. 10 Bagian Ketiga.................................................................................................................... 11 Bermain dengan warna ................................................................................................. 11 Warnai webpagemu! ..................................................................................................... 12 Paragraf alignment ........................................................................................................ 12 Create your own table ................................................................................................... 13 New List........................................................................................................................ 14

    Bagian pertama
    Bagi yang sudah mahir dalam menggunakan bahasa HTML, mungkin tidak akan membaca tulisan ini, tetapi mungkin ada temannya atau saudaranya atau teman saudaranya atau saudara temannya atau siapanyalah, yang belum bisa menggunakan bahasa HTML, tolong diberi tahu, untuk baca tulisan ini, siapa tahu bisa jadi mengerti bahasa HTML.Sebenarnya saya sendiri ingin bagi-bagi ilmu buat pembaca, soalnya bahasa HTML itu ternyata mudah dan simple kok! Dan belajarnya gak perlu software yang macam-macam, cukup sediain simple text editor aja, yah NotePad itu loh Ya udah, langsung aja nyok mulai pelajaran hari ini!!! Pertama yang harus dimengerti adalah, bahasa HTML ini selalu menggunakan tag seperti ini < dan >.contoh : o <BoDy>tes aja ya</bodY> Setiap tag, akan ditutup dengan tanda / , seperti contoh diatas <body>..</body> Bila hal tersebut tidak dilakukan, maka efeknya akan terus terkena pada tulisan-tulisan selanjutnya Penulisan kodenya juga gak usah rapi-rapi banget, karena efek yang keluar akan sama, contoh : o <head>coba coba dulu</head> akan sama dengan yang dibawah o <HEAD>Sama aja deh</HEAD> o Atau mau seperti ini, gak ngaruh <HeAd> bla bla blab la</hEaD> Satu hal lagi yang berbeda dari bahasa pemrograman yang lain, bila ada kesalahan dalam penulisan, anda tidak akan mengalami crash atau yang lain dalam menjalankannya, yang terjadi hanyalah computer tidak mengerti perintah anda dan tidak akan menjalankannya. Contoh : o Bila anda menulis seperti ini <bodi> yah salah tulis </body> yang akan terlihat pada webpage anda hanyalah tulisan yah salah tulis tanpa menghiraukan tulisan diantara tanda < dan >. Setelah anda semua tahu cara penulisan bahasa HTML, barulah kita mulai pembuatan webpage nya. Langkah pertamanya adalah dengan membuka text editor yang anda miliki, kalau saya sih, pake notepad.Lalu mulailah menulis kode sebagai berikut :
    <html> <head> <title>webpage buatan saya</title> </head> <body> Tulis apa aja ya seterah </body> </html>

    Setelah menulis semuanya, kemudian simpan pekerjaan anda dengan nama (terserah).html, yang perlu diperhatikan adalah ekstensinya, yaitu .html bila

    anda lupa menuliskannya maka file anda tidak akan dianggap sebagai file html oleh computer. Sekarang, tanpa menutup pekerjaan anda, buka file html anda yang baru saja anda buat.Maka akan terlihat kurang lebih seperti ini :

    Nah, bila hasilnya sudah mirip dengan contoh, kita akan mulai belajar mengerti tulisan yang telah saya suruh anda menulisnya. o Yang pertama <html>..</html> kode ini wajib dituliskan karena untuk memberitahu computer bahwa tulisan yang kita ingin tulis menggunakan bahasa html o Yang kedua <head></head> pada penulisan html, akan terbagi bagian head dan bagian body.Penggunaan tag <head> biasanya untuk menuliskan bagian awal halaman, sedangkan bagian isi biasanya dengan tag <body> o Karena <body> sudah dijelaskan, jadi sudah selesai deh penjelasannya, tapi untuk sedikit tambahan, anda bisa menggunakan penulisan seperti
    <!-perhatian-perhatian baca ini dulu--!>

    Untuk membuat komentar-komentar mengenai kode yang anda tulis, karena mungkin ada yang melihat kode dari webpage anda terbantu dengan komentar anda tentang kode tersebut. Yah segini dulu ya tulisan saya tentang belajar html, mungkin beberapa hari lagi akan saya lanjutkan, tungguin aja dijamin deh gak nyesel!! Terima kasih untuk yang membaca, semoga dapat mencerna tulisan saya dengan mudah, bila ada kesulitan, bisa kasih komentarnya kok lewat blog ini.

    Bagian kedua
    Heading
    Oke, setelah belajar dasar penulisan html, sekarang kita akan beralih untuk penulisan isi webpage.Untuk belajar menulis html, saya sarankan anda membuka file latihan anda dengan text editor atau notepad dan dengan browser anda.Bila anda bingung, saya akan berikan contoh, misalkan anda menyipan file latihan anda dengan nama latihan.html, buka file tersebut dengan double klik, maka file anda sekarang sedang browser anda, apakah itu Internet explorer(IE), atau firefox, opera, dll.Kemudian buka kembali file anda dengan notepad, klik kanan pada file anda dan pilih open with dan pilih notepad.Sekarang file anda telah dibuka dengan browser anda dan notepad, bila anda melakukan perubahan pada file anda, anda tinggal menyimpan pekerjaan anda dan dapat segera melihat perubahannya dengan beralih ke browser anda dan lakukan refresh.Ya, webpage anda akan berubah sesuai perubahan yang anda lakukan, cara ini sangat berguna bagi yang sedang mencoba-coba kode baru dan langsung melihat hasilnya.Bila hasilnya kurang memuaskan, anda tinggal beralih ke notepad anda dan ubah bagian-bagian yang masih salah kemudian simpan, dan refresh lagi. Setelah tau cara-cara diatas, sekarang saatnya memperkenalkan anda pada heading.Dengan tag ini, anda dapat mengatur bagian-bagian yang penting dari tulisan anda.Heading terdiri dari 6 bagian, makin tinggi nominalnya makin kecil tulisannya.Contoh:

    Penggunaan heading biasanya digunakan untuk membuat judul tulisan dan subjudul.Anda dapat menambahkan tag ini pada file latihan anda yang sebelumnya, perlu diingat anda menambahkannya setelah tag <body> .
    <h1>ini judulnya</h1> Terus isisnya deh, bla bla bla bla <h2>subjudul nih</h2>

    Biasanya lebih spesifik isinya <h3>terus isi subsubjudulnya</h3> Udah ah, capek hihihi

    Paragraf
    Nah, kalau udah bisa bikin judulnya, sekarang cara buat paragraph di html, karena bila anda tekan ENTER sebanyak apapun, tidak akan berpengaruh pada webpage, kalau tidak percaya, coba saja sendiri.Maka dari itu sekarang kita akan menggunakan tag <p> untuk membuat paragraph baru, karena ini tag special, jadi tidak butuh </p> untuk tag penutup. Sekarang coba tambahkan tag ini pada file latihan anda.
    <p>Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget<p> Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget Ini tulisan gak penting banget<p>

    Tapi ada hal yang perlu diingat, anda tidak perlu menggunakan tag <p> sebelum tag heading, karena heading sudah menjadikan tulisan tersebut terpisah dari paragraph.Yah, semuanya bisa anda tahu bila anda sudah mencobanya.Bila anda telah mencobanya, akan terlihat efek dari tag <p>.Efek dari tag ini dapat dikatakan seperti menekan ENTER dua kali.Nah, satu lagi tag yang dapat digunakan untuk membuat baris baru dalam html, yaitu tag <br>, atau bisa disebut breakline.Tag ini sama halnya bila kita tekan ENTER bila sedang mengetik biasa, coba aja dulu deh, baru komentar. Nah, dari yang sudah dipelajari diatas, anda sudah dapat membuat webpage anda sendiri, ya walaupun masih sangat sederhana, untuk latihan sih cukup, biar anda cepet hapal kode-kodenya dan dengan lincah menulis bahasa html.

    Style up your text


    Yup, setelah latihan tentang pelajaran sebelumnya, sekarang anda akan diperkenalkan dengan Bold, italic, underline, dan typewriter. Untuk membuat tulisan anda menjadi bold di html, anda dapat menggunakan tag <b>.</b> Untuk menjadikannya italic atau miring, gunakan tag <i>.</i> Dan anda bisa menggunakan tag <u>.</u> Bila anda ingin tulisan anda menjadi seperti ini, dapat menggunakan tag <tt>.</tt> Dan bila anda ingin menggunakan keempat-empatnya, tinggal tuliskan semuanya saja, <b><i><u><tt>..</b></i></u></tt>

    List
    Yah.. untuk langkah selanjutnya, anda bisa latihan sendiri duluagar siap untuk yang selanjutnya. Sekarang kita akan bermain dengan List, atau anda mungkin lebih kenal dengan bullet dan numbering. Untuk bullet, lebih dikenal dengan dengan unordered list, <ul>.</ul>.Untuk penulisannya harus seperti ini :
    <ul> <li>item 1 <li>item 2 <li>item 3 </ul>

    Anda pasti bingung ketika melihat tag <li>, tag ini digunakan untuk mendefinisikan setiap item yang kita tuliskan, karena <li> berarti List Item. Untuk numbering, pada html dikenal dengan order list <ol></ol>.Untuk penulisannya tidak berbeda dengan yang sebelumnya :
    <ol> <li>item 1 <li>item 2 <li>item 3 </ol>

    Nah, setelah tahu cara membuat bullet dan numbering yang biasa, anda bisa mencoba yang sedikit luar biasa.Cobalah gabungkan antara ordered list dengan unordered list atau antara sesama order list atau unordered list.Yah, seperti dibawah ini :
    <ul> <li>item <li>item <ul> <li>item <li>item <li>item </ul> <li>item <ol> <li>item <li>item <li>item </ol> </ul> 1 2 1 2 3 3 1 2 3

    Nah, setelah banyak belajar tentang html, sekarang waktunya bereksperimen, cobalah gabungkan ilmu-ilmu yang telah anda dapatkan dan racik menjadi sesuatu yang tidak biasa, karena dengan begitu ilmu anda akan bertambah banyak. 7

    All about picture


    Pelajaran berikutnya adalah gambar dalam webpage.Yang perlu diingat adalah, gambar yang ingin anda masukkan ke dalam webpage anda, sebaiknya berada di dalam folder yang sama dengan webpage anda berada.Atau terdapat folder khusus untuk menyimpan gambar, itu bisa menjadi lebih baik, untuk jelasnya dapat dilihat digambar.Perlu diperhatikan juga, tipe gambar yang efektif untuk di dalam web adalah tipe GIF.Karena gambar berekstensi GIF akan menghemat ukuran, juga ekstensi GIF dapat memberikan gambar yang lebih menarik karena biasanya dapat bergerak.

    Bila sudah jelas tentang penyimpanan gambar, sekarang kita beralih ke cara memasukkan gambar ke dalam webpage. Tag yang akan digunakan adalah <img src=url gambarnya> Disini url gambar anda bisa berbagai macam, bila anda menyimpan gambar didalam folder picture, urlnya dapa seperti ini picture\gambar.gif.Bila anda menyimpannya bersama dengan webpage anda, berarti anda tinggal memasukkan nama gambar beserta estensinya saja gambar.gif. Sekarang coba masukkan tag ini : Ini ada gambar<img src=url gambar> baguskan gambarnya

    Maka hasilnya jadi

    seperti ini kan, gambar satu baris dengan teks.

    Ini ada gambar<img align=top src=url gambar> baguskan gambarnya Kalau yang ini jadi seperti ini.

    Ini ada gambar<img align=middle src=url gambar> baguskan gambarnya

    Yang ini jadi ada

    ditengah tengahnya

    Ini ada gambar<img align=bottom src=url gambar> baguskan gambarnya

    sama seperti sebelumnya. Kalau yang ini defaultnya, Nah, sekarang gambarnya bila dikasih keterangan lo! Seperti yang dibawah ini:

    Gampang kok! Pakai tag yang ini alt=tulis komentarnya, tag ini ditambahin setelah tag <img .. jadi tag nya seperti ini <img alt=apa aja align=middle src=gambar.gif>

    Create Link
    Setelah bermain-main dengan gambar, sekarang saatnya membuat link.Tapi sebelumnya diharapkan anda telah membuat beberapa file html, agar sapat dihubungkan satu sama lain.Tagnya gak susah kok, masukkan yang seperti ini : <a href=url nya>tulisan untuk linknya</a> Jadinya seperti ini

    Untuk link, anda dapat membuat link tidak hanya ke sesame fiel html, anda juga dapat link ke sebuah gambar.Anda tinggal mengganti urlnya saja.Yah, pokoknya being creative aja deh!Dan jangan takut mencoba! Pelajaran selanjutnya adalah membuat link dengan gambar, biasanya dibuat untuk menarik perhatian orang banyak. Tagnya adalah gabungan dari yang sudah kita pelajari sebelumnya. <a href=url nya> <img src=url gambar> kalau perlu di kasih tulisan, ya tulis</a> Nah, kalau gambar yang ingin di pasang ternyata terlalu besar untuk sebuah link, anda bisa mengatur ukurannya dengan menambahkan tag ini WIDTH=angka berapa aja HEIGHT=angka juga , jadinya seperti ini tag nya : <a href=url nya> <img src=url gambar width=65 height=70> kalau perlu di kasih tulisan, ya tulis</a>

    Preformatted
    Selanjutnya, kita akan mencoba menampilkan tulisan kita apa adanya di webpage. Misalkan kita menulis seperti ini : Coba tes pencet enter Terus tab -------------------| Eh enter lagi | --------------------

    Nah, dari pelajaran yang sebelumnya pasti anda sudah tahu kalau kita menulis seperti ini, yang akan tampil di webpage tidak akan sama.Ya, itu memang benar, maka dari itu kita butuh tag yang seperti ini <pre></pre> .Tag ini akan menampilkan tulisan kita apa adanya di webpage.Kalau tidak percaya, coba aja sendiri, tapi ingat! Penempatan tagnya jangan sampai salah, caranya seperti ini nih : <pre> Coba tes pencet enter Terus tab -------------------| Eh enter lagi | -------------------</pre>

    Special karakter
    Nah, untuk tag yang selanjutnya adalah tentang special karakter.Mungkin anda bingung untuk memasukkan karakter seperti ini ke dalam webpage. Nah ini ada tabelnya :

    10

    Bagian Ketiga
    Bermain dengan warna
    Nah, setelah tahu cara menulis yang baik dalam html, sekarang adalah waktunya untuk mempercantik tampilan webpage dengan warna.Pertama yang harus anda pahami adalah, untuk memasukkan warna, html menggunakan kode heksa decimal.Wah, pasti ada yang bingung, gak uash dipkirin banget, saya sendiri gak hapal sama kode-kode itu, yang harus anda ketahui adalah konsep dari kode tersebut.Heksa decimal terdiri dari 16 angka dan huruf (1,2,3,4,5,6,7,8,9,A,B,C,D,E,F).Satu kode hesadesimal terdiri dari 6 angka atau huruf, contoh (6699FF [biru muda] , 000000 [hitam], FFFFFF [putih])Nah, bila sudah mengerti konsep dari heksadesimal, searang saya kasih tahu cara gampangnya, juga bisa memasukkan warna hanya dengan teks contoh : black, blue, red, dll.Semuanya ada di dalam tabel di bawah ini :

    11

    Warnai webpagemu!
    Sekarang kita akan memasukkan warna-warna yang telah kita pelajari ke dalam background webpage.tag yang digunakan adalah bgcolor=#xxxxxx. Namun tag ini harus diletakkan bersamaan dengan tag body, jadinya seperti ini. <body bgcolor=#34ff55> Anda juga dapat mengganti warna teks defaultnya, yang sebelumnya hanya warna hitam, dengan menggunanakan tag text=#xxxxxx.Hal lain yang juga dapat anda ganti adalah sebagai berikut : Bgcolor = warna backgournd Text = warna teks Link = warna link, sebelumnya warna biru Vlink = warna link yang setelah di klik Semua tag ini di tempatkan bersamaan dengan tag body. Oh, ya.. sebagai tambahan, anda juga dapat menggunakan gambar sebagai background.Dengan menggunakan tag ini : <body background=url gambarnya> Penempatan tag ini juga sama seperti tag sebelumnya, harus bersamaan dengan tag body. Nah, setelah mewarnai background, kita akan berlanjut untuk mewarnai teks, seperti ini.

    Caranya tinggal masukkan tag ini sebelum teks yang ingin diwarnai. <font color=#xxxxxx></font> Untuk menambah kesan menarik dari tulisan anda, dapat juga memainkan ukuran font dengan tag berikut : <font size=N></font> Dan anda pun juga dapat mengganti jenis font, tapi dengan syarat font tersebut sudah terdapat di computer anda.Gunakan tag berikut : <font face=xxx>.</font>

    Paragraf alignment
    Pada pelajaran sebelumnya paragraf memang sudah dibahas, namun yang kali ini sedikit berbeda.Karena kita akan mengatur align dari suatu paragraf.Tag yang digunakan adalah sebagai berikut : <p align=center/left/right>...</p> Tag ini memang berbeda dengan dengan yang sebelumnya, karena yang sebelumnya tidak menggunakan tag penutup dan yang sekarang menggunakan penutup.Sebagai catatan, alignment juga bisa digunakan pada gambar, anda tinggal menambahkan tag align=center.Jadinya seperti ini : <img srcgbr.gif align=right>

    12

    Create your own table


    Mungkin pelajaran yang cukup membingungkan bagi anda, karena saya sendiri bingung waktu pertama kali mempelajarinya.Pembuatan tabel itu sendiri pada html memiliki pola sebagai berikut :

    Ya, bila anda sudah memahami gmbar di atas, pembuatan tabel akan dimulai dari kiri ke kanan dan akan turun ke bawah dan dimulai dari kanan lagi.Jadi, tagnya akan seperti ini : Tabel dengan ukuran 3x3 <table border=1> <tr> <td>baris 1 kolom1</td> <td>baris 1 kolom2</td> <td>baris 1 kolom3</td> </tr> <tr> <td>baris 2 kolom1</td> <td>baris 2 kolom2</td> <td>baris 2 kolom3</td> </tr> <tr> <td>baris 3 kolom1</td> <td>baris 3 kolom2</td> <td>baris 3 kolom3</td> </tr> </table> Border=x berarti menandakan tebalnya garis yang akan membentuk tabel. <tr> berarti Table Row, atau baris dari tabel. <td> menandakan Table Data, dapat diisi tag html apa saja yang sudah pernah anda pelajari sebelumnya.anda bisa memasukkan link, gambar, alignment,dll. Oh, ya... anda juga dapat menggunakan vertival alignment untuk mengatur semua item yang ada di dalam satu cell : <td valign=top/bottom/middle> Untuk menyatukan beberapa cell, dapat menggunakan tag berikut : Untuk merger kolom : <td colspan=x>...</td> Untuk merger baris : <td rowspan=x>...</td> Anda juga dapat menambahkan judul pada tabel anda dengan tag <caption>.Tetapi harus diingat penempatannya setelah tag <table>. <table border=1><caption>judul</caption>

    13

    Berikut tag yang perlu anda ketahui mengenai pembuatan tabel : <table.... cellspacing=x> : untuk mengatur jarak antara cell <table....cellpadding=x> : untuk mengatur jarak antara isi tabel dengan dinding cell <tr bgcolor=#xxxxxx> /<tr bgcolor=#xxxxxx>: untuk mengatur warna di dalam suatu cell <td background=gbr.gif> : untuk menambahkan gambar background pada cell <table...background=gbr.gif> : untuk menambahkan gambar background pada tabel

    Untuk sedikit tambahan, anda dapat membuat tabel tanpa border/garis dengan mengatur border=0 atau dengan hanya menulis <table> tanpa tag border.

    New List
    Bila sebelumnya anda belajar membuat list dengan tampilan yang sederhana, hanya dengan angka dan sebuah lingkaran.Sekarang anda dapat membuat dengan lebih banyak pilihan, berikut tagnya : Untuk yang Unordered list ada beberapa tipe : o <ul type=square> o <ul type=disc> o <ul type=circle>

    Untuk yang Ordered List ada beberapa tipe juga :

    14

    Untuk memulai list juga tidak perlu dari awal, dari tengah juga bisa, anda dapat menggunakan tag <ol.... start=14> jumlah dari start harus berupa angka, walaupun tipe dari list yang digunakan adalah tipe huruf.Anda juga dapat merubah urutan list(khusus ordered list) langsung dengan tag <li value=5>, hasilnya dapat dicoba sendiri.

    Hmm.. mungkin sampai disini dulu pelajarannya, tapi jangan bersedih hati, mungkin kita dapat bertemu kembali di tulisan saya yang lainnya.Yang penting jangan malas untuk belajar dan jangan takut untuk mencoba, semua yang saya terangkan ini masih sangat dasar, banyak kombinasi yang dapat dibuat dari semuanya.Jadi sekali lagi jangan takut untuk mencoba segala sesuatu dan Being Creative!!!. Jangan lupa untuk selalu kunjungi blog ku : http://www.pribumi-studio.blogspot.com/ http://www.white-field.blogspot.com/ Terima kasih

    15

    You might also like