Bên cạnh vô số máy tính dựng sẵn, bạn còn có thể làm toán trên máy vi tính để bàn bằng cách dùng code (mã lập trình) HTML để tự dựng. Để tạo máy tính từ HTML, bạn cần học một số kiến thức cơ bản về ngôn ngữ lập trình này rồi chép code cần thiết vào trình soạn thảo văn bản và lưu nó dưới dạng HTML. Lúc này, bạn đã có thể mở tài liệu HTML trên trình duyệt yêu thích và bắt đầu sử dụng máy tính của mình. Cứ thế, bạn không chỉ làm được toán trên trình duyệt mà còn học được đôi nét cơ bản về nghệ thuật lập trình nữa đấy!

Phần 1 của 4:

Hiểu code của bạn

Tiêu đề ảnh Create a Calculator Using HTML Step 1


Học chức năng của từng html. Code bạn dùng để tạo máy tính được cấu thành bởi nhiều mảnh cú pháp. Chúng kết hợp tạo ra nhiều yếu tố khác nhau của tài liệu. Hãy nhấp vào đây để học cách làm quen với quá trình này hoặc đọc tiếp để biết từng dòng văn bản làm gì trong phần code mà bạn sẽ dùng.

    html: Phần cú pháp này cho phần còn lại của tài liệu biết ngôn ngữ được sử dụng là gì. Trong lập trình có rất nhiều ngôn ngữ được sử dụng và cho phần tài liệu còn lại biết nó được viết bằng – chuẩn rồi đấy – html!

    head: Cho tài liệu biết nội dung bên dưới chính là dữ liệu về dữ liệu, hay còn gọi là “metadata” (siêu dữ liệu). Lệnh thường được dùng để định rõ yếu tố thuộc về phong cách của tài liệu, chẳng hạn như tiêu đề, đề mục, v.v. Có thể coi nó như chiếc ô bao quát toàn bộ phần còn lại của phần code.

    title: Đây là nơi mà bạn sẽ đặt tên cho tài liệu của mình. Thuộc tính này quyết định tiêu đề của tài liệu khi được mở bằng trình duyệt html.

    body bgcolor= “#”: Thuộc tính này quy định màu sắc phần nền và phần thân của đoạn code. Con số nằm trong dấu ngoặc kép, phía sau dấu # tương ứng với một màu đã định nào đó trong html

    text= “”: Từ nằm trong dấu ngoặc kép quy định màu văn bản trong tài liệu.

    form name=””: Thuộc tính này định rõ tên biểu mẫu. Nhờ có nó, Javascript sẽ xác định được biểu mẫu đang được đề cập đến là gì và áp dụng cấu trúc được dựng lên từ biểu mẫu đó. Chẳng hạn như ở đây, ta dùng biểu mẫu Calculator và nó sẽ tạo nên một cấu trúc riêng cho tài liệu.

    input type=””: Đây là nơi hành động diễn ra. Thuộc tính “input type” cho tài liệu biết các giá trị trong phần còn lại của dấu ngoặc thuộc loại đầu vào nào. Đó có thể là văn bản, mật khẩu, nút bấm (dùng cho máy tính), v.v.

    value=””: Lệnh này cho tài liệu biết nội dung chứa trong loại đầu vào được định rõ ở trên là gì. Với máy tính, đó sẽ là các chữ số (1-9) và phép toán (+,-,*,/,=).

    onClick=””: Cú pháp này miêu tả một sự kiện – cho tài liệu biết điều gì đó sẽ xảy ra khi ai đó nhấn nút. Với máy tính, ta muốn từng nút được bấm sẽ được hiển thị. Chẳng hạn như với nút “6”, ta sẽ để document.calculator.ans.value+=’6′ giữa dấu ngoặc kép.

    br: thẻ này giúp bạn xuống dòng trong tài liệu. Mọi nội dung nằm sau nó sẽ xuất hiện ở dòng bên dưới nội dung nằm trước nó.

    /form, /body, and /html: những lệnh này cho tài liệu biết đến lúc này, các lệnh tương ứng được khởi tạo trước đó sẽ kết thúc.

Phần 2 của 4:

Lập trình máy tính HTML cơ bản

Tiêu đề ảnh Create a Calculator Using HTML Step 2

Chép đoạn code sau. Chọn văn bản trong hộp bên dưới bằng cách nhấn giữ và kéo chuột từ góc trên bên trái của hộp xuống góc dưới bên phải. Toàn bộ văn bản sẽ chuyển sang màu xanh. Nhấn “Command+C” trên Mac hoặc “Ctrl+C” trên PC để chép đoạn code vào bảng tạm. 
<html>
<head>
<title>HTML Calculatortitle>
head>
<body bgcolor= "#000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">

<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
form>
body>
html>

Phần 3 của 4:

Tạo máy tính của bạn

Tiêu đề ảnh Create a Calculator Using HTML Step 3

Mở chương trình soạn thảo văn bản trên máy vi tính. Có khá nhiều lựa chọn dành cho bạn, nhưng để thuận tiện và đảm bảo chất lượng, TextEdit và Notepad là hai ứng dụng nên dùng.

    Trên Mac, nhấp vào kính lúp ở góc trên bên phải của màn hình để mở Spotlight. Trong Spotlight, bạn hãy gõ TextEdit và nhấp vào chương trình này: hẳn là nó đang được đánh dấu màu xanh.

    Trên PC, mở trình đơn Start ở góc dưới bên trái của màn hình. Nhập Notepad vào thanh tìm kiếm và nhấp vào ứng dụng Notepad xuất hiện trong thanh kết quả nằm về phía bên phải.

Tiêu đề ảnh Create a Calculator Using HTML Step 4

Dán code HTML tạo máy tính vào tài liệu.

    Trên Mac, nhấp vào phần thân của tài liệu và nhấn “Command+V”. Tiếp đến, bạn cần nhấp vào mục “Format” (định dạng) ở đầu màn hình và “Make Plain Text” (Tạo văn bản trống) sau khi dán xong.

    Trên PC, nhấp vào thân tài liệu và nhấn “Ctrl+V”.

Tiêu đề ảnh Create a Calculator Using HTML Step 5

Lưu tập tin. Nhấp vào nút “File” ở góc trên bên trái của cửa sổ và trên trình đơn được thả xuống, nhấn “Save As…” (Lưu thành) – trên PC, hoặc “Save…” (Lưu) – trên Mac

Tiêu đề ảnh Create a Calculator Using HTML Step 6

Thêm đuôi HTML cho tên tệp. Trong trình đơn “Save As…”, gõ tên tệp cùng phần đuôi “.html”, rồi nhấn “Save”. Ví dụ, để gọi tệp là Máy tính đầu tiên, bạn sẽ lưu là “MayTinhDauTien.html”

Phần 4 của 4:

Dùng máy tính của bạn

Tiêu đề ảnh Create a Calculator Using HTML Step 7

Tìm tệp vừa tạo. Nhập tên tệp vào Spotlight hoặc thanh tìm kiếm của trình đơn Start như đã trình bày ở bước trước. Bạn không cần phải nhập đuôi “html”.

Tiêu đề ảnh Create a Calculator Using HTML Step 8

Nhấp vào để mở tệp. Trình duyệt mặc định sẽ mở máy tính trong một trang mạng mới.

Tiêu đề ảnh Create a Calculator Using HTML Step 9

Nhấp vào các nút trên máy tính để sử dụng. Kết quả tính toán sẽ xuất hiện trên thanh kết quả.

    Bạn có thể nhúng máy tính này vào trang web nếu thích.

    Bạn cũng có thể dùng thuộc tính phong cách để thay đổi diện mạo máy tính.

Bài viết gốc: https://www.wikihow.vn/D%E1%BB%B1ng-m%C3%A1y-t%C3%ADnh-b%E1%BA%B1ng-HTML