Cách code bảng giá nhanh chóng dành cho dân IT

Các bạn ai cũng biết ngôn ngữ chính mà một IT thực thụ làm việc là ngôn ngữ máy đúng không? Các bạn có bao giờ tự hỏi cách code bảng giá nhanh chóng dành cho dân IT là gì chưa?

Nếu chúng ta có cùng câu hỏi, hãy theo chân mình tới bài viết của ngày hôm nay nhá.

Khái niệm chính?

Lập trình là gì?

Lập trình là việc sử dụng cấu trúc dữ liệu và tập các lệnh của ngôn ngữ lập trình cụ thể để mô tả dữ liệu và diễn đạt các thao tác của thuật toán.

Code là gì? Code thực chất là một đoạn mã tin học. Tên khai sinh là QR Code viết tắt của từ Quick Response Code tức là mã phản hồi nhanh.

Hình dạng thường thấy của code là 1 dạng mã vạch 2 chiều kiểu ma trận. Bạn không thể đọc hiểu được ý nghĩa của code nếu không dùng các máy quét mã QR code hoặc 1 chiếc smartphone với ứng dụng để đọc mã vạch QR code chuyên biệt.

Cách code bảng giá nhanh chóng dành cho dân IT diễn ra như thế nào?

Các phần mềm hỗ trợ code

Là một dân IT chính hiệu thì việc làm quen với ngôn ngữ máy và các loại ứng dụng: NotePad ++, Visual Studio Code, Dreamweaver, Atom, … là quá đỗi quen thuộc. Ngoài những phần mềm này thì vòng một vài phần mềm khác hỗ trợ các bạn có thể tìm hiểu thêm nhé. Để biết cách code bảng giá nhanh chóng dành cho dân IT thì bạn phải hiểu hết các khái niệm về code đó nha.

Ngôn ngữ chính mà chúng ta thường thấy khi code chính là C++, ngoài ra thì còn có các loại ngôn ngữ khác như: Java, Python, C.

Vậy cách code bảng giá nhanh chóng dành cho dân IT cụ thể ra sao, các bạn cùng mình theo dõi nhé, nó cũng khá đơn giản giống như bạn xem trên youtube về hướng dẫn lập trang web miễn phí vậy thôi.

Quy trình code bảng giá của dân IT

Với hướng dẫn code bảng giá ngày hôm nay thì mình sẽ thực hiện trên Visual Code. Các bạn chú ý theo dõi nhé.

Mình sẽ hướng dẫn tạo bảng bằng HTML và CSS nha

Đầu tiên, tại phần mở đầu, rất đơn giản. Bạn chỉ cần nhấn ! sau đó enter là phần mở đầu của các bạn đã hoàn thành.

Text

Description automatically generated

Tại mục document bạn có thể đổi tên theo như ý muốn.

Tiếp theo đến phần body

Bạn thêm thẻ h1 để nhấn mạnh tên dịch vụ

Sau đó tạo bảng

<h1>Cách tạo bảng giá nhanh chóng của dân IT</h1>

    <table>

        <tr>

            <td> STT</td>

            <td> Tên dịch vụ </td>

            <td> Bảng giá </td>

        </tr>

</table>

Sau khi thực hiện đến đây chúng ta đã có một cái form

Tiếp đến các bạn thực hiện copy đoạn <tr> đầu tiên cho đến </tr>. Khúc này chính là nhân bản xem bạn muốn thêm hay chỉnh sửa thành bao nhiêu dòng. Và tiến hành chỉnh sửa nội dung ở trong đó.

Ở ví dụ này mình sẽ tạo 5 dịch vụ và giá cơ bản, sau khi code và chạy bạn sẽ thấy một bảng như này:

Graphical user interface, text, application

Description automatically generated

Các bạn làm được đến đây chưa ạ. Để cho bảng giá được đẹp hơn chúng ta tiến hành chỉnh sửa code nhé.

Để tạo cho cái bảng giá dịch vụ trở nên đẹp và bắt mắt hơn thì bạn nên tạo viền cho bảng bằng cách thêm chữ border.

Tại ví dụ thì mình sẽ cho border = “1”. Câu lệnh: <Table border=”1”>

Các bạn xem kết quả ở hình này nhé.

Table

Description automatically generated

Đẹp hơn rồi đúng không ạ. Để bảng giá có độ bắt mắt hơn thì chúng ta nên cho nó có một chút màu sắc. Chính vì vậy mình sẽ tạo tiếp tục code một khúc css trong bài nhé. Graphical user interface, text

Description automatically generated

Bảng giá đã trở nên đẹp hơn rồi đúng không ạ. Đây chính là phần code của mục CSS.

<style>

        body{

            font-size: 18px;

            font-family: Arial, Helvetica, sans-serif;

            text-align: center;

        }

        table {

            width: 1100px;

            margin-left: 100px;

            margin-right: 100px;

        }

        table, td, th{

            border: 0.5px solid #333

        }

    </style>

Đối với phần nội dung của văn bản các bạn thực hiện sửa CSS theo mình để căn giữa nội dung văn bản nhé. Sau đó để cho bảng giá của chúng ta thêm thú vị thì các bạn có thể to màu nền cho bảng. Cú pháp: background-color: #f1f1c1;

Table

Description automatically generated

Dưới đây chính là một bảng giá đơn giản được code tạo thành. Cách code bảng giá nhanh chóng dành cho dân IT thật đơn giản phải không? Bỏ túi của mình ngay nhé.

Các bạn hãy thử sức mình code nên một bảng giá giống các bạn IT đi nha. Gặp vấn đề gì các bạn cứ comment để mình giải đáp nhé.