Biểu tượng website Khó ăn cát bê tông

Danh mục: Chưa phân loại

Cách tiếp cận vấn đề (trong việc tự học)

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.

Cách 4: dễ áp dụng cho người ít học hành trường lớp

Giả sử thuở đi học bạn chán ghét trường lớp, hoặc bạn nghỉ học sớm, đâu đó chưa hết trung học phổ thông, điều đó không có nghĩa rằng khi ra đời bạn hoàn toàn là một kẻ dốt nát, bạn có thể vượt lên chính minh, hoặc hơn người khác bằng con đường tự học.

Học suốt đời quan trọng hơn nhiều so với chỉ học ở trường lớp, khi rời trường là ngừng học hỏi. Có những lĩnh vực, trường đời tốt hơn trường học nhiều, và đa phần người ta hơn nhau ở trường đời, thành tích trường học chỉ là quãng thời gian trước khi trưởng thành.

Bạn có nhận xét thấy rằng ở trường học thì bạn được học bài học trước, sau đó mới thực hành, mới làm bài và chấm điểm. Trong khi đó, trường đời hoàn toàn ngược lại: bạn phải làm, thất bại, thậm chí là thất bại thảm hại/ phá sản/ trắng tay/ nếm trái đắng…. đủ kiểu rồi mới học được bài học.

Vậy thì, cách học KACBT muốn nói ở đây là bạn có thể tháo tung cái máy tính ra để học. Học làm web thì bạn có thể quậy tưng một trang web lên, mở mã HTML của nó ra thay đổi cái nọ cái kia để hiểu cách nó hoạt động.

Tất nhiên, những thứ như đồ gia dụng, những thứ vật hiển hiện dạng vật lý sờ mó được sẽ dễ hiểu hơn cho phần đông người trong chúng ta, so với những thứ trừu tượng như thuật toán viết mã, phần mềm.

Trong quá trình học chắc chắn sẽ có những lúc khó khăn, nản lòng, mông lung, vô định,… vì thế không phải đóng cửa trong phòng “tu luyện” mà còn phải tìm câu lạc bộ, hội nhóm để tới đó giao lưu, học hỏi, gặp gỡ những người đi trước, bạn đồng hành để việc học trở nên vui vẻ, nhẹ nhàng hơn, được động viên bởi những người “cùng hội cùng thuyền”.

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,… làm bạn lạc vào mê hồn trận. Hệ quả là nhiều người chưa vững về infomation literacy, Web literacy, digital literacy… sẽ lạc lối, không tìm ra được cái mình cần dù biết nó đang tồn tại ngay phía sau ô tìm kiếm.

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 KACBT này quả là tuyệt vời, chúng tôi cũng có dịp… làm biếng.

  • 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 đó.
  • Nếu bạn có thể nghe – hiểu tiếng Anh tốt, thích cách học sinh động có kèm media, một khoá học Build your first web pages with HTML and CSS của Google cũng rất tuyệt.
  • Một dạng khác không phải khoá học mà học kiểu tương tác như chơi game, một số người học rất hiệu quả với phương pháp này, bạn có thể thử với learn-html chấm org

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. Xem thêm hướng dẫn cài và dùng XAMPP.
  3. Trình soạn thảo code trực tuyến CodePen (cần tạo tài khoản để có thể lưu code)

Trình duyệt web thì có thể dùng Mozilla Firefox, Microsoft Edge hoặc Google Chrome, Safari đều được. Một trong những trình duyệt này sẵn có trên máy tính của bạn.

Quy ước khi học, đọc bài PHP

Sau đây là các quy ước trong những bài viết về lập trình web với PHP. KACBT thường xuyên cập nhật, bổ sung để tốt dần theo thời gian.

Con voi là biểu tượng của ngôn ngữ PHP

PHP là một ngôn ngữ lập trình nói hẳn là khá kém về mặt thiết kế. Lúc thì PHP phân biệt chữ HOA, chữ thường, lúc lại không nên rất gây sự bực mình với những người đã học các ngôn ngữ có thiết kế đẹp trước đó.

Rồi các thứ khác cũng lộn xộn cả lên trong cú pháp, cách đặt tên hàm… nói chung là đầy nhược điểm.

Thật quái lạ, PHP lại là ngôn ngữ khá dễ học cho người bắt đầu. Dân tay ngang nhảy vào làm web rất yêu thích bởi vì việc cài cắm đơn giản, sớm bắt đầu viết được ngay những dòng mã “sờ thấy được” mà với các ngôn ngữ khác người học có khi mất đến 5-7 buổi đầu tiên.

Ngôn ngữ PHP – một ngôn ngữ lập trình dở ẹc

Bạn cần đọc các bài ở PHP-FIG để học theo cách viết mã trên ấy. Sau đây, KACBT liệt kê ra một số thứ nên áp dụng trong ngày học đầu tiên.

Quy cách viết mã PHP theo chuẩn

  1. Luôn dùng mở đầu file PHP dạng dài. Tức là vào file phải là dấu bé, php rồi dấu hỏi. Không áp dụng cách viết mã tắt vì khi thay đổi môi trường mà web server không phải do ta cài đặt, cấu hình sẽ gây nguy cơ mã không chạy được.
  2. Khi lưu file PHP phải ở dạng encoding là UTF-8 without BOM. Nếu bạn dùng Notepad++ mặc định đã đạt điều này mà không phải chỉnh sửa gì thêm, chỉ cần lưu file bình thường.
  3. Ký tự xuống

Lời hay ý đẹp tạo cảm hứng mỗi ngày

“Đừng bao giờ để mình trở thành người đứng ngoài cuộc. Hãy tích cực tham gia và mạnh dạn dấn thân vào những sự thử thách, luôn tò mò và học hỏi những điều mới, và nỗ lực để tạo ra được nhiều sự khác biệt” (“Don’t be a bystander. Be involved, be engaged, be curious, make a difference.”) — Howard Schultz

Học lập trình Front-end là học những gì?

Ngày xưa (từ năm 1994 đến chừng 2003) thế giới web khá đơn giản, lúc đó không có khái niệm front-end, back-end gì hết, chỉ có web tĩnh và web động. Hoặc nói thiên hướng kỹ thuật một chút, liên quan đến lập trình thì có client side script và server side script.

Ngày nay, phát triển web là một lĩnh vực trăm hoa đua nở, trở thành một nhánh phát triển phần mềm khá ồn ào, đông đảo người tham gia, lấn át cả nhánh viết phần mềm cho desktop. Một thực tế vui vẻ đến buồn cười đó là dân ngoại đạo cũng nhảy vào.

Vì vậy, bạn cũng cần biết chút ít về cách làm một trang web dù bạn chẳng phải dân CNTT.

Dễ thôi, nếu bạn siêng vào đây đọc bài, ngày nào đó bạn làm trang web ngon lành, chơi cũng được, dùng kiếm cơm cũng ổn.

Lộ trình phát triển web theo hướng frontend.

Nghe cứ rối beng cho người bắt đầu, nhất là những người muốn tự học. KACBT giải thích mấy cái này mệt xỉu mà cũng không biết viết ra như thế nào để tường bận vấn đề.

Viết dài thành một cuốn sách không ai đọc, viết ngắn người đọc không nắm được. Làm video clip thì nói thật là người ta xem giải trí thôi, không có tác dụng mấy về mảng học hành.

Thử tìm trên YouTube chúng tôi thấy rất nhiều movie clip hướng dẫn làm web đủ thể loại. Chất lượng giảng dạy đủ hạng mức, cấp độ, số lượt view cũng cao.

Quái lạ, vẫn rất nhiều người ngỏ ý KACBT mở khóa học để giúp họ làm web.

Website này như một thử nghiệm hỗ trợ những ai mong muốn làm một website tự tay. KACBT cứ thử cái đã, việc gì tiếp theo tính sau.

Bên trái là “đồ nghề” dành cho người làm frontend. Bên phải là dành cho người làm backend.

Vắn tắt, bạn cần nắm HTML, CSS, JavaScript nếu muốn làm trang web thiên về giao diện, hình ảnh, những cái người duyệt web nhìn thấy, giao tiếp, tương tác khi truy cập.

Có người đọc quá nhiều bài viết linh tinh, nội dung rác, khi đọc được bài xịn lại không chịu bắt tay vào thực hành, dẫn đến họ nói về front-end nghe rất khủng khiếp, cứ như một chuyên gia thực thụ.

Trong thực tế, vài năm trôi qua, họ vẫn chưa có, chưa làm được một trang web nào. Họ cũng không thuê ai khác làm web giúp, họ vẫn tiếp tục đám luận, mô tả về web cứ như một chuyên gia. Thật khôi hài!

KACBT theo kiểu cứ mỗi ngày làm chút một, như một trò chơi, sở thích lúc rảnh. Trang web được tạo ra có ra hình hài ổn hay không tính sau, được vọc là vui rồi, cứ lên đường, đến đích hoặc quay về cũng đều là một trải nghiệm đẹp.

Ghi nhớ Học lập trình front-end là học viết mã HTML, CSS, JavaScript.

Hé lộ một chút chi tiết về kỹ thuật nếu bạn tò mò

Việc đầu tiên để có thể làm web cho người khác sử dụng, bạn phải là người sử dụng web trước đó, ít nhất không cần mức vô địch thiên hạ nhưng phải ở mức am hiểu hơn người bình thường. Những kiến thức sau đây phải biết: Internet hoạt động như thế nào? World Wide Web là gì? và nó có bà con gì với Internet.

Một trang web, website cụ thể gồm có những gì. Làm sao để tạo ra được trang web? Website? Tốn kém mức tiền tối thiểu bao nhiêu để tự tay làm nên một trang web.

Thiết kế đồ hoạ cho giao diện trang web

Nếu theo đúng quy trình thiết kế web bài bản, chuyên nghiệp bên đặt thiết kế web (chủ đầu tư) gặp gỡ với cá nhân hoặc đơn vị thiết kế web (nhà cung cấp/ nhà thầu) để bàn bạc qua về ý tưởng cho một trang web.

