Scribd Logo
Upload

Welcome to Scribd!

  • Pen Gen Alan HTML

    Uploaded by

    Ryan Rizky
    9 views7 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, 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 DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views7 pages

    Pen Gen Alan HTML

    Uploaded by

    Ryan Rizky

    Copyright:

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

    Pengenalan HTML

    Apa yang dimkasud dengan Iile HTML?



    - HTML merupakan kependekan dari Hyper Text markup Language

    - Sebuah Iile HTML merupakan sebuah Iile teks yang berisi tag-tag markup

    - Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

    - File HTML harus memiliki ekstensi htm atau html

    - File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.


    Pengen Nyoba Bikin?
    Mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik Start,
    Program, Accessories, Notepad).
    Ketikkan teks berikut:
    <html
    <head
    <titleJudul Halaman</title
    </head
    <body
    Ini halaman pertama saya. <bTeks ini ditebalkan</b
    </body
    </html
    Simpan dengan nama 'halamanku.htm (jangan lupa tambahkan tanda kutip ganda pada
    nama Iilenya. Kalau lupa maka nama Iilenya akan menggunakan ekstensi deIault .txt
    sehingga menjadi halamanku.htm.txt).
    Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari Iile
    halamanku.htm yang tadi kamu bikin. Klik OK, dan browser akan menampilkan halaman
    yang tadi kamu buat.

    Gampang kan? Atau masih bingung? Ok, kita akan melihat penjelasan dari contoh di atas.
    Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat bahwa tag pertama
    adalah html~. Tag HTML pada umumnya selalu memiliki pasangan yang memiliki tag sama
    dengan sedikit tambahan tanda garis miring '/, dan kamu bisa melihat pasangan tag html~
    di akhir script yaitu /html~.
    Tag html~ memberitahu browser bahwa inilah awal dari dokumen HTML. Tag
    pasangannya yaitu /html~ menyatakan bahwa inilah akhir dari dokumen HTML.
    Teks di antara head~ dan /head~ adalah teks inIormasi header. InIormasi header ini tidak
    ditampilkan pada jendela browser.
    Teks di antara title~ adalah judul dokumen kamu. Judul ini akan ditampilkan di caption
    browser (lihat di bagian paling atas kanan dari browser kamu).
    Teks di antara tag body~ adalah teks yang akan ditampilkan pada jendela browser kamu.
    Dan terakhir, teks di antara b~ dan /b~ akan ditampilkan dalam huruI tebal.
    Nah, dengan penjelasan ini kamu mustinya udah mulai manggut-manggut dan merasa, ko
    ternyata belajar HTML gampang gini yah :). Mudah-mudahan.
    Sekarang kita akan lihat mengenai ekstensionnya. Sebagaimana sudah disampaikan di awal,
    kita bisa membuat Iile HTML dengan 2 ekstension yaitu .htm dan .html. Nah ekstension .htm
    ditujukan untuk operating sistem jaman dulu yang hanya mensupport ekstensi 3 huruI.
    Sedangkan ekstensi .html akan lebih aman digunakan jika OS dan aplikasinya support karena
    lebih jelas menunjukkan bahwa ini adalah Iile HTML.
    Sebagai catatan, setiap kamu melakukan perubahan pada Iile HTML kamu, maka kamu harus
    me reIresh browser untuk melihat perubahan tampilannya.
    Elemen HTML, apa tuh? Nah, dalam tutorial Belafar HTML yang lalu, kamu udah nyoba
    bikin halaman HTML pertama kamu dan mengerti cara bikinnya. Berikutnya kamu harus
    mengerti tentang elemen HTML dan cara menuliskannya. Kamu akan memerlukan definisi
    dasar ini dalam proses belafar HTML yang kamu lakukan sepanfang tutorial di sini. Berikut
    petunfuk pentingnya.
    Ingat petunjuk penting ini:
    Dokumen H1ML adalah file teks yang terdiri dari elemen H1ML. Aah, elemen H1ML itu
    didefinisikan menggunakan apa yang disebut dengan tag H1ML.
    Berikut poin-poin yang akan membantu kamu mengingat dan memahami pengertian Tag
    HTML:

    O Tag HTML digunakan untuk menandai (mark-up) elemen HTML
    O Tag HTML berada di antara dua karakter penanda berikut dan ~
    O Karakter penanda itu disebut dengan tanda kurung siku
    O Tag HTML umumnya selalu berpasangan seperti b~ dan /b~
    O Tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup
    O Teks di antara kedua tag tersebut disebut isi elemen
    O Tag HTML tidak bersiIat case sensitiI, b~ memiliki arti yang sama dengan B~



    lemen HTML
    Ingat contoh HTML di tutorial sebelumnya kan:
    <html
    <head
    <titleJudul Halaman</title
    </head
    <body
    Ini halaman pertama saya. <bTeks ini ditebalkan</b
    </body
    </html
    Ini adalah elemen HTML:
    <bTeks ini ditebalkan</b
    Elemen HTML ini dimulai dengan tag pembuka: b~
    Isi dari elemen HTML adalah: Teks ini ditebalkan
    Elemen HTML diakhiri dengan tag penutup: /b~
    Fungsi tag b~ adalah untuk mendeIinisikan sebuah elemen HTML yang harus ditampilkan
    dengan huruI tebal.
    Nah, ini juga elemen HTML:
    <body
    Ini adalah halaman pertama saya. <bTeks ini ditebalkan</b
    </body
    Elemen HTML ini dimulai dengan tag pembuka body~, dan berakhir dengan tag penutup
    /body~
    Fungsi dari tag body~ adalah untuk mendeIiniskkan elemen HTML yang berisi badan (isi)
    dari dokumen HTML.
    Mengapa kita menggunakan tag dalam huruI kecil?
    Kita sudah membahas sebelumnya bahwa tag HTML tidak case sensitiI: B~ memiliki arti
    yang sama dengan b~. Kalau kamu lagi surIing web, kamu akan melihat bahwa banyak
    situs web menggunakan tag HTML dalam huruI besar dalam source codenya. Tapi dalam
    contoh di atas, kita menggunakan huruI kecil. Tahu kenapa?
    Kalau kamu mengikuti standar web terbaru, kamu harus selalu menggunakan tag dalam huruI
    besar. World Wide Web Consortium (W3C) merekomendasikan penggunaan huruI kecil
    dalam rekomendasi HTML 4 mereka, dan XHTML (generasi berikutnya dari HTML)
    memerlukan tag dalam huruI kecil.

    Dasar HTML

    ag HTML yang paling penting adalah tag-tag yang mendefinisikan fudul, paragraf dan ganti
    baris.
    Seperti umumnya bahasa pemrograman lainnya, maka cara terbaik untuk mempelafari
    HTML adalah dengan banyak berlatih. Latihan tentu safa memerlukan alat bantu. Nah, pada
    dasarnya kamu bisa bikin file HTML menggunakan notepad, tapi tentu safa banyak software
    untuk menulis dengan berbagai fasilitas yang akan memudahkan. Googling afa atau cari di
    download.com dengan kata kunci HTML Editor.

    :/:l
    Judul dideIinisikan dengan menggunakan tag h1~ sampai ~h6~. h1~ mendeIinisikan huruI
    judul yang paling besar, dan h6~ yang terkecil. Untuk latihan coba kamu bikin Iile HTML
    berikut ini dan perhatikan hasilnya.

    <h1Ini Judul</h1
    <h2Ini Judul</h2
    <h3Ini Judul</h3
    <h4Ini Judul</h4
    <h5Ini Judul</h5
    <h6Ini Judul</h6

    HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah judul.

    Paragraf
    ParagraI dideIinisikan dengan menggunakan tag p~.
    <pIni adalah sebuah paragraf</p
    <pIni paragraf lainnya</p
    Sama seperti judul, HTML secara otomatis akan menambahkan baris kosong sebelum dan
    sesudah paragraI.

    angan l:5a Tag 5en:9:5
    Kamu pastinya udah pernah ngeliat bahwa paragraI dapat ditulis tanpa tag penutup /p~
    kayak ginii:
    <pIni adalah sebuah paragraf
    <pIni paragraf lain
    Contoh barusan dapat digunakan pada hampir semua jenis browser, tapi jangan ngandelin hal
    itu. Versi-versi HTML ke depan kayaknya ndak akan ngijinin kamu untuk melewatkan tag
    penutup.
    Menutup semua elemen HTML dengan tag penutup adalah cara yang ampuh untuk menulis
    HTML yang kompatibel dengan smeua browser dan pengembangan ke depan. Hal ini juga
    membuat kode kita lebih mudah dimengerti (baik dibaca maupun di browse).

    an9i Baris
    Tag br~ digunakan pada saat kamu pengen membuat baris baru, tapi belum ingin ganti
    paragraI. Tag br~ akan membuatkan sebuah baris baru buat kamu dimanapun kamu
    letakkan tag itu.
    <pIni <br adalah sebuah pa<brragaraf dengan ganti baris </p
    Tag br~ adalah tag yang kosong. Nah, karena itu dia tidak punya tag penutup seperti
    misalnya /br~, karena jadi ndak masuk akal. Ya tho?

    br> a9a: br />
    Kamu akan makin sering melihat penulisan tag br~ dengan cara begini: br /~
    Karena tag br~ tidak memiliki tag penutup, maka tag tersebut melanggar salah satu aturan
    dasar dalam penulisan HTML ke depannya (XHTML yang berbasis XML), di mana semua
    elemen harus ditutup.
    Menuliskan penggantian baris dengan cara br/~ ini menjamin bahwa Iile HTML kamu akan
    kompatibel dengan XML maupun cara penulisan HTML di masa datang.

    Men:liskan Komen9ar /alam HTML
    Tag komentar digunakan untuk menyisipkan sebuah komentar dalam kode sumber HTML.
    Sebuah komentas akan diabaikan oleh browser. Kamu bisa menggunakan komentar untuk
    menjelaskan kode yang kamu bikin, dan tentu saja hal ini akan membantu kamu saat kamu
    perlu melakukan perubahan pada kode kamu kapan-kapan.
    <!-- Ini adalah sebuah komentar --
    Perhatikan bahwa kamu perlu menuliskan tanda seru setelah kurung buka, tetapi tidak
    sebelum kurung tutupnya.

    nga9 hal-hal berik:9

    O Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br)
    O Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: h1~
    O Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda kurung
    siku /h1~
    O Isi elemen berada di antara tag pembuka dan tag penutup
    O Beberapa elemen HTML tidak memiliki isi elemen
    O Beberapa elemen HTML tidak memiliki tag penutup


    Bebera5a Ti5s Yang Bermanfaa9
    Waktu kamu menulis teks HTML, maka kamu tidak akan pernah bisa yakin bagaimana teks
    itu ditampilkan oleh browser lain. Beberapa orang memiliki monitor yang lebih besar, dan
    yang lainnya. Teks akan diatur ulang setiap kali pengunjung mengubah ukuran windownya.
    Jangan pernah mencoba untuk membantuk teks yang memiliki baris kosong atau spasi dekat
    dengan teks itu.
    HTML akan menghapus spasi dalam teks kamu. Berapa banyakpun kamu tuliskan spasi, tetap
    akan dihitung satu. Satu lagi, dalam HTML sebuah baris baru dihitung sebagai satu spasi.
    Menggunakan paragraI kosong p~ untuk menyisipkan baris kosong adalah kebiasaan yang
    kurang baik. Gunakan tag br~ sebagai penggantinya. (tapi jangan juga gunakan tag br~
    untuk membuat daItar. Tunggu sampai pelajaran tentang daItar dimulai ya).
    HTML secara otomatis akan menambah baris kosong sebelum dan sesudah beberapa elemen,
    seperti sebelum dan sesudah paragraI dan judul.
    Tag HTML Dasar

    Berikut adalah tag-tag penting yang akan sangat sering kamu pakai. Dan kamu akan
    mempelajari masing-masing secara lebih detil terutama yang menyangkut atributnya.

    Tag - Descri59ion
    html~ - MendeIinsikan sebuah dokumen HTML
    body~ - MendeIinisikan isi utama
    h1~ to h6~ - MendeIinisikan judul 1 sampai 6
    p~ - MendeIinisikan paragraI
    br~ - Menyisipkan sebuah baris
    hr~ - MendeIinisikan garis horisontal
    !--~ - Bikin komentar

    You might also like