Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
I. Lý thuyết trọng tâm
1. Những đặc điểm chung của trang web
a) Khái niệm cơ bản
Trong cuộc sống hàng ngày, các em đã từng thấy nhiều trang web khi xem tin tức trên các báo điện tử, mạng xã hội. Mỗi trang web hay website trên Internet có một địa chỉ truy cập dạng URL (Uniform Resource Locator) để người dùng có thể đọc chúng qua các trình duyệt web như Firefox, Chrome, Edge hay Safari.
Cần phân biệt hai khái niệm:
- Trang web (web page): Một trang đơn lẻ có địa chỉ URL riêng
- Website: Tập hợp nhiều trang web có liên quan đến nhau
b) Cấu trúc chung của trang web
Dễ nhận thấy mỗi trang web đầy đủ nhất đều có cấu trúc gồm ba phần chính:
| Phần | Tên tiếng Anh | Chức năng |
|---|---|---|
| Phần đầu trang | Header | Chứa những thông tin chung nhất về trang |
| Phần thân trang | Body | Chứa nội dung của trang |
| Phần chân trang | Footer | Chứa các thông tin ngắn gọn về chủ thể, bản quyền |
c) Phần đầu trang (Header)
Phần đầu trang có vai trò như trang bìa thu gọn của một cuốn sách hay là phần trình bày đầu mỗi chương sách. Đây là nơi có hình nền và những thông tin nổi bật trên đó.
Các thành phần chính của phần đầu trang:
| Thành phần | Mô tả |
|---|---|
| Logo | Biểu tượng đại diện cho trang web hoặc tổ chức |
| Tên trang | Tên của trang web |
| Thanh điều hướng | Bảng chọn các chức năng, danh mục nội dung |
| Chức năng tìm kiếm | Có thể tách riêng ra khỏi bảng chọn |
| Tiêu đề | Tiêu đề chính của trang |
| Thông tin tóm tắt | Thông tin mới cập nhật hoặc nội dung nổi bật |
Một số lưu ý quan trọng:
Về Favicon:
- Favicon là viết tắt của “favorite icon” (biểu tượng yêu thích)
- Khi trang web được tải lên bởi một trình duyệt web, tên của nó sẽ được hiển thị tại tiêu đề của tab, phía sau một logo nhỏ gọi là favicon
- Favicon có thể không phải được thu gọn từ logo của trang mà được tạo dựng riêng
- Favicon không phải chỉ cho một trang mà cho cả website chứa nhiều trang web liên quan đến nhau
Về phần thông báo:
- Tùy theo thiết kế mà đôi khi người ta dành ra một vài dòng trước phần đầu trang để đưa ra những thông báo quan trọng
- Ví dụ như trang đang được xây dựng hay bảo trì
- Phần này gọi là phần thông báo
d) Phần thân trang (Body)
Thân trang là phần chứa nội dung của trang web. Phần này thường được bố cục thành các khối hình chữ nhật, mỗi khối trình bày một nội dung với tiêu đề riêng.
Nội dung trong mỗi khối có thể bao gồm:
- Các thông tin dạng văn bản
- Hình ảnh minh họa
- Âm thanh
- Biểu mẫu nhập dữ liệu
- Các ứng dụng nhúng khác nhau (ví dụ: ứng dụng bản đồ, ứng dụng dự báo thời tiết…)
e) Phần chân trang (Footer)
Phần chân trang có thể bao gồm những thông tin về thương hiệu, bản quyền, bảo mật, tóm tắt những thông tin cần nhấn mạnh thêm, thông tin liên hệ và những liên kết tới các trang mạng xã hội có liên quan.
Các thông tin thường có trong phần chân trang:
| Loại thông tin | Ví dụ |
|---|---|
| Thông tin chủ thể website | Tên cơ quan, tổ chức sở hữu |
| Bản quyền | Giấy phép, năm bản quyền |
| Bảo mật | Chính sách bảo mật |
| Thông tin liên hệ | Địa chỉ, điện thoại, email |
| Liên kết mạng xã hội | Facebook, Zalo, YouTube, Google… |
2. Các bước chuẩn bị để xây dựng trang web
a) Tổng quan về quy trình
Việc xây dựng trang web cần bắt đầu với việc phân tích, xác lập định hướng về mục đích của trang web và đối tượng người dùng. Mỗi trang web phải bắt nguồn từ một nhu cầu cụ thể. Trang web được xây dựng cho những người đọc nó, vì vậy cần phải xác định được đối tượng người đọc (người dùng), khả năng và mong muốn của họ. Từ đó xác định được mục đích, đối tượng, các yêu cầu về trang web trước khi đi vào các chi tiết thiết kế nội dung và hình thức.
Trình tự các bước chuẩn bị:
Định hình ý tưởng → Xây dựng thiết kế → Chuẩn bị tư liệu, lựa chọn phần mềm
Lưu ý quan trọng: Cần phân biệt việc xây dựng trang web đơn giản với xây dựng website. Công việc chuẩn bị xây dựng website có thể đòi hỏi thêm một số bước khác, đặc biệt là cách tổ chức vận hành và quản trị website.
b) Bước 1: Định hình ý tưởng
Nội dung chính của bước này là xác định mục đích, đối tượng và các yêu cầu cần đạt được. Nói cách khác là tìm được câu trả lời tường minh cho các câu hỏi:
- Mục đích của trang web là gì?
- Lớp người dùng nào hay là những ai sẽ quan tâm thường xuyên đến trang web này?
- Để đạt được mục đích và đáp ứng được nhu cầu của người dùng thì trang web phải đạt được những yêu cầu như thế nào về nội dung, kiến trúc và mỹ thuật?
Để có thể xác định được rõ mục đích cũng như các yêu cầu cần đặt ra với trang web, cần khảo sát, phân tích các nhu cầu cũng như những đặc điểm của người dùng một cách cẩn thận kỹ lưỡng. Càng hiểu được nhu cầu của người dùng thì sẽ càng xác định được rõ hơn mục đích cũng như các yêu cầu cần đặt ra về nội dung và hình thức của trang web.
Để biết được rõ nhu cầu người dùng, cần phải đặt ra và trả lời những câu hỏi như:
- Người dùng mong muốn biết những thông tin gì?
- Những gì sẽ làm nên sức hấp dẫn, thu hút đối với lớp đối tượng này?
- Những gì là đặc điểm văn hóa và thị hiếu của người dùng?
Ví dụ với dự án xây dựng trang web “Việt Nam – Vẻ đẹp tiềm ẩn”:
Đây là dự án của một nhóm thiện nguyện tâm huyết mong muốn quảng bá những nét đẹp của thiên nhiên, văn hóa, con người Việt Nam.
| Nội dung | Chi tiết |
|---|---|
| Mục đích | Giới thiệu vẻ đẹp của thiên nhiên, văn hóa, con người Việt Nam |
| Đối tượng sử dụng | Tất cả những người yêu thích phong cảnh thiên nhiên, những nét đẹp về văn hóa nghệ thuật cũng như ẩm thực các vùng miền Việt Nam |
| Nhu cầu của đối tượng | Những điều làm nên sức hấp dẫn, thu hút đối với lớp đối tượng này là những bức ảnh đẹp về thiên nhiên, về cuộc sống lao động của người dân, những bài viết và hình ảnh về lịch sử, văn hóa, đặc điểm ẩm thực địa phương. Là những người thích khám phá, họ sẽ muốn biết vị trí trên bản đồ, cách tự đi đến đó, mùa hay thời gian đẹp nhất để đến tham quan mỗi danh lam thắng cảnh… |
| Yêu cầu về nội dung | Những nội dung được giới thiệu phải phản ánh được nét đẹp riêng của thiên nhiên, văn hóa, con người ở mỗi vùng miền |
| Yêu cầu về hình thức | Định dạng thông tin đa dạng, sinh động: văn bản, hình ảnh, âm thanh… Những thông tin khác nên được giới thiệu kèm theo như bản đồ, đường đi, mùa/thời gian đẹp nhất, đặc điểm thời tiết… Hình thức của trang web phải dễ theo dõi, sinh động, đẹp và trang nhã về màu sắc. Trang web cũng cần có tương tác với người dùng để biết thêm nhu cầu của họ, từ đó có thể từng bước bổ sung, điều chỉnh nội dung và hình thức cho phù hợp hơn |
Nếu xác định trang web phục vụ cho cả người nước ngoài thì cần lưu ý những nội dung giúp họ tìm hiểu và khám phá những đặc điểm văn hóa truyền thống dân tộc cũng những vẻ đẹp độc đáo của thiên nhiên và con người Việt Nam.
c) Bước 2: Thiết kế
Bước này cần phải được bắt đầu với việc xây dựng dàn ý tổng thể, từ đó xây dựng bố cục của trang và đưa ra những chỉ định về thiết kế mỹ thuật.
Xây dựng dàn ý và bố cục:
Việc xây dựng dàn ý sẽ giúp hình dung toàn bộ về những nội dung sẽ được giới thiệu trong trang web và cách sắp xếp các nội dung này sao cho ấn tượng, mạch lạc, dễ tiếp cận và dễ hiểu nhất.
Ví dụ với trang web “Việt Nam – Vẻ đẹp tiềm ẩn”: Trang web sẽ giới thiệu các cảnh đẹp tiềm ẩn ở các vùng miền khác nhau, chẳng hạn Tây Bắc, Đông Bắc, Miền Trung, Tây Nguyên, Miền Đông, Miền Tây. Vì vậy, ở thanh điều hướng cần tạo bảng chọn gồm danh sách các vùng miền và thông tin liên hệ/phản hồi. Phần thân trang sẽ là một số bài viết mới nổi bật về một số địa danh.
Thiết kế mỹ thuật:
Thiết kế mỹ thuật trang web là việc thiết kế hình thức của trang web sao cho có vẻ đẹp phù hợp với thẩm mỹ của người dùng và phù hợp với nội dung, góp phần gây ấn tượng và tăng sức thuyết phục của nội dung. Vì vậy, về chi tiết, công việc này được tiến hành với từng nội dung, từng bài viết của trang web. Ở mức thiết kế chung, chỉ giới hạn trong phạm vi lựa chọn các định dạng chữ và bảng màu.
Về định dạng chữ:
Cần lựa chọn nhất quán và hài hòa về phông chữ, kiểu chữ (nghiêng, đậm…) và cỡ chữ dùng cho mỗi phần của trang web.
| Yếu tố | Hướng dẫn |
|---|---|
| Phông chữ | Phông chữ dùng cho các bảng chọn trên thanh điều hướng nên là các phông Sans Serif (không có chân), hẹp ngang, dễ đọc và tiết kiệm diện tích hiển thị như phông Arial Condensed. Các phông Serif (có chân) như Times New Roman rất ít được dùng để trình bày nội dung của trang web do khó nhận diện trên màn hình và chỉ dùng trong các trường hợp cỡ chữ lớn như tiêu đề. Phần nội dung bài viết nên chọn một phông Sans Serif như Calibri, Arial, Verdana, Tahoma… |
| Kiểu chữ | Kiểu chữ đậm có ý nghĩa nhấn mạnh, thường dùng cho các tiêu đề. Kiểu chữ nghiêng có ý nghĩa phân biệt, thường dùng khi muốn phân biệt từ ngữ, câu chú hay phần chú thích |
| Cỡ chữ | Có thể quy định tối thiểu bốn cỡ: cỡ nhỏ nhất chỉ dùng cho chú thích không cần nhấn mạnh như chân trang; cỡ thường dùng cho phần nội dung bài viết; cỡ lớn cho tiêu đề và cỡ rất lớn cho những tiêu đề nổi bật |
Về bảng màu:
Một trang web với những màu sắc tương phản quá gắt hay không hài hòa sẽ gây phản cảm với người đọc. Vì vậy, để gây cảm xúc tốt và thu hút người đọc cần phải chọn một số màu có độ tương phản nhẹ nhàng và hài hòa. Mỗi bảng màu thường có 5 màu pha trộn giữa các màu gam ấm, lạnh và trung tính, chưa kể hai màu trắng và đen.
d) Bước 3: Lựa chọn phần mềm, chuẩn bị tư liệu
Phần mềm Google Sites:
Hiện nay, có nhiều phần mềm hỗ trợ làm trang web một cách trực quan, nhưng hầu hết chúng là những phần mềm thương mại. Tuy nhiên, Google có cung cấp miễn phí, trong hệ sinh thái của họ, một phần mềm làm trang web với giao diện hoàn toàn trực quan.
Ưu điểm của Google Sites:
| Ưu điểm | Mô tả |
|---|---|
| Dễ sử dụng | Giao diện trực quan, kéo thả |
| Tích hợp | Kết nối một cách dễ dàng với những phần mềm khác của Google như Docs, Sheets, Slides, Maps, Photos, YouTube… |
| Lưu trữ | Các trang web sau khi làm xong sẽ được lưu trữ trên Google Drive |
| Chia sẻ | Có thể chia sẻ, xuất bản ngay trên Google với một địa chỉ URL hỗ trợ bởi Google |
| Yêu cầu | Chỉ là người dùng đăng ký để có tài khoản Google Mail |
Địa chỉ truy cập: https://www.sites.google.com
Chuẩn bị tư liệu:
Việc chuẩn bị tư liệu cho trang web là việc kéo dài suốt thời gian thực hiện dự án, bắt đầu từ việc:
- Thiết kế favicon, logo
- Lựa chọn hình nền cho phần đầu trang
- Đặt tên trang web
- Thực hiện các bài viết cho từng nội dung
- Lựa chọn hình ảnh minh họa
Thầy Phạm Thành Danh
(Người kiểm duyệt, ra đề)
Chức vụ: Trưởng ban biên soạn môn Tin Học THPT
Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1
Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa