HTML – Khung, khung HTML được sử dụng để chia cửa sổ trình duyệt của bạn thành nhiều phần trong đó mỗi phần có thể tải một tài liệu HTML riêng biệt. Tập hợp các khung trong br

Bạn đang xem: ví dụ mã khung html

HTML – Khung

Quảng cáo

Khung HTML được sử dụng để chia cửa sổ trình duyệt của bạn thành nhiều phần trong đó mỗi phần có thể tải một tài liệu HTML riêng biệt. Tập hợp các khung trong cửa sổ trình duyệt được gọi là bộ khung. Cửa sổ được chia thành các khung theo cách tương tự như cách sắp xếp các bảng: thành hàng và cột.

Nhược điểm của Khung

Có một số hạn chế khi sử dụng khung, vì vậy, bạn không nên sử dụng khung trong các trang web của mình –

  • Một số thiết bị nhỏ hơn thường không thể đối phó với khung hình vì màn hình của chúng không đủ lớn để chia nhỏ.

  • Đôi khi, trang của bạn sẽ được hiển thị khác nhau trên các máy tính khác nhau do độ phân giải màn hình khác nhau.

  • Nút của trình duyệt có thể không hoạt động như người dùng mong đợi.

  • Vẫn còn một số trình duyệt không hỗ trợ công nghệ khung.

Tạo khung

Để sử dụng khung trên trang, chúng tôi sử dụng & lt; khung & gt; thay vì & lt; body & gt; nhãn. & Lt; bộ khung & gt; định nghĩa, cách chia cửa sổ thành các khung. Thuộc tính hàng của & lt; bộ khung & gt; thẻ xác định khung ngang và thuộc tính cols xác định khung dọc. Mỗi khung được biểu thị bằng & lt; khung & gt; và nó xác định tài liệu HTML nào sẽ mở vào khung.

Ghi chú – & lt; khung & gt; không dùng nữa trong HTML5. Không sử dụng phần tử này.

Ví dụ

Sau đây là ví dụ để tạo ba khung ngang –

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; đầu & gt;
      & lt; title & gt; Khung HTML & lt; / title & gt;
   & lt; / head & gt;

   & lt; bộ khung hàng = "10%, 80%, 10%" & gt;
      & lt; frame name = "top" src = "/html/top_frame.htm" / & gt;
      & lt; frame name = "main" src = "/html/main_frame.htm" / & gt;
      & lt; frame name = "bottom" src = "/html/bottom_frame.htm" / & gt;
   
      & lt; noframes & gt;
         & lt; body & gt; Trình duyệt của bạn không hỗ trợ khung. & lt; / body & gt;
      & lt; / noframes & gt;
      
   & lt; / bộ khung & gt;
   
& lt; / html & gt;

Điều này sẽ tạo ra kết quả sau –

Ví dụ

Hãy đặt ví dụ trên như sau, ở đây chúng tôi đã thay thế thuộc tính row bằng cols và thay đổi chiều rộng của chúng. Thao tác này sẽ tạo ra tất cả ba khung hình theo chiều dọc –

& lt;! DOCTYPE html & gt;
& lt; html & gt;
   
   & lt; đầu & gt;
      & lt; title & gt; Khung HTML & lt; / title & gt;
   & lt; / head & gt;
   
   & lt; frameset cols = "25%, 50%, 25%" & gt;
      & lt; frame name = "left" src = "/html/top_frame.htm" / & gt;
      & lt; frame name = "center" src = "/html/main_frame.htm" / & gt;
      & lt; frame name = "right" src = "/html/bottom_frame.htm" / & gt;
      
      & lt; noframes & gt;
         & lt; body & gt; Trình duyệt của bạn không hỗ trợ khung. & lt; / body & gt;
      & lt; / noframes & gt;
   & lt; / bộ khung & gt;
   
& lt; / html & gt;

Điều này sẽ tạo ra kết quả sau –

& lt; bộ khung & gt; Thuộc tính thẻ

Sau đây là các thuộc tính quan trọng của & lt; bộ khung & gt; thẻ –

Sr.No
Thuộc tính & amp; Sự mô tả

1

cols

Chỉ định số lượng cột được chứa trong bộ khung và kích thước của mỗi cột. Bạn có thể chỉ định chiều rộng của mỗi cột theo một trong bốn cách sau –

Giá trị tuyệt đối tính bằng pixel. Ví dụ: để tạo ba khung dọc, hãy sử dụng.

Một phần trăm của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, hãy sử dụng.

Xem Thêm  CHÈN SQL: Cách Chèn Một hoặc Nhiều Hàng vào Bảng - cách chèn vào bảng sql

Sử dụng ký tự đại diện. Ví dụ, để tạo ba khung dọc, hãy sử dụng. Trong trường hợp này, ký tự đại diện chiếm phần còn lại của cửa sổ.

Là chiều rộng tương đối của cửa sổ trình duyệt. Ví dụ, để tạo ba khung dọc, hãy sử dụng. Đây là một sự thay thế cho tỷ lệ phần trăm. Bạn có thể sử dụng chiều rộng tương đối của cửa sổ trình duyệt. Ở đây cửa sổ được chia thành sáu phần: cột đầu tiên chiếm một nửa cửa sổ, cột thứ hai chiếm một phần ba và cột thứ ba chiếm một phần sáu.

2

hàng

Thuộc tính này hoạt động giống như thuộc tính cols và nhận các giá trị giống nhau, nhưng nó được sử dụng để chỉ định các hàng trong bộ khung. Ví dụ, để tạo hai khung ngang, hãy sử dụng. Bạn có thể chỉ định chiều cao của mỗi hàng theo cách tương tự như đã giải thích ở trên cho các cột.

3

biên giới

Thuộc tính này chỉ định chiều rộng của đường viền của mỗi khung hình tính bằng pixel. Ví dụ: border = “5”. Giá trị bằng 0 có nghĩa là không có đường viền.

4

trình sắp xếp khung hình

Thuộc tính này chỉ định xem có nên hiển thị đường viền ba chiều giữa các khung hay không. Thuộc tính này nhận giá trị 1 (có) hoặc 0 (không). Ví dụ: frameborder = “0” chỉ định không có đường viền.

5

khoảng cách giữa các khung hình

Thuộc tính này chỉ định lượng không gian giữa các khung trong một bộ khung. Điều này có thể nhận bất kỳ giá trị số nguyên nào. Ví dụ: framespacing = “10” nghĩa là phải có khoảng cách 10 pixel giữa mỗi khung hình.

Khung & lt; & gt; Thuộc tính thẻ

Sau đây là các thuộc tính quan trọng của & lt; frame & gt; thẻ –

Sr.No
Thuộc tính & amp; Sự mô tả

1

src

Thuộc tính này được sử dụng để cung cấp tên tệp sẽ được tải trong khung. Giá trị của nó có thể là bất kỳ URL nào. Ví dụ: src = “/html/top_frame.htm” sẽ tải một tệp HTML có sẵn trong thư mục html.

2

tên

Thuộc tính này cho phép bạn đặt tên cho khung. Nó được sử dụng để chỉ ra khung mà tài liệu sẽ được tải vào. Điều này đặc biệt quan trọng khi bạn muốn tạo liên kết trong một khung tải các trang vào một khung khác, trong trường hợp đó, khung thứ hai cần có tên để tự xác định là mục tiêu của liên kết.

3

frameborder

Thuộc tính này chỉ định xem các đường viền của khung đó có được hiển thị hay không; nó ghi đè giá trị đã cho trong thuộc tính frameborder trên & lt; bộ khung & gt; nếu một thẻ được cung cấp và thẻ này có thể nhận các giá trị 1 (có) hoặc 0 (không).

4

độ rộng lề

Thuộc tính này cho phép bạn chỉ định chiều rộng của khoảng trống giữa bên trái và bên phải của các đường viền của khung và nội dung của khung. Giá trị được tính bằng pixel. Ví dụ: marginwidth = “10”.

5

marginheight

Thuộc tính này cho phép bạn chỉ định chiều cao của khoảng trống giữa phần trên và phần dưới của đường viền và nội dung của khung. Giá trị được tính bằng pixel. Ví dụ: marginheight = “10”.

6

không cỡ nào

Theo mặc định, bạn có thể thay đổi kích thước bất kỳ khung nào bằng cách nhấp và kéo trên các đường viền của khung. Thuộc tính noresize ngăn người dùng có thể thay đổi kích thước khung. Ví dụ: noresize = “noresize”.

7

cuộn

Thuộc tính này kiểm soát sự xuất hiện của các thanh cuộn xuất hiện trên khung. Điều này nhận các giá trị “có”, “không” hoặc “tự động”. Ví dụ: scrolling = “no” có nghĩa là nó không được có thanh cuộn.

Xem Thêm  Nhóm theo các hàm tổng hợp trong SQL - tổng hợp nhóm theo sql

số 8

longdesc

Thuộc tính này cho phép bạn cung cấp liên kết đến một trang khác có chứa mô tả dài về nội dung của khung. Ví dụ longdesc = “framedescription.htm”

Hỗ trợ trình duyệt cho khung

Nếu người dùng đang sử dụng bất kỳ trình duyệt cũ nào hoặc bất kỳ trình duyệt nào không hỗ trợ khung thì & lt; noframes & gt; phần tử sẽ được hiển thị cho người dùng.

Vì vậy, bạn phải đặt & lt; body & gt; phần tử bên trong & lt; noframes & gt; vì & lt; bộ khung & gt; phần tử được cho là thay thế & lt; body & gt; , nhưng nếu trình duyệt không hiểu & lt; bộ khung & gt; thì phần tử này sẽ hiểu những gì bên trong & lt; body & gt; phần tử được chứa trong & lt; noframes & gt; phần tử.

Bạn có thể đưa ra một số thông điệp hay cho người dùng của bạn có trình duyệt cũ. Ví dụ, như trong ví dụ trên.

Tên và thuộc tính mục tiêu của khung

Một trong những cách sử dụng khung phổ biến nhất là đặt các thanh điều hướng vào một khung và sau đó tải các trang chính vào một khung riêng biệt.

Hãy xem ví dụ sau trong đó tệp test.htm có mã sau –

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; đầu & gt;
      & lt; title & gt; Khung Mục tiêu HTML & lt; / title & gt;
   & lt; / head & gt;

   & lt; frameset cols = "200, *" & gt;
      & lt; frame src = "/html/menu.htm" name = "menu_page" / & gt;
      & lt; frame src = "/html/main.htm" name = "main_page" / & gt;
      
      & lt; noframes & gt;
         & lt; body & gt; Trình duyệt của bạn không hỗ trợ khung. & lt; / body & gt;
      & lt; / noframes & gt;
   & lt; / bộ khung & gt;

& lt; / html & gt;

Ở đây, chúng tôi đã tạo hai cột để lấp đầy hai khung. Khung đầu tiên rộng 200 pixel và sẽ chứa thanh menu điều hướng do tệp menu.htm triển khai. Cột thứ hai lấp đầy không gian còn lại và sẽ chứa phần chính của trang và nó được thực hiện bởi tệp main.htm . Đối với tất cả ba liên kết có sẵn trong thanh menu, chúng tôi đã đề cập đến khung đích là main_page , vì vậy bất cứ khi nào bạn nhấp vào bất kỳ liên kết nào trong thanh menu, liên kết có sẵn sẽ mở ra trong trang chính.

Sau đây là nội dung của tệp menu.htm

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; body bgcolor = "# 4a7d49" & gt;
      & lt; a href = "http://www.google.com" target = "main_page" & gt; Google & lt; / a & gt;
      & lt; br / & gt;
      & lt; br / & gt;
      
      & lt; a href = "http://www.microsoft.com" target = "main_page" & gt; Microsoft & lt; / a & gt;
      & lt; br / & gt;
      & lt; br / & gt;
      
      & lt; a href = "http://news.bbc.co.uk" target = "main_page" & gt; BBC News & lt; / a & gt;
   & lt; / body & gt;

& lt; / html & gt;

Sau đây là nội dung của tệp main.htm –

& lt;! DOCTYPE html & gt;
& lt; html & gt;

   & lt; body bgcolor = "# b5dcb3" & gt;
      & lt; h3 & gt; Đây là trang chính và nội dung từ bất kỳ liên kết nào sẽ được hiển thị tại đây. & lt; / h3 & gt;
      & lt; p & gt; Vì vậy, bây giờ hãy nhấp vào bất kỳ liên kết nào và xem kết quả. & lt; / p & gt;
   & lt; / body & gt;

& lt; / html & gt;

Khi chúng tôi tải tệp test.htm , tệp sẽ tạo ra kết quả sau –

Bây giờ, bạn có thể thử nhấp vào các liên kết có sẵn trong bảng điều khiển bên trái và xem kết quả. Cũng có thể nhận một trong các giá trị sau –

Sr.No
Tùy chọn & amp; Sự mô tả

1

_ chính mình

Tải trang vào khung hiện tại.

Xem Thêm  Thêm các phần tử vào Mảng trong Java - thêm mục vào mảng

2

_blank

Tải một trang vào cửa sổ trình duyệt mới. Mở một cửa sổ mới.

3

_parent

Tải trang vào cửa sổ chính, trong trường hợp chỉ có một bộ khung là cửa sổ trình duyệt chính.

4

_top

Tải trang vào cửa sổ trình duyệt, thay thế mọi khung hiện tại.

5

khung mục tiêu

Tải trang vào khung mục tiêu được đặt tên.

Quảng cáo


Xem thêm những thông tin liên quan đến chủ đề ví dụ mã khung html

HTML & CSS Full Course – Beginner to Pro (2022)

  • Tác giả: SuperSimpleDev
  • Ngày đăng: 2022-02-05
  • Đánh giá: 4 ⭐ ( 3017 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this full course, we learn how to build websites with HTML and CSS, and get started as a software engineer.
    Exercise solutions: https://supersimple.dev/courses/html-css-courseexercises
    Copy of the code: https://supersimple.dev/courses/html-css-coursecode
    HTML and CSS reference: https://supersimple.dev/html

    Lessons:
    0:00 Intro
    1:02 1. HTML Basics
    17:42 2. CSS Basics
    44:39 3. Hovers, Transitions, Shadows
    1:03:10 4. Chrome DevTools & CSS Box Model
    1:17:30 5. Text Styles
    1:52:18 6. The HTML Structure
    2:11:08 7. Images and Text Boxes
    2:25:42 8. CSS Display Property
    2:34:58 9. The div Element
    2:46:55 10. Nested Layouts Technique
    3:16:58 11. CSS Grid
    3:43:58 12. Flexbox
    4:15:21 13. Nested Flexbox
    4:44:36 14. CSS Position
    5:07:14 15. Position Absolute and Relative
    5:33:49 16. Finish the Project
    6:07:46 17. More CSS Features
    6:30:21 Outro

    Additional Information:
    This HTML CSS full course is a series of HTML CSS tutorials, teaching the major skills that we need to create complex websites. Each HTML CSS tutorial builds on a project and provides some HTML CSS exercises to practice what we learned. By the end, we’ll learn the basics of web development and we’ll be on our way to becoming a web developer and software engineer.

    htmltutorial csstutorial htmlcssfullcourse html css tutorial fullcourse course htmltutorial csstutorial htmlcsstutorial htmlfullcourse cssfullcourse webdevelopment advancedhtmltutorial advancedcsstutorial coding codingtutorial softwareengineer softwareengineering learntocode supersimpledev

Frame trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 8848 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Frame trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

HTML – Khung

  • Tác giả: isolution.pro
  • Đánh giá: 5 ⭐ ( 2810 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khung HTML được sử dụng để chia cửa sổ trình duyệt của bạn thành nhiều phần trong đó mỗi phần có thể tải một tài liệu HTML riêng biệt. Tập hợp các khung trong cửa sổ trình duyệt được gọi là bộ khung. Cửa sổ được chia thành các khung theo cách tương tự như các bảng được tổ chức:…

F8 – Học Lập Trình Để Đi Làm

  • Tác giả: fullstack.edu.vn
  • Đánh giá: 3 ⭐ ( 4667 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng biểu mẫu và khung trong HTML

  • Tác giả: voer.edu.vn
  • Đánh giá: 4 ⭐ ( 9817 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng biểu mẫu và khung trong HTML (giáo trình – tài liệu – học liệu từ VOER)

Ví dụ về khung của một trang HTML5

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 3137 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ về khung của một trang HTML5.

Chức năng khung mã HTML, sử dụng để thêm thống kê truy cập

  • Tác giả: webmienphi.vn
  • Đánh giá: 5 ⭐ ( 6339 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chức năng khung mã HTML, sử dụng để thêm thống kê truy cập

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php