Web 1: làm một trang web đơn giản

Thông qua bài này bạn đạt được các kiến thức sau đây:

• Tạo được một trang web đơn giản hết sức, trông như các trang web những năm cuối thế kỷ XX
• Nắm được 2 thành phần phổ quát và quan trọng nhất của bất kỳ trang web nào: phần HEAD và phần BODY
• Cách học vui vẻ và hiệu quả đối với người không chuyên CNTT muốn tự học làm web (có thể là… sau nhiều lần thất bại)

Bạn cài (ví dụ Notepad Plus Plus) vào máy để sẵn sàng thực hành. Nếu bạn dùng máy Apple với macOS thì tìm phần mềm mang tên CodeEdit nhé (và thư mục lưu trên máy sẽ không phải là D:\MyWeb mà là thư mục khác và bạn tự “phiên dịch”).

Bước 1: khởi động - đánh máy vài chục dòng code HTML

Bạn cần đánh máy thủ công, đừng copy đâu đó có sẵn bởi vì bạn đang học. Học cái gì đó ban đầu cần phải ghi nhớ, có ghi nhớ mới có thể hiểu.

Tui biết có nhiều bạn vì ban đầu học bằng video clip rồi làm theo như con vẹt, thấy hay, thấy thú vị, chia sẻ rùm beng lên mạng như là họ đạt được thành quả thần tốc… blah blah như họ sắp thành nhà phát triển web siêu nhân đến nơi. Thực tế chua loét luôn bạn à.

Khi không ghi nhớ bằng cách kiên nhẫn tỉ mẩn ban đàu sẽ dẫn đến những kiến thức, kỹ năng tưởng là nắm bắt được lại hoàn toàn là sự mơ hồ, ảo mộng. Ngay khi tắt các video đi, thử tự làm lại một trang web đơn giản, họ bó tay. Ngay cả khi có Google hoặc AI GPT nào đó trước mặt, họ cũng chỉ biết copy mà không hiểu, nên không phát triển được tí gì. Rồi thì hoá ra sự học là vô ích.

Bạn ngồi đánh máy lại đoạn sau:

lưu lại file với tên bai1.html vào một thư mục trên máy (không lưu ổ đĩa cloud vì không chắc dùng được khi thao tác file thông thường).

Tiếp tục, lại gõ tiếp thêm đoạn mã (đoạn code. tui sẽ dùng đoạn code hoặc code) sau:

Tui không cần nhắc bạn lưu file, hãy luôn Ctrl + S để lưu khi có sự thay đổi khi thêm/ xoá/ sửa, kiến thức căn bản

Như vậy file bạn có tổng cộng 33 dòng, có những dòng trống không bắt buộc phải có nhưng tạo khoảng hở cho dễ đọc, dễ giải thích.

Mở trình duyệt web lên bấm Ctrl + O (chữ o trong ò ó o, không phải số 0) và tìm đến file bai1.html để mở nó lên xem thử có gì? Nếu ra như sau:

xin chúc mừng bạn đã sở hữu trong tay một trang web đầu tay. Nói theo kiểu Neil Armstrong thì “Đây là Một bước nhỏ trên trình soạn thảo code nhưng là một hành trình bạn tiến vào thế giới Web rộng mở”

Giải thích:

Các dòng 1, 2, 4, 5, 6, 7, 8, 23, 25, 29, 31, 33 bạn sẽ sử dụng lại nhiều lần về sau như một khuôn mẫu cho mọi trang web. Tuy nhiên, để tránh bạn bị choáng ngợp bởi thứ mã hoá lạ lẫm nên tạm thời chúng ta cắt tỉa bỏ các dòng 9 đến 22 khoan xét đến, chỉ còn bản rút gọn sau:

Phân tích hình trên:

Dòng 1: sửa chữ doctype thành DOCTYPE để đọc cho quen mắt, dù trong HTML không phân biệt chữ thường, chữ hoa nhưng trong nhiều trang web hiện nay khắp cõi mạng, tui thấy người ta viết DOCTYPE hơn là doctype, bạn cũng nên… bắt chước.

Dòng 2: lang="" sẽ được thay bằng lang=“en”, lang=“de”, lang=“vi” tuỳ theo nội dung trang web đang trình bày trên ngôn ngữ nào. Tra cứu ISO 639-1 để biết 2 ký tự dùng làm giá trị cho thuộc tính lang của thẻ html.

Dòng 4: luôn viết như vậy, nó là thẻ HEAD bắt buộc của 1 tài liệu HTML.

Dòng 5, 6: viết chính xác như vậy, không thay đổi gì thêm. Dòng 5 cho biết mã hoá HTML theo bảng mã Unicode, hỗ trợ được hầu hết các ngôn ngữ trên thế giới. Dòng 6 cho phép trang web hiển thị tốt trên màn hình điện thoại, nếu không có dòng này trang web sẽ hiển thị theo kiểu cho máy tính trên điện thoại dẫn đến rất khó đọc.

Dòng 7: tiêu đề còn trống nên bạn cần đìền gì đó vào. Nếu thiếu nội dung của TITLE, tab trình duyệt hiện trắng, gây bối rối, khi bookmark trang cũng trắng xoá. Giả sử bạn sẽ có nội dung:

Hãy thay Trang web đầu tay của tui bằng cụm từ của riêng bạn để chứng tỏ bạn hiểu bài, không học vẹt.

Dòng 8: để nguyên như vậy nhưng cần làm thêm các việc sau: giả sử thư mục chứa web là D:\MyWeb, bạn cần tạo thư mục css bên trong nó, vào thư mục css tạo file style.css nội dung tạm thời rỗng (không có gì), save lại sẽ là kích thước 0 byte.

Dòng 9: giống như vậy. Bạn chợt hiểu rằng dòng này bà con với dòng 4. Tui giải thích: dòng 4 được xem là mở đầu của phần HEAD của một tài liệu HTML, và dòng 9 đánh dấu sự kết thúc của phần HEAD.

Dòng 11, 15, 17: để nguyên như vậy.

Dòng 13: để nguyên như vậy, nhưng bên trong thư mục D:\MyWeb tạo thư mục js và tạo file app.js nằm trong thư mục js, nội dung file app.js tạm thời rỗng.

Ghi nhớ:

• Một tài liệu HTML chứa toàn thẻ (tag). Gọi chúng là thẻ HTML để phân biệt với thẻ ở các ngôn ngữ khác, không phải ngôn ngữ HTML.
• Tài liệu HTML thực sự chỉ là một văn bản thô chứa các thẻ nếu không dùng trình duyệt web để mở nó.
• Có một thẻ HTML có tên là… HTML. Điều này có vẻ là giống với một bạn tên là Nguyễn Thị Tên, để rồi hỏi: bạn tên là gì? Tui tên là Tên.
• Để tránh nhầm lẫn, từ thẻ để chỉ các thẻ HTML nói chung. Còn bắt đầu tài liệu HTML để nói về việc bạn mở thẻ tên là HTML và đóng nó để chuẩn bị cho các thẻ khác xuất hiện bên trong.
• Trên Windows đường dẫn thư mục được ký hiệu bằng dấu chém ngược (tức dấu \ ) và nếu đường dãn tuyệt đối sẽ có kèm ổ đĩa đầu tiên. Còn trong thực hiện trang web, thư mục chứa trang web được xem alf thư mục gốc và bắt đầu bằng dấu chém tới, đường dẫn ký hiệu bằng dấu chém tới (tức dấu / ). Vạy, từ nay file D:\MyWeb\bai1.html thì trên web nó là /bai1.html nếu ghi ở đường dẫn tuyệt đối, hoặc bai1.html ghi tương đối. Tương tự, D:\MyWeb\css\style.css thì khi viết mã HTML nó sẽ phải là /css/style.css (nếu dùng đường từ thư mục gốc) hoặc css/style.css nếu xét từ tư mục gốc trở đi.

Để Mị thông não tí: thuở ban đầu ngài Tim Berners-Lee (được xem là cha đẻ của “công nghệ Web”) làm nên trang web hết sức thô sơ. Mặc dù ngài gọi tài liệu HTML của ngài là siêu văn bản nhưng nó chỉ có chữ và vài liên kết mà thôi. Hình minh hoạ trang web đầu tiên do ngài làm ra:

Tất nhiên, đó là một file HTML như bạn đang soạn vậy, file đó tuy thấy toàn code gì đó bạn chưa hiểu lắm (vì mới ngày đầu mà) nhưng nó có cấu trúc như bài tập làm văn bạn học ở trường vậy. Bài tập làm văn thì có mở bài, thân bài, kết luận, còn HTML chỉ có 2 phần là HEAD và BODY mà thôi.

Qua thời gian, người ta góp ý, ngài Tim Berners-Lee và cộng sự đã “thêm mắm dặm muối” vào để tài liệu HTML trở thành một thế lực mạnh mẽ, giờ đây đôi lúc người ta đồng nghĩa Web với Internet, mặc đù đó là 2 khái niệm khác nhau.

Cái sự thêm mắm dặm muối là gì: đó là HTML cho phép gắn thêm CSS và JavaScript vào để giống hình bộ xương bạn thấy minh hoạ ở trên. Như vậy, ngày nay khi nói đến bất kỳ trang web nào bạn đều hiểu nó không chỉ trơ trọi mỗi file HTML mà luôn có thêm CSS và JavaScript đi kèm.

CSS là viết tắt của Cascading Style Sheets. Còn JS là viết tắt của JavaScript.

CSS chủ yếu tô điểm cho HTML và bố trí lại các vị trí thành phần trên HTML giống như bạn sắp đặt các đĩa thức ăn, trang trí bàn ăn tiệc vậy.

Trong khi đó, JavaScript làm những thứ mang tính sống động hơn, giống như món ăn trên bàn ấm nóng, bốc hơi hoặc lạnh đông lại và đang chảy ra hoặc khi người ăn mở nắp tô đựng ra, bốc mùi thơm.

Nếu bạn là dân chơi xe, một câu bạn dễ hình dung hơn: CSS tương đương với “làm đồng” cho xe, còn JS chính là “động cơ”.

Đến lúc này, không cần phải bàn cãi gì, khi tui nói tạo một tài liệu HTML, bạn phải hoàn thành:

• Mở trình soạn thảo lên gõ dòng và lưu lại nó ten-file-gi-do.html trong thư mục D:\MyWeb của bạn
• Đánh máy nội dung file trông giống sau:

• Bạn không vô tri đến mức gõ phím như con vẹt đến mức không biết thay đổi tiêu đề Tiêu đề trang web hiện trên tab trình duyệt (ở dòng 7) thành cái gì đó khác của riêng bạn. Bạn cũng đừng dại dột gõ dòng 12 vào, ý tui chỉ muốn bạn để trỏ chuột chỗ đó sẵn sàng cho nội dung.

Vậy thì “thiết kế web” hoặc “phát triển trang web” gần như không thay đổi gì (ngoại trừ dòng 7) ở dòng 1 đến 10. Tức là phần:

sẽ để nguyên si như vậy cho hầu hết tài liều HTML.

Việc phát triển nội dung nghe lạ tai, thực sự, tui muốn bạn đánh máy lại toàn bộ nội dung ở trên, làm ít nhất 20 lần để bạn có thể thuộc, tránh phụ thuộc vào Google hoặc phải copy mẫu ở đâu đó.

Tại sao phải đánh máy lại? Bạn cho rằng tốn nhiều thời gian vô ích? Tui nói luôn: nếu bạn không thuộc bảng cửu chương, bạn làm toán nhân bằng cách nào? Đừng cố cãi với tui rằng bạn sẽ dùng máy tính cho phép nhân có kết quả nhỏ hơn 100. Nếu bạn vẫn cố ngang bướng muốn copy cho nhanh như vậy, việc học web nói riêng này chẳng đi đến đâu, và việc học những thứ khác ở đời này nói chung cũng chỉ mang lại cho bạn những kiến thức và kỹ năng giả, kém chất lượng. Bạn biết rồi đó, hàng giả gây chết người, kiến thức giả có thể làm hỏng bạn và cả tương lai các thế hệ con cháu bạn.

Còn nếu bạn muốn “ný nuận” lôi thôi với tui, bạn nên tìm hiểu về muscle memory để có thêm chút kiến thức, nếu không, tui e rằng bạn sớm dừng bước khi tranh luận.

HTML được gọi là ngôn ngữ đánh dấu siêu văn bản (Hyper Text Markup Language), rồi bạn sẽ biết tại sao người ta gọi nó như vậy. Các thẻ là dạng kiểu đánh dấu, còn siêu văn bản là các liên kết mắt xích với nhau.

Một cách tổng quát, ta thấy cấu trúc HTML rõ ràng:

Trong thực tế bạn gặp nhiều trang web rất phức tạp, nhiều hình ảnh, trang trí các kiểu và trang có độ dài nhiều trang màn hình. Nhưng, tựu chung lại chúng cũng chỉ có 2 phần là HEAD và BODY như minh hoạ trên.

• Phần HEAD chủ yếu là khai báo tài nguyên và các siêu dữ liệu meta data dành cho trình duyệt web và các con bọ thu thập tin tức trên Internet, liên quan đến SEO mà không hiển thị trực tiếp nội dung lên màn hình.

• Phần BODY là nơi trình bày các thẻ có tác dụng hiển thị trực tiếp trên màn hình khi duyệt web, các thẻ có 2 nhiệm vụ chính là giúp tạo bố cục cho trang web để tạo ra mỹ thuật, và nhiệm vụ còn lại là chứa nội dung (gồm có văn bản text, bảng biểu, mẫu thu thập thông tin, hình ảnh image, đa phương tiện như âm thanh, video).

Gọn lại: từ giờ trở đi, khi làm bất cứ trang web nào trong loạt bài học tập nào, bạn cũng đánh máy 15 dòng thần thánh đã được minh hoạ ở trên. Ở dòng 7 sửa lại để phù hợp với chủ đề trang web ngày hôm đó, còn dòng 12 sẽ rỗng, đặt con trỏ text tại đó để bạn đánh máy, để “bày bừa” các thẻ để thể hiện ý tưởng về một trang web.

Từ cái hình trông đến kinh dị trên, thật làm bạn hoảng loạn không hiểu gì, tui bồi thêm cái ảnh:

Tui dám chắc rằng nếu bạn chú tâm ngồi gõ phím lóc cóc những dòng mã vô tri trên, thể nào trong não bạn cũng toát ra câu hỏi kiểu như: những cái dấu nhỏ, tới chữ gì đó tiếng Anh, rồi đến dấu lớn tạo thành cái gì đó như hình… con thuyền, rồi có một đoạn chữ gì đó có vẻ người đọc hiểu được, rồi sau đó lại như hình con thuyền nhưng lại có một dấu vạt chéo ở phía bên trái…. tui đang làm cái gì đây?

Trong quá trình soạn file HTML, có những ghi chú bạn đọc được nhưng nó không phải là nội dung hoặc thành phần cấu thành bố cục trang web khi hiển thị trên trình duyệt, người ta gọi đó là comment (ghi chú).

Để thực hiện ghi chú trong HTML, bạn bắt đầu với dấu nhỏ, dấu chấm cảm, hai dấu trừ tiếp theo, dòng ghi chú của bạn, kết thúc ghi chú bằng hai dấu trừ liên tiếp và dấu lớn cuối cùng, nếu không hiểu, hãy xem hình:

Thuộc tính (attribute) là gì? Đây là những đặc điểm hoặc mô tả bổ sung cho một thẻ HTML. Tui ví dụ cho bạn dễ hiểu, giả sử bạn diện một bộ trang phục mà ngày nay gọi là outfit (tức gồm cả quần, áo bên ngoài và cả nội y và phụ kiện) thì những món chính này gọi là thẻ (tag) trong HTML nhé, còn thuộc tính của thẻ là giống như ngắn tay, màu đỏ, ống loe, cao gót, đính cườm,… vậy đó. Bạn có hiểu không?

Tức là nếu chỉ HTML không thôi bản thân nó sẽ chỉ làm nên một khối hình chữ nhật vô hình và có thể chứa vài dòng chữ gì đó trong ruột. Trang web chỉ như vậy thật buồn tẻ, giống như hình minh hoạ trang web thuở ban đâu đã minh hoạ bên trên. Cho nên, trước khi có CSS, thuộc tính cũng là cái quan trọng để các thẻ HTML làm được một số thứ khiến nó tạm gọi là siêu văn bản.

Các thẻ HTML tương tự như thời trang quần áo vậy: có những thuộc tính đi với thẻ nào cũng được, nhưng có thuộc tính thì chỉ đi với thẻ ào đó thôi. Kiểu như bạn không thể áp thuộc tính “cao gót” cho cái áo sơ-mi bạn mặc được, nhưng “màu đỏ” thì có thể áp cho đôi giày được.

Ở đoạn mã trên 2 cái element sau là không hợp lệ bởi vì thuộc tính width, height không được định nghĩa để đi kèm với DIV, SPAN. Những thẻ nào chấp nhận thuộc tính nào sẽ là một bảng danh sách để tra, bạn có thể xem ở đây:

Trong giai đoạn đầu mới học, ta chỉ cần nhớ một số thẻ có thuộc tínnh đi kèm thông dụng mà thôi, tránh phải nhớ quá nhiều (làm sao nhớ nổi). Tui liệt kê một số để bạn “bỏ túi xài ngay” cho tiện:

• Thẻ A có thuộc tính href
• Thẻ IMG có các thuộc tính: src, width, height, alt
• Thẻ INPUT có các thuộc tính id, name, value
• Thẻ FORM có các thuộc tính action, method
• Thẻ LINK có các thuộc tính href, rel

Một điều thú vị đó là các attribute không nhất thiết phải có thứ tự nhất định trong một thẻ, viết theo trật tự nào cũng được (ví dụ như thẻ IMG bạn có thể đặt height trước width, alt đứng đầu vẫn bình thường). Nhưng nói thì nói vậy, bạn cũng nên tham khảo một số cách viết thông dụng để tránh viết theo kiểu mà đọc mã thấy quá “ngứa mắt” dù không có gì sai trái.

Về các bài sau tui sẽ lồng ghép và giải thích rõ hơn, giờ bạn cứ gõ lóc và biết in ít để dễ nhớ, dễ thuộc cái đã.

Một số đồ chơi cần thiết để bạn tiếp tục công việc xây dựng trang web:

Có một số thẻ tui cung cấp ở đây thường xuyên được sử dụng trong mọi trang HTML (không kể đến các thẻ HTML, HEAD, TITLE, BODY hầu như chỉ dùng một lần cho mọi tài liệu HTML), các thẻ này có thể dùng đi dùng lại nhiều lần mà không “vi phạm” quy tắc nào. Nhưng việc sử dụng sao cho nghệ thuật lại là chuyện khác.

Chú ý: tui tự đặt quy tắc chứ hổng có phải theo trường phái nào đó là tui dùng chữ thẻ và sẽ viết in hoa thẻ lên, nhưng bạn chỉ viết thường mà thôi. Ví dụ luôn: tạo thẻ H1, bạn ngay lập tức tạo ra một cái như sau:

Thử lần nữa, thẻ IMG, tức là bạn sẽ tạo ra (đánh máy ở phần BODY - khu vực dòng 12 đã nhắc ở trên):

Tui nói, tạo một ảnh banner-jpg với kích thước 520x300 pixel, bạn đánh máy ngay tắp lự:

Tương tự, tạo DIV với class khung-vien, bạn đánh máy:

Khi nghe tui hét lên tạo một đoạn văn, bạn cũng sớm phát hiện ra đoạn văn là paragraph, tức thẻ P:

Về mặt cấu trúc mã HTML các thẻ chia ra làm 2 loại:

• Loại 1: thẻ có mở và đóng (bạn đã thấy minh hoạ ở hình bên trên). Ví dụ các thẻ: DIV, P, SPAN, STRONG,…
• Loại 2: thẻ đơn thân (tui tạm gọi vậy) - tức nó tự đóng, không có thẻ đóng. Ví dụ: LINK, META, IMG, BR, HR, INPUT. Nhiều thẻ loại này này nhìn thấy được dùng trong phần HEAD của tài liệu HTML

Ghi nhớ: với loại thẻ luôn có thuộc tính đi kèm mới chuẩn chỉnh, một số thẻ khác thì không cần. Thuộc tính (attribute) không phải lúc nào cũng có thể đi kèm với thẻ bất kỳ.

Các thuộc tính có thể đi kèm với hầu hết các thẻ nào gọi là Global attributes

Về mặt hiển thị nội dung lên trang web các thẻ (tag) mặc định được phân vào 1 trong 2 nhóm chính thông dụng (vì có nhiều hơn 2 nhóm, đang nói Block-level và Inline-level) là nhóm block và nhóm inline.

Nghĩa là: một thẻ đã là nhóm block (gọi tắt thẻ block) thì không trong nhóm inline (gọi tắt: thẻ inline) và ngược lại. Các loại khác sẽ học sau, ở phần nâng cao.

