Gồm 3 món HTML + CSS + JavaScript. Những bài đầu tiên học lý thuyết về cách một trang web vận hành ra sao trước khi bắt tay vào viết dòng code đầu tiên.
Trang web trà sữa đã tạm ổn nhưng có gì đó vẫn cần phải mông má, trang điểm thêm để cho có vẻ là tui cũng biết làm web, có phải vậy? Bài này sẽ thêm một số thứ trang trí hoa lá cành chơi.
Trong quá trình trang trí, chúng ta không chỉ có thêm, mà còn có “đập bỏ”, xoá, sửa các kiểu. Việc này chủ yếu là để có dịp thực hành, quậy phá vì chúng ta đang học, và học để làm chơi.
Nếu bạn định dấn thân vào làm web kiếm cơm như một nghề, bạn cần phải phác thảo kế hoạch bài bản, khi bắt tay làm là làm theo các bước chặt chẽ, kỷ luật, vì làm kiểu nghiệp dư khó có thể có thu nhập ổn.
Bạn hết sức tránh việc vừa làm đến bước N rồi lại không đi được tiếp tới X, Z mà lại quay về đập bỏ, sửa chữa quá nhiều ở bước E, F nào đó.
Hãy cho chúng tôi xem trang web của bạn
Nếu tự học bằng cách chỉ xem người khác làm và làm theo mà không có ai để trao đổi, một số người thấy rằng họ không biết mình đang tiến bộ hoặc kém cỏi như thế nào.
Trong thực tế, có một số bạn trẻ còn sử dụng cụm từ “mông lung như một trò đùa“. KACBT cho rằng đùa hay không chẳng phải là điều quan trọng. Bạn có thể gửi trang web bạn làm từ bài 1 cho đến lúc này để chúng tôi để chúng tôi xem qua và có vài nhận xét.
Việc gửi này có hơi rắc rối bởi vì chúng tôi cũng mong rằng bạn biết sử dụng tin học văn phòng, kỹ năng truy cập Internet chứ không phải là dạng ngáo ngơ. Do đó, cách làm là nén thư mục web của bạn lại, đưa lên Google Drive, sau đó, báo cho chúng tôi biết ở phần Liên hệ.
Web trà sữa của KACBT trông khá buồn cười sau:
Sau khi xem trang web của bạn, chúng tôi sẽ phản hồi qua email và có một bản nhận xét tại khu vực thảo luận để những người khác có thể tham khảo, bình luận.
Trang web trên bạn không thấy có hình ở giữa trang, bên dưới Đang được yêu thích bởi vì lý do trong mã HTML sử dụng file ảnh PNG nhưng ảnh thực tế chúng tôi có lại là ảnh JPEG có đuôi .jpg. Trình duyệt sẽ hiện lên các dòng chữ ở thuộc tính alt của thẻ IMG. Sửa tên file ảnh là xong:
Lưu file, bấm phím F5 khi đang xem bằng trình duyệt sẽ thấy ảnh hiện lên. Nếu bạn có hình là PNG, đừng làm gì thêm.
Cải tiến trang web như thế nào?
Tìm kiếm một giao diện trang web nào đó mà bạn thích, tốt nhất là cũng 3 cột, có header và footer. Mới đầu, bạn cần tìm giao diện khá đơn giản thôi, đừng lấy các trang quá phức tạp để học theo vì sớm làm bạn bỏ cuộc vì độ khó. Làm việc này nếu bạn không thể nghĩ ra nên làm gì tiếp theo với web hiện tại.
Cố gắng tra cứu, áp dụng những thuộc tính CSS vào trang web hiện tại để nó trông bắt mắt hơn. Những thuộc tính này sẽ liên quan đến font chữ, hình ảnh, màu nền hoặc ảnh nền. Cũng thêm nội dung vào để cho có vẻ gì đó giống 1 trang web trong thực tế.
Tìm kiếm những chủ đề trên mạng hướng dẫn cụ thể xử lý một vấn đề nào đó bạn đang muốn cải tiến, đọc vài chủ đề như vậy và áp dụng vào trang web của bạn.
KACBT cải tiến trang web trà sữa theo các bước như sau:
Save bai7.html thành bai8.html, bai7.css thành bai8.css và sửa dòng nhúng stylesheet ở phần HEADER trong file bai8.html thành bai8.css để tách biệt với bài trước.
Khi cần bạn có thể xem lại, so sánh, đổi chiếu để nắm bắt được việc học thay đổi, tiến triển như thế nào qua từng bài.
Thêm vào sau class .header trong file bai8.css đoạn:
Thêm bên dưới class .left-nav đoạn:
Ra kết quả trông như sau:
Thử bo góc cho các hình ảnh ly trà sữa với đoạn mã CSS:
Khi rà chuột lên hình ly trà sữa, cho ảnh đổi màu xem sao?
Chỉnh cho FOOTER canh giữa dòng địa chỉ quán trà sữa:
Cải tiến CSS riêng cho TABLE
Table bảng giá trà sữa, trông giao diện như này:
Chỉnh cỡ font, màu chữ cho tiêu đề của bảng:
Các dòng trong bảng dày, ít khoảng hở, trông kém thoáng đãng, ta dùng CSS sau:
4 dòng cuối cùng trong hình trên là để chỉnh canh giữa dòng chữ cột 1 và cột 3 trong bảng.
Chỉnh CSS dành riêng cho FORM
Giãn dòng (tức các DIV) trong FORM, dùng CSS:
Chỉnh cho dòng chữ Form đặt món của FORM đậm lên để dễ nhận biết:
Thử dùng công cụ hỗ trợ viết CSS
Trên mạng có rất nhiều công cụ hỗ trợ việc viết CSS dễ dàng hơn. KACBT xin giới thiệu một công cụ như vậy, https://cssreference.io
Giao diện trang chủ cssreference.io
Kéo chuột xuống hết phần màu mè, ngay phía sau dòng Collections sẽ có thanh tìm kiếm để tìm nhanh một thuộc tính. Hoặc bạn xem danh sách thuộc tính được xếp theo thứ tự ABC, click vào một thuộc tính bạn sẽ xem thuộc tính đó với ví dụ ngay kề bên để hiểu nó có tác dụng gì. Ví dụ:
Tra cứu thuộc tính line-height trong thanh tìm kiếm
Click vào gợi ý đề xuất để đến trang tham khảo về line-height, thấy như sau:
Thuộc tính kèm thông số được minh hoạ cụ thể, trực quan, dễ hiểu
Form dính với chân trang, giãn ra xem sao
Form để đặt trà sữa online hiện dính với chân trang, trông chưa thẩm mỹ cho lắm. Thêm một chút gì đó để FORM giãn ra, dễ coi hơn. Cũng thay đổi INPUT, SELECT bên trong FORM. Mã CSS và kết quả FORM:
FORM trông đã ổn hơn một chút.
Vài thứ vụn vặt khác để trang trông… diêm dúa hơn
Tìm trong file bai8.css đoạn đầu để thêm ảnh nền cho toàn trang web. Tui kiếm một cái ảnh nền dạng bong bóng bỏ vào thư mục images, và rule trông như sau:
Quay lại chỗ viết CSS cho table, ta thử thay đổi mã để cho việc khi xem bản, rà chuột đến dòng nào, nền dòng đó đổi màu. Đoạn rule giờ sẽ như này:
Việc biết các kỹ thuật CSS không đồng nghĩa với việc bạn có thể làm được trang web có tính thẩm mỹ cao nhưng cũng phần nào giúp bạn thực hiện được những trang trí thử nghiệm, thực hành nhiều hơn để càng ngày trang web trông đẹp mắt hơn.
Đến giờ này, bạn đã có thể làm được giao diện hiển thị được trên màn hình máy tính. Thử truy cập bằng điện thoại, bạn chỉ thấy được một phần của trang mà thôi.
Các bài tiếp theo sau, chúng ta sẽ tiếp tục chỉnh để cho giao diện có khả năng tuỳ biến. Từ ngữ dùng trong nghề thiết kế web là Responsive Web Design (viết tắt RWD). Nghĩa là khi truy cập bằng các thiết bị, trình duyệt có kích cỡ khác nhau, giao diện trang web sẽ được biến đồi theo cho phù hợp, hiển thị thông tin tốt, người dùng có thể duyệt dễ dàng.
Bài tập
Bảng có cùng màu nền giữa các dòng sẽ khó đọc. Hiện nay người ta thích bảng kiểu một dòng màu màu đậm, dòng kế tiếp nhạt hơn và cứ luân phiên như vậy. Bạn hãy tra cứu zebra striped table CSS để có thể áp dụng vào TABLE.
Khi click vào trường trong FORM nên có viền để người nhập thông tin dễ nhận diện. Bạn hãy thêm viền cho trường nhập liệu khi đặt trỏ chuột vào đó. Gợi ý: CSS input fields with color on focus để tìm ra ví dụ, áp dụng cho FORM.
Sidebar bên phải màu hồng tím và màu chữ các món trên nó trông tương phản kỳ cục, rất khó đọc? Và các dòng chữ cũng khá sít nhau theo chiều đứng, cần giãn ra cho dễ đọc hơn. Bạn thử viết CSS để làm giải quyết. Gợi ý: tra cứu các thuộc tính: line-height, color, background-color, font-size.
Có thể nói rằng nếu chỉ có HTML, một trang web trông không khác gì những công trình xây thô, nhìn vào thấy còn nguyên gạch, vữa. Hoặc muốn dễ hình dung hơn, bạn tìm một hotgirl Trung Quốc để mặt mộc. Từ các bài trước, chúng ta đã làm một trang web về trà sữa chưa có chút nào CSS.
Bài hôm nay, chúng ta mở file bai5.html ra, Save As thành bai7.html để thực hành.
Tạo file CSS và viết vài rule
Tạo mới file bai7.css , save vào thư mục D:\xampp\htdocs\css (nếu chưa có thư mục css bạn phải tự tạo, đây là kiến thức tin học căn bản, KACBT mặc định bạn đã nắm biết).
Soạn nội dung file bai7.css như sau:
Hình 1. Nội dung file bai7.css
Luôn Save file lại trước khi làm gì hơn. Ta cũng nhớ lại lý thuyết đã học ở bài trước, giờ thì mở file bai7.html ra để sửa.
Hình 2. Dòng 5 chính là gắn CSS vào HTML
Save lại file và mở trình duyệt lên truy cập để xem thử hình hài trang web thế nào. Trông cũng vui mắt rồi:
Hình 3. Diện mạo trang web khi có chút CSS
Hoan hô bạn, giờ đây bạn đã thấy chút ánh sáng le lói cuối đường hầm. Trang web trông như được tạo ra ở thập niên ’90 của thế kỷ trước. Không sao, chúng ta đang ở mức học “Bảng cửu chương” trong quá trình học toán, rồi sẽ làm toán được.
Thêm một vài rule nữa, kèm chút giải thích
KACBT cũng nhại theo giới showbiz, tiết lộ cho bạn một… tin động trời: vừa rồi Kacbt đã gặp thảm hoạ về dữ liệu nên mất đã sạch tất cả những gì liên quan đến những bài học từ bữa giờ.
Vì thế cho nên, thực sự đoạn mã minh hoạ trong bài 7 này không còn, và KACBT cũng phải ngồi gõ lại từ bài 5.
Điều khôi hài xảy ra: nếu bạn chú ý quan sát, đoạn HTML hiện đang chưa đúng với ở bài 5. Ở bài 5 có một DIV bọc ngoài MAIN. Giờ phải sửa lại cho giống bài 5 đã rồi làm gì làm:
Bọc DIV có class là three-cols bên ngoài
Nhớ đóng thẻ DIV, nếu không gây lỗi valid
Cũng cần nói thêm rằng, bạn chỉ sửa mã như trên nếu bạn ngồi gõ mã ở bài này, còn nếu bạn đã Save as từ file bai5.html thì không cần phải làm gì thêm. Nếu đã làm rồi, hãy nhớ “undo” các bước, nếu không sẽ có 2 thẻ DIV bọc nhau chẳng để làm gì.
Mở file bai7.css lên, sửa rule cho header thành như sau:
Viết thêm một số dòng để trang trí HEADER
Chú ý: chữ .header (có dấu chấm phía trước header, và dính liền, không có khoảng cách)
Đọc thấy dòng ảnh nền ở trên, không cần phải nhắc bạn cũng phải biết rằng tìm một hình ảnh làm ảnh nền bỏ vào thư mục images để khi xem trang web hiện được ảnh này lên.
Có một phép mầu xảy ra khi bạn thử chỉnh hiển thị trang web bằng cách bấm Ctrl + dấu trừ để thu nhỏ trang web của bạn (hoặc màn hình của bạn rộng, hỗ trợ full HD trở lên), bạn sẽ chứng kiến được cái ảnh nền nó nhảy lặp lại một cái bên tay phải. Đó là mặc định của thuộc tính background-image, ta sẽ đi sâu thêm về sau.
Chỉ cần thêm vào sau dòng thuộc tính này, giờ đây rule cho HEADER trông như sau:
Không cho lặp lại ảnh nền bằng thuộc tính background-repeat có giá trị no-repeat
Nhớ bấm Ctrl + số không để trình duyệt bạn trở về xem trang web đúng 100% của nó. Nếu quên, tui có thể sẽ nhìn web của tui không đúng tỉ lệ thật của nó.
Bạn có thể tung hoành với CSS của bạn bằng cách thêm rule, bổ sung các thuộc tính cho rule đang có để làm thế nào cho trang web của bạn được đẹp hơn.
KACBT không “cầm tay chỉ việc” cho bạn những thứ đó, mà bạn phải tự động não, tự thực hành,… hòng tiến bộ, hiểu bài.
Chúng tôi chỉ có thể thử cung cấp vào rule, bạn có thể gõ lại vào file CSS để xem chuyện gì xảy ra, rồi có thể thay đổi để cảm thấy ưng ý hơn. Ví dụ, đoạn CSS sau:
Một vài khối rule CSS mà bạn có thể thử áp dụng
Một số thuộc tính được gọi là shorthand. Nghĩa là một thuộc tính shorthand cho phép thiết lập nhiều thuộc tính đồng thời thay vì phải viết rời từng thuộc tính. Áp dụng shorthand sẽ giúp viết CSS gọn gàng hơn.
Nhược điểm của shorthand là tui phải làm nhiều mới có thể nhớ đúng thứ tự các giá trị. Nếu không nhớ đúng, có thể kết quả sẽ khác với mong đợi.
Thuộc tính background là một thuộc tính dạng shorthand. Ta có ví dụ sau:
Viết rời từng thuộc tính
Đoạn nhiều thuộc tính như trên, gom lại thành 1 thuộc tính shorthand:
Thuộc tính background là thuộc tính shorthand
Bạn có thể tìm hiểu thêm về Shorthand properties trên trang của tổ chức Mozilla.
Một vài mẹo hay dân trong nghề phải biết
Dù bạn chỉ học làm web dưới dạng nghiệp dư amateur chơi cho vui, điều đó không ngăn cản KACBT và bạn trao đổi với nhau vài thứ của dân trong nghề, cũng dễ để áp dụng. Nào, bắt đầu ngay.
CSS Reset
Mặc định trình duyệt có một số định nghĩa ngầm, mặc định về CSS để khi mở một file HTML lên thì có thể hiển thị được nội dung, đọc được. Ví dụ: BODY sẽ có padding 8px, P có margin-top, margin-bottom là 16px.
Các trình duyệt web khác nhau lại không thống nhất nhau về giá trị mặc định. Điều này dẫn đến khi viết CSS, bạn đã kiểm tra tới lui thấy không có gì sai sót mà xem trang web lại không như mong đợi ở trình duyệt khác trình duyệt bạn yêu thích.
Bạn loay hoay đủ kiểu bạn vẫn bó tay. Các “đại ca” lâu năm trong nghề giải quyết vấn đề này bằng cách sử dụng cái gọi là CSS Reset (hoặc Reset CSS).
CSS Reset chính là một số rule CSS được viết sẵn. Mỗi khi bạn muốn viết CSS cứu copy các rule này vào đầu file CSS của bạn. Hoặc đặt các rule trong một file reset.css rồi nhúng ngay vào HTML của bạn trước khi nhúng các file CSS khác.
Nội dung CSS Reset như sau:
/***
The new CSS reset - version 1.8.2 (last updated 23.12.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
pre {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: "";
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
Bạn cũng có thể sử dụng một mẫu CSS khác được gọi là normalize.css được xem là hiện đại hơn, có sự cải tiến hơn so với CSS Reset. Nội dung normalize.css như sau:
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
Chúng tôi không có lời bình nào về tốt/ xấu, hay/ dở của hai mẫu CSS kể trên mà bạn thử áp dụng vào chọn cái phù hợp với bản thân mình.
Hoặc, ở đẳng cấp cao hơn, bạn tự tay tạo ra một thứ cho riêng bạn. Đó chính là kết quả của việc học đã hiểu bài, áp dụng tốt và rồi nâng cao hơn một bước hơn so với số đông người học.
Nếu bạn để ý, ngay cả CSS Reset (hoặc Reset CSS) kể trên cũng đã là một bản cải tiến của cái nguyên ban đầu, phù hợp hơn với cách trình duyệt web hiện đại ngày nay.
Bản gốc Reset CSS của Eric A. Meyer cũng đã cải tiến 1 lần, như sau:
Trong quá khứ, khi CSS hãy còn chưa mạnh mẽ như ngày nay, cách để có một hình tròn trên trang web đó là phải sử dụng trình xử lý ảnh để cắt gọn trước thành hình tròn rồi xuất thành ảnh GIF (thuở ban đầu), hoặc ảnh PNG có nền trong suốt.
Ngày nay, bạn dễ dàng tạo ra được ảnh trong khung tròn với chưa đến chục dòng CSS. Tui học thuộc lòng để áp dụng luôn.
Nếu hình ảnh của bạn vuông, hãy áp dụng đoạn HTML & CSS này.
Trong thực tế, hình ảnh đa số là hình chữ nhật chứ không phải hình vuông. Do đó, hãy sử dụng một trong hai lựa chọn sau đây tuỳ ảnh bạn là chữ nhật dọc (chiều rộng hẹp, nhỏ hơn chiều cao) hay chữ nhật ngang (chiều rộng > chiều cao).
Hình ảnh dọc thì áp dụng như này. Chú ý sửa kích thước cho phù hợp với mong muốn của bạn.
Trong khi đó, nếu hình ảnh bạn có xu hướng ngang, tức là chiều rộng lớn hơn chiều cao, hãy nhớ đoạn CSS bên dưới để áp dụng:
Hình ảnh ngang thì áp dụng CSS như này.
Canh giữa một khối trong một khối
Chúng tôi minh hoạ bằng DIV, bạn có thể dùng khối khác miễn khối đó có display là block.
Mẫu chốt của mẹo này là vùng khoanh đỏ trên hình
Như vậy, chúng ta kết thúc bài 7 này ở đây. Hẹn gặp bạn ở bài kế tiếp.
Bài tập thực hành
Thay đổi FOOTER để trông bắt mắt hơn bằng cách thêm thông tin trong file HTML, thêm rule trong file CSS
Thay đổi thanh lề trái, thanh lề phải của trang web
Thêm nội dung cho phần MAIN để trang web trở nên hấp dẫn hơn
Cascading Style Sheets (viết tắt: CSS) được định nghĩa là ngôn ngữ định kiểu phân tầng. CSS được dùng để trình bày tài liệu HTML hoặc XML. Nói cách khác, CSS giúp cho việc trình bày, trang trí, xếp đặt các đối tượng thành phần HTML để trang web sinh động, mỹ thuật.
Tại sao lại là phân tầng?
Cái chữ cascading này gây khó hiểu. Bạn cứ hiểu đơn giản CSS được tạo ra để tránh việc một tài liệu HTML có các thành phần được “sơn phết” tùy tiện, rối beng khiến cho việc chỉnh sửa trở nên khó khăn. Thuở ban đầu HTML đã lâm vào cảnh như vậy nên ai đó đã nghĩ ra CSS để giải quyết.
Bạn hình dung một rule trong CSS.
Giả sử bạn tên HTML. Bạn đang ở hữu một bộ đồ gồm quần, áo, mũ, găng tay, giày, phụ kiện, trang sức được chế tạo ra từ đầu dính liền các món thành một khối, không phải từng món rời vừa kể. Mỗi lần mặc bạn phải mở dây khóa khéo và chui vào bên trong rồi kéo lại một cách khó khăn vì vướng víu, nóng còn hơn quần áo bảo hộ Covid. Bạn cảm thấy thế nào với món thời trang ấy?
Hẳn nhiên là sau đó phải rã bộ đồ đó ra, tức “phân tầng” nó làm các loại/ nhóm: quần, áo, mũ, găng tay, giày, phụ kiện, trang sức. Khi tổ chức thành từng nhóm như vậy, đựng vào những tủ, ngăn tủ hoặc hộp riêng để có thể phối đồ thuận tiện khi cần lên đồ ra ngoài cho các sự kiện khác nhau.
Một element trong HTML dùng CSS để định kiểu dáng. Nói cách khác, bạn áp các rule (luật) được định nghĩa trong CSS vào các element trong HTML để thay đổi màu sắc, kiểu dáng, vị trí, màu nền, kích thước,… những thuộc tính của một khối trên trang.
Làm ngay một đoạn mã CSS xem sao
Lấy trang mẫu đã học ở bài đầu tiên ra, Save as lại thành bai6.html để thực hành.
Trong phần HEAD chỉnh sửa lại gần giống:
Đoạn này báo hiệu sẽ dùng CSS trong file styles.css
Tạo một file có nội dung:
Đặt trong file css/styles.css
Save file này với tên styles.css đặt ở thư mục htdocs/css
Đọc đoạn mã trên, bạn cảm thấy dễ hiểu phải không nào? Giải thích ngắn:
Những cái như border-style, border-color, color, width,… được gọi là thuộc tính (property hoặc properites nếu đề cập như là số nhiều).
Ngay sau thuộc tính là dấu hai chấm
Cuối cùng, sau dấu hai chấm là giá trị (value).
Cuối mỗi dòng thuộc tính: giá trị phải được kết thúc bằng dấu chấm phẩy (semicolon). Không được quên dấu chấm phẩy này, vì rất nhiều khi chỉ 1 thiếu sót bé xíu đó sẽ làm biến dạng mọi thứ, tui mất thời gian tìm lỗi, có khi còn gỡ không ra lỗi đến mức phải dẹp bỏ, làm file mới.
Tiếp tục, phần BODY của file bai6.html có nội dung:
Khối DIV lorem ipsum
Mẹo: đừng ngồi mà gõ lorem ipsum bạn nhé, copy nó ở trang này.
Kết quả có được thật… không thể tin được 😀
Kết quả CSS đã có tác dụng vào khối DIV
Selector là cái quái quỉ gì?
Selector chính là khái niệm cốt lõi phải nắm trong CSS. Một element khi xuất hiện trong cây DOM sẽ được định danh bằng một cái tên nào đó người ta có thể hiểu được thay vì để trình duyệt tự định danh, cái tên này chính là selector.
Chúng ta xét đoạn mã HTML:
Đoạn mã HTML để giải thích về selector
Nếu sử dụng “ngôn ngữ trình duyệt” để diễn tả, trông như sau:
Selector chính là phần văn bản bắt đầu sau chữ body
Nếu ta sử dụng selector theo như trình duyệt gọi sẽ là quá dài dòng. Người làm web sẽ khóc thét vì độ phức tạp xen lẫn nhàm chán của việc copy & paste lại, sửa chữa số thứ tự, dễ gặp sai sót.
Vì vậy, người ta đã nghĩ ra một cách đặt tên lại cho các element đơn giản hơn thông qua tên thẻ (tag name), phối hợp các thuộc tính của element. Trong đó, hai thuộc tính thường dùng nhất là id, class.
Ta thử viết lại element chỉ logo thành:
Element hình ảnh có thuộc tính id, giá trị là logo
Nếu trong file styles.css mà ta viết theo cách của trình duyệt hiểu, nó sẽ:
Vậy, ta gọi #logo là selector
Như vậy, để trình duyệt khi đọc file HTML tìm đến đúng rule trong styles.css thì ta phải chỉ ra được element đang xem xét nằm ở đâu trong “rừng” các rule CSS. Lúc này, trình duyệt đơn giản là “nhìn vào” thuộc tính id, đọc được giá trị logo.
Tiếp theo, trình duyệt sẽ tìm đến rule bắt đầu bằng #logo trong file styles.css và lấy rule này để áp dụng định dạng cho element IMG mà ta đang xem xét.
Có một tình huống thú vị đó là ta có thể viết:
Selector dùng tag name (tên thẻ)
Nếu toàn bộ trang web hiện tại chỉ có đúng một element IMG như ví dụ này, hoặc bạn đang có ý định tất cả hình ảnh trên trang đều có viền nét liền, rộng 2 pixel, màu hồng cánh sen.
Những trang web ngày nay có hàng trăm, thậm chí hàng ngàn element. Nếu ta cứ luôn phải áp dụng theo kiểu đặt id như trên, thì xem ra cũng không mấy thú vị, bị quá tải vì quá nhiều id.
Do đó, luôn tồn tại cách khác, đó là người ta sử dụng thuộc tính class.
Vắn tắt lại cho dễ nhớ:
Nếu HTML không có id, class mà trong rule CSS ta dùng tên thẻ thì sẽ có hàng chục đến hàng trăm element sẽ được tác dụng bởi một rule. Cho nên, cách dùng tên thẻ chỉ áp dụng cho một số thẻ/ element chỉ xuất hiện một lần duy nhất trong một tài liệu HTML như BODY, HEADER, FOOTER.
Nếu HTML dùng id=”abcd” thì trong rule CSS ta sử dụng #abcd làm selector.
Nếu HTML dùng class=”efgh” thì trong rule CSS ta sử dụng .efgh làm selector.
Ngoài ra, selector nâng cao sẽ phối hợp giữa các thứ trên.
Giới thiệu một số thuộc tính, giá trị thường dùng
Có đến hơn 200 thuộc tính trong phiên bản CSS3. Ngay cả những người làm web kiếm cơm hàng ngày cũng không thể nhớ xuể. Bạn cần tra cứu khi dùng.
(*) Nếu tiếng Anh đủ tốt hoặc không ngại tra từ điển, bạn chỉ cần gõ Google như sau: background CSS properties, font css properties, color css properties… hoặc những thứ mà theo bạn chúng xuất hiện trong việc mô tả trang web.
Tiếng Anh chưa đủ tốt, thì dịch từ tiếng Việt sang tiếng Anh rồi làm như (*) bên trên. Bạn có hiểu ý KACBT muốn nói không? Ví dụ bạn gõ: cỡ chữ tiếng Anh là gì vào Google tìm kiếm, tra được từ font size, bạn nhập font size CSS vào Google là ra cái bạn cần đọc. Hoặc bạn muốn màu sắc đô
Dù sao, cũng duyệt xem qua danh sách > 200 thuộc tính đã kể trên.
Một dòng chữ được viết bên trong một khối sẽ có các thuộc tính canh lề: trái (mặc định), phải (right), giữa (center), đều lề trái và phải (justify). Giờ đây, ta có minh hoạ:
File style.css có nội dung:
Nội dung file styles.css
File styles.css đặt trong thư mục css. Sau đó, nội dung file HTML ở phần HEAD có dòng kết nối đền file chứa nội dung CSS trông như này:
Dòng có số 7 có mục đích gắn CSS vào HTML
Hình minh hoạ trên chữ style.css sai, phải là styles.css
Nếu bạn vẫn chưa hình dung ra file HTML của mình trông thế nào, sau đây là toàn nội dung:
Toàn bộ nội dung HTML
Hình minh hoạ trên cũng sai, phải là styles.css, không style.css
Kết quả khi xem trên trình duyệt Web, trông không khác chút nào so với:
Kết quả của việc áp các rule (luật) CSS cho element
Chúng ta dễ dàng thấy rằng các luật CSS được viết trong file styles.css luôn có các dấu chấm đứng đầu: .hop-chua, .canh-giua, .canh-phai, .canh-deu-hai-le. Tuy nhiên, khi những định nghĩa này được áp dụng vào file HTML dưới dạng giá trị của thuộc tính class, ta không thấy dấu chấm xuất hiện nữa. Lúc này, chỉ còn là: class=”canh-giua”, class=”canh-phai”, class=”canh-deu-hai-le”
Ở đây, không có .canh-trai vì mặc định một đoạn văn trong khối được canh trái. Nhưng không cấm bạn thực hành việc tạo ra một rule có text-align: left.
Thuộc tính liên quan đến vị trí khối, kiểu hiển thị
Thành tố HTML (tức element) luôn có một giá trị hiển thị mặc định tuỳ thuộc element đó thuộc loại gì. Có hai giá trị hiển thị: block (khối) và inline (trong dòng).
Các element cấp khối (block-level elements): luôn bắt đầu một dòng mới và mặc định trình duyệt web sẽ thêm một khoảng hở nhỏ (margin) trước và sau khối.
Một block-level element luôn chiếm hết chiều rộng của khối cha mẹ. Có hai element thông dụng để tạo ra một khối văn bản đó là DIV, P. Ngoài 2 element thông dụng vừa kể, các element sau cũng thuộc nhóm block-level.
Các element có kiểu hiển thị mặc định là block
Trong khi đó, có vài element thông dụng như A, IMG, SPAN lại là inline-level element. Nói cách khác, chúng nằm trong dòng, không chiếm một “khoảng trời riêng” ở nơi chúng xuất hiện. Bạn hãy xem lại các bài trước, ở nơi có xuất hiện những element vừa liệt kê để thấy. Sau đây là những element mặc định có kiểu hiển thị là inline:
Các element có kiểu hiển thị mặc định là inline
Để rõ thêm, bạn sử dụng đoạn mã sau đây vào file HTML của bạn để thấy DIV rõ ràng là một block, còn SPAN là một inline:
DIV đại diện cho block, SPAN đại diện cho inline
Một khối bình thường xuất hiện trên trang HTML sẽ có position (vị trí) mặc định là static. Nghĩa là bạn không cần phải viết:
Mặc định trình duyệt hiểu position của một khối là static
Tương tự như vậy, với thuộc tính display, trình duyệt sẽ mặc định ngầm hiểu hoặc block hoặc inline tuỳ theo element thuộc nhóm block hoặc nhóm inline như đã đề cập ở trên. Trong một số trường hợp đặc biệt, bạn có thể thay thế thuộc tính display của một element từ inline sang block (trong thực tế, thường thấy với thẻ A, IMG) hoặc từ block sang inline (trong thực tế, thường thấy với thẻ LI).
Viền khối có hai thuộc tính được sử dụng đó là border và outline. Bạn sẽ thấy được sự khác nhau giữa border và outline:
Đoạn này trong file CSS style.css của bạn.
Trong khi đó, trong file HTML bạn sẽ có đoạn mã:
Đoạn này đặt trong file HTML
Sau khi save lại 2 file HTML và CSS, bạn có được kết quả:
Kết quả cuối cùng khi F5 refresh lại trang web
Bài tập:
Đọc bài này bạn có phát hiện ra lỗi gì không? Gợi ý: lỗi liên quan đến file CSS, nếu bạn vẫn chỉ có một file bai6.html để thực hành, bạn có thể cảm thấy có đến 2 file CSS là styles.css và style.css. Chúng tôi cố tình viết lúc thì styles, lúc thì style để xem bạn xử lý việc này như thế nào. Hãy cho chúng tôi biết cách xử lý của bạn để chúng tôi nắm được bạn có hiểu bài hay không.
Hãy thử thay đổi display mặc định của element: từ block sang inline hoặc inline-block hoặc ngược lại từ inline sang block rồi F5 nạp lại trang, quan sát, rút ra nhận xét.
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:
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.
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).
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. 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ế. 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 đá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ứ thường xuyên 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, tốn mớ tiền nhưng vẫn 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 thẻ ASIDE, 1 thẻ 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. Hiển 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 thanh các 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. Chữ, đoạn văn, 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 thử quay về Bài 1 để nhớ lại chúng tôi đã giải thích, từ từ rồi trang web sẽ phong phú, đẹp đẽ lên.
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:
ASIDE có chứa 2 phần tử con là H2, UL
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 thứ tự, mỗi thẻ LI là mỗi mục trong danh sách. Trong thẻ LI ta có dùng thẻ A mục đích để tạo liên kết, 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=”#” tạm, sau này điền URL thay vào dấu #
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:
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. Tải ảnh về, chỉnh kích cỡ cho các ảnh để mỗi ảnh không rộng quá 320 pixel. Lý do: ảnh rộng 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
Tui vừa học thêm được 2 thẻ mới bữa giờ chưa biết:
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.
Thẻ FIGCAPTION để có dòng ghi chú cho hình ảnh bởi thẻ 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, nó cũng không chỉ 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ả trình bày lên trên trang web 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 về (con của) MAIN sẽ là một bảng đơn giản. Kết quả như hình:
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ã:
Đ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 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 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 dữ liệu của INPUT, tính theo byte. 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.
Thuộc tính id, name 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. Dễ hiểu hơn, trong 1 danh sách không được có 2 thành viên trùng số điện thoại di động, trùng số CMND.
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:
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.
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á 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 là á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.
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.
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”
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ụ:
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.
Thêm một vài hình ảnh chụp quán ngay sau phần đặt món cho đẹp.
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.
Tự thêm vào phần MAIN hoặc ASIDE những gì bạn cảm thấy cần thêm để khách hàng dễ truy cập hơn khi ghé vào trang chủ.
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ó.
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.
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.
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.
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ònCây thần kỳ có trái tạo ra điều kỳ diệuCâ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:
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
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.
Ả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.
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.
Mong muốn giúp bạn tự tay làm được một trang web theo cách dân ngoại đạo CNTT. Chúng tôi – Khó Ăn Cát Bê Tông (KACBT) viết loạt bài chỉ dần cách làm khá “tà đạo”.
Bạn tránh né, thoát khỏi sa đà vào những thứ rối rắm, mệt mỏi.
Biểu tượng HTML5
Bạn sẽ thoát được cảm giác “Ủa, CNTT khô khan, khó khăn kiểu này mà vẫn được nhiều người thích sao?“.
Bạn chỉ cần đặt niềm tin vào KACBT, tin tưởng bản thân, thích thử cái gì đó mới & không khó lắm.
Nếu có thêm một chút chăm chỉ, cẩn thận, bạn sẽ có một trang web (hoặc một chùm trang web có mối liên quan = website) sau một thời gian không dài, tương đương một khóa học làm bánh, nấu ăn cơ bản.
Sửa dòng 5 “Vùng đất thực hành web” để phản ánh chủ đề trang web bạn làm ngày hôm đó.
Xóa các dòng 8 đến 11, chỉ để lại dòng trống ở dòng 8 để nhập nội dung mới.
Dòng 12, 13 giờ đây đã trở thành dòng 9, 10.
Đây là kết quả:
Mẫu đơn giản nhất để tạo 1 trang web bất kỳ
Giải thích những gì vừa xảy ra
File bai1.html vừa tạo được gọi là file HTML (HyperText Markup Language). HTML chính là “quả tim, khối óc, khung xương” của mọi trang web trên thế giới này.
Có lúc, bạn đọc đâu đó thấy “ngôn ngữ đánh dấu siêu văn bản”, “mã HTML”, “code HTML” cũng chính là HTML đang nói.
Từ nay trở đi, KACBT viết kèm từ tiếng Anh bên cạnh các câu chữ tiếng Việt hoặc chỉ dùng tiếng Anh vì không biết chuyển ngữ sang tiếng Việt thế nào.
Đây không phải xính tiếng Anh, chỉ vì công nghệ Web, ngôn ngữ HTML ban đầu do một người Anh sáng tạo ra, dùng tiếng Anh mô tả. Tài liệu, ngôn ngữ của khoa học tin học, công nghệ thông tin trên thế giới này phần lớn xuất bản bằng tiếng Anh.
Dù tiếng Anh không phải là tiếng mẹ đẻ , một số nước cũng không còn xem tiếng Anh là ngôn ngữ thứ hai, không là ngoại ngữ mà tiếng Anh được dạy như các môn Toán, Lý, Hóa.
Chúng ta cứ vậy học, đòi hỏi sự “thuần Việt” sẽ khó khăn, vô lý, nhiều lúc không thực tế. Hơn nữa, tiếng Anh ngày nay không còn được xem là ngoại ngữ, mà là thứ tiếng ai cũng biết ít nhiều.
Có lẽ bạn đã học tiếng Anh nhiều năm, không giỏi vẫn đọc được chút ít, đâu khó khăn gì phải không nào?
Cách viết các cụm từ tiếng Anh trong các bài hướng dẫn có hai mục đích:
Giúp bạn tra cứu Google dễ dàng hơn khi cần tham khảo.
Giúp bạn quen với việc hiểu thuật ngữ tiếng Anh, dẹp bỏ được việc ngại đọc tiếng Anh.
Bạn cần quay trở về với Hình 1 bên trên, hình có đánh số dòng 1 đến 13, nhớ nhập nội dung đó đặt trên trình soạn thảo bên cạnh cửa sổ bài viết này đọc để dễ đối chiếu, hiểu bài.
Dòng 1: gọi là dòng DOCTYPE (Document Type Declaration) báo cho trình duyệt biết cần phải phân giải tài liệu HTML dưới theo dạng nào, phiên bản bao nhiêu.
Hiện tại, ngôn ngữ HTML đang ở phiên bản 5 (HTML version 5), còn được đề cập như là HTML5 (số 5 thường hay được viết dính liền, viết rời cũng không sao nhưng viết dính liền HTML5 phổ biến hơn).
Vậy, dòng 1 này luôn là vậy ở mọi file HTML. Bất kỳ trang web nào khi bạn mở ra thấy không giống vậy nghĩa là nó ở phiên bản cũ hơn, được làm từ cách đây ít nhất 5 năm.
Dòng 2: thẻ HTML mở (opening tag) này là thẻ dùng bao quát cho mọi tài liệu/ file HTML.
Dòng 3: thẻ HEAD mở, dùng để khai báo liên quan đến phần Header trong giao thức HTTP truyền trang web. Các tag trong phần HEAD này thường không xuất hiện trên màn hình hiển thị nội trang web, ngoại trừ thẻ TITLE làm nên tiêu đề hiện lên tab cửa sổ trình duyệt.
Dòng 4: thẻ META, báo cho trình duyệt biết tài liệu HTML được mã hóa dạng Unicode UTF-8. Nếu file của bạn có nội dung không phải tiếng Anh, luôn có dòng này để font chữ hiển đúng. Thẻ này là thẻ rỗng (empty tag) nên không có thẻ đóng, nên áp dụng tự đóng (self-closing).
Dòng 5: phần tử (element) TITLE để đặt tiêu đề cửa sổ tab của trình duyệt. Thẻ này cũng giúp cho việc máy kiếm như Google, Bing dễ tìm thấy trang web trên Internet. Title cần phản ánh chủ đề chính nội dung trang web.
Dòng 6: thẻ HEAD đóng của thẻ HEAD mở ở dòng 3.
Dòng 7: thẻ BODY, tức là phần thân của tài liệu HTML, nó cũng chính là phần mở đầu cho phần nội dung chính của trang web. Các bố cục, văn bản, hình ảnh hiển thị trên trang web đều là các thẻ khác nằm bên trong body.
Dòng 8: phần tử H1, thể hiện dòng chữ to, đại diện cho tiêu đề cấp 1 của tài liệu. Ta cứ hình dung một tài liệu có cấu trúc thì H1 là cấp nội dung lớn nhất, bao quát nhất.
Dòng 9: phần tử P, tạo ra một đoạn văn (paragraph) trên trang web.
Dòng 10, 11: phần tử P, tạo ra một đoan văn khác trên trang web.
Dòng 12: thẻ BODY đóng cho thẻ BODY mở dòng 7.
Dòng 13: thẻ HTML đóng, đóng cho thẻ HTML mở dòng 2, chính thức đóng lại tài liệu HTML.
Những điểm cần nắm vững, học thuộc lòng
Thẻ (tag) và phần tử (element) giống/ khác nhau thế nào? Xem giải thích.
Xét theo khía cạnh cấu trúc mở/ đóng thì thẻ được chia làm hai nhóm:
Nhóm thẻ có nội dung (container tag): phần lớn các thẻ thuộc nhóm này. Tức là có thẻ mở, rồi đến nội dung của thẻ, sau đó thẻ đóng.
Nhóm thẻ không có nội dung/ thẻ rỗng (empty tag): ít thẻ, bạn có thể nhớ danh sách thẻ sau: AREA, BASE, BR, COL, EMBED, HR, IMG, INPUT, LINK, META, PARAM, SOURCE, TRACK, WBR
Từ đặc tính trên, dễ dàng nhận thấy thẻ có nội dung có thể chứa một/ nhiều thẻ có nội dung khác và/ hoặc thẻ không có nội dung bên trong nó. Trong khi đó, thẻ không có nội dung thì không thể chứa bất cứ cái gì trong nó.
Đứng ở góc độ xây dựng bố cục các khối cấu trúc giao diện trên trang web, các phần tử (element) sẽ rơi vào 3 nhóm:
Phần tử dạng khối (block-level element): mỗi phần tử tạo ra một khối hình chữ nhật, mặc định chiếm trọn không gian chiều ngang của màn hình mà không cho phép phần tử nào khác nằm cạnh nó bên trái hoặc bên phải. Việc chiếm không gian không đồng nghĩa với độ rộng của khối, khối có thể nhỏ hơn nhiều so với chiều ngang của khối cha mẹ.
Phần tử trong dòng (inline-level element): các phần tử nằm cùng một dòng cạnh nhau trên màn hình, nếu chưa canh chỉnh CSS, các phần tử sẽ nằm liền sát nhau. Các khối này không có chiều rộng và chiều cao của riêng nó mà phụ thuộc vào khối cha mẹ và phần tử con của nó.
Phần tử khối trong dòng (inline-block element): các phần từ này được phép nằm cạnh nhau nhưng chúng là khối riêng biệt, có thể chỉnh chiều rộng và chiều cao khối.
Minh họa bên dưới giúp hình dung rõ hơn về phần tử dạng block, inline hoặc inline-block:
Các kiểu hiển thị (display) của một phần tử (element)
Chưa cần biết CSS là gì, chỉ cần biết dùng CSS để “làm đẹp” các element khi chúng hiện lên màn hình.
Ta hình dung các element là những khối hình chữ nhật (dài, ngắn khác nhau) được trình bày trên trang web với khung viền, màu nền, có chứa hình, chữ bên trong, hoặc đơn giản chỉ khối vô hình khi cần mới hiện ra. Hoặc nếu khối có kiểu display là inline sẽ hơi giống chữ nhật nhưng bị răng cưa trồi sụt ở 2 cạnh bên.
Làm cho trang web chạy trên môi trường gần giống như khi xuất bản
Phần này lẽ ra KACBT để cho bạn tự mày mò làm nhưng sẽ có người chưa từng học tin học căn bản, sử dụng máy tính một cách rất bản năng nên việc cài đặt sẽ khó khăn.
Nếu bạn đã đọc bài Đồ nghề và đã cài đặt thành công mọi thứ, dừng ở đây. Còn vẫn khá ABC, cứ đọc và lần lượt làm theo.
Chạy XAMPP lên bằng cách vào Menu của Windows hoặc thanh tìm kiếm.
Kết quả sau khi cài thành công XAMPP, mở bảng điều khiển:
Bảng điều khiển XAMPP
Giờ đây, bạn chỉ cần mở Notepad++ lên, gõ như sau:
Nội dung trang web Xin chào
Bấm nút Save, tìm đến D:\xampp\htdocs, nhập tên file xinchao.html như minh họa:
Đặt tên file là xinchao.html
Mở trình duyệt web lên, gõ vào thanh địa chỉ, như minh hoạ:
Chỗ có localhost/xinchao.html chính là thanh địa chỉ (address bar)
Cứ trước mỗi buổi học web, bạn lần lượt làm:
Mở XAMPP Control lên, bấm nút Start ở dòng có chữ Apache như đã minh hoạ ở phần trên.
Mở trình soạn thảo Notepad Plus Plus (Notepad++) lên, sử dụng nội dung mẫu để sẵn sàng cho bài học mới hoặc bài yêu cầu Save as file bài trước đó.
Mở trình duyệt web lên, gõ http://localhost/baiX.html (thay X bằng số thứ tự của bài).
Mỗi khi có sự chỉnh sửa mã (tức nội dung HTML được soạn trong Notepad++), nhớ bấm Ctrl + S để Save lại trước khi xem kết quả bên trình duyệt. Có rất nhiều bạn cứ nghĩ rằng chỉnh xong là tự save, hoặc không biết là phải Save mỗi khi có sự chỉnh sửa. Đó là thiếu kiến thức tin học căn bản vậy.
Khi chuyển qua trình duyệt để xem kết quả, nếu bấm F5 (hoặc nút reload/ refresh; hoặc Ctrl + R) trên trình duyệt mà chưa có sự thay đổi thì: thử Shift + F5, kiểm tra lại mã HTML bên Notepad++, đã Save file chưa? File chưa Save sẽ thấy có hình dấu sao ở góc trái trên title bar.
Tham gia thảo luận bài 1 để được giải đáp nếu bạn có gì đó chưa rõ.
Lời khuyên này được cóp nhặt trên Facebook của một trang tên là Tech Mely, nhưng được sửa lại một vài chỗ cho dễ đọc hơn.
Về HTML
Luôn khai báo DOCTYPE: trình duyệt sử dụng DOCTYPE để hiểu toàn bộ tài liệu cần được diễn giải như thế nào.
Chỉ nên dùng 1 thẻ H1 cho một trang nếu trang đó không đang bố trí như một mục lục cuốn sách.
Hình ảnh cần phải có thuộc tính alt, và có thuộc tính width, height để trình duyệt render được mượt mà, hỗ trợ người mắt kém dùng trình duyệt đọc tiếng.
Sử dụng Semantic Elements: hãy sử dụng header, footer thay cho chỉ sự dụng các thẻ div mà thôi
Luôn đóng tất cả các thẻ, kể cả các thẻ như meta, img, br.
Về CSS
Tránh import quá nhiều thư mục CSS: code của bạn được tải với nhiều tệp CSS, thời gian cần thiết để tạo trang sẽ tăng lên.
Tránh Inline Styles.
Sử dụng @media nếu trang của bạn phải tải trên cả web và thiết bị di động để tạo giao diện tùy biến responsive.
Cẩn thận với các thuộc tính CSS nặng: các hiệu ứng, !important.
Về JavaScript
Suy nghĩ về khả năng tiếp cận vấn đề cần giải quyết, các thuật toán thường dùng.
Sử dụng các công cụ dành cho nhà phát triển web: trình soạn thảo, môi trường phát triển như NodeJS, REST mock API.
Framework là giải pháp cuối cùng: bạn phải nắm vững JavaScript cơ bản thay vì quá phụ thuộc vào một/ vài framework nào đó.
Về PHP
Ngay từ ngày đầu bắt tay vào dòng code PHP đầu tiên truy cập trang phptherightway chấm com. Lần lượt đọc bài ở trang này, từ trên xuống dưới, từ trái qua phải.
Trang Web của tổ chức W3C – nơi duy trì các tiêu chuẩn về Web.
Hình 1. Phân biệt Internet với WWW
World Wide Web không đồng nghĩa với Internet. World Wide Web được viết tắt là WWW, nhưng thông thường người ta dùng từ Web để chỉ chung. Từ Web là từ đúng, nhưng viết Web khá mất công nên khi đánh máy, nên KACBT viết là web.
Thoạt nghe thì rối rắm, thực sự bạn hiểu như vầy: 1 trang web chẳng qua là một văn bản, giống như mấy cái tờ giấy mà bạn thấy người ta dán trên cửa vậy, hoặc dán quảng cáo ngoài trụ điện đi cho dễ hình dung. Điểm khác biệt ở đây là siêu văn bản này nằm trên máy tính, điều hay ho là khi click chuột hoặc chọc ngón tay (khi truy cập bằng điện thoại) lên các liên kết xuất hiện trong siêu văn bản này thì bạn được dẫn đưa tới văn bản khác sau vài giây. Tức là nó có tính động vậy, thay vì tĩnh cứng ngắc như văn bản in ra giấy.
Nhiều trang web nằm chung trên một tên miền (domain) có sự kết nối với nhau thành một thể thống nhất thì được gọi là một website.
Nhiều website trên Internet trở thành một lưới khổng lồ như hàng triệu mạng nhện thì người ta gọi là WWW.
Trải qua sự phát triển thì ngày nay người ta gọi là Web 2.0, và đang manh nha xuất hiện Web 3.0 nhưng vẫn còn tranh cãi Web 3.0 trông ra làm sao.
Tôi muốn xem một trang web, nó ở đâu?
Rất đơn giản, bạn mở trình duyệt web lên, nhập cái gì đó vào ô tìm kiếm và Enter. Trên màn hình hiện ra các kết quả tìm kiếm có thể từ Google, Bing hoặc công cụ tìm kiếm mặc định nào đó trên trình duyệt web của bạn, đó chính là trang web. Khi click vào một kết quả như vậy, bạn cũng sẽ được dẫn đến một trang web.
Nếu bạn không hình dung được, hãy mở trình duyệt web lên và nhập vi.wikipedia.org bạn sẽ vào được một trang web rất thú vị.
Hình 2. Diện mạo trang chủ Wikipedia tiếng Việt
Sống trong thời đại Web 2.0
Mặc dù rất nhiều người đang sử dụng Web 2.0 mỗi ngày nhưng họ chẳng biết quái gì về tên gọi của nó, cũng như những đặc điểm, tính chất cơ bản nhất của nó. Điều này cũng giống như bạn có một chiếc xe máy để đi nhưng chẳng biết gì về nó. Có vẻ là với nhiều người điều đó rất bình thường thôi, cần gì phải biết về chiếc xe. Nhưng khi nó gặp trục trặc nhỏ nào đó trên đường mà nơi đó không có tiệm sửa, nếu bạn biết chút ít thì bạn có thể tự cứu mình ra khỏi rắc rối.
Ở đây, KACBT muốn nói rằng bạn vào đây để xem các hướng dẫn nhằm có thể tự tay làm cho mình một trang web, không lý gì bạn sợ phải tìm hiểu về Web 2.0. Nào, mời đọc ngay Web 2.0 cho nóng sốt xình xịch để rồi “à há, hoá ra cũng thú vị về cái quen thuộc nhưng khá mơ hồ“.
Nếu bạn muốn tạo danh sách có thứ tự, thay UL bằng OL
Thuộc tính id, name 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. Dễ hiểu hơn, trong 1 danh sách không được có 2 thành viên trùng số điện thoại di động, trùng số CMND.
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”
