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
Hiện nay nhiều nhà cung cấp web hosting không cho phép gửi email bằng hàm gửi mail mặc định bởi vì tình hình spam, hoặc gửi email được nhưng luôn rơi vào thư mục spam của người nhận. Đó là chưa kể có một sự thật thú vị: nếu cung cấp gửi email như vậy thì có còn mấy khách hàng đăng ký dịch vụ email hosting cơ chứ.
Do vậy, dân vọc Web sẽ nghĩ đến cách làm sao gửi được email. Cụ thể bài viết này sẽ hướng dẫn bạn cách làm sao để WordPress
Thực hiện theo hướng dẫn chính chủ từ Google
Chỉ cần đọc bài này và làm theo. Nếu làm được xem như xong. Chưa làm được bạn hãy đọc tiếp bên dưới.
Sau bước 3 nghĩa là đã bật được chức năng xác thực hai bước cho tài khoản Google.
Tại sao việc bật xác thực 2 bước này là quan trọng, buộc phải làm? Có 2 lý do cho vấn đề:
Thứ nhất: Google không còn cho phép dùng mật khẩu của tài khoản Google để xác thực việc gửi email thông qua một ứng dụng mà không có sự tương tác trực tiếp của con người.
Thứ hai: thật tai hại nếu lộ mật khẩu của tài khoản Google khi mà tài khoản đó đang được bạn dùng như một “chìa khoá vạn năng” mở cửa vào cánh cửa của mọi dịch vụ liên quan đến Google. Nếu lộ mật khẩu đó mà không kèm xác thực 2 bước, cuộc đời của bạn có thể rơi xuống bùn, thật chứ không đùa.
Vậy nên, sau khi kích hoạt được xác thực 2 bước rồi, ta mới là phần (4) App passwords như khoanh đỏ ở hình bên trên. Click mục đó, nó sẽ:
Hình 2. Màn hình cho phép tạo mật khẩu App
Nếu bạn đã từng tạo App password trước đây thì trong danh sách có liệt kê, còn không thì sẽ trống trơn. Giờ đây bạn quan tâm đến vùng như khoanh đỏ trên Hình 2.
Click chọn Select app xổ ra menu và chọc như hình dưới:
Hình 3. Đặt tên cho App mà bạn sẽ dùng
Nghe tên mật khẩu app, mật khẩu ứng dụng cực kỳ tối nghĩa với người Việt chúng ta, nhất là nếu bạn không phải dân công nghệ thông tin. Thực sự hiểu vầy cho dễ: Google xem các thứ kết nối tới dịch vụ của họ là một “ứng dụng” (phần mềm/ trình duyệt/ trang web/ phần mềm máy chủ).
Vậy nên, bạn cần đặt tên gì đó để sau này nhìn vào bạn biết/ gợi nhớ là cái mật khẩu này tạo ra để dùng làm gì, ở đâu. Không ai cấm bạn đặt trên nghe mỹ miều và vô nghĩa cả, nhưng đừng tự làm rối mình kiểu bạn bán cá nhưng có tên là Tôm.
Ngay khi gõ vài ký tự để đặt tên, bạn sẽ nhận thấy nút Generate chuyển trạng thái xanh cho phép click. Lúc này click sẽ sinh ra một cái gọi là App password, đây chính là kết quả chúng ta đang mong đợi.
Hình 4. Kết quả mật khẩu tạo ra.
Copy lại 16 ký tự chữ thường trong ô màu vàng/ cũng nên chụp ảnh màn hình lại để sử dụng về sau khi cần bởi vì ta không thể thấy được mật khẩu này thêm lần nào nữa. Bấm nút DONE để hoàn tất.
Dùng thông số cấu hình cho mã nguồn của bạn
Chúng tôi minh hoạ với code PHP, dùng thư viện nguồn mở có sẵn gọi là PHPMailer, nếu bạn sử dụng ngôn ngữ lập trình khác thì bạn chỉ cần sử dụng cú pháp của ngôn ngữ đó, lấy lại các thông số username và mật khẩu như trong hình.
Hình 5. Cấu hình SMTP Gmail dùng trong PHP.
Chú ý: thay cái mật khẩu ở hình trên với mật khẩu có được từ mục tương đương Hình 4 trên. Không có nghĩa là bạn lấy mật khẩu app của chúng tôi có email của bạn.
