Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

24 Maret 2013

Website design series : tutorial coding HTML



Welcome to Blogosphere

Coding : Memahami struktur tubuh website atau blog

Anda ingin menguasai rancang website (website design) atau blogger (admin blog) tetapi bingung darimana memulai. Memang banyak macam yang harus dipelajari, mulai dari elemen utama pembangun situs : HTML / CSS / Javascript, PHP, jQuery, MySQL, jQuery, AJAX, cPanel etc. Saran saya mulai dari yang paling mudah dan ringan, yaitu  memahami dasar-dasar HTML.

Coding website : Apa itu HTML?

HTML adalah language untuk menjelaskan halaman website. Tag HTML merupakan keyword (nama-nama tag) yang diawali dan diakhiri dengan angle brackets. Contoh  :  <strong> berfungsi sebagai tag pembuka untuk penebalan huruf (bold) dan </strong> sebagai tag penutup. Nama tag ada diantara tag pembuka dan tag penutup.
  • HTML singkatan dari Hyper Text Markup Language
  • HTML bukan programming language, tetapi lebih merupakan markup language
  • Markup language adalah seperangkat markup tags
  • Tujuan tag tersebut adalah untuk menjelaskan content (isi) webpage.

Tag HTML dan Elemen HTML - arsip website design

Tag HTML dan Elemen HTML sering dipakai untuk menjelaskan masalah sama. Padahal tidak demikian.

Tag HTML

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

Tag HTML markup biasa disebut sebagai tag HTML saja terbagi dalam 3 macam bentuk, Yaitu :
  • Tag HTML dengan tag pembuka dan tag penutup. Nama tag ada diantara keduanya, seperti:

    • <b> teks Anda </b>
    • <span> … </span>
    • <p> … </p>
    • <div> … </div> dan lainnya.

  • Tag HTML yang ditulis sendirian, misalnya :

    • <br /> berfungsi untuk ganti baris.
    • <hr /> berfungsi membuat garis horizontal (datar)

  • Tag HTML yang ditulis sendirian dan berpasangan. Misal tag javascript berikut :

    script tag sendirian

    bisa ditulis satu tag sendirian seperti DIATAS atau berpasangan seperti 2 contoh berikut:

    script tag berpasangan

Elemen HTML

Perlu ditegaskan bahwa "elemen HTML" ialah segala sesuatu yang ada diantara tag awal dan tag akhir, termasuk text, image, animasi dan lainnya.

Berikut ini contoh elemen HTML tipe (berjenis) teks :

<p>This is a paragraph.</p>

Latihan dasar coding HTML - arsip website design

Untuk memutuskan baris (ganti baris) pada suatu paragraf maka gunakan elemen <br />

Latihan 1

<!DOCTYPE html> <html> <body> <p> To break <br />lines <br />in a<br />paragraph,<br />use the br element. </p> </body> </html>

Hasilnya akan ditampilkan di halaman website seperti berikut :

To break
lines
in a
paragraph,
use the br element.


Latihan 2

<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Hasilnya di webpage seperti dibawah ini :

Hasil tampilan Code HTML h1 dan p

Untuk fungsi-fungsi lain, silahkan buka http://www.w3schools.com/ dan klik link LEARN HTML. Pada situs tersebut Anda akan mendapatkan tutorial HTML lengkap dengan lebih dari 100 contoh tag kode html yang bisa Anda edit dan test oleh Anda sendiri seperti pola diatas.

front banner w3schools in blog website design

halaman utama w3schools HTML introduction


KESALAHAN UMUM
Tutorial diatas diambil dari http://www.w3schools.com/. Sebenarnya sumber tutorial dari situs tersebut sangat memadai namun boleh jadi tetap saja ada error. Kesalahan umum adalah :
  1. Anda menulis tag menggunakan elemen (induk) yang seharusnya juga membutuhkan “elemen anak” (child element) namun Anda tidak memasukkan child element tersebut sehingga karenanya elemen induk tersebut "belum selesai", atau “tidak lengkap.” Misalnya :

    • Elemen <head> seharusnya juga berisi child element <title>
    • Elemen list item (baik <ul> atau <ol>) membutuhkan child element <li>
    • Elemen <dl> seharusnya membutuhkan child element <dt> dan <dd>.

  2. Kita sering menuliskan tag dan menutupnya dengan susunan salah. Misalnya :

    <p><em>...</p>

    adalah penulisan yang tidak bisa diterima. Seharusnya ditutup sebelum </p>.

    Nesting Tag yang benar adalah :

    <p><em>...</em></p>

    Pada kasus lain, Anda letakkan unsur HTML dalam konteks yang tidak diizinkan (salah MENYARANGKAN elemen) :

    - seperti unsur STYLE Anda letakkan di bagian BODY bukannya di bagian HEAD
    - atau dua elemen yang tumpang tindih (yang tidak diperbolehkan).

  3. Kesalahan umum lain ialah penggunaan sintaks XHTML di dokumen HTML. Karena aturan HTML elemen implisit tertutup. Kesalahan membuat efek Cascading. Misalnya penggunaan tag XHTML yang "self-closing" untuk meta dan link di bagian "head" dokumen HTML dapat menyebabkan parser untuk menyimpulkan akhir bagian head dan awal dari bagian "body" (di mana meta dan link tidak diperbolehkan).

W3C Service untuk validasi HTML website

Setiap error penulisan code (coding) akan terekam di W3C validation service. Anda bisa memanfaatkan informasi Validasi Dokumen Online Anda untuk tindakan koreksi. Silahkan buka saja situs tersebut dan eksplore sendiri saja yaa … cara memanfaatkan informasi tersebut.


That's all we know - Happy blog blogger


THANK YOU for your continued liking 'n sharing. If you haven't liked this post yet, you may do that by hitting the buttons just BELOW. Please drop your comment and questions ……
Comments

2 komentar:

http://website-download.blogspot.com/2012/09/tips-html-kumpulan-tip-singkat.html?showComment=1364469835590#c6146657656995755472'> 28/03/13 18.23 Reply

Cuman mau koreksi saja bang. Dalam HTML5 seperti yang dicontohkan di atas, single tag seperti <br /> atau <img />, penulisan yang benar adalah <br> dan <img>.

Untuk <br /> atau <img /> sendiri, itu penggunaannya hanya untuk XHTML (4 atau 5).

Btw, w3schools bukan sumber referensi yang baik, karena banyak informasi yang diberikan salah :).

Salam.

http://website-download.blogspot.com/2012/09/tips-html-kumpulan-tip-singkat.html?showComment=1364472441950#c7507685609072041145'> 28/03/13 19.07 Reply

Terimakasih banyak atas koreksi dan masukannya, mas Leo. Akan menjadi perhatian sy.

Poskan Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading