2) HEAD

PENGENALAN HTML - 1

A.

Pendahuluan

HTML (Hyper Text Markup Language) sebagai bahasa pemrograman dasar dan wajib dikuasai oleh seorang webmaster. HTML terdiri dari tag-tag yang fungsinya untuk membuat dokumen menjadi dapat dibaca oleh browser. HTML merupakan skrip dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri adalah suatu dokumen teks biasa yang mudah untuk dimengerti dibanding bahasa pemrograman yang lainnya dan karena bentuknya itu maka HTML dapat dibaca oleh platform yang berlainan seperti windows, UNIX dan lain-lain. Walaupun berbentuk dokumen teks biasa, HTML memiliki perbedaan dengan dokumen lain seperti dokumen word, misalnya. Perbedaan yang paling mencolok adalah pada dokumen word, banyaknya karakter akan terbatasi oleh besarnya kertas sehingga jika teks yang ada didalamnya banyak, ia akan terdiri dari banyak halaman pula. Sedangkan HTML tak memiliki batasan teks sehingga tak ada pemisahan halaman 1,2 dan seterusnya.

C.

Tag-Tag Dasar HTML

Dokumen HTML bisa di bagi mejadi tiga bagian utama: 1) HTML Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML

Tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah dokumen HTML. 2) HEAD Bagian header dari dokumen HTML di apit oleh tag di dalam bagian ini biasanya 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 “title” sebagai

1

bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai dokumen HTML, anda bisa menentukan author name, keywords, dan lainya pada tag META. Contoh: <META name ="Pengarang" Contents="Batik Indonesia">

3) BODY Dokumen body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.Untuk lebih lanjutnya perhatikan skema elemen di bawah ini.



Keterangan : -

Dokumen HTML selalu diawali dengan tag pembuka dan diakhiri dengan tag penutup

-

Pada elemen head , anda dapat memasukan kode-kode untuk menuliskan keterangan tentang dokumen HTML.

-

Elemen body berisi tag-tag untuk isi atau layout tampilan situs anda.

Command / perintah HTML disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen HTML.

…………………………………

2

Contoh: Setiap dokumen HTML di awali dan di akhiri dengan tag HTML. ………… Tag tidak case sensitive, jadi anda bisa gunakan atau , keduanya akan menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut :

<ELEMENT ATTRIBUTE =” VALUE”> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut. Contoh:



BODY merupakan element, BGCOLOR(BackgroundColor) merupakan atribut yang memiliki nilai lavender. Menuliskan suatu komentar pada dokumen HTML seperti nama pengarang keterangan elemen dan tag dan lain-lain. Keterangan ini akan diabaikan oleh browser. Contoh:

Untuk memulai bekerja dengan HTML anda bisa gunakan editor Notepad++ atau editor lainya. Caranya: 1. Ketikkan tag-tag berikut di notepad++

3

2. Simpan

dengan

nama

file

latihan1.html

dalam

drive

C:/XAMPP/HTDOCS/(FOLDER_ANDA) 3. Buka dengan browser dan ketikkan http://localhost/(folder_anda)/ maka outputnya akan sebagai berikut :

C.

Format Teks HTML  Break

Tag
di gunakan untuk memulai baris baru pada dokumen HTML. Contoh:

4

 Font Dengan tag anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size, style dan lainya. Contoh:

5

6

 Color Color merupakan atribut yang bisa ditambahkan pada beberapa elemen seperti body, font, link dan lainya. Color dibagi dalam tiga kategori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB

 Physical Formatting

7

 Logical Formatting

D.

Elemen-Elemen Dasar HTML  Block Level Element

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

8

 Paragraf (P) Contoh:

Puisi Ceria

Mawar berwarna merah, bibir kamu juga merah , bibir kamu semerah mawar

puisi sedih

melati harum baunya, kalau nggak wangi percuma namanya

 Alignment Align atribut digunakan untuk menentukan perataan object dalam dokumen HTML baik berupa text, object, image, paragraph, division dan lain-lain.

9

 List Item(LI) List item digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Contoh: Kita mau mengelompokkan data-data berikut : Pisang Melati Jambu Mawar Anggrek Apel Anggur Dapat kita kelompokkan ke dalam dua kelompok: Buah-buahan : o Pisang o Jambu o Apel o Anggur Bunga : 1. Melati 2. Mawar 3. Angrek

10

Ada dua macam list yang umum dapat anda tambahkan ke dokumen HTML: 1. Unordered List (Bullet) : Contoh :

Shedule for HTML Course

• Sunday
• Monday
• Tuesday
• Wednesday

