HTML (2) Pemrograman Web Andy Haryoko, ST
<HTML> <HEAD> <TITLE>Latihan HTML</TITLE> </HEAD> <!-- Ini merupakan suatu komentar --> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML>
<HTML> <HEAD> <TITLE>Contoh Pengaturan Judul</TITLE> </HEAD> <BODY> <H1 ALIGN = CENTER><font color = red> Pesona Tanaman Hias </font></H1> <P> Keindahan tanaman hias<BR> membawa suatu pesona tersendiri<BR> Warna-warni bunga </P> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Atribut NOSHADE pada Tag HR</TITLE> </HEAD> <BODY> <H1>KEBUN PESONA</H1> <HR SIZE = "10"> Jl. Solo Km 14<BR> Surabaya <BR> Indonesia<BR> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Praformat </TITLE> </HEAD> <BODY> <H2>Daftar Harga Keladi:</H2> <Pre> Red Flash.........35.000 Red Fire..........60.000 Fannie Munson.....60.000 </Pre> Harga sewaktu-waktu bisa berubah. </BODY> </HTML>
<HTML> <HEAD> <TITLE>Jenis Font</TITLE> </HEAD> <BODY> Normal: 012345ABCD<BR> <FONT COLOR="blue" FACE = "Arial"> Arial: 012345ABCD</FONT> <BR> <FONT COLOR="green" FACE = "Courier" SIZE="5"> Courier: 012345ABCD</FONT> <BR> </BODY> </HTML>
LIST HTML (1) List merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar sesuatu. Jenis-jenis list dalam HTML • Unordered List (Bulleted List) • Ordered List (Numbering List)
List HTML (2) • Unordered List (Bulleted List) Adalah suatu daftar yang tidak memperhatikan urusan dari item-item pada daftar tsb. Untuk membuat Belleted List kita gunakan tag <UL>…</UL> dan tag <LI> yang menyatakan daftar item.
List HTML (3) 2. Ordered List (Numbering List) Adalah suatu daftar yang diawali dengan nomor yang berurutan. Untuk membuat Numbered List gunakanlah tag <OL>…</OL> dan tag <LI> yang menyatakan daftar item.
<HTML> <HEAD> <TITLE>Contoh Pemakaian Tag UL dan LI</TITLE> </HEAD> <BODY> <H2>Daftar Jurusan di Fakultas Teknik Unirow :</H2> <UL> <LI>Teknik Perangkat Lunak<BR> <LI>Teknik Industri <BR> </UL> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Tag OL dengan TYPE</TITLE> </HEAD> <BODY> <B>Dengan huruf kapital:</B> <OL TYPE = "A"> <LI>Yogya<BR> <LI>Solo<BR> </OL> <HR> <B>Dengan angka romawi:</B> <OL TYPE = "i"> <LI>Yogya<BR> <LI>Magelang<BR> </OL> </BODY> </HTML>
Menyisipkan Gambar • format gambar yang digunakan dalam halaman web yaitu : .GIF, .JPEG, dan .PNG • Cara untuk menyisipkan gambar yaitu dengan menggunakan tag <IMG SRC=”nama_file_gambar”> • Tag <IMG> memiliki beberapa atribut diantaranya sbb: • ALT memberikan alternative teks atau keterangan pada gambar. • HEIGHT mengatur tinggi gambar • WEIGHT mengatur lebar gambar • ALIGN meletakkan gambar pada posisi tertentu • HSPACE mengatur jarak kosong horisontal antara gambar dengan objek di sekitarnya • VSPACE mengatur jarak kosong vertikal antara gambar dengan objek di sekitarnya
<HTML> <HEAD> <TITLE>Menampilkan Gambar </TITLE> </HEAD> <BODY> <IMG SRC="FISH.GIF"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Menampilkan Gambar Yang Sudah Diedit </TITLE> </HEAD> <BODY> <IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Menampilkan Posisi Gambar/TITLE> </HEAD> <BODY> <P>sebuah gambar <IMG SRC="Images1.jpeg" WIDTH="50" HEIGTH="25" ALIGN="bottom"> Ikan mujair <P>Sebuah gambar <IMG SRC="Images3.jpeg" WIDTH="50" HEIGTH="25" ALIGN="middle"> ikan lele <P> Sebuah gambar <IMG SRC="Images5.jpeg" WIDTH="50" HEIGTH="25" ALIGN="top"> ikan nemo </P> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Menampilkan Posisi Gambar left dan right</TITLE> </HEAD> <BODY> <P> <IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="left"> Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk kesehatan. Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat berguna bagi kesehatan . <BR><BR><BR><BR><BR><BR> <P> <IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="right"> Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk kesehatan. Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat berguna bagi kesehatan </P> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Jarak teks dengan gambar</TITLE> </HEAD> <BODY> <P> <IMG SRC="FISH.JPEG" WIDTH="50" HEIGHT="25" ALIGN="left" VSPACE="25" HSPACE="25"> Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk kesehatan. Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat berguna bagi kesehatan. Ada ikan yang hidupnya di air tawar, seperti ikan mas, gurame, dll. Banyak pula ikan yang hidup di air laut diantaranya ikan tuna, tongkol, cumi, dan lain-lain. Namun ada pula ikan yang hidup di air payau, contohnya adalah bandeng. Cara pengolahan ikan supaya baunya tidak anyir adalah dengan memberikan perasan jeruk nipis sebelum ikan di simpan di dalam lemari pendingin. </P> </BODY> </HTML>
HYPERLINK (1) • Tag yang digunakan untuk membuat link adalah <a>…</a>. • Pada browser sebuah link dinyatakan dalam bentuk teks yang ada garis bawahnya. Secara default link akan berwarna biru dan setelah diklik warnanya berubah menjadi ungu. • <a href=“namafile.html”>Tulisan yang akan tampil di layar</a>
