• 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 4: Module Mã nguồn – lần đầu làm chuyện “ấy”

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

57 lượt truy cập 0

Với những gì chúng tôi đã hướng dẫn bạn ở các phần trước, bây giờ bạn có thể tạo các tuỳ chỉnh cho Module Mã nguồn chỉ trong vài phút.

Bắt đầu như thế nào?

Trong Hướng dẫn 1, chúng ta đã được biết những gì cần thiết đó là: phần mềm Notepad (trên Windows) hoặc Sublime Text (trên Mac)

Khi bạn đang đọc những dòng này, có nghĩa là bạn đã mở Module Mã nguồn tại www.appteng.com, điều cần làm là bạn chỉ mở thêm 1 tab hoặc một cửa sổ mới, như thế bạn có thể vừa xem hướng dẫn, vừa thực hành những gì đã học để tuỳ chỉnh Module Mã nguồn của mình.

Trên Windowns, bạn có thể mở Notepad như hình sau (Programs > Accessories > Start menu):

Trên Mac, bạn có thể mở Sublime Text như hình sau (Launchpad > Sublime Text):

Nào, bây giờ chúng ta cùng bắt đầu!

Làm gì bây giờ?

Hãy để chúng tôi giúp bạn mọi việc dễ dàng hơn. Giả sử bạn muốn tuỳ chỉnh Module Mã nguồn với dòng chữ “Tuyệt vời! Đây là ứng dụng di động của tôi”. Vậy hãy đọc tiếp, bạn sẽ khám phá việc này rất đơn giản.

HTML rất đơn giản và hợp với luận lý học. Module Mã nguồn trên nền tảng AppTeng đọc HTML giống như bạn đọc chữ từ trên xuống và từ từ trái sang phải. Vì thế, để tuỳ chỉnh HTML với Module Mã nguồn bắt đầu sẽ bắt đầu theo trình tự trước và sau.

Điều đầu tiên bạn cần làm là khai báo cho Module Mã nguồn biết bạn sẽ “nói” với nó bằng ngôn ngữ HTML bằng cách sử dụng thẻ <html>Do đó, trước khi bạn định làm bất cứ điều gì hãy gõ thẻ  <html>vào dòng đầu tiên trên chương trình Notepad (trên Windows) hoặc Sublime Text (trên Mac)

Nếu bạn còn nhớ ở hướng dẫn trước, <html> là thẻ mở và nó cần phải có thẻ đóng trước khi bạn hoàn tất tuỳ chỉnh HTML với Module Mã nguồn. Do vậy hãy đảm bảo bạn không quên thẻ đóng  “</html>“. Tốt nhất bạn nên xuống vài dòng và gõ vào sau đó bạn có thể chèn các các phần tử khác vào giữa 2 thẻ <html>và </html>.

Công việc kế tiếp, Module Mã nguồn của bạn cần là thẻ head, đây là phần cung cấp thông tin về các tuỳ chỉnh HTML trong Module Mã nguồn của bạn, và thẻ body, nơi chứa tất cả nội dung của Module Mã nguồn. Như bạn đã biết, HTML sẽ không được Module Mã nguồn hiểu nếu nó không tuân thủ luận lý học, do đó các thẻ này sẽ được viết như sau phần head bao gồm cặp thẻ (<head> and </head>) và kế đến là body  với (<body> and </body>).

Module Mã nguồn của bạn sẽ phải như thế này:

  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. </body>
  6. </html>

Chú ý: chúng tôi sắp xếp các thẻ trên các dòng khác nhau, hoặc thụt đầu dòng. Về nguyên tắc, điều này chẳng ảnh hưởng đến cấu trúc đến việc tuỳ chỉnh HTML trong Module Mã nguồn của bạn, nhưng nó sẽ giúp bạn có thể đọc code và xem tổng quát toàn Module, chúng tôi khuyến nghị bạn nên sắp xếp Module Mã nguồn HTML một cách gọn gàng với xuống dòng và thụt đầu dòng như ở trên trong quá trình làm theo các hướng dẫn của AppTeng.

Nếu như Module Mã nguồn HTML của bạn đã giống như ví dụ trên, bạn thật sự đã hoàn tất Module Mã nguồn của mình, mặc dù trông nó khá là chán và không như những gì bạn mong muốn, nhưng dù gì nó cũng đã là ứng dụng di động. Những gì bạn vừa làm sẽ chỉ là Module Mã nguồn mẫu (template) cho tất cả những Module Mã nguồn HTML sau này.

Làm thế nào tôi có thể đưa nội dung vào Module Mã nguồn HTML?

Cũng như bạn đã được học trước đó, HTML có hai phần head và body. Bất cứ những thứ gì bạn muốn xuất hiện trên Module Mã nguồn đều là phần nội dung và nó phải được thêm vào giữa 2 thẻ đóng và mở body.

Như đã nói ở trên, bạn muốn có Module Mã nguồn với dòng chữ “Tuyệt vời! Đây là ứng dụng di động của tôi”. Đây là đoạn chữ mang thông điệp thuộc phần body. Vì vậy trong phần body, bạn gõ vào như sau:

  1. <p>Tuyệt vời! Đây là ứng dụng di động của tôi.</p>

Thẻ <p> là chữ viết tắt của “paragraph” – (đoạn văn bản) đó cũng là ý nghĩa của thẻ.

Module Mã nguồn HTML sẽ như sau:

  1. <html>
  2. <body>
  3. <p>Tuyệt vời! Đây là ứng dụng di động của tôi.</p>
  4. </body>
  5. </html>

Hãy xem Module Mã nguồn hiển thị trên ứng dụng di động của bạn:

Xem như xong! Bạn thật sự đã tuỳ chỉnh xong phần cơ bản của Module Mã nguồn!

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 5: Một số phần tử cần biết
  • 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 3: Phần tử và thẻ (elements, tags)

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

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.