pengenalan html - 1 pengenalan html - 1 a. pendahuluan html (hyper text markup language) sebagai...
TRANSCRIPT
1
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>
3
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:
5
Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam dokumen
HTML seperti color, size, style dan lainya.
Contoh:
6
7
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:
9
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
11
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)
Contoh:
<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>
13
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>
15
pada tampilan akan muncul sebagai berikut:
www.google.com
b) Hubungan web dengan email
Pada Tampilan akan muncul sebagai berikut
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
Atau yang tampak di browser adalah
<a href="mailto:[email protected]">[email protected]</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>
17
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
19
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>
21
menggunakan bidang geometry seperti rectangle, polygon dan lainya.
Coordinat dari object relatif terhadap pojok kirai atas image.
4. Image Background
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.
23
- 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---