Khó ăn cát bê tông

Menu

Phi lộ

Trang web này dành cho những ai thực sự mong muốn tự học làm trang web, phát triển website, kiến thức chủ yếu dành cho người mới bắt đầu. Bạn là:

  • Học sinh muốn làm trang web cho cá nhân, nhóm bạn, lớp học.
  • Một người làm việc nhiều trên mạng, rất quen thuộc với web, chưa từng làm web, giờ muốn tự tay làm một trang web.
  • Một cá nhân muốn học phát triển website để kiếm sống.
  • Một người tò mò, muốn thử cái gì đó mới mẻ, mang tính công nghệ chút xíu, nghĩ rằng web là cái thú vị.

Nếu bạn thuộc một trong các trường hợp kể trên, trang web này dành cho bạn.

Những điều nên & không nên cho người mới

  • Đừng quan tâm lộ trình: hãy đi rồi có đường, đích đến không quan trọng bằng vui thú trên chuyến đi.
  • Một chuyến đi mà bạn không chắc sẽ đi đến đâu rất thú vị, đáng trải nghiệm, đậm thử thách hơn nhiều so với chuyến đi bạn đã nhìn thấy rõ ràng sẽ tạo cảm giác chán phèo.
  • Hãy yên tâm rằng KACBT có lộ trình khá bài bản cho bạn, các bài học sẽ có thứ tự, bổ sung cho nhau để cuối cùng sản phẩm tạo ra là một website hoàn chỉnh.
  • Mỗi ngày hoặc tối đa 2-3 ngày học một chút sẽ tốt hơn nhiều so với dồn lại 1 tuần, 1 tháng mới học một buổi nhiều tiếng đồng hồ.
  • Nhớ đăng ký để tham gia thảo luận, giúp quá trình học tốt hơn, hiểu bài và thực hành thông suốt. Chú ý: chỉ đăng ký nếu bạn tích cực, mỗi tuần đều tham gia thảo luận 1-2 lần, khi bạn không tham thảo luận trong vòng 1 tháng, chúng tôi sẽ xóa tài khoản.
  • KACBT phối hợp các cách thức để lý thuyết, thực hành, bài tập nâng cao, dự án nhỏ để người học cảm thấy có hứng thú, tự đánh giá được sự tiến bộ.

Để không lạc lối trên trang web lộn xộn này

Bạn cần truy cập chức năng Menu ở góc phải – trên của trang, học gì cứ mục đó mà đọc bài lần lượt theo số thứ tự 1-2-3…

Bài 5: trang web kết hợp hình, bảng biểu, biểu mẫu

Bài này đã có khá dồi dào những thẻ đã biết, chưa biết nhưng tra cứu dễ dàng, cách để biến thẻ (tag) thành element (phần tử/ thành phần) là như thế nào. Nào, giờ ta thử làm một trang web về trà sữa nghe cho có vẻ gì đó thơm ngon, hấp dẫn nhỉ?

Tham khảo các thẻ HTML để có thể tra cứu, sử dụng trong bài này.

Làm một giao diện truyền thống, đơn giản

Vì chúng ta tự học làm web, mang tính chất chơi là chính chứ không phải khắt khe tiêu chuẩn công nghiệp nên không có sẵn file PSD của bộ phận thiết kế chuyển qua để “cắt CSS”.

Thực hành cách viết mã HTML là chính, vì vậy, bạn chưa cần tốn thời gian công sức vào làm giao diện như các template thương mại.

Giao diện 1 trang web đơn giản, thập niên 1990s.

Phân tích về bố cục (layout) của trang, nhận thấy:

  1. Phần tiêu đề trang (header): lúc này còn làm đơn giản, chỉ có một dòng chữ Trà sữa Ánh Sao. Phần này thường hay cố định, trên website có nhiều trang thì các trang khác nhau đều có chung header.
  2. Phần tiếp theo có 3 cột (column): cột bên trái, bên phải có tên gọi chung là thanh lề (sidebar). Gọi riêng từng cột: cột có chữ Menu gọi là thanh lề trái (left sidebar), cột bên phải có 2 khung/ khối bên phải gọi là thanh lề phải (right sidebar). Hai khối bên trong cột bên phải gọi là khối (block) hoặc hộp (box). Cột chính giữa có hình thức uống được gọi là cột nội dung (main column hoặc content column).
  3. Phần cuối cùng của trang/ chân trang (footer): phần này thường có những thông tin gì, bạn tự quan sát các trang web khác để học tập. Ở đây chỉ giải thích gọn: khá giống với phần header, phần này thường giống nhau ở những trang web trong cùng một website.

Người ta cũng có thể phân tích theo cách có 4 phần: header, sidebar, main, footer, thay vì KACBT gom các cột thành một phần như trên.

Tới đây, bạn bỗng nhận thấy trong khi làm web, có rất nhiều từ vựng tiếng Anh cần phải biết, phải ghi nhớ, học thuộc. Một thành phần trên trang (page) có thể gọi bằng nhiều tên khác nhau đến mức ngay cả những người làm web có khi trao đổi với nhau cũng cảm thấy bối rối cho đến khi chỉ trực tiếp vào màn hình hoặc vẽ ra giấy.

Bạn hãy cố nhớ những từ, cụm từ, ngữ liệt kê trên. Chúng tôi sẽ thường xuyên lặp lại để giúp bạn dễ nhớ hơn, khi nhớ từ bạn mới tra cứu Google được, tìm được bài đọc chuyên sâu hơn.

Có nhiều bạn thường lên Facebook, các diễn đàn phàn nàn rằng anh ấy/ cô ấy đang gặp khúc mắc một vấn đề nhưng không biết từ khóa để tra cứu, ai đó giúp giùm đi. Nguyên nhân của việc này là vì họ… lướt đi quá nhanh, học mọi cái theo kiểu “cưỡi máy bay ngắm hoa” khiến trí não chưa kịp ghi nhớ một số thứ cần nhớ, khi cần đến đành bó tay, đi hỏi đợi người ta trả lời. Hóa ra, nhanh thành chậm vậy, thật là “dục tốc bất đạt”.

Trang web có đội dài khác với trang giấy, nó không chỉ gói gọn trong vùng một màn hình mà có thể cuộn trang. Phần giao diện mẫu trên chỉ thể hiện phần nạp trong khung màn hình ban đầu.

Bài này sẽ có thêm những phần không có trên giao diện: bảng liệt kê các món theo mùa, form đặt món ở phần MAIN.

Chuyển giao diện trên thành các tag, element

