1. Trang web và siêu văn bản
- Trang web (web page) là tài liệu được trình bày trên Internet theo mô hình siêu văn bản, có thể gồm văn bản, hình ảnh, âm thanh, video và các liên kết.
- Siêu văn bản (hypertext) là văn bản trong đó các phần nội dung liên kết với nhau hoặc với tài nguyên khác bằng liên kết (hyperlink). Khi kích hoạt liên kết, người dùng được chuyển đến một đoạn văn, một tệp hoặc một trang web khác.
- Website là tập hợp các trang web cùng thuộc một địa chỉ, liên kết chặt chẽ về nội dung và điều hướng.
Mỗi trang web thường được chia thành các vùng: đầu trang với tên hiển thị và biểu trưng, dãy điều hướng, phần nội dung chính và chân trang. Nhờ các liên kết, người xem di chuyển được giữa các trang trong website hoặc ra website khác.
2. Những việc cần làm khi chuẩn bị xây dựng trang web
2.1 Xác định mục đích và đối tượng
Trước tiên cần trả lời: website dùng để làm gì, phục vụ ai, cần cung cấp những thông tin gì. Chẳng hạn, website giới thiệu câu lạc bộ cần nội dung khác website bán hàng; nếu đối tượng là học sinh thì cách trình bày và hình ảnh phải phù hợp lứa tuổi.
2.2 Thu thập và biên soạn thông tin
Nội dung có thể lấy từ sách báo, trao đổi trực tiếp hoặc tự thu thập bằng máy ảnh, điện thoại. Sau khi thu thập cần:
- Hệ thống hoá thành các chủ đề, mục riêng.
- Kiểm tra tính chính xác, cập nhật, ghi rõ nguồn khi cần.
- Viết lại cho ngắn gọn, dễ đọc trên màn hình.
2.3 Thiết kế cấu trúc website
- 1.Chọn một trang làm trang chủ, thường đặt tên tệp là
index.html. - 2.Xác định các trang con theo từng nhóm nội dung chính (giới thiệu, tin tức, thư viện, liên hệ, v.v.).
- 3.Vẽ sơ đồ cây thể hiện quan hệ giữa trang chủ và các trang con.
- 4.Đặt trong mỗi trang một dãy nút điều hướng liên kết về các trang cùng cấp và về trang chủ.
- 5.Giới hạn số mục trên dãy điều hướng, tránh dàn trải khó dùng.
Sơ đồ cây cho biết trang nào gọi trang nào. Từ trang chủ có thể đi tới mọi trang con; giữa các trang con có thể liên kết tương hỗ khi nội dung có liên quan.
2.4 Chuẩn bị tài nguyên số
Hình ảnh, âm thanh, video làm website sinh động nhưng dễ làm chậm tải trang nếu không xử lý.
| Một số định dạng thường dùng | ||
|---|---|---|
| Loại tài nguyên | Định dạng thường gặp | Ghi chú |
| Hình ảnh | JPG, PNG | JPG hợp với ảnh chụp; PNG hợp với ảnh có nền trong suốt, chữ, biểu tượng |
| Âm thanh | MP3 | Nén tốt, phát được trên nhiều thiết bị |
| Video | MP4 | Cân bằng giữa chất lượng và dung lượng |
Việc xử lý gồm: cắt ảnh đúng vùng cần dùng, ghép ảnh minh hoạ, thu nhỏ kích thước, giảm dung lượng tệp, cắt ghép đoạn âm thanh và video, ghép phụ đề hoặc tiêu đề khi cần. Có thể dùng phần mềm chỉnh ảnh hoặc công cụ biên tập âm thanh, video trên máy tính hoặc điện thoại.
2.5 Chọn công cụ dựng trang
Có hai hướng chính:
- Viết mã HTML trực tiếp để kiểm soát chi tiết cấu trúc; cần trình soạn thảo mã như
Notepad++hoặcVisual Studio Code. - Dùng công cụ trực quan hoặc nền tảng hỗ trợ dựng trang bằng thao tác kéo-thả như
Google SiteshoặcWordPress; phù hợp khi cần nhanh và ít viết mã.
Đặt các tệp của website trong một thư mục riêng; chia thư mục con cho ảnh, âm thanh, video. Khi đặt tên tệp nên dùng chữ cái không dấu, không dùng dấu cách để tránh lỗi liên kết.
3. Thiết kế để dùng trên nhiều thiết bị
Người dùng có thể mở website trên máy tính, máy tính bảng hoặc điện thoại. Cần lưu ý:
- Bố cục nên co giãn được; khi màn hình hẹp, các mục xếp theo một cột thay vì nhiều cột.
- Hình ảnh hiển thị gọn trên màn hình nhỏ; phần chữ vẫn đọc được.
- Kiểm thử bằng cách xem trước trên các thiết bị khác nhau trước khi công bố.
Trước khi công bố ra Internet, cần chú ý tới tên miền và nơi lưu trữ. Tên miền là địa chỉ giúp người dùng nhớ và gõ tới website; nơi lưu trữ là máy chủ chứa dữ liệu website. Trong giai đoạn học tập, có thể lưu website trên chính máy tính, mở bằng trình duyệt để kiểm tra trước.
4. Ví dụ minh hoạ
Dưới đây là một phần sơ đồ cây cho website giới thiệu câu lạc bộ Sách. Hoàn chỉnh bằng cách nêu tên tệp của trang chủ và liệt kê các trang con.
Lời giải · 2 bước
Trang chủ đặt tên tệp index.html. Từ trang chủ liên kết tới bốn trang con:
gioi-thieu.html: mục tiêu, thành viên.hoat-dong.html: các buổi giao lưu, phát hành bản tin.thu-vien.html: ảnh hoạt động, sách hay.lien-he.html: địa chỉ, mạng xã hội, hộp thư.
Bước 2
Mỗi trang con đều có liên kết quay lại trang chủ. Thư mục images chứa ảnh, thư mục media chứa âm thanh và video.
Tệp ảnh chụp hoạt động câu lạc bộ có dung lượng 8 MB, kích thước 4 0003 000 điểm ảnh. Cần làm gì trước khi đưa lên website?
Lời giải
Cắt ảnh bỏ phần nền thừa; thu nhỏ còn khoảng 1 200 điểm ảnh chiều dài đủ dùng trên trang; lưu lại dạng JPG với mức nén vừa để giảm xuống còn vài trăm kB mà ảnh vẫn rõ. Nếu giữ nguyên ảnh gốc, trang sẽ tải rất chậm.
- Bỏ qua bước xác định đối tượng, dẫn tới nội dung khó phù hợp với người xem mục tiêu.
- Thiếu trang chủ hoặc không có đường về trang chủ khiến người dùng bị lạc.
- Đặt tên tệp có dấu cách, dấu tiếng Việt; khi lên mạng dễ lỗi hoặc khó gõ đúng.
- Chèn ảnh quá lớn, âm thanh và video không nén, làm trang mở chậm.
- Không kiểm tra trên điện thoại nên hiển thị lệch trên màn hình nhỏ.
5. Câu hỏi ôn tập
Phân biệt khái niệm trang web và website. Nêu ba thành phần có thể xuất hiện trong một trang web ngoài văn bản.
Gợi ý trả lời
Trang web là một tài liệu đơn lẻ trình bày trên Internet; website là tập hợp nhiều trang web cùng tên miền, liên kết với nhau. Ba thành phần ngoài văn bản có thể là hình ảnh, âm thanh, video hoặc liên kết chuyển hướng.
Khi thiết kế cấu trúc website, tại sao cần thiết lập dãy điều hướng giống nhau trên các trang?
Gợi ý trả lời
Vì dãy điều hướng giống nhau giúp người dùng nhớ vị trí các mục, di chuyển nhanh giữa các trang và luôn có cách trở về trang chủ; nếu mỗi trang bố trí khác nhau thì người dùng dễ bị lạc.
Trước khi công bố website lên Internet cần lưu ý điều gì về hình ảnh, âm thanh, video và thiết bị xem?
Gợi ý trả lời
Cần xử lý giảm kích thước, chọn định dạng phù hợp để trang tải nhanh; đồng thời kiểm tra bố cục trên nhiều loại màn hình, nhất là màn hình nhỏ, để website co giãn và hiển thị đầy đủ thông tin.