Sau khi đã bàn bạc xong, nhà thiết kế web sẽ lên một giao diện thô sơ có thể là vẽ tay hoặc thực hiện trên máy tính chỉ có các khối chữ nhận đại diện cho các vùng trên web.

Trang web được ghép lại từ các khối

Khi chủ đầu tư đồng ý với ý tưởng của nhà cung cấp mới bắt đầu thực hiện bằng phần mềm đồ hoạ như Photoshop để tạo ra giao diện web, sử dụng ảnh của mình để minh hoạ có sẵn trong kho ảnh của người thiết kế cho những vùng trên trang web.

Mỗi trang cơ bản trên trên website sẽ là một file ảnh. Ví dụ: trang Giới thiệu, trang Liên hệ, trang Dành cho cổ đông, trang Trưng bày sản phẩm, trang Các thành tự,…

Nhà đầu tư xem qua, hai bên thảo luận để chỉnh sửa cho phù hợp hơn. Khi có sự đồng thuận, người thiết kế file đồ hoạ sẽ chuyển qua cho một người khác thực hiện chuyển nó thành HTML.

Cắt giao diện web (còn gọi là cắt CSS) hoặc chuyển PSD thành HTML

Có thể nói, trước năm 2004 thì việc cắt file hình ảnh thành HTML là công việc chính của làm web. Thuở ấy, khái niệm lập trình web được hiểu là lập trình back-end. Lúc ấy JavaScript chủ yếu làm các nút bấm, bung cửa sổ quảng cáo, tuyết rơi hoặc những cái linh tinh mà nếu thuở đó bạn thường ra tiệm NET ngồi sẽ chứng kiến.

Vì thế, có thể nói, lập tình front-end lúc đó gần như chưa có, nếu có cũng ở một vài công ty lớn trên thế giới thuở đó mới có chuyên trách.

Hơn nữa, ngày ấy trình duyệt web Internet Explorer chiếm thế áp đảo, mà nó lại hay có những lỗi không khắc phục nên chỉ riêng việc loay hoay với HTML, CSS không thôi đã nhức đầu lắm rồi.

Ta tạm hiểu cắt CSS (cũng gọi là cắt HTML, cắt giao diện web, chuyển PSD sang HTML) là công việc của một người biết chút ít về phần mềm đồ hoạ, cụ thể là Photoshop, dùng chức năng cắt ảnh tốt. Khi nhận file ảnh từ người thiết kế giao diện web thì người này cắt nó ra từng mảnh chữ nhật và sau đó viết mã HTML rồi ráp nó lại. Người này quyết định chỗ nào là hình, chỗ nào là chữ.

Giao diện như này sẽ được cắt ra thành file HTML

Bắt tay vào viết những dòng HTML đầu tiên với trình soạn văn bản thô có sẵn trên máy như Notepad, TextMate, gEdit với những người cắt CSS thiên về viết code hoặc những người thiên về sử dụng đồ hoạ, công cụ thì có phần mềm như DreamWeaver rất nổi tiếng của hãng Adobe hỗ trợ.

Người mới tự học cắt CSS trước khi chuyển qua lập trình front-end thường kiếm một trình soạn thảo văn bản thô có chức năng đổi màu mã (code) để dễ quan sát, tìm lỗi hơn. Trình soạn thảo dành cho dân viết code tốt sẽ có chức năng nhắc bài (gợi ý) để tiết kiệm công sức đánh máy.

Tuy nhiên, lúc ban đầu đừng lạm dụng những chức năng gợi ý mà nên gõ thủ công để kịp quen với cú pháp, nhớ được một số thẻ thông dụng. Khi ngồi gõ lóc cóc những dòng mã HTML cũng giúp cho bạn suy nghĩ về việc làm thế nào để sáng tạo hơn trong cách học.

Một tài liệu HTML (gồm một file HTML và các file nhúng vào đi kèm nó) thực sự được trình bày trên màn hình máy tính, điện thoại như những khối chữ nhật đủ kích cỡ, màu sắc lắp ghép với nhau.

Mỗi khối chữ nhật được tạo ra bởi một thẻ HTML tùy nó định chứa gì bên trong mà chọn thẻ cho thích hợp. Các hình khối trông như không phải chữ nhật khi hiển thị trên màn hình, bản chất chúng cũng được chứa trong ít nhất một khối chữ nhật, nhưng có sự sắp đặt khéo léo, chỉnh thuộc tính, dùng ảnh có nền trong suốt, hiệu ứng…. để tạo ra các hình dáng khác.

Nếu chỉ có HTML không thôi, một trang web sẽ dài từ trên xuống dưới toàn chữ hoặc hình nối tiếp nhau dài thật dài và trông thô sơ như căn nhà xây thô. Vì thế, người ta áp dụng định kiểu dáng phân tầng, gọi là CSS để trang trí, làm giao diện cho phong phú, thẩm mỹ.

Mẫu mock up của trang web
Giao diện web khi có CSS thêm vào

Kết quả của quá trình cắt giao diện là được một thư mục chứa các file HTML, mỗi file tương đương với một trang chính, cơ bản của website và có các thư mục images chứa hình ảnh, css chứa file CSS.

Viết mã JavaScript để thực hiện những thứ HTML, CSS chưa làm được

Trang web được gọi là tài liệu siêu văn bản như tên của nó HTML (HyperText Markup Language) chính bởi vì tính chất động của nó, mà sau này JavaScript là một phần mạnh mẽ của cái “siêu” ấy.

Vì sao cần đến JavaScript? Vì có những thứ HTML, CSS chưa thể làm. Để dễ hình dung, ta thấy HTML, CSS có thể diễn tả một cái bếp gas, với các nút bật, mặt bếp, khung đặt nồi, họng phân phối gas, thậm chí diễn tả bếp gas cháy với lửa đỏ. Nhưng việc bật / tắt/ vặn nút gas diễn ra thế nào thì lúc này cần viện đến vai trò của JavaScript.

Nói cách khác, công năng (đôi lúc như là động cơ) của trang web được JavaScript đảm nhiệm. Vài ví dụ bạn thường thấy trên một trang web cần đến JavaScript như: hiển thị lời chào căn cứ vào thời điểm trong ngày (chào buổi sáng/ trưa/ chiều) hoặc trong năm, mùa đông có trang trí tuyết rơi, hiển thị tờ lịch của tuần/ tháng,… đó là với những trang web đơn giản.

Ngày nay, có những trang web thực sự là trò chơi điện tử (bạn từng chơi Nông trại vui vẻ?) đương nhiên phải có sự góp mặt của JavaScript.

Có thể nói, lập trình JavaScript đồng nghĩa với ‘Lập trình front-end”

Đến đây bạn đã làm được bất cứ trang web nào để người dùng xem, còn việc nhập thông tin vào xử lý là việc của back-end, hậu trường ở phía server.

Tuy nhiên, về lý thuyết là như vậy, trong thực tế phải mất nhiều năm người ta mới ở mức thạo nghề và làm được những thứ thông dụng, hơi khó một chút. Còn có những trang web khá đặc biệt, có thể cả đời bạn cũng khó có thể đạt mức đó bởi người làm ra nó thuộc loại quái kiệt. Lĩnh vực thiết kế web cũng không khác gì các ngành công nghiệp khác, đều có các cấp độ khác nhau.

Sự rối rắm, phức tạp của CSS, JavaScript ngày nay

Trước khi iPhone ra đời năm 2007, người ta duyệt web chủ yếu trên máy tính nên dù lúc đó trình duyệt IE lỗi đủ kiểu, người làm web cũng chưa phải đương đầu với sự phức tạp như 2023 này.

Khi điện thoại di động smartphone ra đời, máy tính bảng tiếp nối, người thiết kế web phải tạo ra 3 giao diện khác nhau để hỗ trợ người truy cập trên 3 loại thiết bị này. Trang web nào không đám ứng điều đó sẽ bị người truy cập ngó lơ.

Vậy là bắt đầu nảy sinh ra những bộ thư viện, framework khủng cho cả CSS lẫn JavaScript. Sự ra đời của những công cụ này giúp cho những người làm web thực hiện những trang web phức tạp được nhanh hơn, mang tính chuyên nghiệp, tiếp cận tiêu chuẩn công nghiệp tốt hơn. Nói đúng hơn, giống như ngày nay bạn đi mua đồ nội thất, mang về ráp chứ hiếm khi đặt người ta đóng.

Những CSS framework thông dụng hiện nay

Các CSS framework bạn có thể từng nghe qua: Bootstrap, Bulma, Tailwind CSS, Foundation, PureCSS.

Các JavaScript library hoặc framework như: Angular, ReactJS, VueJs, EmberJS. Một cái rất nổi tiếng là jQuery, không được xem là framework mà chỉ là library nhưng sống lâu, được dùng rất nhiều trong số 1 triệu website lớn nhất thế giới.

Lúc nào thì library? Lúc nào thì framework? Tui đọc thấy người ta giải thích rất nhiều nhưng vẫn không thông nổi, và có nhiều tranh cãi.

JavaScript framework và hệ sinh thái của nó

Theo sự tổng hợp của tui thì thư viện là một cái gì đó nó tập hợp các đoạn code được viết sẵn để lấy ra dùng theo quy tắc tham khảo để bằng từ khoá, tên gọi, thay vì copy & paste trực tiếp trộn vào mã do bạn viết. Library hơi thoáng hơn framework, tự do sử dụng tuỳ ý, có thể dễ học, sớm rút tỉa được vài thứ lấy ra dùng được ngay vào trang web của bạn.

Trong khi đó, framework có sự phức tạp cao hơn, mất nhiều thời gian để học hơn và nó thường dùng để áp dụng vào làm những trang web dạng một phần mềm ứng dụng chạy trên nền web khá khủng, phức tạp.

Ngoài ra, để hỗ trợ cho CSS framework, JavaScript framework còn có những công cụ đi kèm theo hỗ trợ, sản phẩm được tạo ra từ những framework , library này, từ nguồn mở miễn phí đến phải bỏ tiền ra mua cũng có… tạo nên cả rừng thứ khiến cho ngay cả dân trong nghề cũng có lúc cảm thấy như bị lạc vào showbiz.

Mở cánh cửa bước vào thế giới front-end development

