Chèn khung vào html. Vấn đề với khung. Ví dụ: Xóa đường viền giữa các khung
Xin chào các độc giả thân mến của trang blog. Hôm nay chúng ta sẽ nói về các khung trong HTML. Rõ ràng là chúng ta sẽ bắt đầu lại từ đầu, cụ thể là đây là loại động vật nào. Chúng ta cũng sẽ nói về hiện tại (Khung) và tương lai (Iframe) của các thành phần này bằng ngôn ngữ đánh dấu siêu văn bản Phiên bản hiện tại và trong tiêu chuẩn Html 5 mới với .
Ở cuối bài viết, sau miêu tả cụ thể quá trình tạo các khung tích hợp và cấu trúc cổ điển của chúng bằng mã Html (đã hiếm khi được sử dụng), chúng ta sẽ đề cập đến vấn đề về mức độ liên quan của việc xây dựng một trang web trên chúng, đồng thời thảo luận những cách có thểứng dụng của họ trong khoảng thời gian hiện tại bằng cách sử dụng ví dụ trên blog của tôi.
Nó là gì và Iframe khác với Frame như thế nào?
Nó là gì? Hóa ra chúng không chỉ có thể được sử dụng trên các trang web mà còn trong bất kỳ ứng dụng nào cho đến chương trình, nhưng chúng khác nhau ở chỗ cửa sổ của trang web hoặc ứng dụng sẽ được chia thành nhiều khu vực, mỗi khu vực sẽ tải một tài liệu riêng biệt. . Hơn nữa, các vùng khung này hoạt động độc lập với nhau.
Có lẽ ví dụ rõ ràng nhất về việc sử dụng chúng mà hầu hết các bạn đã gặp phải là cái gọi là tệp trợ giúp mà nhiều chương trình được cài đặt trên máy tính của bạn có.
Tệp có menu trợ giúp được tải vào cửa sổ bên trái và tài liệu tương ứng với mục menu đã chọn sẽ được hiển thị trong cửa sổ bên phải. Đáng chú ý là cấu trúc này cho phép bạn không tải lại tệp có menu vào cửa sổ bên trái khi mở tài liệu mới ở cửa sổ bên phải. Đây chính xác là những gì nó bao gồm Ưu điểm chính của việc sử dụng khung trong HTML.
Trên thực tế, tên của các phần tử này nên được hiểu là một cửa sổ độc lập. Với sự trợ giúp của khung, chúng ta có cơ hội chia một cửa sổ lớn thành nhiều mảnh, từ đó có thể đóng vai trò là bộ thu cho các tài liệu riêng biệt độc lập với nhau (trang, văn bản, hình ảnh, video, v.v.).
Cấu trúc khung được tạo ra trong ngôn ngữ đánh dấu siêu văn bản như thế nào? Nếu chúng ta nói về tiêu chuẩn Html 4.01 (theo phân loại), là tiêu chuẩn chính ở thời điểm hiện tại, thì ba phần tử được sử dụng cho việc này - Frame, Frameset và Noframes.
Iframe - khung tích hợp theo tiêu chuẩn Html 5
Nếu chúng ta nói về tiêu chuẩn Html 5 (tương lai của chúng tôi, một số thành phần đã được nhiều trình duyệt hỗ trợ), thì sẽ không còn các thẻ Frame, Frameset và Noframes nữa, cũng như cấu trúc khung cổ điển; một thẻ Iframe duy nhất (khung nhúng) mà chúng ta sẽ nói đến ở phần đầu, sau đó chúng ta sẽ chuyển sự chú ý sang sơ đồ cổ điển từ phiên bản 4.01, hiện đang thực sự được sử dụng.
Iframe, không giống như các nội dung cổ điển được thảo luận bên dưới, không yêu cầu thay thế thẻ Body bằng thẻ Frameset. Những thứ kia. thẻ này có thể được chèn vào các trang thông thường, chẳng hạn như bên trong một đoạn văn hoặc bất kỳ nơi nào khác. Về cốt lõi, thành phần này rất giống với thẻ Img mà chúng ta đã xem xét.
Nó nằm trong dòng với nội dung có thể thay thế được vì nó hoạt động giống hệt như phần tử nội tuyến, nhưng bên trong nó được hiển thị nội dung bên ngoài không liên quan. Chỉ có bốn phần tử như vậy trong ngôn ngữ HTML - Img, Iframe, Object và Embed. Do đó, anh hùng của chúng tôi ngụ ý sự hiện diện của một tệp bên ngoài sẽ được tải vào một khu vực có kích thước được đặt bằng cách sử dụng các thuộc tính của thẻ này.
Cái đó. Iframe là một phần tử chìm trong đó một đối tượng bên ngoài (chẳng hạn như video) được tải vào. Và để chỉ ra đường dẫn đến tệp này sẽ được tải trên trang, hãy sử dụng thuộc tính Src đặc biệt. Nhưng không giống như Img, phần tử Iframe được ghép nối, tức là. cũng có thẻ đóng:
TRONG trong ví dụ này hiển thị đầu ra trên trang video Youtube bằng Iframe. Để giới hạn diện tích của khung (cửa sổ) nơi nó sẽ được tải tập tin bên ngoài, thuộc tính được cung cấp Chiều rộng và chiều cao, có giá trị được chỉ định bằng pixel:
Những thứ kia. thẻ này tạo ra một khu vực mà một số đối tượng bên ngoài được tải vào đó (không quan trọng nó đến từ trang web của bạn hay từ một tài nguyên khác). Chiều rộng và chiều cao của khu vực được chỉ định bằng Chiều rộng và Chiều cao, đồng thời thuộc tính Src chỉ định đường dẫn đến đối tượng này.
Phần tử Iframe kế thừa tất cả các thuộc tính này từ các thẻ nội tuyến tương tự có nội dung được thay thế (chẳng hạn như Img đã được đề cập ở trên). Chà, anh ấy cũng lấy thuộc tính từ những bức ảnh Hspace và Vspace, cho phép bạn đặt thụt lề từ đường viền của khung đến văn bản bao quanh nó.
Điều quan trọng nữa là việc căn chỉnh khung tích hợp được thực hiện theo cách giống hệt như chúng ta có thể thấy khi nghiên cứu hình ảnh trong Html - . Tất cả đều giống nhau Căn chỉnh, nhưng đối với thẻ Iframe có các giá trị có thể là Bottom, Top, Middle, Left và Right.
Nhưng phần tử này cũng lấy một số thuộc tính từ thẻ Frame từ cấu trúc khung cổ điển mà chúng ta sẽ nói rất chi tiết bên dưới trong văn bản. Các thuộc tính này bao gồm Tên, giá trị của nó có thể được sử dụng làm giá trị để tài liệu bạn cần khi nhấp vào liên kết sẽ mở ra trong cửa sổ của khung này (đọc thêm bên dưới).
Cũng trong Iframe, thuộc tính Frameborder được di chuyển từ thẻ Frame, chỉ có hai giá trị - 0 (khung xung quanh khung không được hiển thị) hoặc 1 (khung hiển thị). Giá trị mặc định là Frameborder=1, vì vậy để xóa nó bạn cần nhập Frameborder="0":
Thuộc tính Scrolling cũng đã được chuyển từ Frame sang phần tử này, có giá trị mặc định là Auto - các thanh cuộn trong khung sẽ xuất hiện khi cần khi nội dung lớn hơn kích thước của cửa sổ dự định hiển thị nó.
Chà, thuộc tính Marginwidth và Marginheight cũng được chuyển từ phần tử Frame. Chúng sẽ được thảo luận chi tiết bên dưới trong văn bản, nhưng tóm lại - chúng cho phép bạn đặt vết lõm theo chiều rộng và chiều cao từ các cạnh của khung đến nội dung được đặt trong đó.
Như tôi đã đề cập, một ví dụ rõ ràng Việc sử dụng iframe là:
Bằng cách chèn Iframe trực tiếp vào trang web, bạn sẽ nhận được đầu ra của video từ YouTube. Chúng tôi kết luận rằng phần tử này là sự kết hợp giữa các phần tử nội tuyến với nội dung được thay thế và trên thực tế là các khung cổ điển mà bây giờ chúng ta sẽ thảo luận.
Các khung dựa trên thẻ Frame và Frameset - cấu trúc của chúng
Vì vậy, việc tạo cấu trúc khung cổ điển bắt đầu bằng những gì bạn viết trong mã Html thay vì thẻ Nội dung mở và đóng, thường phải có trong bất kỳ tài liệu nào, thay thế nó bằng một vùng chứa dựa trên phần tử Bộ khung.
Điểm cơ bản là phần tử Body không thể được sử dụng trong trường hợp này - Body (đối với tài liệu thông thường) hoặc Frameset (khi tạo cấu trúc khung tài liệu):
Mỗi khung mà chúng ta tạo bên trong khung chính được tạo bằng cách sử dụng một phần tử riêng biệt Khung. Thẻ này là thẻ duy nhất và trong đó chúng tôi đặt đường dẫn đến tài liệu sẽ được tải vào cửa sổ này.
Yếu tố thứ ba mà chúng ta chưa đề cập đến là Noframe. Nó được ghép nối và cho phép bạn viết một số văn bản bên trong, văn bản này sẽ được trình duyệt xử lý và hiển thị trên trang web chỉ khi trình duyệt này (hoặc thiết bị hiển thị khác) không hỗ trợ khung. Điều này có thể xảy ra, chẳng hạn như nếu bạn đang sử dụng trình duyệt dành cho thiết bị di động.
Thông thường, trong Noframes, họ không chỉ thêm thông tin về tình hình hiện tại không thể xử lý cấu trúc khung mà còn thêm khả năng truy cập các trang khác nơi bạn có thể tiếp tục làm việc mà không cần sử dụng chúng. Thật khó để nói bất cứ điều gì khác về anh ấy, vì vậy hãy tiếp tục.
Hóa ra phần tử Frameset, được sử dụng thay cho thẻ Body, chiếm toàn bộ không gian được phân bổ cho khu vực xem và các khung sẽ được tạo bên trong khu vực này bằng cách sử dụng các phần tử Frame riêng lẻ. Về vấn đề này, câu hỏi được đặt ra - làm thế nào để phân chia khu vực xem giữa các cửa sổ riêng biệt hay nói cách khác là làm thế nào để đặt kích thước của từng cửa sổ.
Điều này được thực hiện bằng cách thêm các thuộc tính thích hợp vào phần tử Frameset. Có hai người trong số họ - Cols và hàng. Cols thiết lập việc phân chia một cửa sổ lớn thành các khung hoặc cột dọc và Rows cho phép bạn chia nó thành các cửa sổ hoặc hàng ngang.
Tạo cấu trúc dựa trên Frameset và các thuộc tính Cols và Rows của nó
Giá trị cho Cols và Rows của thẻ Html Frameset là các số được phân tách bằng dấu phẩy (không có dấu cách). Những con số này đặt ra tỷ lệ của các cửa sổ mà chúng ta muốn có được. Vì vậy, dù viết Cols hay Rows bao nhiêu cách nhau bằng dấu phẩy thì số khung mà chúng ta có sẽ là kết quả.
Ví dụ: sử dụng ký hiệu này, chúng ta sẽ có ba cột dọc có chiều rộng tương ứng với tỷ lệ 2:5:3.