Tag Attribute Value Description

2. Ordered List (Numbering) Contoh:

11

Shedule for HTML Course

1. Sunday
1. Introduction to HTML
2. Creating List
2. Monday
1. Creating table
2. Inserting Image
3. Tuesday
1. Creating Link
2. Preparing Website
4. Wednesday

12

Tag Attribute Value Description

13

E.

Link HTML  Anchor

Anchor tag untuk menentukan hyperlink dalam dokumen HTML. HREF properti digunakan untuk menentukan tujuan dari hyperlink tersebut.

Ada beberapa macam hubungan antara satu form dengan obyek yang lain, hubungan-hubungan itu meliputi : a. Hubungan web dengan halaman lain / situs lain b. Hubungan web dengan email c. Hubungan web dengan file d. Hubungan web dengan gambar e. Hubungan Gambar dengan web atau email atau link yang lain f. Link ke Dokumen Lain g. Link ke Section tertentu dalam Dokumen h. Link Ke bagian tertentu Dokumen Lain

Contoh-contoh a) Hubungan web dengan halaman atau situs lain Contoh_Link Pada tampilan adalah sebagai berikut : Contoh_link www.google.com Contoh_Link

14

pada tampilan akan muncul sebagai berikut: www.google.com b) Hubungan web dengan email [email protected]

Pada Tampilan akan muncul sebagai berikut [email protected] Jika aplikasi itu di klik maka akan mengarah ke email editor yang ada. c) Hubungan web dengan file File Tampilan di browser adalah sebagai berikut : File Jika diklik akan muncul

d) Hubungan web dengan gambar Gambar href="file:///ra_slave.log">File Atau yang tampak di browser adalah

15

Gambar Dan jika link ini di klik maka akan menuju ke halaman yang memuat gambar tersebut. e) Hubungan Gambar dengan web atau email atau link yang lain Sama halnya dengan hubungan link yang lain, perintah script dari link ini contohnya

f) Link ke Dokumen Lain Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm : Link1.htm

Link2.htm

16

g) Link ke Section tertentu dalam Dokumen Untuk membuat link ke section tertentu dalam satu dokumen digunakan property name untuk membuat nama tujuan dari link. Syntax name anchor:

untuk membuat link ke nama :

contoh: link3.htm

17

h) Link Ke bagian tertentu Dokumen Lain Untuk membuat link ke bagian tertentu dokumen lain anda bisa gunakan

18

anchor name di dokumen yang menjadi tujuan hyperlink. www.google.com

F.

Image HTML 1. Format Image Ada banyak format image, tetapi ada tiga jenis format yang paling sering digunakan : o GIF (Graphical Interchange Format) (.GIF) o JPEG (Joint Photographic Expert Image) (.JPG) o PNG (Portable Network Graphics)

2. Insert Image ke Dokumen Tag IMG di gunakan untuk meng-insertkan image ke dokumen HTML. Syntax-nya:

Attribute Value Description

19

Default alignment at the bottom

Aligned at Top

Aligned at Middle

3. Image Map Anda bisa menggunakan image yang ada pada website anda untuk membuat image map. Image map yaitu suatu area pada image yang bisa kita beri hyperlink area ini biasanya disebut “hot spots”. Coordinat dari hotspot ditentukan

20

menggunakan bidang geometry seperti rectangle, polygon dan lainya.

Coordinat dari object relatif terhadap pojok kirai atas image.

4. Image Background

21

Untuk menyertakan suatu gambar sebgai latar belakang, anda bisa menggunakan atribut „background‟ pada tag . Contoh : Contoh kode HTML yang menggunakan gambar latar belakang : 5. Image Text Adakalanya pemakai mematikan fitur untuk mematikan penampilan gambar, ada kemungkinan pula pemakai menggunakan browser yang tidak mendukung gambar. Untuk mengatasi keadaan seperti itu, anda bisa menyediakan teks alternative sebagai pengganti gambar. Bisa dilakukan dengan menggunakan atribut ALT pada tag . Sebagai contoh : Pada kode diatas : Alt = “(gambar logo)” Browser tidak menampilkan gambar, maka tulisan (gambar logo) akan ditampilkan sebagai pengganti gambar.

6. Image Size Anda bisa mengaturnya melalui atribut pada tag yang bernama HEIGHT dan WIDTH.

22

-

HEIGHT untuk mengatur tinggi gambar.

-

WIDTH untuk mengatur lebar gambar.

Dalam hal ini yang digunakan pada kedua atribut berupa nilai dansatuan pixel. Contoh dapat dilihat pada kode berikut :

---0o0---

23