Học Làm Web

Tự học thiết kế trang web từng bước từng bước một – bài 12

Cho đến bây giờ, bạn đã học qua những bước căn bản nhất để có một trang web hoàn thiện, tuy còn sù sì thô ráp nhưng đã có thể làm được một trang web để upload lên mạng để khoe cùng thiên hạ được rồi. Nhưng chúng ta cũng cần hoàn thiện thêm tí xíu để đưa lên chứ không thì những nỗ lực nửa vời của chúng ta nhận được nhiều lời chê bai hơn là khen tặng. Vì vậy, bài này chúng tôi sẽ cung cấp thêm một số “chiêu” nữa để trang web bạn trông chuyên nghiệp và hoành tráng hơn trước khi xuất bản nó lên mạng Internet.

Bây giờ trang web của ta phải có tiếng Việt có dấu cho đàng hoàng. Bạn cần tham khảo bài này để rõ, và tiếng Việt cho trang web bạn bắt buộc phải dùng tiếng Việt Unicode nhé. Nếu bạn vẫn dùng Notepad để thiết kế trang web của bạn, bạn cần lưu ý khi Save để tiếng Việt Unicode giữ nguyên mà không thành giun dế. Xem ảnh dưới:

simplehtmlzn8.gif
simplehtmlzn8.gif (10.62 KiB) Đã xem 1559 lần.

Lưu ý rất quan trọng: ta luôn đề cập đến Unicode nhưng khi Save file thì ta phải chọn là UTF-8 chứkhông chọn Unicode.

notpad-utf-8.png
Nhớ chỉnh sang UTF-8 trước khi save file
notpad-utf-8.png (20.97 KiB) Đã xem 1559 lần.

Vì Notepad mặc định save file với đuôi là .txt bạn cần phải đặt tên trang web có đuôi là .html trong cặp dấu ngoặc kép thì Windows mới hiểu bạn muốn tạo một file HTML để làm web.

Lời khuyên là bạn nên dùng NotePad++ để tạo file HTML thì sẽ tốt hơn nhiều so với Notepad có sẵn của Windows vì NotePad++ hỗ trợ Unicode rất tốt và đổi màu mã HTML cho dễ nhìn, làm cho bạn dễ chỉnh sửa code hơn. Tải về NotePad++ tại đây: http://sourceforge.net/project/showfile … _id=102072

notepadppqq0.gif
notepadppqq0.gif (16.02 KiB) Đã xem 1559 lần.

Nhớ chỉnh NotePad++ như hình trên để khi save file thì nó lưu định dạng Unicode bạn nhé. Bạn có thể vào menu Settings => Preferences => New Document/Default Directorry => chọn UTF-8 without BOM để NotePad Plus Plus hiểu rằng luôn luôn save file ở dạng mã Unicode về sau.

Giờ thì bạn nên soạn một file HTML “ngon lành” như sau (nhớ là tiếng Việt có dấu nghiêm chỉnh nhé) để có thể tiếp tục bài này.

MÃ: CHỌN TẤT CẢ
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Trang web đầu tay của tui</title>
</head>
<body style="color:white; background-color:#213C7B">
<h3>14 điều răn của đức Phật</h3>
<ol>
<li>Kẻ thù lớn nhất của đời người là chính mình</li>
<li>Yếu đuối lớn nhất của đời người là dối trá</li>
<li>Thất bại lớn nhất của đời người là tự đại</li>
<li>Bi ai lớn nhất của đời người là ghen tị</li>
<li>Sai lầm lớn nhất của đời người là đánh mất mình</li>
<li>Tội lỗi lớn nhất của đời người là bất hiếu</li>
<li>Đáng thương lớn nhất của đời người là tự ti</li>
<li>Đáng khâm phục lớn nhất của đời người là vươn lên sau khi ngã</li>
<li>Phá sản lớn nhất của đời người là tuyệt vọng</li>
<li>Tài sản lớn nhất của đời người là sức khỏe và trí tuệ</li>
<li>Món nợ lớn nhất của đời người là tình cảm</li>
<li>Lễ vật lớn nhất của đời người là khoan dung</li>
<li>Khiếm khuyết lớn nhất của đời người là thiếu hiểu biết</li>
<li>An ủi lớn nhất của đời người là bố thí</li>
</ol>
</body>
</html>

Khi soạn trong NotePad++ bạn sẽ thấy rằng mã trông thứ tự, đẹp và đổi màu dễ quan sát, chỉnh sửa hơn.

bestcodehb7.gif
bestcodehb7.gif (12.99 KiB) Đã xem 1559 lần.

Mã HTML trong trình soạn thảo NotePad++

Khi save và xem kết quả với trình duyệt như sau:

14-dieu-ran.png

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: