Làm việc với các thành phần HTML

** Tổng quan về thành phần HTML**

HTML, hay Ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo các trang web. Trình duyệt web trình bày mã HTML ở định dạng dễ đọc hơn.

Khi sinh viên nhìn thấy văn bản và hình ảnh trong khóa học của bạn, họ đang nhìn thấy mã HTML được trình duyệt của họ định dạng và trình bày. Để biết thêm thông tin về HTML

Các thành phần HTML

Các thành phần HTML là các khối xây dựng cơ bản của nội dung khóa học của bạn. Bạn sử dụng các thành phần HTML để thêm và định dạng văn bản, liên kết, hình ảnh, v.v. Bạn có thể làm việc với các thành phần HTML của mình trong trình chỉnh sửa “trực quan” hoặc WYSIWYG ẩn chi tiết mã HTML hoặc trong trình chỉnh sửa “thô” yêu cầu bạn đánh dấu nội dung của mình.

Ghi chú

Xem lại việc phát triển khóa học của bạn và sử dụng các phương pháp hay nhất để đánh dấu HTML trước khi bạn bắt đầu làm việc với các thành phần HTML.

Các tùy chọn để chỉnh sửa các thành phần HTML

Bạn có thể sử dụng hai giao diện chỉnh sửa khác nhau để làm việc với một thành phần HTML.

Trình chỉnh sửa trực quan

Với trình chỉnh sửa trực quan, bạn tạo, chỉnh sửa và định dạng nội dung trong giao diện giống như xử lý văn bản mà không cần sử dụng trực tiếp đánh dấu HTML. Với trình chỉnh sửa trực quan, bạn có thể dễ dàng định dạng nội dung của mình và thêm liên kết và hình ảnh. Trình chỉnh sửa trực quan bao gồm một tùy chọn HTML để bạn xem lại đánh dấu HTML và thực hiện các thay đổi định dạng nhỏ cho nội dung của bạn. Tuy nhiên, tùy chọn HTML này không cung cấp khả năng kiểm soát chi tiết mà bạn có thể nhận được với trình chỉnh sửa HTML thô và không hỗ trợ định dạng hoặc tập lệnh tùy chỉnh.

Nếu bạn thêm một thành phần HTML và chọn Văn bản , khi bạn chọn Chỉnh sửa , trình chỉnh sửa trực quan sẽ mở theo mặc định.

Trình chỉnh sửa HTML thô

Nếu bạn muốn đánh dấu nội dung của mình trực tiếp bằng đánh dấu HTML, bạn có thể sử dụng trình chỉnh sửa HTML thô. Nếu bạn cần bao gồm định dạng hoặc tập lệnh tùy chỉnh trong nội dung của mình, bạn phải sử dụng trình chỉnh sửa HTML thô. Nếu bạn thêm một thành phần HTML và chọn HTML thô, khi bạn chọn Chỉnh sửa , trình chỉnh sửa HTML thô sẽ mở theo mặc định. Bạn có thể chuyển đổi qua lại giữa hai giao diện chỉnh sửa này bất kỳ lúc nào. Để biết thêm thông tin, hãy xem Đặt trình chỉnh sửa cho một thành phần HTML.

Ghi chú:

Nếu bạn sao chép văn bản từ một nguồn khác và dán nó vào trình chỉnh sửa HTML trực quan hoặc thô, hãy nhớ đọc kỹ kết quả. Một số ứng dụng tự động thay đổi dấu ngoặc kép và dấu nháy đơn từ phiên bản "thẳng" sang phiên bản "thông minh" hoặc "xoăn". Cả hai trình soạn thảo đều yêu cầu dấu ngoặc kép và dấu nháy đơn "thẳng".

Đặt Trình chỉnh sửa cho Thành phần HTML

Thêm hoặc định vị thành phần HTML trong khóa học của bạn.
Chọn Chỉnh sửa , sau đó chọn Cài đặt.
Chọn Trực quan hoặc Thô.
Chọn Lưu , sau đó mở lại thành phần để sử dụng trình chỉnh sửa mới.

Cảnh báo

