Học Làm Web

Tự học thiết kế trang web – bài 4

Kết thúc bài 3, có lẽ bạn cũng chưa thấy có gì khác so với bài 2, ngoại trừ nội dung trang web bây giờ dài hơn đôi chút.

Ở bài 4 này, sẽ giới thiệu và giải thích một số công dụ về thẻ (tag) để bạn có thể tự sử dụng trong quá trình thiết kế.

1) Thẻ <title> : đặt tiêu đề cho trang web, tiêu đề này sẽ hiển thị khi xem trang, ở dòng trên cùng của cửa sổ trình duyệt.
Cú pháp đầy đủ: <title>Tiêu đề trang web ở đây</title>

Thẻ title này đặt sau thẻ <head>, tức đặt đúng phải là:

MÃ: CHỌN TẤT CẢ
<head>
<title>Đây là tiêu đề trang web của tui</title>
</head>

2) Thẻ <p> : tạo một đoạn văn bản
Cú pháp đầy đủ: <p>Đoạn văn bản của tôi ở đây. Đây là đoạn văn bản dùng với thẻ P</p>

Thẻ này có thêm một số thuộc tính giúp chúng ta canh chỉnh đoạn văn cho đẹp mắt.

Ví dụ:

MÃ: CHỌN TẤT CẢ
<p align="center">
Đây là đoạn văn được canh đoạn văn bản vào giữa trang web (trang màn hình)
</p>

Ví dụ trên là dùng thẻ <p> để canh giữa một đoạn văn bản vào giữa trang web hoặc đối tượng trang như dùng thẻ table, div. Thẻ này thường dùng cho các tiêu đề của bài thơ, Cộng hòa chủ nghĩa Việt Nam,….

MÃ: CHỌN TẤT CẢ
<p align="justify">
Đây là đoạn văn được canh giữa đều hai bên trang web (trang màn hình), nếu thẻ được nằm bên trong một thẻ khác thì nó sẽ canh giữa đoạn văn đều 2 bên với đối tượng ấy thay cho toàn trang web. Thẻ này chỉ có tác dụng khi đoạn văn của bạn đủ dài để đụng lề trang / phân vùng trên trang.
</p>

Ví dụ trên dùng thẻ <p> để canh đều hai bên đoạn văn bản.

Mặc định, hầu hết các trình duyệt tự động canh lề trái của một đoạn văn, vì thế bạn chỉ cần dùng:

<p>Đoạn văn</p> thay vì phải ghi đầy đủ là <p align=”left>Đoạn văn</p> để cho mã trang được ngắn gọn, dễ sửa về sau. Tuy nhiên, nếu bạn muốn canh phải đoạn văn thì bạn phải dùng <p align=”right”>Đoạn văn của tui được canh phải đây</p>

3) Thẻ <br> : Ngắt dòng cho văn bản của bạn.

Khi thiết kế web, việc bạn soạn nội dung và ấn phím Enter để xuống hàng sẽ không có ý nghĩa đối với trình duyệt web khi đọc trang web HTML của bạn. Trình duyệt sẽ loại bỏ dấu ngắt xuống dòng của phím Enter.

Ví dụ:

Khi bạn viết:

MÃ: CHỌN TẤT CẢ
Con cò mà đi ăn đêm
Đậu phải cành mềm lộn cổ xuống ao
Ông ơi ông vớt tôi nao....

trong quá trình bạn thiết kế web thì khi bạn xem với trình duyệt nó sẽ là:

MÃ: CHỌN TẤT CẢ
Con cò mà đi ăn đêmĐậu phải cành mềm lộn cổ xuống aoÔng ơi ông vớt tôi nao....

Quá kinh khủng khiếp có phải không. Vì thế, bạn phải ngắt dòng văn bản với thẻ <br>

Bạn phải viết:

MÃ: CHỌN TẤT CẢ
Con cò mà đi ăn đêm]<br>
Đậu phải cành mềm lộn cổ xuống ao]<br>
Ông ơi ông vớt tôi nao....]<br>

Thì lúc đó kết quả mới hiển thị thành 3 dòng riêng biệt. Thẻ <br> là thẻ không có thẻ đóng dạng </br>như các thẻ khác. Nhưng để viết trang web được chuẩn, bạn nên dùng <br /> thay vì viết <br> để hợp vớichuẩn mới hiện đnag được khuyên dùng của tổ chức W3C (chuyên phụ trách về các chuẩn để thiết kế web, HTML).

Viết lại mã của ta:

MÃ: CHỌN TẤT CẢ
Con cò mà đi ăn đêm]<br />
Đậu phải cành mềm lộn cổ xuống ao]<br />
Ông ơi ông vớt tôi nao....]<br />

Đoạn mã trên đã khá chuẩn rồi. Luôn nhớ là <br /> thì sau <br có một khoảng trắng rồi mới đến dấu /bạn nhé.

Giờ thì có lẽ bạn đã hiểu công dụng thẻ <br /> rồi nhỉ? Nếu chưa, bạn thử vào Word đánh một đoạn văn chừng 5 câu / 5 dòng dài và gõ giữ phím Shift + Enter đi sẽ rõ. Lúc đó thì đoạn văn của bạn tương đương thẻ <p> ta đã học ở trên, còn việc bấm Shift + Enter để ngắt dòng khi nó… chưa kịp dài sẽ tương đương thẻ <br /> mà ta vừa học.

4) Thẻ <span> : dùng để phân định một vùng văn bản để có thể áp dụng một định dạng riêng biệt như là một điểm xuyết đặc biệt của một đoạn văn / khối văn bản đã có định dạng trước đó.

Cú pháp đầy đủ: <span>Một khối hoặc một cụm, hoặc một từ trong văn bản đặt ở đây</span>

Ví dụ:

Khi bạn gõ một văn bản, đến một từ / cụm từ bạn mong muốn dùng MÀU MỰC ĐỎ để gây chú ý / nhấn mạnh. Ta xét ví dụ sau:

MÃ: CHỌN TẤT CẢ
<p>Đây là một đoạn văn hết sức bình thường, mặc định nó sẽ được trình duyệt canh lề trái, chữ viết sẽ mặc định khi được thiết lập ở thẻ body hay thẻ html hoặc thẻ bọc của thẻ p này. Tuy nhiên, mình sẽ dùng <span style="color:red">màu mực đỏ để nhấn mạnh</span> rằng từ nhấn mạnh là rất quan trọng.</p>

Kết quả của việc định dạng như trên bạn sẽ thấy:

Ví dụ trên đã viết:Đây là một đoạn văn hết sức bình thường, mặc định nó sẽ được trình duyệt canh lề trái, chữ viết sẽ mặc định khi được thiết lập ở thẻ body hay thẻ html hoặc thẻ bọc của thẻ p này. Tuy nhiên, mình sẽ dùng màu mực đỏ để nhấn mạnh rằng từ nhấn mạnh là rất quan trọng.

4) Thẻ <i>, <b>, <u> : dùng để định dạng một từ / một cụm từ / dòng biến chữ thành nghiêng, đậm, gạch chân.

Xem các ví dụ bạn sẽ rõ:

<i>Đây là chữ viết nghiêng</i>
Sẽ cho bạn kết quả: Đây là chữ viết nghiêng

<b>Đây là chữ viết đậm</b>
Sẽ cho bạn kết quả: Đây là chữ viết đậm

<u>Đây là chữ viết gạch chân</u>
Sẽ cho bạn kết quả: Đây là chữ viết gạch chân

Phối hợp các thẻ thử xem:

<i><b>Đây là chữ viết nghiêng và đậm</b></i>
Sẽ cho kết quả: Đây là chữ viết nghiêng và đậm

Có thể phối hợp các thẻ <i>, <b>, <u> theo cách nào cũng được, thẻ nào đứng trước, thẻ nào đứng sau không quan trọng. Tuy nhiên, phải thỏa mãn nguyên tắc: thẻ nào mở trước thì đóng sau, và mở sau thì đóng trước gần giống như nguyên tắc mở ngoặc, đóng ngoặc trong toán học vậy.

Tức là bạn viết <i><b><u>Dòng này vừa nghiêng vừa đậm, vừa có gạch chân</u></b></i> là đúng. Còn mọi cách khác như: <i><b><u>Dòng này vừa nghiêng vừa đậm, vừa có gạch chân</i></b></u> là sai vì đóng mở lẫn lộn, dù cho kết quả có thể hiển thị đúng, bạn cần tránh cách viết cẩu thả như vậy.

 

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: