A. Membuat Paragraf
Tag <p> digunakan untuk
membuat paragraf dalam sebuah halaman web. Kita semua tahu kalau paragraph ada
yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas ketik kode di bawah ini.
<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan default atau bentuk baku tag <p></p> dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag <p> maka browser akan menganggap rata kiri.</p>
</body>
</html>
Berikut adalah hasil tampilan dari code di
atas:
B. Tag <PRE>
Berbeda dengan elemen
<P>…..</P>, elemen <PRE> akan menampilkan apapun, susunan
teks atau bentuk huruf, apa adanya. Salah satu keterbatasan elemen
<P>…..</P> adalah ketidakmampuannya menampilkan teks yang kita
sisipi dengan tombol Enter, spasi, tab. Maka kekurangan ini mampu diatasi oleh
elemen <PRE>.
C. Tag <BR>
Elemen <BR> berguna
untuk memaksa berpindah ke baris yang ada di bawahnya. Fungsi ini mirip dengan
Enter.
D. Membuat Teks Format Judul
Teks format judul biasa digunakan untuk
judul postingan/artikel dalam halaman web. contohnya seperti gambar dibawah
ini.
Untuk membuat
teks format judul bisa menggunakan tag heading. Tag heading terdiri dari
beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:
|
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
|
E. Mengatur Font Pada Halaman HTML
Didalam dokumen
html kita bisa mengatur format font seperti mengatur jenis huruf, warna huruf,
size/ukuran huruf dll. Untuk mengatur format font dalam dokumen html caranya
dengan menggunakan tag <font>...</font>.
Dibawah ini adalah contoh penggunaan tag
font.
<html>
<head>
<title> Format Font </title>
</head>
<body >
<font size="5pt" face="Arial" color="red"> Bentuk Text arial berwarna merah
</font>
</body>
</html>
Berikut adalah hasil tampilan dari code di atas:
Dari code diatas terdapat tag <font size=”5pt” face=”arial” color=”red”>, itu artinya kita mengatur font pada dokumen html dengan ukuran 5 pt, dengan jenis font arial berwarna merah.
HTML saat ini hanya mengenal 16 nama warna, yaitu: Aqua,Navy, Black, Olive, Blue, Purple, Fuchsia, Red, Gray, Silver, Green, Teal, Lime, White, Maroon, dan Yellow
F. Menampilkan Gambar Pada Dokumen HTML
Dalam dokumen html kita dapat menampilkan gambar, untuk menampilkan gambar di dokumen html biasanya menggunakan tag <img>. Berikut adalah contoh penggunaan tag <img>.
<html>
<head>
<title>Belajar ambil gambar</title>
</head>
<body>
<img src="image.jpg" height="80%" width="20%" alt="Ini gambar ">
</body>
</html>
|
Berikut adalah hasil
tampilan dari code di atas:
- Tampilan setelah gambar tersimpan di folder anda
G. Membuat Text Bold, Italic, Underline, Striketrue, Supersript
dan Subscript
|
<html>
<head>
<title></title>
</head>
<body >
<b>Ini Text
Bold</b><br>
<i>Ini Text
Italic</i><br>
<u>Ini Text
Underline</u><br>
<s>Ini Text
Strikethrough</s></br>
Text Superscript:
X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
</body>
</html>
|
Berikut adalah hasil tampilan dari code di
atas:
H. Membuat Garis Dalam Dokumen HTML
Tag hr
digunakan untuk membuat garis pada dokumen html. Contoh:
|
<html>
<head>
<title>Membuat Garis</title>
</head>
<body>
<h1 align="right">Ini adalah
garis</h1>
<hr align="right"
width="60%" color="#FF0000" size="3">
</body>
</html>
|
Berikut adalah hasil tampilan dari code di
atas:
I. Membuat Link
Ada 4 jenis
pembuatan link dalam html:
•
Link
untuk menghubungkan antar halaman
•
Link
untuk menghubungkan ke bagian halaman lain
•
Link
untuk menghubungkan ke halaman website lain
•
Link untuk menghubungkan
ke alamat email
|
<html>
<head>
<title>Belajar link</title>
</head>
<body>
<a
href="http://www.sman1katapang.sch.id">Menuju web sman 1
katapang
</a>
</body>
</html>
|
Berikut adalah hasil tampilan
dari code di atas:
J. Membuat Animasi Teks Bergerak
Tag Marquee digunakan untuk membuat
animasi teks jalan pada dokumen html.
|
<html>
<head>
<title>Membuat Animasi
Marquee</title>
</head>
<body>
<marquee behavior="alternate"
bgcolor="#0099FF">ANIMASI MARQUEE(ALTERNATE)
</marquee><br><br>
<marquee behavior="scroll"
bgcolor="#0099FF" direction="left">ANIMASI
MARQUEE(SCROLL)</marquee><br><br>
<marquee behavior="slide"
bgcolor="#0099FF" >ANIMASI MARQUEE(SLIDE)</marquee><br><br>
</body>
</html>
|
Berikut adalah hasil tampilan dari code di atas:
K. Membuat List
Ada 3 jenis
list dalam dokumen html yaitu:
1. Ordered List “<ol>”
Tag <ol> adalah kependekan dari
Ordered List, yang artinya list secara berurutan. list yang ditampilkan nanti
oleh tag ini akan menampilkan nomor disebelah kiri dari detail.
|
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
|
Pada Ordered
List “<ol>” secara default pengurutan akan diurutkan dengan angka. Jika
anda ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan
atribut type pada tag <ol>
Tabel di bawah
ini memperlihatkan atribut-atribut untuk mengubah jenis nomor pada tag
<OL> beserta fungsi-fungsinya.
Atribut
|
Fungsi
|
TYPE=A
|
Membuat
daftar berurut dengan huruf besar (A,B,C,D....)
|
TYPE=a
|
Membuat
daftar beurut dengan huruf kecil (a,b,c,d..)
|
TYPE=I
|
Membuat
daftar beurut dengan bilangan romawi besar (I,II,III,IV..)
|
TYPE=I
|
Membuat
daftar beurut dengan bilangan romawi kecil (i,ii,ii,iv..)
|
TYPE=1
|
Mengembalikan
daftar berurut pada nomor (default) (1,2,3,4......)
|
START=x
|
Menentukan
nilai awal dari item dalam daftar, di mana x adalah nilai awal daftar
|
contoh:
|
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol type="A">
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
|
Ketika script
di atas di jalankan makan pengurutan list akan berubah, pengurutan akan
diurutkan dengan huruf.
2. Unordered List <ul>
Unordered List
merupakan pengurutan list dengan menggunakan symbol/bullet. Cara membuatnya
sama dengan Ordered List hanya saja tag <ol> diganti dengan tag
<ul>.
Unordered List
juga mempunyai beberapa atribut tambahan. Anda dapat mengatur bentuk-bentuk
tanda pada suatu item sebagai suatu lingkaran, kota atu cakram. Tabel di bawah
ini memperlihatkan atribut-atribut untuk tag <UL> beserta
fungsi-fungsinya.
Atribut
|
Fungsi
|
TYPE=circle
|
Membuat tanda
lingkaran untuk item
|
TYPE=square
|
Membuat tanda
kotak untuk item
|
TYPE=disc
|
Membuat tanda
cakram untuk item
|
Kode HTML
berikut ini memperlihatkan pemakaian
atribut TYPE pada tag <UL> untuk mengubah bentuk tanda pada suatu item.
Contoh:
|
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ul>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ul>
</body>
</html>
|
Berikut adalah hasil tampilan dari code di
atas:
3. List tanpa bullet <dl>
Untuk membuat list tanpa mengunakan
bullet/symbol caranya sama persis dengan pembuatan list dengan tag ol/ul, hanya
saja tag <ul> diganti dengan <dl> lalu tag <li> diganti
dengan <dd> contoh:
|
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<dl type=>
<dd>Memasak</dd>
<dd>cuci piring</dd>
<dd>cuci baju</dd>
<dd>mandi</dd>
<dd>sarapan</dd>
<dd>berangkat sekolah</dd>
</dl>
</body>
</html>
|
Berikut adalah hasil tampilan dari code di
atas:
Silahkan isi kolom komentar bila ada pertanyaan...
BalasHapusTerima kasih bu postingannya....
BalasHapussama-sama...
Hapusselamat belajar...
Kalau warna pada pembuatan garis boleh diganti tidak usah pake kode tapi misalkan kalau merah jadi "red" ?
BalasHapustentu saja boleh. warna lain yang bisa digunakan : Aqua,Navy, Black, Olive, Blue, Purple, Fuchsia, Red, Gray, Silver, Green, Teal, Lime, White, Maroon, dan Yellow
Hapusselamat mencoba
Terimakasih...
Hapus