Trang chủ
Trang trí cho Văn bản
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:
- Mở tập tin index.html trong trình soạn thảo của bạn.
- 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.
Thay đổi dòng:
<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). - 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:
<B><I><font size=+1>"Nature raves savagely, threatening the lands"</font></I></B><br> - 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 CheeseLonghorn 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... |
Màu của font
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:- Mở tập tin index.htm trong trình soạn thảo.
- Điều chỉnh dòng chứa chữ VOLCANO WEB thành như sau:
<B><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></B> - Lưu trữ và Reload trong Web browser.
- Mở tập tin intro.htm trong trình soạn thảo.
- 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:
Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N<sub>2</sub>), carbon dioxide (CO<sub>2</sub>), and ammonia (NH<sub>4</sub>). - 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:
Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km<sup>3</sup> in erupted volume) than ones observed by humans. - 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^3thànhVolume in km<sup>3</sup>
<font color=#993459>...</font>
<font color=lime>...</font>
<font color=#002200>...</font>
<font color=navy>...</font>
<font color=#193467>...</font>
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ả |
| <sup>...</sup> | superscript |
| <sub>...</sub> | subscript |
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 đó.
- Mở tập tin index.htm trong trình soạn thảo.
- Sửa đổi dòng chứa đoạn văn VOLCANO WEB thành:
<B><font face="Arial,Helvetica" size=+4 color=#FF66FF>V</font> <font face="Arial,Helvetica" size=+3 color=#DD0055>OLCANO WEB</font></B> - Lưu trữ và Reload trong Web browser .
- 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?
- Bạn có thể sử dụng dạng HTML nào nếu browser không hỗ trợ tag <font>...</font>?
- Làm thế nào bạn tạo được subscript trong HTML?
- 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?
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:
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: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>
|
|
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ực tập tự do
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
12.Linberger and Gordon's experiments were controversial because of their radical techniques of temperature control.
13.Gange and Walters actually did not reach the same conclusion until their results had been verified by J.D. Smith. For more information see, Cheese Abtracts 1964, pp.234-239
14.Colby never received appropriate recongition for his pioneering work in the cheese field, and died penniless.
Đến bài tiếp theo....
Các thước kẻ to? Thước kẻ lớn? Thước kẻ cầm tay? Thêm thông số cho <hr>
