Trang trí cho Văn bản

Bạn không chỉ có thể thêm màusắc cho nền mà còn có thể thêm màusắc, đổi KÍCH

THƯỚC, và ngay cả phông chữ cho các phần xác định của văn bản! Bạn phải trả hết bao nhiêu đây?

Nhưng HÃY CHỜ MỘT CHÚT! Bây giờ bạn có thể viết chữ ở trên và ở dưới như với những

công thức hóa học và toán như sau: CO2 + SO4-2

3x2 - 2y-1/2 = 4z

Mục đích

Sau bài học này bạn có thể:

• Thay đổi kích cở của một phần văn bản được chỉ định trong một trang Web. • Thay đổi màu sắc của một phần văn bản được chỉ định trong một trang Web. • Tạo chữ viết trên và dưới cho văn bản trong một trang Web.

• Chỉ định phông cho những phần văn bản trong một trang Web.

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ.

Với HTML do NetScape và HTML 3.0 giới thiệu, bạn có thêm một vài khả năng định dạng nữa cho văn bản của bạn. Đặc biệt nhất là, bạn có thể định những kích cở chữ cũng như màu sắc khác nhau cho văn bản. Khi sử dụng một cách đúng đắn, sự định dạng văn bản có thể làm nổi bật cách trình bày trang Web. Khi sử dụng một cách tự do, chúng có thể tạo ra các trang web trông rất hỗn độn.

Bạn cũng có thể tạo ra chữ viết trên và dưới được sử dụng trong biểu thức toán học, công thức hóa học, hoặc đánh dấu các ghi chú.

Trong bài này chúng tôi sẽ giới thiệu với bạn những tính chất này cùng với vài ví dụ mà bạn sẽ sử dụng để sửa đổi trang Volcano Web. Trước hết có thể bạn muốn tham khảo đến trang kiểm tra phông chữ để biết được web browser của bạn có hổ trợ những tag được sử dụng trong bài học này không.

Kích cở phông chữ

Tag <font size=N>...</font> do NetScape giới thiệu có thể được sử dụng để đặt lại kích cở của phông chữ từ N là 1 (nhỏ nhất) tới 7 (lớn nhất) với cở 3 là kích cở bình thường: Cở phông = 1 Cở phông = 2 Cở phông = 3 -- cở chữ thường Cở phông = 4 Cở phông = 5 Cở phông = 6 Cở phông = 7

Cần nhớ rằng kích cở thật của chữ còn phụ thuộc vào phông chữ trên máy tính do người sử dụng đã chọn cho web browser của họ -- bạn đang điều chỉnh lại kích cở tương đối so với phông mặc định mà họ đã chọn.

Chú ý: Nếu một web browser không hổ trợ cho tag <font>, bạn có thể thử những tag của HTML 3.0:

<BIG>...</BIG>

<SMALL>...</SMALL>

sẽ cho bạn ít loại kích cở hơn nhưng vẫn có thể hữu ích cho những browser đó.

Dạng HTML cho tag chỉnh cở phông là: <font size=N>blah blah blah</font>

trong đó N=1 tới 7. Tag phông có thể được sử dụng chung với những tag định kiểu chữ khác (bài 5) hay bên trong các tag tiêu đề (bài 3).

Một cách sử dụng khác của tag font là tạo ra một sự thay đổi kích cở tương đối:

<font size=+1>blah blah blah</font> <font size=-2>blah blah blah</font>

tức là, các giá trị +N hoặc-N cho biết độ dịch chuyển (offset) so với kích cở phông hiện tại.

Chúng thường được sử dụng cùng với một tag khác: <basefont size=5>

để thay đổi cở phông cơ bản (base font size) từ giá trị mặc định của nó là 3 thành một giá

trị khác. Có thể bạn phải làm điều này trong một trang Web mà có hầu hết các văn bản với cở lớn hơn hoặc nhỏ hơn cở phông chuẩn. Với cách này, nếu bạn cần điều chỉnh một phần nhỏ của trang, bạn có thể sử dụng tag chỉnh cở phông tương đối như trên.

