Hướng dẫn thiết kế Web căn bản: Tài liệu tham khảo

Lịch sử phát triển của WWW

Vào những năm 1980, NSF đã tài trợ cho việc thành lập các trung tâm siêu máy tính quốc gia tại một số trường đại học, và cung cấp các kết nối phục vụ cho các tổ chức nghiên cứu và giáo dục. Những năm cuối của thập niên 80, Tiến sĩ Tim Berners-Lee đã đề xuất WWW, một mạng lưới liên kết các siêu văn bản, có thể được truy cập ở bất kỳ nơi nào miễn là máy tính đó có kết nối tới mạng lưới.

Tổ chức W3C

Tim Berners-Lee đã phát triển mạnh WWW để phạm vi truy cập các tài liệu siêu văn bản mở rộng ra toàn cầu. Và dự án WWW đã làm cho Internet trở nên phổ biến, hữu dụng cho đến ngày nay.

Các thế hệ web

Các ứng dụng nổi bật trong thế hệ web 2.0 chính là các trang web mạng xã hội (social network) như Facebook, YouTube, và các loại web nhật ký (blog). Với cấu trúc và bố cục giàu tính ngữ nghĩa, Web 3.0 hứa hẹn tiềm năng sẽ giúp nội dung có thể đọc được trên các thiết bị điện tử; hỗ trợ hiệu quả cho các công nghệ rút trích thông tin, tóm tắt văn bản.

Mô hình máy khách – máy chủ (client – server)

 Khi người dùng nhấp chuột trái (click) vào một liên kết (link), thì quá trình thực hiện sẽ theo cơ chế hoạt động giống như việc họ nhập một URL vào thanh địa chỉ của trình duyệt (như đã mô tả ở trên). Tuy nhiên, nhà phát triển web có thể thực hiện dự án web của mình theo đúng mô hình máy khách – máy chủ ngay trên máy tính cá nhân của mình.

NGÔN NGỮ HTML

Các loại thẻ văn bản và danh sách

Để trình duyệt hiển thị một đoạn văn trên trang web thì chúng ta sử dụng thẻ <p> với cú pháp như sau: <p>nội dung đoạn văn</p>. Danh sách không thứ tự được thể hiện dưới dạng các ký hiệu hoa thị (bullet), như:  (circle),  (square).

Thẻ bảng (table)

Với một tài liệu siêu văn bản (HTML), ngoài những dữ liệu là văn bản, hình ảnh, video, khung, bảng dữ liệu…, trang web còn cho chúng ta thu thập thông tin từ người dùng. Ở đây, thuật ngữ “submit” có nghĩa là người dùng đồng ý với tất cả các thông tin mà họ đã nhập trong biểu mẫu, và tiến hành gửi tất cả các thông tin này cho trang web xử lý.

NGÔN NGỮ CSS

Thuộc tính này cho phép liệt kê nhiều loại font (được phân tách bằng dấu phẩy) để dự phòng trong trường hợp trình khách không tồn tại loại phông được chỉ định. Thứ tự ưu tiên theo danh sách từ trái qua phải. Ví dụ dưới đây sẽ chỉ định cho trang web sử dụng phông Sans-serif, nếu trình khách không tồn tại Sans-serif thì sẽ chọn Helvetica, nếu không có hai loại phông này thì sẽ chọn Arial. font-family: Sans-serif, Helvetica, Arial;. Thuộc tính font-style được sử dụng để đặt kiểu phông chữ như: normal, italic, oblique. Giá trị mặc định của thuộc tính này là normal. Ví dụ dưới đây sẽ tạo 2 loại combinator selector. Một loại dành cho đoạn văn với class tên “normal”, đoạn văn này được áp dụng font-style là kiểu chuẩn mặc định. Một loại cho đoạn văn bản với class tên “italic”, được in nghiêng chữ. Thuộc tính font-size trong CSS được sử dụng để thiết lập kích thước phông chữ cho nội dung văn bản. a) Thiết lập font-size với giá trị tuyệt đối. Việc thiết lập font-size với các giá trị pixel (ví dụ: 14px, 16px, …) là một lựa chọn tốt khi chúng ta cần độ chính xác của pixel. Ví dụ dưới đây sẽ thiết lập kích thước cho văn bản của phần tử trang có class “normal_size” là 13px. b) Thiết lập font-size với giá trị tương đối.

Phần tử nội tuyến Inline Element là gì?

THIẾT KẾ WEB NGỮ NGHĨA

Các khu vực đó bao gồm: header (nhóm nội dung ở đầu trang web), global navigation (liên kết giữa các trang trong trang web), page body (thân nội dung của trang), content (gồm text và hình ảnh của trang), sidebar (nội dung phụ chạy dọc hai bên trái phải trang web), footer (nhóm nội dung ở cuối trang web). Để giải quyết vấn đề trên, tổ chức W3C cho ra đời phiên bản HTML5, với mục tiêu đạt sự nhất quán trong việc thông dịch mã nguồn html của các trình duyệt thông qua các quy tắc viết mã nguồn, sử dụng thẻ (tag).

THIẾT KẾ WEB Cể TÍNH ĐÁP ỨNG

Dựa vào các điểm breakpoint trên, ta sẽ thiết lập ít nhất 3 truy vấn điều kiện (media query) để đảm bảo trang web sẽ hiển thị tốt trên 3 nhóm thiết bị: điện thoại di động, máy tính bảng, máy tính cá nhân (hoặc laptop). Với kỹ thuật này, ta sẽ kết hợp với truy vấn điều kiện nhằm khi đạt tới một breakpoint cụ thể (trang web hiển thị trên một thiết bị màn hình khác), để thay đổi bố cục sao cho phù hợp nhất với viewport của thiết bị đang hiển thị.

BÀI TẬP CHƯƠNG 2: NGÔN NGỮ HTML

Các bài tập cho thuộc tính background 3.5.1 Tạo ảnh nền cho trang web

Kết quả hiện tại không đẹp mắt vì marker nằm lệch rất nhiều so với text, mà không thể điều khiển, tinh chỉnh vị trí của marker được. BÀI TẬP CHƯƠNG 4: THIẾT KẾ TRANG WEB NGỮ NGHĨA BT 4.1: Thiết kế trang web với bố cục được xây dựng là thẻ Table.