/* */
MEDIA PENDIDIKAN dan PEMBELAJARAN Ilmu Mantiq (Logika): Kaidah Berfikir yang Memelihara Akal, agar tidak terjadi Kerancuan dalam Berfikir.

Tuesday, September 20, 2011

Font, Warna Dokumen, Link, List, Unordered List, MENAMPILKAN GAMBAR

2. Font

Untuk mengatur jenis, ukuran, warna suatu font, kita bisa menggunakan tag <FONT>, tag <FONT> ini memiliki beberap atribut diantaranya FACE dan COLOR. Atribut FACE digunakan untuk menentukan jenis font yang akan kita gunakan, semisal kita akan menggunakan jenis font Comic Sans MS, maka kita dapat menuliskan <FONT FACE=”Comic Sans MS”>. Sedangkan COLOR berfungsi untuk menentukan warna font, bisa dengan cara menyebutkan nama warna seperti red, green dan blue atau menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk blue. Ada juga atribut SIZE untuk menentukan ukuran fon.

<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT FACE=”Comic Sans MS” COLOR=”blue” SIZE=2>
Jenis Font Comic Sans,  warna biru dan ukurannya 2
</FONT><BR>
<FONT FACE=”Monotype Corsiva” COLOR=”green” SIZE=4>
Jenis Font Monotype Corsiva, warna hijau dan ukurannya 4
</FONT>
</BODY>
</HTML>

2.1. Warna Dokumen
                Suatu dokumen web akan terlihat lebih menarik jika diberi warna-warna atau gambar sebagai backgroundnya. HTML menyediakan atribut-atribut untuk mengatur hal tersebut, atribut tersebut diletakkan pada tag <BODY> sehingga efeknya akan dapat dilihat di seluruh dokumen. Atribut yang digunakan dalam tag <BODY> yaitu :

Atribut
Fungsi
BGCOLOR
Menentukan warna background suatu halaman web
BACKGROUND
Menentukan gambar/images yang akan dipasang sebagai background halaman web
TEXT
Menentukan warna teks normal
LINK
Menentukan warna teks yang berfungsi sebagai link
ALINK
Menentukan warna teks link ketika diklik
VLINK
Menentukan warna teks link ketika selesai diklik
 2.2. Link
Link berfungsi menghubungkan antara satu halaman dengan halaman lainnya. HTML menyediakan tag <A> (Anchor). Tag <A> memiliki beberapa atribut mis : HREF untuk menghubungkan antara satu halaman dengan halaman lainnya, dan NAME untuk memberikan nama pada suatu paragraf/tulisan dalam dokumen HTML, sehingga mempermudah navigasi dalam suatu halaman web.
<HTML>
<HEAD>
<TITLE> Link</TITLE>
</HEAD>
<BODY>
<A NAME=”top”>Bagian ini ditandai dengan top</A>
<A HREF=”lat1.html”>Link ke lat1.html</A>
<A HREF=”#top”>Link ke tempat yang ditandai</A>
</BODY>
</HTML>

2.3. List
List adalah sebuah daftar, misalnya saja kita membuat daftar barang inventaris sbb :
  • Meja
  • Kursi
  • Komputer
HTML menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi menjadi :
  • Ordered List
  • Unordered List
  • Directory List
  • Menu List
  • Definition List
List yang paling sering dipakai adalah Ordered List dan Unordered List, untuk Directory List, Menu List dan Definition List jarang sekali dipakai.
Ordered List
                Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list diawali dengan tag <OL> dan setiap item dalam list selalu diawali dengan <LI>. List yang memakai tag <OL> ini tidak harus 1,2,3,dst tetapi bisa saja a,b,c,dst, i,ii,iii,dst, tergantung pada atribut TYPE yang dituliskan dalam tag <OL>.
                Tipe penomoran yang dimiliki oleh tag <OL> yaitu :
  • 1 -> 1,2,3,…
  • A -> A,B,C,…
  • A -> a,b,c,…
  • I -> I,II,III,…
  • I -> i,ii,iii,…

2.4. Unordered List

                Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Unordered list diawali dengan tag <UL>. Sama seperti dalam Ordered list, pada Unordered list setiap item dalam list selalu diawali dengan <LI> dan juga memiliki beberapa type, yaitu :
  • TYPE = circle -> Tanda lingkaran
  • TYPE = disk -> Tanda cakram
  • TYPE = square -> Tanda kotak
