Học Làm Web

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

Hết bài 2, bạn đã có thể làm một trang web đơn giản gồm có những dòng chữ và một hình ảnh được chèn vào. Bài này sẽ hướng dẫn bạn làm quen với khái niệm mà nhờ nó trang web được gọi là HTML (ngôn ngữ đánh dấu siêu văn bản).

Tìm hiểu qua cấu trúc một trang web bạn sẽ thấy có hai phần cơ bản: phần head và phần body

Trở lại trang web đầu tiên của chúng ta:

MÃ: CHỌN TẤT CẢ
<html>
<head>
<title>Trang web dau tay cua toi</title>
</head>
<body>
<p>Xin chao cac ban,<br>
Day la trang web dau tay cua toi, toi muon het to voi ca the gioi rang: TOI BIET LAM WEB
</p>
</body>
</html>

Phân tích kỹ đoạn trang web trên bạn sẽ thấy:

MÃ: CHỌN TẤT CẢ
<head>
<title>Trang web dau tay cua toi</title>
</head>

Phần này là phần head của trang web. Những gì trong phần này sẽ không xuất hiện khi ta xem trang web bằng trình duyệt web, tức những dòng chữ bạn đánh máy trong phần này không hiển thị trước mắt người viếng thăm trang web.

Vậy chức năng của phần head là gì?

Phần head chứa những thông tin về trang web, các thông tin này phụ thêm giúp trang web hiển thị tốt hơn hoặc giúp trang web khi đưa lên Internet được nhận diện bởi các cỗ máy tìm kiếm như Google, Yahoo!, Msn,…

Bạn dùng trình duyệt xem một trang web (nào đó trên mạng), sau đó vào menu View -> Source bạn sẽ thấy phần head thường có các dòng như:

MÃ: CHỌN TẤT CẢ
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
<title>Trang web danh cho nguoi choi tem</title>
</head>

Bạn sẽ thấy dòng bắt đầu bằng <title> quen thuộc. Nó chứa tiêu đề của trang web, nó sẽ hiển thị ở dòng đầu tiên, khu vực màu xanh trên đỉnh cửa sổ trình duyệt. Cú pháp đầy đủ là:

MÃ: CHỌN TẤT CẢ
<title>Tiêu đề của trang - do người thiết kế tự đặt</title>

Bạn có nhận xét rằng có <title> và </title> và những nơi khác cũng tương tự, những từ đặt trong cặp dấu < > này gọi là tag (thẻ). Đụng đến thiết kế web là đụng đến khái niệm tag (thẻ). Thẻ dạng <title> gọi là thẻ mở và thẻ đóng tương ứng của nó là </title>. Thẻ đóng luôn đứng sau thẻ mở và nó khác thẻ mở mỗi ký tự /. Thẻ mở là để cho thấy một đối tượng định dạng trên trang web bắt đầu, thẻ đóng kết thúc nó.

Một số cặp thẻ thông dụng mà bạn thường gặp:

MÃ: CHỌN TẤT CẢ
<html> </html>
<head> </head>
<script> </script>
<style> </style>
<title> </title>
<body> </body>
<p> </p>
<a> </a>
<b> </b>
<i> </i>
<u> </u>
<h1> </h1> ; <h2> </h2> ; <h3> </h3> ;...
<span> </span>
<div> </div>
<table> </table>

Nhưng bạn cũng thấy có những thẻ mà chỉ có mở, không thấy có thẻ đóng của nó. Vài thẻ như vậy:

MÃ: CHỌN TẤT CẢ
<meta>
<br>
<hr>
<img>

Ngay từ đầu, chúng ta cần điều chỉnh thẻ HTML cho hợp chuẩn, các thẻ chỉ có mở mà không có đóng thì tự nó cũng nên được đóng lại, cho nên các thẻ trên phải có một khoảng trắng kèm dấu / trước khi đóng >

MÃ: CHỌN TẤT CẢ
<meta />
<br />
<hr />
<img />
Các thẻ đã được chỉnh cho chuẩn

Các thẻ có thể viết hoa, viết in, hay viết thường đều được. Tuy vậy, bạn nên tập cách thiết kế đúng chuẩn ngay từ đầu để rèn luyện tính chuyên nghiệp và trang web sẽ dễ sửa chữa lỗi, dễ chào bán nếu bạn có ý định trở thành nhà thiết kế web để bán. Đúng chuẩn là các thẻ viết chữ thường tất cả.

Các thẻ về mặt lý thuyết là độc lập nhau. Tuy nhiên, không phải chúng ta muốn sử dụng sao tùy ý. Trong phần head thì trật tự các thẻ không quan trọng lắm, thẻ nào nằm trước, thẻ nào nằm sau hầu như không ảnh hưởng đến diện mạo trang web khi xem (xem bằng trình duyệt). Nhưng các thẻ trong phần body thì trật tự trước / sau sẽ ảnh hưởng đến bố cục trang web, cách hiển thị,…

Trở lại với phần head đang khảo sát, có 3 thẻ rất thông dụng khi sử dụng đó là: <meta>, <script>, <title> hầu như trang web nào cũng có dùng. Và với bài này, bạn chỉ cần biết thẻ <title> mà thôi. Công dụng của nó đã nói ở trên. Thẻ <title> luôn đứng sau thẻ <head> và thẻ đóng </title> luôn đứng trước</head>. Tức là thẻ <head> bao trùm thẻ <title> bên trong.

Các viết đúng phải là:

MÃ: CHỌN TẤT CẢ
<head>
<title>Tiêu đề của trang web</title>
</head>

Thẻ có thể nằm cùng dòng hoặc khác dòng đều được, và sự canh lề trồi sụt là để dễ nhìn chứ không bắt buộc. Bạn có thể viết đoạn trên lại như:

MÃ: CHỌN TẤT CẢ
<head><title>Tiêu đề của trang web</title></head>

Đoạn trên vẫn không có gì sai. Tuy nhiên, việc lồng thẻ lẫn lộn kiểu:

MÃ: CHỌN TẤT CẢ
<head>
<title>Tiêu đề trang web</head>
</title>

Kiểu lẫn lộn trên là SAI, khiến trình duyệt không biết làm thế nào, trang web sẽ nạp chậm, đổ vỡ. Bạn cần tránh để thẻ bị như vậy. Thẻ mở sau thì phải đóng trước, thẻ mở trước thì đóng sau mới ĐÚNG.

Lưu ý: thẻ <html> luôn khởi đầu trang web, và thẻ đóng của nó </html> luôn đứng cuối cùng, kết thúc trang web.

Xong phần head. Phần body chính là đoạn:

MÃ: CHỌN TẤT CẢ
<body>
<p>Xin chao cac ban,<br>
Day la trang web dau tay cua toi, toi muon het to voi ca the gioi rang: TOI BIET LAM WEB
</p>
</body>

Phần body chứa đến hơn 90% thẻ, và những thẻ trong phần này sẽ làm ảnh hưởng đến cách hiển thị của văn bản (chữ) và hình ra màn hình trình duyệt khi xem trang web.

Bây giờ bạn làm một file như sau và Save lại với tên “hoaTigon.html” rồi xem bằng trình duyệt. Và sau đó ta sẽ tiến hành phân tích nó để hiểu rõ thêm về các thẻ.

MÃ: CHỌN TẤT CẢ
<html>
<head>
<title>Hai sắc hoa Tigôn</title>
</head>
<body>
<div>
<h3>HAI SẮC HOA TIGÔN</h3>
<p>Tác giả: <b>T.T.K.H</b></p>
<p>
Một mùa thu trước mỗi hoàng hôn<br />
Nhặt cánh hoa rơi chẳng thấy buồn<br />
Nhuộm ánh nắng tà qua mái tóc<br />
Tôi chờ người đến với yêu đương.<br /><br />
Người ấy thường hay vuốt tóc tôi<br />
Thở dài trong lúc thấy tôi vui<br />
Bảo rằng: “Hoa dáng như tim vỡ<br />
Anh sợ tình ta cũng vỡ thôi”.<br /><br />
<img src="hoatigon.jpg"><br /><br />
Thuở ấy nào tôi đã hiểu gì<br />
Cánh hoa tan tác của sinh ly<br />
Cho nên cười đáp: “Màu hoa trắng<br />
Là chút lòng trong chẳng biến suy”.<br /><br />
Đâu biết lần đi một lỡ làng<br />
Dưới trời gian khổ chết yêu đương<br />
Người xa xăm quá, tôi buồn lắm<br />
Trong một ngày vui pháo nhuộm đường.<br /><br />
Từ đấy thu rồi thu lại thu<br />
Lòng tôi còn giá đến bao giờ<br />
Chồng tôi vẫn biết tôi thương nhớ<br />
Người ấy cho nên vẫn hững hờ.<br /><br />
Tôi vẫn đi bên cạnh cuộc đời<br />
Ái ân lạt lẽo của chồng tôi<br />
Mà từng thu chết, từng thu chết<br />
Vẫn giấu trong tim bóng một người.<br /><br />
Buồn quá hôm nay xem tiểu thuyết<br />
Thấy ai cũng ví cánh hoa xưa<br />
Nhưng hồng tựa trái tim tan vỡ<br />
Và đỏ như màu máu thắm phai.<br /><br />
Tôi nhớ lời người đã bảo tôi<br />
Một mùa thu trước rất xa xôi<br />
Đến nay tôi hiểu thì tôi đã<br />
Làm lỡ tình duyên cũ mất rồi.<br /><br />
Tôi sợ chiều thu phớt nắng mờ<br />
Chiều thu hoa đỏ rụng chiều thu<br />
Gió về lạnh lẽo chân mây vắng<br />
Người ấy ngang sông đứng ngóng đò.<br /><br />
Nếu biết rằng tôi đã lấy chồng<br />
Trời ơi! Người ấy có buồn không<br />
Có thầm nghĩ đến loài hoa vỡ<br />
Tựa trái tim phai, tựa máu hồng?
</p>
</div>
</body>
</head>
</html>

Sau khi lưu xong file, bạn lấy ảnh hoa tigôn bên dưới chèn vào. Bấm chuột phải lên hình và chọn Save Picture As để lưu lại, đặt tên file là hoatigon (thực ra nó mang tên hoatigon.jpg nhưng vì mặc định trên máy Windows ẩn phần mở rộng / đuôi file).

Hình ảnh
Hình dự phòng
Hoa tigôn. Bạn cần bấm chuột phải vào hình này và Save As nó lại với tên là hoatigon.jpg nhé.

Kết quả xem trang web như sau:

Hình ảnh
Hình dự phòng
Trang web kết quả

 

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