Web 3: trang trí thêm cho trang Web
Giờ đây ta lôi trang web ở Bài 1 ra để có thể làm cho nó hoàn thiện hơn. Nếu bạn chưa có trang web này, hãy quay về Web 1 để làm trước khi thực hiện những việc bên dưới đây.
Để dễ so sánh, hình dung sự tiến triển của việc thực hành bài tập, tốt hơn là đừng làm hỏng file bai1.html mà khi mở nó ra bạn Save As lại thành bai3.html để thực hành cho bài này, những gì đề cập xem như bạn sửa đổi bai3.html và xem nó trên trình duyệt.
1. Đây là 1 landing page bán sách?
Tạm gọi như vậy. Ta sẽ làm trang web này như một trang dài duy nhất, mục đích là bán cuốn sách mà ta đọc thấy chán 😊. Chính vì thế, các liên kết ở menu thực sự không trỏ đi đâu ngoài chính trang hiện tại. Giờ đây ta sửa lại mã của nó thành như sau:
Một liên kết có dấu rào # (đọc là dấu hash) đứng ở trước và trông URL của nó không có gì là URL vì bạn không thấy http đâu thì được gọi là fragment identifier (mã định danh đoạn).
Cách sử dụng đó là ở cùng trên trang hoặc kể cả khác trang, ta có element với thuộc tính id có giá trị chính là cái nằm dính vào dấu # thì khi click vào liên kết, trình duyệt sẽ cuộn trang (lên hoặc xuống) đến ngay vị trí element có định danh đó.
Bạn phát hiện ra rằng ngay trên trang làm gì có chỗ nào có những cái gioi-thieu, danh-gia, giao-luu, vậy thì còn chần chờ gì nữa mà ta không làm ngay mấy cái này để sử dụng ngay và luôn, nhỉ?
Bạn để ý thấy không, ở thuộc tính id=“gioi-thieu” không được có dấu rào nhé. Dấu rào chỉ sử dụng ở attribute href của element A ở phần menu đã đề cập mà thôi. Nếu bạn “chơi nguyên” cái dấu # vào chỗ này là sai căn bản.
Mới được có một cái mà thôi, mã HTML thiếu nội dung để gọi là đánh giá và giao lưu. Giờ đây ta phải thêm mã HTML, trông như sau:
Vẫn còn thiếu phần giao lưu, phần này có lẽ là làm một form để người đọc sách chia sẻ cảm nghĩ của mình. Chúng ta có một form đơn giản ngay bên dưới phần đánh giá:
Có một lỗi typo khi chụp ảnh màn hình code do tui viết ở trên, bạn sửa ngay nhé: mthod=“post” sửa thành method=“post” ở dòng có element FORM trong hình trên (dòng thứ tư từ trên xuống).
Mặc dù dùng HR để phân tách các phần trên nhưng khi người duyệt web xem trang cũng khó phân định được các phần nền họ lướt nhanh, bạn có thể cải tiến mã bằng cách bọc phần đánh giá và phần giao lưu trong một SECTION hoặc DIV và viêt CSS ảnh nền cho nó đổi màu một chút để dễ nhận diện các phần trên trang.
Giờ đây bạn đã có thể tự chủ động viết mã của bạn, sau đây là gợi ý đoạn mã cho phần đánh giá mà KACBT minh hoạ để bạn có thể hình dung:
Mã HTML là ở trên, phần đánh số 1, 2 chính là thêm vào. Tui cố tính đánh máy hỏng 1 chữ trong dòng DIV bọc thêm ngoài, bạn có kịp phát hiện ra không? Chữ class bị viết sai đó, sửa ngay và luôn đi nhé.
Giờ mở qua file css/style.css để thêm một rule:
Tương tự, phần giao lưu sẽ:
CSS thì sao, cái gì đó trông xấu hoắc:
Sự sai sót luôn rải khắp các đoạn mã được viết, cho nên, cách của tui là nếu không hiểu bài, chỉ làm như con vẹt một cách vô tri sẽ không đi đến đâu, sự học là vứt đi vậy. Nhưng nếu một người chú tâm, tỉnh táo, họ sẽ nắm bắt được rất nhiều điều, mức tiến bộ của họ vượt người hướng dẫn. Thật vậy, tui không chém gió đâu.
Giờ xem lại mã, bạn sẽ thấy kinh hoàng khi lỗi xảy ra:
Như đã biết, id không thể trùng nhau được vì trình duyệt sẽ không thể biết ai vào với ai, điều này chẳng khác nào trong thực tế có 2 người trùng số điện thoại hoặc trùng số căn cước công dân. Vì thế, hãy sửa (2) ở hình trên thành id=“nut-giao-luu”, và sau đó ta có thể viết CSS cho nó để cho nút trông ổn hơn chút, xam xám như hiện tại cứ như trang web thời những năm trước năm 2000:
Hình trên có selector là id của nút, tui cũng khuyên là bạn nên tự thêm class cho nó để viết theo class cho nó có vẻ hiện đại theo các khuyến cáo của những nhà làm web hiện nay.
Nghe đến sai sót, bạn lại giật nảy mình thấy gì đó sai sai nhưng chưa dám… hỏi, hãy lần lại bài 1, bài 2 ở đâu đó tui có viết rằng một số thẻ sẽ phải đi combo với nhau chứ đi lạc lõng là vô nghĩa. Quay lại đoạn đánh giá thấy rằng mấy cái LABEL, INPUT là không thể nằm vậy, bạn sửa nhé:
Sau khi chỉnh sửa HTML, viết CSS rule và save 2 file bai3.html, style.css thì bấm F5 trên trình duyệt sẽ thấy phần đánh giá, giao lưu:
Bạn có còn thấy chứ Section, Aside to như gà máy không? Hãy sửa nó lại cho phù hợp, phản ánh nội dung được trình bày. Ví dụ: Section thay bằng Các ấn phẩm đã xuất bản và nhớ chỉnh CSS cho font chữ của nó nhỏ xuống, tương tự, Aside ở cột bên phải có thể thành Cảnh đẹp Shangri-la.
Ta chỉnh thêm chút về CSS để trông trang bớt tĩnh lặng, buồn tẻ, sửa rule CSS trông như sau:
Hình ảnh bên cột phải cũng làm cho xám xịt xem sao? CSS như này:
Nghe là landing page để bán sách nhưng lại không có chỗ nào cho phép có form đặt hàng? Bạn sẽ phải tự thực hiện việc này như bài tập thực hành để chứng tỏ có sự hiểu bài sau khi trải qua việc gõ phím lóc cóc và có hiểu những gì KACBT đã viết từ bài 1 đến bài này.
Trong trường hợp người truy cập web cảm thấy muốn liên hệ mua sách, chúng ta thử làm thêm các nút mạng xã hội ở phần chân trang. Mã HTML như sau:
Mở phần HEAD ra thêm dòng:
Phần FOOTER giờ đây:
Cũng đừng quên thêm các CSS rule vào file style.css, mang về cuối file và gõ:
Tất nhiên, bạn cảm thấy khó hiểu những gì vừa mới làm để có icon ở trên, tui lại chẳng có chút giải thích nào ngoài việc gợi ý bạn tìm đọc bằng cách tra cứu thông qua Gú gồ hoặc Bing hoặc Duckduckgo gì đó cụm từ: use free font lineicons CDN.
Nếu muốn biết cách tổng quát, thông dụng mà giới làm web thường dùng, hãy tìm kiếm: font awesome guide và ghi chú lại những gì bạn học được.
Các liên kết đến mạng xã hội bạn phải thay bằng URL của bạn, đừng dùng y chang KACBT vì nếu vậy sẽ khá buồn cười.
Về kỹ thuật tạm ổn, mỹ thuật trông khá hài hước có phải không. Cái này tui đã nói trước rồi, tui chỉ hướng dẫn làm web mang tính kỹ thuật, còn mỹ thuật là không bàn tới vì ngay như trang web của tui trông còn hổng ra sao nữa mà. Nhưng bạn cứ yên tâm đi, khi vững vàng về kỹ thuật rồi, mỹ thuật của bạn được dịp phát huy.
2. Một chút lý thuyết về 12-column grid system
Nền màu hồng nhạt trên trang để làm gì? Bạn thắc mắc rằng tại sao trang web xấu đau xấu đớn, đặc biệt cái nền có các cột màu hồng nhạt xen lẫn màu trắng trông tức mắt quá. Ồ, đúng vậy, đúng là gây bực bội, nhưng tui làm nó mục đích là để hướng dẫn bạn cách làm web, có dụng ý của nó đó.
Không ai bíết chính xác ai là tác giả của hệ thống lưới 12 cột trong thiết kế web, nhưng người ta ghi nhận khi Bootstrap CSS framework ra đời vào năm 2011 và sự thành công, phát tán rộng rãi của nó khiến nhiều người biết đến hệ thống lưới 12 cột, kể cả dân làm web nghiệp dư.
Người ta chọn 12 thay vì 10 hoặc một số nào khác bởi vì 12 là bội số của 1, 2, 3, 4, 6 và là tổng số của 2 + 10, 3 + 9, 4 + 8, 5 + 7, 6 + 6 giúp phân chia độ rộng của các cột trên kích cỡ màn hình khác nhau được linh hoạt.
Ngay sau khi iPhone 3 ra đời, khái niệm Responsive Web Design (thiết kế web tuỳ biến, viết tắt: RWD) được đề cập nhiều. Lúc này thiết kế trang web phục vụ người dùng có các kích cỡ màn hình khác nhau từ máy tính để bàn, laptop, máy tính bảng, smartphone được xem như một xu hướng và những người học làm web phải biết nếu không muốn bị xem là lạc hậu.
Thời điểm 2015-2016 khi mà Google tuyên bố rằng các trang web nên mobile-first (ưu tiên điện thoại trước) và gắn nó với việc xếp hạng thứ hạng trang web (tức liên quan SEO) trong kết quả tìm kiếm thì hầu như các trang web từ thời điểm đó trở đi không cần đề cập nó luôn phải là thiết kế tuỳ biến RWD.
Hệ thống lưới 12 cột rất hữu ích trong việc thiết kế RWD. Nếu bạn tử mở một trang web ra xem trên máy tính và thử resize cửa sổ trình duyệt nhỏ xuống ngang với máy tính bảng, bạn sẽ thấy trang web có sự tuỳ biến giao diện theo, khi kéo thu nhỏ hơn nữa, cỡ kích cớ màn hình điện thoại, bạn sẽ thấy một lần nữa giao diện có sự thay đổi. Để dễ hình dung hơn, KACBT có hình minh hoạ:
Hệ thống lưới 12 cột giúp người thiết kế linh hoạt trong bố trí lại các thành phần trên trang web. Khi ở màn hình máy tính thiên về chiều rộng (hình chữ nhật ngang) thì các thành phần trên trang mang tính trải rộng theo chiều ngang.
Khi chuyển qua màn hình máy tính bảng tablet thì một số thành phần sẽ phải xuống dòng hoặc thu hẹp lại (tuỳ bố cục trang). Tương tự như vậy, khi ở màn hình kích thước nhỏ hơn, các thành phần lại lần nữa được bố trí lại hoặc có thể thay đổi, ẩn đi để phù hợp với hình chữ nhật đứng.
Nếu không có thiết kế tuỳ biến, người truy cập web sẽ rất khó để xem nội dung vì kích cỡ hình ảnh, chữ viết nếu làm cho màn hình lớn, qua màn hình nhỏ quá bé không thể xem được, nếu người thiết kế dựa trên màn hình bé, người dùng màn hình lớn sẽ thấy mọi thứ to như gà mái.
KACBT thú thực không hiểu rõ ngọn ngành về việc thiết kế web tuỳ biến dựa trên lưới 12 cột này đâu. Tui hiểu biết đến đâu xin được nói đến đó và có thể có sự shiểu sai, hiểu nhầm hoặc ngô nghê đâu đó, nếu bạn phát hiện ra chỗ chưa ổn, xin dùng chức năng comment bên dưới chỉ bảo giúp.
Giả sử trên màn hình được chia làm 12 cột cho khu vực hiển thị nội dung thôi nhé (vì có những màn hình quá rộng, người ta CSS cho BODY chỉ dùng 80% chiều rộng màn hình chẳng hạn), cho nên 12 cột đây là nói cái vùng sẽ làm nên bố trí các cột có chứa nội dung.
Vị chi, 100 phần trăm chia cho 12 cột, mỗi cột sẽ chiếm 8,33%. Để thiết kế được thông thoáng, dễ chịu, giữa các cột người ta thường có khoảng hở cỡ chừng 15-20px. Ở đây để tránh rối rắm, ta chỉ bàn cách các cột bố trí thế nào, còn khoảng hở thì khi CSS có thể thêm vào dễ dàng.
Dễ dàng nhất khi sử dụng hệ thống lưới 12 cột hình dung, KACBT cho một ví dụ cụ thể trên 3 màn hình:
Màn hình máy tính, một trang web bán hàng có 4 cột hiển thị sản phẩm bày bán:
Ý tưởng của người thiết kế dùng hệ thống 12 cột đó là bố trí 12 cột lớn được gom lại thành nhóm 3-3-3-3 cột. Mỗi 3 cột nhỏ này sẽ chứa 1 sản phẩm như trên hình. Như vậy, các sản phẩm đánh số 1, 5 sẽ thuộc cột 1, sản phẩm 2, 6 ở cột 2, sản phẩm 3, 7 ở cột 3 và sản phẩm 4, 8 ở cột 4.
Theo cách tính trên ta có 4 cột, mỗi cột bằng 3 cột trong lưới 12 cột, tức là 8,33% x 3 = 24,99%, khi bố trí HTML ta sẽ có 4 cột, đặt class cho nó, ví dụ .desktop và viết rule trong CSS là width: 24,99%;
Khi tuỳ biến giao diện được hiển thị trên màn hình nhỏ hơn, ở đây là máy tính bảng (tablet như Apple iPad, Samsung Galaxy Tab) bạn sẽ thấy:
Vậy là từ 4 cột dành cho máy tính, giờ đây chỉ còn 3 cột trên màn hình máy tính bảng, cột thứ tư đã “rớt xuống hàng dưới” như trên hình bạn nhìn thấy. Vậy, trong mã HTML của ta sẽ có các class .table và rồi viết rule CSS cho nó là width: 33.33%;
Cột cuối cùng không còn chỗ hiển thị thì tự nó sẽ được chuyển xuống hàng dưới, trong CSS có kỹ thuật flexbox để thực hiện điều đó. Kỹ thuạt này khá khó để làm chủ, tui chỉ nói vắn tắt rằng ý niệm đặt hộp chứa bố mẹ có display: flex; và flex-wrap: wrap; các hộp element bên trong sẽ tự động xuống hàng khi hết chiều rộng để hiển thị.
Tương tự như vậy, khi chuyển qua màn hình mobile sẽ chỉ còn 2 cột mà thôi, mỗi cột lúc này rộng 50%, trông giống sau:
Trên đây chỉ là cách đơn giản, dễ hiểu nhất về giao diện tuỳ biến. Nếu bạn để ý quan sát sẽ giống như bạn viêt vào các cuốn sổ vậy: ở cuốn sổ rộng chiều ngang bạn sẽ viết được hàng dài hơn, giả sử ở đây là có 4 cụm từ, hết giấy, xuống hàng.
Qua cuốn sổ có chiều rộng hẹp hơn cuốn sổ đầu tiên, bạn cũng viết cùng nội dung với cuốn sổ thứ nhất, bạn viết được có 3 cụm từ và hết giấy, xuống dòng viết tiếp hàng 2, 3, và vân vân.
Qua một cuốn sổ khác hẹp hơn cũng tương tự như vậy, lúc này chỉ còn viết được có 2, thậm chí chỉ có 1 cụm từ đã phải xuống dòng rồi.
Trong thực tế phức tạp hơn rất nhiều, tuỳ thuộc vào file hình ảnh bên thiết kế đồ hoạ chuyển sang cho người làm giao diện web (đây là bạn). Còn trong trường hợp bạn cũng là người thiết kế đồ hoạ giao diện, ban đầu bạn sẽ phải phác thảo và bố trí các thành phần trên 3 màn hình khác nhau rồi mới làm chi tiết.
Tóm lại dễ nhớ cách tuỳ biến giao diện 12 cột đang đề cập như hình:
Bạn càn tra cứu thêm dể hiểu các cách làm liên quan đến thiết kế web tuỳ bíên dựa trên lưới 12 cột với cụm từ 12 column css grid explanation, sẽ hiểu được ngọn ngành các làm cũ trước đây và cách làm hiện đại những năm gần đây khi các trình duyệt hỗ trợ một số thuộc tính mới như flex, grid trong CSS.
Kỹ thuật thíết kế web tuỳ biến dựa trên lưới 12 cột phải nói là phức tạp bởi vì có lúc lưới mang tính cố định, lúc khác lại linh hoạt, có lúc bạn phải phối hợp giữa 2 cách. Nếu bạn là người chuyển giao diện từ file thiết kế Photoshop sang template (tức dùng HTML, CSS) thì sẽ thấy có những giao diện được thiết kế quá “tinh vi”, khiến bạn phải mất hàng tuần để chuyển đổi (gọi là cắt CSS).
Đây có thể là ở trình độ trung - cao về HTML, CSS. Người mới học căn bản về HTML, CSS chưa đủ làm đượchệ thống 12 cột cho riêng mình một cách tường tận hoặc chỉ có thể sử dụng những framework về CSS được viết sẵn như Bootstrap, Materialize CSS, Bulma để dựng giao diện.
3. Thử áp dụng lý thuyết vô “Đường chân trời đã mất”
Nhìn lại xem 12 cột trông thế nào? Không phải tất cả mọi thứ trên trang đều áp dụng 12 cột.