Nếu bạn làm việc với nội dung trong trình chỉnh sửa HTML thô, sau đó chuyển sang trình chỉnh sửa trực quan, HTML tùy chỉnh có thể bị mất. Nếu bạn cần tạo HTML tùy chỉnh, chúng tôi khuyên bạn nên bắt đầu bằng cách sử dụng trình chỉnh sửa trực quan, sau đó chuyển sang trình chỉnh sửa HTML thô khi bạn đã sẵn sàng thêm HTML tùy chỉnh

Trình chỉnh sửa trực quan

Trình chỉnh sửa trực quan cung cấp giao diện “những gì bạn thấy là những gì bạn nhận được” (WYSIWYG) cho phép bạn định dạng văn bản bằng cách chọn các tùy chọn ở đầu trình chỉnh sửa. Hình ảnh sau đây hiển thị chú thích cho các tùy chọn chỉnh sửa và theo sau là mô tả.

Chọn một kiểu định dạng cho văn bản đã chọn, chẳng hạn như đoạn văn, được định dạng sẵn (monospace) hoặc cấp tiêu đề.
Chọn họ phông chữ cho văn bản đã chọn, chẳng hạn như Arial, Courier New hoặc Times New Roman.
Định dạng văn bản đã chọn bằng chữ in đậm hoặc xóa định dạng này. Trình chỉnh sửa chèn thẻ < strong> xung quanh văn bản đã chọn.
Định dạng chữ nghiêng đã chọn hoặc xóa định dạng này. Trình chỉnh sửa chèn các thẻ < em> xung quanh văn bản đã chọn.
Gạch chân văn bản đã chọn hoặc xóa định dạng này. Trình chỉnh sửa đưa văn bản đã chọn vào thẻ < span style = "text-decoration: underline;">
Thay đổi màu của văn bản đã chọn. Trình chỉnh sửa bao gồm văn bản đã chọn trong thẻ < span style = "color: color-hex-code;">.
Định dạng văn bản đã chọn dưới dạng một khối mã hoặc xóa định dạng này. Trình chỉnh sửa chèn các thẻ < code> xung quanh văn bản đã chọn, sau đó được hiển thị bằng phông chữ monospace.
Căn chỉnh văn bản và hình ảnh sang trái. Trình chỉnh sửa thêm style = "text-align: left;" vào các thẻ < p> bao quanh văn bản.
Căn giữa văn bản và hình ảnh. Trình chỉnh sửa thêm style = "text-align: center;" vào các thẻ < p> bao quanh văn bản.
Căn chỉnh văn bản và hình ảnh ở bên phải. Trình chỉnh sửa thêm style = "text-align: right;" vào các thẻ < p> bao quanh văn bản.
Căn đều văn bản và hình ảnh. Trình chỉnh sửa thêm style = "text-align: justify;" vào các thẻ < p> bao quanh văn bản.
Tạo danh sách có dấu đầu dòng hoặc xóa định dạng này. Trình chỉnh sửa sẽ chèn các thẻ < ul> xung quanh văn bản đã chọn và đặt mỗi đoạn trong thẻ < li>.
Tạo danh sách được đánh số hoặc xóa định dạng này. Trình chỉnh sửa chèn các thẻ < ol> xung quanh văn bản đã chọn và đặt mỗi đoạn trong thẻ < li>.
Giảm và tăng độ thụt lề của đoạn văn đã chọn.
Định dạng đoạn văn đã chọn dưới dạng trích dẫn khối. Trình soạn thảo chèn các thẻ < blockquote> xung quanh văn bản đã chọn, sau đó được hiển thị dưới dạng một đoạn văn riêng biệt trong phông chữ monospace.
Tạo liên kết siêu văn bản từ văn bản đã chọn. Để biết thêm thông tin, hãy xem Thêm liên kết trong thành phần HTML.
Xóa một liên kết siêu văn bản khỏi văn bản đã chọn.
Chèn một hình ảnh vào con trỏ. Để biết thêm thông tin, hãy xem Thêm hình ảnh vào thành phần HTML.
Xem lại đánh dấu HTML.

Ghi chú

