Dengan update oleh staf editorial)Cara Tambah Gambar Untuk Halaman Web Anda!Sekarang Anda tahu cukup untuk menulis sangat bagus, halaman rumah berbasis teks, tetapi kemampuan Web untuk memberikan gambar, secara teknis disebut gambar, grafik, atau kadang-kadang ikon, yang telah membuatnya menjadi begitu populer. Dalam Primer ini, Anda akan belajar bagaimana menempatkan gambar pada halaman Anda dan juga bagaimana mengubah sebuah gambar menjadi link ke halaman lain.Menempatkan Sebuah Gambar Pada Halaman AndaPerintah untuk menempatkan gambar konstan. Anda akan menggunakan format yang sama setiap kali. Sekarang mungkin saat yang tepat untuk berbicara tentang di mana untuk menyimpan segala sesuatu pada server web Anda karena Anda mulai memanggil materi tambahan untuk mengisi halaman rumah Anda. Sampai saat ini, semua yang Anda lakukan adalah menempatkan teks pada halaman. Sekarang Anda akan menempatkan gambar.Pada titik ini dalam karir HTML Anda, itu ide yang baik bagi Anda untuk menempatkan gambar apa pun yang Anda akan menggunakan di dalam subdirektori bernama "gambar". Itu berarti menempatkan gambar dalam sebuah direktori (disebut "gambar") di bawah direktori di mana halaman web Anda berada (yang akan menjadi "akar" direktori untuk situs Anda). Ada lebih pada datang di Primer # 7.Berikut format untuk menempatkan gambar:<IMG SRC = "image.gif" ALT = "beberapa teks" WIDTH = 32 HEIGHT = 32>Dengan mengganti "image.gif" dengan "homepage.gif", salah satu dari grafis saya sendiri, Anda mendapatkan ini ...
Berikut adalah Apa yang Terjadi: Image Elemen Parameter
IMG singkatan dari "gambar." Ini mengumumkan pada browser gambar akan pergi di sini pada halaman. Ya, gambar akan muncul tepat di mana Anda menulis dalam tag gambar.
SRC singkatan dari "sumber." Ini lagi adalah atribut, perintah dalam perintah. Ini memberitahu browser mana harus pergi untuk menemukan gambar. Sekali lagi, yang terbaik bagi Anda untuk menempatkan gambar yang ingin Anda gunakan di dalam subdirektori bernama "gambar". Dengan cara ini Anda dapat meminta gambar dengan nama hanya dengan nama subdirektori di depannya, seperti ini: /images/imagename.gif. Anda juga bisa mengarahkan sumber ke tempat lain secara online, seperti gambar yang telah disimpan di Photobucket, misalnya, dengan menggunakan URL penuh gambar, seperti http://www.photobucket.com/youraccount/imagename. jpg. Sekarang, mari kita mendapatkannya bekerja.
image.gif adalah nama dari gambar. Perhatikan itu mengikuti jenis yang sama format sebagai dokumen HTML Anda. Ada nama (image) maka titik dan kemudian ada akhiran (gif).
ALT singkatan dari "teks alternatif". Ini memberitahu browser bahwa jika tidak dapat menemukan gambar, kemudian hanya menampilkan teks ini. Ia juga memberitahu siapa pun yang tidak dapat melihat gambar Anda apa gambar tentang. Misalnya seorang pengguna penyandang cacat yang menggunakan screen reader, atau berani saya menyebutkan itu, Search Engine. Ketika Anda mengarahkan mouse di atas gambar, teks alternatif muncul.
"Beberapa teks" adalah di mana Anda meletakkan teks yang menjelaskan gambar Anda.
LEBAR singkatan hanya itu, lebar gambar dalam piksel. Hal ini dapat berkisar dari 1 pixel, baik, hampir setiap nomor, tetapi umumnya akan kurang dari lebar browser web.
TINGGI singkatan, seperti yang Anda duga, ketinggian gambar dalam piksel. Sekali lagi, tingginya bisa apa saja, tetapi umumnya akan kurang dari ketinggian browser web.Format Gambar untuk WebAda empat format dasar yang Anda akan menemukan di Web. Masing-masing dilambangkan ke browser dengan akhiran yang berbeda. Ingat bahwa "name.suffix" diskusi dari Primer # 1?
Gif ini diucapkan "jif" atau "gif" (keras "G") tergantung pada siapa Anda berbicara. Saya selalu mengatakan "jif", seperti selai kacang. Ini adalah singkatan dari Graphics Interchange Format.
Format ini diciptakan oleh Compuserve dan itu sangat populer. Alasannya adalah bahwa itu adalah format yang sederhana. Ini adalah serangkaian elemen berwarna gambar, atau titik, yang dikenal sebagai piksel, yang berbaris untuk membuat gambar. Gambar televisi Anda dibuat dengan cara yang sama. Browser dapat menangani format ini cukup mudah.
.png Diucapkan sebagai 'ping', ini adalah singkatan dari Portable Network Graphic. Hal ini pada akhirnya pengganti gif, dengan pilihan transparansi parsial, namun dukungan browser samar - beberapa browser masih tidak ingin menampilkan png file.
jpeg atau .jpg (diucapkan "j-peg") Ada dua nama untuk menunjukkan format ini karena PC dan format MAC memungkinkan 3 dan 4 huruf setelah titik. JPEG adalah singkatan dari Joint Photographic Experts Group, organisasi yang menemukan format. Formatnya adalah unik karena menggunakan kompresi setelah itu dibuat. Itu bicara komputer mewah yang berarti bahwa ketika komputer tidak menggunakan gambar .jpeg lipatan itu dan menempatkan itu pergi. Sebagai contoh, jika gambar adalah 10K byte ketika ditampilkan, mungkin hanya 4K byte bila disimpan. Nice trik, huh? Ini menghemat ruang hard drive, tetapi juga cenderung memerlukan sedikit memori pada bagian Anda terungkap gambar.
Seseorang selalu menulis kepada saya untuk memberitahu saya bahwa gambar gif juga menggunakan kompresi. Ya, mereka lakukan, tetapi hanya ketika mereka pertama kali diciptakan dalam format tersebut. Setelah itu, tidak ada kompresi. JPEG, di sisi lain, menggunakan kompresi sepanjang hidupnya melipat kecil daripada yang sebenarnya.
bmp (diucapkan "BIMP") Ini adalah "bitmap." Anda mungkin tidak akan pernah menempatkan bitmap sebagai gambar, meskipun beberapa browser mengizinkan itu. Sebuah bitmap adalah gambar yang memproduksi komputer dan tempat-tempat untuk Anda. Sebuah counter adalah contoh. Meskipun beberapa browers, seperti Internet Explorer, akan memungkinkan Anda untuk menempatkan BMP sebagai gambar, saya tidak mau. Kebanyakan browser tidak akan mampu menampilkannya. Pergilah dengan .gif, .jpg atau .png.
Mana Saya Dapatkan Free Images Untuk Halaman Saya?Mereka benar-benar di mana-mana. Ada banyak situs di luar sana yang menawarkan ton gambar bebas. Plus, karena Anda sudah berselancar, Anda telah melihat ratusan gambar sudah. Jika Anda melihat sesuatu di halaman seseorang yang benar-benar Anda sukai, meminta untuk menggunakannya. Jangan hanya mengambil. Itu tidak benar dan bisa melawan hukum hak cipta. Bertanya. Anda mungkin akan mendapatkan gambar. Dalam waktu singkat Anda akan memiliki membunuh untuk digunakan pada halaman Anda. Satu tempat yang bagus untuk memulai adalah FreeDigitalPhotos.net kita sendiri, yang memiliki ratusan ribu gambar untuk digunakan pada halaman web Anda.Mengaktifkan Sebuah Gambar: Mengubah Citra menjadi linkOke, ini mendapat sedikit mewah. Dalam Primer # 4, saya menunjukkan cara untuk membuat link hypertext. Apa itu adalah membuat kata-kata biru pada halaman Anda sehingga seseorang bisa klik pada mereka dan kemudian melompat ke situs lain. Nah, di sini kita akan mengaturnya sehingga gambar menjadi diklik atau "aktif." Penampil akan klik pada gambar, bukan kata-kata hyperlink, untuk membuat link hypertext. Aku akan membuat link ke halaman rumah saya menggunakan gambar di atas. Berikut format:
<A HREF="http://www.htmlgoodies.com"> <IMG SRC = "homepage.gif" ALT = "Home"> </A>Lihatlah lagi. Lihat apa yang terjadi? Aku meletakkan tag gambar di mana saya biasanya memiliki kata-kata yang ditempatkan. Namun, dalam kasus gambar tidak terlihat untuk alasan apapun saya telah menambahkan beberapa teks alternatif yang menyatakan di mana link pergi.Berikut adalah apa yang Anda dapatkan dengan format tersebut. Lay pointer Anda pada gambar, tapi jangan klik. Anda akan melihat seluruh gambar aktif:
RumahRapi, ya? Tapi apa dengan perbatasan baru di sekitar gambar? Itulah yang terjadi ketika Anda mengaktifkan gambar. Ia mencoba untuk berubah menjadi biru, atau warna apa pun halaman diatur ke, seperti kata-kata itu diganti, sehingga menempatkan apa yang dikenal sebagai "perbatasan" di sekitar gambar. Beberapa orang seperti itu. Aku tidak, dan saya tahu bagaimana untuk menyingkirkan itu.Untuk membuat perbatasan hilang, kita perlu sedikit kecil inline CSS (Cascading Style Sheets). Ini digunakan untuk dilakukan dengan menggunakan atribut Perbatasan, tapi itu sayangnya tidak lagi bersama kita ...Berikut format:
<IMG STYLE = "border: none;" SRC = "homepage.gif" ALT = "Home">Lihat apa yang saya lakukan? Saya menambahkan beberapa CSS yang dilambangkan bahwa tidak boleh ada perbatasan. Anda dapat pergi ke arah lain juga jika Anda ingin. Buatlah "border: 55px menyala biru;" kalau kamu mau. Itu hanya akan membuat perbatasan besar. Perhatikan bahwa CSS adalah dalam tanda kutip.Berikut adalah apa yang Anda dapatkan dengan menggunakan CSS:
RumahSekali lagi, berbaring pointer Anda pada gambar tanpa mengklik. Anda akan melihat bahwa itu adalah aktif, tetapi tidak membawa bahwa perbatasan biru menjengkelkan.Dan itu membawa ini ke dekat. Pelajaran berikutnya akan menangani hampir secara eksklusif dengan atribut yang akan Anda gunakan untuk memanipulasi gambar Anda. Anda akan benar-benar mengesankan teman-teman Anda dengan yang satu ini.
sumber dari : http://www.htmlgoodies.com/primers/html/article.php/3478181
Tidak ada komentar:
Posting Komentar