Chương 1: Quy trình thiết kế website
I. Các khái niệm cơ bản
1. HTML (Hypertext Markup Language) – Ngôn ngữ đánh dấu siêu văn bản
HTML là ngôn ngữ đánh dấu được sử dụng để tạo nên các trang Web, nó chứa các trang văn bản và những thẻ (tag) định dạng cho trình duyệt Web (web browser) biết làm thế nào để thể hiện các thông tin trên World Wide Web (WWW). HTML giờ đây trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất của HTML là 4.01. Tuy nhiên, hiện nay HTML không còn được phát triển tiếp, nó được thay thế bằng XHTML.
2. Ngôn ngữ lập trình Web
Ngôn ngữ lập trình Web là ngôn ngữ lập trình (khác với ngôn ngữ HTML – ngôn ngữ đánh dấu siêu văn bản) được sử dụng để hỗ trợ và tăng cường các khả năng của ứng dụng Web, giúp cho việc điều khiển các phần tử của trang Web dễ dàng hơn.
Một số ngôn ngữ lập trình Web thường được dùng là: ASP, ASP.Net, PHP, JSP…
3. WebServer – Trình chủ Web
WebServer là máy tính mà trên đó cài đặt các phần mềm phục vụ Web, và khi có phần mềm đó cũng được xem như một WebServer.
Tất cả các WebServer đều có thể biên dịch và chạy các file *.html và *.htm, tuy nhiên các WebServer lại phục vụ một số kiểu file riêng biệt, ví dụ như IIS của Microsoft dành riêng cho các file *.asp, *.aspx; Apache dành cho các file *.PHP; Sun Java System Web Server của SUN dành riêng cho các file *.jsp.
4. Database server – Trình chủ CSDL
Database server là máy tính mà trên đó có cài đặt một hệ quản trị CSDL (HQTCSDL) nào đó, ví dụ như SQL Server, MySQL, Oracle…
5. Web browser – Trình duyệt Web
Trình duyệt Web là ứng dụng trên máy tính của người dùng, cho phép người dùng cập nhật và xem thông tin trên các trang Web. Các trình duyệt Web thông dụng hiện nay là: Internet Explorer, Netscape, FireFox, Opera, Safari…
6. URL (Uniform Resource Locator) – Tài nguyên trên Internet
URL là tài nguyên trên Internet. Sức mạnh của Web là khả năng tạo ra các liên kết siêu văn bản đến các thông tin có liên quan. Những thông tin này có thể là những trang web khác, hình ảnh, âm thanh…
Những liên kết này thường được biểu diễn bằng những chữ màu xanh có gạch dưới.
Các URL có thể truy xuất thông qua một trình duyệt (browser).
Ví dụ 1.1: Một URL có dạng
http://www.hutc.edu.vn/index.html
Trong đó:
- http: là giao thức
- http://www.hutc.edu.vn/: là địa chỉ của máy chứa tài nguyên
- index.html: là tên đường dẫn trên máy chứa tài nguyên
Nhờ địa chỉ URL mà chúng ta có thể truy cập tới các trang web khác nhau.
7. HTTP (Hypertext Transfer Protocol) – Giao thức truyền siêu văn bản
HTTP là một trong các giao thức chuẩn về mạng Internet, được dùng để trao đổi thông tin giữa WebServer và WebClient thông qua mạng máy tính.
HTTP được sử dụng thông qua URL với cấu trúc:
http://<host>[:<port>][<path>[?query]]
8. Cơ chế Web
Cơ chế Web là cơ chế tương tác giữa người dùng thông qua trình duyệt Web và WebServer.
Cơ chế tương tác từ người dùng với WebServer:
Người dùng gửi yêu cầu đến WebServer qua Web Browser và nhận phản hồi cũng qua Web Browser.
Quy trình làm việc của PHP và MySQL thông qua WebServer:
- Người dùng gửi yêu cầu
- WebServer nhận yêu cầu và truyền tới PHP Engine
- PHP Engine kết nối tới CSDL MySQL, thực thi câu lệnh truy vấn
- MySQL nhận yêu cầu, truy vấn dữ liệu và trả kết quả về cho PHP Engine
- PHP Engine nhận kết quả và trả về WebServer với định dạng HTML
- WebServer truyền nội dung cho Web Browser và người dùng sẽ thấy thông tin
II. Quy trình thiết kế Website
1. Xác định mục đích, yêu cầu của website
Để xây dựng một website chất lượng và hiệu quả, cần xác định: website dùng để làm gì, độc giả là ai, họ quan tâm điều gì.
Mục tiêu: “Đưa cho độc giả cái họ muốn xem, không phải cái ta muốn họ xem.”
Việc xây dựng website là một quá trình lâu dài, cần kế hoạch rõ ràng và phải bám sát mục đích, yêu cầu đã đặt ra.
2. Xác định độc giả
Sự thành công của website phụ thuộc vào số lượng người truy cập.
Độc giả có thể là người chuyên nghiệp, không am hiểu nhiều về Web…
Tùy nhóm độc giả chính mà lựa chọn phong cách (màu sắc, phông chữ, hình ảnh, văn phong).
3. Thiết kế giao diện Website
a. Xác định kiểu chữ, màu sắc
Phụ thuộc vào người dùng, trình duyệt, độ phân giải, ngôn ngữ.
Màu sắc cần thống nhất trên toàn bộ website.
Trình bày phải giúp độc giả biết họ đang ở đâu và có thể làm gì.
b. Xác định các kỹ thuật, công cụ thiết kế
Phụ thuộc vào:
– Môi trường hosting
– Đội ngũ thiết kế
– Chi phí thiết kế
– Băng thông
c. Cắt đoạn, tóm lược thông tin
Thông tin cần được chia nhỏ và tóm lược vì người dùng ít thời gian. Tuy nhiên không nên tóm quá ngắn.
Thông tin cần logic, nhất quán, tránh chia cắt quá mức.
d. Xác định cấu trúc Website
Hệ thống phân cấp: tổ chức các khối thông tin phức hợp, thông dụng nhất.
Hệ thống các trang nối tiếp: thích hợp cho website nhỏ.
Ô lưới: phù hợp người có kiến thức sẵn.
Mạng nhện: sử dụng hyperlink mạnh nhưng khó hiểu, phù hợp website nhỏ và độc giả chuyên sâu.
4. Các thành phần cơ bản của Website
a. Trang chủ (HomePage)
Là điểm xuất phát đến các trang khác, là thứ người dùng thấy đầu tiên, quyết định sự thành công của website.
b. Hệ thống Menu, Logo, định danh
Menu phải rõ ràng, logo nhất quán và cố định vị trí.
c. Các trang thành viên
Xây dựng theo cấu trúc website, nhất quán và phù hợp định dạng trước đó.
III. Một số nguyên tắc khi phát triển website
1. Tổ chức website chặt chẽ và dễ sử dụng
Cấu trúc phải rõ ràng, dễ tìm thông tin.
Trang chủ nên đơn giản nếu nội dung nhiều.
2. Sử dụng từ ngữ dễ hiểu
Từ ngữ rõ ràng giúp người dùng hiểu sản phẩm/dịch vụ.
Dùng câu ngắn gọn, cô đọng và giữ thiết kế nhất quán.
3. Dễ dàng khám phá các đường link
Tạo liên kết ở tất cả trang để người dùng không cần dùng Back/Forward.
Có chữ thay thế cho các hình ảnh.
4. Thời gian tải nhanh
Không phải ai cũng có đường truyền nhanh.
Không nên để trang tải quá lâu.
Hạn chế ảnh lớn, dùng 72dpi – 256 màu.
Quy định kích cỡ ảnh trong HTML.
Giảm số lượng file cần tải trong mỗi trang.
5. Nội dung không có hình ảnh
Không lạm dụng hình ảnh, GIF, JavaScript.
Nội dung là quan trọng nhất, cần dễ đọc.
Chỉ dùng hiệu ứng phù hợp đối tượng độc giả.
6. Dễ theo dõi “quá trình bán hàng”
Cần rõ ràng về lợi ích, cách đặt hàng, uy tín, hướng dẫn các bước cụ thể.
7. Tương thích với nhiều trình duyệt
Kiểm tra giao diện trên các trình duyệt và độ phân giải khác nhau.
8. Một số vấn đề quan trọng khác
Kiểm tra lỗi chính tả.
Kiểm tra toàn bộ website trước khi chạy thật.
Không nên để lộ ý định bán hàng ngay lập tức.
Chấp nhận giao dịch trực tuyến nếu có.
Nếu trang lớn hơn 50K nên thông báo để khách đợi.
Chương 2: Giới thiệu về ngôn ngữ HTML
I. Khái niệm cơ bản về HTML
1. HTML là gì?
HTML (HyperText Markup Language), do Tim Berners-Lee phát minh, được W3C chuẩn hóa năm 1994. Là ngôn ngữ đánh dấu để tạo các trang Web.
2. Thẻ HTML
HTML sử dụng các thẻ (tags).
Thẻ không phân biệt hoa/thường.
Có 2 loại thẻ:
– Thẻ mở: <tên_thẻ>
– Thẻ đóng: </tên_thẻ>
Có thẻ không cần thẻ đóng (ví dụ: <img>).
3. Cần gì để tạo trang Web
Có thể soạn thảo HTML bằng bất kỳ trình soạn thảo nào: Notepad, EditPlus, Notepad++, Dreamweaver…
Trang HTML có phần mở rộng *.htm hoặc *.html.
II. Các thẻ định cấu trúc tài liệu
1. Thẻ html
Xác định một tài liệu HTML.
Cú pháp:
<html>
... nội dung ...
</html>
2. Thẻ head
Dùng cho phần mở đầu:
<head>
... khai báo ...
</head>
3. Thẻ title
Đặt trong thẻ head:
<title>Tiêu đề trang web</title>
4. Thẻ body
Chứa nội dung chính.
Có các thuộc tính: background, bgcolor, text, alink, vlink, link.
Ví dụ cấu trúc đầy đủ:
<html>
<head>
<title>tiêu đề của tài liệu</title>
</head>
<body>
... nội dung ...
</body>
</html>
III. Các thẻ định dạng khối
1. Thẻ <p>
Định dạng đoạn văn:
<p> Nội dung đoạn văn bản </p>
2. Các thẻ đề mục h1–h6
6 mức đề mục từ h1 đến h6.
3. Thẻ xuống dòng <br>
Chuyển sang dòng mới.
Ví dụ:
Tên đăng nhập: </br> Mật khẩu:
4. Thẻ pre và div
Giữ nguyên định dạng gốc của văn bản:
<pre> Văn bản định dạng </pre>
<div> Văn bản định dạng </div>
IV. Các thẻ định dạng danh sách
1. Danh sách không sắp xếp <ul>
Ví dụ:
<ul>
<li> Mục thứ nhất
<li> Mục thứ hai
</ul>
2. Danh sách có sắp xếp <ol>
Cú pháp:
<ol type =1/a/A/i/I>
<li> Mục thứ nhất
<li> Mục thứ hai
<li> Mục thứ ba
</ol>