Friday, 28 February 2014
Tag Umum dalam HTML
Baca dulu Pengertian HTML
1.
Tag
<html>
Tag
<html> digunakan untuk penanda bahwa dokumen tersebut merupakan dokumen
HTML.
2.
Tag
<head>
Dibagian ini disimpan sebuah konfigurasi
atau script-script tambahan yang sifatnya disembunyikan atau tidak ditampilkan
pada halaman web.
3.
Tag
<body>
Dibagian tag ini disimpan informasi yang di
atur dengan tag html lain yang nantinya ditampilkan dalam halaman web.
4.
Headling
Dalam HTML terdapat tag untuk membuat
sebuah judul text, tag ini disebut dengan headling dan terdapat 6 jenis
. Untuk jelasnya lihat contoh berikut.
. Untuk jelasnya lihat contoh berikut.
<html>
<head>
<title>Headling</title>
</head>
<body>
<h1>Judul
Text menggunakan headling h1</h1>
<h2>Judul
Text menggunakan headling h1</h2>
<h3>Judul
Text menggunakan headling h1</h3>
<h4>Judul
Text menggunakan headling h1</h4>
<h5>Judul
Text menggunakan headling h1</h5>
<h6>Judul
Text menggunakan headling h1</h6>
</body>
</html>
5.
Paragraf
Tujuan dari membuat web biasanya adalah
untukmenampilkan sebuah informasi, baik berupa berita, artikel, dan lainnya.
Dan informasi tersebut biasanya banyak sampai biasanya terdiri dari beberapa
paragraf, dan informasi yang ditampilkan harus rapih dan dapat diatur. Untuk
mengatur sebuah text tersebut kita gunakan tag
<p> dan di akhiri </p> untuk setiap paragraf.
<html>
<head>
<title>Headling</title>
</head>
<body>
<p>
paragraf
pertama, hallo gugun dwi permana hallo gugun dwi permana hallo gugun dwi
permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun
dwi permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun
dwi permana
hallo
gugun dwi permana hallo gugun dwi permana
</p>
<p>
paragraf
kedua, hallo gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun
dwi permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun
dwi permana
hallo
gugun dwi permana hallo gugun dwi permana
</p>
</body>
</html>
6.
Text Alignment
Diatas kita sudah tau untuk membuat sebuah
paragraf, dan untuk mengatur paragraph tersebut atau mengatur gambar supaya
rata kiri, kanan, tengah atau justify kita gunakan atribut align.
<html>
<head>
<title>Headling</title>
</head>
<body>
<h2
align='center'>Text Alignment</h2>
<p
align='right'>
paragraf
pertama, hallo gugun dwi permana hallo gugun dwi permana hallo gugun dwi
permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun
dwi permana
</p>
<p
align='justify'>
paragraf
kedua, hallo gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun dwi
permana
</p>
<p
align='center'>
paragraf
ketiga, hallo gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana
hallo
gugun dwi permana hallo gugun dwi permana hallo gugun dwi permana hallo gugun
dwi permana
</p>
</body>
</html>
7.
Baris Baru
Kalau kita gunakan tag heading atau tag
paragraph <p> maka text selanjutnya akan otomatis dalam garis baru.
Sedangkan untuk text yang tidak diapit tag heading dan paragraph akan terus
ditempatkan dalam garis yang sama walaupun dalam script dibuat dalam beberapa
baris.
<html>
<head>
<title>Headling</title>
</head>
<body>
Tulisan
baris pertama
tulisan
baris kedua
tulisan
baris ketiga
</body>
</html>
Maka dari itu untuk membuat text atau
informasi apapun dalam garis baru maka diperlukan tag <br>.
<html>
<head>
<title>Headling</title>
</head>
<body>
Tulisan
baris pertama <br>
tulisan
baris kedua <br>
tulisan
baris ketiga <br>
</body>
</html>
8.
Format Text
a.
Bold (Tebal) Tag
<b>
b.
Italic (Miring) Tag <i>
c.
Underline (Garis Bawah) Tag <u>
Contoh :
<html>
<head>
<title>Format</title>
</head>
<body>
<b>tulisan
tebal</b> <br/>
<i>tulisan
miring</i> <br/>
<u>tulisan
garis bawah</u> <br/>
<br/>
<b><i>tulisan
tebal miring </i></b> <i><u>tulisan garis bawah
miring</u></i>
</body>
</html>
Baca Juga
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment