DASAR HTML
5. Buka file yang sudah tersimpan tersebut
|
Tag
|
Description
|
DTD
|
|
<!--...-->
|
Mendefinisikan komentar HTML
|
STF
|
|
<!DOCTYPE>
|
Mendefinisikan tipe dokumen
|
STF
|
|
<a>
|
Mendefinisikan anchor link
|
STF
|
|
<abbr>
|
Mendefinisikan sebuah
singkatan
|
STF
|
|
<acronym>
|
Mendefinisikan akronim
|
STF
|
|
<address>
|
Mendefiniskan informasi kontak
untuk pemiliki / penulis dokumen
|
STF
|
|
<applet>
|
Ditinggalkan. Medefinisikan
applet
|
TF
|
|
<area />
|
Mendefinisikan arae di dalam
image-map
|
STF
|
|
Mendefinisikan tulisan tebal
|
STF
|
|
|
<base />
|
Mendefinisikan URL
utama/target untuk semua URL alternatif di dalam dokumen
|
STF
|
|
<basefont />
|
Ditinggalkan. Merincikan
dari warna, ukuran dan font default dari semua tulisan yang ada di dalam
dokumen.
|
TF
|
|
<bdo>
|
Menggantikan arah tulisan
|
STF
|
|
<big>
|
Mendefinisikan tulisan
besar
|
STF
|
|
<blockquote>
|
Mendefinisikan kutipan
yang panjang
|
STF
|
|
<body>
|
Mendefinisikan badan
dokumen
|
STF
|
|
<br />
|
Mendefinisikan satu baris
baru
|
STF
|
|
<button>
|
Mendefinisikan tombol yang
bisa di-klik
|
STF
|
|
<caption>
|
Mendefinisikan judul dari
tabel
|
STF
|
|
<center>
|
Ditinggalkan. Mendefinisikan
tulisan agar ditengah
|
TF
|
|
<cite>
|
Mendefinisikan kutipan
|
STF
|
|
<code>
|
Mendefinisikan kode
komputer
|
STF
|
|
<col />
|
Mendefinisikan nilai
atribut dari satu atau lebih kolom pada tabel
|
STF
|
|
<colgroup>
|
Merincikan sebuah grup atau
lebih dari kolom-kolom dalam tabel untuk di format
|
STF
|
|
<dd>
|
Mendefinisikan deskripsi
dari sebuah item di daftar definisi
|
STF
|
|
<del>
|
Defines text that has been
deleted from a document
|
STF
|
|
<dfn>
|
Mendefinisikan ketentuan
definisi
|
STF
|
|
<dir>
|
Ditinggalkan. Mendefinisikan daftar
direktori
|
TF
|
|
<div>
|
Mendefinisikan sebuah
bagian di dalam sebuah dokumen
|
STF
|
|
<dl>
|
Mendefinisikan daftar
definisi
|
STF
|
|
<dt>
|
Mendefinisikan ketentuan
(dari sebuah item) di dalam daftar definisi
|
STF
|
|
<em>
|
Mendefinisikan tulisan emphasized
|
STF
|
|
<fieldset>
|
Menggabungkan elemen-elemen
yang saling berhubungan di dalam form
|
STF
|
|
<font>
|
Ditinggalkan, mendefinisikan
font, warna, dan ukuran dari tulisan
|
TF
|
|
<form>
|
Defines an HTML form for user
input
|
STF
|
|
<frame />
|
Defines a window (a frame) in a
frameset
|
F
|
|
<frameset>
|
Defines a set of frames
|
F
|
|
<h1> to <h6>
|
Defines HTML headings
|
STF
|
|
<head>
|
Mendefinisikan informasi
mengenai sebuah dokumen
|
STF
|
|
<hr />
|
Mendefinisikan garis
horisontal
|
STF
|
|
<html>
|
Mendefinisikan inti dari
dokumen HTML
|
STF
|
|
<i>
|
Mendefinisikan tulisan
italic
|
STF
|
|
<iframe>
|
Mendefinisikan inline
frame
|
TF
|
|
<img />
|
Mendefinisikan gambar
|
STF
|
|
<input />
|
Mendefinisikan kontrol
input
|
STF
|
|
<ins>
|
Mendefinisikan tulisan
yang telah dimasukkan ke dalam dokumen
|
STF
|
|
<kbd>
|
Mendefinisikan input keyboard
|
STF
|
|
<label>
|
Mendefinisikan label dari
elemen <input>
|
STF
|
|
<legend>
|
Mendefinisikan Judul dari
sebuah elemen <fieldset>
|
STF
|
|
<li>
|
Mendefinisikan daftar item
|
STF
|
|
<link />
|
Mendefinisikan hubungan
antara dokumen dari sumber diluar dokumen
|
STF
|
|
<map>
|
Defines a client-side
image-map
|
STF
|
|
<menu>
|
Ditinggalkan. Mendifinisikan
daftar menu
|
TF
|
|
<meta />
|
Mendefinisikan metada
mengenai sebuah dokumen HTML
|
STF
|
|
<noframes>
|
Defines an alternate content
for users that do not support frames
|
TF
|
|
<noscript>
|
Defines an alternate content
for users that do not support client-side scripts
|
STF
|
|
<object>
|
Mendefinisikan obyek yang
tertanam / embedded
|
STF
|
|
<ol>
|
Mendefinisikan urutan
teratur
|
STF
|
|
<optgroup>
|
Mendefinisikan grup dari
pilihan/option dalam drop-down list yang saling berhubungan
|
STF
|
|
<option>
|
Mendefinisikan pilihan
dalam a drop-down list
|
STF
|
|
<p>
|
Mendefinisikan paragraf
|
STF
|
|
<param />
|
Mendefinisikan parameter
dari sebuah obyek
|
STF
|
|
<pre>
|
Mendefinisikan tulisan
yang belum di format
|
STF
|
|
<q>
|
Mendefinisikan kutipan
pendek
|
STF
|
|
<s>
|
Mendefinisikan tulisan strikethrough
|
TF
|
|
<samp>
|
Mendefinisikan contoh dari
output program komputer
|
STF
|
|
<script>
|
Mendefinisikan client-side
script
|
STF
|
|
<select>
|
Mendefinisikan drop-down
list
|
STF
|
|
<small>
|
Mendefinisikan tulisan
yang lebih kecil
|
STF
|
|
<span>
|
Mendefinisikan sebuah
bagian dari dokumen
|
STF
|
|
<strike>
|
Ditinggalkan. Mendefinisikan tulisan
strikethrough
|
TF
|
|
<strong>
|
Mendefinisikan tulisan strong
|
STF
|
|
<style>
|
Mendefinisikan informasi
style dari dokumen
|
STF
|
|
<sub>
|
Mendefinisikan
tulisan subscripted
|
STF
|
|
<sup>
|
Mendefinisikan
tulisan superscripted
|
STF
|
|
<table>
|
Mendefinisikan tabel
|
STF
|
|
<tbody>
|
Menggabungkan isi dari badan
tabel
|
STF
|
|
<td>
|
Mendefinisikan kolom dari
tabel
|
STF
|
|
<textarea>
|
Mendefinisikan kontrol
dari banyak baris input (text area)
|
STF
|
|
<tfoot>
|
Menggabungkan footer
menjadi satu grup pada tabel
|
STF
|
|
<th>
|
Mendefinisikan header dari
tabel
|
STF
|
|
<thead>
|
Mendefinisikan Grup header dari
tabel
|
STF
|
|
<title>
|
Mendefinisikan Judul dari
sebuah dokumen
|
STF
|
|
<tr>
|
Mendefinisikan baris dari
tabel
|
STF
|
|
<tt>
|
Mendefinisikan tulisan
teletype
|
STF
|
|
<u>
|
Ditinggalkan. Mendefinisikan tulisan
garis bawah / underline
|
TF
|
|
<ul>
|
Mendefinisikan urutan acak
|
STF
|
|
<var>
|
Mendefinisikan variabel
|
STF
|
|
<xmp>
|
Dintinggalkan. Mendefinisikan tulisan
yang belum diformat
|
Pengertian HTML :
· HTML
merupakan singkatan dari HyperText Markup Language.
· HTML
bukanlah sebuah bahasa pemrograman.
· HTML
digunakan untuk menyebarkan informasi secara global.
Oke,
kita mulai perkenalan dengan HTML ini dengan sebuah contoh sederhana berikut :
<html>
<body>
Isi dari websiteku
</body>
</htm
<body>
Isi dari websiteku
</body>
</htm
Kami
menyediakan HTML editor di codingku untuk memudahkan anda yang ingin mencoba
dan berlatih HTML :
Codingku HTML Editori
<html>
<body>
Isi dari websiteku
</body>
</html>
<body>
Isi dari websiteku
</body>
</html>
Lantas bagaimana bila
anda ingin mencoba HTML sendiri tanpa editor yang telah kami sediakan?
Berikut ini adalah
beberapa hal yang anda perlukan untuk mencoba HTML sendiri di komputer anda :
· Teks
Editor, mis : notepad.
· Browser,
mis : Internet Explorer, FireFox, Opera, Google Chrome, dsb.
Langkah-langkah
1. Buka notepad
(Windows)
2. Misalkan kita akan
membuat sebuah halaman HTML dengan kode sebagai berikut :
<html>
<head>
<title>Judul Websiteku</title>
</head>
<body>
Isi dari websiteku
</body>
</html>
<head>
<title>Judul Websiteku</title>
</head>
<body>
Isi dari websiteku
</body>
</html>
3. Copy dan paste
kode di atas ke notepad
4. Kemudian simpan
dan ganti *.txt dengan coba.html seperti gambar berikut :
5. Buka file yang sudah tersimpan tersebut
6. Selamat anda telah
membuat sebuah halaman web pertama anda :)
Cara Membuat Frame HTML
Cara
Membuat Frame HTML - Frame adalah
teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi
dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah
mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.
Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.
Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.
Untuk
membuat halaman web yang menggunakan frame kita perlu membuat beberapa file
html, yaitu:
- Sebuah pendefinisi file. File tersebut kita
butuhkan untuk menampilkan halaman web dengan bentuk frame
- Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian yang akan kita buat pada frame tersebut
Untuk
membuat frame seperti Frame
A2, sebuah halaman kita bagi menjadi dua bagian
terlebih dahulu secara horizontal seperti Frame
A1, kemudian dibagi lagi hingga seperti Frame A2. Demikian pula
untuk membuat Frame
B2 harus melalui bentuk Frame B1. Urutan ini akan
sangat memengaruhi bentuk frame yang akan kita bangun.
Tag untuk membuat frame diawali dengan menggunakan <FRAMESET> dan diakhiri dengan </FRAMESET>. Pada file pendefinisi frame kita tidak lagi memerlukan tag <BODY></BODY>, sehingga struktur dasar pendefinisi frame adalah sebagai berikut:
Tag untuk membuat frame diawali dengan menggunakan <FRAMESET> dan diakhiri dengan </FRAMESET>. Pada file pendefinisi frame kita tidak lagi memerlukan tag <BODY></BODY>, sehingga struktur dasar pendefinisi frame adalah sebagai berikut:
1
|
<html>
|
2
|
<head>
|
3
|
<title></title>
|
|
4
|
</head>
|
|
5
|
<frameset>
|
|
6
|
---
bagian frame ---
|
|
7
|
</frameset>
|
|
8
|
</html>
|
|
Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka kita gunakan tag <FRAMESET></FRAMESET>. Atribut-atribut yang dapat menyertai tag ini adalah:
- BORDER, untuk menentukan tebal garis pemisah
antar frame
- ROWS, untuk menentukan berapa baris bagian
yang akan dibentuk
- COLS, untuk menentukan berapa kolom yang akan
dibentuk
Jika
kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan
frame tersebut dengan tag <FRAME>. Atribut-atribut yang dapat menyertai
tag ini adalah:
- NAME, untuk memberi identitas/nama bagi frame
tersebut. Fungsinya adalah ketika frame tersebut dijadikan target untuk
menampilkan suatu halaman.
- SRC, menunjukkan file yang mengisi frame
tersebut.
- SCROLLING, untuk menunjukkan apakah kita akan
menggunakanscrolling bar di samping atau di bawah
halaman, opsi inputnya adalah "YES, NO atau AUTO".
Yang
perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa kita telah
mempunyai file yang akan digunakan untuk mengisi frame tersebut.
Cara Membuat Frame
HTML
Sekarang,
kita akan membuat halaman web yang memiliki frame dengan tiga bagian
(seperti gambar FRAME A2). Pertama, kita perlu membuat file pengisi frame
sebanyak 3 buah.
- Buatlah file HTML berikut, simpan dengan nama logo.html
1
|
<html>
|
2
|
<head>
|
3
|
<title></title>
|
|
4
|
</head>
|
|
5
|
<body bgcolor="#006699">
|
|
6
|
<h2><font color="#FFFFFF">Cara
Membuat WEB</font></h2>
|
|
7
|
</body>
|
8
|
</html>
|
- Selanjutnya, buatlah file yang kedua, simpan
dengan namamenu.html
1
|
<html>
|
2
|
<head>
|
3
|
<title></title>
|
|
4
|
</head>
|
|
5
|
<body bgcolor="#CCCCFF">
|
|
6
|
<h4>Latihan</h4>
|
|
7
|
Mencoba
latihan membuat Frame HTML
|
|
8
|
</body>
|
|
9
|
</html>
|
-
- Buatlah file yang ketiga, simpan dengan nama welcome.html
1
|
<html>
|
2
|
<head>
|
3
|
<title></title>
|
|
4
|
</head>
|
|
5
|
<body>
|
|
6
|
<h2>Selamat
Datang</h2>
|
|
7
|
<h4>Anda
berada pada halaman latihan Membuat FRAME HTML</h4>
|
|
8
|
</body>
|
|
9
|
</html>
|
-
- Yang terakhir adalah kita membuat file
pendefinisi frame, simpan dengan nama index.html
01
|
<html>
|
02
|
<head>
|
03
|
<title></title>
|
|
04
|
</head>
|
|
05
|
<frameset rows="25%,*" border="0">
|
|
06
|
<frame name="atas" src="logo.html" />
|
|
07
|
<frameset cols="20%,*">
|
|
08
|
<frame name="menu" scrolling="no"src="menu.html" />
|
|
09
|
<frame name="isi" src="welcome.html" />
|
|
10
|
</frameset>
|
|
11
|
</frameset>
|
|
12
|
</html>
|
|
Cara Membuat Frame
HTML
Gambar di atas merupakan hasil dari kode-kode yang tertera di atas.
Tidak ada komentar:
Posting Komentar