Bài giảng Thiết kế và lập trình Web 2 - Tổng quan về Web và thiết kế Web

Lập trình và Thiết kếWeb 2 © 2007 Khoa Công nghệ thông tin Khoa CNTT – ĐH.KHTN Bài 1 TỔNG QUAN VỀWEB VÀ THIẾT KẾWEB Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Internet - Mạng các máy tính Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web - Mạng thông tin Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web là gì? ƒ Là các dịch vụ phân tán cung cấp thông tin multimedia dựa trên hypertext – Phân tán: thông tin được đặt trên nhiều máy chủ khắp thế giới – multimedia: thông tin bao gồm text, graphics, sound, video – hypertext: là kỹ thuật được sử dụng để truy cập thông tin ƒ Có khoảng hơn 30 tỉ trang web thuộc hơn 108 triệu website (2-2007 - Netcraft's survey) Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các thành phần của web ƒ Webpage – Là trang web. Có thể hiển thị các thông tin dưới dạng văn bản, hình ảnh, âm thanh, ... – Homepage : Trang chủ. Thường là trang đầu tiên (mặc định) khi truy cập một website. ƒ Website – Tập hợp các trang web. Website của các tổ chức hay cá nhân trên mạng bao gồm tập hợp các trang web liên quan đến tổ chức này. ƒ Uniform Resource Locator (URL) – Địa chỉ của web trên internet ƒ Web Browser – Ứng dụng để truy cập đến trang web qua URL Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Trang chủWebsite Yahoo Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web hoạt động như thế nào? Users (clients) Browse Internet (WWW) WWW Servers Authors write HTML  resources (HTML files) Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web – Các khái niệm chính ƒ Web = Protocol + Language + Naming infrastructure ƒ HTTP - HyperText Transport Protocol – Là giao thức giao tiếp giữa WWW client and server ƒ HTML - HyperText Markup Language – Ngôn ngữ biểu diễn các tài liệu WWW ƒ URL - Uniform Resource Locator – Địa chỉ web (xác định duy nhất) Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web - Các khái niệm chính ƒ Địa chỉ IP – IP Address – tracecrt www.yahoo.com – Là 1 con số 32 bit, chia thành 4 số 8 bit, vd: 203.162.33.44 (gồm 2 phần: network address, host address) – Xác định đối tượng nhận và gởi thông tin trên Internet – Để biết IP: ping www.intel.com Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web - Các khái niệm chính ƒ Tên miền – Domain name – Là tên giao dịch của công ty hay tổ chức trên Internet. – Ví dụ: www.intel.com : • Là địa chỉ của 1 máy chủ thuộc tổ chức (công ty) INTEL • Có địa chỉ IP là 128.241.220.72, có tên máy chủ là WWW • Là tên miền cấp 1 (.com, org, .edu,. biz, .net,) ƒ Ánh xạ giữa tên miền và địa chỉ IP – Do DNS server – Domain name system (service) đảm trách Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN protocol server name port directory/file name on the server Web – các khái niệm chính URL – định vị các tài nguyên Internet ƒ URL là định danh duy nhất cho các tài nguyên Internet ƒ Chỉ ra: – Cách truy cập – Vị trí tài nguyên ƒ Cú pháp chung: protocol://host_name[:port_num][/path][/file_name] Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Web – Các khái niệm chính Browser ƒ Lấy hiển thị (nếu có thể) các tài nguyên khác nhau ƒ Khả năng hiển thị : – text-only (Lynx, ...) – graphic (MSIE, Netscape, ...) ƒ Hiển thị được nhiều loại ảnh – TEXT, GIF, JPEG, sound, video, postscript,... ƒ Hỗ trợ nhiều giao thức – HTTP, FTP, SMTP, POP, ... ƒ Có thể “plug-in” các công cụ vào browser để tăng tính năng (3D animation, SWF, ...) Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các giao tác chuẩn trên Web Browser DNS server URL Web Server IIS 1. DNS lookup 2. TCP connection 3. HTTP request 4. HTTP response optional parallel connections Origin Server Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Xác định mục đích – yêu cầu của Website ƒ Mục tiêu, yêu cầu cơ bản của WebSite ƒ Đối tượng phục vụ ƒ Chủ đề của WebSite Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Mục tiêu, yêu cầu cơ bản ƒ Đề ra mục tiêu khái quát, ngắn gọn, rõ ràng của Website cần thiết kế ƒ Là công cụ để đánh giá sự thành bại của một Website ƒ Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Đối tượng phục vụ ƒ Xác định loại đọc giả chính của Website ƒ Tìm hiểu về: – Sự hiểu biết – Trình độ – Sở thích – Kinh nghiệm duyệt Web … Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Đối tượng phục vụ (tt) Thiết kế tốt = thích hợp cho một dải rộng các loại đọc giả có trình độ và nhu cầu khách nhau Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website ƒ Giúp định hướng cho nhà thiết kế – Giáo dục – Huấn luyện (online trainning) – Tin tức – Giải trí – Diễn đàn trao đổi thảo luận – Mua bán, quản lý…. ƒ Xem ví dụ Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Diễn đàn Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Đào tạo trực tuyến Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Tin tức online Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Chủ đề của Website – Mua bán trực tuyến Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Mua tên miền ƒ Tên miền = Tên website – Tên ngắn – Gợi nhớ – Dễ đọc, không gây nhầm lẫn – Thể hiện được tên công ty hoặc nhãn hiệu chính của công ty rosevilleelectric.com Roseville + Electric Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Mua tên miền Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thuê chỗ hosting ƒ Hệ điều hành ƒ Dung lượng ƒ Băng thông ƒ Ngôn ngữ hỗ trợ ƒ Hệ quản trị CSDL hỗ trợ ƒ Email POP3 ƒ SSL ƒ … Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện Website Menu Header Content Logo Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện : 2x2 Layout Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTNTổng quan về thiết kếWeb 36 Thiết kế giao diện : Table within a table Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTNTổng quan về thiết kếWeb 37 Thiết kế giao diện : Table within a table Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTNTổng quan về thiết kếWeb 38 Thiết kế giao diện : Table within a table Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN The inner table Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện : Centered with three columns Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thiết kế giao diện : Cấu trúc phức tạp Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Xác định kiểu chữ, màu sắc ƒ Phông chữÆ phụ thuộc vào – Đặc điểm thông tin – Độc giả – Trình duyệt, độ phân giải – Ngôn ngữ sử dụng – Font có chân, không chân… ƒ Gam màuÆ thống nhất trong toàn bộWebsite ƒ Font tiếng Việt: VNI, TCVN3, Unicode… Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Xác định kích thước khung nhìn ƒ Phải làm cho đọc giả cảm nhận được kích thước của trang thông tin, biết họ đang ở đâu, có thể làm gì ? ƒ Lưu ý, hầu hết các trang web đều không vừa khớp với màn hình 14-15 inch. Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Phân cấp Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Xác định cấu trúc WebSite : Phân cấp ƒ Dùng để tổ chức các khối thông tin phức hợp. ƒ Là hệ thống được dùng thông dụng nhất ƒ Gần với mô hình tổ chức thế giới thực ƒ Dễ hình dung tổ chức website Î Cái nhìn tổng quan từ trang chủ Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Một số vấn đề liên quan đến việc thiết kế giao diện cơ bản ƒ Thiết kế hướng tới người sử dụng ƒ Các giúp đỡ định hướng rõ ràng ƒ Không có trang cuối cùng (dead-end) ƒ Băng thông và ảnh hưởng ƒ Đơn giản và tính nhất quán ƒ Tính ổn định của các trang Web ƒ Phản hồi và đối thoại ƒ Tính tương thích trên các trình duyệt khác nhau (thay thế) Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thiết kế hướng tới người sử dụng ƒ Người sử dụng là đối tượng chính quyết định sự thành bại của Website ƒ Xây dựng các kịch bản mẫu cho các loại đối tượng sử dụng khác nhau Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thiết kế hướng tới người sử dụng ƒ Yêu cầu mức độ hoàn hảo của thiết kế giao diện đồ họa ƒ Cách tốt nhất: thử nghiệmÆ nhận các phản hồi từ đọc giả. Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các giúp đỡ định hướng rõ ràng ƒ Đọc giả có thể trả lời các câu hỏi: – Đang ở đâu ? – Có thể làm gì ? – Có thể đi tiếp tới đâu ? ƒ Biểu tượng nhất quán, dễ hiểu, theo chuẩn qui định Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Không có trang cuối cùng (dead-end) ƒ Mỗi trang có ít nhất một liên kết. Luôn có khả năng quay lại trang chủ, các trang chủ chốt trên Website ƒ Trang “dead-end” Æ thất vọng, mất khả năng đến với các trang khác. ƒ Nên để liên kết về trang chủ trong mọi trang. Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Băng thông và ảnh hưởng ƒ Sự kiên nhẫn của đọc giả có giới hạn. ƒ Tốc độ đôi khi là yếu tố quyết định đến việc lựa chọn Website. ƒ Phân biệt giữa thiết kế cho Internet và Intranet Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Đơn giản và tính nhất quán ƒ Tùy vào loại ứng dụng ƒ Đọc giả sẽ không ấn tượng và sự phức tạp không lý do. Đặc biệt là đọc giả phục thuộc vào thời gian và thông tin chính xác. ƒ Các biểu tượng đơn giản, quen thuộc, nhất quán trong tất cả các trang Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Tính ổn định của các trang Web ƒ Ổn định về cấu trúc và nội dung ƒ Cấu trúc: các thành phần được đặt đúng chỗ và hoạt động nhịp nhàng. ƒ Nội dung: – các mối liên kết luôn đảm bảo có đích đến – nội dung luôn đảm bảo thích hợp và phải cập nhật cho phù hợp với ngữ cảnh tại thời điểm đọc giả duyệt Web. Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Phản hồi và đối thoại ƒ Chuẩn bị trước cho việc trả lời, đáp ứng các đòi hỏi, góp ý của đọc giả một cách nhanh nhất có thể. ƒ Luôn có cung cấp địa chỉ để liên kết với “Webmaster” ƒ Lên kế hoạch nhân sự phụ trách lâu dài Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Tính tương thích trên các trình duyệt khác nhau ƒ Không phải mọi trình duyệt đều hiển thị trang web của chúng ta giống nhau. ƒ Lưu ý khi có đọc giả sử dụng web browser không có khả năng hỗ trợ đồ họa (mobile, PDA, …). ƒ Sử dụng nhãn (tag) ALT trong HTML để thay thế Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Các bước thiết lập Website ƒ Xác định yêu cầu Website ƒ Mua tên miền ƒ Thuê chỗ hosting ƒ Thiết kếWebsite ƒ Đưa vào hoạt động ƒ Duy trì thông tin, bảo dưỡng website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Thời gian quản lý ƒ Website cần được cập nhật thông tin để đọc giả luôn cảm nhận được cái mới ƒ Nếu phần nào đó được cập nhậtÆ thêm ký hiệu “New” ƒ Ghi thời gian cập nhật, số người truy cập… ƒ Nếu website phức tạpÆ thêm một trang “What new ?” Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Liên kết trang web, quảng cáo ƒ Tạo liên kết đến các trang thông tin (đối tác, khách hàng…) Æ tăng uy tín ƒ Khi đã ổn địnhÆ chuyển đổi hình thức kinh doanh, thu phí: – Thuê đặt logo, quảng cáo – Thu phí thành viên – …. Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Phụ lục, nguồn thông tin, các trang giúp đỡ, FAQ ƒ Thông tin báo cáo thường cô đọngÆ trên web có thêm các phụ lục ƒ FAQ (Frequently Answer Questions) lý tưởng cho việc thiết kế website hỗ trợ ƒ FAQ Æ giảm thiểu nhân sự và chi phí cho việc hỗ trợ, tư vấn khách hàng Lập trình và Thiết kếWeb 2 © 2007 Khoa Công nghệ thông tin Khoa CNTT – ĐH.KHTN LAB1 Khảo sát các website Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Nội dung ƒ Thiết lập nhóm, tạo Mail cho nhóm – Đảm bảo mỗi người có Email, Account trên Moodle ƒ Tìm kiếm thông tin vềWEB Hosting – Cách dùng Free Hosting ƒ Công cụ lập trình và thiết kế web – FrontPage / Dreamweaver (MX, CS3) – Photoshop (v.7, CS3) Lập trình và Thiết kếWeb 2 – Bài 1 : Tổng quan vềWeb và Thiết kếWeb © 2007 Khoa CNTT - ĐHKHTN Khảo sát các Website ƒMột số trang web cung cấp hình ảnh làm web –www.clipart.com – ƒMột số trang web cung cấp các kiểu font chữ – ƒMột số trang web cung cấp mẫu thiết kế giao diện web –