Embed Doc
Copy Link
Readcast
Collections

CommentGo Back

Download

1. HTML (Hypertext Markup Language)

1.1. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainyadi seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragamdi seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagiandari internet yang paling cepat berkembang dan paling populer.WWW bekerja merdasarkan pada tiga mekanisme berikut:1.

Protocol

standard aturan yang di gunakan untuk berkomunikasi pada komputernetworking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.2.

Address

WWW memiliki aturan penamaan alamat web yaitu URL (Uniform ResourceLocator) yang di gunakan sebagai standard alamat internet.3.

HTML

digunakan untuk membuat document yang bisa diakses melalui web.

1.2. HTML

Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkandocument web, yang bisa anda lakukan dengan HTML yaitu:1.

Mengontrol tampilan dari web page dan contentnya.2.

Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.3.

Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secaraonline.4.

Menambahkan object-object seperti : image, audio, video, dan juga javascript dalamdocument HTML.

1.3. Browser dan Editor

Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering digunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yanglainya.

Editor

Program yang di gunakan untuk membuat document HTML, ada banyak HTML editoryang bisa anda gunakan diantaranya: Microsoft Office FrontPage,

Dreamweaver

,Notepad.

1.4. Tag Dasar HTML

Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan daridocument HTML.Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.

Tag tidak case sensitive, jadi anda bisa gunakan

<HTML>

atau

<html>

keduanya menghasilkanoutput yang sama.Gambar 1.1 Tag

<html>

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 1

Gambar 1.2 Tag

<HTML>

1.5. Struktur Dokumen HTML

Document HTML bisa di bagi mejadi tiga bagian utama:1.

HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML

Tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalahdocument HTML.

HEAD

Bagian header dari document HTML diapit oleh tag

di dalam bagian inibiasanya dimuat tag

TITLE

yang menampilkan judul dari halaman pada titlenya browser.Selain itu Bookmark juga megunakan tag

TITLE

untuk memberi mark suatu web site.Browser menyimpan “titile” sebagai bookmark dan juga untuk keperluan pencarian(searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag METAyang biasanya di gunakan untuk menentukan informasi tertentu mengenai documentHTML, anda bias menentukan author name, keywords, dan lainnya pada tag META.Contoh:

Author dari document tersebut adalah “Bocah Gunung”. Atribut http-equiv dapatdigunakan untuk meletakkan nama HTTP. Server atribut untuk menciptakan HTTP header.Contoh:

yang akan menciptakan HTTP header :

Expires: Wed, 7 May 2003 20:30:40 GMT

Sehingga jika documents di cached, HTTP akan megetahui kapan untuk meng-updatedocument tersebut pada cache.3.

BODY

Document body di gunakan untuk menampilkan text, image link dan semua yang akan ditampilkan pada web page.

<html><head><title>Welcome to HTML</title></head><body bgcolor="yellow"><p>Document HTML yang Pertama</p></body></html>

Gambar 1.3 Dokumen HTML

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 2

1.6. Elemen Dasar HTML

Block Level Element

Block level element yang sering digunakan : Heading (H1 sampai H6)Contoh:

<html><head>title>Heading Elements</title></head><body><h1>Heading one</h1><h2>Heading two</h2><h3>Heading three</h3><h4>Heading four</h4><h5>Heading five</h5><h6>Heading six</h6></body></html>

Gambar 1.4 Heading2.

Paragraf (P)

Contoh:

<html><head><title>Formating Paragraf</title></head><body><h3>Puisi Ceria</h3><p> mawar berwarna merah, bibir kamu juga merah, bibir kamu semerah mawar</p><h2>puisi sedih</h2><p> Melati harum baunya, kalau nggak ganti percuma namanya.</p></body></html>

Gambar 1.5 Paragraf

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 3