Trang chủ
Xét thêm về Sự Chỉnh lề
Tại sao bạn chỉ ở bên trái?
... khi nào bạn qua bên phải?
hay là để vào giữa?
Mục đích
Sau bài học này bạn có thể:- Tạo văn bản được canh vào giữa trang.
- Sắp xếp chung hình ảnh và văn bản.
- Tạo văn bản được chỉnh lề bên phải.
Bài học
Chú ý: 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 bây giờ. Bạn cũng có thể xem qua trang kiểm tra để biết web browser của bạn có hổ trợ những tag được sử dụng trong bài này hay không.Sự chỉnh lề văn bản
Khi mà Web ngày càng phát triển, ngày càng xuất hiện thêm các yêu cầu cho việc điều khiển cách trình bày của trang. Một trong những ý muốn đó là định dạng văn bản sao cho nó được sắp xếp ngay giữa trang, hơn là chỉ được canh lề bên trái.Đây là một trong những đặc tính khác hẳn giữa NetScape so với HTML "tiêu chuẩn". NetScape đã giới thiệu tag mở rộng <center>...</center> - tag này sắp xếp mọi thứ bên trong nó ở ngay giữa trang web. Dường như nó gây ra ấn tượng hơn? Vậy thì, bạn hãy nói với một nhà làm chuẩn rằng sự chỉnh lề hàng là một đặc tính. Dạng HTML tổng quát cho sự sắp xếp vào giữa là một sự biến đổi của tag <p>:
<p>
blah blah blah
<img src="file.gif"><br>
blah blah
</p>
Lưu ý rằng ở đây có tag đóng </p>. Mỗi lần bạn muốn canh giữa
một vài đoạn văn bản, bạn đánh dấu chúng bằng
<p align=center>...</p>Hiện nay, hầu hết các loại browser và chuẩn HTML 3.2 đều hổ trợ tag <center>...</center> của NetScape. Nhớ rằng nếu browser không hổ trợ một tag, nó chỉ việc bỏ qua.
Để thấy được hiệu quả của việc canh giữa, hãy so sánh trong ví dụ dưới đây:
| Không canh Giữa | |
|---|---|
Cheese In HistoryCheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack. |
|
| Được canh Giữa | |
Cheese In HistoryCheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack. return to the cheese home page |
|
- Mở tập tin index.htm trong trình soạn thảo.
- Tìm phần sau:
<B>In this Lesson...</B> <ul> <i> <li><A HREF="intro.htm">Introduction</A> <li><A HREF="term.htm">Volcano Terminology</A> <li><A HREF="usa.htm">Volcanic Places in the USA</A> <li><A HREF="mars.htm">Volcanic Places on Mars</A> <li><A HREF="proj.htm">Research Project</A> </i> </ul>và thay thế nó bằng đoạn HTML sau:<p align=center> <font size=+1> <i> <A HREF="intro.htm">Introduction</A><br> <A HREF="term.htm">Volcano Terminology</A><br> <A HREF="usa.htm">Volcanic Places in the USA</A><br> <A HREF="mars.htm">Volcanic Places on Mars</A><br> <A HREF="proj.htm">Research Project</A><br> </i> </font> </p> - Lưu trữ và Nạp lại trong Web browser của bạn.
Chú ý: Hãy nhìn một cách cẩn thận những thay đổi mà chúng ta đã thực hiện. Toàn bộ phần này được bao quanh trong tag <p align=center>..</p> của sự chỉnh lề. Danh sách không có thứ tự mà chúng ta đã xây dựng trong bài 6 được canh vào giữa một cách lổ chổ - các dấu bullet sẽ bị lộn xộn. Vì thế chúng ta sẽ bỏ đi cấu trúc <ul> <li> ... <li> ... </ul>. Các tag <br> ở cuối mỗi dòng sẽ tạo một ngắt dòng. Và cuối cùng, chúng ta thêm một tag <font>...</font> để tăng cỡ văn bản. Nếu muốn bạn có thể sử dụng tag <center>...</center> thay cho tag <p align=center>...</p>Bạn có thể muốn so sánh tập tin HTML của bạn đối với ví dụ mẫu để biết được nó nên xuất hiện như thế nào.
Mọi tag tiêu đề (header) <hN>...</hN> đều có thể canh giữa bằng cách thêm một thuộc tính như sau:
<hN align=center>blah blah blah</hN>
Bây giờ chúng ta sẽ sử dụng thuộc tính này để canh giữa tựa đề của mỗi trang Web:
- Mở tất cả file HTML của bạn trong trình soạn thảo.
- Với mỗi một trang, sửa chữa lại văn bản xuất hiện ở gần đỉnh trong tag
<h1> hay tag <h2> theo như ví dụ dưới đây cho tập tin
intro.htm, thay đổi từ:
<h2>Introduction</h2>thành<h2 align=center>Introduction</h2> - Lưu trữ và Reload trong Web browser của bạn.
Chú ý: Cũng có một thuộc tính chỉnh lề cho tag <hr> phù hợp với các thông số khác mà chúng ta đã xem trong bài 19 "Easy Hard Rules". Khi bạn chỉ định một chiều rộng ngắn hơn cho một hard rule, bạn cũng có thể chỉ định canh lề cho nó về bên phải hay bên trái (theo mặc định các hard rule được canh vào giữa trang):
<hr size=8 width=60% align=right>sẽ tạo ra:
trong khi sử dụng canh lề trái
<hr size=8 width=60% align=left>sẽ cho kết quả là:
Sự sắp xếp giữa Hình ảnh và Văn bản
Trong bài 7a chúng ta đã xét cách đặt hình ảnh vào trong trang Web của chúng ta và đã thấy rằng có thể có một dòng văn bản được sắp xếp ở trên hoặc cuối một hình ảnh. Tuy nhiên, cho đến tận bây giờ, chúng ta chưa thể có một khối văn bản và một hình ảnh inline nằm cạnh nhau. Với việc thêm thuộc tính align vào tag <img> giờ đây bạn có thể có chỉ định hình ảnh tự sắp về bên trái hay bên phải của trang. Nhưng hơn thế nữa chúng ta có thể có các văn bản HTML khác "lấp đầy" những khoảng trống quanh hình. HTML để thực hiện điều này là: <img src="filename.gif" align=right>
<img src="filename.gif" align=left>
Hãy so sánh hai ví dụ sau đây:
| không có thuộc tính align align=bottom |
|
|---|---|
| có văn bản đi theo align=left |
|
Cheese In HistoryCheese was been there for many major eventsWhen Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack. |
|
Thêm một điều lưu ý nữa. Có khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh. Có một thuộc tính cho tag <br> để xoá đi sự sắp xếp, ví dụ như:
<br clear=left>
<br clear=right>
<br clear=all>
sẽ "xóa" bất kỳ sự sắp xếp nào đã được cài đặt trong tag <img>
trước đó.
Chúng tôi đề nghị bạn luôn luôn sử dụng những tag này bởi vì sự sắp xếp sẽ phụ thuộc
rất nhiều vào phông chữ trên browser của người đọc và độ rộng cửa sổ browser của họ.Bây giờ chúng ta sẽ trở lại trang index.htm để định dạng lại phần mở đầu. Hình trông có vẻ đẹp, nhưng nó lại chiếm quá nhiều hàng trước khi các văn bản được trình bày. Chúng ta sẽ sử dụng sự sắp xếp hình ảnh/văn bản để đặt văn bản kế cận bên hình ảnh.
- Mở tập tin index.htm trong trình soạn thảo.
- Tìm phần sau:
<img alt="A Lesson on:" src="../pictures/lava.gif"> <p> <B><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></B> <BLOCKQUOTE> <B><I><font size=+1>"Nature raves savagely, threatening the lands"</font></I></B><br> -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. </BLOCKQUOTE> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results.và thay nó bằng:<img alt="A Lesson on:" src="../pictures/lava.gif" align=left> <B><I><font size=+1> "Nature raves savagely, threatening the lands" </font></I></B><br> -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <p> <B><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></B> <p> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. <br clear=left> - Lưu trữ và Nạp lại trong Web browser của bạn.
Chú ý: Mọi thứ ở giữa tag <img... align=left> và tag <br clear=left> sẽ được sắp chung với hình ảnh - hình ở bên trái và phần HTML trong các vị trí trống còn lại. Chúng ta cũng để câu trích dẫn lên đầu để gây sự chú ý. Với dạng trình bày này, tag <blockquote> không còn có hiệu quả nữa, do vậy nó được xóa bỏ.Nếu muốn, bạn có thể so sánh tập tin HTML của bạn với ví dụ mẫu để biết tại đây nên trình bày như thế nào.
Chỉnh lề (Justification)/Sắp xếp (Alignment) văn bản
Chúng ta sẽ thêm một tag sắp xếp nữa là tag "divisions" <div>...</div>, được giới thiệu trong HTML 3.0. Tất cả văn bản bên trong tag này được chỉnh lề dựa vào thuộc tính align: <div align=left>...</div>
<div align=right>...</div>
<div align=center>...</div>
Lưu ý rằng thuộc tính center có hiệu quả giống như tag
<center>...</center> của NetScape.
Bây giờ chúng ta sẽ sử dụng tag này để làm cho đoạn văn bản trong phần
ghi chú mở đầu của trang bìa được chỉnh lề ở bên phải của trang:
- Mở tập tin index.htm trong trình soạn thảo.
- Thêm tag <div> and </div> như dưới đây:
<div align=right> <B><I><font size=+1> "Nature raves savagely, threatening the lands" </font></I></B><br> -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <p> <B><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></B> </div> - Lưu trữ và Reload trong Web browser của bạn.
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 để xem nó nên xuất hiện như thế nào. 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 không hoạt động đúng, kiểm tra lại văn bản bạn đánh vào trong trình soạn thảo.Xem lại
Xem lại những chủ đề sau :- Làm thế nào để cho một phần nào đó trong trang web của bạn được canh vào giữa?
- Cách nào đúng nhất để làm cho một hình ảnh được sắp xếp bên lề phải của trang Web?
- Làm cách nào bạn tạo ra một văn bản được chỉnh lề phải?
Đến phần tiếp theo....
| Hãy tạo ra | một bảng đẹp... |
