struktur dasar html · macam-macam tag pada html • heading Æsebuah dokumen dimulai dan dipisah...
Post on 21-Jan-2021
11 Views
Preview:
TRANSCRIPT
STRUKTUR DASAR HTML
Presented by:Moh. Sulhan : sulhan@ukanjuruhan.ac.id@ 2009
Stuktur Dasar HTML
• Ekstensi / nama ahiran dari file adalah : .html / .htm• Tag HTML tidak bersifat case sensitive• Struktur dasar HTML adalah :
<HTML>
…..
</HTML>
awal tag
akhir tag
<HTML>
<HEAD>
……
</HEAD>
<BODY>
……
</BODY>
</HTML>
Diskripsi Dokumen
Isi Dokumen
<HTML><HEAD>
<TITLE>Struktur HTML
</TITLE></HEAD><BODY>
Selamat Datang di Homepage Pertamaku
</BODY></HTML>
Macam-macam Tag pada HTML
• Heading sebuah dokumen dimulai dan dipisah oleh heading
• Paragraf Membuat Paragraf
• Elemen Blok dari isi page yg merupakan materi yg dikutip
• BR Line Break
• HR Membuat garis batas horisontal
• Font menentukan format tampilan font
• Karakter Khusus menampilkan karakter-karakter khusus
• List item mengelompokkan data baik berurutan atau tidak berurutan
• Hyperlink Membuat suatu link
• Tabel membuat tabel
• Image menambahkan gambar
• Form membuat lembaran formulir
• Frame membagi jendela browser menjadi beberapa bagian
HEADING
<HTML>
<BODY>
<H1>Heading Level1</H1>
<H2>Heading Level2</H2>
<H3>Heading Level3</H3>
<H4>Heading Level4</H4>
<H5>Heading Level5</H5>
<H6>Heading Level6</H6>
</BODY>
</HTML>
PARAGRAF
<HTML><BODY><H3>Pandai Bersyukur</H3>
<P>Tidak usah risau terhadap nikmat yang belum ada , justru risaulah kalau nikmat yang ada tidak disyukuri
</P><H2>Hidup Bersahaja</H2>
<P>Bersahaja itu bukan berarti sederhana tetapi menafkahkan harta dengan tidak berlebihan untuk memuaskan nafsunya danjuga tidak kikir dalam berbuat kebaikan.
</P></BODY></HTML>
Elemen Blok
<HTML>
<BODY>
<H3>
Sabar Ketika Lapang
</H3>
<Blockquote>
Kita harus senantiasa berhati-hati jangan
sampai amal kita yang sedikit menjadi
hangus karena kebusukan hati.
</Blockquote>
</BODY>
</HTML>
1
Elemen Blok
<HTML><BODY>
<PRE>Pesan Sabar : -------------------------------------------Dan ujian kesabaran terberat adalahketika kita mendapatkan pujian.
Ingat! setiap pujian yang tidak dikembalikan kepada Allah "maka itulah yang disebut ujub"
------------------------------------------by:Rumi Suwardiyati
diyatimail@yahoo.co.id</PRE>
</BODY></HTML>
2
BR
<HTML><BODY>
<p>Hal penting bagi kita yg perludiketahui adalah kuncikesuksesan :
</p>1. Mau bekerja keras <br>2. Didisplin <br>3. Bersabar<br>
</BODY></HTML>
Tag HR dan Atributnya- Tag <HR> digunakan untuk membuat garis batas horizontal.- Tag <HR> sekaligus akan membuat baris baru.- Tag ini mempunyai beberapa attribute sebagai berikut :
Atribut FungsiALIGN Merupakan posisi vertical garis pemisah. Nilainya adalah LEFT, RIGHT
Atau CENTER
WIDTH Lebar dari garis batas. Nilai yang dimasukkan dapat berupa pixel ataupunpersen dari lebar jendela browser.
SIZE Menentukan tebal garis batas.
NOSHADE Menonaktifkan efek tiga dimensi.
COLOR Menentukan warna garis batas
HR
<HTML>
<BODY>
Garis Batas Biasa<HR>
Garis di posisi tengah
<HR Align=center width=150>
Garis di posisi kanan
<HR Align=right width=250>
Garis di posisi kiri
<HR Align=left width=250>
Garis tanpa efek 3 dimensi
<HR NOSHADE>
Garis dengan warna tertentu
<HR COLOR=#7433FF>
</BODY>
</HTML>
Memformat Teks
• Logical Formatting Logical format akan menerapkan layout dokumen secara logis
• Physical Formatting Physical format adalah format terhadap fisik suatu font
• Font digunakan untuk menentukan format tampilan font dalam document HTML
• Karakter Khusus menampilkan karakter-karakter khusus
Logical Formatting
<HTML><BODY><CITE>PHP</CITE> uadalah Pemrograman web yang
bersifat server site.<br><br>Perintah pada php untuk mengetahui aktiftidaknya PHP adalah <CODE> phpinfo();</CODE><br><br>Istilah <EM>E-EDUCATION</EM> dikenal sbg program pendidikan dg memanfaatkan internetAplikasi Web server yg biasa digunakan PHP adalah <KBD>Apache Web Server</KBD><br><br> Pada Abjad tedapat 5 huruf vokal, yaitu: <SAMP>AEIUOU</SAMP><br><br>Hal yang terpenting bagi pelajaradalah <Strong>BELAJAR</STRONG><br><br>
<DFN>ILMU</DFN> adalah harta yang paling berharga</BODY>
</HTML>
Physical Formatting
<HTML><BODY><PRE>
<B>Teks ini dicetak Tebal</B> <i>Teks ini dicetak Miring</i><U>Teks ini dicetak dg garis bawah</U><STRIKE>
Teks ini dicetak dg garis di tengah teks</STRIKE><BIG>
Teks ini dicetak dg ukuran lebih besar dari normal</BIG><SMALL>
Teks ini dicetak dg ukuran lebih besar dari normal</SMALL>
Teks ini adalah <SUB>subscript</SUB>Teks ini adalah <SUP>superscript</SUP>
</PRE> </BODY>
</HTML>
FONT
Attribute Description
Color Untuk menentukan warna font, anda bisa menggunakan nama font atauhexadecimal(#000000 - #ffffff)
Size Untuk menentukan ukuran dari font 1 – 7
Face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font danakan di baca mulai dari yang paling kiri.
COLOR
Hexadecimal Color#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
Bentuk standar penulisannya adalah :
<FONT [COLOR=warna]> … </FONT>
FONT
SIZE
Bentuk standar penulisannya adalah :
<FONT [SIZE=ukuran]> … </FONT>
FACE
Bentuk standar penulisannya adalah :
<FONT [FACE=”namafont”]> … </FONT>
Attribut yang digunakan untuk menentukan ukuran dari teks, yang mempunyai standar ukuran font 1-7.
Attribut yang digunakan untuk menentukan jenis font dari teks, Jenis font yang seringdigunakan diantaranya adalah : Times New Roman, Arial, Sans-serif, Courier New, Verdana, Monotype Corsiva.
FONT
<HTML>
<BODY>
<CENTER>
<p>PENGGUNAAN TAG FONT DAN ATTRIBUTNYA</p>
<Font Face="Times New Roman" Size=1 COLOR=#FF0000>
Times New Roman</font><br><br>
<Font Face="Arial" Size=2 >Arial</font><br><br>
<Font Face="Sans-serif" Size=3 >Sans-serif</font><br><br>
<Font Face="Courier New" Size=4 >Courier New</font><br><br>
<Font Face="Verdana" Size=5 >Verdana</font><br><br>
<Font Face="Monotype Corsiva" Size=6 >
Monotype Corsiva</font><br><br>
</CENTER>
</BODY>
</HTML>
Karakter Khusus
Simbol Karakter¢ £ ¥ ¢ £ ¥
© ® © ®
° º
¼ ½ ¾ ¼ ½ ¾
÷ ÷
π П
≤ ≥ < > ≤ ≥ < >
& &
♠ ♣ ♥ ♦ ♠ ♣ ♥ ♦
Karakter Khusus
<HTML><HEAD>
<TITLE>Karakter Khusus</TITLE></HEAD><BODY><PRE>
Air yang dibutuhkan kira - kira 70 °CLuas lingkaran adalah πr<sup>2</sup>
</PRE></BODY>
</HTML>
top related