atau    

Belajar Pemrograman HTML Dasar 1

Pada 2012-11-19 11:16:50 WIB | Oleh | Dibaca 1046 kali | Komentar.

HTML.

Bahasa Pemrograman untuk membuat situs web adalah HTML(HyperText Markup Language), untuk menambahkan desain digunakan CSS(Cascading Style Sheet), sedangkan bahasa yang digunakan untuk membuat web lebih interaktif adalah JavaScript. Untuk Pemula, sebaiknya mempelajari dan memahami struktur bahasa HTML secara baik. Untuk itu, pada artikel ini, Saya akan membahas tentang Dasar-dasar Bahasa Pemrograman HTML.

  • Ketentuan Penulisan

Dalam Pemrograman Web dengan HTML, terdapat banyak tag-tag dan atribut yang merupakan bagian dari struktur HTML. Contoh Tag-tag HTML yang umum digunakan :

<a>
<button>
<div>
<form>
<h1>
<h2>
<p>
<script>

Selain itu, tag-tag yang sebaiknya dimiliki pada setiap halaman web adalah :

<body>
<head>

Dalam penulisan tag di HTML, harus diawali dan diakhiri dengan tag yang sama. seperti pada bahasa pemrograman Visual Basic, setiap ada 'SUB' harus diakhiri dengan 'END SUB', atau pada C++, setiap ada 'void (){' harus diakhiri dengan '}'.

Berikut ini contoh penulisan tag di HTML dengan tepat :

<html>

</html>

Sedangkan struktur dasar yang sebaiknya ada pada setiap berkas HTML memiliki struktur seperti berikut :

<html>
<head>
<title>Judul</title>
</head>
<body>

</body>
</html>

Yaitu terdapat tag <html> yang didalamnya terdapat tag <head> dan <body>.

Tag yang berada di dalam tag <head> adalah properti halaman/situs web tersebut, misalnya mengatur judul <title>, memasukkan kode JavaScript atau CSS <script>, mengatur elemen-elemen penting atau informasi Meta seperti :

  • Author, 
  • Description,
  • Keywords,
  • Copyright.

Penulisan meta menggunakan tag <meta>, namun tidak seperti tag umum lainnya, tag meta tidak diperlukan penutup seperti </meta>. Tag meta tidak perlu penutup, dan hanya perlu ditambahkan garis miring(slash) pada akhir kalimat sebelum tanda'>'. Contoh  penulisan meta sebagai berikut :

<meta content="Azhar Rafiq" name="author" />
<meta content="Situs Geek Indonesia" name="description" />
<meta content="situs geek, belajar ilmu komputer, geek indonesia" name="keywords" />

Dalam penulisan meta di atas, diperoleh informasi bahwa :

Penulis situs tersebut adalah 'Azhar Rafiq',

Deskripsi situs tersebut adalah 'Situs Geek Indonesia',

Dan Kata kunci situs tersebut adalah 'situs geek', 'belajar ilmu komputer', dan 'geek indonesia'.

Kata kunci(keywords) adalah kata-kata yang digunakan mesin pencari seperti Google atau Bing untuk mencocokan kata yang dicari dengan situs yang ditemukan.

Tidak hanya meta yang tidak memerlukan penutup tag, tag <input> juga sama, tidak memerlukan penutupan tag.

Berikutnya, yang ada di dalam tag <body> adalah isi/konten dari situs web itu sendiri.

Jika Anda tambahkan tag seperti <h1> atau <p>, maka tag tersebut akan dibaca sebagai judul dan isi paragraf yang akan ditampilkan di laman.

Berikut ini contoh penulisan lengkap tag HTML beserta tag lainnya yang rapi dan terstruktur dengan baik :

<html>
<head>

<title>Judul</title>
<meta content="Azhar Rafiq" name="author" />

<script type="text/css">
h1 {
color:blue;
}
</script>

</head>

<body>

<h1>Ini Judul Paragraf</h1>
<p>Ini paragraf.</p>

</body>
</html>

Pada tag tersebut, saya menambahkan tag <script> dengan tipe CSS untuk memberikan desain pada situs web. Pada kasus ini, saya memberikan warna biru(blue) pada tag <h1>, jadi, setiap ada tag <h1> di dalam <body>, maka isi <h1> tersebut akan berwarna biru.

Kesimpulannya, tag HTML mengandung tag HEAD dan BODY. Tag HEAD mengandung atribut dan skrip yang akan digunakan pada tag BODY, sedangkan tag BODY mengandung konten dan isi situs web yang akan tampil di halaman situs web Anda. Senyum

Di artikel berikutnya, Insya Allah saya akan bahas tentang manipulasi CSS dengan HTML, penggunaan JavaScript, dan kedapannya akan saya bahas tentang PHP.

Untuk saat ini, jika ada pertanyaan, silakan komentar dengan Disqus di bagian bawah \/.

Oke semoga bermanfaat! Berkedip



telah diubah pada 06:34:11,2013-03-19 Waktu Indonesia Barat(WIB)



Belajar Pemrograman HTML Dasar 1 oleh

Kode QR untuk artikel ini
Kode QR

Garis
Tentang Penulis
Foto Profil neartoyou[Donatur]

Azhar Rafiq [neartoyou]

+2963

Love to Learn.


Google + :
Twitter :

Garis

garis-kecil

garis-kecil

Garis
comments powered by Disqus
Penilaian Artikel
Skor :
0/5
dari 0 suara
untuk menilai.
untuk Jadikan Favorit.
garis-kecil
Ayo daftar jadi Anggota Geek!

Buat Artikel Anda sendiri dan tingkatkan poin Anda!.

garis-kecil
Berlangganan Artikel Garuda Saiber

Diantar oleh FeedBurner setiap pukul 7 pagi WIB

garis-kecil
Statistik Garuda Saiber

526 Anggota Geek
66 Artikel Dikirim | 56 Diterima
garis-kecil
Media



garis-kecil

garis-kecil
Artikel Terbaru


garis-kecil