Việc các thẻ có thể lồng vào nhau là rất bình thường. Nhưng có một nguyên tắc cần tuân thủ: thẻ dạng block bọc ngoài thẻ inline thì OK, nhưng ngược lại là KHÔNG ĐƯỢC, ví dụ luôn cho nóng:

Ngay từ BODY trở đi, khi các thẻ lồng nhau, hãy cho thụt vào 2 hoặc 4 ký tự (trong Notepad Plus Plus bạn vào menu Settings, chọn Preferences, chọn Indentation, chọn Language, tìm đến HTML để thiết lập tab trở thành space) để trông có thứ tự lớp lang để đọc mã, dễ nhận diện được các cấp bậc cha me, ông bà hoặc dò xem có thiếu sót chỗ nào.

Hình trên thẻ P bọc bên ngoài thẻ SPAN là được, nhưng ngược lại là không được.

Block thực sự là gì? Đáp: nghĩa là khi bạn tạo một thẻ, bạn hình dung nó tạo ra một khối hình chữ nhật (vô hình nếu ta không đặt hình nền, viền) chiếm hết chiều rộng của khối cha mẹ. Nếu khối này ta có đặt chiều rộng và chiều ngang thì nó không chiếm hết chiều rộng của khối cha mẹ nhưng mặc định nó cũng không cho phép các thẻ dạng block khác có thể nằm ở phần thừa còn lại. Nói cách khác, khi bạn tạo một thẻ block, mặc định nó sẽ mở một dòng mới, giống như bạn bấm Enter khi soạn thảo văn bản. Mặc định trình duyệt sẽ có chứa một ít khoảng hở bên trên và bên dưới một block.

Thẻ block thông dụng nhất thường thấy: H1, H2, H3, DIV, P,

Inline thực sự là gì? Đáp: thẻ này không mở một dòng mới và không có chiếm kích thước mà tuỳ thuộc vào nội dung nó chứa. Như vậy, nếu nó nằm trong một dòng văn bản, nó từa tựa như khối chữ nhật, nhưng nếu nó băng qua nhiều dòng sẽ tuỳ thuộc vào nội dung của nó. Ngắn gọn: thiết lập thuộc tính chỉèu rộng width, height, margin (những thuộc tính chỉ áp dụng cho các thẻ nhóm block) cho một thẻ đang là inline (ngoại trừ các thẻ trong nhóm replaced elements) là vô nghĩa/ không có tác dụng.

Một số thẻ inline thường dùng: A, B, I, SPAN, STRONG, EM, IMG, HR

Các thẻ block-level:

Các thẻ inline-level:

Replaced element là các element mà nội dung của nó được thay thế bằng nguồn bên ngoài hoặc nội dung được định nghĩa bên ngoài cấu trúc tài liệu HTML hiện tại. Replaced elements không được xem như mô hình phân giải CSS. Những đối tượng bên ngoài là độc lập với phân giải CSS.

Replaced element sẽ được bàn về sau vì nó là chủ đề ở mức vượt căn bản. Chỉ cần nhớ một số thẻ trong nhóm này: IMG, VIDEO, IFRAME, EMBED, FENCEDFRAME, và vào một số hoàn cảnh, các thẻ: AUDIO, CANVAS, OBJECT, INPUT cũng trong nhóm này.

Tag (thẻ) giờ đây nên được gọi là element (thành tố)

Từ nay thẻ (tag) được tui gọi là thành tố (element). Tui cũng không sính tiếng Anh, nhưng cứ gọi hẳn là element để tập cho các bạn dễ tra cứu online khi cần.

Bỗng nhiên đổi tag thành element là không phải ngẫu nhiên đâu. Bạn hình dung tag giống như bạn A, bạn B, bạn C, nhưng khi họ tham gia vào một đội nhóm thì họ sẽ là “thành viên”. Ở đây, khi tag tham gia vào một tài liệu HTML thay vì nói chung chung, nó đã trở thành element.

Khi đề cập đến element bạn hình dung là nó có đầy đủ thành phần, nó không phải là thẻ P, thẻ DIV, thẻ IMG mà nó sẽ phải được viết ở dạng có thể dùng được trong một tài liệu HTML. Bạn đã thấy sự dùng được ở một ví dụ trước đây, giờ tui minh hoạ lại lần nữa:

Tương tự, khi tui hét to, tạo cho tui một liên kết hoặc làm cho tui một element anchor thì bạn sẽ gõ ngay…. trong 1 nốt nhạc:

Tạo một liên kết đến site Khó ăn cát bê tông và mở ra trong 1 tab mới:

Tạo liên kết khi click vào số điện thoại có thể gọi trực tiếp (khi truy cập bằng điện thoại) và dùng hình ảnh số điện thoại thay vì dòng chữ::

Tương tự, một liên kết hiển thị email và khi click sẽ mỏ trình soạn email để gửi nhanh:

Tạo một bảng biểu có 2 dòng, 2 cột:

Tạo một đoạn văn có các từ được xem là quan trọng STRONG (in đâm) và nhấn mạnh EM (emphasis - đọc to hơn), lập tức:

Tạo một danh sách có thứ tự hoặc danh sách không thứ tự:

Dùng element NAV và UL để tạo menu, hoặc đơn giản là tạo cho tui menu có vài mục:

Khi tui nói, thêm tài nguyên CSS cho trang web, bạn sẽ vào phần HEAD của HTML gõ dòng:

Khi tui nói: hãy thêm JavaScript vào tài liệu HTML của bạn, bạn lập tức mang con trỏ về trước thẻ đóng BODY (tức ngay trước chỗ </body> trong file HTML), nhập ngay dòng:

Muốn thêm biểu tượng favicon cho trang web, trong phần HEAD có dòng:

và bạn phải đặt một file favicon.ico vào thư mục MyWeb của bạn.

Với chừng đó element, tui đồ rằng bạn đã đủ sức để làm một trang “web cỏ” đầu tay trên hành trình chinh phục “thiết kế web”.

Bước 2: phát triển trang web theo kiểu “bày đồ đạc bừa bộn khắp căn phòng”

Một khung web mẫu được cho như sau:

Mẫu web trên chúng ta sử dụng cái gọi là Semantic Web (web ngữ nghĩa). Hiểu đơn giản đó là sử dụng những element mà tên nó có ý nghĩa để làm khung sườn giao diện web thay vì một số người không rõ học từ “lò đào tạo” nào mà cứ vô tri dùng DIV từ đầu tới cuối.

Khung sườn với các element phác thảo ở hình trên quả là hết sức thô sơ, vì thế, nó cần được thêm chút ít để trông có vẻ một chút, phát triển (1) trông như sau:

Bạn cần tìm một ảnh banner có kích thước 960x317 pixel. Nếu không tìm thấy, hãy click chuột phải vào hình sau, chọn Save image as ở menu ngữ cảnh để lấy hình về máy của bạn, nhớ lưu vào D:\MyWeb\images để dùng được ngay:

Khi save ảnh lại nhớ đổi tên hoặc bạn phải sửa code cho đúng tên file hình, nếu không, ảnh không thể hiển thị được khi xem bằng trình duyệt.

Sau khi nhìn đoạn code trên, bạn gần như bắt đầu lờ mờ hiểu rằng việc ngắt một element ra làm nhiều dòng không làm hỏng element mà còn giúp dễ đọc code. Trước đó, bạn cũng đã được bíêt rằng những dòng trắng trong HTML hoàn toàn vô nghĩa, chỉ để đọc cho dễ như đã giải thích đầu bài thì nó không có tác dụng trình bày ra màn hình, tức nó không tự thưa ra như khi bạn đánh và in văn bản.

Giờ lại thêm điều nữa là những cú gõ phím space bar (phím dài nhất trên bàn phím) để cách thưa chữ trong HTML là hoàn toàn vô dụng, nếu chưa hiểu ý câu này, hãy quan sát ví dụ sau:

Phần element NAV (2) được phát triển thành như sau:

Các element (3), (4), (5) nếu nhìn kỹ và đã nắm được block, inline khi nhìn lại hình bố cục trang web, nhận xét thấy nếu cứ lần lượt SECTION rồi đến ARTICLE, rồi đến ASIDE sẽ dẫn đến tình trạng hiển thị theo chiều dọc, ASIDE chắc chắn sẽ nằm bên dưới ARTICLE.

Ta cũng đồng thời nhận xét thấy SECTION cộng với ARTICLE trong tương quan với ASIDE sẽ là cùng một dòng có 2 cột: cột bên trái gồm có 2 ô, ô trên là SECTION, ô dưới là ARTICLE còn cột bên phải ASIDE là cột có một ô.

Cách xử lý: “nhốt” tất cả (3), (4) và (4) vào trong một element, element này chứa 2 element con để biến thành 1 dòng có 2 cột, như sau:

Bạn sớm đặt câu hỏi tại sao DIV vốn là block, 2 cái DIV nằm như vậy làm sao để cho ASIDE nằm về bên phải được? Đúng là khi chưa làm gì với MAIN, chắc chắn DIV thứ 2 trong MAIN (được ghi chú là cột phải ở hình trên) sẽ nằm bên dưới DIV cột trái. Nhưng trong CSS có cách đơn giản, dễ dàng để ta thay đổi MAIN khiến cho DIV cột phải nằm bên phải của DIV cột trái mà không nằm bên dưới.

Bạn cũng có thể thiết lập lại DIV cho cột trái và DIV cho cột phải là inline để có thể đạt mục đích nhưng cách này sẽ khó để điều chỉnh hơn trên các màn hình kích cỡ khác nhau. Về sau sử dụng CSS và thực hành nhiều chúng ta sẽ cảm nhận được lúc nào nên áp dụng cách nào. Có nhiều cách làm khác nhau để cho cùng một kết quả.

Cày cuốc cật lực

Giờ đây, bạn lần lượt xem và tìm kiếm, so sánh với những đoạn code phát thảo khung sườn bên trên để bổ sung cho chi tiết hơn, chủ yếu ở các thuộc tính *class. Những đoạn code được trình bày một cách “khủng bố” lần lượt theo thứ tự dựa theo (1) đến (6) đã nói bên trên:

1. Phần HEADER:

2. Phần NAV (tức menu):

3 & 4 & 5. Phần MAIN (có 2 cột trái, phải) - tương đương (3) (4) (5) tô đỏ ở hình trên:

Chú ý: khi đánh máy dòng 123 đến 127 ở hình trên, thuộc tính height có giá trị là 178 thì nhớ đánh giá trị trong cặp ngoặc kép, do vô tình trình soạn thảo của tui hiển thị dấu ngoặc kép xuống dòng, bạn đánh máy thì không nên bắt chước như vậy là không đẹp mà dễ gây lỗi.

Ảnh trên cũng thiếu mất thẻ MAIN đóng ở dòng 130, bạn tự bổ sung để chứng tỏ rằng bạn hiểu bài.

6. Phần FOOTER:

Quay trở về đầu file, ở phần HEAD, bổ sung thêm một dòng để gắn CSS. Tức là HEAD giờ đây:

Save lại file bai1.html trước khi soạn file css/reset.css có nội dung sau:

Save lại file reset.css xem như “bùa hộ mệnh”.

Mở file css/style.css rỗng đã tạo từ trước ra, soạn nội dung như sau:

Chú ý: những dòng code trên bạn viết theo thứ tự từ trên xuống dưới, tui bố trí nó theo chiều ngang như trên để tránh bài học quá dài, cuộn chuột tẻ ngắt, buồn chán cho bạn. Giả sử bạn quá sáng tạo, gõ các dòng code trên và trang trí theo chiều ngang như tui ở trên thì tui e rằng bạn cần đi học tin học căn bản. Dùng trình soạn thảo code mà định dạng kiểu như Word để dàn chiều ngang trông y hệt hình tui minh hoạ là tui chỉ biết… 😭

Bấm Ctrl + S để lưu lại nội dung file.

Giờ đây, việc phải làm đó là bạn tải gói file hình ảnh về máy và chép vào D:\MyWeb\images rồi xả nén ra.

Nào, thưởng thức thành quả trang web đầu tiên của bạn đi nào.

Nếu chưa biết thưởng thức kiểu gì (vì bạn chưa học tin học căn bản, tui không biết làm sao) bấm phím F5 khi đang xem trang bai1.html bằng trình duyệt web của bạn đang vẫn còn mở như lúc bắt đầu bài học này.

Kết luận: 1 file HTML khi được trình duyệt đọc và trình diễn lên màn hình gọi là trang web

Một ảnh minh hoạ từ AI tạo ra cho vui về lộ trình học về web: