Hướng dẫn link rel=stylesheet là gì

Trước đây, mỗi khi một trang web được hiển thị trong một trình duyệt, người ta không thể thay đổi bất cứ thứ gì trên đó. Cả người dùng lẫn tác giả của trang web đều không thể có bất kỳ điều khiển nào đối với các phần tử của HTML trên trang web. Sau này, với những phiên bản mới hơn của những trình duyệt đã hỗ trợ một đặc tính gọi là HTML động. Trong phần này, chúng ta sẽ thảo luận về HTML động và một số những điểm mới lạ mà nó mang đến cho những nhà thiết kế web.

Thêm vào đó, phần này cũng thảo luận về những stylesheet (style sheet cách). Stylesheet là một đặc tính quan trọng có thể được dùng trong HTML động. Mặc dù trang Web không cần có một stylesheet, nhưng việc sử dụng một stylesheet sẽ mang lại những lợi ích nhất định. Chúng ta sẽ thảo luận về stylesheet như là một kĩ thuật và bằng cách nào để có thể sử dụng nó trong việc thiết kế và phát triển Web

DHTML

HTML động có thể được định nghĩa như là một phần mềm được sử dụng cho việc mô tả sự kết hợp giữa HTML, các stylesheet và ngôn ngữ script làm cho tài liệu trở nên sinh động.

Mọi thứ bắt đầu ra sao? Vào những ngày đầu, HTML được phát triển như một định dạng tài liệu được dùng để trao đổi thông tin trên Internet. Việc truyền tải dữ liệu nó độc lập với nền tảng(platform). Tuy nhiên, trọng tâm đã chuyển từ các vấn đề khoa học và hàn lâm qua các vấn đề của người dùng hằng ngày, những người hiện nay đang xem Internet như là nguồn thông tin và giải trí. Các trang web trở nên hấp dẫn và nhiều màu sắc hơn làm thu hút người dùng. Tuy nhiên, các dáng vẽ cơ bản và nội dung của những trang web vẫn cố định. Người phát triển rất ít hoặc không có sự điều khiển nào cả đối với một trang web khi nó được hiển thị. HTML vẫn còn tĩnh

Giới thiệu DHTML

Sự ra đời của lập trình script đã thêm vào phần động cho các trang web. Người dùng có thể tương tác với trang web. Tuy nhiên, một số hạn chế vẫn còn tồn tại. Bất kỳ sự xác nhận dữ liệu nào hoặc việc lập trình script đều phải được thực hiện trên máy chủ. Để thay đổi nội dung hoặc một kiểu của trang, thì trang đó phải được viết đè lên hoàn toàn. Bất cứ tương tác nào của người dùng cũng đều thông qua máy Web server.

Với mỗi phiên bản trình duyệt mới, lại thêm vào các đặc tính tốt hơn cho HTML. Ngày nay Internet và Netscape Navigator hỗ trợ một mô hình đối tượng tài liệu Document Object Model mà ở đó các phần tử HTML và các thẻ được coi như một đối tượng. Những đối tượng có những phương thức, thuộc tính và sự kiện có thể lập trình để điều khiển các hoạt động của chúng. Ví dụ, cú pháp thêm vào để thay đổi màu của văn bản trong phần tử phân đoạn

khi người dùng kích chuột lên nó.

Các script (là một chương trình nhỏ) có thể thực thi trong trình duyệt. Điều này có nghĩa là dữ liệu có thể được thao tác, định dạng và thay đổi một cách năng động ở máy khách (client) mà không cần quá nhiều sự hỗ trợ từ máy chủ. Tương tác của người dùng giờ đây có thể được xử lý bởi chính máy khách.

Chú ý: Một ứng dụng Client/Server được tách ra hai phần một là giao diện người dùng front-end client và phần back-end server. Client là một phần của ứng dụng, nó trình bày dữ liệu đối với người dùng. Thông thường Client giao diện người dùng không thực thi các chức năng của cơ sơ dữ liệu, thay vào đó, client gởi các yêu cầu dữ liệu đến một máy chủ server, định dạng và hiển thị kết quả. Vai trò của máy chủ server cung cấp xử lý hoặc thông tin đến cho client. Máy chủ cung cấp dữ liệu đến client, nhưng đôi khi, Máy chủ server có thể cần thực hiện một sốcông việc xử lý đem lại một kết quả dữ liệu yêu cầu. Ví dụ nếu một client yêu cầu về dữ liệu bán hàng cho một vùng cụ thể, Server cần thực hiện chính xác một số xử lý dữ liệu từ tập tất cả các dữ liệu và định dạng nó theo yêu cầu từ phía client.

Mỗi công ty Microsoft hay Netscape đều có cách triển trai HTML động riêng của họ. Microsoft tập trung vào dùng các Cascading Style Sheet (CSS). Chúng ta có thể dùng script để tương tác những phần tử CSS.

Netscape, ngược lại, dựa vào các phương thức dùng các tầng. Thẻ LAYER được dùng để cung cấp hầu hết các thuộc tính của HTML động.

Các đặc điểm của DHTML

DHTML không dừng lại ở một số phần mở rộng của HTML. Trong phần này sẽ thảo luận về các đặc điểm của DHTML và cách thức dùng nó để thêm vào những tính năng động cho trang web.

• Kiểu động (Dynamic Style)- Trong các phiên bản của HTML trước đây, nếu chúng ta muốn thay đổi kiểu hay nội dung của một trang web sau khi nó được hiển thị trong trình duyệt thì toàn bộ trang đó phải được nạp lại refresh. Điều đó có nghĩa là yêu cầu phải được gởi đến máy chủ thành một trang mới để hiển thị. Đối với người dùng thì đây là một qui trình rõ ràng. Tuy nhiên, nếu trang đó phải được nạp lại refresh thường xuyên sẽ tốn nhiều thời gian và làm cho máy chủ trở nên quá tải.

Trong HTML động, Cách làm này khác một chút. Bằng cách dùng các bảng kiểu style sheets, Chúng ta có thể xác định màu, kiểu hoặc kích cỡ của nội dung trang. Chúng ta có thể thay đổi kiểu của trang mà không cần gởi đến máy chủ Web server cho mỗi lần thêm vào các thẻ và thuộc tính. Điều đó có nghĩa là chúng ta có thể thay đổi màu, font, kích cỡ hoặc nội dung văn bản khi đáp lại những tương tác của người dùng. Trong HTML động, kiểu liên quan đến cách thức, định dạng xuất hiện trên trang web hơn là nội dung. Kiểu style bao gồm màu sắc, kiểu chữ, khoảng cách, thụt đầu dòng, định vị và xuất hiện của văn bản.

• Nội dung động (Dynamic Content)- Được hỗ trợ bởi Internet Explorer. Ở đây chúng ta có thể thay đổi chữ và hình ảnh trên trang web sau khi nó hiển thị. Chúng ta cũng có thể thay đổi nội dung của trang đó khi đáp lại dữ kiện nhập vào hay sự kiện người dùng kích chuột vào.

• Định vị (Positioning) - Các phiên bản của HTML trước đây, không kiểm soát được vị trí của một phần tử trên trang web. Theo đó vị trí chính xác của trang đó về mặt tọa độ thì không thể chỉ ra được. Việc định vị dành cho trình duyệt. HTML chỉ có thể mô tả nội dung và vị trí tương đối của các phần tử.

  Trong HTML động, Chúng ta có thể chỉ ra vị trí chính xác (tuyệt đối hay tương đối), mối quan hệ giữa tọa độ x và y. Một khi trang web được hiển thị, chúng ta có thể di chuyển các phần tử trên trang đó làm cho nó trở nên động.

  • Định vị tuyệt đối chỉ rõ vị trí chính xác theo các điểm pixels.
  • Định vi tương đối chỉ ra vi trí tương đối của các phần tử. Trình duyệt xử lý việc định vị hiện thời

  Đặc điểm việc định vị cũng cho phép chúng ta xác định thứ tự sắp xếp z-ordercủa các phần tử. Có nghĩa là các đối tượng này nằm chồng lên đối tượng khác.

• Liên kết dữ liệu (Data Binding)Trong HTML động, chúng ta có thể kết nối một cơ sở dữ liệu vào bảng của trang web. Nó được hỗ trợ bởi Internet Explorer. Khi trang được nạp lên, dữ liệu từ cơ sở dữ liệu trên máy chủ được hiển thị trong bảng. Dữ liệu có thể được sắp xếp, lọc và hiển thị cho phù hợp với yêu cầu.

• Downloadable Fonts (Có khả năng tải Font chữ)- Được Netscape hỗ trợ. Downloadable fonts là một đặt điểm cho phép ta chèn các font mà tùy chọn trên trang web. Chúng ta có thể gói font trong trang. Điều này đảm bảo rằng văn bản trong trang web đó luôn luôn hiển thị theo font mà ta chọn. Đây là đặc điểm quan trọng bởi vì thông thường nếu các font được chỉ ra không có trong máy của người dùng thì trình duyệt sẽ dùng font mặc định có sẵn. Điều này sẽ làm hủy bỏ mục đích chỉ ra kiểu font của bạn.

• ScriptingChúng ta có thể viết các script để thay đổi kiểu và nội dung của trang web. Script này được lồng vào trong trang web.

• Cấu trúc đối tượng (Object Structure) HTML động theo một cấu trúc đối tượng theo đó mỗi phần tử được đối xử như một đối tượng trong cấu trúc. Mỗi đối tượng có thể được truy cập và lập trình độc lập.