Trước đây, thời KACBT mới học làm web, thời đó người ta cứ dùng DIV cho mọi khối trên trang web. Nhưng ngày nay, ai làm vậy chứng tỏ rằng hoặc ẩu, hoặc bảo thủ hoặc làm biếng cập nhật kiến thức.

Ngay lúc này, bạn phải xác định rằng áp dụng ngay các thẻ Semantic Web vào thực tế ngay khi có thể. Tránh dùng thẻ một cách bản năng, theo thói quen vì không tốt về Accessibility. Các máy tìm tin cũng đánh giá thấp các trang web dùng thẻ vô tội vạ. Đó là nguyên nhân nhiều người cứ than vãn vì sao trang web họ không thể tìm thấy trên Google, làm SEO các kiểu chìm nghỉm tận đâu.

Bạn sẽ tự gõ lại mã HTML, trong phần BODY, file bai5.html của bạn, theo hình lần lượt:

Phần Header dùng thẻ HEADER, bên trong có tiêu đề H1

Phần có 3 cột sẽ được bọc trong 1 DIV:

Một DIV bọc 2 ASIDE, 1 MAIN

Tự phát triển mã cho đầy đủ. Cứ lần lượt theo thứ tự giao diện như đọc sách: từ trên xuống dưới, từ trái qua phải. Tất nhiên, mã HTML bạn viết trong file HTML sẽ chỉ có từ trên xuống dưới, chứ không thể làm cách khối giống như trên hình.

Khi xem trang, nếu ở bài này mà bạn vẫn chưa hiểu rằng tại sao nó vẫn chưa đẹp, mà chỉ chữ, hình cứ hàng dọc từ trên xuống dưới, không giống tí gì giao diện trên, bạn nên quay về Bài 1.

Chi tiết hóa thêm từng khối một bên trong DIV 3 cột

Nhắc lại cho nhớ: một thẻ (tag) khi được viết hoàn chỉnh có thẻ mở, thẻ đóng, kèm các attribute thì được gọi là một thành phần/ phần tử (element). Trong DIV chứa 3 element:

ASIDE đầu tiên:

Thẻ ASIDE đầu tiên, bên trái
ASIDE có chứa 2 phần tử con là H2, ULUL

Thuộc tính class=”left-nav” là để chuẩn bị cho những bài sau khi ta học đến CSS.

Thẻ UL khởi tạo danh sách không có thứ tự, thẻ LI là mỗi mục trong danh sách. Trong thẻ LI ta có dùng thẻ A mục đích để khi click chuột vào mục sẽ ra chi tiết về món. Hiện nay chưa có trang hoặc URL nào để thẻ A trỏ đến, người ta dùng href=”#” để sau này điển URL thay vào dấu #

Bóng đèn, mẹo hay Nếu bạn muốn tạo danh sách có thứ tự, thay UL bằng OL

Ngay sau thẻ đóng ASIDE, tiếp tục đến MAIN, đây là một thẻ tương đương DIV nhưng ám chỉ rằng nơi đây đích thị là nội dung chính của trang web.

MAIN có đoạn mã gần như sau:

Thẻ main HTML
Mỗi dòng có 3 hình ảnh thức uống

Vùng khoanh màu đỏ trên hình là 1 đoạn mã đại diện, KACBT không viết thay bạn mọi thứ. Bạn tự tạo thêm 2 bản giống vậy ngay bên dưới, sửa giá trị thuộc tính cho phù hợp để cuối cùng có tổng cộng 3 dòng, mỗi dòng 3 hình, tức 9 hình đầy đủ như minh họa ở hình layout.

Hình 1 đến hình 9 (các file cup1.png, cup2.png,… ở thẻ IMG) bạn tự tìm kiếm hình ảnh trên Internet và chỉnh kích cỡ cho các ảnh để mỗi ảnh không rộng quá 320 pixel khiến cho màn hình desktop không chứa nổi 3 ảnh theo chiều ngang, mobile bị tràn lề. Gợi ý từ khóa tìm kiếm: bubble tea images

Đến đây, ta học thêm được 2 thẻ mới bữa giờ chưa biết:

  1. Thẻ FIGURE để đóng khung hình lại giống như tranh treo tường ở nhà bạn vậy. Bên trong sẽ có tranh vẽ trên nền chất liệu vải hoặc giấy. Hoặc dễ hình dung hơn, bức hình minh họa trong sách, báo. Bản thân FIGURE chỉ là khung tranh, bạn phải có thẻ IMG bên trong, nếu cần có lời ghi chú cho hình ảnh thì dùng thêm thẻ FIGCAPTION, nếu không ghi chú gì thì khỏi có FIGCAPTION.
  2. Thẻ FIGCAPTION để có dòng ghi chú cho hình ảnh IMG đang là anh chị em cùng cấp với FIGCAPTION trong cùng cấp cha mẹ FIGURE.

Quái, tại sao lại đẻ thêm ra FIGURE, FIGCAPTION chi cho rắc rối sự đời? Chỉ cần IMG với thuộc tính alt, title là đủ để dàn hình cho đẹp rồi. Một lần nữa, KACBT muốn nhấn mạnh: bất cứ thẻ HTML nào được tạo ra cũng có mục đích của nó, thẻ FIGURE giúp bổ sung tính ngữ nghĩa cho thẻ IMG, và nó cũng không chỉ được dùng để chứa IMG bên trong, bạn có thể tự Google tham khảo thêm.

Việc tham khảo danh sách các thẻ, áp dụng trong khi làm web chính là sự sáng tạo của người làm web. Một kết quả có nhiều cách làm khác nhau. Đó chính là sự thú vị của thế giới HTML, web.

TABLE thuộc MAIN sẽ là một bảng đơn giản. Kết quả như hình:

Thẻ table có THEAD, TBODY, CAPTION.
Lần này TABLE có thêm CAPTION

Bạn nhìn hình trên, suy nghĩ và thử viết mã HTML, sau đó đối chiếu với mã:

Bảng biểu có dùng caption
Đoạn mã TABLE có CAPTION

Giờ đây, khi khách hàng nhìn qua vài thứ hấp dẫn trên trang web của bạn, họ muốn đặt món ngay. Bạn hãy đáp ứng nhu cầu này ngay tức thì bằng cách dùng form, gợi ý sau:

Form đặt món ăn vặt, trà sữa online
FORM đặt món online

Mô tả cách làm một cách thô sơ để bạn thử làm: đầu tiên tạo thẻ FORM. Bên trong FORM tạo ngay FIELDSET. Bên trong FIELDSET tạo ngay LEGEND có dòng text Form đặt món. Đóng LEGEND ngay.

