Praktikum Web Development kedua ini membahas seputar Image dan Link. Besok saya coba untuk konfirmasi ke dosennya apakah materi yang aku terima boleh diunggah dan dibagikan. Semoga saja bisa, sehingga aku gak perlu repot ngetik i satu persatu :D.
Image merupakan bahasa inggris dari Gambar, di sini kita akan belajar bagaimana caranya memasukkan gambar ke dalam sebuah web. Sedangkan link merupakan sebuah pintu yang menghubungkan antar halaman web.
- Image / Gambar dalam sebuah website paling sering menggunakan 3 macam format, yaitu gambar dengan format *.PNG, *.JPG dan .*GIF. Ketiganya memiliki kelebihan dan kegunaan masing-masing.
- PNG memiliki kelebihan Dapat menampilkan gambar transparan dan memiliki ketajaman warna yang cukup hebat. Biasanya digunakan untuk gambar grafik dan sebagainya, namun ukuran filenya cukup besar.
- JPG memiliki biasanya digunakan untuk foto karena foto memiliki banyak sekali warna, jika disimpan dengan format PNG akan memakan banyak memori yang mengakibatkan proses download gambar untuk ditampilkan di browser menjadi lemot.
- GIF biasanya digunakan untuk gambar dengan warna yang sedikit, karena GIF hanya mendukung 8bit warna. Kebanyakan gambar dengan format GIF digunakan untuk gambar animasi dengan beberapa frame.
- Link adalah sebuah penyambung antar halaman yang ada di web. Untuk menambahkan link cukup dengan memasukkan tulisan yang ingin di linkkan dalam tag <a href=””>link</a>
Untuk mengetahui lebih lanjut tentang penggunaannya, saya akan share bagaimana hasil percobaan praktikum yang telah saya lakukan.
<html>
<head>
<title>image inserting</title>
</head>
<body>
<img src="logoITS.jpg">
<p>
politeknik elektronika negeri surabaya
institut teknologi sepuluh nopember surabaya
</p>
</body>
</html>
 |
| Percobaan 1 |
<html>
<head>
<title>Image inserting</title>
</head>
<body>
<img src="logoITS.jpg" align="left">
<p>Politeknik Elektronika Negeri Surabaya<br>
Institut Teknologi Sepuluh Nopember Surabaya
</p>
<img src="logoITS.jpg" align="right">
<p>Politeknik Elektronika Negeri Surabaya<br>
Institut Teknologi Sepuluh Nopember Surabaya
</p>
<img src="logoITS.jpg" align="bottom">
<p>Politeknik Elektronika Negeri Surabaya<br>
Institut Teknologi Sepuluh Nopember Surabaya
</p>
<img src="logoITS.jpg" align="top">
<p>Politeknik Elektronika Negeri Surabaya<br>
Institut Teknologi Sepuluh Nopember Surabaya
</p>
<img src="logoITS.jpg" align="center">
<p>Politeknik Elektronika Negeri Surabaya<br>
Institut Teknologi Sepuluh Nopember Surabaya
</p>
</body>
</html>
 |
| Percobaan 2 |
<html>
<head>
<title>Image Height dan Width </title>
</head>
<body>
<h3>Gambar dengan pengaturan height dan width</h3>
<p>ukuran<img src="logoITS.jpg">asli berukuran 185 x 100 pixel</p>
<p>ukuran citra <img src="logoITS.jpg" height=100 width="100" align="right">
setelah digunakan atribut height=100 dan weight=100 </p>
<p>Ukuran citra <img src="logoITS.jpg" height="150" width="150" align="left"/>
digunakan atribut height=150 dan width= 150</p>
<p>ukuran citra <img src="logoITS.jpg" height="100" width="100" />
setelah digunakan atribut height= 50 dan weight = 50
</p>
</body
</html>
 |
| percobaan 3 |
<html>
<head>
<title>tag alt on image</title>
</head>
<body>
<h3>Logo ITS</h3>
<p><img src="logoITS.jpg" alt="logo ITS surabaya juga digunakan di PENS"/>
letakkan penunjuk mouse diatas citra ini dan tunggu beberapa saat,
maka akan ditampilkan keterangan dari citra ini.
tunggulah beberapa saat lagi sehingga keterangan akan hilang dengan sendirinya
</p>
</body>
</html>
 |
| percobaan 4 |
<html>
<head>
<title>Belajar link</title>
</head>>
<body>
<small>Minggu, 25/09/2011 07.37 WIB</small><br>
<h4>Google + hampir raih 50 juta user</h4><br>
<p><img width="70" vspace="10" hspace="20" height="70" align="left" alt="Gb" src="logoITS.jpg"/>
setelah dibuka untuk umum, situs jejaring Google+ telah meraup hampir 50 juta pengguna.
Indonesia menjadi salah satu negara penyumbang user terbesar.
</p>
<p>Google+ dibuka pada 20 September lalu dengan menghadirkan banyak
fitur baru seperti "Hangouts on Air" dan pengintegrasian dengan Google Docs
</p>
<p>Menurut Internet entrepreneur, Paul Allen, ang telah mengalkulasi pertumbuhan
Google+ melalui penghitugnan nama keluarga, Google+ mencapai pertumbuhan 30% hanya
2 hari setelah ia dibuka</p>
<br>
</body>
</html>
 |
| percobaan 5 |
<html>
<body>
<p>Image dari folder lain</p>
<img src="images/chrome.gif" alt="Google Chrome" width="33" height="32" />
<p>Image dari website PENS:</p>
<img src="http://eepis-its.edu/images/logo.png" alt="PENS-ITS" width="413" height="67">
</body>
</html>
 |
| percoabaan 6 |
Nama file: Judul.html
<html>
<head>
<title>Belajar Link</title>
</head>
<body>
<small> Minggu, 25/09/2011 07:37 WIB</small><br>
<h4><a href="berita.html">Perubahan Situs Facebook Tidak Disukai</a></h4>
<p>Bagaimana reaksi pengguna Facebook terhadap perubahan situs
jejaring tersebut yang baru saja diumumkan? Ternyata, sebagian besar
Facebooker mengaku tidak menyukai perubahan itu.
</p>
<br>
</body>
</html>
Nama file: berita.html
<html>
<head>
<title>Belajar Link</title>
</head>
<body>
<small>Minggu, 25/09/2011 07.37 WIB</small>
<br>
<h4><a href="berita.html">Perubahan Situs Facebook Tidak Disukai</a></h4>
<p><img src="fb.jpg" hspace="10" vspace="10" align="left" />Bagaimana reaksi
pengguna Facebook terhadap perubahan situs
jejaring tersebut yang baru saja diumumkan? Ternyata, sebagain besar
Facebooker mengaku tidak menyukai perubahan itu
<br><br>
Hasil ini diketahui melalui survey yang dilakukan oleh Sodahead,
sebuah situs berbasis voting online. Mereka menemukan bahwa 86% dari
pengguna Facebook mengaku sangat tidak menyukai perubahan yang
diumumkan Mark Zuckerberg dalam gelaran konferensi f8.
<br><br>
Dari mereka yang tidak setuju, kalangan remaja dan wanita-lah yang
paling kentara menunjukkan ketidaksukaan mereka. Sedang dari kalangan
dewasa dan pria mereka mengaku tidak menyukai fitur-fitur baru yang dirilis Facebook.
<br><br>
Dikutip<strong>detikINET</strong> dari YahooNews, Sabtu (24/09/2011),
satu-satunya grup yang mendukung perubahan yang dilakukan Facebook hanyalah
dari kalangan pekerja IT.
<br><br>
Diketahui juga bahwa orang-orang yang memiliki pendapatan di atas USD 100.000
serta mereka yang berstatus mahasiswa juga dijumpai tidak terlalu mempersoalkan
perubahan Facebook dibandingkan user lainnya
<br><br>
Diberitakan, semenjak pengumuman perubahannya, Facebook menuai banyak
komentar negatif di blog resmi mereka.
<br>
</p>
<br>
</body>
</html>
 |
| percobaan 7 |
<html>
<head>
<title>Belajar Absolut Link</title>
</head>
<body>
<small>Minggu, 25/09/2011 07.37 WIB</small><br>
<h4><a href="http://youtube.com">YouTube tampilkan video 3D</a></h4>
<p>YouTube saat ini tengah menjajal fitur baru yang bisa mengubah video
yang diunggah ke situsnya ke dalam format tiga dimensi (3D), hanya
dengen mengklik sebuah tombol saja.
</p>
<br>
</body>
</html>
 |
| percobaan 8 |
<html>
<body>
<p>membuat link dari sebuah gambar:
<a href="berita.html">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</p>
<p>Tidak ada garis disekitar gambar, akan tetapi tetap sebgai sebuah link:
<a href="judul.html">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a>
</p>
</body>
</html>
 |
| percobaan 9 |
<html>
<body>
<p>
<a href="#C4">Lihat Bab 4.</a>
</p>
<h2>Bab 1</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 2</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 3</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2><a name="C4">Bab 4</a></h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 5</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 6</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 7</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 8</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 9</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
<h2>Bab 10</h2>
<p>Bab ini menerangkan tentang bla... bla... bla... </p>
</body>
</html>
 |
| percobaan 11 |
<html>
<body>
<p>
ini adalah email link:
<a href="mailto:ndundupan@yahoo.com">
kirim email</a>
</p>
</body>
</html>
 |
| percobaan 11 |
Mungkin itu saja dulu yang saya share saat ini, badan sudah terlalu lelah berhadapan dengan komputer, semoga beberapa contoh penggunaan link dan image diatas bisa dimengerti. Jangan lupa kunjungi blogku yang satunya di panduaji[dot]net
Leave a Comment