Belajat HTML .......\m/

Belajar HTML

Mari belajar HTML.
Jika anda baru terjun di dunia maya alias pemula (newbie) dan tertarik ingin belajar HTML untuk membuat website sendiri maka anda tidak salah datang ke blog ini, karena disini anda akan mendapatkan tutorial, tips, triks dan artikel-artikel tentang bagaimana cara belajar HTML untuk membuat website.
Di Internet sebenarnya kita bisa saja mendapatkan banyak template baik yang gratis maupun yang berbayar, namun kadang tidak sesuai dengan keinginan (selera) kita. Maka kita harus meng-edit dan melakukan perubaha-perubahan. Di dalam mengedit dan melakukan perubahan inilah kita harus mengerti dan memahami bahasa HTML.
Di blog ini anda akan mendapatkan tutorial belajar HTML yang disertai dengan contoh-contoh mulai dari dasar, sehingga akan mudah dipahami dan sangat cocok bagi anda yang masih pemula. Dan bagi anda yang mengedit atau membuat suatu halaman web bisa melangkah ke halaman-halaman berikutnya sesuai dengan topik yang anda inginkan.
Untuk belajar anda dapat menggunakan program HTML seperti Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel yaitu Notepad, jika anda ingin teks editor yang lebih interaktif anda bisa menggunakan Notepad++.
Dalam belajar sebaiknya anda langsung praktek di program HTML anda, sehingga akan lebih mudah untuk dipahami, anda ketik atau copy/paste contoh-contoh HTML-nya di program HTML anda dan preview di browser untuk melihat hasilnya.
Saya sangat berterimakasih jika anda bersedia memberikan kritik, saran maupun komentar atas kekurangan, error, broken links dan lainnya, masukan dari anda sangat membantu untuk perbaikan tutorial maupun blog ini.
Akhir kata saya mengucapkan terimakasih banyak atas kunjungan anda dan selamat belajar.

Pengenalan HTML

Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti texs, grafik, animasi link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Exsplorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) texs di bawah ini:

Ini adalah dokumen HTML pertamaku

Preview
Simpan file tersebut ke C:\My Documents dengan nama "websiteku.htm." Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all files". Kemudian buka browser dari menu File, klik Open dan tujukan ke C:\My Documents\websiteku.htm "klik Ok" maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " ". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.
Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): , body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka " " dan tag penutup " " dan yang berada diantaranya merupakan isi dari elemen html. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: , , , , semuanya adalah sama.

Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:

Disini adalah konten yang tampil di browser

Preview
Tag pertama pada dokumen HTML diatas adalah: " " tag ini merupakan awal dari suatu dokumen HTML, dan tag " " merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag ….
Kemudian tag " …" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.
Tag berikutnya adalah " " merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".

Tag "…" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa texs, grafik, link, animasi maupun audio-video (multimedia).

Format Font HTML

Tag HTML untuk font adalah …, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:

Untuk membuat jenis font (face):


Judul dengan font Verdana
Konten dengan font Times


Untuk membuat ukuran (size):


Judul dengan size 5
Konten dengan size 3


Untuk membuat warna font (color):


Judul dengan warna biru
Konten dengan warna merah


Contoh komplit untuk membuat jenis font (face),size dan color:


Judulnya Tentang Font
Ini adalah contoh tulisan dengan pengaturan font yang menggunakan

tag HTML elemen font dengan atribut face, size dan color...

Preview
Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut face, color dan size:
Atribut
face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"
Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag tidak dipergunakan lagi, sebagai gantinya dibuat tag

Hyperlink HTML

Hyperlink atau sering di singkat dengan link penjelasan serta contoh-contohnya dapat di lihat di Belajar HTML tentang Hyperlink HTML. Sedikit koreksi dari contoh link dengan gambar yang kita buat disana yaitu: Atribut border dan align merupakan deprecated [...]
Baca selengkapnya tentang: Hyperlink HTML

Posted on August 16th, 2011 in HTML Tutorial

Format text HTML

Untuk format teks tentang bagaimana membuat paragraf dan baris baru anda bisa membacanya di Belajar HTML tentang Format text HTML. Disana juga telah dibuat beberapa contoh tag untuk memanipulasi tampilan teks, namun sebagian dari tag-tag tersebut merupakan Deprecated Tags dimana saat ini sudah dihindari pemakaiannya karena dapat digantikan dengan atribut style atau CSS dengan lebih [...]
Baca selengkapnya tentang: Format text HTML

Posted on August 10th, 2011 in HTML Tutorial

