Học Làm Web

Tự Học thiết kế web – Bài 17

Hôm nay, chúng ta sẽ tiếp tục bài học sau một thời gian dài ngừng ngang nửa chừng. Đầu tiên, chúng ta sẽ ôn lại một chút về bài học cũ. Lần này, ta thử phân tích một trang web được người ta làm sẵn (còn gọi là web template) để liên hệ với các bài đã học.

Nào, bạn hãy vào trang web: http://www.free-css-templates.com/preview/Flower/ , xuất hiện như hình dưới:

free-css-templates.gif
free-css-templates.gif (110.53 KiB) Đã xem 2350 lần.

Khi download về, bạn đã có một file nén, hãy giải nén nó ra để được:
1 file mang tên index.html
1 file mang tên style.css
1 thư mục mang tên images chứa các file: bg.jpg, header.jpg, pic.jpg

Bạn dùng trình duyệt web mở file index.html lên (hoặc đơn giản là nhấp đúp vào nó) sẽ thấy một trang web hoàn chỉnh, đẹp mắt.

Bây giờ chúng ta sẽ “mổ xẻ” trang web này để liên hệ cụ thể với bài học. Nào, bạn hãy dùng Notepad++để mở file index.html ra nhé. Sẽ trông như sau:

vi-du-html.gif
vi-du-html.gif (39.9 KiB) Đã xem 2350 lần.

Ta sẽ phân tích từng phần của một trang HTML:

– Phần head: chứa các thông tin không xuất hiện lên màn hình trình duyệt khi ta xem một trang web nhưng có nhiệm vụ chứa các thông tin meta, nạp các script, style để trang web có thể hiển thị đúng ý đồ của người thiết kế. Đây là đoạn mã phần này (trong trang web không có số thứ tự, mình đánh số là để thuyết minh các dòng cho dễ theo dõi):

MÃ: CHỌN TẤT CẢ
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.   <head>
4.      <title>Flower</title>
5.      <meta http-equiv="Content-Language" content="English" />
6.      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7.      <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
8.   </head>

Dòng 1: thực chất đây không phải là phần Head của một trang web dạng HTML, mà đây là thông tinDOCTYPE cho phép trình duyệt nhận biết phiên bản HTML mà trang web ta sử dụng, có dòng này, các trình duyệt hiện đại sẽ hiển thị trang tốt hơn, tận dụng được các tính năng mới, ưu điểm của phiên bản (đời) HTML mới. Ta sẽ nghiên cứu về DOCTYPE kỹ hơn sau này.

Dòng 2: đây chẳng qua là thẻ <html> mà bạn từng học, nhưng lại có thêm phầnxmlns=”http://www.w3.org/1999/xhtml trỏ tham khảo đến tài liệu về dạng DOCTYPE của dòng 1.

Khi làm web trong thực tế, bạn cứ copy 2 dòng trên vào đầu trang web của bạn kể cả khi bạn chưa đọc hiểu gì về nó. Chúng ta sẽ có dịp hiểu kỹ hơn khi kỹ năng được nâng cao và có khả năng phân biệt được các DOCTYPE, phiên bản HTML.

Từ dòng 3 đến dòng 8: đây đích thực là phần HEAD của một trang HTML. Xin giải thích ngắn gọn từng dòng.

Dòng 3: thẻ <head> báo hiệu bắt đầu phần Head của một trang web (hay của một file HTML).
Dòng 4: tiêu đề của trang web, tiêu đề này chính là phần trên đỉnh cửa sổ trình duyệt khi bạn xem trang web.
Dòng 5: thẻ meta, báo cho trình duyệt duyệt (và các công cụ tìm kiếm, đánh chỉ mục trên Internet) nhận biết trang web này có nội dung chính là bằng tiếng Anh.
Dòng 6: thẻ meta, cho biết bảng mã ngôn ngữ sử dụng cho trang web là Unicode, cụ thể là Encoding theo UTF-8 (sau này sẽ giải thích kỹ hơn).
Dòng 7: nạp CSS (Cascading Style Sheet) là những định dạng (qui định kiểu dáng) cho các thẻ HTML trên trang web, href=”style.css” báo cho trình duyệt biết là nạp file style.css chứa các thiết lập kiểu dáng (màu sắc, định dạng chữ, ảnh nền, độ rộng các thẻ, canh chữ,…), và media=”screen” để trình duyệt web hiểu rằng các thiết lập CSS sẽ áp dụng cho màn hình khi người duyệt xem trang web. Nếu bạn muốn các thiết lập đó là cho máy in, hãy dùng media=”screen”
Dòng 8: kết thúc phần Head

Như vậy, bạn có thể copy nguyên xi 8 dòng trên vào một trang web của bạn để tiết kiệm thời gian ngồi đánh máy (cho đến lúc này giả sử rằng bạn chưa biết sử dụng các công cụ hỗ trợ thiết kế web có hỗ trợ sẵn các đoạn mã code HTML thường dùng mà chỉ dùng NotePad++ như các bài học bạn đang theo dõi đây. Lúc đó phần của bạn sẽ có chỉnh sửa đôi chút, trông như sau:

MÃ: CHỌN TẤT CẢ
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.   <head>
4.      <title>Trang web của tui, học theo Khoan Cắt Bê Tông</title>
5.      <meta http-equiv="Content-Language" content="Vietnamese" />
6.      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7.      <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
8.   </head>

——-

– Phần body: chính là bố cục toàn bộ trang web, ở đây có những đoạn mã cho phép thiết lập màu nền trang, bố trí trang theo dạng khung / cột, các menu để click chuột, và các form nhập liệu,… như chúng ta đã học ở trên.

MÃ: CHỌN TẤT CẢ
<body>

<div id="wrap">

<div id="header">
<h1><a href="#">Website Title</a></h1>
<h2>Subheader, website description H2</h2>
</div>

<div id="right">

<h2><a href="#">License and terms of use</a></h2>
<div>
Flower is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS templates</a> designed this template.
This template is allowed for all uses, including commercial use, as it is released under the <strong>Creative Commons Attributions 2.5</strong> license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!
<br /><br />
<img src="images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
<h2><a href="#">Title with a link - Example of heading 2</a></h2>
<div>
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed,
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae
congue nulla diam non urna.
</div>
</div>

<div id="left">

<h3>Categories :</h3>
<ul>
<li><a href="#">World Politics</a></li>
<li><a href="#">Europe Sport</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li>
<li><a href="#">Last Category</a></li>
</ul>

<h3>Archives</h3>
<ul>
<li><a href="#">January 2007</a></li>
<li><a href="#">February 2007</a></li>
<li><a href="#">March 2007</a></li>
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li>
<li><a href="#">June 2007</a></li>
<li><a href="#">July 2007</a></li>
<li><a href="#">August 2007</a></li>
<li><a href="#">September 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">December 2007</a></li>
</ul>

</div>
<div style="clear: both;"> </div>

<div id="footer">
Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>, Thanks to <a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html">Chapter 13 Bankruptcy</a>
</div>
</div>

</body>

Bạn sẽ cảm thấy bối rối khi thấy giải thích ở phần Head là ngôn ngữ sử dụng làm nội dung cho trang web là tiếng Anh, trong khi đó xem phần Body lại thấy có thứ tiếng khác lẫn lộn vào, đọc trông rất quái dị, thậm chí là nó không thuộc ngôn ngữ nào. Điều này là bình thường các bạn àh, không cần gì phải lo lắng, những trang web mẫu (web template), tác giả sáng tác nên nó không phải để sử dụng cho riêng một trang web cụ thể nào mà là để người khác tải miễn phí (hoặc mua) về sử dụng. Do đó, khi thiết kế không sử dụng một nội dung có thật nào, làm như vậy chỉ mất thời gian mà không có ích lợi gì, bởi người ta cần là khung sườn, bố cục trang web, nội dung sẽ tự viết. Khi sử dụng thứ tiếng lạ không thể đọc hiểu lại có ích, nó không làm người ta xao nhãng việc quan tâm đến bố cục, thiết kế, cách phối màu của trang web.

Bài học này, lần đầu tiên bạn học đến khái niệm Selector và class ID (thú thực là mình không biết dịch tiếng Việt hai khái niệm này), xin tạm giải thích bằng hiểu biết thô thiển của mình.

Qua thời gian phát triển, HTML được cải tiến qua các phiên bản khác nhau, người ta nhận ra rằng khi thiết kế trang web, thuộc tính của các thẻ HTML nên được tách riêng ra chứ không gán trực tiếp vào từng thẻ HTML cụ thể, điều này sẽ có những ích lợi lớn, bạn có thể xem ví dụ sau:

Ta xem xét đoạn văn:

Wikipedia tiếng Việt đã viết:Nguyễn Bỉnh Khiêm đã để lại cho hậu thế những tác phẩm văn thơ có giá trị như tập thơ Bạch Vân, gồm hàng trăm bài thơ chữ Hán (còn lưu lại) và hai tập Trình Quốc công Bạch vân thi tập và Trình Quốc công Nguyễn Bỉnh Khiêm thi tập, hay còn gọi là Bạch Vân quốc ngữ thi, (với hàng trăm bài thơ chữ Nôm) hiện còn lưu lại được một quyển của Bạch Vân thi tập gồm 100 bài và 23 bài thơ trong tập Bạch Vân Gia Huấn mang nhiều chất hiện thực và triết lý sâu xa, thể hiện đạo lý đối nhân xử thế lấy đức bao trùm lên tất cả, mục đích để răn dạy đời.

Nếu đoạn văn trên mà định dạng font và màu chữ theo kiểu cũ, trong đoạn mã HTML của bạn sẽ trông như sau:

MÃ: CHỌN TẤT CẢ
<p align="left"><font face="Arial" color="#4000FF">Nguyễn Bỉnh Khiêm đã để lại cho hậu thế những tác phẩm văn thơ có giá trị như tập thơ <font color=#FF0000"><b>Bạch Vân</b></font>, gồm hàng trăm bài thơ chữ Hán (còn lưu lại) và hai tập Trình Quốc công Bạch vân thi tập và Trình Quốc công Nguyễn Bỉnh Khiêm thi tập, hay còn gọi là Bạch Vân quốc ngữ thi, (với hàng trăm bài thơ chữ Nôm) hiện còn lưu lại được một quyển của Bạch Vân thi tập gồm 100 bài và 23 bài thơ trong tập <font color="#FF0000"><b>Bạch Vân Gia Huấn</b></font> mang nhiều chất hiện thực và triết lý sâu xa, thể hiện đạo lý đối nhân xử thế lấy đức bao trùm lên tất cả, mục đích để răn dạy đời.</font>
</p>

Nhìn vào đoạn mã trên, chúng ta thấy:

<p align=”left”>: thẻ <p> cho phép ta mở một đoạn văn, thuộc tính align=”left” của nó là cho ta biết đoạn văn này được canh chỉnh theo lề trái.

Với người Việt và các nước sử dụng ngôn ngữ Latin, việc định dạng align=”left” là không cần thiết, và mặc định một thẻ <p> khi không có thuộc tính align đi kèm sẽ canh lề trái.

Tuy nhiên, với những nước sử dụng tiếng Ả Rập, đoạn văn của họ thường phải canh lề phải, việc chỉnhalign=”left” là có dụng ý nào đó.

Với chúng ta align=”left” cũng có tác dụng trong trường hợp thẻ bên ngoài bao tùm thẻ <p> như <div> chẳng hạn, ta đang áp dụng align=”justify” (canh lề đều hai bên cho các đoạn văn bên trong) thì có một đoạn văn ta muốn canh lề trái ta buộc pháp áp dụng align=”left” cho thẻ <p>.

<font face=”Arial” color=”#4000FF”> : để chỉ ra rằng đoạn văn của chúng ta sẽ sử dụng font Arial (thuộc tính face=”Arial”) có màu xanh tím color=”#4000FF”

Cách định dạng trên hơi giống cách định dạng trong việc bạn đánh văn bản Word, bôi đoạn văn / cụm từ nào đó và chọn cho nó một loại font chữ, kiểu chữ, màu chữ,… cách này tốt, thực hiện nhanh chóng, dễ dàng, không đòi hỏi nhiều kiến thức về HTML, và chỉ nên khi website của bạn chỉ gồm có khoảng chục trang trở lại mà thôi.

Hiện nay, bạn theo bài học này, nghĩa là bạn đang trên con đường trở thành một nhà thiết kế web thực thụ (chuyên nghiệp), hay nó đúng hơn là tối thiểu phải trên mức nghiệp dư một chút. Do đó, chúng ta sẽ viết lại đoạn mã trên như sau:

MÃ: CHỌN TẤT CẢ
<p>Nguyễn Bỉnh Khiêm đã để lại cho hậu thế những tác phẩm văn thơ có giá trị như tập thơ <span>Bạch Vân</span>, gồm hàng trăm bài thơ chữ Hán (còn lưu lại) và hai tập Trình Quốc công Bạch vân thi tập và Trình Quốc công Nguyễn Bỉnh Khiêm thi tập, hay còn gọi là Bạch Vân quốc ngữ thi, (với hàng trăm bài thơ chữ Nôm) hiện còn lưu lại được một quyển của Bạch Vân thi tập gồm 100 bài và 23 bài thơ trong tập <span>Bạch Vân Gia Huấn</span> mang nhiều chất hiện thực và triết lý sâu xa, thể hiện đạo lý đối nhân xử thế lấy đức bao trùm lên tất cả, mục đích để răn dạy đời.
</p>

Bạn nhận xét thấy đoạn mã trên (*) có vẻ gọn ghẽ hơn, tường minh hơn. Cách này ngày nay nhiều người thiết kế và phát triển web sử dụng, nó đòi hỏi ít nhiều kiến thức về CSS (Cascading Style Sheet – tạm dịch: bảng kiểu xếp / phân tầng), dĩ nhiên, bài học này cũng cung cấp cho bạn chút ít về nó, chúng tôi sẽ nói theo cách của “bác Hai”, cách mà bạn dễ hiểu nhất, còn về lý thuyết cao siêu, xin bạn tìm mua sách về đọc.

Một hình minh họa để bạn hiểu thế nào là CSS.

minh-hoa-css.gif
minh-hoa-css.gif (26.7 KiB) Đã xem 2349 lần.

Như vậy, bạn có thể hiểu rằng đoạn mã (*) kể trên chính là “cục bột” trong hình minh họa. Tìm quanh quất, bạn không tìm thấy “cái khuôn bánh” nằm ở đâu cả. Đúng thế, bây giờ chúng ta mới đi làm khuôn đây:D , nào, chúng ta chế tạo khuôn nhé, cái khuôn này, oái oăm thay lại nằm ở phần Head của trang web. Như vậy, bạn sẽ thấy một trích đoạn phần Head cho một trang web chỉ với đoạn nói về Nguyễn Bỉnh Khiêm vừa kể như sau:

MÃ: CHỌN TẤT CẢ
<style type="text/css">
.thongdung { /* thongdung nghĩa là thông dụng */
text-align: left;
font-family: Arial, sans-serif;
}
.dodam { /* dodam nghĩa là đỏ đậm */
color: #4000FF;
font-weight: bold;
}
</style>

Và trang web hoàn chỉnh ấy như sau:

MÃ: CHỌN TẤT CẢ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Trang web về Trạng Trình - Nguyễn Bỉnh Khiêm</title>
<meta http-equiv="Content-Language" content="Vietnamese" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.thongdung { /* thongdung nghĩa là thông dụng */
text-align: left;
font-family: Arial, sans-serif;
color: #4000FF;
}
.dodam { /* dodam nghĩa là đỏ đậm */
color: #FF0000;
font-weight: bold;
}
</style>
</head>
<body>
<p>Nguyễn Bỉnh Khiêm đã để lại cho hậu thế những tác phẩm văn
thơ có giá trị như tập thơ <span>Bạch Vân</span>, gồm hàng trăm bài thơ
chữ Hán (còn lưu lại) và hai tập Trình Quốc công Bạch vân thi tập và Trình Quốc công
Nguyễn Bỉnh Khiêm thi tập, hay còn gọi là Bạch Vân quốc ngữ thi, (với hàng trăm bài thơ chữ Nôm)
hiện còn lưu lại được một quyển của Bạch Vân thi tập gồm 100 bài và 23 bài thơ trong
tập <span>Bạch Vân Gia Huấn</span> mang nhiều chất hiện thực và triết lý sâu xa,
thể hiện đạo lý đối nhân xử thế lấy đức bao trùm lên tất cả, mục đích để răn dạy đời.
</p>
</body>
</html>

Dĩ nhiên là các từ .thongdung, .dodam (nhớ là có dấu chấm (.) trước từ) bạn nhé), nằm trong khu vực thẻ <style></style>, chúng dùng để định nghĩa thuộc tính cho một đối tượng (thẻ) trong trang HTML của chúng ta.

