HTML adalah singkatan dari Hyper Text Markup Language.
HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarangan, dan dokumen yang dihasilkan disebut dengan web page.
Ada 2 cara membuat sebuah web page, yaitu dengan HTML editor (seperti HTML Validator) atau dengan editor teks biasa (misalnya notepad).
Penamaan Dokumen
Penammaan dokumen ini dapat dengan sembarang nama, kemudian ditambahkan ekstensi .htm atau .html
Elemen HTML
Elemen-elemen HTML ditandai dengan menggunakan tag.
Tag HTML ditandai dengan kurung kiri (<), nama tag, dan kurung kanan (>).
Tag umumnya berpasangan, sebagai contoh, bila terdapat tag <H1> maka harus diakhiri dengan tag </H1>.
Tag akhiran berisi nama tag yang sama dengan tag awal namun ditambahkan tanda garis miring (/).
Namun, ada juga beberapa tag yang tidak berpasangan, seperti <br>.
Elemen Dasar HTML
Elemen dasar yang dibutuhkan dalam membuat sebuah halaman HTML, yaitu:
<html> ... </html> , setiap dokumen html harus diawali dan diakhiri dengan tag ini
<head> ... </head> , bagian ini berisi informasi tentang dokumen html. Informasi minimal yang harus dimasukkan pada bagian ini yaitu judul halaman html, yang ditandai dengan tag <title> ... </title> ...
<body> ... </body> , bagian ini merupakan bagian terbesar dalam dokumen html. Elemen ini berisi dokumen apa saja yang akan ditampilkan pada browser
Contoh Dasar :
<!--contoh1.html-->
<html>
<head>
<title>Html Pertama</title>
</head>
<body>
Ini homepage pertama... <b>by Anissa Siti Rahma</b>
</body>
</html>
Contoh di atas kita tulis pada notepad dan disimpan dengan nama contoh1 dengan ekstensi .html, bila dijalankan pada web browser, maka akan tampil seperti di bawah ini:
Contoh di atas merupakan contoh dasar penulisan sebuah web page menggunakan html.
Biasanya, dalam menulis sebuah dokumen, terdapat perbedaan antara judul dan isi dari dokumen tersebut. Html menyediakan tag yang berfungsi untuk memberikan tampilan yang berbeda-beda untuk judul-judul pada penulisan dokumen, yang kita kenal dengan heading.
yaitu:<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>
untuk melihat perbedaan dari masing-masing heading, dapat kita tes dengan menuliskan source code di bawah ini :
Contoh Heading :
<!--contoh2.html-->
<html>
<head>
<title>Perbedaan Heading</title>
</head>
<body>
<H1>Heading ke-1</H1>
<H2>Heading ke-2</H2>
<H3>Heading ke-3</H3>
<H4>Heading ke-4</H4>
<H5>Heading ke-5</H5>
<H6>Heading ke-6</H6>
</body>
</html>
Contoh di atas kembali kita simpan dengan ekstensi .html dan hasil yang tampil ketika dijalankan pada web browser yaitu :
dengan adanya heading ini, kita tidak perlu repot-repot mengatur ukuran setiap judul. Hanya dengan menggunakan tag header, judul dokumen secara otomatis sesuai dengan penulisan judul yang kita inginkan.
Namun, bila kita menginginkan pengaturan tersendiri terhadap teks yang akan dituliskan (misalnya ingin mengatur warna dan font tulisan), kita dapat menggunakan tag <font> ... </font>
Untuk mengatur jenis tulisan, pada tag tersebut ditambahkan elemen face = "..." , untuk mengatur warna tulisan tambahkan elemen color = "..." , dan untuk mengatur ukuran tulisan tambahkan elemen size = "...".
Untuk lebih jelasnya, kita langsung masuk ke contoh,Contoh Font :
<!--contoh3.html-->
<html>
<head>
<title>Contoh Font</title>
</head>
<body>
Ini tulisan yang tidak diubah<br>
<font face="Consolas" color="red" Size="4">Ini adalah tulisan yang telah diubah</font>
</body>
</html>
Hasil tampilan pada web browser yaitu:
Terlihat perbedaan warna, jenis tulisan, dan ukuran tulisan pada contoh di atas.
Membuat TABEL pada HTML
Dengan HTML kita dapat juga membuat sebuah tabel. Kita dapat menggunakan tag <table>...</table> untuk membuat sebuah tabel.
Tag-tag yang digunakan dalam tag table yaitu
<tr>...</tr> , untuk membuat baris<td>...</td> , untuk membuat kolom
untuk lebih jelas, kita dapat langsung melihat contoh pembuatan tabel dengan HTML
Contoh Membuat Tabel :
<!--Contoh4.html-->
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
Ini adalah tabel<br>
<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>
Tampilan program di atas pada web browser yaitu:
border digunakan untuk membuat border pada tabel, value atau nilai yang diisikan pada border menunjukkan ketebalan dari border (pembatas) tabel tersebut. Semakin besar value border, maka border tabel akan semakin tebal.
Selain border, terdapat banyak fungsi lainnya dalam sebuah tabel, salah satunya yaitu untuk memberikan background atau warna pada tabel.
Hal tersebut dilakukan dengan menuliskan background (untuk memasukkan gambar pada background tabel) atau dengan bgcolor (untuk memberikan warna background pada tabel.
Contoh Warna Background Tabel :
<!--Contoh5.html-->
<html>
<head>
<title>Mengubah background tabel</title>
</head>
<body>
Ini adalah tabel dengan background gambar<br>
<table border="1" background="River Sumida.bmp">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
<br>Ini adalah tabel dengan background warna<br>
<table border="1" bgcolor="blue">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>
</body>
</html>
Tampilan program di atas pada web browser yaitu:
Memasukkan Gambar dalam dokumen HTML
Dalam membuat sebuah halaman web, bagaikan sayur tanpa garam bila kita tidak memasukkan gambar-gambar ke dalamnya. HTML menyediakan fasilitas agar kita dapat memasukkan sebuah gambar ke dalam dokumen html. Elemen yang digunakan yaitu <img src="nama_gambar.ekstensigambar" tanpat menggunakan tag akhir.
Langsung dapat kita lihat pada contoh program.Contoh Memasukkan Gambar
<!--Contoh6.html-->
<html>
<head>
<title>Memasukkan Gambar</title>
</head>
<body>
Ini adalah sebuah gambar :<br>
<img src="Zapotec.bmp">
<br><br>
Dan ini adalah gambar dengan ukuran tertentu :<br>
<img src="Zapotec.bmp width="50" length="50">
</body>
</html>
Tampilan program di atas pada web browser yaitu:
Pada contoh di atas, gambar pertama menampilkan gambar dengan ukuran asli dari gambar tersebut, namun pada gambar kedua, kita menentukan sendiri ukuran dari gambar tersebut dengan menambahkan width="..." (untuk mengukur panjang gambar dan length="..." (untuk mengukur tinggi gambar) di dalam tag <img src="...">
Mengatur posisi gambar
Untuk mengatur posisi sebuah gambar kita dapat menggunakan fungsi align="posisi".
Posisi di atas dapat diisi sebagai bottom (gambar di bawah teks), middle (gambar di antara teks), top (gambar di atas teks), left (gambar di ujung kiri), dan right (gambar di ujung kanan). Posisi di atas berurut-urut dapat di lihat dengan program di bawah ini:
Contoh Posisi Gambar
<!--Contoh7.html-->
<html>
<head>
<title>Menentukan Posisi Gambar</title>
</head>
<body>
<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="bottom">
di bagian bawah teks
</p>
<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="middle">
di bagian tengah teks
</p>
<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="top">
di bagian atas teks
</p>
<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="left">
di ujung kiri teks
</p><br>
<p>
Sebuah gambar
<img src="Zapotec.bmp" width="50" align="right">
di ujung kanan teks
</p>
</body>
</html>
Hasil penentuan posisi gambar tersebut dapat dilihat pada web browser seperti berikut:
Membuat Link
Untuk membuat sebuah link, kita dapat menggunakan tag <a href="link destination"> dan diakhiri dengan tag </a>. Tag awal dan tag akhir ini diletakkan di bagian awal dan bagian akhir dari teks yang akan digunakan sebagai link. Selain teks, dapat juga digunakan gambar sebagai sebuah link.
Link digunakan untuk melompat ke halaman web lainnya atau dapat juga melompat ke sebuah dokumen atau file tertentu yang kita inginkan.
Contoh LINK
<!--Contoh8.html-->
<html>
<head>
<title>Membuat LINK</title>
</head>
<body>
Teks ini adalah sebuah link... =>
<a href="contoh3.html">masuk ke contoh 3</a>
<br><br>
Gambar ini juga adalah sebuah link... =>
<a href="Contoh4.html><img
src="Zapotec.bmp"></a>
</body>
</html>
Pada web browser akan terlihat seperti berikut :
Jika teks "masuk ke contoh 3" di klik, maka akan masuk ke halaman web Contoh3.html
Dan jika gambar tersebut di klik, maka akan masuk ke halaman web Contoh4.html
Dan jika gambar tersebut di klik, maka akan masuk ke halaman web Contoh4.html
Menggerakkan teks atau gambar
Untuk menggerakkan sebuah teks atau gambar dapat digunakan <marquee>...</marquee>.
Titik-titik (...) di antara kedua tag diisi dengan teks atau gambar yang akan digerakkan.
Contoh Menggerakkan teks atau gambar
<!--Contoh9.html-->
<html>
<head>
<title>Menggerakkan Teks atau Gambar</title>
</head>
<body>
<marquee>Teks ini bergerak</marquee>
<br><br>
<marquee><img src="Zapotec.bmp"></marquee>
</body>
</html>
Contoh di atas akan menghasilkan teks dan gambar yang akan
bergerak seperti teks bergerak di bawah ini :
0 komentar:
Posting Komentar