Showing posts with label Thiết kế Web. Show all posts
Showing posts with label Thiết kế Web. Show all posts

[ XML ] Cú pháp căn bản trong XML [ XML syntax rules ]

in , /

Nói chung các quy tắc của XML rất đơn giản hợp lý, dễ học và dễ sử dụng.


1. Tất cả các yếu tố của XML phải có thẻ đóng (closing tag).
- Các yếu tố trong HTML không cần phải có thẻ đóng.
  <p>This is a paragraph
  <p>This is another paragraph

- Trong XML, việc bỏ qua thẻ đóng là không hợp lệ. Tất cả các yếu tố phải có thẻ đóng. Do dó với ví dụ trên trong XML sẽ là:
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>

* Lưu ý: Những phần khai báo ở đầu tài liệu XML không có thẻ đóng. Đó không phải là lỗi. Khai báo đó không phải là một phần trong chính tài liệu XML đó, và nó không có thẻ đóng.

2. Yếu tố chính xác các thẻ của XML.
- Các thẻ trong XML yêu cầu một sự chính xác. Ví dụ thẻ <Letter> sẽ khác với thẻ <letter>.

- Thẻ đóng và thẻ mở phải được viết cùng một trường hợp.
   <message>This is incorrect</message>
   <message>This is correct</message>

* Lưu ý: thẻ mở và thẻ đóng cũng thường được gọi là thẻ bắt đầu và thẻ kết thúc. Bạn có thể sử dụng nó theo ý thích của bạn, nhưng nó phải chính xác.

3. Các yếu tố trong XML phải được lồng nhau đúng cách

- Trong HTML các bạn có thể thấy các yếu tố không đúng cách viết lông nhau
   <b><i>This text is bold and italic</b></i>
- Trong XML tất cả các yếu tố phải được lồng nhau đúng quy định:
  <b><i>This text is bold and italic</i></b>

Trong ví dụ trên, lồng nhau đúng cách ở đây được hiểu là kể tử khi phần tag <i> được mở trong tag <b>. Thì nó phải được đóng bên trong tag <b>.

4. Tài liệu XML phải có một phần tử gốc

Tài liệu XML phải có một yếu tố chứa tất cả các yếu tố khác. Yếu ôố này được gọi là phần tử gốc.
 <root>
  <child>
     <subchild>.....</subchild>
  </child>
 </root>

5. Các giá trị thuộc tính trong XML phải trích dẫn

- Các yếu tố trong XML có thể có các thuộc tính trong cặp tên/giá trị giống như trong HTML.

- Trong XML các giá trị thuộc tính luôn luôn phải được trích dẫn(quoted).

- Chúng ta hãy xem 2 ví dụ dưới đây về cách sử dụng thuộc tính trong XML, ví dụ 1 là sai, ví dụ 2 là đúng.

Ví dụ 1: sai.
<note date=12/11/2007>
  <to>Love</to>
  <from>Jani</from>
</note>

Ví dụ 2: sử dụng đúng
<note date="12/11/2007">
  <to>Tove</to>
  <from>Jani</from>
</note>

Lỗi trong ví dụ 1 là thuộc tính ngày trong phần tử node không trích dẫn.

6. Tham chiếu thực thể (Entity Reference).

- Một số ký tự có ý nghĩa đặc biệt trong XML.

- Nếu như bạn đặt ký tự “<” bên trong một phần tử của XML nó sẽ tạo ra một lỗi bởi vì phân tích các giải thích đó là khởi đầu của một phần tử mới.

- Điều này sẽ tạo ra một lỗi XML:
<message>if salary < 1000 then</message>
Vậy làm sao để sử dụng ký tự “<” trong một phần tử của XML. Câu trả lời là thay thế ký tự “<” bằng một tham chiếu thực thể &lt;
<message>if salary &lt; 1000 then</message>

- Chúng ta có 5 tham chiếu thực thể được định nghĩa trước trong XML:



* Lưu ý: Chỉ có ký tự “<” và “&” là không hợp lệ nghiêm ngặt trong XML. Các ký tự “>” là hợp pháp, nhưng sử dụng tham chiếu thực thể &gt; để thay thế cho nó sẽ tạo một thói quen tốt.

7. Chú thích trong XML (Comments in XML)

Cú pháp các chú thích trong XML là tương tự HTML.

<!– This is a comment –>

8. Khoảng trắng (white-space) được giữ lại trong XML

HTML cắt bỏ nhiều ký tự trắng trắng thành một ký tự trắng đơn.



- Với XML, ký các ký tự trắng trong tài liệu không được cắt bỏ.

