Hari ini adalah refleksi hari kemarin .... "if you fill your heart with regrets of yesterday and the worries of tomorrow, you will have no day to be thankful for"

Rabu, 20 April 2011

Belajar Membuat Album 1

lanjutan dari postingan sebelumnya. sekarang kita membuat sebuah halaman dengan nama gambar1.htm supaya link halaman nya jalan.
<html>
<body bgcolor="black">
<h2 align="center">
<a href="album.htm">album</a>
<p><font size="4" color ="yellow" face="Purisa"><blink>uin suska</blink></font></p><br>
<img src="jan11.jpg" width="300" height="300"><br><br>
<a href="gambar4.htm">previous</a>
<a href="gambar2.htm">next</a></h2>
</body>
</html>

lakukan hal yang sama untuk membuat halaman gambar2.htm, gambar3.htm,gambar4.htm dan gambar5.htm tapi untuk perhatikan kembali untuk link previous dan next (sesuaikan)

contoh hasil ketika kita klik gambar1 pada halaman album.htm
selamat mencoba ...... !

Belajar Membuat Album

pada latihan ini kita akan membuat album foto, yang dimana nanti ketika kita klik pada foto akan nge-link ke halaman baru (gambar1.htm dan seterusnya) dengan catatan halaman tersebut telah kita buat sebelumnya.

berikut kode html yang harus kita ketikkan :
simpan dengan nama album.htm


<html>
<body bgcolor="sienna">
<p>
<font size="6" color="blue"><blink>ini album foto</blink></font></p><br>
<a href="gambar1.htm"><img src="jan11.jpg" width="200" height="100"></a>
<a href="gambar2.htm.jpg"><img src="25032011958.jpg" width="200" height="100"></a>
<a href="gambar3.htm.jpg"><img src="25032011955.jpg" width="200" height="100"></a>
<a href="gambar4.htm.jpg"><img src="25032011940.jpg" width="200" height="100"></a><br>
</body>
</html>

hasil :

Latihan List

tag dalam list terbagi dua, yaitu unordered list dengan ordered list,
unordered list hanya menandai tanpa mengurutkan, sedangkan ordered list menandai dengan urutan yg teratur.
unordered list digunakan dengan menggunakan tag <UL> sedangkan ordered list digunakan dengan menggunakan tag <OL> dan untuk mengisi keduanya kita menggunakan tag <LI>.
Dalam tag ordered list dan unordered list memiliki atribut yang sama, yaitu type. Guna type adalah untuk menentukan tipe list yang kita mau. Untuk Ordered list kita dapat mengisi type dengan a , A , i , I, 1 . Sedangkan untuk unordered list kita dapat mengisinya dengan square, circle, disk.

contoh latihan :
<html>
<body bgcolor="green", background="jan11.jpg">
<p><b>nama mahasiswa sif 6b</b></p>
<ol type="I">
<b>
<li>kurnia</li>
<li>rezky</li>
<ul type="disc">
<li>rezky gunawan</li></ul>
<li>donny</li>
</b>
</ol>
<p> nama mahasiswi sif 6b</p>
<ul type="circle">
<li>defi</li>
<li>aini</li>
<li>widi</li>
</ul>
</body>
</html>


simpan dengan nama tes2.htm

hasil :

Mengatur Heading, Menyisipkan Gambar dan Marquee


<html>
<title>coba</title>
<body>
<h1 align="left">tes heading kiri</h1>
<hr>
<h1 align="center">tes heading tengah</h1>
<hr>
<h1 align="right">tes heading kanan</h1>
<p><a href="HTML 4.01.pdf">klik disini</a>  <----   ini akan menghubungkan ke lembar sebelumnya</p>
<p><marquee direction=right>disini akan disisipkan gambar <img src="25032011955.jpg" width="150" height="100"></marquee>
<p>disini akan disisipkan gambar <marquee direction=right><img src="25032011955.jpg" width="150" height="100"></marquee>
<p>disini akan disisipkan gambar <marquee direction=down><img src="25032011955.jpg" width="150" height="100"></marquee>
</body>
</html>