Membuat Banner Slideshow dengan JavaScript

Banner Slideshow dengan menggunakan JavaScript berikut ini akan menampilakan banner serta link-nya masing-masing secara bergantian dengan waktu yang dapat kita tentukan sendiri. Setelah dicoba dan di test, script ini dapat tampil dengan baik di Intenet Explorer, Mozilla Firefox, Google Chrome, Opera dan Safari. Berikut adalah langkah-langkah untuk membuat Banner Slideshow dengan JavaScript. Yang pertama kita [...]
Baca selengkapnya tentang: Membuat Banner Slideshow dengan JavaScript

Posted on August 6th, 2011 in JavaScript triks

Format Font HTML

Tag termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS. Pada tulisan sebelumnya tentang Belajar HTML dengan topik Format [...]
Baca selengkapnya tentang: Format Font HTML

Posted on August 2nd, 2011 in HTML Tutorial

Tag Dasar HTML

Untuk melihat penjelasan dari Tag Dasar HTML ini anda bisa membacanya di tulisan Belajar HTML dengan sub judul Tag Dasar HTML Seperti dijelaskan bahwa tag dasar dari suatu dokumen HTML itu terdiri dari 3 elemen utama yaitu: html, head dan body. Yang dalam penulisannya diawali dengan tag pembuka "<…>" dan diakhiri dengan tag penutup "". [...]
Baca selengkapnya tentang: Tag Dasar HTML

Posted on July 28th, 2011 in HTML Tutorial

Tag-tag HTML tanpa tag penutup

Berikut adalah tag-tag HTML yang tidak memerlukan tag penutup. Tag HTML Keterangan membuat beberapa link dalam gambar atau map Membuat basis url dari dokumen
line break – membuat baris baru pengaturan kolom di dalam tabel (table) memasukkan objek ke dalam dokumen

---

membuat garis horizontal memasukkan gambar ke dalam [...] Baca selengkapnya tentang: Tag-tag HTML tanpa tag penutup

Posted on July 14th, 2011 in HTML Referensi

Pengenalan HTML

Sebelumnya sudah ada postingan yang berjudul Belajar HTML, disana sudah dijelaskan secara mendasar tentang HTML. Sekedar untuk mengingatkan kembali tentang apa itu HTML anda bisa membacanya di Pengenalan HTML. Didalam tutorial HTML ini kita akan membahas kembali tentang HTML tersebut termasuk elemen-elemen HTML yang belum kita bahas sebelumnya seperti frame, table, form dan sebagainya. Apa [...]
Baca selengkapnya tentang: Pengenalan HTML

Posted on June 24th, 2011 in HTML Tutorial

Deprecated Tags

Deprecated tag dan atribut adalah tag dan atribut peninggalan HTML versi lama, dimana dalam versi saat ini sudah ada alternatif pengganti untuk tag-tag dan atribut tersebut. Deprecated tag dan atribut tersebut jika digunakan tetap akan ditampilkan web browser sesuai fungsinya, namun jika ingin membuat halaman website yang memenuhi standar HTML4.0/XHTML (valid HTML4.0/XHTML) maka kita harus [...]
Baca selengkapnya tentang: Deprecated Tags

Posted on May 22nd, 2011 in HTML Referensi

Konversi HTML ke Entity

Kode HTML Kode ENTITY Pernah tidak ketika menuliskan kode-kode HTML yang mengandung karakter-karakter khusus seperti "<", ">" ke postingan atau komentar, kode-kode tersebut tidak tampil sebagaimana yang diharapkan? Ya… karena untuk menampilkan karakter-karakter khusus tersebut kita terlebih dahulu harus meng-konversi atau mengubahnya ke kode entity. Kode-kode entity dapat di lihat di Karakter khusus (special character), [...]
Baca selengkapnya tentang: Konversi HTML ke Entity

Posted on April 17th, 2011 in HTML CSS Tools

Jenis-jenis font family untuk CSS

Berikut adalah contoh penulisan font-family: selector {font-family: family-name, generic-family;} Contoh real untuk pengaturan font selector heading (h1) di dalam CSS: h1 {font-family: ”Trebuchet MS”, Helvetica, sans-serif;} family-name family-name adalah nama dari kumpulan beberapa font yang sejenis, seperti contoh Trebuchet MS Normal, Trebuchet MS Bold, Trebuchet MS Italic, Trebuchet MS Bold Italic, jadi family-name untuk font-font [...]
Baca selengkapnya tentang: Jenis-jenis font family untuk CSS