9. XML lưu trữ một dòng mới như LF(Line Feed)

Trong các ứng dụng của Windows, một dòng mới là một lưu trữ bình thường như một cặp ký tự: carriage return (CR) và chuyển dòng(LF – Line Feed). Trong các ứng dụng của Unix, một dòng mới là bình thường được lưu trữ như một ký tự LF. XML lưu trữ một dòng mới như LF.

Tham khảo thanhcuong

[ HTML ] Thiết kế web với HTML 5

in , /

Giới thiệu với các bạn tổng quan về thiết kế web với HTML 5

HTML5 là lần sửa đổi tiếp theo của tiêu chuẩn HTML thay thế HTML 4.01, XHTML 1.0, và XHTML 1.1. HTML5 là một tiêu chuẩn cho cấu trúc và trình bày nội dung trên World Wide Web.

Với việc thiết kế web HTML 5 nhằm đáp ứng các phiên bản mới nhất của Apple Safari, Google Chrome, Mozilla Firefox, và Opera tất cả các tính năng hỗ trợ nhiều HTML5 và Internet Explorer 9.0 cũng sẽ có hỗ trợ cho một số chức năng HTML5.



Tính năng mới:

Thiết kế web HTML5 cung cấp một số phần tử mới và các thuộc tính giúp trong việc xây dựng một trang web hiện đại. Sau đây là các tính năng được giới thiệu trong HTML5.

• Các phần tử mới: của các thẻ <header>, <footer>, <section>.
• Form 2.0: Cải tiến cho các hình thức web HTML, nơi thuộc tính mới đã được giới thiệu cho <input> tag.
• Duy trì lưu trữ cục bộ: được thực hiện mà không cần phải dùng đến các plugin của bên thứ ba.
• WebSocket : Một A thế hệ tiếp theo của kỹ thuật truyền thông hai chiều cho các ứng dụng web.
• Server-Sent Events: HTML5 giới thiệu các luồng sự kiện từ máy chủ web tới các trình duyệt web và chúng được gọi là Server-Sent Events (SSE).
• Canvas: Yếu tố này hỗ trợ một giao diện vẽ hai chiều mà bạn có thể lập trình với JavaScript
• Audio & Video: Bạn có thể nhúng âm thanh hoặc video trên các trang web mà không cần phải dùng đến các plugin của bên thứ ba.
• Geolocation: là API cho phép người dùng ó thể chọn để chia sẻ vị trí địa lý của họ với các ứng dụng web của bạn.
• Microdata: Là một cách chuẩn hóa cho phép bạn tạo các từ vựng riêng vượt ra ngoài HTML5 và mở rộng các trang web của với ngữ nghĩa tùy chỉnh.
• Kéo và thả: Kéo và thả các mục từ một vị trí đến một vị trí trên cùng một trang web.

Cú pháp HTML5:

Thiết kế web với ngôn ngữ HTML 5 có một cú pháp HTML "tùy chỉnh" tương thích với các tài liệu HTML 4 và XHTML1 xuất bản trên web, nhưng không tương thích với tính năng bí truyền SGML của HTML 4

Trong việc thiết kế web HTML 5 không có quy tắc cú pháp tương tự như XHTML, nơi chúng ta cần trường hợp tên thẻ thấp hơn, trích dẫn các thuộc tính, một thuộc tính phải có một giá trị và đóng tất cả các thẻ trống.

Tuy nhiên, HTML5 cung cấp nhiều tính linh hoạt và hỗ trợ sau:
• Tên thẻ chữ hoa
• Các trích dẫn là tùy chọn cho thuộc tính.
• Giá trị thuộc tính là tùy chọn.
• Đóng các phần trống là tùy chọn.

DOCTYPE:

Doctypes trong các phiên bản cũ của HTM vẫn còn bởi vì ngôn ngữ HTML dựa trên SGML do đó yêu cầu một tham chiếu đến một DTD.

Soạn thảo tài liệu HTML 5 chúng ta sẽ sử dụng cú pháp đơn giản để xác định DOCTYPE như sau:

<!DOCTYPE html>

Tất cả cú pháp trên là không phân biệt chữ hoa thường.

Mã hóa ký tự:

Người soạn HTML 5 có thể sử dụng cú pháp đơn giản để chỉ ra mã hóa ký tự như sau:

<meta charset="UTF-8">

Tất cả cú pháp trên là không phân biệt chữ hoa thường.

Các phần tử HTML5:

