Friday, August 19, 2011

Html part 4

Mari masuk ke dalam meletakkan gambar ke dalam halaman web. Kita akan menggunakan yang satu ini. Klik kanan untuk menyimpannya dari halaman ini. Simpan sebagai chef.gif ke direktori yang sama Anda sebelumnya disimpan page1.html.
chef.gif
Anda menetapkan gambar dengan tag <img> ...
 <body>
 <img>
 </ Body>
Kita juga harus menentukan sumber dan ukuran.
 <body>
 <img width="130" height="101" src="chef.gif">
 </ Body>
FAQ: Bagaimana cara mengetahui lebar dan tinggi dari suatu gambar?
A: Yah, ada beberapa cara yang berbeda. Salah satu cara adalah untuk memuat dalam penampil grafis. Penampil (dan gratis) yang luar biasa yang saya gunakan adalah Irfan View .
Lain editor grafis yang sangat populer adalah Paint Shop Pro . Ini adalah waktu yang terbatas shareware tetapi adalah salah satu editor yang baik. Jika Anda goYou'll menemukan ada versi yang lebih tua yang saya sangat merekomendasikan SANGAT untuk awal web designer.
Cara lain adalah dengan menggunakan editor teks atau html bahwa impor ukuran ketika Anda memasukkan gambar. Saya menggunakan NoteTab , dan tag gambar desain saya dibangun bagi saya ketika saya hanya tarik nama file ke file saat ini. Saya dapat menyisipkan gambar di sekitar 6 persepuluh detik :-) Saya bilang NoteTab adalah favorit saya!
Biarkan saya membuat titik bahwa tidak hanya sumber menentukan apa yang gambar, itu juga menentukan mana gambar. Sumber di atas, src = "chef.gif", berarti browser akan mencari gambar yang bernama chef.gif dalam folder yang sama (atau direktori) sebagai dokumen html itu sendiri. Bawah ini adalah diagram beberapa ...
src = "chef.gif" berarti bahwa gambar tersebut dalam folder yang sama sebagai dokumen html yang disebut untuk itu.
src = "images / chef.gif" berarti bahwa gambar satu folder turun dari dokumen html yang disebut untuk itu. Hal ini bisa terus turun sebagai lapisan sebanyak yang diperlukan.
src ="../ chef.gif "berarti bahwa gambar dalam satu folder naik dari dokumen html yang disebut untuk itu.
src chef.gif ="../../ "berarti bahwa gambar adalah dua folder naik dari dokumen html yang disebut untuk itu.
src ="../ gambar / chef.gif "berarti bahwa gambar satu folder dan kemudian folder lain ke dalam direktori gambar.
src ="../../../ lain / gambar / chef.gif "Aku bahkan tidak akan mencoba dan menempatkan ini dalam kata-kata. Saya harap Anda mendapatkan drift.
Ada cara lain bahwa hal ini dapat dilakukan. Semua referensi ke gambar dapat memiliki sebagai sumber URL lengkap. Sebagai contoh:
 http://www.yourdomain.net/LottzaStuff/images/chef.gif
Mengapa, Anda bertanya, tidak masuk akal jauh lebih banyak untuk digunakan relatif (parsial) URL sebagai lawan absolut (lengkap) URL? Karena Anda dapat membangun situs Anda secara lokal dan semua link akan bekerja. Bila halaman Anda selesai, Anda hanya meng-upload seluruh tumpukan ke server Anda dan semuanya akan bekerja dengan baik. Selain itu, lebih mudah bagi browser untuk mendapatkan gambar dan halaman Anda akan memuat lebih cepat.
Apakah pernah ada alasan untuk menggunakan URL absolut? Tentu, jika gambar berada pada server yang sama sekali berbeda.
Lain atribut <img> yang patut disebutkan adalah alt ...
 <img width="130" height="101" src="chef.gif" alt="My Chef">
alt adalah semacam pengganti untuk gambar saat pengguna menggunakan browser yang tidak (karena alasan apapun) menampilkan gambar. Seseorang mungkin menggunakan browser teks saja, dia mungkin loading gambar dimatikan untuk kecepatan atau ia mungkin menggunakan pembaca layar (browser di mana halaman web adalah membaca keras-keras). Dalam kasus tersebut, bahwa atribut alt bisa sangat penting untuk pengunjung Anda.

Sesuatu benar-benar Neato Anda harus tahu tentang gambar dan ukuran mereka.
Coba ini ...
 <body>
 <img src="chef.gif">
 </ Body>
Seperti yang Anda lihat, browser angka keluar seberapa besar gambar dengan sendirinya. Mengapa repot-repot dengan dimensi itu? Karena dengan dimensi, browser hanya dapat memesan ruang untuk gambar, maka beban sisa halaman. Setelah beban seluruh halaman dapat kembali dan mengisi gambar. Tanpa dimensi, ketika berjalan ke dalam gambar, browser harus jeda loading halaman, memuat gambar, kemudian lanjutkan loading halaman. Semua dalam semua, browser fungsi jauh lebih baik dengan dimensi gambar.
Yah Joe, itu semua <yawn> baik dan bagus, tapi apa bagian Neato??
Check this out ...
 <img width="300" height="101" <body> src="chef.gif"> </ body> 
 <body>
 <img src="chef.gif" width="40" height="200">
 </ Body>
Anda dapat menentukan apa dimensi yang Anda inginkan dan mengesampingkan dimensi yang tepat. Masih berkabut di bagian Neato?
Nah, lihat ini titik merah kecil -> red dot Ini persegi 1x1. Lihatlah apa yang dapat saya lakukan dengan itu meskipun ...
 <body>
 <p align="center"> <img src="red_dot.gif" width="500" height="1">
 <p align="center"> <img src="red_dot.gif" width="500" height="2">
 <p align="center"> <img src="red_dot.gif" width="500" height="8">
 <p align="center"> <img src="red_dot.gif" width="2" height="200">
 </ Body>
Cukup bagus ya?

No comments:

Post a Comment

Iklan