Các cấp tiêu đề có sẵn trong trình soạn thảo thành phần HTML bắt đầu bằng tiêu đề 3**( <h3>)**. Các thành phần HTML là một phần của một trang hoàn chỉnh và các phần tử bên ngoài thành phần HTML sử dụng cấp tiêu đề 1 và 2 theo mặc định. Bởi vì các công cụ như trình đọc màn hình sử dụng các cấp tiêu đề để điều hướng qua các trang, việc sử dụng các cấp tiêu đề 1 hoặc 2 bên trong một thành phần HTML có thể ảnh hưởng đến chức năng của các công cụ này.

Xem lại Đánh dấu HTML trong Trình chỉnh sửa trực quan

Để xem lại đánh dấu HTML được thêm vào nội dung trong trình chỉnh sửa trực quan, hãy chọn HTML từ thanh công cụ của trình chỉnh sửa trực quan. Trình chỉnh sửa mã nguồn HTML sẽ mở ra.

Bạn có thể chỉnh sửa văn bản và đánh dấu HTML trong trình chỉnh sửa này. Tuy nhiên, bạn không thể thêm các kiểu hoặc tập lệnh tùy chỉnh trong trình chỉnh sửa này. Sử dụng trình chỉnh sửa HTML thô để thay thế.

Chọn OK để quay lại trình chỉnh sửa trực quan. Trình chỉnh sửa trực quan cố gắng sửa mọi vấn đề với đánh dấu mà bạn đã nhập. Ví dụ: nếu bạn không cung cấp thẻ đóng đoạn văn, trình chỉnh sửa sẽ thêm thẻ cho bạn.

Sau đó, bạn có thể tiếp tục làm việc trong trình chỉnh sửa trực quan.

Cảnh báo

Việc chọn OK trong trình chỉnh sửa mã nguồn không lưu các thay đổi của bạn đối với thành phần HTML. Để lưu các thay đổi của bạn và đóng thành phần, hãy chọn Lưu trong trình chỉnh sửa trực quan. Nếu bạn chọn Hủy, những thay đổi bạn đã thực hiện trong trình chỉnh sửa mã nguồn HTML sẽ bị hủy.

Trình chỉnh sửa HTML thô

Trình soạn thảo HTML thô là một trình soạn thảo văn bản. Nó không cung cấp một thanh công cụ với các tùy chọn định dạng.

Khi bạn sử dụng trình soạn thảo này, bạn phải cung cấp HTML hợp lệ. Trình chỉnh sửa HTML thô không xác thực mã HTML của bạn. Nếu bạn sử dụng trình soạn thảo này, bạn nên kiểm tra kỹ lưỡng nội dung HTML trong khóa học của mình.

Quan trọng

Khi bạn thêm tiêu đề vào một thành phần HTML, hãy đảm bảo rằng bạn chỉ sử dụng tiêu đề cấp 3 <h3> đến tiêu đề cấp 6 <h6>. Các thành phần HTML là một phần của một trang hoàn chỉnh và các phần tử bên ngoài thành phần HTML sử dụng cấp tiêu đề 1 và 2 theo mặc định. Bởi vì các công cụ như trình đọc màn hình sử dụng các cấp tiêu đề để điều hướng qua các trang, việc sử dụng các cấp tiêu đề 1 hoặc 2 bên trong một thành phần HTML có thể ảnh hưởng đến chức năng của các công cụ này.

__Tạo một thành phần HTML

Trong Thêm thành phần mới , hãy chọn HTML.
Chọn mẫu. Phần còn lại của các hướng dẫn này giả định rằng bạn đã chọn Văn bản, tạo thành phần HTML trống với trình chỉnh sửa trực quan được chọn. Thành phần HTML trống xuất hiện ở cuối đơn vị.
Trong thành phần, chọn Chỉnh sửa. Thành phần HTML mở trong trình chỉnh sửa trực quan.
Nhập và định dạng nội dung của bạn.
Bạn có thể xem lại đánh dấu HTML. Để nhập tên hiển thị cho thành phần, hãy chọn Cài đặt , sau đó nhập văn bản vào trường Tên hiển thị. Mỗi mẫu HTML cung cấp một tên hiển thị mặc định. Thay đổi mặc định thành tên hiển thị mô tả, duy nhất có thể giúp bạn và người học của bạn xác định nội dung khóa học một cách nhanh chóng và chính xác. Nếu bạn xóa tên hiển thị mặc định và không nhập tên nhận dạng của riêng mình, nền tảng sẽ hiển thị "Văn bản" làm tên của thành phần. Để quay lại trình chỉnh sửa trực quan, hãy chọn Trình chỉnh sửa.
Chọn Lưu.