<HTML>
<HEAD>
<TITLE>Penggunaan List</TITLE>
<HEAD>
<BODY>
Ordered List
<OL TYPE=a>
<LI>Apel
<LI>Pelem
<LI>Semangka
</OL>
Unordered List
<UL TYPE=square>
<LI>Apel
<LI> Pelem
<LI>Semangka
</UL>
Ordered List mulai 10
<OL TYPE=1 START=10>
<LI>Sepuluh
<LI>Sebelas
<LI>Duabelas
</OL>
</BODY>
</HTML>

2.5. MENAMPILKAN GAMBAR

HTML menyediakan fasilitas untuk menampilkan gambar di halaman web kita menggunakan tag <IMG>.
Tag <IMG> memiliki bermacam atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan ditampilkan, ALT sebagai teks pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek disekitar gambar secara horiontal maupun vertikal.
<HTML>
<HEAD>
<TITLE>Penggunaan IMG</TITLE>
</HEAD>
<BODY>
<IMG SRC="mobil1.jpeg" ALIGN=LEFT HSPACE=20 VSPACE=1>
<A HREF="http://www.ardipy.blogspot.com"> ardipy.blogspot.com </A>
Ini blog milik saya.<BR>
Anda dapat menemukan Apa yang anda butuhkan. <BR>
</BODY>
</HTML>



HTML(Hypertext Markup Language)

1.      HTML(Hypertext Markup Language)
            Hypertext Markup Language (HTML) adalah bahasa standar dalam menulis halaman web, HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML sebenarnya adalah dokumen dalam bentuk ASCII atau teks biasa yang dapat diterjemahkan oleh browser web menjadi suatu halaman yang menarik.

1.2 STRUKTUR DOKUMEN HTML
            Sesuai dengan namanya yaitu Hypertext Markup Language (HTML) maka dokumen HTML terdiri dari tanda-tanda (markup) untuk menandai perintah-perintahnya (yang selanjutnya akan kita sebut sebagai tag).
            Tag HTML biasanya adalah tag-tag yang berpasangan dan ditandai dengan simbol < dan >, sedangkan ‘pasangan’ atau akhir perintah dari sebuah tag ditandai dengan tanda ‘/’, misalnya pasangan dari tag <tag> adalah </tag>.
Setiap dokumen HTML memiliki struktur sebagai berikut  :
<HTML>
<HEAD>
<TITLE>Judul yang muncul pada title bar web</TITLE>
</HEAD>
<BODY>
Text, gambar atau isi dokumen HTML anda
</BODY>
</HTML>
untuk lebih jelasnya, anda buka editor NOTEPAD ketikkan baris perintah HTML diatas dan simpan dengan nama lat1.html , kemudian panggil melalui browser web anda.

Gambar 1. Tampilan Latihan 1

1.3. Heading
            Tag yang pertama kali akan kita pelajari adalah tag heading, yang berfungsi untuk memformat Heading (Judul/sub judul) dalam sebuah dokumen. Ada 7 buah heading yang dikenal dalam HTML yaitu <H1> sampai <H7>. Untuk mengetahui ukuran tiap heading, anda dapat mencoba baris-baris berikut :
<HTML>
<HEAD>
<TITLE>Latihan Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H6>Heading 6</H6>
<H7>Heading 7</H7>
</BODY>
</HTML>
 1.4. Paragraf
            Untuk memformat paragraf kita bisa menggunakan tag <P>. Dengan tag ini kita bisa menentukan alignment (posisi) dari dokumen HTML. Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan.
            Selain tag <P> ada pula tag <BR> untuk pindah baris, <HR> untuk membuat garis, <BLOCKQUOTE> untuk membuat kutipan, <PRE> untuk menampilkan text sama dengan yang anda ketikkan dalam dokumen HTML, misal anda mengetikkan:
<HTML>
<HEAD>
<TITLE>TITLE BAR GOOGLE</TITLE>
<HEAD>
<BODY>
GOOGLE
        GOOGLE
GOOGLE
</BODY>
</HTML>
Maka yang akan ditampilkan oleh browser adalah
Hal itu terjadi karena HTML tidak mengenali tombol Enter sehingga tombol tersebut diabaikan. Untuk mengatasi hal tersebut maka kita menggunakan tag <PRE> tersebut.
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan  Paragraf</TITLE>
</HEAD>
<P ALIGN=”right”>
Tulisan ini rata kanan.
<P ALIGN=”center”>
Tulisan ini akan berada di tengah dokumen
<P ALIGN=”left”>
Tulisan ini rata kiri
<P align=”left”>
Hallo,<BR>Apakah anda sudah faham HTML<BR>
Kalau sudah faham, coba latihan berikutnya<BR>
<PRE>
            <--------->
            | X     X  |
            |     X      |
            |   ---       |
            <--------->
</PRE>
</BODY>
</HTML>
Output program diatas :