Scribd
Unggah
25 tayangan8 halaman

Bagian 1 - Kenalan Dulu Dengan HTML

Dokumen tersebut memberikan penjelasan tentang pengenalan HTML (Hyper Text Markup Language) mulai dari pengertian, struktur dasar, elemen-elemen, tag, atribut, entitas, doctype, metadata, serta persiapan tools untuk membuat dokumen HTML seperti web browser dan text editor seperti Notepad++.

Diunggah oleh

wambes rikal
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
25 tayangan8 halaman

Bagian 1 - Kenalan Dulu Dengan HTML

Dokumen tersebut memberikan penjelasan tentang pengenalan HTML (Hyper Text Markup Language) mulai dari pengertian, struktur dasar, elemen-elemen, tag, atribut, entitas, doctype, metadata, serta persiapan tools untuk membuat dokumen HTML seperti web browser dan text editor seperti Notepad++.

Diunggah oleh

wambes rikal
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

BAGIAN PERTAMA 1

Kenalan Dulu Dengan HTML

1. Kenalan Dulu dengan HTML


1.1 Apa itu HTML ???

HTML kepanjangannya adalah Hyper Text Markup Language.


Suatu bahasa yang berisi penanda pada tiap elemennya.
Simbol markup (penanda) yang digunakan oleh HTML diawali tanda “<”,
dan diakhiri “>”, bisa ditulis “ < namaElemen > “, dan dnamakan tag.

Jadi “ HTML sama sekali bukan bahasa


pemrograman, tapi merupakan bahasa markup
(penandaan), terhadap sebuah dokumen teks”.

1.2 Penamaan dokumen


Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm”
atau ”.html”. Untuk lebih jelasnya lihat ilustrasi dibawah ini:

1.3 Struktur dasar


Dokumen HTML tersusun atas elemen-elemen yang dibungkus dengan suatu tag
(penanda) dan tiap elemen mempunyai atribut-atribut tertentu. Elemen dasar
penyusun suatu website yaitu :
a) Kepala (Head) : berisi tentang keterangan suatu dokumen HTML
b) Tubuh (Body) : berisi informasi atau konten yang akan ditampilkan oleh web
browser.

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 2
Kenalan Dulu Dengan HTML

Struktur dasar dokumen HTML

Contoh dokumen HTML

1.4 Elemen
Elemen adalah “core” atau inti dari HTML. Dokumen HTML disusun atas elemen-
elemen. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf,
list. Elemen dalam HTML ditandai atau dibungkus oleh tag.
1.5 Tag

6 Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan
sebuah tanda kurung sudut kanan (>, tanda lebih besar). Secara umum penulisan tag
sebagai berikut : < Elemen/Nama_tag >. Jenis tag ada 2 macam yaitu :

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 3
Kenalan Dulu Dengan HTML

 Tag berpasangan : cara penulisan < Elemen > ... teks ... < /Elemen >
 Tag sisipan / single : cara penulisan < Elemen / >

“ Jangan lupa menyertakan tanda “ / “ untuk setiap


kali menutup suatu tag. “

1.6 Atribut
Atribut merupakan keterangan tambahan suatu elemen tertentu. Atribut digunakan
untuk mengubah default pemformatan dokumen pada elemen tertentu. Detail lebih
lanjut mengenai atribut, pada modul-modul selanjutnya.
1.7 Entitas
HTML menggunakan entitas untuk merepresentasikan spesial karakter ASCII.
Berikut ini tabel beberapa spesial karakter ASCII yang sering digunakan:

1.8 Apa itu Doctype ???


Doctype adalah pendefinisian suatu dokumen HTML. Doctype harus dideklarasikan
paling awal. Tujuannya untuk memberitahukan web browser tentang versi dari HTML
yang digunakan. Berdasarkan rekomendasi dari W3C sampai saat modul ini dibuat,
6 berikut ini tipe-tipe pendeklarasian doctype:

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 4
Kenalan Dulu Dengan HTML

 HTML 4.01 Strict


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

Keterangan : Mengandung semua elemen dan atribut dari HTML, tetapi tidak
termasuk “presentational” , mereduksi elemen font dan tidak mengijinkan
penggunaan frame.
 HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Keterangan : Mengandung semua elemen dan atribut dari HTML, termasuk


“presentational” , mereduksi elemen font dan tidak mengijinkan penggunaan
frame.
 HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Keterangan : Mengandung semua elemen dan atribut dari HTML.


 XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Keterangan : Mengandung semua elemen dan atribut dari HTML, tetapi tidak
termasuk “presentational” , mereduksi elemen font dan tidak mengijinkan
penggunaan frame. Penulisan harus sesuai dengan standar XML.
 XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Keterangan : Mengandung semua elemen dan atribut dari HTML, termasuk


“presentational” , mereduksi elemen font dan tidak mengijinkan penggunaan
frame. Penulisan harus sesuai dengan standar XML.
 XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
6 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Keterangan : Mengandung semua elemen dan atribut dari HTML. Penulisan harus
sesuai dengan standar XML.

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 5
Kenalan Dulu Dengan HTML

 XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Keterangan : Sama seperti XHTML 1.0 Strict, tetapi mengijinkan untuk


menambah modul (contohnya menyediakan support bahasa asia untuk RUBY).

“ bisa saja suatu dokumen HTML tidak menyertakan


Doctype. Tetapi alangkah baiknya Doctype
disertakan. “

Untuk mempelajari tentang Doctype lebih lanjut dapat dibaca di :


http://www.w3schools.com/tags/tag_doctype.asp
Untuk mengetahui elemen HTML yang valid sesuai dengan Doctype yang
digunakan dapat dibaca di :
http://www.w3schools.com/tags/ref_html_dtd.asp

1.9 Metadata
Metadata adalah data mengenai suatu data, kalau pada dokumen HTML berarti suatu
data yang mendeskripsikan data pada suatu halaman website. Fungsi dari metadata ini
adalah sebagai keterangan tambahan dan juga akan memudahkan search engine
mencarinya. Metadata dalam suatu website terdiri dari :
 Keywords<meta name="keywords" content="Modul HTML, belajar HTML">
 Descriptions<meta name="description" content="Buku panduan belajar HTML">
 Author<meta name="author" content="M. Nurkholis Abdillah">
 Dan lain-lain

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 6
Kenalan Dulu Dengan HTML

2. Persiapan Tools
Tools atau software yang digunakan untuk membuat dokumen HTML tidak sukar dicari.
Malahan sudah ada di PC kita. Ada dua tools dasar yang digunakan, yaitu :
a) Web browser : digunakan untuk menjalankan script HTML yang dibuat
Beberapa web browser yang bisa digunakan antara lain Internet Explorer, Opera,
Chrome, Mozilla Firefox, Safari, dan lain-lain.
b) Text editor : digunakan untuk mengetik script HTML.
Ada berbagai macam text editor untuk membuat dokumen HTML antara lain
dreamweaver, frontpage, netbeans, visual studio, notepad, notepad ++ dan lain-lain.
2.1 Notepad++
2.1.1 Sekilas Notepad++

“Dalam modul ini


memakai NOTEPAD++”

Alasannya :
Ringan dan serbaguna
Support script atau code berbagai bahasa pemrograman
Ada fitur angka disebelah kiri, yang memudahkan programmer
menelusuri kesalahan script atau code yang dibuat,
Tentunya GRATIS !!!

2.1.2 Lisensi
This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or (at
your option) any later version.

This program is distributed in the hope that it will be useful, but


WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 675 Mass Ave, Cambridge, MA 02139, USA.

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 7
Kenalan Dulu Dengan HTML

2.1.3 Screenshoot

2.1.4 Cara mendapatkan


 Dapat didownload di http://notepad-plus-plus.org atau
 Download di http://filehipo.com

Author : M. Nurkholis Abdillah | [email protected]


BAGIAN PERTAMA 8
Kenalan Dulu Dengan HTML

3. Modul

Author : M. Nurkholis Abdillah | [email protected]

Anda mungkin juga menyukai