html (2)

HTML (2)HTML (2)Pemrograman WebPemrograman Web

Andy Haryoko, ST

<HTML><HEAD><TITLE>Latihan HTML</TITLE></HEAD><BODY>Selamat Belajar HTML Semoga Sukses !</BODY></HTML>

<HTML><HEAD><TITLE>Contoh Pengaturan Judul</TITLE></HEAD><BODY><H1 ALIGN = CENTER> Pesona Tanaman Hias </H1>Keindahan tanaman hias membawa suatu pesona tersendiri Warna-warni bunga</BODY></HTML>

<HTML><HEAD><TITLE>Atribut NOSHADE pada Tag HR</TITLE></HEAD><BODY><H1>KEBUN PESONA</H1><HR SIZE = "10">Jl. Solo Km 14 Surabaya Indonesia </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 Arial: 012345ABCD Courier: 012345ABCD </BODY></HTML>

LIST HTML (1)LIST HTML (1)

List merupakan bentuk yang umum yang List merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar biasa digunakan untuk menguraikan daftar sesuatu.sesuatu.

Jenis-jenis list dalam HTMLJenis-jenis list dalam HTML

1.1.Unordered List (Bulleted List)Unordered List (Bulleted List)

2.2.Ordered List (Numbering List)Ordered List (Numbering List)

List HTML (2)List HTML (2)

1.1. Unordered List (Bulleted List) Unordered List (Bulleted List) Adalah suatu daftar yang tidak Adalah suatu daftar yang tidak memperhatikan urusan dari item-item memperhatikan urusan dari item-item pada daftar tsb. Untuk membuat Belleted pada daftar tsb. Untuk membuat Belleted List kita gunakan tag <UL>…</UL> dan List kita gunakan tag <UL>…</UL> dan tag <LI> yang menyatakan daftar item.tag <LI> yang menyatakan daftar item.

List HTML (3)List HTML (3)

2. Ordered List (Numbering List)2. Ordered List (Numbering List)

Adalah suatu daftar yang diawali dengan Adalah suatu daftar yang diawali dengan nomor yang berurutan. Untuk membuat nomor yang berurutan. Untuk membuat Numbered List gunakanlah tag Numbered List gunakanlah tag <OL>…</OL> dan tag <LI> yang <OL>…</OL> dan tag <LI> yang menyatakan daftar item.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 <LI>Teknik Industri </UL></BODY></HTML>

<HTML><HEAD><TITLE>Tag OL dengan TYPE</TITLE></HEAD><BODY>Dengan huruf kapital:<OL TYPE = "A"><LI>Yogya <LI>Solo </OL><HR>Dengan angka romawi:<OL TYPE = "i"><LI>Yogya <LI>Magelang </OL></BODY></HTML>

Menyisipkan GambarMenyisipkan Gambar

• format gambar yang digunakan dalam halaman web format gambar yang digunakan dalam halaman web yaitu : .GIF, .JPEG, dan .PNG yaitu : .GIF, .JPEG, dan .PNG

• Cara untuk menyisipkan gambar yaitu dengan menggunakan tag Cara untuk menyisipkan gambar yaitu dengan menggunakan tag <IMG SRC=”nama_file_gambar”> <IMG SRC=”nama_file_gambar”>

• Tag <IMG> memiliki beberapa atribut diantaranya sbb:Tag <IMG> memiliki beberapa atribut diantaranya sbb:• ALT memberikan alternative teks atau keterangan pada gambar.ALT memberikan alternative teks atau keterangan pada gambar.• HEIGHT mengatur tinggi gambarHEIGHT mengatur tinggi gambar• WEIGHT mengatur lebar gambarWEIGHT mengatur lebar gambar• ALIGN meletakkan gambar pada posisi tertentuALIGN meletakkan gambar pada posisi tertentu• HSPACE mengatur jarak kosong horisontal antara gambar dengan HSPACE mengatur jarak kosong horisontal antara gambar dengan

objek di sekitarnyaobjek di sekitarnya• VSPACE mengatur jarak kosong vertikal antara gambar dengan VSPACE mengatur jarak kosong vertikal antara gambar dengan

objek di sekitarnya 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>sebuah gambar<IMG SRC="Images1.jpeg" WIDTH="50" HEIGTH="25" ALIGN="bottom">Ikan mujairSebuah gambar<IMG SRC="Images3.jpeg" WIDTH="50" HEIGTH="25" ALIGN="middle">ikan lele Sebuah gambar<IMG SRC="Images5.jpeg" WIDTH="50" HEIGTH="25" ALIGN="top">ikan nemo</BODY></HTML>

<HTML> <HEAD><TITLE>Menampilkan Posisi Gambar left dan right</TITLE> </HEAD><BODY> <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. <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 </BODY> </HTML>

<HTML><HEAD> <TITLE>Jarak teks dengan gambar</TITLE> </HEAD><BODY> <IMG SRC="FISH.JPEG" WIDTH="50" HEIGHT="25" ALIGN="left" VSPACE="25" HSPACE="25">Ikan merupakan salah satu sumber protein hewani yang sangat baik untukkesehatan.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 lautdiantaranya 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. </BODY> </HTML>

HYPERLINK (1)HYPERLINK (1)

• Tag yang digunakan untuk membuat link adalah Tag yang digunakan untuk membuat link adalah <a>…</a>.<a>…</a>.

• Pada browser sebuah link dinyatakan dalam bentuk teks Pada browser sebuah link dinyatakan dalam bentuk teks yang ada garis bawahnya. Secara default link akan yang ada garis bawahnya. Secara default link akan berwarna biru dan setelah diklik warnanya berubah berwarna biru dan setelah diklik warnanya berubah menjadi ungu. menjadi ungu.

• <a href=“namafile.html”>Tulisan yang akan tampil di <a href=“namafile.html”>Tulisan yang akan tampil di layar</a>layar</a>

html (2)

Documents