Bạn không được dùng tiếng Việt có dấu cho các định nghĩa này, bạn nhé, các trình duyệt sẽ không hiểu tiếng Việt có dấu đâu.

Một thẻ <style> có cú pháp như sau:

MÃ: CHỌN TẤT CẢ
<style type="text/css">
/* các định nghĩa đặt ở khu vực này, người ta dùng dấu chém tới và dấu * dính liền để
chỉ ra rằng đó là mở đầu đoạn ghi chú, và dấu * kèm dấu chém tới để kết thúc đoạn ghi chú
bạn đang đọc đoạn ghi chú đây, nhưng ghi chú này trình duyệt bỏ qua khi đọc file HTML */
.dinhnghia {
/* các thuộc tính cụ thể đặt ở đây */
}
</style>

Kết quả của sử dụng định dạng dùng CSS cho ra y hệt như cách không dùng CSS. Nếu bạn chưa tin, hãy copy đoạn mã trên save lại thành một file .html và mở ra xem bằng trình duyệt sẽ thấy, y chang.

Bạn lại hỏi tiếp Vậy thì khái niệm Selector và class ID đề cập trên, biến đâu rồi?. Ồh, tôi bắt đầu phát sốt lên vì bạn học rất năng động, hay nêu thắc mắc, hy vọng điều này sẽ giúp bạn tiến mau. Bạn sẽ không phải đợi lâu đâu. Hẹn bạn ngay bài sau trong vài ngày tới.

Cách định dạng thứ hai (có áp dụng CSS) này, không phải lúc nào cũng ngắn gọn hơn mà nhiều lúc bạn sẽ thấy rằng làm cho trang web phình to hơn, mã dài hơn vì có khi chỉ cần làm chữ đậm, nghiêng hoặc thay đổi chút màu sắc lại khá rắc rối. Tuy nhiên, theo phân tích của các nhà thiết kế web chuyên nghiệp, lợi ích của CSS áp dụng vào những website gồm có hàng trăm / hàng ngàn trang web đơn lẻ là rất lớn, chỉ cần một vài thay đổi nhỏ là đã tác động thật lớn. Nếu dùng cách cũ, nhiệm vụ của người thiết kế là… bất khả thi.

Bạn cứ thử hình dung đi, khi bạn cho nước vào những cái khay nhựa được làm sẵn thành từng ô vuông và đặt vào ngăn làm đá của tủ lạnh, một ngày sau, bạn sẽ có những viên đá có hình dáng vuông vức tiện dụng. Nếu không thích những viên đá vuông, bạn lại để đá tan chảy ra thành nước và lại cho vào những khay khác là những ô tròn, một ngày sau bạn lại có những viên đá tròn.

Còn nếu bạn để nước vào trong túi / bịch nylon buộc lại và bỏ vào tủ lạnh, hình dáng của khối nước đá là không đồng nhất, khó xác định, và một khi bạn muốn cho nó vuông vức / tròn bạn lại phải mang ra ghè đẽo, thật là việc làm mất công vô ích.

Một ví dụ khác dễ hiểu hơn: nếu bạn là một công ty luật, bạn sẽ soạn sẵn nhiều mẫu hợp đồng khác nhau, và những chỗ để tên khách hàng, ngày tháng, bạn để trống, khi cần thì bạn bổ sung vào, bạn không điên gì điền sẵn tên ai đó và đợi người có đúng tên như vậy tới sử dụng dịch vụ của bạn. Việc một trang web định dạng chi tiết không dùng CSS và có dùng CSS khác tương tự như vậy. Có CSS, việc thanh đổi mang tính vĩ mô hơn, ảnh hưởng rộng hơn, cho ra hàng loạt.

Từ bài học này trở đi, chúng ta sẽ áp dụng cách sử dụng các thuộc tính của thẻ HTML theo kiểu mới, nghĩa là ta sẽ thường xuyên áp dụng Selector và class ID trong việc định dạng các trang web do ta thiết kế.

Bài sau bạn sẽ phân biệt thế nào là Selector, thế nào là class ID, khi nào nên dùng cái nào? Một số thuộc tính thông dụng dùng trong CSS.

Cám ơn superthin tác giả bài hướng dẫn

 

<< Quay Lại

%d bloggers like this: