Học Làm Web

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

Ở bài 4, các bạn đã học qua một số thẻ thông dụng, thường dùng trong thiết kế web. Bài này chúng ta sẽ ôn lại một chút để ghi nhớ và học thêm một số thẻ thường dùng nữa.

Thẻ <p>đoạn văn</p>: dùng để khởi đầu và kết thúc một đoạn văn
<p align=”left”>Đoạn văn này được canh lề trái</p>
<p align=”right”>Đoạn văn này được canh lề phải</p>
<p align=”center”>Đoạn văn này được canh giữa</p>
<p align=”justify”>Đoạn văn này được canh đều 2 bên</p>

Thẻ <br />: dùng để ngắt dòng trong một đoạn văn
Câu này được ngắt xuống dòng<br />

Thẻ h: dùng để hiển thị các dòng chữ dạng tiêu đề có cấp bậc to nhỏ khác nhau, người ta không dùng hmà có từ h1 đến h7 như sau[/b]

<h1>Đây là đoạn văn được sử dụng với thẻ h1</h1>
Kết quả là: Đây là đoạn văn được sử dụng với thẻ h1

<h3>Đây là đoạn văn được sử dụng với thẻ h3</h3>
Kết quả là: Đây là đoạn văn được sử dụng với thẻ h3

Thẻ <span></span>: dùng để phân định một đoạn từ / chữ cần có thuộc tính khác
Đây là dòng chữ bình thường nhưng đến khu vực này nó biến thành <span style=”color:blue”>màu xanh</span> và trở lại bình thường ngay.
Kết quả sẽ là:
Đây là dòng chữ bình thường nhưng đến khu vực này nó biến thành màu xanh và trở lại bình thường ngay.

Còn hàng tá những thẻ khác nhưng chúng ta mới làm quen với thiết kế web, với ngôn ngữ HTML nên chỉ học những thẻ cơ bản nhất. Nếu bạn muốn tham khảo thêm xin vào trang web:http://www.w3schools.com/html/html_quick.asp có đầy đủ các thẻ với những ví dụ trực quan, các bạn cũng nên tìm hiểu các thuộc tính đi kèm với thẻ để sử dụng thẻ được tốt nhất.

Bây giờ chúng ta học một thẻ rất quan trọng làm cho trang web được người ta gọi là HTML hay ngôn ngữ đánh dấu siêu văn bản. Thẻ <a>

Hẳn bạn đã từng thấy vào hầu hết trang web chúng ta có một đường màu xanh xanh hoặc màu khác như nó có gạch chân hoặc khi đưa trỏ chuột vào thì biết thành hình bàn tay, khi ta click chuột vào ấy, nó dẫn ta đến một trang web khác? Đó chính là liên kết, người ta dùng thẻ <a> để tạo liên kết này.

Ví dụ bạn thấy ở góc trái trang web Khoan Cắt Bê Tông chúng ta có liên kết là Trang chủ, khi click chuột vào đó, nó sẽ đưa bạn về trang chủ của diễn đàn. Trong thiết kế web với HTML bạn sẽ làm tương tự như sau:

<a href=”http://www.khoancatbetong.com/forum/index.php”>Trang chủ</a>

Như vậy, cú pháp đầy đủ của một thẻ <a> là:
<a href=”đặt địa chỉ trang web cần link đến ở đây”>Ghi chú, chú thích hoặc bất kỳ dòng chữ nào của bạn ở đây</a>

<a href=”http://www.tuoitre.com.vn&#8221; target=”_blank”>Báo Tuổi Trẻ Online</a> : liên kết đến trang web của báo Tuổi Trẻ, nhưng nhờ thuộc tính target=”_blank” làm cho liên kết của ta khi bấm vào nó sẽ mở ra ở một cửa sổ trình duyệt mới mà không nạp đè vào cửa sổ trang web ta đang thiết kế, đang xem với trình duyệt.

Ở trên là thẻ <a> liên kết từ trang bạn thiết kế đến một trang khác. Bạn sẽ đặt câu hỏi, liệu ta có thể liên kết đến cùng trang khi trang quá dài? Ồ, một câu hỏi rất khá, và chắc chắn rằng bạn sẽ làm được trong nháy mắt.

Bạn phải đặt trước một anchor (điểm neo) ngay trên trang thiết kế của bạn để định vị nó, nằm từ nơi khác bạn dùng thẻ <a> trỏ đến nó.

Để tạo điểm neo bạn dùng <a name=”tendiemneu”></a>
tendiemneo: do bạn tự đặt, gì cũng được, không chứa khoảng trắng và là tiếng Việt không dấu.

Bạn có thể xem ví dụ này là rõ nhất: http://www.khoancatbetong.com/forum/faq.php , hãy thử bấm vào một liên kết xem, nó sẽ không đưa bạn đi sang trang nào khác mà cuộn lên nhằm đúng vào chỗ khi thiết kế ta đã đặt điểm neo bên dưới.

Ví dụ: khi bạn vào trang http://www.khoancatbetong.com/forum/faq.php và nhấp chuột vào liên kết Tại sao tôi không thể đăng nhập được? bạn sẽ thấy gì? Nó sẽ cuộn trang lên, nhằm ngay đúng mục giải thích cho bạn xem. Bạn cũng quan sát địa chỉ trang web trên thanh địa chỉ của trình duyệt, nó không biến thành địa chỉ nào khác mà chỉ thêm #f00 vào ngay sau địa chỉ hiện tại, tức thành rahttp://www.khoancatbetong.com/forum/faq.php#f00

Để trỏ một liên kết đến một điểm neo đã tạo, bạn làm như sau:

MÃ: CHỌN TẤT CẢ
<a href="tendiemneo">Đây là điểm neo của tui</a>

Các điểm neo bạn có thể đặt vị trí bất kỳ trên trang, liên kết trỏ đến điểm neo được đặt trước hay đặt sau điểm neo cũng không gây lỗi, vì thế điểm neo bạn đặt ở đầu trang, cuối trang của bạn cũng có thể trỏ liên kết đến nó.

Ta cũng có thể liên kết đến trang khác, và nhảy đến ngay điểm neo của nó mà không phải để người ta tự kéo thanh trượt tìm. Ví dụ như sau:

Bạn sẽ có đoạn sau trong trang web do bạn thiết kế:

<a href=”http://www.khoancatbetong.com/forum/faq.php#f08″>Bấm vào liên kết này bạn sẽ nhảy ngay vào mục Tại sao tôi không thể đăng ký thành viên ở trang web trợ giúp của Khoan Cắt Bê Tông</a>

Kết quả đây, bạn thử click chuột xem sao? Bấm vào liên kết này bạn sẽ nhảy ngay vào mục tại sao tôi không thể đăng ký thành viên ở trang web trợ giúp của Khoan Cắt Bê Tông

Hãy chép nguyên đoạn mã sau đây và save lại với tên thuchanhlienket.html rồi dùng trình duyệt mở file này ra xem, bạn sẽ hiểu rõ liên kết là như thế nào.

MÃ: CHỌN TẤT CẢ
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vi du tao lien ket cho trang web</title>
<head>
<body>
<h1>Đây là ví dụ thẻ h1</h1>
<p>Sau đây bạn sẽ thấy thẻ <b>a</b> hoạt động như thế nào?</p>
Bấm vào <a href="http://www.tuoitre.com.vn">Báo Tuổi Trẻ</a> bạn sẽ vào trang chính của báo điện tử Tuổi Trẻ ngay<br /><br /> 

Và khi <a href="http://www.tuoitre.com.vn" target="_blank">bấm vào đây</a> bạn sẽ xem được Báo Tuổi Trẻ trong một cửa sổ mới của trình duyệt.<br /><br />

Bạn cũng nên lưu ý rằng khi bạn enter hàng chục lần, hay hàng trăm lần trong trang HTML thì nó không có tác dụng ngắt dòng khi bạn xem trang với trình duyệt của bạn, hãy sử dụng thẻ <b>br</b> để làm điều này nhé.<br /><br />

Một điều cũng đáng lưu ý: khi bạn gõ dấu khoảng cách hàng chục hay hàng trăm lần để thụt dòng hay thụt câu trong trang HTML, khi xem với trình duyệt nó cũng chỉ thụt dòng vào đúng có một khoảng trắng mà thôi, các khoảng trắng khác bị loại bỏ cả<br /><br />

</body>
</html>

Khi thiết kế, bạn gõ nhiều phím Space Bar để tạo các khoảng cách nhằm mục đích canh chỉnh cho đẹp các chữ hiển thị thì không có tác dụng, từ hai (02) khoảng cách cho đến hàng chục hay hàng trăm khoảng cách (mỗi khoảng cách tương ứng với một lần bạn bấm phím dài space bar hoặc phím tab) đều bị loại bỏ hết, khi xem trang với trình duyệt, nó chỉ giữ lại với 1 khoảng cách duy nhất mà thôi.

Vậy, để tạo khoảng cách trong HTML của ta, ta làm thế nào?

Bạn sẽ sử dụng cụm &nbsp; (còn gọi là dấu khoảng trắng mềm) để thay thế gõ phím dài space bar nhé.

MÃ: CHỌN TẤT CẢ
Ví dụ:
[b]Họ và tên: Nguyễn Văn Bình &nbsp;&nbsp;&nbsp; Ngày sinh: 20/10/1965[/b] 

Thì nó sẽ cho bạn kết quả:

[b]Họ và tên: Nguyễn Văn Bình     Ngày sinh: 20/10/1965[/b]

Chứ nếu sau từ Bình, bạn gõ hàng loạt phím Space thì nó chỉ có thể ra:

[b]Họ và tên: Nguyễn Văn Bình Ngày sinh: 20/10/1965[/b]

<< 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: