Hướng dẫn how do i display html code in notepad? - làm cách nào để hiển thị mã html trong notepad?

Notepad là trình soạn thảo văn bản tích hợp được cài đặt sẵn trên các máy Windows của tất cả các phiên bản-XP, Windows 7, Windows 8, Windows 10, v.v.

Nó là trình soạn thảo văn bản Windows mặc định. Bạn có thể nghĩ về Notepad là mã vs mã hoặc trình soạn thảo văn bản yêu thích của bạn với ít khả năng hơn.

Mã hóa với Notepad là tuyệt vời cho người mới bắt đầu, bởi vì bạn không có quyền truy cập vào cú pháp làm nổi bật, định dạng và các tính năng tự động khác như vậy.

Không có các trợ lý này, bạn sẽ học sự chú ý đến chi tiết, sự kiên trì, khả năng phục hồi và cách tự định dạng mã của mình, trước khi bạn bắt đầu mã hóa với các trình chỉnh sửa văn bản khác như VS Code, Sublime Text hoặc Atom.

Vì vậy, trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng Windows Notepad và cách mở bất kỳ mã trang web nào bằng nó bằng cách tạo một trang web đơn giản với HTML, một chút CSS và JavaScript.

Cách viết mã một trang web đơn giản trong notepad

Bạn có thể sử dụng Notepad để mã theo hai cách: khởi chạy Notepad trực tiếp từ máy Windows của bạn và bắt đầu mã hóa và sau đó lưu mã sau hoặc tạo tệp và mở nó bằng notepad.

Trong hướng dẫn này, tôi sẽ tập trung vào phương pháp thứ hai, vì vậy tôi sẽ tạo các tệp trước, sau đó mở chúng bằng notepad.

Bước 1: Tạo một thư mục ở bất cứ đâu trên máy tính của bạn 2: Trên phần menu chính của thư mục, nhấp vào tab "Xem" và đảm bảo "Tiện ích mở rộng tên tệp" được đánh dấu. Điều này sẽ cung cấp cho bạn quyền truy cập để tạo một tệp và chỉ định tiện ích mở rộng. 1: Create a folder anywhere on your computer
Step 2: On the main menu section of the folder, click on the "View" tab and make sure "file name extensions" is ticked. This will give you access to creating a file and specifying the extension as well.

Bước 3: Bên trong thư mục, tạo tệp HTML có tên index.html, tệp CSS có tên styles.css và tệp JavaScript có tên là app.js.: Inside the folder, create an HTML file called index.html, a CSS file called styles.css, and a JavaScript file called app.js.

Những cái tên này là do quy ước. Bạn có thể đặt tên cho các tệp bất cứ điều gì bạn muốn nếu bạn không muốn tuân theo các quy ước.

Bước 4: Nhấp chuột phải vào index.html và di chuột vào tùy chọn mở với tùy chọn. Điều này sẽ hiển thị các ứng dụng mà bạn có thể mở tệp. Chọn Notepad.: Right-click on the index.html and hover on the “open with” option. This will show apps with which you can open the file. Choose Notepad.

Theo mặc định, tệp index.html sẽ được mở bởi trình duyệt mặc định của bạn, vì vậy hãy chắc chắn rằng bạn không nhấp đúp vào tệp.

Nếu Notepad không được hiển thị trong các tùy chọn, hãy nhấp vào Chọn một ứng dụng khác, chọn thêm ứng dụng khác trong cửa sổ bật lên tiếp theo và bạn sẽ thấy Notepad trong các ứng dụng được liệt kê.

Bây giờ, bạn nên mở tệp HTML với Notepad. Bạn sẽ thấy một cái gì đó như thế này (nếu bạn hiểu đúng):

Bước 5: Dán vào mã HTML sau:: Paste in the following HTML Code:

  
    
    
    
  
  
    


    
This is heading 1
    
This is heading 2
    
This is heading 3
    
This is heading 4
    
This is heading 5
    
This is heading 6

    

      This is a paragraph with some placeholder texts: Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum
      quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos
      modi odit incidunt ut vitae cum maiores.
    

    This is a bolded sentence 


    This is an italicised text

    

      This is a link to freeCodeCamp, a
      platform where you can learn to code for free
    

    
Below is freeCodeCamp logo:

    

  

Ứng dụng Notepad của bạn bây giờ sẽ được lấp đầy bằng mã:

Lưu tệp bằng cách nhấn Ctrl + S hoặc chuyển đến tệp và nhấp vào Lưu Lưu.

Nếu mã của bạn không được thụt vào như của tôi, đừng lo lắng. Notepad không tự động làm điều đó cho bạn, vì vậy bạn phải làm điều đó bằng tay.