Vẫn còn đang trong FIELDSET làm tiếp các LABEL, INPUT (có các type=”text”), SELECT (có tag con là OPTION), cuối cùng là nút Đặt món có thể chọn INPUT hoặc BUTTON đều được, nhưng nhớ type=”submit thì nút bấm mới có tác dụng gửi thông tin.

Đối chiếu mã bạn tự viết với mã dưới:

Mã HTML của FORM hoàn chỉnh

Đoạn mã trên do KACBT kèm một ngươi trực tiếp làm, bạn có phát hiện ra sai sót vì thích nhanh nên làm kiểu copy & paste khi chưa đủ độ tinh thông?

Bạn hãy sửa lại giúp ở thẻ SELECT giờ giao hàng, name lúc này không thể là item được, phải đổi thành time hoặc gì đó khác vì nó trùng với gọi món trên, khi gửi FORM sẽ mất mát thông tin.

Thuộc tính maxlength=”số nguyên” quy định độ dài tính theo byte (theo chuẩn UTF-16) mà INPUT chấp nhận. Để tránh những người duyệt web ác ý (nhưng không đủ trình độ để dùng công cụ khác trình duyệt web) nhập dữ liệu rác, dài lê thê lên server, bạn nên đặt maxlength để trình duyệt loại bỏ những thứ dài dòng.

Hôm trước, chúng ta có biết thuộc tính size của INPUT. Size là để chỉ số ký tự có thể hiện lên màn hình, hiểu đơn giản đó là độ rộng khi xem INPUT trên màn hình. Còn maxlength là sức chứa về dữ liệu của INPUT. Trong thực tế, dòng chữ dài vượt khỏi phạm vi màn hình là hết sức bình thường.

Biểu tượng cảnh báo Thuộc tính id, name là không được chứa giá trị trùng nhau (trừ name sử dụng cho RADIO), nghĩa là nếu đoạn mã bên trên đã có id=”gia-tri-a” thì đoạn dưới không được id=”gia-tri-a” nữa, mà phải id=”gia-tri-khac”. Với name, tương tự như id.

ASIDE thứ 2 (sau này sẽ thành cột bên phải, còn giờ nó cứ nối đuôi MAIN mà thôi)

ASIDE lề phải có 2 khối DIV con

Gần giống với ASIDE đầu tiên đã đề cập trước, chỉ khác rằng bây giờ được chia làm 2 khối DIV. Khối đầu tiên là để dành cho Ưu đãi, khối thứ hai dành cho Giải trí.

À há, bạn có kịp phát hiện ra đoạn mã trên thiếu gì đó? Hãy bổ sung H2 làm tiêu đề cho mỗi khối nhé.

Đến đây, chúng ta đã hoàn thành phần phức tạp nhất của trang web rồi. Nếu tóm tắt mã gọn lại sẽ trông như này:

Hoàn chỉnh phần 3 cột
Mã HTML được lược bớt để xem tổng quát

Phần chân trang (footer)

Phần này đơn giản, chẳng có gì đáng nói chỉ có điều là thay vì dùng thẻ P hoặc H1 đến H6 như thường dùng, kết hợp một thẻ mang tính ngữ nghĩa ADDRESS.

Phần footer trang web
FOOTER quá đơn giản.

Cũng để ý rằng thuộc tính href của thẻ A như trên là để người truy cập có thể click vào số điện thoại sẽ mở chức năng gọi điện ra, thuận tiện gọi ngay mà không phải ghi nhớ rồi nhập số gọi thủ công.

Tạm hoàn tất việc “viết mã thô” cho trang HTML của chúng ta. Mở trình duyệt lên, bạn sẽ thấy tất cả xếp hàng dọc dài, nếu ảnh không xuất hiện, cần kiểm tra lại đường dẫn để sửa.

Giải thích việc xuất hiện thuộc tính class

Khi học về CSS ta sẽ hiểu rõ hơn về thuộc tính class. Hãy cứ gọi là class luôn nhé, vì KACBT cảm thấy chữ dùng chữ “lớp” có gì đó tối nghĩa, từ khác là từ nào trong tiếng Việt vẫn chưa nghĩ ra.

Thuộc tính này sẽ có giá trị là một hoặc nhiều tên class (classname) sẽ dùng làm selector khi viết các rule bên CSS.

Để dễ hình dung, bạn đang đứng trần truồng, và bốc từng món đồ mặc vào người, những cái đó nếu viết theo ngôn ngữ HTML trông như sau:

Giải thích về class phần 1
Giá trị của class tự đặt, miễn đúng quy cách tên gọi trong HTML

Theo như hình trên, người ta nói thẻ NGƯỜI có 1 classnameáo. Tương tự, ta có thể có thêm các classname khác, chúng cách nhau bằng 1 khoảng trắng.

Giải thích về class phần 2
Classname áo, quần cách nhau bằng khoảng trắng

Khi class chứa nhiều giá trị, gọi là Multiple Classes.

Chìa khóa ghi nhớ Classname phân biệt chữ HOA, chữ thường nên phải hết sức cẩn thận. class=”my” khác class=”My”

Minh họa một classname phức tạp.
Multiple classes

Kết thúc bài này: khi viết CSS thì classname sẽ có dấu chấm đứng kề trước nó. Ví dụ ở đây ta có class=”zone-heading” thì khi viết CSS sẽ có .zone-heading

Bài tập thực hành mở rộng vấn đề

Phần MAIN hãy còn rất sơ khai với 9 cái hình đứng chơi vơi mà thôi. Bạn hãy làm cho nó thêm nhiều thứ cho ra một trang dài dài. Ví dụ:

  1. Dùng TABLE tạo một bảng các món uống dành cho mùa hiện tại, ngay trước phần form đặt món.
  2. Thêm một vài hình ảnh chụp quán ngay sau phần đặt món cho đẹp.
  3. Làm phần “Nhận xét của khách hàng”, đơn giản là làm một DIV, bên trong có chứa 1 IMG để avatar nhỏ của khách hàng, 1 P để ghi lời nhận xét.

Đừng quên tham gia thảo luận bài này.

Bài 4: trang web có biểu mẫu

Các đơn từ làm sẵn trên giấy có để chỗ trống để điền được gọi là biểu mẫu (form). Trong tài liệu HTML cũng thường hay dùng biểu mẫu để nhận thông tin từ người dùng.

Tạo một biểu mẫu đơn giản

Dùng thẻ FORM để khởi tạo một biểu mẫu. Bên trong biểu mẫu này sẽ dùng các thẻ LABEL để ghi lời nhắc cho mục cần điền, và thẻ INPUT chính là chỗ để điền thông tin.

Hình 1. Form đơn giản với 3 trường INPUT