tag marquee digunakan untuk membuat suatu konten itu bergerak, sedangkan direction adalah atribut untuk menentukan arah nya.

jika hasil gambar dibawah ini tidak jelas, silahkan di coba !
simpan dengan nama tes1.htm


hasil :

Mengubah Font dan Membuat Link

selanjutnya kita akan belajar mengubah font, membuat garis dan membuat link. pada latihan kali ini kita menggunakan tag <font>,<hr>,<a href>
untuk membuat link, kita harus pastikan dulu kita sudah membuat halaman untuk di link kan, dan disini saya telah membuat halaman baru dengan nama tes1.htm

<html>
<title>coba</title>
<body bgcolor="blue", background="jan11.jpg">
 <font size="3", font face="purisa", font color="red">jenis ukuran 3</font>
<br>
<hr>
<font size="5">jenis ukuran 5</font>
<p><a href="tes1.htm"><b>kembali</a></b></p>
</body>
</html>


simpan pada folder praktikum yang telah kita buat tadi dengan nama tes.htm

hasil :

Tag-Tag Dasar html

<HTML>
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML.

<HEAD>
Merupakan tag berikutnya setelah <HTML> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.

<TITLE>
Merupakan tag di dalam <HEAD> yang memberikan judul/informasi pada browser caption.

<BODY>
Merupakan bagian utama dalam dokumen web, dimana semua isi dokumen yang akan ditampilkan di dalam browser ditempatkan di dalam <BODY>

<P>
Paragraf, menyajikan informasi di dalam dokumen HTML sesuai dengan kaidah penulisan,
misalnya satu pikiran utama disimpan dalam satu paragraf. Pada elemen paragraf sebaiknya
disertakan </P> untuk menandakan penutup paragraf, sebelum memulai paragraf baru.

<BR>
Line Break, memaksakan ganti baris pada dokumen HTML, sehingga dapat menyajikan
informasi pada baris sendiri tetapi tidak berganti paragraf.

<H1><H2><H3><H4><H5><H6>
Heading, merupakan tulisan yang itampilkan dengan huruf yang lebih besaar atau
ditebalkan. Heding dimanfaatkan untuk menunjukkan judul topik, atau tingkat keberartian
dari teks yang akan dituliskan. Letak Heading dapat diatur dengan menggunakan atribut ‘align’ dengan nilai ‘left’, ‘center’, atau ‘right’.

<HR>
Menampilkan sebuah garis lurus mendatar, yang digunakan sebagai pemisah antar bagian
atau paragraf.

<!-- komentar -->
Catatan atau komentar tidak ditampilkan dalam browser.

Pemrograman Web dengan H T M L

PERTEMUAN 1 INTRODUCTION

Apa itu File HTML?

HTML (Hyper Text Markup Language) adalah file teks yang dapat dibuat dengan editor teks sederhana, mengandung tag-tag markup, yang digunakan untuk menentukan bagaimana web browser menampilkan file (halaman web) tersebut. File HTML memiliki ekstensi “.htm” atau “.html”.
Langkah-langkah menuliskan file HTML:
1. Sebelumnya buatlah folder di drive C dengan nama “Praktikum” (jika belum ada).
2. Jalankan aplikasi Notepad (untuk sistem operasi Windows). Anda dapat menggunakan web editor lainnya seperti FrontPage, Adobe PageMill, atau Macromedia DreamWeaver.
3. Tuliskan teks berikut:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

4. Simpan file dengan nama "lat1.htm" pada folder D:\Semester 6\Pemrograman Web\Praktikum.
5. Jalankan Internet browser. Pilih "Open" (atau "Open Page") pada menu File di browser. Pilih "Browse" (atau "Choose File") dan tentukan lokasi file HTML - "lat1.htm" – pilih dan klik "Open". Klik OK, dan browser akan menampilkan halaman tersebut, dengan alamat D:\Semester 6\Pemrograman Web\Praktikum\lat1.htm.

hasil :