Các thẻ khối (block-level) thường dùng
Là các thẻ hiển thị trên màn hình dưới dạng một đoạn riêng. Ví dụ:<p>, <h1>, <h2>, ...
• <p>định nghĩa một đoạn (paragraph) trong trang web (ở trước và sau thẻ <div> tự động xuống dòng).
• <h1>đến <h6> dùng để định nghĩa các tiêu đề (<h1> là lớn nhất, <h6> là nhỏ nhất)
• <div> nhóm các tags để tạo một mục hoặc tiểu mục có cứng cách hiển thị (kết hợp CSS, nếu không kết hợp với CSS thì không ảnh hưởng đến cách hiển thị của trang web)
Các thẻ inline thường dùng
Là các thẻ không tạo ra một đoạn mới. Ví dụ:<i>, <b>, <u>, ...
• <i>in nghiêngchữ
• <b>in đậmchữ
• <u>gạch chân
• <span>tác dụng tương tự thẻ<div> nhưng chỉ dùng với các thẻ inline Các thẻ dùng để tạo bảng
• <table>dùng để tạo bảng.
• <tr>dùng để tạo hàng.
Ví dụ: <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> Kết quả:
Một số thẻ để chèn nội dung đa phương tiện
• Thẻ <img> dùng để chèn hình ảnh. Thuộc tính “src” để chỉ ra đường dẫn đến file ảnh, thuộc tính “alt” (alternative) sẽ hiển thị trong trường hợp trình duyệt không hiển thị được ảnh hoặc không được hiển thị ảnh, cũng có thể được dùng trong các chương trình đọc màn hình để hỗ trợ người khuyết tật, các máy tìm kiếm cũng dùng thuộc tính này để lập chỉ mục cho web. Hiện nay nhiều trình duyệt hiển thị thuộc tính này như một chú thích cho ảnh khi di chuột vào. Ví dụ:<img src="example.jpg" alt="Example image" />
• Thẻ<object>để chèn flash, nhạc, phim.
3.3.7 Form trong (X)HTML
Form trong (X)HTML cho phép người dùng nhập thông tin để gửi về máy chủ. Form trong (X)HTML được đặt trong thẻ<form>.
Một số thuộc tính của thẻ<form>:
• action: địa chỉ trang web hoặc chương trình ở server xử lý dữ liệu củaform.
• method: chỉ ra cách thức dữ liệu được gửi về server: có 2 cách:“get”và“post”Một số công cụ để nhập dữ liệu trong form:
• Với thẻ<input>có thể tạo ra các ô nhập dữ liệu, các nút tùy vào thuộc tính“type”. Một số giá trị của thuộc tính“type”:
-textTạo ra textbox.
-passwordTạo ra ô nhập password.
-checkboxTạo ra ô chọn có thể chọn nhiều giá trà một lúc. -radioTạo ra ô chọn, chỉ được chọn 1 trong số các ô. -submitTạo ra nút để gửi dữ liệu về server.
-resetTạo ra nút để đưa giá trà các ô trong form về trạng thái mặc định.
• Với thẻ<select> có thể tạo ra danh sách lựa chọn. Thẻ <option>để chỉ ra các lựa chọn. Nếu thẻ<select> không thiết lập thuộc tính “multiple” và“size” thì sẽ có một drop-down box, nếu không sẽ có một danh sách.
Ví dụ:
<select name="color">
<option value="red">Đỏ</option>
<option value="green">Xanh lá cây</option> <option value="yellow">Vàng</option> </select>
Kết quả:
3.4 CSS
3.4.1 CSS là gì?
CSS (cacsading style sheet) sử dụng để định dạng trang web (màu, kích thước font chữ, độ rộng, màu của đường, khoảng cách giữa các thành phần trang,...)
Vị trí đặt CSS
• Ở trong trang web: đặt trong thẻstyle của phầnhead hoặc thuộc tính style của các thẻ có thuộc tính này. Ví dụ: <style type="text/css"> body{ color:#000000; background-color:#ffffff;
font-family:arial, verdana, sans-serif; } h1 {font-size:18pt;}
p {font-size:12pt;} </style>
hoặc:
<td style="font-family:courier; padding:5px;
border-style:solid; border-width:1px; border-color:#000000">
• Trong 1 file ở ngoài (thường có phần mở rộng la css), đưa vào trang web bằng cách dùng thẻ
<link>trong phần<head>
Ví dụ:
3.4.2 Cấu trúc một quy tắc CSS
Bao gồm hai phần: selector để chỉ ra đối tượng áp dụng khai báo này, declaration để định nghĩa các định dạng.
• Selector: có thể là tên thẻ, class (xác định bằng thuộc tính "class" của thẻ), id (xác định bằng thuộc tính "id" của thẻ), có tính kế thừa.
• Delaration: Gồm 2 phần,có dạng:property:value;
-property: chỉ ra thuộc tính. -value: xác định giá trị thuộc tính. Ví dụ:
td{width:36px}
Comment trong CSS: bắt đầu bằng "/*" kết thúc bằng "*/".
3.4.3 Một số thuộc tính thường dùng
Về font:
Tên Mục đích Một số giá trị cho phép
font Thiết lập nhiều thuộc tính font cùng lúc Ghép các giá trị ở dưới font-family Xác định họ font serif, sans-serif, monospace
font-size Kích thước font 10px, small, smaller, 10%
font-style Kiểu font normal, italic, oblique
Về background:
Tên Mục đích Một số giá trị cho phép
background-color Thiết lập màu nền #cccccc background-image Thiết lập ảnh nền url{bg.gif}
Ngoài ra có thể dùng CSS để thay cho bảng trong một số trường hợp giúp tạo cho người dùng cảm giác tốc độ tải trang nhanh hơn.
3.5 JavaScript
3.5.1 JavaScript là gi?
JavaScript là một ngôn ngữ kịch bản để cho phép lập trình truy cập các đối tượng trong trang web ở clien-side cũng như một số đối tượng của trình duyệt, hỗ trợ tạo trang web động và một số hiệu ứng đơn giản.
JavaScript là ngôn ngữ có kiểu động, hỗ trợ hướng đối tượng (dưới dạng "prototype-based",không phải "class-based" như Java, C++).
Vị trí đặt mã JavaScript
Dùng thẻ <script>, mã có thể đặt trong phần <head> hoặc dùng thuộc tính "src" của thẻ script để chỉ ra file chứa mã.
3.5.2 Các thành phàn tạo nên JavaScritp
• ECMAScript: định nghĩa cú pháp,kiểu, cấu trúc, từ khóa,...
• Document Object Model(DOM) ánh xạ trang web thành các hệ thống các nút.
Cú pháp của JavaScript phần lớn tương tự các ngôn ngữ như C/C++, Java nhưng JavaScript là ngôn ngữ có kiểu động.
3.5.3 Một vài ứng dụng
• Làm cho giao diện trang web sinh động hơn (có thể có một số hiệu ứng đơn giản).
• Là thành phần không thể thiếu của AJAX (Asynchronous JavaScript and XML) dùng để tăng tính tương tác, tốc độ cho trang Web,đồng thời giảm tải cho sever vì chỉ cần cập nhật 1 phần trang Web (không bắt buộc phải cập nhật toàn bộ trang như cũ)
3.6 Một số vấn đề về thiết kế Web
3.6.1 Nên dùng CSS thay cho bảng, nhất là đối với cả trang web
Lý do:
• Nếu dùng bảng, trình duyệt phải tải hết nội dung trang về mới hiển thị, tạo cho người dùng cảm giác trang web tải chậm.
• Dùng CSS lúc chỉnh sửa giao diện đễ hơn.
3.6.2 Với các đoạn JavaScript, CSS lớn, dùng cho toàn bộ website nên đặt ở file ngoài
Lý do:
• Nếu đặt ở file ngoài, trình duyệt chỉ phải tải một lần và sẽ cache lại, do đó giảm thời gian tải,giảm tải cho sever.
Kết luận
Trên đây là bản báo cáo của chúng em về 3 nội dung Scilab, LATEX , Web.
Chúng em đã rất cố gắng tuy nhiên bản báo cáo không tránh khỏi có những sai sót, em xin đón nhận sự góp ý của thầy cô để các bản báo cáo sau chúng em dần tốt hơn.
Tài liệu tham khảo
[1] Michael Baudin.Introduction to Scilab.Digiteo, 2010.
[2] Graeme Chandler and Stephen Roberts. Introduction to scilab, 2002. [3] Guido Gonzato. Latex for word processor users, 2003.
[4] Tobias Oetiker, Hubert Partl, Irene Hyna, and Elisabeth Schlegl. The not so short in troduction to latex2e, 2010.
[5] Hàn Thế Thành.Hỗ trợ tiếng Việt cho TeX
[6] W3C.HTML 4.01 Specification, 1999.