Cách tạo tài liệu html trong notepad

Question

Duyệt đến vị trí mà bạn đã lưu bài viết của mình, trong phần "Tạo tài liệu HTML của bạn" của bài viết này

Nội dung chính Show

Cách viết mã một trang web đơn giản trong Notepad
Sự kết luận
Bạn có thể tạo HTML trong Notepad không?
Tại sao Notepad được sử dụng để viết tài liệu HTML?

Chọn tệp và sau đó nhấp vào Mở

Nhập văn bản sau vào tài liệu

Bạn có thể sử dụng Microsoft Word để tạo tài liệu HTML dễ dàng như tạo tài liệu Word thông thường

Để tạo một siêu liên kết, hãy chọn từ "Microsoft Word" trong văn bản mà bạn đã nhập

Trên menu Chèn, bấm vào Siêu kết nối

Trong hộp thoại Chèn siêu kết nối, nhập http. //www. Microsoft. com/word trong hộp Địa chỉ, rồi bấm OK

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. Trong thư mục, tạo tệp HTML có tên là

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

7, tệp CSS có tên là

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

8 và tệp JavaScript có tên là

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

9

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

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

7 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Notepad Website</title>
  </head>
  <body>
    <h1 class="page-heading"></h1>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>

    <p>
      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.
    </p>

    <strong>This is a bolded sentence</strong> <br>

    <em>This is an italicised text</em>

    <p>
      This is a link to <a href="https://freecodecamp.org">freeCodeCamp</a>, a
      platform where you can learn to code for free
    </p>

    <p>Below is freeCodeCamp logo:</p>

    <img
      src="https://popsql.com/static/external-logos/freecodecamp.png"
      alt="freecodecamp-logo"
    />
  </body>
</html>

Ứ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 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 thức

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

7 của DOM để đặt nội dung văn bản của

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

0 thành giá trị của biến

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

3 mà tôi đã đặt thành

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

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

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

4

Để 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

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

5

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

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

6

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

Sự 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

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

Bạn có thể tạo HTML trong Notepad không?

Bạn có thể viết HTML bằng Notepad hoặc bất kỳ chương trình chỉnh sửa văn bản nào khác. Sau đó, tất cả những gì bạn cần làm là lưu tệp dưới dạng tài liệu HTML. HTML rất dễ học, ngay cả khi bạn không có kỹ năng lập trình. Bài viết wikiHow này hướng dẫn bạn cách tạo một trang web đơn giản bằng Notepad.

Tại sao Notepad được sử dụng để viết tài liệu HTML?

Mặc dù vậy, một kế hoạch tốt hơn nhiều là sử dụng Notepad vì nó là một trình soạn thảo văn bản rất đơn giản mà bạn sẽ thấy dễ sử dụng để chỉnh sửa tài liệu HTML của mình. Notepad's File menu contains the traditional Open, Save, Save as and Close options that you have seen in other programs.

programming html