Điểm mạnh của việc sử dụng tag chỉnh cở phông tương đối (ví dụ như size=+2) so với tag chỉnh cở phông tuyệt đối (ví dụ như size=5) là chúng ta có thể dễ dàng thay đổi cở của TẦT CẢ văn bản trong trang đó bằng một tag <basefont>.

Chú ý: tag <basefont> không có tag đóng lại - nó vẫn là cở phông cơ sở cho đến khi một tag <basefont> khác xuất hiện.

Trước hết chúng ta sẽ sử dụng tag chỉnh cở phông để sửa đổi tiêu đề của trang mở đầu:

1. Mở tập tin index.html trong trình soạn thảo của bạn.

2. Trước đây chúng ta đã sử dụng một tag tiêu đề <h1>..</h1> để định dạng cho tiêu đề cho trang này. Bây giờ chúng ta sẽ sử dụng vài tag chỉnh cở phông thay thế tạo một tiêu đề có cở hỗn hợp.

<h1>Volcano Web</h1> thành:

<p>

<B><font size=+4>V</font><font size=+3>OLCANO WEB</font></B>

Hãy nhìn cẩn thận chúng ta đã làm gì - V bây giờ đã tăng cở lên 4 đơn vị so với giá trị cơ bản, còn những ký tự khác (bây giờ dưới dạng chữ hoa) tăng lên 3 đơn vị so với giá trị cơ bản. Điều này tạo thành một cách trình bày của CHỮ HOA NHỎ (SMALL CAPS). Cũng lưu ý rằng chúng ta đã thêm tag

<b>...</b> để làm tiêu đề nổi bật lên. Và cuối cùng, bởi vì chúng ta không sử dụng tag tiêu đề để tag này tự tạo ra sự ngắt dòng như mặc định, chúng ta phải thêm tag <p> trong tiêu đề ở trên để ép buộc nó xuống dòng mới (sau này bạn sẽ thấy không cần vì dòng HTML kế tiếp là một <BLOCKQUOTE> và nó tự thêm sự ngắt dòng của nó - xem bài 13).

3. Tiếp theo, chúng ta muốn làm lời chú thích của Pliny nổi bật hơn một chút nữa, vì thế chúng ta sẽ tăng nó lên thêm một cở nữa:

4. <B><I><font size=+1>"Nature raves savagely, threatening the lands"</font></I></B><br>

5. Lưu trữ và Nạp lại trong Web browser của bạn.

Trước khi tiếp tục, chúng ta sẽ sử dụng tag chỉnh cở phông để sửa đổi hai trang Web khác trong bài của chúng ta. Đó là trang Volcanic Places in the USA (tập tin

usa.html) và Research Project (tập tin proj.html) đang sử dụng tag

<h2>...</h2> cho tiêu đề chính và tag <h3>...</h3> cho các phần đề mục con. Đến trình soạn thảo và thay đổi mỗi sự xuất hiện của tag:

<h3>blah blah blah</h3> thành :

<p>

<font size=+1><B>blah blah blah</B></font><br>

Lưu ý là tag <p> luôn luôn thêm một dòng mới cho văn bản theo sau và tag <br> tạo một ngắt dòng (không có dòng trắng) cho văn bản theo sau.

Bạn có nhìn thấy được sự khác nhau giữa việc sử dụng tag <font> và tag <hN> cho phần tiêu đề không? Sự định dạng khác nhau này rất tinh tế, nhưng nó cung cấp cho bạn - tác giả của trang Web - một cách nhìn mới trong việc thiết kế trang Web. Nhưng nhớ rằng nếu browser của người đọc không hổ trợ tag chỉnh cở phông, tất cả

chúng sẽ được nhìn thấy ở cở chữ bình thường.

Hai Phương pháp để tạo Tiêu đề

<h3>...</h3> <p><b><font size=+1> ...</font></b><br>

...before the next great innovation that rocked the world of rotten milk.

History of Longhorn Cheese

Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...

...before the next great innovation that rocked the world of rotten milk.

History of Longhorn Cheese

Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...

