Những tính năng chính của file HTML

Trong phần này sẽ cung cấp một sự giải thiết chi tiết của các phần đơn lẻ trong file HTML. Cho việc tạo file HTML, trang chỉ cố định những giá trị đƣợc sử dụng cho vụ trí và kích thƣớc của tối tƣợng. Điều này hạn chế các phần tử di

chuyển và chồng chéo lên nhau khi cửa sổ trình duyệt nhỏ hơn.

 Lệnh AWP

Lệnh AWP đƣợc chèn vào nhƣ kiểu một chú thích của file HTML. Lệnh AWP đƣợc đặt ở bất kỳ vị trí nào trong file HTML. Tuy nhiên, nhằm để rõ ràng, các lệnh AWP thƣờng đƣợc đặt ở phần đầu của file HTML.

Tất cả các biến đƣợc chuyển giao tới CPU phải đƣợc định nghĩa bằng cú pháp AWP_In_Variable

Code Giải thích <!DOCTYPE HTML PUBLIC "-

//W3C//DTD HTML 4.01 Transitional//EN">

Xác định đây là dạng tài liệu HTML, ngôn ngữ phiên bản V4.01 trong biến “Transitional:. Mã ngôn ngữ “EN” (tiếng Aanh). Dạng tài liệu luôn luôn đứng trƣớc tag <html>

<html> … </html> Chứa nội dung file HTML <title>Userdefined Website –

Application Example</title>

Nội dung của trang web sẽ đƣợc hiển thị sau đó trong phần đầu của trình duyệt web

Ngôn ngữ của nội dung file HTML

Tuỳ chọn dữ liệu meta: với lệnh này, trang web đƣợc tự động làm mới mỗi 10 giây. Đặc biệt việc giám sát xử lý để làm mới trang web một cách chu kỳ. Cho các trang với các input field, làm mới chu kỳ có thể nảy sinh các vấn đề

Thông qua tag <link…>, một file CSSS đƣợc tham chiếu, file này chứa toàn bộ thông tin về các tuỳ chọn thiết kế của trang web, ví dụ nhƣ hình nền màu

trắng,… <script src="Script/siemens_script.js"

type="text/javascript"> </script>

Vùng cho các tập lệnh ( ví dụ nhƣ JavaScript) đƣợc định nghĩa giữa 2 tag <script…> và </script>. Viết các tập lệnh trong khu vực ngôn ngữ script hoặc tích hợp nó vào 1 file riêng

<body> …</body> Bao gồm phần nội dung của file HTML

Bảng 9.1: Giải thích các lệnh trong tiêu đề Web  Hiển thị của các khu vực

Có 3 khu vực đƣợc sử dụng trong file HTML: • Header area (header)

• Navigation bar (navi) • Data area (page) -Ví dụ:

Code Hƣớng dẫn #page { POSITION: absolute; left: 150px; top: 0; height: 800px; width: 920px; padding-top: 180px; padding-left: 30px; padding-right: 30px; text-align: left; border-color: white; border-style: solid; border-width: 1px; background-color: Định dạng CSS có cấu trúc nhƣ sau:

Selector {Property: value }

Trong ví dụ của chúng ta, “page” là vật chọn với các khai báo (

rgb(208,211,218);

border-collapse : separate; z-index: 1; }

Bảng 9.2: Giải thích các lệnh định dạng trong Web  Hiển thị hình ảnh

-Các loại hình ảnh đƣợc sử dụng trong file HTML. • Hình ảnh tĩnh. (adsbygoogle = window.adsbygoogle || []).push({});

• Hình nền.

• Hình ảnh với chiều cao thay đổi.

• Hình ảnh động đƣợc thay đổi dựa vào trạng thái bit của CPU. Giải thích: Code Giải thích <img src="Images/SIEMENS_Logo.PNG"> Hình ảnh đƣợc tích hợp thông qua tag “img”

<img style =vertical-align:

bottom;margin: Opx; height: 50px; width: 50px;” scr="Images\Status0:= "STARTSTOP".PNG”/><cr>

Hình ảnh dựa vào giá trị của biến "STARTSTOP". Biến này có thể có giá trị “0” hoặc “1”

Các hình ảnh đƣợc chứa có thiết kế trong file Status00.png (van đóng) và Status01.png (van mở).

Khi van đóng, “Status” có giá trị 0: việc gọi hình ảnh đƣợc làm bởi công thức :

“Status0”+”0”+”.png”=Status00.png Bảng 9.3: Giải thích lệnh tạo hình ảnh trên Web

 Tạo một bảng với các ký tự

Việc sử dụng bảng đƣợc khuyến cáo để tránh làm nội dung của trang web bị di chuyển, dựa vào kích thƣớc của cửa sổ, dựa vào kích thƣớc của cửa sổ.

Tuy nhiên, bạn có thể định nghĩa một bảng ở vị trí trung tâm trang web thông qua CSS.

Giải thích:

Code Giải thích <table border = “1”>

</table>

Giá trị border= “1” nghĩa là bảng có viền bao quanh. Tạo bảng không có viền ( bảng ẩn) với border =”0”. <tr> <td class="static_field_headline_small">ROOM</td> <td class="static_field_headline_small">VALUE BARCODE</td> <td class="static_field_headline_small">TIME IN</td> <td class="static_field_headline_small">TIME OUT</td> <tr> tƣợng trƣng cho hàng của bảng.

Nội dung của một hàng đƣợc nằm giữa 2 tag <td> (table data) và </td>.

“static_field_headline_sm all” dữ liệu của bảng đƣợc định nghĩa trong file CSS.

</tr> định dạng từ file CSS tới phần tử trong file HTML. Nó nhằm tạo một hình thức đồng nhất cho tất cả.

Bảng 9.4: Giải thích lệnh đƣa dữ liệu lên Web  Xuất ra biến CPU trên web

Biến của CPU luôn luôn đƣợc hiển thị thông qua tên biểu tƣợng.

Do đó „Data_block_1”.MV O 1‟, luôn luôn hiển thị giá trị từ CPU tới phần ngõ ra hiển thị trên trang web.

Chú ý : vì biến đƣợc chứa trong một bảng, các tag "<td>・</td>" đƣợc hiển thị thêm vào đây. Định dạng của "output_field" đƣợc hiển thị trên web.

 Cài đặt các biến trong CPU với giá trị và nút nhấn

Code Giải thích <form method="post" action="">

Việc gọi định dạng “form” với phƣơng pháp “post”. Dƣới tác dụng lệnh “action”, không chi tiết nào đƣợc yêu cầu bởi vì với “action” trang hiện tại đƣợc gọi ở chế độ mặc định.

Với input type=”hidden”, một input field đƣợc ẩn đi ( ở đây ta thấy biến “Data_block_1”. AUTO giá trị bằng 1 và

“Data_block_1”. RESET có gí trị bằng 0).

Với input type=”submit” thì nó giống nhƣ một nút nhấn tên là START. Khi đƣợc nhấn vào thì những input type=”hidden” sẽ đƣợc gửi xuống PLC. Bảng 9.5: Giải thích tạo nút nhấn trên Web (adsbygoogle = window.adsbygoogle || []).push({});

Mục lục