Cùng học tạo Blogspot: CÁCH CHÈN 10 ẢNH VÀO TRANG WEB HTML NGÀY 12.11.2013

Saturday, February 8, 2014

CÁCH CHÈN 10 ẢNH VÀO TRANG WEB HTML NGÀY 12.11.2013

2.CÁCH CHÈN 10 ẢNH VÀO TRANG WEB HTML

NGÀY 12.11.2013

Download SourceWeb: http://utbinhdesign.com/html/bai2.rar

Út Bỉnh cố gắng viết ngắn gọn, đầy đủ, dễ hiểu, dễ thực hành. Bảo đảm không có bài giống trên Mạng, bài viết súc tích, hấp dẫn như bài viết này dành riêng cho những người A,B,C yêu thích thiết kế web HTMLTrình bày rõ ràng, mạch lạc, hấp dẫn, đẹp, mỹ thuật cao.

Khi nhấp trình duyệt sẽ hiện ra 5 ảnh trên và 5 ảnh dưới. Chiều rộng trình duyệt là 1024 pixels. Mỗi ảnh có kích cở 200 pixel rộng – cao 150 pixels.

1.Tìm ảnh: Vào trình duyệt > Bấm nút hình ảnh > Nhập: ảnh phong cảnh đẹp. Xuất hiện cả ngàn ảnh cho bạn chọn. Bấm lên một ảnh > Xuất hiện trang khác > Bấm nút Xem hình ảnh > Xuất hiện ảnh lớn, bấm phải lên ảnh > Save Images As > Tạo một folder tại Desktop tên: images > Lưu ảnh trong folder này với file name: 1 > Save. Tiếp tục tìm chọn 9 ảnh còn lại, thực hiện giống các bước đã hướng dẫn trên.

2.Tạo đồng kích cở 200 X 150 px và lưu dung lượng nhỏ trong Photoshop:

Mở Photoshop > Mở 10 ảnh trong thư mục anh > Chọn công cụ Crop > Tùy chọn Width 200 – Height 150 px và Resolution 300 px > Rê lên ảnh cắt kích cở đã qui định > Enter. Lưu Ctrl+Shift+Alt+S > Chọn JPEG và Low > Enter > Enter > Replace. Bạn đã có ảnh: 1.jpg với dung lượng tối thiểu 3,27 KB. Bạn thực hiện các bước bàu cho 9 ảnh còn lại

3.Tạo file index.html: Tạo Folder tên SourceWeb, lưu thư mục images vào đây. Bấm lên thư mục SourceWeb > Bấm phải lên > Chọn New > Bấm Text Document > Nhập: index.html. Bạn đã tạo xong file index.html trong thư mục SourceWeb.

4.Tạo file index.txt đồng cấp với index.html: Bấm phải lên index.html < Open with > NotePad > Xuất hiện CS index.html notepad. Nhập Code vào đây. Lưu ý: Code của ảnh 1.jpg là

<img src="images/1.jpg"/> do ảnh 1.jpg nằm trong folder images.

<html>

<head>

<title></title>

<body>

<img src="images/1.jpg"/>

</body>

</head>

</html>

5.Lưu file index .html: File > Save As > Bỏ tên index.html hiện có và File name nhập: index.html > Save as Type chọn All Files > Encoding chọn UTF=8 > Save.

6.Luu file index.txt: File > Save As > File name nhập: index.txt > Save as Type chọn All Files > Encoding chọn UTF-8 > Save. Mục đích tạo file này để thiết kế tiếp tục.

7.Xem kết quả: Bấm phải lên index.html > Bấm Open with > Chọn Firefox. Bạn đã thấy ảnh 1.jpg hiện ra.

8.Chèn 10 ảnh vào trang web html: Vì các ảnh bạn đã tạo tên có số thứ tự liền kề do đó bạn copy và dán Code của từng ảnh vào sau đó sửa lại số thứ tự. Trong đoạn code này có bổ sung:

<center>: Ở giữa.

Bgcolor=”#9096f5”/>: Màu xanh sạm.

<html>

<head>

<title></title>

<body bgcolor="#9196f5"/>

<center>

<img src="images/1.jpg"/>

<img src="images/2.jpg"/>

<img src="images/3.jpg"/>

<img src="images/41.jpg"/>

<img src="images/5.jpg"/>

<img src="images/6.jpg"/>

<img src="images/7.jpg"/>

<img src="images/8.jpg"/>

<img src="images/9.jpg"/>

<img src="images/10.jpg"/>

</center>

</body>

</head>

Thủ Thuật: Khi mở trình duyệt không ra kết quả mong nuốn, sau khi dò lại code đều đúng cả, bạn tạo một file index1.html và mở lại. Kết quả sẽ như ý muốn và bạn nhớ Rename lại thành index.htm