Các phần từ được đánh dấu bằng cách sử dụng các thẻ bắt đầu và thẻ kết thúc. Các thẻ là giới hạn sử dụng dấu ngoặc nhọn với tên thẻ ở giữa.
Sự khác biệt giữa các thẻ bắt đầu và thẻ kết thúc là bao gồm một dấu gạch chéo trước tên thẻ

Dưới đây là một ví dụ phần tử HTML5:

<p>...</p>

Đối với việc thiết kế web HTML 5, tên thẻ HTML5 không phân biệt chữ hoa thường và có thể được viết trong tất cả các trường hợp chữ hoa hay hỗn hợp, mặc dù các quy ước phổ biến nhất là gắn bó với chữ thường.

Hầu hết các phần tử có chứa một số nội dung như <p> ... </ p> có chứa một đoạn văn. Tuy nhiên một số phần tử, không được phép có chứa bất kỳ nội dung nào và chúng được gọi là các phần tử trống. Ví dụ, br, giờ, liên kết và meta.

Các thuộc tính HTML5:

Các phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác nhau của một phần tử

Một số thuộc tính được định nghĩa chung và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những phần tử khác được xác định cụ thể. Tất cả các thuộc tính có một tên và một giá trị và giống như trong ví dụ dưới đây.

Sau đây là ví dụ của một thuộc tính HTML5 minh họa làm thế nào để đánh dấu lên một phần tử div với một thuộc tính được đặt tên lớp bằng cách sử dụng một giá trị của "example":

<div class="example">...</div>

Thuộc tính chỉ có thể được quy định trong các thẻ bắt đầu và không bao giờ được sử dụng trong các thẻ kết thúc.

Thuộc tính HTML5 không phân biệt chữ hoa và thường có thể được viết trong tất cả các trường hợp chữ hoa hay hỗn hợp, mặc dù các quy ước phổ biến nhất là gắn bó với chữ thường.

Các sự kiện HTML5:

Khi người dùng truy cập vào trang web của bạn, họ thực hiện công việc như nhấp chuột vào văn bản, hình ảnh và liên kết, v.v. Đây là những ví dụ về những gì JavaScript gọi các sự kiện
.
We can write our event handlers in Javascript of vbscript and can specify these event handlers as a value of event tag attribute. The HTML5 specification defines various event attributes as listed below:

Chúng ta có thể viết các xử lý sự kiện trong Javascript và có thể chỉ định các xử lý sự kiện này như một giá trị của thuộc tính thẻ sự kiện. Các đặc điểm kỹ thuật HTML5 định nghĩa thuộc tính sự kiện khác nhau như được liệt kê dưới đây:

Những thuộc tính sau đây có thể được sử dụng để kích hoạt bất kỳ mã javascript hoặc VBScript được đưa ra là giá trị, khi có bất kỳ sự kiện xảy ra đối với bất phần tử tố HTM5.

Tài liệu HTML5:

Các thẻ dưới đây được giới thiệu cho cấu trúc tốt:
• section: Thẻ này mô tả một tài liệu chung hoặc phần ứng dụng. Nó có thể được sử dụng cùng với thẻ h1-h6 để chỉ ra cấu trúc tài liệu
• article: Thẻ này mô tả cho một phần nội dung của một tài liệu độc lập, chẳng hạn như một entry blog hoặc bài báo.
• aside: Thẻ này mô tả cho một phần nội dung được chỉ liên quan đến phần còn lại của trang
• header: Thẻ này thể hiện tiêu đề của phần đầu trang.
• footer: Thẻ này mô tả một footer cho phần chân trang và có thể chứa thông tin về tác giả, thông tin bản quyền, vân vân
• nav: Thẻ này mô tả cho một phần của các tài liệu dành cho điều hướng
• dialog. Thẻ này có thể được sử dụng để đánh dấu một hộp hội thoại
• figure:. Thẻ này có thể được sử dụng để kết hợp một chú thích cùng với một số nội dung nhúng, chẳng hạn như một hình ảnh hoặc video

Thẻ đánh dấu cho một tài liệu 5 HTM sẽ như sau:

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>...</title>
  </head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
   <section>
...
   </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
* Một số khác biệt và cải tiến giữa HTML và HTML5
- HTML5 sẽ là một chuẩn mới thay cho HTML.
- Phiên bản trước của HTML là HTML 4.01 năm 1999. Trải qua thời gian, HTML đã phát triển lên XHTML và giờ đây là HTML5,... chúng có cùng khả năng như HTML nhưng cú pháp chặt chẽ hơn, đơn giản hơn nhưng hiệu quả hơn.
- HTML5 vẫn đang trong quá trình phát triển. Tuy nhiên, trình duyệt chính hỗ trợ nhiều của các phần tử HTML5 và APIs mới

 Ví dụ:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		 
HTML5
<!DOCTYPE html>


- HTML VÀ HTML5 SEMANTIC (NGỮ NGHĨA)
Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả.

HTML
<body>
<!-- Phần chứa logo -->
<div id="header">HEADER</div>
<!-- Phần chứa menu ngang -->
<div id="nav">NAVIGATION</div>
<!-- Phần thân 2 cột, kiểu 1 -->
<div class="section">
    <!-- Cột trái -->
    <div class="aside">SLIDEBAR LEFT</div>
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
</div>
<!-- Phần thân 2 cột, kiểu 2 -->
<div class="section">
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
    <!-- Cột phải -->
    <div class="aside">SLIDEBAR RIGHT</div>
</div>
<!-- Phần thân 3 cột, kiểu 1 -->
<div class="section">
    <!-- Cột trái -->
    <div class="aside">SLIDEBAR LEFT</div>
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
    <!-- Cột phải -->
    <div class="aside">SLIDEBAR RIGHT</div>
</div>
<!-- Phần thân 3 cột, kiểu 2 -->
<div class="section">
    <!-- Nội dung chính -->
    <div class="article">CONTENT</div>
    <!-- Cột trái -->
    <div class="aside">SLIDEBAR LEFT</div>
    <!-- Cột phải -->
    <div class="aside">SLIDEBAR RIGHT</div>
</div>
<div id="footer">FOOTER</div>
</body>



ĐỊNH NGHĨA HIỂN THỊ XHTML THEO CSS 



-------------------------  




* {
  margin: 0;
  padding: 0;
}
body
{
  margin: 0 auto;
  width: 980px;
  font-family: Arial, Helvetica, sans-serif;
}
#header {
  padding: 10px;
  border: 1px solid #cccccc;
  position: relative;
}
#nav {
  padding: 10px;
  background: #f3f3f3;
  border: 1px solid #cccccc;
  position: relative;
}
.section {
  display: table;
  margin: 5px 0 5px;
  border: 1px solid #cccccc;
}
.section .article {
  display: table-cell;
  padding-right: 22px;
  width: 720px;
}
.section .aside {
  display: table-cell;
  width: 25%;
  background: #f3f3f3;
}
#footer{
  background: #838383;
  border-top: 1px solid #cccccc;
  padding: 10px;
  text-align: center;
  color: #ffffff;
  font-size: 80%;
}


HTML5
<body>
    <!-- Phần chứa logo -->
    <header>HEADER</header>
    <!-- Phần chứa menu ngang -->
    <nav>NAVIGATION</nav>
    <!-- Phần thân 2 cột, kiểu 1 -->
    <section>
        <!-- Cột trái -->
        <aside>SLIDEBAR LEFT</aside>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
    </section>
    <!-- Phần thân 2 cột, kiểu 2 -->
    <section>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
        <!-- Cột phải -->
        <aside>SLIDEBAR RIGHT</aside>
    </section>
    <!-- Phần thân 3 cột, kiểu 1 -->
    <section>
        <!-- Cột trái -->
        <aside>SLIDEBAR LEFT</aside>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
        <!-- Cột phải -->
        <aside>SLIDEBAR RIGHT</aside>
    </section>
    <!-- Phần thân 3 cột, kiểu 2 -->
    <section>
        <!-- Nội dung chính -->
        <article>CONTENT</article>
        <!-- Cột trái -->
        <aside>SLIDEBAR LEFT</aside>
        <!-- Cột phải -->
        <aside>SLIDEBAR RIGHT</aside>
    </section>
    <footer>FOOTER</footer> 
</body> 






ĐỊNH NGHĨA HIỂN THỊ HTML5 THEO CSS3



-----------------




* {
    margin: 0;
    padding: 0;
}
body
{
    margin: 0 auto;
    width: 980px;
    font-family: Arial, Helvetica, sans-serif;
}
header {
    padding: 10px;
    border: 1px solid #cccccc;
    position: relative;
}
nav {
    padding: 10px;
    background: #f3f3f3;
    border: 1px solid #cccccc;
    position: relative;
}
section {
    display: table;
    margin: 5px 0 5px;
    border: 1px solid #cccccc;
}
section article {
    display: table-cell;
    padding-right: 22px;
    width: 720px;
}
section aside {
    display: table-cell;
    width: 25%;
    background: #f3f3f3;
}
footer{
    background: #838383;
    border-top: 1px solid #cccccc;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    font-size: 80%; 




} 


[Tham khảo esvn]

Subscribe to: Posts (Atom)