• Trang chủ
  • Sản phẩm – Dịch vụ
    • Tạo ứng dụng di động
      • AppTeng Go
    • Smart ERP Go
      • Lite Smart ERP Go
      • Medium Smart ERP Go
    • Tạo QR Code
      • QR Code Go Free
  • Bảng giá
  • Bảng điều khiển
    • Đăng nhập
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Code Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP
        • Smart CRM / ERP Go
      • Giáo dục
        • Edu Go Free
      • Giám sát
        • Monitor
    • Đăng ký
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite Smart ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP Go
        • Lite CRM / ERP Go
      • Giáo dục
        • Edo Go Free
      • Giám sát
        • Monitor
  • Kiến thức chung
  • Trang chủ
  • Sản phẩm – Dịch vụ
    • Tạo ứng dụng di động
      • AppTeng Go
    • Smart ERP Go
      • Lite Smart ERP Go
      • Medium Smart ERP Go
    • Tạo QR Code
      • QR Code Go Free
  • Bảng giá
  • Bảng điều khiển
    • Đăng nhập
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Code Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP
        • Smart CRM / ERP Go
      • Giáo dục
        • Edu Go Free
      • Giám sát
        • Monitor
    • Đăng ký
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite Smart ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP Go
        • Lite CRM / ERP Go
      • Giáo dục
        • Edo Go Free
      • Giám sát
        • Monitor
  • Kiến thức chung
Trang chủ/Hướng dẫn/Nền tảng Tạo ứng dụng di động/Tuỳ chỉnh và Nâng cao/Sử dụng HTML trong ứng dụng/Hướng dẫn 5: Một số phần tử cần biết

Hướng dẫn 5: Một số phần tử cần biết

40 lượt truy cập 0

Bạn đã có các Code mẫu HTML để ứng dụng vào Module Mã nguồn trên nền tảng AppTeng qua các hướng dẫn trước chưa? Đây là ví dụ:

  1. <html>
  2.  
  3. <head>
  4. <title>My website</title>
  5. </head>
  6.  
  7. <body>
  8.  
  9. <h1>Tiêu đề bài viết</h1>
  10. <p>Nội dung bài viết</p>
  11. <h2>Tiêu đề phụ</h2>
  12. <p>Nội dung bài viết</p>
  13.  
  14. </body>
  15.  
  16. </html>

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

Bạn sẽ được hướng dẫn gì tiếp theo?

Bây giờ chúng tôi sẽ hướng dẫn bạn 7 phần tử (element) mới.

Tương tự như cách bạn làm nghiêng đoạn chữ bằng cách đặt nó vào giữa cặp thẻ <em>và</em>. Bạn cũng có thể in đậm một đoạn chữ bằng cách tương tự, đặt vào giữa cặp thẻ mở  <strong> và thẻ đóng </strong>.

Ví dụ 1:

  1. <strong>Chữ in đậm</strong>

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

Tiếp theo, đây là cách để thu nhỏ một đoạn chữ bằng cách sử dụng thẻ small:

Ví dụ 2:

  1. <small>Đoạn chữ thu nhỏ.</small>

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

 

Tôi có thể dùng nhiều thẻ cùng một lúc được không?

Bạn có thể dùng cùng lúc nhiều thẻ cho cùng một nội dung nhưng phải tránh các phần tử chồng xen kẻ với nhau. Đây là một ví dụ:

Ví dụ 3:

Nếu bạn muốn thu nhỏ một đoạn chữ và cùng lúc tạo nghiêng, đoạn code sẽ như sau:

  1. <em><small>Chữ in đậm và nghiêng</small></em>

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

 

và KHÔNG được như thế này: <small><em>Chữ in đậm và nghiêng</small></em>

Điểm khác nhau mấu chốt là bạn phải đóng thẻ mở đầu tiên ở cuối cùng, điều này tránh cho ứng dụng không lúng túng khi đọc đoạn code của bạn.

Thêm một vài phần tử khác!

Như đã từng đề cập ở bài số 3, một số phần tử chỉ có một thẻ đơn. Đây là các phần tử rỗng và độc lập. Đây là một ví dụ về thẻ <br /> nó dùng để ngắt dòng và xuống hàng:

  1. Đây là một đoạn chữ <br /> và thêm một đoạn khác được ngắt xuống dòng.

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

Chú ý rằng các thẻ đơn không có thẻ mở và đóng mà chỉ có tên thẻ + khoảng trắng + dấu / như thẻ này: <br />.

Tương tự, một thẻ khác là <hr /> được dùng làm đường kẻ ngang (“hr” là chữ viết tắt của “horizontal rule” – đường kẻ ngang):

Ví dụ 5:

  1. <hr />

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

Những ví dụ khác về thẻ có đủ một cặp đóng và mở, như thẻ dùng để tạo danh sách liệt kê là  ul, ol và li.

ul là chữ viết tắt của “unordered list” danh sách không có số thứ tự chỉ có chấm hoặc gạch đầu dòng. ol là viết tắt của “ordered list” là danh sách có đánh số thự tự đầu dòng. Các mục được liệt kê trong danh sách sẽ được thêm vào bằng thẻ li  (“list item” – mục liệt kê). hơi rắc rối, nhưng bạn có thể xem ví dụ bên dưới:

