III) Advance Joomla
4) Các thẻ định dạng
Trong phần nà thì mình chỉ giới thiệu đến các bạn các thẻ thông dụng dùng để hỗ trợ trong việc định dạng văn bản trên web HTML. Một số thẻ đặc biệt các bạn nghiên cứu thêm nha .
4.1. Thẻ <div>..</div>
Cho phép bạn định dạng một đoạn văn bản bằng các thuộc tính của nó . Ví dụ như bạn muốn canh giữa một đoạn văn bản thì bạn dùng thuộc tính algin=”center”:
<div algin=”center”>
Chào mừng bạn đến với website. </div>
4.2. Thẻ <p>…</p>
Thẻ này cũng tương tự như thẻ <div> nhưng mà khi kết thúc thẻ </p> thì dữn liệu trình bày sẽ tự động xuống hàng . Nếu như bạn sử dụng 2 thẻ <p> liên tiếp thì sau khi kết thúc thẻ </p> thứ nhất sẽ cách thẻ thứ 2 một khoảng nhất định.
Ngoài ra ta có thể sử dụng thẻ <br> dùng để xuống hàng . <br> là thẻ không có thẻ đóng và khi xuống hàng nó sẽ không cách 1 đoạn giống như thẻ <p> mà nó sẽ hiển thị ở hàng tiếp theo.
4.3. Thẻ <font>…</font>
Thẻ <font> dùng để các bạn định dạng font chữ của đoạn văn bản nằm trong tag này bằng các thuộc tính của nó như : - Color: định dạng màu chữ cho đoạn văn bản. Màu sắc thì các bạn có thể biểu diễn bằng cách dùng tên màu bằng tiếng anh như: red,blue,green,…hoặc các bạn cũng có thể lấy mã màu chèn dzo như color=”#66CCFF”.
Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 27
- Size: định dạng cỡ chữ
- Face: định dạng kiểu chữ cho văn bản như: arial,time new romal,tohoma,..
4.4. Một số thẻ đị dạng văn bản thông thường:
<H1> …</H1> : Headers (H1 to H6) (TIÊU ĐỀ - 6 cấp từ 1 đến 6)
<P> …</P> : Paragraphs (Xác định một đọan văn
bản)
<UL >… </UL>: Un order List (danh sách - Bullet ) <OL >… </OL>:Order List (danh sách - Numbering) <HR> : Horizontal Rules. (chèn đường kẻ ngang). <BR> : line breaks ( ngắt dòng)
< U >…</ U> : underline (gạch chân văn bản) < I >…</I> : Italic (Văn bản Nghiêng)
< B >…</ B> :Bold (gạch chân in đậm)
• Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống):
• Dấu nhỏ hơn (<) và lớn hơn (>): < > • Dấu ngoặc kép (“): "
• Ký hiệu : © • …
Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 28 Khi bạn muốn trình bày một bảng dữ liệu lên web chẳng hạn như trình bày bảng điểm của sinh viên hay là danh sách các sinh viên thì bạn cần phải dùng đến thẻ này . Sau khi khai bào thẻ <table> thì bạn cần quan tâm đến các thẻ hàng <tr>..</tr> và thẻ cột <td>…</td>
Và bạn cần quan tâm đến các thuộc tính của nó . Đây là một số thuộc tính của thẻ <table>:
– BORDER=“x” : kích thước viền
– BGCOLOR: màu nền, ALIGN: canh chỉnh – WIDTH,HEIGHT : kích thước cao, rộng
– CELLPADDING, CELLSPACING : khoảng cách giũa các hàng và cột
– ROWSPAN, COLSPAN: trộn các dòng hoặc cột – <TR>: dòng, <TD> cột, <TH>: heading
– <CAPTION>: tiêu đề mô tả bảng – bgcolor=“màu”: màu nền của bảng
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho
bảng. Nên sử dụng đường dẫn tương đối nếu có thể
Note: Khi thiết kế table các bạn chỉ cần quan tâm đến chiều rộng chứ không cần quan tâm đến chiều cao của <table> vì chiều cao của nó phụ thuộc vào độ dài sữ liệu của ta. Tương tự thì thẻ hàng <tr> thì ta chỉ quan tâm đến chiều cao ,còn thẻ cột thì ta chỉ quan tâm đến thẻ rộng.
Ex: Để các bạn hình dung rõ hơn về table ta đưa ra một ví dụ để các bạn làm thì các bạn sẽ hiểu được table. Các bạn hãy xây dựng trang web giống như hình dưới:
Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 29 Code:
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> HTML và các thẻ cơ bản </title> </head>
<body>
<table border="1" cellspacing="1" cellpadding="7" width="500">
<tr>
<td width="15%" align="top" rowspan="2"> STT
Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 30 <td width="35%" align="center" rowspan="2"> Họ & Tên
<td width="50%" align="top" colspan="2"> <center>profile</center> </td> </tr> <tr> <td width="25%" align="center"> MSSV </td> <td width="25%" align="center"> Quê Quán </td> </tr> <tr> <td width="15%" align="center"> 001 </td> <td width="35%" align="center"> Nguyen Van A </td> <td width="25%" align="center"> 0511125 </td> <td width="25%" align="center">
Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 31 Sài Gòn </td> </tr> </tr> <tr> <td width="15%" align="center"> 002 </td> <td width="35%" align="center"> Nguyen Van B </td> <td width="25%" align="center"> 0511126 </td> <td width="25%" align="center"> Hà Nội </td> </tr> <tr> <td width="15%" align="center"> 003 </td> <td width="35%" align="center"> Nguyen Van C </td>
Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 32 <td width="25%" align="center"> 0511127 </td> <td width="25%" align="center"> Hà Nội </td> </tr> </table> <table> </table> </body> </html> 5) Thẻ Hình Ảnh <img >
Thẻ này dùng để chèn hình ảnh vào trong trang web , các bạn có thể thêm các thuộc tính chiều cao ,độ rộng cho hình ảnh chú thích cho hình ảnh(alt). Thẻ <img> là thẻ không có thẻ đóng.
Ex: <img src=”joomla.gif” alt=”group w3 ” with=”500” hight=”450” boder=”0”>
6) Thẻ Liên Kết <a>…</a>
Khi mà bạn cần lien kết đến mộ trang web hay một địa chỉ email thị bạn có thể dùng thẻ <a> này để liên kết .
Để cho người dùng có thể chọn đường liên kết thì bạn có thể sử dụng tên lien kết hay cũng có thể dùng hình ảnh để biểu diễn cho liên kết .