Sử dụng mã thập lục phân trong HTML

Một mã thập lục phân gồm 6 chữ số đại diện cho một màu. Hai chữ số đầu tiên (RR) biểu diễn màu đỏ, hai chữ số tiếp theo (GG) biểu diễn màu xanh lá cây, và hai chữ số cuối cùng (BB) biểu diễn màu xanh da trời.

Một giá trị thập lục phân có thể được nhận bởi bởi bất kỳ phần mềm đồ họa nào: Adobe Photoshop, Paintshop Pro hoặc MS Paint.

Mỗi mã thập lục phân sẽ được bắt đầu bằng một dấu thăng (#). Dưới đây là danh sách của một số màu.

Màu Mã thập lục phân

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

VÍ DỤ

Dưới đây là ví dụ thiết lập màu nền bởi sử dụng mã thập lục phân:

<!DOCTYPE html>

<html>

<head>

<title>Thiet lap mau boi su dung Hex code</title>

</head>

Su dung cac gia tri Hex code khac nhau cho body va table.

<tr>

<td>

Hien thi mau trang tren nen den.

</td>

</tr>

</table>

</body>

</html>

Sử dụng thuộc tính RGB trong HTML

Giá trị màu được xác định bằng cách sử dụng giá trị thuộc tính rgb(). Thuộc tính nhận một trong 3 giá trị là đỏ (red), xanh lá cây (green) và xanh da trời (blue). Giá trị này có thể là một số nguyên từ 0 – 255 hoặc một số phần trăm.

Ghi chú: Tất cả các trình duyệt không hỗ trợ giá trị rbg() của màu, vì thế chúng tôi đề nghị bạn không nên dùng nó.

Dưới đây là danh sách để chỉ một số màu sử dụng giá trị RGB.

Màu Giá trị RGB

rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

VÍ DỤ

Ví dụ sau thiết lập màu bởi sử dụng giá trị rgb():

<!DOCTYPE html>

<html>

<head>

<title>Thiet lap mau boi su dung thuoc tinh RGB</title>

</head>

Su dung cac gia tri rgb khac nhau co body va table.

<tr>

<td>

Hien thi mau trang tren nen den.

</td>

</tr>

</table>

</body>

</html>

Danh sách màu an toàn cho trình duyệt trong HTML

Dưới đây là danh sách mã của 216 màu mà được tất cả các trình duyệt hỗ trợ. Các màu này có mã từ 000000 tới FFFFFF và được hỗ trợ bởi các máy tính có bảng màu gồm 256 màu.

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99

Các font đóng vai trò rất quan trọng trong việc tạo ra một Website thân thiện với người sử dụng, giỳp họ dễ theo dừi nội dung hơn. Bề mặt và màu font phụ thuộc hoàn toàn vào máy tính và trình duyệt được sử dụng để quan sát trang web nhưng bạn có thể sử dụng thẻ HTML  để thêm kiểu, kích cỡ và màu cho văn bản trên web. Bạn cũng có thể sử dụng thẻ <basefont> để thiết lập cùng một cỡ, bề mặt, và màu cho tất cả văn bản của bạn.

Thẻ font có 3 thuộc tính là size, color, face để xác định font. Để thay đổi bất kỳ thuộc tính font nào tại bất kỳ thời gian nào trong trang web của bạn, bạn sử dụng thẻ . Văn bản sẽ giữ nguyên cho đến khi bạn đóng thẻ với

. Với thẻ , bạn có thể thay đổi một hoặc tất cả thuộc tính của nó.

Ghi chú: Hai thẻ font và basefont là thẻ cũ và chúng đang được cho rằng sẽ bị thay đổi trong các phiên bản mới của HTML. Vì thế bạn không nên sử dụng chúng nhiều, chúng tôi đề nghị bạn nên sử dụng các kiểu CSS để xác định font cho mình. Nhưng vì mục đích học tập, chương này chúng tôi vẫn giải thích chi tiết các thẻ này.

Thiết lập kích cỡ Font trong HTML

Bạn sử dụng thuộc tính size để thiết lập kích cỡ cho nội dung. Dãy giá trị được chấp nhận là từ 1 (nhỏ nhất) đến 7 (lớn nhất). Cỡ mặc định cho font là 3.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<title>Thiet lap kich co font trong HTML</title>

</head>

<body>

Font size="1"

Font size="2"

Font size="3"

Font size="4"

Font size="5"

Font size="6"

Font size="7"

</body>

</html>

Nó sẽ cho kết quả sau:

Font size="1"

Font size="2"

Font size="3"

Font size="4"

Font size="5"

Font size="6"

Font size="7"

Xác định kích cỡ font dựa vào kích cỡ Font hiện tại

Bạn có thể xác định cỡ lớn hơn hay nhỏ hơn bao nhiêu so với cỡ hiện tại.

Bạn sử dụng  hoặc 

Ví dụ

<!DOCTYPE html>

<html>

<head>

<title>Xac dinh kich co font trong HTML</title>

</head>

<body>

Font size="-1"

Font size="+1"

Font size="+2"

Font size="+3"

Font size="+4"

</body>

</html>

Đoạn code trên sẽ cho kết quả là:

Font size="-1"

Font size="+1"

Font size="+2"

Font size="+3"

Font size="+4"

Thiết lập bề mặt Font trong HTML - Font Face trong HTML

Bạn có thể thiết lập bề mặt font bằng cách sử dụng thuộc tính face nhưng bạn cần phải biết rằng nếu người sử dụng trang mà chưa chạy cài đặt font, họ sẽ không thể nhìn thấy nó. Và người dùng sẽ chỉ nhìn thấy bề mặt font mặc định áp dụng cho máy của họ.

Ví dụ

<!DOCTYPE html>

<html>

<head>

<title>Font Face trong HTML</title>

</head>

<body>

Times New Roman

Verdana

Comic Sans MS

WildWest

Bedrock

</body>

</html>

Nó sẽ cho kết quả sau:

Times New Roman Verdana

Comic Sans MS WildWest

Bedrock

Thiết lập danh sách Font Face trong HTML

Một người dùng sẽ chỉ có thể nhìn thấy font của bạn nếu họ đã cài đặt font đó trong máy. Vì thế, bạn có thể xác định các bề mặt font xen kẽ nhau bằng cách liệt kê các tên bề mặt font, phân biệt bằng dấu phảy.

Khi trang web của bạn được tải, trình duyệt của khách sử dụng sẽ hiện thị bề mặt font đầu tiên. Nếu không có font nào được cài đặt, nó sẽ hiển thị bề mặt font mặc định là Times New Roman.

Ghi chú: Kiểm tra danh sách đầy đủ của Một số Standard Font trong HTML.

Thiết lập màu Font trong HTML

Bạn có thể thiết lập màu cho font bằng cách sử dụng thuộc tính color. Bạn có thể xác định màu mà bạn muốn bằng cách sử dụng tên màu hoặc mã thập lục phân của màu.

Ghi chú: Kiểm tra danh sách đầy đủ của Màu và mã màu trong HTML.

Ví dụ

<!DOCTYPE html>

<html>

<head>

<title>Thiet lap mau font trong HTML</title>

</head>

<body>

Phan van ban nay co mau hong.

Phan van ban nay co mau do.

</body>

</html>

Nó sẽ cho kết quả sau:

Phan van ban nay co mau hong.

Phan van ban nay co mau do.

Phần tử <basefont> trong HTML

Phần tử <basefont> này được sử dụng để thiết lập một kích cỡ, màu, và bề mặt font mặc định cho bất kỳ phần nào trong tài liệu. Tuy nhiên, phần tử

có quyền ưu tiên cao hơn và sẽ ghi đè các thiết lập trong <basefont>.

Thẻ <basefont> cũng nhận các thuộc tính là màu, kích cỡ và bề mặt và phần tử này cũng sẽ hỗ trợ cách xác định kích cỡ fotn dựa vào kích cỡ font hiện tại (bằng cách đưa vào giá trị +1 cho cỡ lớn hơn hoặc -2 cho cỡ nhỏ hơn).

Ví dụ

<!DOCTYPE html>

<html>

<head>

<title>Thiet lap mau boi su dung basefont</title>

</head>

<body>

Day la font mac dinh cua trang.

Vi du cac thiet lap boi su dung phan tu font.

Vi du courier font.

</body>

</html>

Nó sẽ cho kết quả sau:

Day la font mac dinh cua trang.

Vi du phan tu <basefont>

Vi du cac thiet lap boi su dung phan tu font.

Vi du courier font.

Các mẫu form trong HTML được yêu cầu khi bạn muốn thu thập một vài dữ liệu từ người sử dụng. Ví dụ, khi người sử dụng đăng ký, bạn có thể muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng….

Một mẫu form sẽ nhận dữ liệu đầu vào từ site người sử dụng và sau đó sẽ thông báo nó tới các ứng dụng back-end như CGI, ASP Script hoặc PHP Script….

Có nhiều phần tử form có sẵn như các trường text, các trường textarea, menu, checkbox …

Thẻ <form> được sử dụng để tạo một Form trong HTML và thẻ này có cú pháp:

các phầ'n tư font, chăng hạn như input, textarea ...

</form>

Các thuộc tính của thẻ form trong HTML

Ngoài các thuộc tính thông thường, sau đây là các thuộc tính của form hay sử dụng:

Thuộc tính

Miêu tả

action Ứng dụng quản trị back-end sẵn sàng để xử lý dữ liệu từ site khách.

method Phương thức để tải dữ liệu lên. Thường sử dụng là GET và POST.

target Xác định cửa sổ hoặc frame để hiển thị kết quả. Thuộc tính có thể nhận các giá trị như _blank, _self, _parent….

enctype Bạn sử dụng thuộc tính này để xác định cách mà trình duyệt mã hóa dữ liệu trước khi nó gửi tới Server. Các giá trị có thể nhận là:

application/x-www-form-urlencoded - Đây là phương thức tiêu chuẩn mà hầu hết các form sử dụng.

mutlipart/form-data - Nó được sử dụng khi bạn muốn tải lên dữ liệu nhị phân trong mẫu form của các file như ảnh, word….

Một số form hữu ích trong HTML

Có các kiểu kiểm soát form khác nhau mà bạn có thể sử dụng để thu thập dữ liệu:

 Text Input

 Checkbox

 Radio Box

 Select Box

 File Select Box

 Submit

 ...

Text Input trong HTML

Có 3 kiểu Text Input được sử dụng trên form:

 Text Input một dòng đơn - Sử dụng cho các mục mà yêu cầu chỉ một dòng của dữ liệu đầu vào của người sử dụng như các hộp tìm kiếm hoặc tên.

Form này được tạo ra bằng cách sử dụng thẻ <input>.

 Password Input - Đây cũng là một Text Input một dòng đơn nhưng nó giấu các ký tự ngay sau khi người sử dụng nhập nó. Form này được tạo ra bằng cách sử dụng thẻ <input>.

 Text Input đa dòng - : Được sử dụng khi một người sử dụng được yêu cầu cung cấp thông tin mà có thể nhiều hơn một dòng. Form này được tạo ra bằng cách sử dụng thẻ <textarea>.

Text Input một dòng đơn trong HTML

Ví dụ

Dưới đây là ví dụ cơ bản của việc sử dụng Text Input chỉ có một dòng sử dụng để nhận tên và họ.

<!DOCTYPE html>

<html>

<head>

<title>Vi du Text Input trong HTML</title>

</head>

<body>

<form >

First name: <input type="text" name="first_name" />

Last name: <input type="text" name="last_name" />

</form>

</body>

</html>

Nó sẽ tạo ra kết quả sau:

First name:

Last name:

Chuyển hướng tran g Xác định url

Xác định background cho bảng trong HTML