Form ở trên chưa có nút gửi, nên chỉ có thể điền thông tin xong, ngắm nhìn mà không làm gì được thêm. Chúng ta sẽ lần lượt làm nó hoàn thiện hơn.

Các thuộc tính của FORM

Form thường có 2 thuộc tính đi kèm:

  • Thuộc tính action thường kèm giá trị là một địa chỉ URL để thông tin form gửi đến địa chỉ đó xử lý. Thông thường, giá trị là một file cùng domain với file HTML chứa form. Ví dụ: action=”save.php”. Người làm web tĩnh không cần biết về việc xử lý dữ liệu thế nào. Việc đó dành cho người lập trình xử lý ở phía server (server-side hoặc back-end). Giá trị action cũng có thể là một URL trỏ tới một dịch vụ chuyên xử lý form bên ngoài, nhưng gần đây sẽ hiện cảnh báo đến người dùng khi gửi form.
  • Thuộc tính method, nếu bản chất việc gửi một mẩu thông tin ngắn lên để yêu cầu truy vấn về một lượng thông tin lớn hơn từ web server (ví dụ như form tìm kiếm Google, tìm kiếm/ lọc thông tin ở các trang web báo chí, thương mại điện tử) thì ta dùng method=”get” . Nếu ta gửi nhiều trường thông tin, có upload file, ta dùng method=”post”

Từ nay trở đi, mỗi khi tạo mới 1 biểu mẫu, hãy nhanh tay nhập nội dung sau:

Khi tạo FORM chưa xác định method, không có upload file

Nếu FORM có upload file, dùng mẫu sau:

FORM có trường input kiểu file

Các trường INPUT trong FORM

Hầu hết các thẻ đều có thể đặt bên trong một FORM. Các thẻ như DIV, P, SPAN,… này nọ để hiển thị các dòng chữ, các hướng dẫn giúp cho việc điền form được dễ dàng hơn. Tuy nhiên, có những thẻ sau đây bạn cần biết vì đây chính là nơi để thực sự nhận thông tin/ dữ liệu người dùng nhập vào hoặc thẻ đó chỉ nên dùng bên trong form để trang trí, định dạng form.

Thẻ INPUT: thẻ này là thẻ dùng chỉnh để tạo hộp chữ nhật (textbox) cho phép nhập dữ liệu. Thẻ INPUT thường có các thuộc tính id, class, title (là những thuộc tính không đặc trưng riêng cho INPUT), và các thuộc tính (attribute):

type: chấp nhận các giá trị text, email, radio, number, tel, submit, button, hidden…. Trong đó, giá trị text chiếm phần lớn. Ví dụ: <input type=”text” name=”area”>. Một khi type=”hidden” đây là một điều khá đặc biệt, INPUT sẽ không có biểu hiện gì hiện ra trên màn hình nhưng nó vẫn có thể chấp nhận value=”giá trị”. Điều này thật quý giá khi người làm web cần gửi những thông tin để server xử lý, mà những thông tin này người sử dụng bình thường không cần quan tâm, không cần nhìn thấy. Chúng ta sẽ rõ điều này khi học căn bản về lập trình server-side (còn gọi là back-end).

name: chấp nhận giá trị là một tên hợp lệ (tra cứu ID and NAME tokens), bắt đầu luôn bằng ký tự. Nếu FORM được sử dụng đúng, không dùng kỹ thuật AJAX để gửi form, các trường INPUT luôn có name để việc gửi thông tin lên server giúp cho bên lập trình có thể lấy được thông tin. Giá trị của name nên đặt trùng với giá trị của id (nếu id không chứa dấu gạch ngang) để dễ đọc mã, gỡ rối. Ví dụ: <input id=”family” type=”text” name=”family”>

value: chấp nhận giá trị rỗng hoặc giá trị mặc định tạo trước hoặc được nạp từ server với những input có giá trị định sẵn ban đầu. Khi INPUT không có value đồng nghĩa với value=”” (có giá trị rỗng). Ví dụ: <input id=”phuong-tien” type=”text” name=”phuong_tien” value=”Xe máy”>. Giá trị của value có thể là kiểu số, kiểu chuỗi, tiếng Việt/ Anh đều được tùy theo type là gì, nếu type là email thì phải đúng cú pháp của email, nếu type là number thì số nguyên âm, 0, số nguyên dương.

size: chấp nhận giá trị là một số nguyên, mỗi số xấp xỉ với độ rộng của một ký tự, chỉ định độ rộng của hộp chữ nhật, ngày nay ít dùng thuộc tính này vì sẽ định dạng bằng CSS cho độ chính xác đến từng pixel cao hơn. Ví dụ: <input type=”number” name=”year” size=”8″>

required: đây là thuộc tính không có giá trị, bản thân của nó chính là giá trị. Những trường INPUT nào bạn muốn rằng người dùng buộc phải điền hoặc chọn thông tin mà không được bỏ trống/ bỏ qua thì bạn chỉ cần có thuộc tính này, nghĩa là “bắt buộc phải có” (hoặc được yêu cầu). Ví dụ, để liên lạc được thì phải có số điện thoại: <input type=”tel” name=”phone” required> để người dùng buộc phải điền số điện thoại.

placeholder: trước đây, khi HTML phiên bản 4, người ta phải dùng giá trị tạm, title các kiểu để gợi ý người dùng biết nhập thông tin. Ngày nay, placeholder giúp bạn điền gợi ý. Ví dụ: <input type=”text” name=”hoten” placeholder=”Nguyễn Văn Thành”>

Thẻ INPUT là một trong những thẻ thuộc loại rắc rối, phức tạp nhất trong HTML. Cần phải thực tập nhiều để quen, làm chủ được nó.

Chìa khóa ghi nhớ Luôn có thuộc tính name cho INPUT. Ngay khi tạo thẻ INPUT hãy name=”ten” ngay để không sai sót.

Một FORM hơi phức tạp

Giờ đây, chúng ta có một FORM khác, phức tạp hơn:

Mã HTML của một FORM có chút phức tạp

Kết quả tạo ra biểu mẫu form từ đoạn mã trên:

Bấm nút Gửi đăng ký ở trang web từ mã do bạn viết xem sao

Vài dòng giải thích để bạn hiểu thêm về đoạn HTML khá dài trên:

  • Thẻ INPUT khi có type=”radio” hiện lên nút tròn để chọn.
  • Thẻ LABEL có thể đứng trước hoặc đứng sau INPUT đều được tùy theo bố trí sao đó cho đẹp. Với các INPUT có type=”radio”, type=”checkbox”, đặt LABEL phía sau sẽ phù hợp hơn, còn lại các INPUT khác, LABEL phía trước.
  • Khi INPUT có type=”radio” thì phải có ít nhất 2 cái trở lên (khi click chỉ chọn 1 mà thôi) trong cùng FORM thì mới có sự chọn lựa. Lúc này name của các radio này phải có giá trị trùng nhau.
  • Khi INPUT có type=”checkbox” sẽ hiện lên hộp vuông, và có thể click chọn nhiều mục khác nhau, các name không đặt cùng tên như radio.
  • Nên viết đầy đủ là <label for=”id-của-input”>Gợi ý cho INPUT</label> : tại sao nên viết kiểu này mà không dùng các thẻ như P, SPAN? Lý do: 1 web được làm tốt cần hỗ trợ “Web accessibility” cho phép những người có khuyến tật về mắt sử dụng trình duyệt đọc hiểu được mục đang xem là gì. Đây là một vấn đề nhân văn mà những người sáng chế ra Web ngay từ đầu đã khuyến khích. Ta nhớ đặt <input id=”id-của-input” type=”text”> để LABEL trỏ đúng, khớp với INPUT này.
  • Viết <label>Mục input</label> là cách làm ẩu, không chuẩn. Ta dùng cách <label for=”id-của-input”>Mục input</label> hoặc ta đặt INPUT bên trong LABEL như sau: <label>Họ và tên <input type=”text” name=”hoten” size=”20″></label>

Hãy tự sửa code sai chúng ta vừa tạo ra

Khi học đến đây, bạn chợt phát hiện ra rằng KACBT dạy bậy bạ. Nhất là ở Hình 1 ở đầu bài đã dắt bạn đi sai bậy bạ mất tiêu rồi. Thực sự, việc sai sót rất bình thường, trong quá trình học người học cần phải tham khảo vài nguồn khác nhau, thực hành nhiều, có lúc phải “cãi lại thầy” mới mong tiến bộ.

Nếu bạn đọc bài và làm theo, sai đúng thế nào cũng mặc kệ, bạn sẽ rất khó tiến bộ. Đó là điều KACBT muốn truyền tải qua bài này.

Bóng đèn, mẹo hay Tham khảo danh sách đầy đủ các type của INPUT.

Tự học thêm khi FORM có thêm các trường món khác

Hãy tra cứu cách sử dụng FIELDSET, LEGEND, INPUT có type=”file”, BUTTON, TEXTAREA cho FORM của bạn. Tạo ra ít nhất 5 FORM khác nhau, mỗi FORM có độ 5-7 trường để thực hành.

Thảo luận ở diễn đàn dành cho bài này.

Bài 3: trang web có bảng biểu

Kẻ khung, bảng biểu là một việc thường thấy trong nhiều loại tài liệu khác nhau. Do đó, bảng biểu dùng thẻ TABLE cũng là một thứ thường sử dụng đến trong tài liệu HTML.

Tạo ngay một bảng đơn giản

Mô tả: dùng thẻ TABLE để tạo bảng, nhưng bản thân thẻ này không là gì nhiều, bên trong nó phải có thẻ TR, TD để tạo ra các dòng, cột.

Một bảng đơn giản, thô sơ nhất

Khi xem kết quả, nhìn lại code, sớm nhận ra các thẻ TR để tạo dòng, các thẻ TD để tạo cột. Lúc này, các dòng có số lượng cột bằng nhau. Muốn bao nhiêu dòng có bấy nhiêu cặp thẻ mở, đóng TR.

Thử cải tiến bảng trên bằng cách thêm cột Stt (số thứ tự) nằm trước cột tên, cũng thêm vài người nữa vào danh sách và đó đánh số thứ tự bạn nhé. Kết quả như sau:

Sau khi thêm cột Stt

Ở trên là để tạo bảng đơn giản, ít phải trang trí gì cho bảng. Những bảng biểu đầy đủ, phức tạp hơn, có thể có tiêu đề khác màu chữ, màu nền, chân bảng cũng khác. Ta cần phải sử dụng một TABLE đầy đủ.

Một table hoàn chỉnh cần phải có phần thead, tbody, tfoot

Trong thực tế, chỉ cần có thead, tbody là đã khá đầy đủ nếu không có phần tfoot cũng không sao. Nhưng nếu có nhu cầu in ấn khi bảng dài, có đầy đủ các phần sẽ giúp cho thuận lợi.

Một Table đầy đủ sẽ có đoạn mã như này

Về sau, khi học nâng cao thêm về TABLE, thêm thẻ cần dùng đến như COL, COLGROUP, CAPTION.

Một table có cột (column) được ghép

Để ý dòng TD có thuộc tính colspan kèm giá trị để thấy rằng ghép bao nhiêu cột với nhau.

Bảng có 2 cột ghép làm 1

Một table có dòng (row) được ghép

Tương tự, trong bảng người ta có thể ghép dòng với nhau. Xem mã sau:

Sử dụng thuộc tính rowspan để ghép dòng

Cần chú ý: sau khi ghép dòng, dòng tiếp theo số cột giảm đi 1.

Bạn có thể tự thực hành ghép dòng, ghép cột trên cùng một TABLE như bài tập thực hành.

Tham gia thảo luận để hiểu bài hơn, làm được các bảng biểu phức tạp hơn.

Bài 2: trang web có hình ảnh

Chuẩn bị thực hành bài này: bạn mở thư mục D:\xampp\htdocs và tạo một thư mục images bên trong htdocs.

Chuẩn bị hình ảnh

Click chuột phải lên từng hình ảnh bên dưới, chọn Save image as và đưa ảnh vào thư mục images vừa tạo.

Hình ảnh cây ớt trái tròn
Cây thần kỳ có trái tạo ra điều kỳ diệu
Cây trầu bà trong hũ nước
Cây trầu bà trồng trong chậu thủy tinh

Viết mã HTML để hiện hình ảnh

Soạn đoạn mã như sau vào BODY của bai2.html

Nội dung web có 3 hình ảnh

Xem file bai2.html bằng trình duyệt. Bạn có nhận xét gì? Lần lượt 3 hình ảnh “nối đuôi nhau” hiện lên, kèm với dòng chữ ngay bên trên hình ảnh cho biết đó là loại cây nào.

Vẫn còn gì đó rất thô sơ, chưa hình hài trang web bạn thường thấy. Sẽ phải đến bài 6 chúng ta mới có thể bố cục lại trang, giờ chủ yếu học cách sử dụng các thẻ cho thuộc bài một chút.

Về mặt lý thuyết, chúng ta có thể phóng to, thu nhỏ, bóp méo hình ảnh bằng cách thay đổi giá trị width, height của hình ảnh. Hãy thử thay đổi để xem sự thay đổi.

Việc thay đổi kích thước ảnh kiểu này không được khuyến khích bởi vì sẽ làm cho trình duyệt xử lý vất vả, trang web không được đánh giá cao. Nhưng đây vẫn là cách nhanh nhất cho người làm nghiệp dư, không rành phần mềm xử lý ảnh hoặc không muốn tốn thời gian chỉ để nhanh chóng có trang web phục vụ cho việc gấp gáp.

Nếu chỉ muốn thay đổi kích thước một chiều, còn chiều kia tự động tỉ lệ theo, bạn chỉ cần thay đổi giá trị của hoặc width hoặc height, giá trị của width hoặc height tương ứng với nó trống (tức là hai dấu nháy kép đứng cạnh nhau không có gì bên trong, ví dụ: height=”” )

Thêm thuộc tính gì đó cho hình ảnh

Sau thuộc tính alt, thử thêm thuộc tính title. Ví dụ: title=”Giá bán: 80K/cây không chậu” vào 1 trong 3 thẻ IMG.

Khi rê chuột lên hình giờ đây xuất hiện một dòng. Ngạc nhiên chưa?

Thêm thuộc tính id cho IMG, thuộc tính này theo thông lệ nên đứng đầu tiên nhất, trước cả thuộc tính src

Kết quả sau khi thêm 2 thuộc tính trên, trông gần giống:

Thêm thuộc tính id, title cho thẻ IMGIMG

Như đã nói trước, HTML không quan trọng khoảng trắng nhiều hơn 1 ở các thuộc tính và cũng có thể ngắt dòng. KACBT ngắt dòng để ảnh minh họa không quá rộng, khi bạn nhập thuộc tính title không cần phải xuống dòng như hình trên.

Thực hành mở rộng

Giờ đây, giả sử bạn muốn những người lần đầu mua cây cảnh, ít có kiến thức về cây muốn biết về cây mà bạn chưa có thời gian để viết bài giới thiệu, hãy liên kết đến bài viết bên ngoài, một nguồn đáng tin cậy là trang Wikipedia để người ta đọc bài.

Dùng thẻ A bọc thẻ IMG

KACBT chỉ minh họa một ví dụ, hai ảnh còn lại bạn tự làm. Thẻ A chỉ nên bọc trọn thẻ IMG mà thôi, không cần phải bọc thẻ BR mà cho BR nằm ngoài.

Thẻ A bọc lấy IMG để tạo thành liên kết từ hình ảnh

Thuộc tính target có giá trị _blank của thẻ A là để khi click vào hình ảnh, mở trang Wikipedia ở một tab mới của trình duyệt web.

Thêm thuộc tính loading cho IMG

Thẻ IMG trong thực tế có thể tải về những ảnh có kích thước khá lớn mà không thể giảm bởi vì chất lượng ảnh thể hiện ấn tượng với sản phẩm/ dịch vụ được cung cấp như ảnh về nữ trang, đồng hồ trang phục cưới, đồ nội thất cao cấp,… ta cần áp dụng thuộc tính loading đi kèm giá trị lazy.

Cách làm: sau thuộc tính alt, bạn thêm loading=”lazy” là xong. Như hình:

Việc này gọi là Native Lazy Loading

Chúng ta chỉ có 3 ảnh và nếu nằm gọn trong một khung màn hình đầu tiên thì áp dụng loading=”lazy” chủ yếu để thực hành.

Trong thực tế, bạn chỉ nên áp dụng với IMG nằm ở trang màn hình thứ hai trở đi, vì nếu đặt ngay ở trang đầu, người truy cập sẽ không thấy ảnh nạp về.

Thuộc tính usemap – ít dùng nhưng hữu ích

Ngay tên thuộc tính đã thấy có liên quan đến bản đồ. Thuộc tính này hữu ích trong việc bạn có một cái ảnh trông như bản đồ hoặc có sự phân định giữa các vùng. Việc cắt ảnh này ra nhiều mảnh và mỗi mảnh là một thẻ A bọc IMG để người duyệt click vào tham khảo từng vùng là cái gì đó… rảnh rỗi.

Click chuột phải lên ảnh này, lưu ảnh về thư mục images

Rồi nhập đoạn code vào sau thẻ IMG cuối cùng của bạn.

Đoạn này sau IMG cây thần kỳ

Khi xem, rà chuột lên từng cây và click để xem bài về cây ấy. Dùng công cụ đồ họa để đo, tạo các vùng map trên hình rất mất thời gian ta có mẹo:

bóng đèn lóe sáng sử dụng trang web imagemap chấm org để tạo map

Giải thích: thẻ IMG có thuộc tính usemap, có giá trị trỏ đến tên của map (bản đồ), nhớ là tên bản đồ luôn có dấu # đứng trước.

Thẻ MAP dùng để định nghĩa bản đồ, thuộc tính name có đặt tên, lúc này không có dấu #. Trong MAP ta tạo ra 3 AREA có các thuộc tính target, href như ở thẻ A, alt như ở thẻ IMG, title như ở những thẻ cần rê chuột vào hiện dòng chữ tooltip.

Thuộc tính coords chỉ định vùng chữ nhật có tọa độ x1, y1, x2, y2 tính theo pixel trên ảnh ban đầu. Thuộc tính shape có giá trị rect nghĩa là vùng chữ nhật. MAP chấp nhận cả vùng đa giác, tròn, sau này nâng cao hơn chúng ta sẽ biết. Bạn có thể tham khảo.

Ở bài này, trông đơn giản vậy nhưng ta đã học/ ôn được các thẻ A, P, BR, IMG và các thuộc tính title, id, loading, usemap.

Luyện tập

  1. Trên thế giới web, có các định dạng file ảnh thông dụng: GIF, đuôi JPEG (đuôi .jpeg hoặc .jpg), PNG, các hình icon có thêm file ảnh SVG. Ngày nay có thêm các định dạng mới như WEBP, AVIF, HEIC đang dần phổ biến và dần được các trình duyệt hỗ trợ. Bạn hãy tìm hiểu (qua việc Google) thêm về các định dạng này để nắm được lúc nào nê sử dụng định dạng nào.
  2. Ảnh có nền trong suốt là gì? Những định dạng nào hỗ trợ hình ảnh có nền trong suốt.
  3. Tạo một usemap dùng bản đồ tỉnh của bạn sinh sống, yêu cầu: khi rê chuột lên mỗi huyện sẽ hiện tên huyện, kèm diện tích.
  4. Tham gia thảo luận để được giải đáp khúc mắc, đào sâu vấn đề.

Cách tiếp cận vấn đề

Trong thực tế có 2 cách tiếp cận vấn đề thông dụng. Bạn cần sớm chọn một trong hai để bắt đầu, chần chừ sẽ khiến thời gian bỏ bạn lại phía sau.

Hai cách tiếp cận này hay được áp dụng trong khoa học, nhưng trong đời sống chúng ta cũng cần biết để giải quyết các vấn đề hiệu quả hơn.

Cách 1: từ chi tiết đến tổng quát (quy nạp)

Đi từ quan sát, hình thành mẫu, giả thuyết cần chứng minh, lý thuyết

Quy nạp có gì đó mang tính chất làm để học. Bắt tay vào quan sát, thử bắt tay làm, rút ra được những mẫu thứ chung, rồi kiểm nghiệm, cuối cùng đưa ra lý thuyết mang tính tổng quát hóa.

Quy nạp giúp ta hiểu được cái chung, tổng quát từ những cái riêng, bộ phận.

Cách 2: đi từ tổng quát, chung đến riêng, bộ phận (diễn dịch)

Đi từ lý thuyết đến giả thuyết, quan sát, cuối cùng xác nhận

Bạn sẽ tìm hiểu lý thuyết trước, rồi xem cách cách người ta đặt giả thuyết, quan sát, lập luận, cuối cùng là xác nhận.

Diễn dịch giúp cho từ cái chung, tổng quát hiểu được cái riêng.

Hai cách trên đều giúp người tiếp cận nâng cao quá trình nhận thức. Không có cách nào ưu điểm hơn cách nào mà tùy từng tình huống áp dụng một cách linh hoạt.

Cách 3: vô chiêu nghĩa là hữu chiêu, hữu chiêu cũng là vô chiêu

Cách này lắm lúc mang lại sự thực dụng đáng ngạc nhiên, nhưng trên thế giới người ta không đánh giá cao cách làm thiếu hệ thống như cách này.

Khi là người mới học, người mới trong một lĩnh vực, bạn đừng nên áp dụng cách 3 này bởi vì nó sẽ không giúp ích, sẽ lặp lại rất nhiều sai lầm để học hỏi, tốn thời gian.

Chỉ nên sử dụng cách này khi bạn đã lên một mức gọi là thuần thục trong nghề. Giống như một võ sư, phải ở mức như Lý Tiểu Long, ông ấy mới cảm thấy Vịnh Xuân Quyền là gò bó, nên đã sáng tác ra Tiệt Quyền Đạo. Chuyện này hiếm, bạn khoan mơ mộng.

Khóa học chính thống, xịn sò về Web

Thông tin trên mạng rất nhiều, thừa mứa dẫn đến tình trạng tin dỏm, tin giả, tin kém chất lượng,… Hệ quả là nhiều người chưa vững về infomation literacy, Web literacy, digital literacy… sẽ lạc trong mê hồn trận.

KACBT xin cung cấp đến bạn một số khóa học về Web chất lượng, miễn phí bằng tiếng Anh, nếu bạn có thể học được trực tiếp từ các trang đó thay vì các bài viết ở website này quả là tuyệt vời.

  • W3Cx – Free online courses from The World Wide Web Consortium (W3C): có nhiều khóa học khác nhau liên quan đến web, bạn chỉ cần học lần lượt theo các mô-đun được liệt kê trên đó.

KACBT tự hào là một trong những người rất ít tham gia vào việc lan truyền tin giả trên mạng xã hội, cũng như có khả năng thẩm định thông tin bởi vì tiếp cận Internet từ khá sớm, công việc cũng liên quan đến việc sàng lọc thông tin rất nhiều nên độ nhạy về thẩm định thông tin khá cao.

Những lưu ý cần nhớ nằm lòng

Lưu ý cho người chỉ mới học HTML, CSS, JavaScript

Khi cài đặt XAMPP, tốt hơn hết là cài vào ổ đĩa D: hoặc E: thay vì C: mặc định. Lý do: khi Windows bị hỏng, bạn thường hay cài lại, mọi thứ bạn học có nguy cơ biến mất nếu không nhớ sao lưu.

Ban đầu, lúc mới học web tĩnh, chỉ bấm nút Start theo mũi tên đỏ ở hình bên dưới khi khởi động XAMPP mà thôi, chưa cần các chức năng khác.

Hình 1. Click nút Start để khởi động máy chủ web ApacheApache

Một khi máy chủ Apache đã chạy thành công, nút sẽ chuyển sang Stop. Nếu hiện lên dòng chữ màu đỏ báo lỗi nào đó cần phải khắc phục trước khi truy cập http://localhost/

Giả sử nếu cài XAMPP vào D: thì thư mục D:\xampp\htdocs sẽ là thư mục gốc.

Ở các bài thực hành bạn cần tạo/ lưu file vào htdocs và/ hoặc tạo thư mục con trong thư mục này và đặt cái file HTML, image, JS, CSS vào đó.

Sử dụng trình soạn thảo thô sơ mục đích là để có thể nhớ được nằm lòng một số thẻ HTML.

Tránh trường hợp mới học đã sử dụng trình soạn thảo có chức năng nhắc bài “đến tận chân răng”. Vội vàng dùng công cụ mạnh sẽ dẫn đến tình trạng lơ mơ, thiếu ghi nhớ được vài thứ căn bản buộc phải nhớ.

Khi đi phỏng vấn xin việc, nhà tuyển dụng cho bài kiểm tra trên trình soạn thảo thô sơ, ứng viên không thể nhớ được các thẻ đơn giản, thông dụng đã lộ ra rằng rất thiếu chuyên nghiệp, không vượt qua vòng phỏng vấn.

Lưu ý cho người đang học PHP

Với những bài học chưa cần đến cơ sở dữ liệu, chỉ cần khởi động gống Hình 1 ở trên. Khi nào học đến bài có cơ sở dữ liệu mới bấm nút Start ở dòng có chữ MySQL.

Cần phải nắm về HTML, CSS, JavaScript trước khi bắt tay học PHP. Đừng nghe người khác/ trên mạng xã hội nói rằng mấy cái kia không cần phải biết vì đó là lập trình front-end, còn PHP là lập trình back-end. Sai lầm chết người đấy!

Nếu bạn chỉ biết back-end, biết quá ít hoặc không biết tí gì về front-end, bạn sẽ giống như mấy gã được thuê khiêng vác dụng cụ cho sân khấu mà thôi.

Lưu ý chung cho người mới học