Ví dụ 7:

  1. <ul>
  2. <li>mục liệt kê</li>
  3. <li>thêm một mục liệt kê khác</li></ul>

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

Ví dụ 8:

  1. <ol>
  2. <li>Mục số một</li>
  3. <li>Mục số hai</li>
  4. </ol>

Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:

Đã hoàn tất bài học?

Tạm thời là như thế, Một lần nữa, hãy thực hành và tự tay tạo ra các trang có chứa các phần tử bạn vừa học trong bài này bao gồm:

  1. <strong> Chữ in đậm </strong>
  2. <small> Chữ thu nhỏ </small>
  3. <br /> Xuống hàng
  4. <hr /> Gạch dòng ngang
  5. <ul>Danh sách liệt kê</ul>
  6. <ol>Danh sách liệt kê có đánh số</ol>
  7. <li>Mục liệt kê</li>

Kết quả:

Bài viết này có giúp ích gì cho bạn không ?

Có  Không
Cùng chuyên mục
  • Cách ẩn link Youtube Video trong ứng dụng
  • Hướng dẫn 1: Bắt đầu với HTML trong Module Mã nguồn
  • Hướng dẫn 2: HTML là gì?
  • Hướng dẫn 3: Phần tử và thẻ (elements, tags)
  • Hướng dẫn 4: Module Mã nguồn – lần đầu làm chuyện “ấy”
  • Hướng dẫn 6: Thuộc tính (Attributes)
Có thể bạn quan tâm
  • Tạo Chứng chỉ Phân phối iOS (iOS Distribution Certificate)
  • Hướng dẫn các bước Xuất bản ứng dụng Android
  • Module Thương mại điện tử
  • Làm thế nào để thay đổi icon hình ảnh của Module
  • Làm thế nào để tạo File .IPA cho ứng dụng iOS ?
Danh mục hướng dẫn
  • Nền tảng Edu Go (Miễn phí cho Trường học – Cơ sở giáo dục 5
    • Thiết lập hệ thống Trường học 2
    • Câu hỏi thường gặp 1
    • Bắt đầu 1
    • Các vấn đề khác 1
  • Nền tảng Tạo ứng dụng di động 7
    • Làm thế nào ? 3
    • Bắt đầu 7
    • Các bước tạo ứng dụng di động 6
    • Giao diện ứng dụng 13
      • Tuỳ chỉnh giao diện với CSS 22
    • Các Module ứng dụng 61
    • Xuất bản ứng dụng Android 4
    • Xuất bản ứng dụng iOS 17
    • Tuỳ chỉnh và Nâng cao 28
      • Sử dụng HTML trong ứng dụng 14
    • Kiếm tiền với AdMob 5
    • Ứng dụng Android và các vấn đề đã biết 1
    • Ứng dụng iOS và các vấn đề đã biết 2
    • Gỡ lỗi 2
    • Dành cho Nhà phát triển 4
      • Tài liệu API 1
    • Các vấn đề khác 9
  • Chương trình Đại lý AppTeng 18
    • Bắt đầu 14
    • Hướng dẫn thực hiện 3
    • Câu hỏi thường gặp của Chương trình đại lý 10
  • Kiến thức chung 3
  • Nền tảng Email Go (Email Marketing 23
    • Khái Niệm, Thuật Ngữ 10
    • Thiết lập Hệ thống Email Marketing trên nền tảng Email Go của bạn 5
    • Tạo tài nguyên Hệ thống 2
    • Chiến Dịch Email Marketing 2
    • API KEY 1
    • Phí Dịch vụ 1
    • Các vấn đề chung 2
  • Nền tảng File Go 2
    • Bắt đầu 2
  • Lite Marketing 5
    • Thực hiện 1
    • Khái niệm, Thuật ngữ 3
    • Bắt đầu 1
  • Nền tảng Ad BioLink 1
    • Khái niệm, Thuật ngữ 1
  • Nền tảng QR Pos – Res 2
    • Bắt đầu 1
    • Thực hiện 1
  • Nền tảng Tạo Website Cửa hàng – Comment – Chat Bot tự động trên Facebook – Instagram 19
    • Khái niệm, Thuật ngữ 6
    • Cửa hàng Thương mại điện tử 12
    • Bắt đầu 1
  • Nền tảng Quản trị Nhân sự HRM Go 1
    • Bắt đầu 1
  • Nền tảng GetFund – Góp vốn đầu tư 1
  • Nền tảng Thương mại điện tử – Shop 4
    • Bắt đầu 1
    • Kinh doanh bán hàng 3
  • Nền tảng WebPro – Tạo nhanh Website 3
    • Bắt đầu 2
    • Các bước tạo Website 1
  • Email dành cho Doanh nghiệp 5

  Hướng dẫn 4: Module Mã nguồn – lần đầu làm chuyện “ấy”

Hướng dẫn 6: Thuộc tính (Attributes)  

AppTeng Việt Nam
Giới thiệu
Danh sách phát hành
Tin tức
Chính sách Cộng tác viên
Chính sách Đại lý
Chính sách bảo mật
Điều khoản sử dụng
Chính sách và Quy tắc hoàn lại tiền
  • Chính sách bảo mật
  • Điều khoản sử dụng
  • © 2014 - 2022 AppTeng - phát triển và Vận hành.