Trong bài 16, chúng tôi đã giới thiệu những tag định màu sắc cho văn bản trong toàn bộ trang Web cùng với việc biểu diễn giá trị màu trong HTML. Bạn cũng có thể thêm những thuộc tính vào tag để định màu một đoạn văn bản xác định bằng cách sử dụng mã hệ thập lục phân hoặc tên của 16 màu:

<font color=red>...</font> <font color=#993459>...</font> <font color=lime>...</font> <font color=#002200>...</font> <font color=navy>...</font> <font color=#193467>...</font>

Chúng ta sẽ không đi sâu vào những rắc rối của tag màu, nhưng như là một ví dụ, chúng ta sẽ đổi màu của đoạn VOLCANO WEB mà chúng ta đã xét trong trang bìa. Nếu bạn vẫn còn nhớ, chúng ta đã sử dụng màu cho văn bản của trang này là màu vàng và chúng ta sẽ thay màu khác cho phần tiêu đề:

6. Mở tập tin index.htm trong trình soạn thảo.

7. Điều chỉnh dòng chứa chữ VOLCANO WEB thành như sau: 8. <B><font size=+4 color=#FF66FF>V</font>

<font size=+3 color=#DD0055>OLCANO WEB</font></B> 9. Lưu trữ và Reload trong Web browser.

Chú ý: Các thuộc tính size và color có thểở trong cùng một tag <font>. Ở đây kết quả làm cho chữ "V" có màu viôlét sáng và tăng cở hơn một đơn vị so với các chữ khác.

Chữ trên và chữ dưới (Superscript and Subscript)

HTML 3.0 cho phép bạn viết các biểu thức toán học, công thức hóa học, hoặc những biểu thức khác với superscript và/hay subscript. Những tag mới này nâng cao/hạ xuống đoạn văn bản "script" một nửa dòng và giảm bớt cở của nó một đơn vị. Dạng HTML cho những tag này là:

Superscripts / Subscripts

HTML Kết quả

^... superscript _... subscript

Bây giờ chúng ta sẽ sử dụng các tag này cho trang Introduction của chúng ta: 10. Mở tập tin intro.htm trong trình soạn thảo.

11. Trước hết chúng ta sẽ sử dụng subscript để viết một vài công thức hóa học. Sau câu cuối cùng của đoạn 2 ("Compare the history of human beings...'), thêm câu sử dụng subscript sau:

12. Volcanoes were important contributors to 13. the early earth atmosphere by releasing 14. gases such as nitrogen (N₂), 15. carbon dioxide (CO₂), and

ammonia (NH₄).

16. Bây giờ chúng ta sẽ sử dụng superscripts để biểu thị một trị lập phương. Bên dưới bảng được tạo ra bằng tag <pre>...</pre>, thêm câu sau:

18. before historic times were several orders

19. of magnitude larger (more than 1000 km³ 20. in erupted volume) than ones observed by

humans.

21. Nếu bạn chú ý cột thứ ba của bảng, trước đây chúng ta sử dụng "km^3" để chỉ ra "km3". Mặc dầu đoạn văn này ở bên trong tag preformat, chúng ta vẫn có thể sử dụng tag superscript. Đổi:

Volume in km^3 thành

Volume in km³

Dạng phông (font face)

Trong tiêu chuẩn HTML 3.2 hiện nay có thêm vài thông số cho tag để chỉ ra dạng phông dùng cho việc hiển thị. Chức năng này có thể không làm việc trên nhiều browser, vì thế bạn có thể thử kiểm tra xem browser của bạn có hổ trợ đổi dạng phông không.

HTML cho việc chỉ định một dạng phông là: <font FACE="font1,font2">some text

Nếu browser của người đọc hổ trợ đặc tính font FACE và họ có một danh sách các phông đã được cài đặt sẵn trên máy tính của họ, thì văn bản sẽ được hiển thị theo dạng phông được chỉ định. Ngược lại, browser sẽ sử dụng cùng một phông với phần còn lại của trang web.

Nếu bạn quyết định sử dụng một dạng phông, bạn nên sử dụng các dạng phông chuẩn hoặc là chắc chắn rằng các máy tính của người dùng đã cài đặt thêm dạng phông đó.

Bây giờ chúng ta sẽ điều chỉnh tag cho trang tiêu đề để từ "Volcano Web" xuất hiện ở một dạng font khác:

22. Mở tập tin index.htm trong trình soạn thảo.

23. Sửa đổi dòng chứa đoạn văn VOLCANO WEB thành: 24. <B><font face="Arial,Helvetica"

25. size=+4 color=#FF66FF>V</font> 26. <font face="Arial,Helvetica"

size=+3 color=#DD0055>OLCANO WEB</font></B> 27. Lưu trữ và Reload trong Web browser .

Chú ý: Chúng ta chỉđịnh cho browser chọn phông Arial với Windows,

Helvetica cho Macintosh và/hay các máy tính chưa được cài đặt phông Arial. Sử dụng tính chất này của HTML với sự thận trọng! Nghệ thuật sử dụng dạng phông khác hoàn toàn với sự lạm dụng chúng!

Kiểm tra lại công việc của bạn

So sánh trang web của bạn với ví dụ mẫu để biết dạng hiển thị của nó. Nếu trang của bạn khác với mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại văn bản bạn đã đánh trong trình soạn thảo.

Xem lại

Xem lại những chủ đề sau:

28. Làm thế nào thay đổi cở và màu sắc của một phần văn bản trong một trang Web?

29. Bạn có thể sử dụng dạng HTML nào nếu browser không hỗ trợ tag <font>...</font>?

30. Làm thế nào bạn tạo được subscript trong HTML?

31. Làm thế nào tạo được một khối văn bản để được trình bày dưới một dạng phông xác định?

Thông tin bổ sung

Dưới đây là hai kiểu nữa được cho phép trong HTML 3.2 và có thể đang được chấp nhận trong web browser của bạn.

Các tag Định kiểu

HTML Kết quả

<u>This is Underline...</u> This is Underline <strike>This is Strike-through...</strike>This is Strike-through

Và cuối cùng, có một điểm tế nhị về màu sắc của văn bản mà một lúc nào đó bạn có thể thấy sự hữu ích. Trong bài 16, chúng ta đã học cách sử dụng tag <body> để tạo màu cho nền, văn bản, và các liên kết. Nếu chúng ta tô màu một khối văn bản với tag <font> , nó sẽ chỉ tác động lên phần thân văn bản, mà không tác động lên các liên kết siêu văn bản - có nghĩa là chúng vẫn được giữ màu xanh mặc định hoặc là màu được xác định trong tag <body>.

Màu Liên kết Mặc định

HTML Kết quả

<font color=red>

It was a long time after the sad death of <A HREF="http://www.longhorn.org/sir/"> Sir Longhorn</A>

that someone was able to recreate his formula.

It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.

Chúng ta có thể thay đổi màu của liên kết siêu văn bản bằng cách đặt các tag bên

trong một liên kết anchor. Lưu ý rằng điều này chỉ có hiệu quả cho các liên kết

chưa được xem; một khi bạn đã thấy trên màn hình trang tương ứng của liên kết, nó sẽ được tô bởi màu liên kết đã xem, tức là màu tím mặc định:

Màu Liên kết được Sửa đổi

<font color=red>

It was a long time after the sad death of <A HREF="http://www.longhorn.org/sir/"> <font color=#228800>Sir

Longhorn</font></A>

that someone was able to recreate his formula.

It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.

Thử tìm kinh nghiệm với các tag <font>...</font> trong trang web riêng của bạn. Cũng nên xem thử nó hoạt động như thế nào bên trong các tag

<hN>...</hN>. Tìm kinh nghiệm với việc sử dụng các phông khác nhau, ngay cả với các phông lung tung!

Tìm vài chỗ mà bạn nghĩ rằng bạn có thể cần superscript hay subscript. Một ví dụ có thể là các chú thích - bạn có thể đánh mã số hay ký tự cho chúng, sau đó làm cho mỗi chú thích thành một liên kết siêu văn bản đến một vùng chú thích (hay đến một trang riêng có các ghi chú chung):

• ... and after Linberger and Gordon's 1963 study12 on the effects of temperature on cheese maturation, Gange and Walters (1964)13 as well as Colby (1969)14 reached the same conclusion.

• blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah