Hướng dẫn này nói về cách Mở, Tạo và Lưu tệp HTML bằng Trình soạn thảo Văn bản Notepad. Nhưng nếu bạn muốn tạo toàn bộ trang web HTML bằng Notepad. Sau đó, bạn cần biết về Thẻ HTML, Đoạn văn, Tiêu đề, Hình ảnh, Div, CSS và các Thành phần HTML bất lực khác để làm điều đó

Làm cách nào để lưu tệp văn bản dưới dạng html?

Nếu bạn muốn Lưu tệp Văn bản dưới dạng HTML thì bạn cần Đổi tên tệp và thay đổi Phần mở rộng tệp từ (. txt) thành (. html). Hoặc mở tệp Văn bản đó trong Trình soạn thảo văn bản Notepad và Chọn tệp từ thanh Điều hướng trên cùng. Một menu Tệp sẽ xuất hiện trên Màn hình, chọn Lưu dưới dạng Tùy chọn từ đó và Lưu tệp của bạn với. Tiện ích mở rộng html

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 thuộc mọi 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 mặc định của Windows. Bạn có thể coi Notepad là Mã VS hoặc trình soạn thảo văn bản yêu thích của mình với ít khả năng hơn

Viết mã bằng Notepad rất tốt cho người mới bắt đầu, vì bạn không có quyền truy cập vào đánh dấu cú pháp, định dạng và các tính năng tự động khác như vậy

Nếu không có những trợ lý này, bạn sẽ học cách chú ý đến chi tiết, tính 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ắt đầu viết mã bằng các trình soạn thảo 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 với 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 để viết 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 viết mã, sau đó lưu mã sau hoặc tạo tệp và mở tệp 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
Bước 2. Trên phần menu chính của thư mục, nhấp vào tab "Xem" và đảm bảo rằng "phần mở rộng tên tệp" được chọn. Điều này sẽ cung cấp cho bạn quyền truy cập để tạo tệp và chỉ định cả phần mở rộng

Bước 3. Bên trong thư mục, tạo tệp HTML có tên là index.html, tệp CSS có tên là styles.css và tệp JavaScript có tên là app.js

Những 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ở bằng”. Điều này sẽ hiển thị các ứng dụng mà bạn có thể mở tệp. Chọn Sổ tay

Theo mặc định, chỉ số. Tệp html sẽ được mở bằng trình duyệt mặc định của bạn, vì vậy hãy đảm bảo 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 ứng dụng khác”, chọn “Ứ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 bằng Notepad. Bạn sẽ thấy một cái gì đó như thế này (nếu bạn làm đúng)

Bước 5. Dán mã HTML sau

  
    
    
    
  
  
    


    
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ẽ chứa đầy mã

Lưu tệp bằng cách nhấn Ctrl + S hoặc vào Tệp và nhấp vào “Lưu”

Nếu mã của bạn không thụt vào như mã 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 thủ công

Bước 6. Bây giờ tệp HTML đã sẵn sàng. Quay lại thư mục mà bạn đã tạo các tệp HTML, CSS và JavaScript ở Bước 3. Bấm đúp vào tệp HTML để mở tệp trong trình duyệt mặc định của bạn

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

Mở tệp CSS bạn đã tạo ở Bước 3 và dán đoạn mã sau vào

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

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

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

0 với lớp

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

1 trong tệp HTML trống

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

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

0 đó bằng JavaScript

Mở tệp JavaScript được tạo ở Bước 3 và dán đoạn mã sau vào

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 có tên là

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

3 và đặt nó thành một chuỗi,

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

4

Tôi đã khai báo một biến khác tên là

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

5 để chọn thẻ h1 trống trong HTML. Tôi đã làm điều này với phương pháp DOM (Mô hình đối tượng tài liệu)

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

6

Trong dòng thứ ba của mã JavaScript, tôi đã sử dụng phương pháp

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

7 của DOM để đặt nội dung văn bản của _______0 thành giá trị của biến ____1_______3, mà tôi đã đặt thành ____1_______4

Bây giờ, hãy quay lại trang web và tải lại. Vẫn không có sự khác biệt. Đừng 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 đoạn mã sau vào phần đầu của HTML

Để liên kết tệp JavaScript, hãy dán mã bên dưới ngay trước thẻ đóng nội dung 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 tệp CSS và JavaScript hiện đang hoạt động

Phần kết luận

Windows Notepad là một trình soạn thảo văn bản giống như S Code, Atom, Sublime Text và những thứ khác. Nó chỉ không có các tính năng của các trình soạn thảo văn bản nâng cao khác như đánh dấu 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 một 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ó

Để mã hóa thoải mái hơn, bạn có thể tải xuống và cài đặ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 đánh dấu cú pháp, đị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 tiện ích mở rộng phong phú có sẵn trên thị trường Mã VS

Ngoài VS Code, các trình soạn thảo văn bản khác mà bạn có thể sử dụng là Atom, Sublime Text, Vim và Notepad++, một phiên bản kết hợp 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

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để chỉnh sửa mã HTML?

Có thể chỉnh sửa HTML trong bất kỳ trình soạn thảo văn bản nào không?