khoancatbetong.com

Tag: thiết kế wed, học html, xhtml, tạo trang web, khởi đầu, chỉ dẫn chi tiết, minh họa rõ ràng

Dạo nhiều vòng trên mạng Khoan Cắt Bê Tông thấy rằng nhiều người sau một thời gian sử dụng máy tính, lên mạng thì có mong muốn tự thiết kế cho riêng mình một trang web để "ghi dấu ấn" của mình lên mạng Internet.

Khoan Cắt Bê Tông đã viết:Tài liệu tham khảo / đọc thêm
Chúng tôi có sử dụng những tài liệu tham khảo sau để viết nên chủ đề này. Các bạn theo dõi chủ đề nên download về sử dụng.

Simple CSS Standard Edition (đã dịch sang tiếng Việt, file dạng PDF, kích cỡ 600KB) (Link dự phòng: http://www.box.net/shared/6j2irskgk4 )

iHTML - Hướng dẫn thiết kế Web (trang web)

Hướng dẫn xây dựng website (tiếng Việt, file dạng PDF, kích cỡ 623KB)

Những năm gần đây, phong trào các mạng xã hội ảo, blog,... đã tạo thuận lợi nhiều để tự cá nhân có một ngôi nhà của mình trên mạng Internet mà không cần phải biết chút gì về việc thiết kế đồ họa, kiến thức về trang web. Tuy nhiên, tự tay làm một trang web đưa lên mạng hẳn sẽ khiến bạn hào hứng và thích thú hơn.

Mình sẽ hướng dẫn các bạn từng bước một, có hình ảnh minh họa theo cách đơn giản nhất, dễ hiểu, cách mà mình từng thực hiện các đây vài năm để các bạn có thể sớm có một trang web "Made in bởi tui". Nào ta bắt đầu.

Chúng ta sẽ không bàn đến lý thuyết nhiều về giao thức mạng, trình duyệt,... sẽ làm cho vấn đề trở nên rối rắm và không cần thiết. Cứ làm được một trang web nho nhỏ rồi sẽ tự đọc tìm hiểu thêm để hiểu các vấn đề xung quanh.

Các bạn bật máy tính lên. Bấm phím kết hợp: phím có hình (xem hình 1 bên dưới) kết hợp với R

Hình ảnh

(hình 1)
Hình 1: Phím này bấm đè, và bấm phím R (như kiểu bạn bấm Ctrl + C hoặc Shift + phím bất kỳ vậy)
sẽ bung ra cửa sổ như sau:

Hình ảnh

(hình 2)
Hình 2
gõ vào từ notepad và enter để gọi chương trình giúp ta thiết kế trang web đầu tay.

Nó sẽ hiển thị cửa sổ soạn thảo notepad, trông như Hình 3

Hình ảnh

Hình 3

Giờ thì bạn gõ vào đúng như những dòng chữ sau:

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>

Bạn cần gõ tiếng Việt không dấu như trên cái đã. Vì nếu gõ có dấu lại dính dáng đến vấn đề font chữ, kiểu chữ, bảng mã,... thêm phức tạp vấn đề. Cứ theo như những gì mình làm và làm theo, sau này khi bạn đã thành thạo các điều căn bản, mình sẽ mở rộng thêm - không nên lo lắng.

Kết quả khi bạn gõ xong đoạn trên như hình 4

Hình ảnh

Hình 4

Bây giờ bạn phải lưu trang web lại thì mới có thể xem nó ra làm sao được. Hãy vào menu File và chọn mục Save hoặc bấm phím Ctrl + S (xem hình 5) lúc này bạn đang ở cửa sổ soạn thảo Notepad nhé, không phải ở cửa sổ của trang web này đâu

Hình 5

Nó sẽ bung cửa sổ cho bạn Lưu (Save) tập tin (file) vừa soạn. Hãy đặt tên tập tin là "trangWeb.html" (có cả dấu ngoặc kép mở và đóng nhé) - Hình 6

Hình ảnh

Hình 6

Xong. Như vậy là bạn đã có một trang web đầu tay rồi đấy.

Bạn sẽ hỏi "Đâu nào? Tôi có thấy gì đâu mà bảo là trang web đầu tay?" Câu trả lời là: Có rồi. Bây giờ chỉ việc xem nó mà thôi.

Ta mở trình duyệt web ra để có thể xem được nó. Hãy nhấp kép vào Hình ảnh

ở màn hình Desktop hoặc chính cái bạn dùng xem trang web này, bạn bấm Ctrl + N để mở cửa sổ mới. Từ đó bạn vào menu File của trình duyệt web (web browser) để mở trang web bạn vừa "thiết kế" lúc nãy. Menu File -> Open -> tìm đến thư mục My Documents, mở file trangWeb.html của bạn xem 2 hình sau:

Hình ảnh

Bấm nút Browse để tìm đến file trangWeb.html trong thư mục My Documents và chọn nó để xem (Hình 7)

Hình ảnh

Hình 7

Bạn thấy trang web thế nào? Nó có giống Hình 8 sau?

Hình ảnh

Hình 8

Nếu giống: Bạn ĐÃ THÀNH CÔNG bước đầu. Xin chúc mừng bạn.

Nếu chưa giống: bạn cần kiểm tra và thực hiện lại từng bước đúng theo chỉ dẫn trên. Nếu vẫn không ra, gửi bài lên đây và cho địa chỉ email, nick chat của bạn để chúng tôi trợ giúp thêm.

Ta tạm dừng bài học 1 tại đây.

Ở bài trước (bài 1) bạn đã học được cách thiết kế một trang web cơ bản, hết sức cơ bản. Và bạn cần ôn lại một chút, hình hài nó như sau:

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>

Hết cái đoạn chữ màu xanh lá cây bên trên chính là trang web của bạn.

Bài này, ta sẽ làm cho trang web hơi chuyên nghiệp hơn một chút bằng cách có nhiều kiểu chữ to nhỏ khác nhau, chữ có màu, có thêm hình ảnh cho trang web,... nào, bắt đầu ngay.

Bây giờ mở lại file trangWeb.html của bạn. Bạn cần mở Notepad ra như đã học ở bài 1, khi vào menu Open để mở file thì nó sẽ hiện lên một cửa sổ, cần chú ý là ở mục Files of type: nó đang là Text Documents (*.txt), bạn phải chọn ở đó, chuyển thành All Files thì mới thấy xuất hiện trangWeb.html của ta ( hình 1)

Hình ảnh

Hình 1

Đoạn xanh ở trên bây giờ bạn gõ lại như sau:

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> <span style="color:blue"><h3>QUÊ HƯƠNG</h3></span> <p>Quê hương là chùm khế ngọt<br> Cho con trèo hái mỗi ngày<br> Quê hương là đường đi học<br> Con về rợp bướm vàng bay </p> <p>Quê hương là con diều biếc<br> Tuổi thơ con thả trên đồng... </p> <div><img src="chumkhengot.jpg" alt="Chùm khế ngọt"></div> </body> </html>

Các bạn nên gõ đoạn trên không dấu, nếu chưa biết cách gõ tiếng Việt có dấu

Sau khi đánh máy để sửa xong đoạn như trên rồi, bạn bấm Ctrl + S để lưu lại file vừa soạn. Rồi quay lại trang web này, bấm chuột phải vào hình chùm khế dưới đây:

Hình ảnh

Hình Chùm khế

Và một menu Pop-Up bung lên, bạn chọn mục Save Picture As để lưu lại ảnh. Mặc định nó sẽ lưu vào My Pictures ở bên trong My Documents, bạn cần chọn lại để nó lưu ra ngoài My Documents, nơi mà ta chứa file trangWeb.html của ta. Khi lưu, nhớ đặt lại tên, bạn gõ chumkhengot thay cho tên ngoằn ngoèo tối nghĩa sẵn có của nó.

Giờ thì bạn lại mở trình duyệt lên, vào mở trang web của bạn ra xem. Kết quả nó như thế nào nhỉ? Phải giống như sau:

Hình ảnh

Như vậy là trang web bạn trông đã hấp dẫn hơn một chút rồi đó: nào là chữ QUÊ HƯƠNG đã là màu xanh, có một hình minh họa cho bài thơ.

Chúng ta tạm ngừng bài 2 ở đây.

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

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

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

Trang web kết quả

Ta tạm dừng bài học tại đây.

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.

Xin tạm dừng ở đây. Hẹn gặp lại ở 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 h mà 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" 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 ra http://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ừ khai khoảng cách cho đến hàng chục hay hàng trăm khoảng cách đề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   để thay thế gõ phím dài space bar nhé.

Mã: Chọn tất cả: Ví dụ: Họ và tên: Nguyễn Văn Bình     Ngày sinh: 20/10/1965 Thì nó sẽ cho bạn kết quả: Họ và tên: Nguyễn Văn Bình Ngày sinh: 20/10/1965 Chứ nếu sau từ Bình, bạn gõ hàng loạt phím Space thì nó chỉ có thể ra: Họ và tên: Nguyễn Văn Bình Ngày sinh: 20/10/1965

Xin kết thúc bài 5 ở đây, mời bạn đón xem tiếp vào các ngày tới.

Trước khi qua bài 6, bạn cần tham khảo đoạn trích sau để bổ sung chút ít kiến thức về thiết kế web:

Tuần tin Echip đã viết:Cần biết khi tạo website
Đối với những người thiết kế website rồi đưa lên internet, điều đầu tiên nên biết là quy ước đặt tên file trên internet như thế nào, để tránh trường hợp các liên kết bị mất hiệu lực khi chuyển file lên server hay chuyển từ server nầy sang server khác.

Lỗi mất liên kết thường xảy ra khi tạo website trên máy Windows hay Macintosh rồi gởi nó đến server Unix vì Windows và Macintos là hai hệ điều hành phổ biến nhất cho máy cá nhân còn Unix lại là hệ điều hành phổ biến nhất cho máy server.

Có vài quy ước cần phải theo để phù hợp với cả Windows, Macintosh và Unix:

* Đặt tên file theo quy ước Dos 8.3: An toàn nhất là dùng tên file theo quy ước 8+3 (tên file 8 ký tự, phần mở rộng 3 ký tự) và không dùng ký tự đặc biệt nào trừ dấu gạch dưới (thí dụ: image_1.htm). Đây là tên file được nhận diện bởi mọi hệ điều hành đang có.

* index.html: Tên file chính hay file đầu tiên của website nên được đặt là index.html vì server Unix đòi hỏi file nầy phải có phần mở rộng là html thay vì htm như các trang khác. Các Server Windows và Macintosh cũng chấp nhận tên file như vậy làm file chính. Khi bạn gõ URL là địa chỉ website không kèm tên file (thí dụ: ktlehoan.com), tất cả các Server sẽ tự động đi tìm trang web chính có tên index.html nạp cho bạn xem.

* Chữ hoa và chữ thường: Windows và Macintosh không quan tâm tới việc phân biệt chữ hoa và chữ thường trong tên file cũng như trong mã liên kết html. Khi bạn sao chép file, những file có tên giống nhau nhưng khác chữ hoa và chữ thường sẽ được coi là cùng một file và sẽ đè chồng (thay thế) lên nhau.

Nhưng Unix lại phân biệt chính xác chữ hoa, chữ thường trong tên file và đòi hỏi các liên kết mã html phải chính xác như vậy. Bạn chỉ cần gõ sai một từ thôi thì cả liên kết coi như hỏng. Khi bạn sao chép file, những file trùng tên nhưng khác các ký tự hoa, thường là những file khác nhau và tồn tại độc lập với nhau.

* Dấu cách (khoảng trắng) trong tên file: Windows và Macintosh cho phép trong tên file có khoảng trắng nhưng Unix thì lại không cho phép nên để tương thích nhiều hệ điều hành, bạn nên đặt tên file không có khoảng trắng (thay bằng các dấu gạch dưới để dể phân biệt). Thí dụ: Nên đặt tên file là “thi_nghiem.htm” thay vì “thi nghiem.htm”.

* Tải file: Khi dùng các chương trình để tải file lên internet, bạn cần chú ý là: Có chương trình cho phép bạn chuyển đổi toàn bộ tên file tải lên thành chữ thường hay thành chữ hoa. Trong quá trình tải file, bạn nên chú ý thông báo tên file trong hộp thoại kết quả, nếu thấy tên file hiển thị khác đi thì cần kiểm tra lại tên file gốc và mã liên kết trên ổ đĩa cục bộ.

* Link: Một thói quen tốt nên có khi tạo link là dùng toàn bộ chữ thường trong mã liên kết nội bộ (tương đối). Thí dụ: /andi/ndc.htm. Và tất cả tên file nên đặt theo kiểu chữ thường để dễ kiểm tra sửa chữa khi có sai lạc.

Liên kết tuyệt đối dùng để nối kết sang các website khác, mã liên kết của nó sẽ bao gồm địa chỉ website (URL) và tên file (hay tên file mặc định là index.html). Thí dụ: <a href= “http://www.yourname.com/index.html”>Trang chủ</a>

Liên kết tương đối sử dụng khi nối kết các file trong cùng một website và việc định địa chỉ link tương đối tùy thuộc vào việc theo dõi thư mục và file ở đâu trong mối tương quan với nhau. Nếu dùng liên kết tương đối cho toàn bộ website, bạn có thể khai thác chúng trên đĩa cứng nội bộ, di chuyển website của bạn qua bất kỳ máy nào hay vật trữ tin nào cũng được (các liên kết vẫn có giá trị tiếp tục).

Ở bài 5, các bạn đã học được cách tạo liên kết để dẫn đến một trang web khác trên mạng Internet, để liên kết đến một điểm neo trong cùng một trang. Bài 6 này chúng ta sẽ tiến hơn một bước, tạo liên kết không phải chỉ là dòng chữ mà là bằng một hình ảnh.

Ví dụ:

Mã: Chọn tất cả: <a href="http://www.nguyenkim.com/product_info.php?products_id=32581362&cPath=32723"><img src="http://www.nguyenkim.com/images/product/resize/LH-RE.gif" /></a>

Thì bạn sẽ được hình một cái quạt, khi click chuột vào hình cái quạt này sẽ xem được giá tiền của nó. Bạn thử bấm vào ảnh bên dưới đây:

Nếu bạn thực hiện đúng dòng ở ví dụ trong trang web của bạn, bạn sẽ thấy hệt như ảnh trên khi xem trang của bạn bằng trình duyệt.

Như vậy cú pháp tổng quát của liên kết dạng này là:

Mã: Chọn tất cả: <a href="địa chỉ trang web cần link đến><img src="địa chỉ URL của ảnh" /></a>

Khi bạn đặt ảnh vào trong thư mục cùng trang web của bạn, thì lúc này địa chỉ URL sẽ còn thu gọn là tên file ảnh.

Bạn hãy tự thực hiện với ví dụ ở bài thơ "Hai sắc hoa tigôn" đã từng học ở bài 2 cho loại liên kết này.

Chú ý quan trọng: với trình duyệt Internet Explorer, bạn cần xác định thuộc tính border="0" cho hình ảnh để khi tạo liên kết với nó thì không để lại khung bọc quanh ảnh màu xanh.

Ví dụ:

Mã: Chọn tất cả: <a href="http://khoancatbetong.com/forum/viewtopic.php?f=53&t=1668"><img src="http://img86.imageshack.us/img86/6510/tigonvt1.png" border="0" />

Vì thẻ img là thẻ không có thẻ đóng, nên để viết đúng chuẩn, cuối thẻ bạn nên có ký hiệu /> thay vì chỉ > như những thẻ có thẻ đóng khác.

Bài 6 xin dừng ở đây, mời các bạn đón đọc bài 7 trong vài ngày tới.

Bài 7 này chúng ta sẽ học cách tạo bảng cho trang web. Tạo bảng rất thường sử dụng trong thiết kế web vào hai mục đích:
1. Để trình bày bảng biểu các dữ liệu theo dòng và cột
2. Lợi dụng việc có thể dùng bảng với biên "vô hình" (không màu sắc) chúng ta dùng để tạo bố cục / layout cho các phần trên trang web một cách dễ dàng.

Ta xét đoạn mã HTML sau:

Mã: Chọn tất cả: <table border="1"> <tr> <td align="center">Dòng 1, cột 1</td> <td align="center">Dòng 1, cột 2</td> <td align="center">Dòng 1, cột 3</td> <td align="center">Dòng 1, cột 4</td> </tr> <tr> <td align="center">Dòng 2, cột 1</td> <td align="center">Dòng 2, cột 2</td> <td align="center">Dòng 2, cột 3</td> <td align="center">Dòng 2, cột 4</td> </tr> <tr> <td align="center">Dòng 3, cột 1</td> <td align="center">Dòng 3, cột 2</td> <td align="center">Dòng 3, cột 3</td> <td align="center">Dòng 3, cột 4</td> </tr> <tr> <td align="center">Dòng 4, cột 1</td> <td align="center">Dòng 4, cột 2</td> <td align="center">Dòng 4, cột 3</td> <td align="center">Dòng 4, cột 4</td> </tr> </table>

Copy nguyên đoạn mã trên đặt vào giữa cặp thẻ <body> và </body> của trang web bạn đang thực hiện và Save lại rồi dùng trình duyệt mở trang web ra xem, bạn sẽ thấy như sau:

Hình ảnh

Một bảng (table) với 4 dòng, 4 cột.

Bây giờ chúng ta phân tích đoạn mã để rõ cách tạo bảng là như thế nào.

Ta dùng cặp thẻ <table> và </table> để mở đầu và kết thúc một bảng (table).

Tuy nhiên, nếu bạn viết: <table>Dữ liệu của tôi ở đây</table> thì bạn sẽ không thể thấy có bảng nào xuất hiện bao quanh dòng chữ của bạn, và như vậy là cách sử dụng thẻ table có sự khác biệt so với các thẻ mà bạn đã từng học. Đúng vậy. Chúng ta sẽ phân tích kỹ hơn.

Để khởi đầu một bảng, bạn hãy: <table>
Và bảng thì sẽ có các ô (gọi là cell), nhiều ô liền kề theo hàng dọc thì sẽ tạo thành cột (column) và liền kề theo hàng ngang, thì chúng ta sẽ gọi là dòng (row):

Hình ảnh

Mô tả dòng và cột của một table

Như vậy, để tạo dòng thì ta dùng thẻ con <tr> và </tr> của table. Trong mỗi dòng chúng ta sẽ tạo ra các ô, ta dùng thẻ <td> và </td> để tạo các ô này.

Chúng ta cần chú ý là dòng đầu tiên ta tạo ra bao nhiêu ô, thì dòng tiếp theo ta cũng tạo ra bấy nhiêu ô thì table mới hoạt động đúng.

Ví dụ:

Mã: Chọn tất cả: <table border="1"> <tr> <td>Ô đầu tiên dòng 1</td> <td>Ô thứ 2 dòng 1</td> </tr> <tr> <td>Ô đầu tiên dòng 2</td> <td>Ô thứ hai dòng 2</td> </tr> </table>

Đây là một ví dụ đúng về một table. Thuộc tính border của thẻ <table> dùng để chỉ định độ dày / mỏng của biên một bảng, dùng số nguyên để chỉ, mỗi đơn vị tương đương với một pixel trên màn hình.

Ví dụ:
<table border="1"> : tạo bảng với độ dày của biên là 1px (pixel)
<table border="2"> : tạo bảng với độ dày của biên là 2px (pixel)
<table border="0"> : tạo bảng với độ dày của biên là 0px (pixel) - trường hợp này sẽ làm bảng không còn có biên. Chúng ta sẽ sử dụng trường hợp này trong thiết kế để bố trí các đối tượng trên trang web sao cho đẹp mắt.

Bài này chúng ta sẽ thực tập thêm một số loại table nâng cao, vì có nhiều trường hợp chúng ta sẽ không tránh khỏi việc sử dụng nó.

Hình ảnh

Một table hơi đặc biệt, đó là có 2 ô được trộn lại làm 1

Giờ thì chúng ta xem xét đoạn mã tạo nên table theo như hình mình họa trên:

Mã: Chọn tất cả: <table style="text-align: left; width: 445px; height: 128px;" border="1" cellpadding="2" cellspacing="2"> <tr> <td style="font-weight: bold;">Stt</td> <td style="text-align: center; font-weight: bold;">Họ và tên</td> <td style="text-align: center; font-weight: bold;">Ngày sinh</td> <td style="text-align: center; font-weight: bold;" colspan="2" rowspan="1">Điểm</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td style="font-weight: bold; text-align: center;">Toán</td> <td style="font-weight: bold; text-align: center;">Văn</td> </tr> <tr> <td style="text-align: center;">1</td><td>Nguyễn Văn An</td> <td>11/8/1993</td> <td style="text-align: center;">8</td> <td style="text-align: center;">4</td> </tr> <tr> <td style="text-align: center;">2</td> <td>Trần Hòa Bình</td> <td>5/11/1993</td> <td style="text-align: center;">6</td> <td style="text-align: center;">5</td> </tr> <tr> <td style="text-align: center;">3</td> <td>Lê Thị Tuyết Mai</td> <td>29/6/1993</td> <td style="text-align: center;">9</td> <td style="text-align: center;">8</td> </tr> <tr> <td style="text-align: center;">4</td> <td>Lê Lâm Thi</td> <td>3/7/1993</td> <td style="text-align: center;">7</td> <td style="text-align: center;">7</td> </tr> </table>

Bạn cứ copy nguyên đoạn mã HTML trên bỏ vào giữa cặp thẻ <body> và </body> của trang web bạn đang làm và Save lại rồi xem với trình duyệt xem thế nào đã nhé, trước khi ta xem xét kỹ hơn.

Bạn nhận xét thấy gì nhỉ?

Đầu tiên:

Mã: Chọn tất cả: <td style="font-weight: bold;">Stt</td> <td style="text-align: center; font-weight: bold;">Họ và tên</td> <td style="text-align: center; font-weight: bold;">Ngày sinh</td> <td style="text-align: center; font-weight: bold;" colspan="2" rowspan="1">Điểm</td>

Ta thấy có 4 hàng mã HTML bắt đầu <td> và kết thúc </td>

Như vậy, ta nghĩ rằng với 4 ô khởi đầu thì table của ta hứa hẹn có 4 cột.

Nhưng ta lại thấy ở dòng tiếp theo thì:

Mã: Chọn tất cả: <td> </td> <td> </td> <td> </td> <td style="font-weight: bold; text-align: center;">Toán</td> <td style="font-weight: bold; text-align: center;">Văn</td>

Ta đếm thấy những 5 hàng mã HTML bắt đầu <td> và kết thúc </td> , và lúc này khi xem table bằng trình duyệt, rõ ràng ta đếm thấy có 5 ô, như vậy, giả thiết 4 cột của ta bên trên đã... phá sản?!

Đây quả là đau đầu rồi. Vậy table của ta thực sự là thế nào? Câu trả lời: Nó có cả thảy 5 cột chứ không phải 4 cột

Vậy tại sao ở dòng đầu tiên, ta chỉ thấy có 4 cặp <td> và </td> mà thôi? Trả lời:
<td style="text-align: center; font-weight: bold;" colspan="2" rowspan="1">Điểm</td> là một ô đặt biệt, nó đã chiếm mất 2 cột của table, và như vậy thì chúng ta đếm thấy chỉ có 4 cặp <td> và </td> là đúng.

Ta nhìn thấy rằng colspan="2" là nói lên rằng: ô này băng qua 2 cột.

Như vậy, bạn đã học được rằng colspan="một giá trị là số cột mà ô muốn băng qua" là để chúng ta áp dụng trong trường hợp như vừa khảo sát trên. Bạn có thể tăng số này nếu muốn, nhưng số này luôn phải nhỏ hơn tổng số các cột có trong table.

Bây giờ thì có một bài tập dành cho bạn. Hãy làm table như hình dưới đây:

Hình ảnh

Sau khi làm xong, hãy xem liệu có tương tự đoạn mã dưới đây?

Mã: Chọn tất cả: <table style="text-align: left; width: 445px; height: 128px;" border="1" cellpadding="2" cellspacing="2"> <tr> <td style="font-weight: bold; text-align: center;">Stt</td> <td style="text-align: center; font-weight: bold;">Họ và tên</td> <td style="text-align: center; font-weight: bold;">Ngày sinh</td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td style="text-align: center;">1</td> <td>Nguyễn Văn An</td> <td>11/8/1993</td> </tr> <tr> <td style="text-align: center;">2</td> <td>Trần Hòa Bình</td> <td>5/11/1993</td> </tr> <tr> <td style="text-align: center;">3</td> <td>Lê Thị Tuyết Mai</td> <td>29/6/1993</td> </tr> <tr> <td style="text-align: center;">4</td> <td>Lê Lâm Thi</td> <td>3/7/1993</td> </tr> <tr> <td colspan="2" rowspan="1" style="text-align: center;"><b>Tổng số: 4 học sinh</b></td> <td> </td> </tr> </table>

Bài này cũng nhắc bạn nhớ đến   , nó chính là dấu khoảng cách dùng trong trang web, ta nên dùng dấu này khi đề cập đến khoảng cách nếu nó nằm trong table hoặc ta muốn có 2 khoảng cách trở lên, vì dùng phím dài gõ hàng loạt, trình duyệt cũng bỏ hết, chỉ giữ lại duy nhất một khoảng trắng.

Nâng cao thêm chút nữa

Giờ thì ta không kéo dài ô qua một số cột nữa, mà ta kéo dài ô theo hàng. Khảo sát ví dụ dưới đây:

Tạm dừng, hôm khác tiếp

Tiếp theo bài 8, bài này ta xem xét đoạn mã sau:

Mã: Chọn tất cả: <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"> <tr> <td>ô 1 bình thường</td> <td>ô bình thường</td> <td>ô bình thường</td> <td>ô bình thường</td> </tr> <tr> <td>ô bình thường</td> <td colspan="1" rowspan="2">2 ô trộn thành một theo chiều dọc</td> <td>ô bình thường</td> <td>ô bình thường</td> </tr> <tr> <td>ô bình thường</td> <td>ô bình thường</td> <td>ô bình thường</td> </tr> <tr> <td>ô bình thường</td> <td>ô bình thường</td> <td>ô bình thường</td> <td>ô bình thường</td> </tr> </table>

Kết quả của đoạn mã trên sẽ cho ta một table hình dáng như sau:

Hình ảnh

Như vậy, mấu chốt vấn đề là bạn cần khảo sát kỹ đoạn mã:

Mã: Chọn tất cả: <td colspan="1" rowspan="2">

tồn tại ở bên trên để biết rowspan="2" chính là... thủ phạm để một ô kéo vượt qua 2 dòng.

Bây giờ để kết thức bài 9 này, và cũng là kết thúc bài học về table, bạn copy lại đoạn mã sau, bê vào trang web bạn đang thiết kế, nhớ đặt trong phạm vi <body> đặt ở đây </body> và save lại rồi xem với trình duyệt.

Mã: Chọn tất cả: <table style="text-align: left; width: 770px; height: 550px;" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td style="width: 100%; height: 120px; background-color: rgb(51, 153, 153);" colspan="3" rowspan="1">BANNER TRANG WEB ĐẶT Ở VỊ TRÍ NÀY</td> </tr> <tr> <td style="width: 20%; background-color: rgb(153, 255, 153); height: 428px;"></td> <td style="height: 428px;"></td> <td style="width: 30%; background-color: rgb(255, 204, 204); height: 428px;"></td> </tr> </table>

Hãy tìm hiểu kỹ ví dụ trên, bạn sẽ có thể thiết kế nên giao diện của một trang web với 3 cột rồi đấy. Hình dáng nó như sau:

Click lên hình để xem đầy đủ

Bài này chúng ta sẽ học lại các thẻ và học bổ sung thêm các thuộc tính của chúng để có thể canh lề, chỉnh màu sắc chữ, màu nền cho một vùng văn bản, đường viền của table trong trang thiết kế của chúng ta.

Mã: Chọn tất cả: <body bgcolor="#0000FF"> <p>Đây sẽ là ví dụ trang web có nền màu xanh</p> </body>

Giả sử bạn có đoạn mã trên, thì khi xem trang, màu nền sẽ đỏ rực. Đó là bởi vì thuộc tính bgcolor, ở đây ta đặt bgcolor="#0000FF" để chỉnh màu nền thành màu đỏ.

#0000FF chính là mã màu theo hệ thập lục (hệ 16). Bạn xem thêm bảng mã màu cho web

Thuộc tính bgcolor có giá trị màu và có thể áp dụng cho thẻ body, thẻ p, thẻ span, thẻ table hoặc td

Tuy nhiên, thuộc tính này bị phản đối, vì vậy, bạn cũng cần học cách thiết kế theo kiểu mới, thay thuộc tính này bằng style="background-color:#0000FF" , mã màu của bạn có thể khác màu xanh, hãy tra bảng để sử dụng.

khoancatbetong.com

Tự học thiết kế trang web từng bước từng bước một

Tự học thiết kế trang web từng bước từng bước một

Tự học thiết kế trang web - bài 2

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

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

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

Tự học thiết kế trang web - bài 6

Tự học thiết kế trang web - bài 7

Tự học thiết kế trang web - bài 8

Tự học thiết kế trang web từng bước từng bước một - bài 9

Tự học thiết kế trang web từng bước từng bước một - bài 10

Ai đang trực tuyến?