Khi làm những website lớn, phức tạp, thuở ban đầu những nhóm làm việc chưa có framework nên họ phải tự tạo. Các framework nổi tiếng, thông dụng ngày nay đều bắt nguồn như vậy.

Là một lập trình viên web front-end bình thường, tui không cần phải “phát minh lại bánh xe”, mà chỉ cần tận dụng những framework có sẵn là đủ mệt rồi. Việc “đứng trên vai người khổng lồ” tiết kiệm được khá nhiều thời gian, công sức khi bước vào công việc nhưng luôn tốn một thời gian ban đầu phải tìm hiểu, học về framework. Vì vậy, thường chọn framework có đông đảo người dùng, tài liệu phong phú và được đánh giá cao như ReactJS, VueJS. Nếu tui đủ giỏi và học nhanh, tui có thể chọn cái khác, còn bình thường, tui cũng chọn giống số đông.

Các thuật ngữ nghe loảng xoảng khi tui bập vào front-end

Vì các framework khá phúc tạp, mất vài tuần đến vài tháng để làm quen với một người đã khá thành thạo JavaScript nên để có thể làm việc được người ta sẽ phải biết đến các công cụ quản lý phiên bản mã nguồn dự án gọi là Version Control System.

Hiện nay, công cụ để quản lý phiên bản được ưa chuộng là Git, và có một cộng đồng người dùng Git rất nổi tiếng tên là Github.

Ngôn ngữ tiền xử lý (pre-processing) CSS

Các thư viện, framework đôi khi vẫn chưa đủ chức năng, nên cần thêm các gói phụ thêm để gắn vào, các gói này cũng phải được tổ chức, quản lý bài bản, vậy là đẻ ra công cụ quản lý gói Package Manager. Với JavaScript thì npm là công cụ nổi tiếng, nó được đi kèm với môi trường để phát triển dự án JavaScript cũng rất nổi tiếng (gần như phải dùng đến mà không có lựa chọn nào tốt hơn) tên là NodeJS.

Công cụ làm vieecj với JavaScript

Rồi đụng đến CSS thì không phải cứ viết CSS như bình thường mà tui còn phải tìm hiểu LESS, SASS . Trong khi đó, bên phía JavaScript còn có TypeScript, một ngôn ngữ dùng để viết JavaScript tốt hơn cho những người từng học bài bản về các ngôn ngữ có định kiểu mạnh như C/C++, Java.

Đó là chưa kể còn những thứ đi kèm theo trong quá trình làm dự án sẽ nảy nòi ra, cần đến.

Dông dài đến tận chân trời góc bể

Một khi website có dính nhiều đến việc lập trình, nó đích thị là một phần mềm hoặc bộ phần mềm, thậm chí được gọi như là bộ giải pháp. Lúc này, việc tiềm ẩn những lỗi lập trình nguy hiểm gây thiệt hại về tài chính, danh tiếng, để lại hậu quả nghiêm trọng là chắc chắn xảy ra.

Để phòng ngừa, hạn chế những rủi ro đó người ta sẽ phải theo một quy trình phát triển bài bản, chặt chẽ. Lúc này một dự án web có thể kéo dài nhiều năm (như Facebook, YouTube) sẽ chia ra nhiều team để phụ trách từng mảng, các team này phải phối hợp với nhau.

Trong bài này, chúng ta chỉ bàn đến team lo về front-end mà thôi. Họ sẽ có người thiết kế giao diện người dùng (UI), thiết kế trải nghiệm người dùng (UX), và có cả copywiter, UX writer,.. Có thể những người này không có gì gọi là “lập trình” nhưng đều nằm trong chuỗi phát triển một website nên sẽ phải từ lên ý tưởng, đánh giá, thiết kế mẫu, lập trình, kiểm thử, phát hành, bảo mật.

Vì JavaScript có thể chạy cả phía server trên môi trường NodeJS nên có những lập trình viên JavaScript sau một thời gian viết mã bên đội front-end đã chuyển luôn qua gia nhập đội back-end khi công ty dùng JavaScript bên phía back-end.

Những người làm được cả 2 món này, tức là: front-end + back-end = fullstack.

Tóm lại những điều cần nhớ

Lập trình front-end đòi hỏi một lập trình viên ban đầu phái biết cắt CSS, viết mã HTML, CSS, JavaScript.

Khi chuyên sâu hơn, một lập trình viên front-end phải biết sử dụng các CSS framework, JavaScript framework và các thư viện, hệ sinh thái đi kèm.

Một lập trình viên front-end có thể chuyến sang làm back-end và ngược lại hoặc có thể làm cả back-end lẫn front-end được gọi là fullstack developer.

Người không chuyên CNTT nên học thế nào?

Học với tinh thần thoải mái, vui vẻ

Học cách của trẻ em chơi với đồ chơi

Đọc các bài viết sẽ có những hướng dẫn chi tiết, mô tả, giải thích từng dòng code có tác dụng gì, ra làm sao. Bạn cần ngồi gõ lại giống như vậy để được… thất bại. Thất bại lúc này là điều tốt chứ không phải điều tệ hại.

KACBT cố tình không cung cấp những đoạn code có thể copy & paste được. Chúng tôi dùng hình ảnh để hiển thị mã (code), đôi lúc rất khó đọc, đó là dụng ý chứ không phải công nghệ kém cỏi hoặc cách hướng dẫn lỗi thời, cũ kỹ.

Mẫu web HTML5
Hình 1. Một trang web khởi đầu, đơn giản nhất

Cách của trẻ em đó là sau khi làm theo, tạo ra được một trang web như trên, bọn nhóc sẽ thử thay đổi, chỉnh sửa cái gì đó trong những dòng 1 đến 29 liệt kê trên hình để quan sát xem có chuyện gì xảy ra khi sửa này nọ. Bạn cũng nên làm như vậy dù bạn là người lớn.

Khi quậy tưng lên, hoay hoay với các đoạn mã làm nên trang web bạn sẽ hiểu vấn đề hơn. Bạn không khác gì một cậu nhóc phá banh chiếc xe nhựa, một bé gái kéo tóc, lột váy búp bê Barbie.

Mở thiết bị đồ chơi
Hình 2. Trẻ em thích tìm tòi, tháo tung đồ chơi, bạn cũng từng như vậy.

Một khi bạn phải tự tay làm, mệt nhọc với các đoạn HTML, não của bạn mới có cơ hội được rèn luyện, các nơ-ron được cố kết với nhau. Từ đó, một thời gian sau đó sẽ giúp cho bạn sáng ý ra, làm được những thứ mà những học sinh từng quanh năm tới lớp học thêm của thầy cô giáo không làm được bởi vì họ đã mất đi khả năng tự học, tự đánh vật với bài tập.

Sự trăn trở của người trưởng thành

Trẻ em tư duy mang tính trực quan, cần đến hình ảnh nhiều hơn so với người lớn. Do vậy, việc nhìn, xem, thấy rồi bắt chước làm theo là một cách học hiệu quả.

Hình 3. Trẻ em sẽ chơi với trang web như này rồi mới viết mã

Trong khi đó, là người lớn, bạn cần phải sử dụng đến khả năng trừu tượng hóa tích lũy được qua bao nhiêu năm đi học. Bạn phải tập đọc hiểu các bài viết toàn chữ, hiểu được nó, thực hành rồi mở rộng vấn đề, nâng cấp lên, gọi là học một biết hai, ba,… hoặc mười.

Hình 4. Với người lớn, bạn cần phải hiểu được hình trên

Nếu bạn làm web mà chỉ như hình bên trái thì còn ở mức rất nghiệp dư. Đến lúc nào đó bạn sẽ phải chuyển sang mức ở hình bên phải.

Tuy học trên trang web KACBT này để làm web chơi là chính, học như một nghề tính sau, bạn vẫn nên đạt mức “tiêu chuẩn công nghiệp“.

CNTT, làm web là lĩnh vực trí tuệ hơn cơ bắp

Bạn từng nghe câu “một trí tuệ minh mẫn trong một cơ thể cường tráng“, và cũng nghe câu “đầu óc ngu si, tứ chi phát triển“. Hai câu trên bạn tin tưởng câu nào có lý hơn?

KACBT không phải là những nhà khoa học để khẳng định câu nào có lý hơn, chỉ thử có một tấm hình sau, bạn xem và cảm nhận:

Hình 5. Hãy xem não cũng là một dạng cơ bắp, vẫn có thể “tập gym” cho não

Điều chúng tôi nhắn nhủ: bạn nên rèn luyện việc làm web mỗi ngày để trở nên thành thạo hơn, tạo ra những trang web đẹp hơn, ấn tượng hơn chứ không phải bàn chuyện cơ bắp hay trí não gì ở đây.

Giao lưu, cọ xát để có cách làm hay hơn, tốt hơn

Trong lĩnh vực thể thao, đi thi đấu giao hữu, cọ xát rất quan trọng để một đội trở nên giỏi hơn. Trong việc học cũng vậy, bạn cũng nên giao lưu với những người đang làm web, người đang học làm web khác.

Hình 6. Cùng ngồi làm chung vài buổi mỗi tháng sẽ tiến bộ đáng kinh ngạc

Một số bạn từng phàn nàn với chúng tôi rằng không tìm ra chỗ để giao lưu vì là ở tỉnh thành nhỏ, ít người biết web là gì.

KACBT cho rằng chỉ là do bạn không thử đứng ra tạo sân chơi, rủ người khác cùng chơi nếu rơi vào trường hợp bạn không tìm thấy sân chơi. Ngày nay, bạn dễ dàng đăng lên group Facebook của địa phương bạn, ít ra cũng sớm lập được nhóm 5-6 người. Đừng có ngại vì bạn mới học không biết gì mà bày đặt. Chẳng ai chê cười người ham học đâu, chỉ có mấy thằng ngu mới tỏ thái độ thôi, bạn mà sợ mấy thằng ngu để rồi chùn bước học tập thì KACBT cũng không biết nói sao.

Quy ước viết từ/ ngữ trong các bài viết

Để dễ dàng cho các bạn đọc, hiểu bài học, chúng tôi liệt kê một số quy ước trong bài viết để các bạn khi đọc phân biệt được đâu là mã cần viết, cách gọi tên, từ khóa tra cứu thêm trên Internet.

Đây là quy ước khi học HTML, CSS, JavaScript. Quy ước khi học PHP có bài riêng.

Chúng tôi tự xưng là Khó ăn cát bê tông (viết tắt KACBT).

Ký hiệu:
Mẹo, tips, lời khuyên: đây là mẹo/ lời khuyên hữu ích cho bạn
Ghi chú, ghi nhớ: điều cần ghi nhớ nằm lòng
Biểu tượng cảnh báo: chú ý/ cẩn thận

I. Quy ước chung

1. Tên file, file (tập tin)

Tên file luôn sử dụng chữ thường, không chứa khoảng trắng, nếu muốn dễ đọc ta dùng dấu gạch ngang (dấu trừ trên bàn phím).

Tên file không chứa ký tự tiếng Việt có dấu, không chứa ký tự đặc biệt nào khác dấu trừ kể trên.

Đặt tên file HTML

File luôn được lưu với Encoding là utf-8 (without BOM) để nội dung tiếng Việt hiển thị tốt, không bị mã hóa ra dạng giun dế không thể đọc.

Tips Các bài học nên sử dụng 1 trong 2 trình soạn thảo code được gợi ý tại đây.

2. Quy ước trong nội dung file HTML

Các thẻ HTML không phân biệt chữ HOA, chữ thường. Theo thông lệ chung hiện nay, KACBT gợi ý bạn một số quy ước nên tuân thủ để việc tra cứu, học hỏi nâng cao về sau thuận tiện, dễ dàng.

Trong nội dung một file HTML, các thẻ (tag) đều viết chữ thường. Nếu nội dung tag dài, nên đặt tag mở (opening tag) trên một dòng, nội dung (text) gồm một số dòng khác, tag đóng (closing tag) nằm trên một dòng riêng. Ví dụ:

JavaScript được viết hoa chữ S vì đây gần như là tên riêng, danh từ riêng, hoặc nhãn hiệu. JavaScript được viết tắt là JS.

Thẻ trống (empty tag) thì nên sử dụng tự đóng thẻ:

Các thẻ rỗng (empty tag) nên tự đóng

Tên thẻ, một khoảng trắng rồi đến dấu chém tới (slash) dù không bắt buộc.

Những thẻ rỗng không thể làm theo cách thẻ có nội dung. Nghĩa là:

Thẻ rỗng viết theo kiểu thẻ có nội dung là không hợp lệ!

sẽ được xem là thẻ không hợp lệ (invalid tag).

Ở những bài học đầu tiên, khi CSS chỉ để minh họa cho HTML ta có thể viết trực tiếp CSS vào phần HEAD, bên trong thẻ STYLE.

Những bài học về sau, khi dùng CSS, JS phải tạo file riêng, không viết CSS, JS trực tiếp vào file HTML.

II. Quy ước của KACBT trong bài viết về HTML, CSS, JS

Thẻ (tag): là quy tắc đánh dấu trong HTML để trình duyệt biết cách mà xử lý. Cấu tạo chung của thẻ sẽ gồm <tên-thẻ>Nội dung của thẻ</tên-thẻ>

Thẻ DIV, thẻ P được viết khá đầy đủ

Nếu thẻ thuộc loại không có nội dung, sẽ là <tên thẻ />, minh họa:

Thẻ IMG – chèn ảnh vào nội dung HTML

Khi KACBT viết “hãy tạo một HEAD” (chữ HEAD viết hoa, viết HOA cho dễ đọc chứ không phải là bắt buộc về quy định của W3C khi soạn HTML), bạn cần nhập nội dung:

HÌnh 1. Cách viết một thẻ HTML một cách tổng quát

Tương tự, bạn thấy KACBT viết “hãy tạo một DIV” thì bạn nhập:

Thẻ DIV
Hình 2. Khi nói tạo một DIV

Thay từ HEAD, DIV bằng từ khác như P, SECTION,… bạn đọc thấy trong bài, những từ được viết in HOA 100%.

Mặc dù trong HTML không phân biệt chữ hoa với chữ thường, nhưng khi tạo thẻ, ta nên viết thường toàn bộ như trên.

Diễn giải bằng lời cho một tag đầy đủ:

Lần lượt nhập từ bàn phím:

  1. Dấu bé (dấu <)
  2. Tên thẻ (ví dụ: p, div, title)
  3. Dấu lớn (dấu >)
  4. Nội dung thẻ (text) nếu thẻ có nội dung
  5. Dấu bé (dấu <)
  6. Dấu xuyệt chém tới (dấu / slash)
  7. Tên thẻ (giống 2. ở trên)
  8. Dấu lớn (dấu >)
Minh họa cấu tạo một thẻ HTML

Khi tag không có nội dung text, trông tag như sau:

Tag không có nội dung

Thẻ (tag) và phần tử (element) quan hệ với nhau thế nào?

Khi KACBT viết “tạo một Đoạn văn” hoặc “tạo một Paragraph” hoặc “tạo một P”, bạn phải linh động để hiểu mục đích đều yêu cầu bạn tạo thẻ P.

Trong các bài viết HTML, chúng tôi sử dụng các từ khác nhau để đề cập element như: phần tử, thành phần, nhân tố, đối tượng. Bạn cần linh động nắm bắt!

Khi KACBT viết “tạo Image” hoặc “tạo IMG” hoặc “tạo element hình ảnh” bạn phải ngay lập tức biết rằng đang yêu cầu bạn nhập đoạn mã:

Element đại diện cho một hình ảnh

Chú ý có một thẻ HTML tên là HTML, nó cũng giống như bạn tên Nguyễn Văn Tên, khi người khác hỏi bạn: bạn tên gì? Bạn đáp: tôi tên Tên. Tức là trong file HTML có tồn tại duy nhất một thẻ:

Thẻ HTML trong file HTML

Trật tự, thứ tự các thuộc tính (attribute) trong một thẻ HTML không quan trọng. Thường thì các thuộc tính quan trọng/ thường dùng/ để nhận diện người ta sẽ cho đứng trước. Ví dụ:

Các dòng 1, 3, 4 trên là tương đương, cho ra cùng một element IMG.

Trong hầu hết các ngôn ngữ lập trình, ngôn ngữ máy tính đều cho phép người viết tạo các ghi chú. HTML cũng không phải là ngoại lệ.

Bạn muốn ghi chú gì (comment) đó, những dòng ghi chú giúp bạn sau này đọc lại hoặc phân tích mã, và ghi chú không xuất hiện cùng nội dung trang web khi người duyệt web xem trang web, chỉ cần tạo một dòng/ vài dòng như bên dưới:

Comment trong HTML, 3 cách trên đều được

Quy ước trong CSS

Một khối CSS có cấu trúc:

  1. Selector theo đúng quy định viết CSS
  2. Dấu sừng trâu mở
  3. Các luật (rule): gồm phần bên trái là property kèm dấu hai chấm, bên phải là giá trị
  4. Dấu sừng trâu đóng
Một khối mã CSS (block of CSS code)

Để tránh việc sai sót, ngay khi viết bạn nhập selector xong, nhập dấu sừng trâu mở, dấu sừng trâu đóng rồi lùi con trỏ lại giữa hai dấu sừng trâu, bấm phím Enter để nhập các rule.

Viết lần lượt các khối CSS theo trình tự xuất hiện của các element trong HTML.

Ghi chú (comment) trong CSS được bắt đầu với dấu chém tới (slash), tiếp theo là dấu hoa thị/ dấu sao (asterisk), nội dung ghi chú, và đóng bằng dấu hoa thị, rồi đến dấu chém. Minh họa:

Comment trong CSS
Ghi chú trong CSS

Quy ước trong JavaScript

JavaScript là ngôn ngữ phân biện chữ HOA, chữ thường. Do đó, không được tự tiện viết theo ý bạn mà phải viết giống đoạn mã minh họa vì có khi chỉ sai 1 ký tự mà toàn bộ đoạn mã bị đổ vỡ.

File JavaScript đặt trong thư mục js ngang cấp với file HTML bạn đang sử dụng để khi dùng, sử dụng đường dẫn tương đối tham khảo đến file.

Đặt các file JavaScript (tức file .js) trong thẻ SCRIPT trước thẻ BODY đóng. Trông như sau:

Vị trí đặt thẻ SCRIPT gọi file JavaScript vào HTML

Ghi chú trong JavaScript: nếu comment ngay trong dòng mã đang viết, hãy sử dụng hai dấu slash liên tục rồi đến nội dung ghi chú.

Nếu comment là một đoạn, sử dụng lần lượt dấu slash, dấu hoa thị, nội dung comment, dấu hoa thị, dấu slash giống với ghi chú CSS đã đề cập bên trên (xem hình có số 2 trong vòng tròn màu đỏ).

Một số khái niệm căn bản

Thư mục (directory/ folder trong lĩnh vực máy tính): khái niệm quen thuộc cho mọi người dùng máy tính trên mọi hệ điều hành. Nó là một tên đại diện để nhóm các tập tin lại với nhau, khi xóa thư mục, đồng nghĩa với các thư mục, tập tin bên trong nó cũng bị xóa.

Đường dẫn (path): để chỉ vị trí của một thư mục hoặc một tập tin (file) cần chỉ định. Nhà cửa có địa chỉ, một thư mục/ tập tin đối với hệ điều hành cũng có một đường dẫn để chỉ định nó. Trong hệ điều hành Windows, ký tự phân cách các thư mục là dấu slash ngược (dấu \). Trong khi học HTML, bạn sử dụng dấu slash xuôi (dấu /) để viết.

Phần mở rộng của file (file extension): trong khi học HTML bạn sẽ luôn thấy file có phần mở rộng, còn gọi là đuôi, hoặc chấm. Ví dụ: .html, .png, .jpg, .js, .css. Các đuôi file nên dùng chữ thường để tránh rắc rối khi xuất bản trang web của bạn lên hosting, gây lỗi. Nguyên nhân lỗi là do Windows không phân biệt chữ HOA, chữ thường trong tên file, phần mở rộng, nhưng hệ điều hành khác phân biệt chữ HOA, chữ thường.