Perintah dasar dalam HTML, serta beberapa contohnya:
- Kode Warna
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna
(dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis
dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya
dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf
O).
black
|
#000000
|
blue
|
#0000FF
|
olive
|
#808000
|
white
|
#FFFFFF
|
fuchsia
|
#FF00FF
|
green
|
#008000
|
red
|
#FF0000
|
gray
|
#808080
|
teal
|
#008080
|
yellow
|
#FFFF00
|
silver
|
#C0C0C0
|
navy
|
#000080
|
lime
|
#00FF00
|
maroon
|
#800000
|
purple
|
#800080
|
· <H1> sampai <H6>
<H1> </H1>font ukuran besar
<H2> </H2>
…. ….
<H6> </H6>font semakin kecil
<H1> </H1>font ukuran besar
<H2> </H2>
…. ….
<H6> </H6>font semakin kecil
· <HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
· <I>
Fungsi : membuat teks miring
· <B>
Fungsi : membuat teks tebal
Fungsi : membuat teks tebal
· <U>
Fungsi : membuat teks bergaris bawah
Fungsi : membuat teks bergaris bawah
· <CENTER>
Fungsi : membuat text ke tengah layar
Fungsi : membuat text ke tengah layar
· <ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak :
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kananatau<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak :
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kananatau<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>
· <BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
· <!->
Fungsi : membuat komentar Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
Fungsi : membuat komentar Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
· <P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
· <DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
· <BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>
· <FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
· <FACE>
Fungsi : mengubah jenis font
Fungsi : mengubah jenis font
· <SUP>
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1stin the world
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1stin the world
· <SUB>
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H2O (Disebut Air) dan
C2127No (Disebut Methadon)
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H2O (Disebut Air) dan
C2127No (Disebut Methadon)
· <UL>
atau Unorder List, <OL> atau Ordered List
Fungsi : membuat bullet
Fungsi : membuat bullet
· <LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
<LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
<LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
· <IMGSRC>
Fungsi : memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER=”5″>
“5″ merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
Fungsi : memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER=”5″>
“5″ merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
· <BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite src=”d:/Selamat datang.WAV”>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite src=”d:/Selamat datang.WAV”>
· Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara otomatis dari kiri ke kanan.
Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara otomatis dari kiri ke kanan.
Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
· Penerapan Definisi ListDefinisi
List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing dibawah ini :
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
Link dengan sorot
Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name=”description”Content=” “>
<META Name=”keywords”Content=” “>
<META Name=”generator”Content=”Cute HTML”>
</HEAD>
<BODY BG Color=”#FFFFFF”Text=”#000000=”#”0000FF”VLink=”#800080″>
<Center>
<A href=” “target=main on mouse over=”Window.open(‘c:/html/keterangan.html’):”>
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name=”description”Content=” “>
<META Name=”keywords”Content=” “>
<META Name=”generator”Content=”Cute HTML”>
</HEAD>
<BODY BG Color=”#FFFFFF”Text=”#000000=”#”0000FF”VLink=”#800080″>
<Center>
<A href=” “target=main on mouse over=”Window.open(‘c:/html/keterangan.html’):”>
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
Link dengan tombol
Berikut adalah contoh program link dengan tombol
Sintak :
<Input type=”button”Value=”Nama Tombol”
On Click=”parent.location=”Link anda disini” >
Berikut adalah contoh program link dengan tombol
Sintak :
<Input type=”button”Value=”Nama Tombol”
On Click=”parent.location=”Link anda disini” >
Contoh
Buatlah link dengan nama
tentang_kami.html
produk_kami.html
cara_memesan.html
< HTML >
< HEAD >
< TITLE > </TITLE>
< META name=”description”Content=” “>
< META name=”keywords”Content=” “>
< META name=”generator”Content=”Cute HTML”>
< /HEAD >
< BODY BGCOLOR=”#FFFFFF”Text=”#000000″Vlink=”#800080″ >
< Center >
< h1 > PT.OCTA >
< Input Type=”button”value=”Tentang Kami”
on click=”parent.location=”c:/website/tentang_kami.html’” >
< Input Type=”button”value=”Produk Kami”
on click=”parent.location=”c:/gambar/produk_kami.html’” >
< Input Type=”button”value=”cara memesan”
on click=”parent.location=”c:/gambar/cara_memesan.html’” >
< /Center >
< /Body >
< /HTML >
Buatlah link dengan nama
tentang_kami.html
produk_kami.html
cara_memesan.html
< HTML >
< HEAD >
< TITLE > </TITLE>
< META name=”description”Content=” “>
< META name=”keywords”Content=” “>
< META name=”generator”Content=”Cute HTML”>
< /HEAD >
< BODY BGCOLOR=”#FFFFFF”Text=”#000000″Vlink=”#800080″ >
< Center >
< h1 > PT.OCTA >
< Input Type=”button”value=”Tentang Kami”
on click=”parent.location=”c:/website/tentang_kami.html’” >
< Input Type=”button”value=”Produk Kami”
on click=”parent.location=”c:/gambar/produk_kami.html’” >
< Input Type=”button”value=”cara memesan”
on click=”parent.location=”c:/gambar/cara_memesan.html’” >
< /Center >
< /Body >
< /HTML >
Membuat Frame
-Framecols : membagi layar dalam bentuk kolom
-FrameRows : membagi layar dengan bentuk baris
-Frame Src : menampilkan file dalam frame
Bentuknya
(Frame cols=”30%,*”)
(Frame src=”Nama.file Name=”Teks”)
(Frame Rows=”40%,*”)
(Frame src=”Nama.file”Nama=”teks”)
(Frame src=”Nama.file”Nama=”Teks)
(/Frameset)
-FrameRows : membagi layar dengan bentuk baris
-Frame Src : menampilkan file dalam frame
Bentuknya
(Frame cols=”30%,*”)
(Frame src=”Nama.file Name=”Teks”)
(Frame Rows=”40%,*”)
(Frame src=”Nama.file”Nama=”teks”)
(Frame src=”Nama.file”Nama=”Teks)
(/Frameset)
Contoh Program Frame
< Html >
< Head >
< Title >Melink dengan sorot < /Title >
< /Head >
< Frameset cols=”30%,*” >
< Frame src=”Nama file”Nama=”Teks” >
< Frame Rows=”40%%,*” >
< Frame src=”Gambar File’Nama=”Gambar” >
< Frame src=”Nama File”Nama=”Teks >
< /Frameset >
< Head >
< Title >Melink dengan sorot < /Title >
< /Head >
< Frameset cols=”30%,*” >
< Frame src=”Nama file”Nama=”Teks” >
< Frame Rows=”40%%,*” >
< Frame src=”Gambar File’Nama=”Gambar” >
< Frame src=”Nama File”Nama=”Teks >
< /Frameset >
Sumber :
0 komentar:
Posting Komentar