Sau khi kết thúc buổi học nếu bạn không có thói quen để máy tính chạy 24/7 thì bạn cần phải đóng hết các phần mềm bạn đang dùng, nhất là các phân mềm thực hành trong quá trình học. Gợi ý:

  1. Trình duyệt Microsoft Edge trên Windows 10, 11 cho đến tháng 8/2022 chưa hỗ trợ định dạng file hình ảnh AVIF, bạn sẽ không thấy được hình ảnh minh họa. Do vậy, đề xuất sử dụng trình duyệt Mozilla Firefox hoặc Google Chrome.
  2. Đóng trình duyệt web: nếu trình duyệt có ghi nhớ tab cho lần mở sau, tốt hơn hết là đóng hết từng tab để lần sau mở trình duyệt lên không bị nặng máy, hết RAM nếu máy không mạnh lắm.
  3. Đóng trình soạn thảo mã: những gì cần save thì khi được hỏi bạn nhớ Save, tránh lần sau ngồi gõ lại mất thời gian vô ích hoặc không nhớ bài cũ đã học gì.
  4. Đóng XAMPP: bấm các nút Stop ở những dòng Apache, MySQL để máy chủ được đóng, dữ liệu được lưu hoàn chỉnh.

Những lưu ý trên có vẻ thừa thãi? Thực sự, bạn cần tập thói quen “thực hành tốt” ngay từ đầu để sau này trong việc làm web sẽ mang tính chuyên nghiệp, có tác phong công nghiệp cao.

Lập trình back-end là gì?

Bạn cứ xem một trang web, một web site như một sân khấu sự kiện hoặc một bộ phim bạn xem đi cho dễ hình dung. Phần mà bạn thấy được gọi là front-end, nếu dùng tiếng Việt nó gần như là giao diện hoặc mặt tiền trang web vậy.

Vậy, phần mà bạn không nhìn thấy, như ở sân khấu, ở phim trường, những công việc vận hành nội bộ đó được xem như back-end.

Nói theo ngôn ngữ CNTT, lập trình back-end chính là lập trình ở phía server (server-side programming). Tức là mã bạn viết ra được đặt trên server, được xử lý bởi web server chứ không phải trên trình duyệt của người duyệt web.

Phần bên trái thể hiện back-end.

Suy ra từ việc làm một bộ phim, bạn sẽ dễ dàng thấy rằng kết quả của back-end sẽ được chuyển giao cho front-end để phục vụ người xem. Phim thì gọi là khán giả, những người duyệt web thì gọi là người dùng (user) hoặc khách truy cập web (visitor).

Các ngôn ngữ lập trình thường dùng để viết mã cho back-end: Python, PHP, JavaScript, Ruby, Java, C#

Với những dự án web lớn, người ta thường dùng các khung mẫu (framework) và/ hoặc thư viện (library) có sẵn thay vì làm từ đầu.

Vài framework thông dụng: Laravel (PHP), Django (Python), Spring (Java), Ruby on Rails (Ruby), Meteor (JavaScript), Node.js (môi trường phát triển JavaScript), ASP.NET MVC (C Sharp).

Cũng cần phải có cơ sở dữ liệu để lưu trữ thông tin vì bản thân ngôn ngữ lập trình tự nó không thể quản lý dữ liệu hiệu quả. Người lập trình back-end thường dùng một trong các hệ quản trị cơ sử dữ liệu (CSDL): SQLite, MongoDB, MySQL, Oracle, SQL Server, IBM DB2,…

Để kết quả tạo ra trả về được cho client (tức trình duyệt web hoặc phần mềm đóng vai trò client) thì phải có web server. Những web server thông dụng: Apache, Nginx, Lighttpd, Litespeed, Caddy, Microsoft IIS, Tomcat, Jetty.

Một số trong những thứ kể trên đi với nhau theo dạng combo nên người ta sẽ gọi tắt thành các tên bạn thương gặp như: LAMP stack, MEAN stack, MERN stack, JAMStack.

Tất nhiên, không bắt buộc bạn phải đi theo bộ chuẩn như trên nếu bạn là một người viết mã khá. Nếu áp dụng cách kết hợp lạ, bạn sẽ đối mặt vấn đề khó tra cứu, tham khảo tài liệu trên các cộng đồng chia sẻ công cộng về lập trình một khi bạn gặp vướng mắc trong quá trình lập trình, viết mã.

Đồ nghề cho người mới bắt đầu

Những công cụ bạn cần phải trang bị cho máy tính của bạn trước khi bắt đầu, nếu không, bạn sẽ chẳng có cái gì để thực hành theo những bài viết.

  1. Trình soạn thảo văn bản thô Notepad Plus Plus
  2. Máy chủ web (web server) XAMPP
  3. Trình soạn thảo code trực tuyến CodePen (nên tạo một tài khoản để có thể lưu code)

Chỉ cần bấy nhiêu đó thôi, trình duyệt web thì có thể dùng Mozilla Firefox, Microsoft Edge hoặc Google Chrome đều được, một trong những thứ đó hẳn có trên máy tính của bạn.

Dùng ảnh AVIF cho tốc độ nạp cao

KACBT từ ngày 23-08-2022 thử áp dụng ảnh AVIF để tiết kiệm dung lượng lưu trữ một phần, một phần giúp cho trang nạp xuống nhanh hơn. Việc này có thể làm mất thời gian hơn một chút bởi vì WordPress chưa chính thức định dạng này.

Thay vì nói dài dòng, biểu diễn luôn cho bạn thấy hình ảnh bên dưới:

Cô thợ rèn tốc độ
Ảnh ban đầu PNG 552.987 bytes, ảnh bạn đang thấy 54.124 bytes

Ảnh gốc và ảnh AVIF cách nhau khá nhiều, ảnh AVIF chỉ có kích thước 10% so với ảnh gốc, nhưng chất lượng xem trên màn hình máy tính, điện thoại thông dụng gần như không giảm bao nhiêu.

Điều đó nói lên rằng nếu bài này có chừng 10 hình ảnh, KACBT đã giảm được kha khá kích thước file. Từ đó giúp cho trang web nạp xuống trình duyệt người vào đây học làm web nhanh chóng hơn. KACBT cũng tiết kiệm được không gian lưu trữ trên web server.

Cách dùng ảnh AVIF hơi mất công nhưng khá đơn giản

  • Upload ảnh JPEG hoặc PNG đang có lên trang avif chấm io để chuyển đổi định dạng. Kết quả sẽ tải về được file ảnh dạng AVIF.
  • Dùng trình FTP client để upload ảnh vừa tải về lên thư mục wp-content/upload/2022/08 (thay bằng năm, tháng hiện tại). Nếu muốn upload qua chức năng Media của WordPress đòi hỏi phải chỉnh chút ít code trong file functions.php, ngoài phạm vi bài viết này.
  • Chèn hình ảnh định dạng AVIF vào bài viết của bạn với chức năng “Chèn từ URL” khi dùng hộp thoại chèn ảnh lúc soạn thảo bài.