Mengenal dan Belajar Menulis Kode HTML

Mengenal dan Belajar Menulis Kode HTML - HTML adalah singkatan dari Hypertext Markup Language. Fasilitas hypertext merupakan metode yang menghubungkan (link) satu dokumen ke dokumen lain melalui suatu teks atau gambar. HTML merupakan halaman yang berada pada suatu situs internet atau web. Jadi, suatu situs terdiri atas beberapa halaman HTML atau web page. Semakin menarik isi halaman suatu web, semakin sering website itu dikunjungi. HTML  pada dasarnya merupakan kumpulan kode-kode yang ditampilkan dalam format tag untuk ditamplkan di halaman web atau blog.
Biasanya, hyperlink ada pada halaman web atau blog yang jika di klik oleh penggunanya, browser akan menampilkan dokumen yang terhubung dengan link tersebut. Untuk membuat suatu dokumen HTML biasanya menggunakan program Notepad, Microsoft FrontPage, atau Adobe Dreamweaver. Kali ini saya akan membahas tentang cara membuat dokumen HTML atau belajar menulis kode HTML dengan menggunakan editor teks Notepad.
Cara Menulis Kode HTML
  • Langkah pertama, Klik Start>All Programs>Accessories>Notepad atau klik Windows+R di keyboard dan ketik 'notepad'.
  • pada notepad ketikan teks seperti gambar di bawah :
    belajar menulis kode HTML
    • lalu simpan hasil nya dengan klik Ctrl+S di keyboard dan beri nama file tesebut dengan exstensi .html Contoh : "belajar.html" lalu ubah save as type menjadi all files, dan klik OK.
    • Untuk melihat hasilnya, cari file tersebut yang telah anda simpan tadi, biasanya type file tersebut firefox document. klik 2x file itu, sehingga hasilnya akan terbuka di web browser mosilla firefox.

    Agar anda mudah untuk memahaminya, saya akan jabarkan penjelasan mengenai HTML satu persatu.

    1. Tag Head
    Tag Head memiliki fungsi untuk mendeskipsikan header atau bagian kepala dari HTML. Tag head berisi informasi dari dokumen HTML. Informasi tersebut nantinya tidak akan ditampilkan di web browser. Informasi-informasi yang ada pada tag head adalah sebagai berikut.
    • Tag TITLE, digunakan untuk memberi judul dari suatu homepage.
    • Tag BASE, lokasi URL lengkap dari dokumen yang akan dibuat.
    • Tag LINK, link (tautan) dokumen yang akan dibuat dengan dokumen lain yang telah ada.
    • Tag META, informasi tentang dokumen itu sendiri.
     Lihat contoh penggunaan tag head di gambar di bawah :
    contoh penggunaan tag head HTML

     2. Tag Body
     Tag Body diibaratkan sebagai badan suatu HTML, yaitu tempat untuk mengisi teks, gambar, atau animasiyang ditampilkan pada halaman HTML. Atribut pada body umumnya berisi pengaturan isi paragraf. Beberapa atribut yang menyertai tag <BODY>  :
    • background, digunakan untuk membuat background image.
    • bgcolor, digunakan untuk menentukan warna latar belakang.
    • bgproperties, digunakan untuk menentukan nilai properti background.
    • leftmargin, digunakan untuk menentukan batas kiri halaman dalam satuan pixel.
    • topmargin, digunakan untuk menentukan batas atas halaman dalam satuan pixel.
    • text, digunakan untuk menentukan warna teks.
    • link, digunakan untuk menentukan warna link yang belum dikunjungi.
    • alink, digunakan untuk menentukan warna link yang sudah dikunjungi.
    Berikut contoh tag yang sering digunakan pada bagian body :
    tag yang sering digunakan di bagian body halaman HTML
    tag yang sering digunakan dibagian body halaman HTML

    contoh kode HTML sederhana :

    Hasil :
    hasil dari contoh Tag Body HTML

    3. Link
    Link merupakan perintah yang digunakan untuk menghubungkan halaman yang satu dengan yang lain. Link merupakan sarana penting dalam website karena jika tidak menggunakan link, para pengunjung blog/website tidak dapat berpindah dari halaman satu ke halaman yang lainnya. Format penulisan link dimulai dengan tag <A> dan diakhiri dengan tag </A>.
        Contoh penulisan yang menggunakan sintaks link :
    cara membuat code link HTML

    Hasil :
    contoh dari hasil code link HTML

    Di Dalam HTML terdapat tiga jenis llink, yaitu :
    a. Link Absolut, digunakan jika anda ingin membuat link ke web page lain di internet. Contoh seperti gambar yang di atas.

    b. Link Relatif, digunakan untuk berpindah dari satu halaman blog ke blog halaman lain di komputer yang sama. Contoh :
    contoh dari code link HTML
    C. Link ke Bagian Lain Dokumen, digunakan untuk berpindah dari satu bagian ke bagian lain dalam dokumen html yang sama. Link ini dibuat untuk dokumen yang sangat panjang sehingga jika di tampilkan dalam browser web akan mengharuskan anda menggeser Scroll Bar secara berulang-ulang. Contoh penggunakaan link ke bagian lain dalam dokumen :
    contoh dari code link HTML

    Jika anda mrngklik link "Back to Top" maka secara otomatis layar akan menampilkan teks bagian "atas" seperti pada gambar berikut :

    contoh hasil dari code link HTML

    4. Tabel
    Untuk membuat tabel biasanya menggunakan beberapa tag berikut :
    A. Tag <TABLE>, digunakan untuk mendefinisikan sebuah table.
    B. Tag <TR>, digunakan untuk mendefinisikan baris tabel.
    C. Tag <TD>, digunakan untuk mendefinisikan kolom tabel.
    D. Tag <TH>, digunakan untuk mendefinisikan judul pada baris atau kolom.
         Contoh seperti pada gambar di bawah :
    kode HTML untuk membuat tabel

    Hasil :
    contoh hasil dari code tabel HTML
    5. FORM
    Form banyak digunakan untuk membuat buku tamu bagi pengunjung yang masuk ke suatu situs polling atau sejenisnya.
        Tag-tag yang digunakan pada form :
    1. Tag <FORM>, digunakan untuk mendefinisikan form dan diikuti oleh dia atribut, yaitu METHOD untuk pengolahan form dan ACTION untuk menentukan direktori file.
    2. Tag <TEXTAREA>, digunakan untuk membuat kotak isian teks dan diikuti oleh atribut NAME untuk membuat nama objek pada teks area, ROWS untuk menetukan spasi jumlah baris teks area, dan COLS untuk menentukan spasi aturan kolom.
    3. Tag <INPUT>, digunakan untuk meminta masukan dari pengguna, dengan beberapa jenis atribut, seperi NAME untuk masukan objek input, SIZE untuk ukuran kotak input, MAXLENGTH untuk menetukan jumlah teks maksimum, VALUE menentukan nilai tetap sebuah objek input, CHECKED untuk menentukan pilihan pada checkbox atau radio button, dan TYPE untuk menentukan tipe input.
             Contoh dari kode FORM :
    contoh kode form HTML

    hasil dari code form HTML

    NOTE :
    1. Penggunaan Tag HTML tidak case sensitive, artinya tidak membedakan huruf kapital dan huruf kecil. Jadi, tag <HEAD> sama artinya dengan tag <head>.
    2. Jangan lupa untuk memberi tanda garis miring ( / ) pada setiap tag akhir HTML. Jika tidak, dokumen HTML tidak akan ditampilkan dengan baik.
    3. Jika anda berlatih kode HTML melalui program notepad, jangan lupa untuk selalu menuliskan exstensi .html atau .htm (contoh : blog.html). Jika tidak, file yang disimpan akan tidak dapat dibuka pada web browser
     Sekian dulu penjelasan saya tentang Mengenal dan Belajar Menulis Kode HTML, semoga apa yang saya jelaskan dari awal sampai akhir tentang kode-kode HTML ini bisa bermanfaat bagi para sobat saya sekalian. terakhir saya ucapkan Terima Kasih.
    Mengenal dan Belajar Menulis Kode HTML
    4/ 5
    Oleh

    Berlangganan via email

    Suka dengan postingan di atas? Silakan berlangganan postingan terbaru langsung via email.

    35 komentar

    Tulis komentar
    avatar
    30 September 2013 08.01

    wah lengkap sekali pembahasannya gan, ini sangat membantu saya untuk belajar hal tersebut, terimakasih

    Reply
    avatar
    30 September 2013 08.05

    hehe..sama2 sob.. :)
    terima kasih udh berkunjung ke blog saya

    Reply
    avatar
    2 Oktober 2013 02.46

    @Anonim : for the problem, you can visit this link : http://trikmudahseo.blogspot(dot)com/p/template-blog-seo-friendly.html, for download theme or template. thanks

    Reply
    avatar
    17 Oktober 2013 15.34

    Wah, singkat dan jelas gan...
    Ringkasan materi html dalam sebuah artikel..
    Lanjutkan gan, kepembahasan yang lebih spesifik, biar bisa menerangi yang laen termasuk newbie kyk saya ini.. ehehehe

    Reply
    avatar
    18 Oktober 2013 05.13

    Siap gan..^_^
    thanks udh berkunjung di blog sy gan..

    Reply
    avatar
    12 November 2013 09.53

    sangat bermanfaat gan, thank's gan ^_^

    Reply
    avatar
    Nur
    11 Desember 2013 07.30

    Terima kasih Gan, sangat membantu...

    Reply
    avatar
    27 Desember 2013 06.39

    Bagus gan sangat membantu..
    Mampir juga Mbedudul.blogspot.com

    Reply
    avatar
    10 Januari 2014 21.23

    masih binggung gan gimana caranya buat website

    Reply
    avatar
    12 Maret 2014 02.44

    owh gt caranya toh.. ngerti gan.. thanks udah share
    Alat Bantu Sex

    Reply
    avatar
    21 Maret 2014 00.42

    mantap gan...! tapi masih kurang jelas bagi nuwbie / pemula kayak ane..
    kalau bisa di jelasin lagi gimana nerapin ke blog atau web kita...moga agan dapet pahala berlimpah amiiin..trims siqonita.com

    Reply
    avatar
    25 Maret 2014 06.41

    tiap kali menyimpan notepad kenapa format penyimpanannya buka firefox doc ya?
    malah tersimpannya txt dockumet?
    mohon pencerahannya..
    terima kasih

    Reply
    avatar
    1 April 2014 19.09

    maksih bnyk gan .......... ini sngat brmnfaat buat q

    Reply
    avatar
    1 April 2014 19.09

    maksih bnyk gan .......... ini sngat brmnfaat buat q

    Reply
    avatar
    1 April 2014 19.10

    mkch bnyk kank........

    Reply
    avatar
    2 April 2014 23.20

    Makasih bnyak mas :D
    Sangat membantu :)

    http://syamsul-ardethupost.blogspot.com/

    Reply
    avatar
    15 April 2014 15.06

    mantap om, infonya sangat membantu,,,

    Reply
    avatar
    26 April 2014 18.42

    Trima kasih bisa untuk panduan belajar otodidak.

    Reply
    avatar
    1 Mei 2014 23.12

    artikelnya bagus, cek juga bro aplikasi akunting buatan anak Indonesia kiper.co.id

    Reply
    avatar
    5 Mei 2014 02.31

    saya masih agak bingung gan, tapi akan saya coba
    trims ya gan, kalo sempat mampir gan di mitrapaving.com

    Reply
    avatar
    1 Juli 2014 00.42

    Sekali lagi makasih banyak mas ...

    Bener2 pembelajaran dasar yang mudah dan simple buat pemula kaya saya ini ....

    Reply
    avatar
    2 Juli 2014 02.30

    Gan Ajarin Buat Script PHP Social Point Dong Di Jamin Klau Di Jual bisa Sampai 200 k LebIH

    Reply
    avatar
    23 Agustus 2014 06.59

    Terimakasih informasinya dan ilmunya semoga bermanfaat untuk smua...

    Reply
    avatar
    28 Oktober 2015 07.55

    terima kasih gan! sangat bermanfaat blognya!

    Reply
    avatar
    23 Juni 2016 20.56

    terimakasih sudah membantu saya......

    asikstore.com
    asikstore.com

    Reply

    Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
    Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
    Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>