Selasa, 01 April 2014

Dasar HTML

Tak usah cemas jika contoh menggunakan label yang belum kau pelajari

Kau akan mempelajarinya di chapter berikutnya

HTML Heading

HTML Heading didefinisikan dengan label <h1> sampai <h6>

Contoh
<h1>Ini heading</h1>
<h2>Ini heading</h2>
<h3>Ini heading</h3>

Ini heading

Ini heading

Ini heading


HTML Paragraf

HTML Paragraf didefinisikan dengan label <p>

Contoh
<p>Ini paragraf</p>
<p>Ini paragraf lain</p>
Ini paragraf
Ini paragraf lain

HTML Heading

HTML link didefinisikan dengan label <a>

Contoh
<a href="http://rahfan-learnforfreedom.blogspot.com">Ini adalah Link</a>
Ini adalah Link
Catatan
Alamat Link itu ditetapkan secara spesifik pada atribut href
(Kau akan mempelajari tentang atribut di chapter-chapter berikutnya ditutorial ini)

HTML Gambar

HTML Gambar didefinisikan dengan label <img>

Contoh
<img src="http://lh6.googleusercontent.com/-Aq4lXol7iDY/AAAAAAAAAAI/AAAAAAAAD40/ZBQWCGTm32k/s512-c/photo.jpg"  alt="Rahfan" width="104" height="142">
Rahfan
Catatan
Nama file dan ukuran gambar disajikan melalui atribut

Chapter SebelumnyaTutorial HTMLChapter Selanjutnya

Minggu, 30 Maret 2014

HTML Editor

Menulis HTML menggunakan Notepad atau TextEdit

HTML dapat diedit menggunakan editor profesional HTML seperti :
Bagaimanapun, untuk belajar HTML saya merekomendasikan menggunakan teks editor seperti Notepad (PC) atau TextEdit (Mac). Saya percaya dengan menggunakan teks editor biasa ialah jalan bagus belajar HTML.

Ikuti 4 cara dibawah ini untuk membuat halaman web pertamamu dengan menggunakan Notepad

Langkah 1 : Memulai Notepad

Untuk memulai notepad ikuti langkah dibawah ini :

Start
  All Programs
    Accessories
      Notepad

Langkah 2 : Edit HTML-mu dengan notepad

Ketik kode HTML-mu di Notepad-mu:

Notepad

Langkah 3 : Simpan HTML-mu

Pilih Save as.. di file menu Notepad

Ketika kau menyimpan file HTML, kau dapat menggunakan .htm atau .html sebagai file ekstensinya. tidak ada perbedaannya, itu terserah kamu

simpan file tersebut didalam folder yang mudah kau ingat, seperti rahfan

Langkah 4 : Jalankah HTML di Browser

Buka web browsermu dan buka file HTML dari File, Open, atau cukup telusuri filemu dan klik dua kali file HTML

hasilnya akan seperti ini

Perkenalan HTML

Contoh HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Penjelasan Contoh

  • DOCTYPE mendeklarasikan tipe dokumennya
  • Teks diantara <html> dan </html> menjelaskan halaman web
  • Teks diantara <body> dan </body> adalah konten yang terlihat dihalaman web
  • Teks diantara <h1> dan </h1> terlihat sebagai judul/kepala
  • Teks diantara <p> dan </p> terlihat sebagai paragraf

Apa itu HTML?

HTML ialah bahasa yang digunakan untuk mendeskribsikan halaman web
  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML ialah bahasa penandaan
  • Bahasa penandaan tercipta dalam seperangkat label penandaan
  • label mendeksribsikan isi dokumen
  • Dokumen HTML mengandung label HTML dan teks biasa
  • Dokumen HTML baiasa dipanggil halaman web

Label HTML

Label penandaan HTML biasa disebut Label HTML
  • Label HTML adalah sebuah kata kunci (nama label) yang dikelilingi oleh kurung sudut seperti <html>
  • Label HTML biasanya berpasangan seperti <b> dan </b>
  • Label pertama ialah sebagai label pembuka, label kedua ialah sebagai label penutup
  • Label penutup ditulis seperti label pembuka, tapi dengan garis miring sebelum nama label
  • Pembuka dan penutup label biasa juga disebut label mulai dan label akhir

<namalabel> isi </namalabel>

Element HTML

"Label HTML" dan "Element HTML" sama-sama digunakan untuk mendeksribsikan sesuatu

Tapi berbicara dengan tegas, Element HTML adalah segala sesuatu dari mulai label pembuka sampai label penutup disertai dengan labelnya

HTML Element:

<p>Ini adalah sebuah paragraf</p>

Web Browser

Maksud dari sebuah web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) ialah untuk membaca dokumen HTML dan memperlihatkan sebagai halaman web.

Browser tidak akan memperlihatkan label HTML, tapi dengan menggunakan label menentukan bagaimana isi dari halaman HTML tersebut diperlihatkan ke pengguna

Browser

Sturktur Halaman HTML

Dibawah ini adalah tamilan dari stuktur halaman HTML:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Versi HTML

Sejak dari awal terciptanya web, sekarang telah banyak versi dari html :


VersiTahun
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52012

Deklarasi <!DOCTYPE>

Pendeklarasian <!DOCTYPE> membantu browser melihat halaman web sempurna

Sangat banyak perbedaan dokumen diinternet, dan sebuah browser hanya dapat memperlihatkan halaman HTML 100% sebenarnya jika diketahui tipe HTML dan Versi berapa yang digunakan

Deklerasi Umum

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Chapter Sebelumnya Tutorial HTML Chapter Selanjutnya

HTML4 dan HTML5 Tutorial

Dengan HTML kau dapat membuat Websitemu sendiri.
Tutorial ini akan mengajarkanmu semua tentang HTML.
HTML gampang untuk dipelajari - Kau akan menikmatinya.

Daftar Isi
  1. HTML4 dan HTML5 Tutorial
  2. Perkenalan HTML
  3. HTML Editor
  4. Dasar HTML