Bước 6: Bây giờ tệp HTML đã sẵn sàng. Quay trở lại thư mục mà bạn đã tạo các tệp HTML, CSS và JavaScript trong bước 3. Bấm đúp vào tệp HTML để mở nó trong trình duyệt mặc định của bạn.: Now the HTML file is ready. Go back to the folder in which you created the HTML, CSS, and JavaScript files in Step 3. Double-click the HTML file to open it in your default browser.

Trang web bây giờ trông như thế này:

Mở tệp CSS bạn đã tạo ở bước 3 và dán vào mã sau:Step 3 and paste in the following code:

.page-heading {
  color: #2ecc71;
}

Nếu bạn tải lại trang, bạn sẽ thấy không có thay đổi. Don Tiết lo lắng ở tất cả. Điều này là do thẻ

.page-heading {
  color: #2ecc71;
}

.page-heading {
  color: #2ecc71;
}

Bây giờ, bạn có thể chèn một số văn bản vào thẻ

.page-heading {
  color: #2ecc71;
}

Mở tệp JavaScript được tạo ở bước 3 và dán vào mã sau:Step 3 and paste in the following code:

const pageHeadingText = "This is a Simple Website coded with Windows Notepad";
const pageHeading = document.querySelector(".page-heading");

pageHeading.innerHTML = pageHeadingText;

Mã JavaScript ở trên đang làm gì?

Tôi đã khai báo một biến gọi là

.page-heading {
  color: #2ecc71;
}

.page-heading {
  color: #2ecc71;
}

Tôi đã khai báo một biến khác được gọi là

.page-heading {
  color: #2ecc71;
}

.page-heading {
  color: #2ecc71;
}

Trong dòng thứ ba của mã JavaScript, tôi đã sử dụng phương thức DOM ____ ____17 để đặt nội dung văn bản của

.page-heading {
  color: #2ecc71;
}

.page-heading {
  color: #2ecc71;
}

.page-heading {
  color: #2ecc71;
}

Bây giờ, quay lại trang web và tải lại nó. Vẫn chưa có sự khác biệt. Don Tiết lo lắng một lần nữa. Điều này là do bạn phải liên kết các tệp CSS và JavaScript.

Để liên kết tệp CSS, hãy dán mã sau vào phần đầu của HTML:

Để liên kết tệp JavaScript, hãy dán vào mã bên dưới ngay trước khi thẻ thân đóng trong HTML:

Tệp HTML bây giờ sẽ có các tệp CSS và JavaScript được liên kết như thế này:

  
    
    
    

    
    

  
  
    


    
This is heading 1
    
This is heading 2
    
This is heading 3
    
This is heading 4
    
This is heading 5
    
This is heading 6

    

      This is a paragraph with some placeholder texts: Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum
      quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos
      modi odit incidunt ut vitae cum maiores.
    

    This is a bolded sentence

    This is an italicised text

    

      This is a link to freeCodeCamp, a
      platform where you can learn to code for free
    

    
Below is freeCodeCamp logo:

    


    
    

  

Nếu bây giờ bạn tải lại trang, bạn sẽ thấy sự khác biệt:

Mã trong các tệp CSS và JavaScript hiện đang hoạt động.

Sự kết luận

Windows Notepad là một trình soạn thảo văn bản giống như mã S, nguyên tử, văn bản tuyệt vời và các văn bản khác. Nó chỉ không có các tính năng của các trình chỉnh sửa văn bản nâng cao khác như làm nổi bật cú pháp, định dạng văn bản, thiết bị đầu cuối tích hợp, v.v. Nhưng nó vẫn thực hiện tất cả các chức năng của trình soạn thảo văn bản vì bạn có thể viết mã bằng bất kỳ ngôn ngữ lập trình nào với nó.

Để có được mã hóa thoải mái hơn, bạn có thể tải xuống và cài đặt một trình soạn thảo văn bản giàu tính năng hơn như VS Code (miễn phí!). Nó cung cấp cho bạn cú pháp làm nổi bật, định dạng văn bản và gần như bất kỳ chức năng nào bạn muốn thông qua một thư viện mở rộng phong phú có sẵn trong thị trường mã vs.

Ngoài mã VS, các trình chỉnh sửa văn bản khác bạn có thể sử dụng là Atom, Sublime Text, VIM và Notepad ++, một phiên bản lai của Windows Notepad.

Cảm ơn bạn đã đọc bài viết này. Nếu bạn thấy nó hữu ích, hãy chia sẻ nó với bạn bè và gia đình của bạn.