Dasar Tag HTML
Assalamualaikum Wr WbSelamat Siang sobatt Blogger :) , ketemu lagii deh sama Saya Risky Ganteng :p , Udahh ah langsung ke Pointnya a , Risky Disini akan Share Tentang Dasar Tag HTML kawan ^_^ .
Dokumen HTML merupakan sebuah file teks. Karena hanya berisi teks, maka dokumen HTML menjadi sangat sederhana, sehingga mudah untuk ditransfer kesebuah jarungan internet.
Namun karena sederhana, HTML memiliki kelemahan, salah satunya adalah Anda harus mengetikkan sendiri semua kode HTML jika ingin membuat sebuah halaman web.
Memang sekarang telah banyak beredar HTML editor yang dapat membantu Anda dalam membuat sebuah halaman web tanpa menyentuh kode HTML sama sekali., namun dalam pengembangan halaman web dengan menggunakan bahasa script seperti VBScript dan JavaScript , pengetahuan mengenai HTML harus mutlak diperlukan, karena Anda harus tahu dengan pasti di mana harus
menyisipkan script yang diinginkan dalam HTML.
Untuk menuliskan HTML VBScript dan JavaScript dapat menggunakan teks editor sederhana, seperti Notepad atau EditPad.
Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag.
Penulisannya diapit oleh apa yang disebut delimiter (pembatas).
Delimiter adalah suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag. Untuk HTML delimiter yang dipakai adalah dengan karakter < dan > .
Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag.
Tag pada awal kode disebut opening tag, dan pada akhir kode disebut ending tag.
Ending Tag ditandai dengan karakter/ diikuti dengan opening Tag.
Contoh Tag :
<html>
--kode program--
</html>
Sebuah dokumen HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala).
Bagian head ditandai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>.
Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut , misalnya judul, nama penulis, komentar-komentar ,dan lain-lain.
Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut.
Contoh dari tag dokumen web sederhana :
<html> <head> <title> Pelatihan Dasar Website </title> <h1> Pelatihan Dasar Membuat Website </h1> </head> <body> <h2> Selamat Datang Di Pelatihan Dasar Membuat Website </h2> </body> </html>
Tampilan dari web akan tampak seperti berikut :
Berikut ini adalah beberapa tag dasar yang penting dari HTML (penulisan tidak case sensitive, boleh huruf besar atau kecil.)
1. <HTML> … </HTML>.Menjelaskan bahwa teks file adalah merupakan HTML format. Diletakkan pada awal dan akhir dari setiap halaman web.
2. <HEAD> … </HEAD>
Diantaranya adalah area dari heading halaman. Digunakan untuk script/perintah khusus yang tidak mempunyai hubungan dengan format dari halaman.
3. <TITLE> … </TITLE>
Memberi judul yang ditampilkan pada ujung kiri atas dari browser window.
4. <BODY> … </BODY>
Setelah tag <HEAD> dan digunakan untuk area dimana yang dilihat adalah merupakan tampilan dari web/ isi dari halaman. Pada tag <BODY> di dalamnya dapat ditambahkan beberapa atribut seperti tampak di bawah ini
o bgcolor=”…” => memberikan warna latar/ background halaman.
o text=”…” => memberikan warna tulisan / teks.
o link=”…” => memberikan warna pada hyperlinks (link halaman)
o vlink=”…” => memberi warna pada hyperlink yang telah dimasuki/ diklik.
o alink=”…” => memberi warna pada link yang aktif.
Warna yang diberikan merupakan kode hexadecimal . contoh #000000 warna putih, #FF0000 warna merah, #00FF00 warna hijau dan #0000FF warna biru.
5. <B> … </B>
Membuat tulisan tebal (Bold Text )
6. <P> … </P>
Merupakan perintah paragraph yang termasuk diantaranya pengaturan posisi
tulisan, indentansi dan jarak. Antara lain seperti berikut
<P ALIGN=”left”> … </P> => untuk pengaturan paragraph rapat kiri (left) ..
<P
ALIGN=”center”> … </P>
untuk
pengaturan paragraph di tengah
(center)
<P
ALIGN=”right”> … </P>
untuk
pengaturan paragraph rapat kanan
(right)
<P
NOWRAP> … </P>
untuk
membuat penulisan paragraph tanpa
pemotongan
batas pinggir halaman untuk berganti baris, dan hanya bisa
berganti
baris dengan tag <BR>
7.
<BR>
Untuk
memberikan baris baru / pergantian baris. Diletakkan pada bagian teks
yang
mau berganti baris.
8.
<A> …. </A>
Membuat
link antar dua halaman web. Tag <A> adalah merupakan tag
penghubung
(anchor tag). Biasanya dituliskan dengan <A HREF link file > …
</A>.
Tatacara penulisan letak file ini juga bergantung dari letak filenya
dimana.
Untuk itu disini akan dijelaskan beberapa cara penulisan letak
relative
dari
link file sbb( file web referensi adalah file dimana kita menuliskan
link
halaman)
:
o
HREF=”file.html”
file.html
terletak di direktori yang sama dengan
file
web referensi.
o
HREF=”dir/file.html”
letak
file.html di dalam direktori dir dan
direktori
dir terletak pada direktori yang sama dengan file web
referensi
o
HREF=”dir/dir2/file.html”
letak
file.html di dalam direktori dir2
dimana
direktori ini di dalam direktori dir.
o
HREF=”../file.html”
letak
file.html di direktori yang berada satu
level
di atas direktori posisi file web referensi sekarang.
o
HREF=”../../dir/file.html”
letak
file.html pada dua level di atas.
9.
<IMG SRC=”gambar.jpg” … >…</IMG>
Jika
Anda ingin meletakkan gambar / file photo di web Anda, maka
dapat
dilakukan dengan memberikan tag ini. Perlu diingat bahwa tag ini
juga
mempunyai beberapa atribut yang dituliskan di belakang.
keterangan
nama file seperti:
o
width=”...”
memberikan
lebar dari gambar.
o
height=”…”
tinggi
dari gambar.
o
border=”…”
memberikan
ketebalan dari bingkai gambar.
o
alt=”…”
memberi
nama dari gambar.
o
align=”…”
memberikan
posisi dari gambar.
Pemberian
link web/ dokumen dengan gambar juga bisa dilakukan.
Contohnya
jika kita mempunyai file gambar : web.gif dan kita ingin
membuat
link dengan file tersebut.
Pengaturannya
dilakukan dengan tag-tag seperti contoh berikut
<FONT
size="2"
color="#FFFF00"
face="arial">...</font>
Contoh
Mengubah
ukuran,warna dan bentuk
tulisan.
Ukurannya antara 1 - 7 atau
angka
relatif +1 (lebih besar 1 kali dari
sebelumnya).
Warna berdasarkan kode
warna
heksadesimal.Jenis tulisan
biasanya
seperti Arial, Times New
Roman,
Helvetica, Tahoma, or Courier.
Zed
h: <font face="verdana, arial black,
arial">
<BASEFONT
size="2"
color="#FFFF00"
face="arial">
-
Mengeset
untuk default dari bentuk font
baik
ukuran, warna dan juga jenisnya.
<BIG>...</BIG>
Example
Membuat
tulisan lebih besar.
<SMALL>...</SMALL>
Example
Membuat tulisan lebih kecil
<B>...</b>
Example
Huruf
cetak tebal (BOLD)
<I>...</I>
Example
Huruf
cetak miring (ITALIC)
<S>...</S>
Example
Mencoret
kata (overSTRIKE)
<STRIKE>...</STRIKE>
Example
Mencoret
kata
<U>...</U>
Example
Memberi
garis bawah text (biasanya
sering
membuat bingung dengan link),
UNDERLINE
<TT>...</TT>
Example Huruf
Teletype / spasi tunggal
<H1>...</H1>
Example
Head
#1
<H2>...</H2>
Example
Head
#2
<H3>...</H3>
Example
Head
#3
<H4>...</H4>
Example
Head
#4
<H5>...</H5>
Example
Head
#5
<H6>...</H6>
Example
Head
#6
11.
<OL>… </OL> , <UL>… </UL>dan <LI>…
</LI>
Biasanya
untuk membuat list / memberikan penomoran langsung pada list
baris.
Contohnya
<ol>
<li>List
item #3</li>
<li>List
item #4</li>
</ol>
akan
tampak seperti berikut :
1.
List item #1
2.
List item #2
3.
List item #3
4.
List item #4
Selain
itu dapat juga dengan mengganti tag <OL> dengan <UL> maka
akan
tampak
seperti berikut :
•
List
item #1
•
List
item #2
•
List
item #3
•
List
item #4
12.
<HR>
Pemberian
tag ini bertujuan untuk membuat garis horizontal pada dokumen
web.
Dapat diberikan attribute seperti pada atribut gambar/ image.
13.
Tag Tabel.
Untuk
membuat tabel di dokumen web dapat dilakukan dengan memberikan
tag-tag
Tabel. Dalam tag-tag tabel ini terdiri dari beberapa tag seperti
contoh
berikut.
Untuk
membuat tabel seperti tampak di bawah ini :
Sel
1, baris 1 Sel 2, baris 1 Sel 3, baris 1 Sel 4, baris 1
Sel
1, baris 2 Sel 2, baris 2 Sel 3, baris 2 Sel 4, baris 2
Naahh Segitu aja yaa sobat Tentang Dasar Tag HTML ^_^ , smoga Bermanfaat bagi sobat blogger ^_^..
Selamat Siank Sobat ^_^ ..
Wassalamualaikum Wr Wb.
Comments
Post a Comment