loading

Trung tâm Kiến thức AppTeng

Tạo và xuất bản ứng dụng di động iOS Apple Store và Android CH Play - Các nền tảng phần mềm ứng dụng cho Giáo dục, Y tế, Kinh doanh, Nhà hàng, Quản trị, Kết nối...

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

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></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:

 

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à mt đon ch <br /> và thêm mt đon khác được ngt xung 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à  ulol 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ả:

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 5: Một số phần tử cần biết

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

Hướng dẫn 7: Liên kết - Link

Hướng dẫn 8: Hình ảnh – Image

Hướng dẫn 9: Bảng – Table:

Hướng dẫn 10: Tìm hiểu thêm về bảng – table

Hướng dẫn 11: Dàn trang – Layout (CSS):

Hướng dẫn 12: Chèn liên kết tới các Module khác cho hình ảnh. 

Hướng dẫn 13: Tổng kết

Bạn cần AppTeng hỗ trợ điều gì ?

AppTeng - nền tảng Tạo và Quản trị ứng dụng di động - Không cần kỹ năng lập trình.

Các bước Tạo ứng dụng

Hướng dẫn chi tiết từng bước Tạo ứng dụng di động Android CH-Play và iOS Apple Store.
Xem chi tiết

Thiết lập Module

Hướng dẫn chi tiết cách thiết lập, tuỳ chỉnh các Module trong ứng dụng di động của bạn.
Xem chi tiết

Diễn đàn

Diễn đàn hỗ trợ, chia sẻ kiến thức và kinh nghiệm trên nền tảng AppTeng.
Xem chi tiết

Xuất bản ứng dụng

Hướng dẫn chi tiết cách xuất bản ứng dụng di động trên nền tảng AppTeng.
Xem chi tiết

Liên kết AppTeng

AppTeng - nền tảng tạo ứng dụng di động phổ biến nhất Việt Nam.

Nhận tin tức