Khi bạn sử dụng trình chỉnh sửa trực quan, bạn cũng có thể thực hiện các tác vụ sau:

Thêm một liên kết trong một thành phần HTML
Thêm hình ảnh vào thành phần HTML
Nhập mã LaTeX vào một thành phần HTML

Mẫu thành phần HTML

Khi bạn tạo một thành phần HTML, bạn chọn một trong các mẫu sau:

Bản văn
Sự thông báo
Công cụ IFrame
HTML thô

Theo mặc định, mẫu HTML thô sử dụng trình soạn thảo HTML thô. Tất cả các mẫu khác sử dụng trình chỉnh sửa trực quan theo mặc định. Bạn có thể chuyển đổi giữa các trình chỉnh sửa trong bất kỳ thành phần HTML nào. Để biết thêm thông tin, hãy xem Đặt trình chỉnh sửa cho một thành phần HTML.

Thêm một liên kết trong một thành phần HTML

Khi bạn sử dụng trình chỉnh sửa trực quan, để thêm liên kết đến trang web, đơn vị khóa học hoặc tệp trong thành phần HTML, bạn làm việc với hộp thoại Chèn liên kết.

Để biết thêm thông tin, hãy xem các tác vụ sau.

Thêm liên kết đến trang web
Thêm liên kết đến một đơn vị khóa học
Thêm liên kết vào tệp

Thêm liên kết đến trang web

Chọn văn bản mà bạn muốn sử dụng làm văn bản liên kết.
Chọn biểu tượng liên kết trên thanh công cụ.
Trong hộp thoại Chèn liên kết , nhập URL của trang web là đích cho liên kết của bạn vào trường URL.
Nếu bạn muốn liên kết mở trong một cửa sổ mới, hãy chọn mũi tên thả xuống bên cạnh trường Mục tiêu , sau đó chọn Cửa sổ Mới. Nếu không, bạn có thể để giá trị mặc định.
Chọn OK.
Lưu thành phần HTML.
Để kiểm tra liên kết, hãy chọn Xem phiên bản trực tiếp hoặc Xem trước. Khi thiết bị mở trong Elite Learning , hãy chọn văn bản được liên kết và xác minh rằng trang web chính xác sẽ mở.

Thêm liên kết đến một đơn vị khóa học

Ghi chú

Khi bạn tạo một liên kết đến một thành phần khác, đơn vị của thành phần đích đó phải được xuất bản để liên kết hoạt động.

Lấy ID vị trí của đơn vị bạn muốn liên kết.

Trong Elite Learning Studio, mở trang cho thiết bị mà bạn muốn liên kết đến trong Studio, sau đó tìm Vị trí Đơn vị trong ngăn bên phải.
Trong Vị trí Đơn vị , hãy chọn và sao chép văn bản chữ và số trong trường ID Vị trí.

2. Mở thành phần HTML mà bạn muốn thêm liên kết.

3. Chọn văn bản bạn muốn đưa vào liên kết.

4. Chọn biểu tượng liên kết trên thanh công cụ.

5. Trong hộp thoại Chèn liên kết, hãy nhập một giá trị giống với giá trị sau vào trường URL. / jump_to_id / <ID vị trí>

Đảm bảo thay <ID vị trí> (bao gồm cả dấu ngoặc) bằng ID vị trí mà bạn đã sao chép ở bước 1 và đảm bảo rằng bạn bao gồm cả dấu gạch chéo về phía trước (/).

Nếu bạn muốn liên kết mở trong một cửa sổ mới, hãy chọn mũi tên thả xuống bên cạnh trường Mục tiêu , sau đó chọn Cửa sổ Mới. Nếu không, bạn có thể để giá trị mặc định.
Chọn Chèn.
Lưu thành phần HTML và kiểm tra liên kết.

Thận trọng

Đảm bảo bạn sử dụng /jump_to_id/<ID vị trí> làm giá trị URL. Không sử dụng URL của đơn vị mà bạn thấy trên thanh địa chỉ trình duyệt. Nếu bạn không sử dụng / jump_to_id / <location ID>, liên kết sẽ bị hỏng nếu bạn xuất và sau đó nhập khóa học.

Thêm liên kết vào tệp

Gợi ý

Khi bạn thêm liên kết vào tệp, hãy mở thành phần HTML và trang Tệp & Tải lên trong các cửa sổ trình duyệt riêng biệt. Sau đó, bạn có thể sao chép nhanh hơn các URL của tệp.

Bạn có thể thêm liên kết trong thành phần HTML vào bất kỳ tệp nào được tải lên cho khóa học. Để biết thêm thông tin về cách tải tệp lên, hãy xem Thêm tệp vào khóa học.

Ghi chú

Không sử dụng phương pháp này để thêm hình ảnh vào các thành phần HTML. Thay vào đó, hãy sử dụng phương pháp trongThêm hình ảnh vào thành phần HTML.

Trên trang Tệp & Tải lên, tìm tệp bạn muốn, sau đó chọn Studio trong cột Sao chép URL.

Ghi chú

Bạn phải sử dụng URL Studio để liên kết đến tệp, không phải URL Web. Để biết thêm thông tin, hãy xemThêm tệp vào khóa học.

Trong thành phần HTML mà bạn muốn thêm liên kết, hãy chọn văn bản mà bạn muốn đưa vào liên kết.
Trong thanh công cụ, chọn biểu tượng liên kết.
Trong hộp thoại Chèn liên kết , hãy dán URL Studio cho tệp vào trường URL. Ví dụ: URL có thể giống với URL sau.

/static/FileName.pdf

Đảm bảo rằng bạn bao gồm cả dấu gạch chéo về phía trước (/).

(tùy chọn) Nếu bạn muốn liên kết mở trong một cửa sổ mới, hãy chọn mũi tên thả xuống bên cạnh trường Mục tiêu , sau đó chọn Cửa sổ Mới. Nếu không, bạn có thể để giá trị mặc định.
Chọn OK.
Lưu thành phần HTML và kiểm tra liên kết.

Thêm hình ảnh vào thành phần HTML

Khi bạn sử dụng trình chỉnh sửa trực quan, bạn có thể thêm bất kỳ hình ảnh nào từ máy tính của mình vào một thành phần HTML. Bạn có thể xem bản xem trước của hình ảnh trước khi thêm nó vào thành phần.

Ghi chú

Trước khi bạn thêm hình ảnh, hãy đảm bảo rằng bạn nhận được quyền bản quyền cho hình ảnh bạn sử dụng trong khóa học của mình và bạn trích dẫn các nguồn một cách thích hợp.
Để thêm văn bản thay thế hiệu quả cho hình ảnh, hãy xem lại Sử dụng các phương pháp hay nhất để mô tả hình ảnh.
Bạn chỉ có thể thêm một hình ảnh cùng một lúc.
Mỗi tệp hình ảnh riêng lẻ phải nhỏ hơn 10 MB.

Để thêm hình ảnh vào một thành phần HTML, bạn có thể sử dụng một trong các quy trình sau:

Kéo hình ảnh từ máy tính của bạn vào hộp thoại
Thêm hình ảnh trong thành phần HTML.
Định vị hình ảnh bằng cách sử dụng tùy chọn Duyệt Máy tính của Bạn trong hộp thoại Thêm Hình ảnh. Chọn một hình ảnh mà bạn đã tải lên trang Tệp & Tải lên.

Kéo Hình ảnh vào Hộp thoại Thêm Hình ảnh

Trong thành phần HTML, định vị con trỏ ở nơi bạn muốn thêm hình ảnh, sau đó chọn biểu tượng hình ảnh trên thanh công cụ.
Trong hộp thoại Thêm hình ảnh , kéo hình ảnh từ máy tính của bạn vào vùng Kéo và thả.

Ngay sau khi tệp của bạn tải lên, hộp thoại Chỉnh sửa Cài đặt Hình ảnh sẽ mở ra.

Trong hộp thoại Chỉnh sửa Cài đặt Hình ảnh , hãy thêm mô tả hình ảnh.

Trong trường Mô tả Hình ảnh (Văn bản Thay thế) , hãy nhập văn bản thay thế cho hình ảnh. Văn bản này trở thành giá trị của thuộc tính alt trong HTML và cần thiết để khóa học của bạn có thể truy cập đầy đủ. Để biết thêm thông tin, hãy xem Sử dụng các phương pháp hay nhất để mô tả hình ảnh.
Nếu hình ảnh của bạn là hình ảnh trang trí không truyền tải thông tin quan trọng, hãy chọn hộp kiểm Hình ảnh này chỉ là hình ảnh trang trí.

(tùy chọn) Chỉ định chiều rộng và chiều cao của hình ảnh của bạn. Để biết thêm thông tin, hãy xem Thay đổi Kích thước Hình ảnh.
Chọn Chèn hình ảnh.
Lưu thành phần HTML và kiểm tra hình ảnh.

Định vị hình ảnh trên máy tính của bạn

Trong thành phần HTML, định vị con trỏ ở nơi bạn muốn thêm hình ảnh, sau đó chọn biểu tượng hình ảnh trên thanh công cụ. Trong hộp thoại Thêm hình ảnh , Duyệt máy tính của bạn.
Trong hộp thoại mở ra, định vị tệp bạn muốn thêm, sau đó chọn Mở. Ngay sau khi tệp của bạn tải lên, hộp thoại Chỉnh sửa Cài đặt Hình ảnh sẽ mở ra.
Trong hộp thoại Chỉnh sửa Cài đặt Hình ảnh , hãy thêm mô tả hình ảnh.
Trong trường Mô tả Hình ảnh (Văn bản Thay thế) , hãy nhập văn bản thay thế cho hình ảnh. Văn bản này trở thành giá trị của thuộc tính alt trong HTML và cần thiết để khóa học của bạn có thể truy cập đầy đủ. Để biết thêm thông tin, hãy xem Sử dụng các phương pháp hay nhất để mô tả hình ảnh.
Nếu hình ảnh của bạn là hình ảnh trang trí không truyền tải thông tin quan trọng, hãy chọn hộp kiểm Hình ảnh này chỉ là hình ảnh trang trí.
(tùy chọn) Chỉ định chiều rộng và chiều cao của hình ảnh của bạn. Để biết thêm thông tin, hãy xem Thay đổi Kích thước Hình ảnh.
Chọn Chèn hình ảnh.
Lưu thành phần HTML và kiểm tra hình ảnh.

Thay đổi kích thước hình ảnh

Để thay đổi kích thước hình ảnh của bạn, hãy làm theo các bước sau:

Trong thành phần HTML, chọn hình ảnh bạn muốn chỉnh sửa, sau đó chọn biểu tượng hình ảnh trên thanh công cụ.
Trong hộp thoại Chỉnh sửa Cài đặt Hình ảnh , tìm Kích thước Hình ảnh , sau đó nhập các giá trị bạn muốn cho các tùy chọn Chiều rộng và Chiều cao.
Chọn Chèn hình ảnh.

Nếu bạn muốn thay đổi hình ảnh trở lại kích thước ban đầu, hãy xóa các giá trị trong trường Chiều rộng và Chiều cao.

Ghi chú

Để đảm bảo rằng hình ảnh giữ nguyên tỷ lệ khi bạn thay đổi kích thước hình ảnh, hãy đảm bảo rằng Khóa tỷ lệ được chọn và chỉ nhập một số vào trường Chiều rộng hoặc trường Chiều cao. Sau khi bạn nhấn tab hoặc nhấp vào bên ngoài trường đó, số trong trường khác sẽ thay đổi thành giá trị duy trì tỷ lệ hình ảnh.