HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web. Struktur dasar dokumen HTML berisi elemen-elemen atau tag yang wajib ada, yaitu :
<html>
<head>
<title> -Judul bar browser- </title>
</head>
<body>
Isi yang akan ditampilkan pada browser terletak pada tag <body> dan </body>
</body>
</html>
Heading
Heading ditampilkan dengan font yang besar dan tebal daripada teks normal.
<h1>heading level 1</h1>
<h2>heading level 2</h2>, dst sampai level 6.
Paragraf
Untuk membuat paragraph baru digunakan tag <p> diakhiri dengan </p>
List
HTML mendukung list tidak bernomor, bernomor, dan definisi.
a. Untuk membuat daftar tidak bernomor gunakan <ul>,<li> dan </ul>
Contoh :
<ul>
<li>HTML
<li>PHP
<li>MySQL>
</ul>
b. Untuk membuat daftar bernomor gunakan <ol>,<li>, dan </ol>
Contoh :
<ol>
<li>HTML
<li>PHP
<li>MySQL>
</ol>
c.Untuk membuat daftar definisi digunakan <dl>,<dt>,<dd> dan </dl>
Contoh :
<dl>
<dt>HTML
<dd> HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web.
</dl>
Dalam <dt> maupun <dd> bisa terdiri dari beberapa paragraph atau list lainnya. Atribut “compact” dapat dipakai untuk dt (definition terms) yang sangat pendek.
<dl compact>
<dt>-i
<dd> HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web.
<dt>-k
<dd> HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web.
</dl>
List dapat dibuat bertingkat, misalnya :
<ul>
<li>Bahasa Pemrograman :
<ul>
<li>Pascal
<li>Delphi
<li>PHP
</ul>
<li>Aplikasi Database :
<ul>
<li>MySQL
<li>PostgreSQL
<li>Access
</ul>
</ul>
Preformated Text
Dalam HTML, spasi, tabs dan baris baru (enter) tidak mempunyai pengaruh. Agar format tampilan sesuai dengan source-nya maka diperlukan tag <PRE>
Contoh :
<pre>
Nama : Devictor
Tgl Lahir : 30 Desember 1989
</pre>
Extended Quotations
Untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>
Contoh :
<blockquote>
<p> Untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <”blockquote”></p>
</blockquote>
Ganti Baris (line breaks)
Untuk menulis surat dengan baris-baris pendek, akan lebih baik menggunakan tag <br> untuk ganti baris.
Contoh :
Devictor<br>
Purworejo, Jawa Tengah <br>
GARIS HORISONTAL
Untuk membuat garis horizontal menggunakan tag <hr> dan dapat diikuti dengan atribut “size” dan “width”.
Contoh : <hr size=4 width=”100%”>
MEMFORMAT KARAKTER
<b> atau <strong> untuk membut teks tebal
<i> atau <em> untuk membuat teks italic
<tt> atau <code> untuk membuat teks typewriter, yakni font dengan lebar tetap.
MEMBUAT LINK
Dimulai dengan tag pembuka, yaitu <a (beri spasi sesudah huruf a)
Tentukan alamat atau dokumen yang dituju oleh link, yaitu href=”filename” diikuti tanda >.
Tuliskan teks yang melayani ebagai hypertext.
Akhiri dengan tag penutup </a>
Contoh : <a href=”http://www.phpeveryday.com>kumpulan source php</a>
1.Relative dan Absolute Link
Link pada suatu dokumen direktori lain dapat dibuat dengan menentukan relative path dari posisi sekarang. Misalnya dokumen isi.html dalam direktori produk dapat di link dengan cara :
<a href=”produk/isi.html”>Daftar Produk</a>
URL dokumen secara lengkap (absolute path) dapat dipakai untuk menentukan tujuan link, misalnya :
<a href=”C:\sadat\produk.html”>produk</a>
2. Link ke satu bagian di dokumen lain
Cara me-link dari dokumen pertama (satu.html) ke bagian lain (misal : bab tiga) yang terdapat pada dokumen lain (dua.html) adalah :
Pada dokumen satu.html dituliskan : <a href=”dua.html#bt>Bab Tiga</a>
Pada bagian Bab Tiga dari dokumen dua.html dituliskan : <a name=”bt”>Bab Tiga</a>
3. Link ke suatu bagian di dokumen yang sama
Contoh :
Pada bagian yang memuat hypertext : <a href=”#bt”>Bab Tiga</a>
Pada bagian yang dituju hypertext : <a name=”bt”>Bab Tiga</a>
4.Mailto
Untuk menghubungkan ke alamat email. Contoh :
<a href=”mailto:kangsadat@yahoo.com>Kirim Email</a>
MEMASUKKAN GAMBAR
Untuk memasukkan gambar ke dalam dokumen HTML digunakan perintah <img src=nama file gambar>. Contoh : <img src=”gambar.jpg”> akan menampilkan file gambar.jpg.
1.Atribut Ukuran Gambar
Contoh : <img src=”gambar.jpg” height=200 width=75>
2. Pelurusan Gambar
Teks sebelahnya lurus ke atas : <img src=”gambar.jpg” align=top>
Teks sebelahnya lurus ke tengah : <img src=”gambar.jpg” align=center>
Teks sebelahnya lurus ke bawah(default) : <img src=”gambar.jpg” >
Gambar saja (teks berikutnya di bawah) : <p align=center><img src=”gambar.jpg”></p>
3. Teks alternative untuk gambar
Untuk mengganti gambar yang tidak Nampak, mungkin dikarenakan browser tidak bisa menampilkan gambar bisa diberi alternative teks untuk member keterangan gambar dengan cara :
<a href=”gambar.jpg” alt=”gambar aku”>
4.Atribut border dan spasi
Garis tepi yang mengelilingi gambar dapat diatur kemunculannya maupun ukurannya. Bila atribut “border” tidak dituliskan, maka gambar yang ditampilkan tanpa garis tepi. Contoh : <img src=”gambar” border=10>. “border=10” menunjukkan nilai border dalam pixel.
Untuk mengatur spasi atau jarak antara ambar dan teks sebelahnya, digunakan tag : HSPACE (jarak gambar dan teks di kanan atau kirinya) dan VSPACE (jarak gambar dg teks di atas atau bawahnya). Contoh : <img src=”gambar.jpg” hspace=100 vspace=100>
5. Gambar sebagai hyperlink
Contohnya : <a href=”http://gmail.com”><img src=”gambar.jpg”>Email Google</a>
6. Gambar sebagai background
Dimasukkan sebagai atribut pada tag “body”. Contoh : <body background=”gambar.jpg”>
7. Background Warna
Secara default browser menampilkan teks warna hitam dan background warna putih. Warna tersebut dapat diubah dengan membrikan atribut pada tag body. Contoh : <body bgcolor=”#000000” text=”#ffffff” link=”#9690cc”>
8. Gambar, suara, dan animasi eksternal
Sebuah gambar (umumnya berukuran besar) dapat dibuka sebagai dokumen terpisah yang di link melalui teks maupun gambar versi kecil. Hal ini disebut dengan gambar eksternal yang bermanfaat mempercepat proses download dokumen utama. Untuk membuat link ke gambar eksternal adalah : <a href=”gambar.jpg”>Link gambar eksternal</a>.
Link ke gambar eksternal dapat pula dibuat melaui gambar versi kecil, yaitu : <a href=”foto besar.jpg”><img src=”foto kecil.jpg></a>
Pada dokumen utama ditampilkan gambar versi kecil, kemudian bila hyperlink diaktifkan akan ditampilkan gambar besar. Dngan cara yang sama dapat dibuat link ke animasi atau sound eksternal, misalnya : <a href=”animasi.avi”>link ke animasi eksternal</a>
Popular Posts
-
Matlab adalah singkatan dari Matrix Laboratory, software yang dibuat dengan menggunakan bahasa ini dibuat oleh The Mathworks.inc dan te... -
Kombiansi Tombol Alt dengan Angka-angka ASCII Dalam kegiatan mengetik sehari-hari terkadang diperlukan simbol-simbol tertentu yang merupaka...
-
“Grafik komputer” atau Grafika komputer (Computer graphics) adalah salah satu cabang ilmu komputer yang berhubungan dengan pembuatan dan ma...
-
Jenis-Jenis RAM RAM. Sebuah RAM akan menjaga data yang terdapat di dalamnya selama ada listrik (power) yang mengalir pada chip memori. RAM...
-
Flashdisk ternyata bisa di upgrade juga...hahhahah............... Flahsdisk yang kita gunakan terkadang ternyata ada rahasia besar yang bel...
-
Perintah – perintah dalam lingkungan databases adalah : SELECT Pernyataan SELECT digunakan untuk query database tentang informasi datab...
-
Pengertian processor Processor merupakan perangkat keras yang berfungsi sebagai pusat pengendali dan pengatur dari keseluruhan kegiatan pe... -
8086/8088 Device Specifications • DIP (Dual In-Line Packages). 1. 8086: 16-bit microprocessor dengan 16-bit data bus 2. 8088: 1... -
Tipe-Tipe Memori Fast page Mode DRAM (FPM RAM) . Sebelum terdapat EDO RAM, FPM RAM merupakan tipe memori utama yang digunakan pada komputer...
-
./Cara memperbaiki komputer yang telah terlanjur terinfeksi oleh virus. pada postingan sebelumnya yang bisa anda baca disini, saya membaha...
Tidak ada komentar:
Posting Komentar