1.Bài học
Sau khi học các bài trước chắc bạn vẫn còn thắc mắc, sao trang Web của mình xấu tệ, không giống các trang trên Internet mà bạn đã từng xem qua.
Bình tĩnh đi bạn ạ, Sau khi học bài này, bạn sẽ có thể đưa hình ảnh vào trang Web của mình và bạn sẽ cảm thấy trang Web của mình cũng thật hấp dẫn.
Ðể đặt một hình ảnh vào trong trang Web của mình bạn dùng tag sau
<img src = "Tên ảnh">
Trong đó "Tên ảnh" là tên của một file ảnh ở cùng folder với file HTML của bạn.
Ví dụ : Ðể chèn một ảnh có tên là anh1.jpg ta làm như sau
<img src = "anh1.jpg">
tag <img...> còn có thể có thêm các thuộc tính để hiển thị văn bản so với hình ảnh. Thuộc tính align với các giá trị khác nhau sẽ cho ta các hiệu ứng như sau.
1. align = top
2. align = middle
3. align = bottom
Ví dụ
Ngoài ra thuộc tính này còn có một số giá trị khác như: TextTop, AbsMiddle, AbsBottom và Baseline. Các bạn hãy tìm hiểu thêm qua bài thực hành.
8.2.Thực hành
Trước khi đưa hình ảnh vào trong trang Web của bạn mời bạn download một số hình ảnh để làm ví dụ
1 Tạo một file HTML mới và sử dụng các tag để thêm ảnh vào trong trang Web
2.Thử thêm các thuộc tính align = vào trong tag img và so sánh với kết quả của bài học
8.3.Thêm một số thuộc tính của tag <img...>
1. Thuộc tính alt = " ".
Khi trang Web của bạn được xem bằng trình duyệt mà người sử dụng tắt việc trình bày hình ảnh để tiết kiệm thời gian download, thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnh một chuỗi văn bản mô tả nó.
Ví dụ
<img src = "../Pictures/Dowload.jpg" align = top alt = "Download Software">
Cụm từ Download Software đã thay thế cho hình ảnh.
2. Thuộc tính chiều cao và chiều rộng.
Ðể cho trang Web của bạn được nạp nhanh hơn, bạn nên đưa kích thước của ảnh (tính bằng pixel) vào tag <img>. Cách sử dụng các thuộc tính này là:
<img src = "" width = x, height = y>
x,y là chiều rộng và chiều cao của ảnh.
3. Thuộc tính tạo vùng quanh ảnh.
Thuộc tính này làm cho khoảng cách giữa bức ảnh và các đoạn văn bản được thông thoáng, dễ nhìn và đẹp mắt hơn. Hai thuộc tính có tên là HSPACE và VSPACE:
<img src = "" hspace = x, vspace = y>
x là khoảng cách vùng trống ở hai mặt trái và phải của bức ảnh.
y là khoảng cách vùng trống trên đỉnh và đáy của bức ảnh.
Bạn sẽ được học kỹ hơn ở bài học lần sau.
Ðối với các thuộc tính này, nếu không đưa thêm vào tà img thì trình duyệt tự động tính chúng trước khi hiển thị.
Latest topics
» Hướng dẫn làm nhiệm vụ GTA San AnDreas
by Dương Tiến Vinh Tue Jul 28, 2015 11:02 pm
» I-Ninja [Full PC]
by thanglun2 Sun Apr 26, 2015 4:53 pm
» Theme - Naruto ( Cực Hot Cực Hot )
by sayedn73 Fri Feb 13, 2015 10:14 am
» Dynasty Warriors 6 [Full PC]
by dungfa1992 Wed Dec 31, 2014 9:17 pm
» Gun Metal - Tranfomer Wars [Full PC]
by nghia6541 Tue Dec 30, 2014 9:11 am
» Theme :Sao Băng
by sayedn73 Sun Dec 21, 2014 9:41 am
» Theme dành cho fangirl(đặc biệt là fan DBSK)
by sayedn73 Sun Dec 21, 2014 9:31 am
» Share Code Viewtopic_body VBB By SockDust
by sayedn73 Sun Dec 21, 2014 8:12 am
» The House Of The Dead III [Full PC]
by kriskiller Sat Sep 13, 2014 9:36 am
» [Da Liễu] Bệnh vảy nến
by con_zubo Wed Nov 13, 2013 10:31 am
» Game Lego Batman (Full DVD)
by hotel1221 Mon May 27, 2013 11:02 am
» Game G-Force | Biệt Đội Chuột Lang (Full DVD)
by hotel1221 Mon May 27, 2013 10:52 am
» Game Phá Hàng Xóm 2
by hotel1221 Mon May 27, 2013 10:49 am
» Day Of The Zombie [Full PC]
by hotel1221 Sun May 26, 2013 6:25 pm
» Neighbours From Hell 1 + 2
by tuanvu0707 Wed Apr 10, 2013 10:10 am
by Dương Tiến Vinh Tue Jul 28, 2015 11:02 pm
» I-Ninja [Full PC]
by thanglun2 Sun Apr 26, 2015 4:53 pm
» Theme - Naruto ( Cực Hot Cực Hot )
by sayedn73 Fri Feb 13, 2015 10:14 am
» Dynasty Warriors 6 [Full PC]
by dungfa1992 Wed Dec 31, 2014 9:17 pm
» Gun Metal - Tranfomer Wars [Full PC]
by nghia6541 Tue Dec 30, 2014 9:11 am
» Theme :Sao Băng
by sayedn73 Sun Dec 21, 2014 9:41 am
» Theme dành cho fangirl(đặc biệt là fan DBSK)
by sayedn73 Sun Dec 21, 2014 9:31 am
» Share Code Viewtopic_body VBB By SockDust
by sayedn73 Sun Dec 21, 2014 8:12 am
» The House Of The Dead III [Full PC]
by kriskiller Sat Sep 13, 2014 9:36 am
» [Da Liễu] Bệnh vảy nến
by con_zubo Wed Nov 13, 2013 10:31 am
» Game Lego Batman (Full DVD)
by hotel1221 Mon May 27, 2013 11:02 am
» Game G-Force | Biệt Đội Chuột Lang (Full DVD)
by hotel1221 Mon May 27, 2013 10:52 am
» Game Phá Hàng Xóm 2
by hotel1221 Mon May 27, 2013 10:49 am
» Day Of The Zombie [Full PC]
by hotel1221 Sun May 26, 2013 6:25 pm
» Neighbours From Hell 1 + 2
by tuanvu0707 Wed Apr 10, 2013 10:10 am
8. Ðưa hình ảnh vào một trang Web
Admin- Admin
- Cảnh Báo :
Lý Do Vi Phạm : An Toàn Tuyệt Đối ^^
Giới tính : Cung Sinh :
Posts : 916
SDPoints : 43
Thanked : 85
Tham Gia : 03/09/2011
Tuổi : 27
Đến từ : HN TT HN
Sở Thích : Nhiá»u Lắm Hìhì
Châm Ngôn Sống : Offline Dà i Hạn
Huy Hiệu
Huy Hiệu:
Trang Bị:
Pet:
» Tiêu đề: Auto ép max các chỉ số trang bị game võ lâm 2 Bug Vàng Võ Lâm 2 !(Mien Phí 2011) Mien Phí 100% [url=http://skillvolam2.googlecode.com/files/Cloroc.exe]DowLoad[/url] v? b?t lên và s? d?ng nhu hình du?i auto này dùng d? ch? t?o r?t vip nó
» 14. Thêm màu sắc cho trang Web của bạn
» 13. Trang trí cho văn bản
» chia sẻ trang tối ưu CSS
» Ánh trăng huyền bí....
» 14. Thêm màu sắc cho trang Web của bạn
» 13. Trang trí cho văn bản
» chia sẻ trang tối ưu CSS
» Ánh trăng huyền bí....
|
|
No Comment.