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 <HEAD></HEAD> 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
2 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:
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.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Keterangan :
- Dokumen HTML selalu diawali dengan tag pembuka <html> dan diakhiri dengan tag penutup </html>
- Pada elemen head <head></head>, anda dapat memasukan kode-kode untuk menuliskan keterangan tentang dokumen HTML.
- Elemen body <body></body> berisi tag-tag untuk isi atau layout tampilan situs anda.
Command / perintah HTML disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen HTML.
<META name ="Pengarang" Contents="Batik Indonesia">
<Begin TAG > ……… </End TAG>
Contoh: Setiap dokumen HTML di awali dan di akhiri dengan tag HTML.
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html>, keduanya akan menghasilkan output yang sama.
Bentuk dari tag HTML sebagai berikut :
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: <!--komentar program di sini-->
Untuk memulai bekerja dengan HTML anda bisa gunakan editor Notepad++ atau editor lainya. Caranya:
1. Ketikkan tag-tag berikut di notepad++
<HTML>
…………
</HTML>
<ELEMENT ATTRIBUTE =” VALUE”>
<BODY bgcolor =” lavender”>
4 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 <BR> di gunakan untuk memulai baris baru pada dokumen HTML.
Contoh:
Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size, style dan lainya.
Contoh:
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
8
Logical Formatting
D. Elemen-Elemen Dasar HTML
Block Level Element
Block level element yang sering digunakan ialah Heading (H1 sampai H6) Contoh:
Paragraf (P) Contoh:
Alignment
Align atribut digunakan untuk menentukan perataan object dalam dokumen HTML baik berupa text, object, image, paragraph, division dan lain-lain.
<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 wangi percuma namanya</p>
</body>
</html>
10
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
Ada dua macam list yang umum dapat anda tambahkan ke dokumen HTML:
1. Unordered List (Bullet) : Contoh :
Tag Attribute Value Description
2. Ordered List (Numbering)
<html>
<head>
<title>Unordered List </title>
</head>
<body>
<p>Shedule for HTML Course</p>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
</body>
</html>
12
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>
<ol start="1" type="I">
<li>Sunday</li>
<ol type="a">
<li>Introduction to HTML</li>
<li>Creating List</li>
</ol>
<li>Monday</li>
<ol type="A">
<li>Creating table</li>
<li>Inserting Image</li>
</ol>
<li>Tuesday</li>
<ol type="I">
<li>Creating Link</li>
<li>Preparing Website</li>
</ol>
<li>Wednesday</li>
</ol>
</body>
</html>
Tag Attribute Value Description
14 E. Link HTML
Anchor
Anchor tag <A> 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
Pada tampilan adalah sebagai berikut : Contoh_link
<a href="latihan1.html">Contoh_Link</a>
<a href="http://www.google.com ">www.google.com </a>
<a href="../LATIHAN/latihan1.html">Contoh_Link</a>
pada tampilan akan muncul sebagai berikut:
www.google.com b) Hubungan web dengan email
Pada Tampilan akan muncul sebagai berikut d5yanti@yahoo.com
Jika aplikasi itu di klik maka akan mengarah ke email editor yang ada.
c) Hubungan web dengan file
Tampilan di browser adalah sebagai berikut : File
Jika diklik akan muncul
d) Hubungan web dengan gambar
<a href="mailto:d5yanti@yahoo.com">d5yanti@yahoo.com</a>
<a href=" dki_kirim.zip ">File</a>
<a href="index.1.jpg">Gambar</a>
href="file:///ra_slave.log">File</a>
16 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
<a href="latihan1.html">
<img border="0" src="/index_r1_c1.png"
width="166" height="108"></a>
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
18 h) Link Ke bagian tertentu Dokumen Lain
Untuk membuat link ke bagian tertentu dokumen lain anda bisa gunakan
anchor name di dokumen yang menjadi tujuan hyperlink.
<a href=”http://www.google.com” target=”_blank”> www.google.com
</a>
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
20 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
<html>
<head> <title> Working with Image </title> </head>
<body>
<body>
<p><img src="Dog.gif" height="100" width="100">
Default alignment at the bottom</p>
<p><img src="Dog.gif" height="100" width="100"
align="top">Aligned at Top</p>
<p><img src="Dog.gif" height="100" width="100"
align="middle">Aligned at Middle</p>
</body>
</html>
menggunakan bidang geometry seperti rectangle, polygon dan lainya.
Coordinat dari object relatif terhadap pojok kirai atas image.
22 Untuk menyertakan suatu gambar sebgai latar belakang, anda bisa menggunakan atribut „background‟ pada tag <img>.
Contoh :
<body background = “NamaFile Gambar”>
Contoh kode HTML yang menggunakan gambar latar belakang :
<html>
<head>
<title> Latar Belakang Gambar </title>
</head>
<body background=”images/back.gif”>
</body>
</html>
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 <img>. Sebagai contoh :
<html>
<head>
<title>Pemakaian ALT</title>
</head>
<body background=”images/back.gif”>
<img src = “images/logo.jpg” alt = “(gambar logo)” align = “middle”>
</body>
</html>
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 <img> yang bernama HEIGHT dan WIDTH.
- 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 :
<html>
<head>
<title>mengatur ukuran gambar</title>
</head>
<body>
<img src = “/images/logo.jpg”>
<br>
<img src =”/images/logo.jpg” height =”200” width = “150”>
<br>
<img src =”/images/logo.jpg” height =”100” width =”50”>
</body>
</html>
---0o0---