Hướng dẫn how do i create an index html file in visual studio code? - làm cách nào để tạo một tệp html chỉ mục trong mã studio trực quan?

Hãy để lặn ngay vào và tạo trang web đầu tiên của chúng tôi.

Nội dung chính Show

Biên tập viên
Trình duyệt
Tạo tài liệu HTML
Tại sao chỉ mục.html?
Xem và làm mới
Các yếu tố HTML
Thuộc tính
Cấu trúc cơ bản của trang HTML
Chèn một hình ảnh
URL tương đối và tuyệt đối
Danh mục đầu tư có hình ảnh
Cái gì tiếp theo?
Làm cách nào để tạo mã HTML chỉ mục trong Visual Studio?
Làm thế nào để bạn tạo một tệp HTML chỉ mục?
Làm cách nào để chạy tệp HTML chỉ mục trong mã VS?
Làm thế nào để bạn tạo mã HTML cho mã trực quan?
Làm cách nào để tạo một tệp HTML trong Visual Studio?

Để phát triển web, bạn cần hai chương trình: Trình chỉnh sửa để tạo các tệp cho trang web và trình duyệt (ví dụ: Edge, Firefox, Safari hoặc Chrome) để xem và kiểm tra trang web của bạn.editor to create the files for the website and a browser (for example Edge, Firefox, Safari, or Chrome) to view and test your website.

Biên tập viên

Để tạo các trang web, một trình soạn thảo văn bản bình thường sẽ là đủ. Nhưng có những biên tập viên đơn giản hóa rất nhiều công việc của bạn với tư cách là một lập trình viên. Do đó, tôi khuyên bạn nên sử dụng trình chỉnh sửa mã hiện đại.

Yêu thích hiện tại của tôi trong số nhiều biên tập viên là Visual Studio Code (miễn phí). Bạn có thể sử dụng một biên tập viên mà bạn chọn nhưng đôi khi tôi sẽ đề cập đến một số chức năng của Visual Studio Code (mã vs). Giải pháp thay thế tốt là nguyên tử hoặc dấu ngoặc.

Đi trước và cài đặt một biên tập viên. Nếu bạn không biết cái nào, hãy sử dụng mã Visual Studio ngay bây giờ.

Tiện ích mở rộng biên tập

Mặc dù chúng tôi ở đó, chúng tôi sẽ mở rộng mã vs mã sẽ cung cấp cho siêu cường cho trình soạn thảo của chúng tôi: máy chủ trực tiếp.

Mở mã Visual Studio.
Mở menu Phần mở rộng.
Nhập máy chủ trực tiếp trực tiếp vào trường tìm kiếm và cài đặt tiện ích mở rộng.
Tải lại mã Visual Studio để kích hoạt tiện ích mở rộng.

Trình duyệt

Tất nhiên, trang web của chúng tôi nên chạy trong tất cả các trình duyệt chính (Edge, Firefox, Chrome và Safari). Tuy nhiên, để phát triển web, tôi khuyên bạn nên sử dụng Chrome. Chrome bao gồm các công cụ rất hữu ích cho các nhà phát triển mà bạn sẽ sử dụng thường xuyên.

Nếu bạn không có Chrome trên máy tính của mình, bạn có thể cài đặt nó ở đây.

Tạo tài liệu HTML

Được trang bị trình soạn thảo và trình duyệt, hãy để Lôi tạo tài liệu HTML đầu tiên cho trang web của chúng tôi.

Tạo một thư mục trên máy tính của bạn cho dự án của bạn. Kể tên danh mục thư mục (hoặc bất cứ điều gì bạn muốn).
Mở mã vs.
Mở menu Tệp và chọn Mở thư mục. Duyệt cho thư mục bạn đã tạo và mở nó.File menu and select Open Folder …. Browse for the folder you created and open it.
Nhấp chuột phải vào bên dưới thư mục và chọn tệp mới. Đặt tên cho tệp index.html.New File. Name the file index.html.
Bây giờ bạn có một tệp văn bản trống có tên index.html.

Tại sao chỉ mục.html?

Bạn có thể cho rằng, tên index.html có ý nghĩa đặc biệt. Nếu một địa chỉ trang web được gọi, ví dụ https://code.makery.ch, tệp index.html sẽ tự động được hiển thị đầu tiên, trong trường hợp này là https://code.makery.ch/index.html. Đối với chúng tôi, index.html đầu tiên của chúng tôi sẽ trở thành trang chủ của chúng tôi.

Xem và làm mới

Bây giờ bạn có thể điền vào tài liệu với nội dung. Nhập các dòng sau trong HTML của bạn.

Để xem trang, chúng tôi sẽ sử dụng tiện ích mở rộng máy chủ trực tiếp mà chúng tôi đã cài đặt ở trên. Nhấp chuột phải vào index.html của bạn (tệp bên dưới thư mục danh mục đầu tư và không phải là bản ở trên dưới các biên tập viên mở mở). Sau đó nhấp vào mở với máy chủ trực tiếp. Một cửa sổ trình duyệt nên mở ra và hiển thị trang web đầu tiên của bạn. Bây giờ, bất cứ khi nào bạn lưu bất kỳ thay đổi nào, họ sẽ tự động cập nhật bởi máy chủ trực tiếp.Live Server extension that we installed above. Right-click on your index.html (the file below the Portfolio folder and not the one above under “Open Editors”). Then click Open with Live Server. A browser window should open up and show your first website. Now, whenever you save any changes they are automatically updated by the live server.

Nếu trang không mở trong trình duyệt ưa thích của bạn: Thay đổi cài đặt trên máy tính của bạn để biến trình duyệt khác Trình duyệt tiêu chuẩn của bạn. Ngoài ra, bạn có thể sao chép địa chỉ (ví dụ

<img src="marco.jpg" alt="Picture of me">

2) từ một trình duyệt và chèn nó vào một trình duyệt khác.not open in your preferred browser: Change the settings on your computer to make another browser your standard browser. Alternatively you can copy the address (for example

<img src="marco.jpg" alt="Picture of me">

2) from one browser and insert it into another.

Nếu trang không được cập nhật sau khi thay đổi: Lưu tất cả các tệp của bạn trong trình chỉnh sửa và sau đó - bên trong trình duyệt - làm mới với

<img src="marco.jpg" alt="Picture of me">

3 hoặc

<img src="marco.jpg" alt="Picture of me">

4.is not updated after changes: Save all your files in the editor and then - inside the browser - refresh with

<img src="marco.jpg" alt="Picture of me">

3 or

<img src="marco.jpg" alt="Picture of me">

Xin chúc mừng! Bạn vừa tạo trang web đầu tiên của bạn!

Vết lõm

Để giữ cho mã của bạn sạch sẽ, điều quan trọng là bạn phải thụt đầu vào các dòng bằng phím tab. Hãy chú ý đến mã ví dụ và thụt vào phù hợp. Trình duyệt không quan tâm nhưng điều quan trọng đối với chúng tôi là các lập trình viên có thể có một cái nhìn rõ ràng.tab key. Pay close attention to the example code and indent accordingly. The browser does not care but it is important for us as programmers to be able to have a clear view.

Mẹo 1: Sử dụng các phím

<img src="marco.jpg" alt="Picture of me">

5 để di chuyển thụt vào bên trái. Use

<img src="marco.jpg" alt="Picture of me">

5 keys to move indentation to the left.

Mẹo 2: Bạn có thể thụt vào nhiều dòng cùng một lúc nếu bạn chọn chúng và nhấp vào

<img src="marco.jpg" alt="Picture of me">

6 hoặc
<img src="marco.jpg" alt="Picture of me">
5. You can indent multiple lines at once if you select them and click

<img src="marco.jpg" alt="Picture of me">

6 or

<img src="marco.jpg" alt="Picture of me">

Mẹo 3 (tự động): Nhấp chuột phải vào một nơi nào đó trong mã chương trình của bạn và chọn

<img src="marco.jpg" alt="Picture of me">

8. Right-click somewhere in your program code and choose

<img src="marco.jpg" alt="Picture of me">

Các yếu tố HTML

Thuộc tính

Thuộc tính khai báo thông tin bổ sung cho một mục. Các thuộc tính là một phần của thẻ mở của một phần tử và luôn có tên và giá trị.name and a value.

Ví dụ, hãy để Lôi nhìn vào phần tử HTML cho một liên kết. Nó có lẽ là một trong những yếu tố quan trọng nhất - Internet sẽ là gì nếu không có liên kết?

Phần tử

<!-- Relative URLs -->
<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>

<!-- Absolute URLs -->
<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>

6 ở trên bao gồm thuộc tính

<!-- Relative URLs -->
<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>

<!-- Absolute URLs -->
<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>

7 (viết tắt của tham chiếu siêu văn bản của Hồi giáo) với giá trị https://code.makery.ch. Trình duyệt biết rằng nó phải hiển thị liên kết dưới dạng trang web của tôi.

Cấu trúc cơ bản của trang HTML

Chúng tôi đã thấy hai yếu tố

<img src="marco.jpg" alt="Picture of me">

9 và

<!-- Relative URLs -->
<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>

<!-- Absolute URLs -->
<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>

3. Nhưng cấu trúc cơ bản của một trang HTML thường chứa một vài cái nữa. Điều chỉnh trang web của bạn theo mã sau. Sau đó, chúng tôi sẽ thảo luận về từng yếu tố nó.

Cấu trúc HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>
    <p>Write anything you want to tell the world.</p>
  </body>
</html>

Giải thích

Luôn luôn đặt

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

1 trên dòng đầu tiên. Nó cho biết trình duyệt về loại tài liệu.

Thẻ

<img src="marco.jpg" alt="Picture of me">

9 cho biết bắt đầu và

<!-- Relative URLs -->
<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>

<!-- Absolute URLs -->
<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>

0 Kết thúc tài liệu.

Phần tử

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

4 chứa thông tin bổ sung về trang. Trái ngược với yếu tố

<!-- Relative URLs -->
<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>

<!-- Absolute URLs -->
<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>

3, thông tin này không xuất hiện trong khu vực chính của trình duyệt.

Trong

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

4, cần có một dấu hiệu về bộ ký tự:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

7. Nếu bạn không chỉ định bộ ký tự, một số ký tự đặc biệt có thể không được hiển thị chính xác. Bạn có thể nhận thấy rằng phần tử

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

8 không có thẻ đóng. Có một vài yếu tố mà không cần đóng thẻ (

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

9, index.html0, v.v.), nhưng chúng là ngoại lệ.

Tiếp theo bạn sẽ thấy phần tử index.html1. Tiêu đề được hiển thị trong thanh tiêu đề ở đầu cửa sổ trình duyệt của bạn.

Tất cả mọi thứ bên trong phần tử
```

<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>


<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>
```
3 được hiển thị trong khu vực chính của trình duyệt.
- A index.html3 định nghĩa tiêu đề chính. Các tiêu đề phụ có thể được tạo bằng index.html3, index.html5, index.html6, index.html7 và index.html8.
- Văn bản giữa index.html9 và ____50 là một đoạn văn.
Sau mỗi thẻ mở, phần tử tiếp theo phải được thụt vào (với một tab hoặc hai khoảng trắng) để tổng quan tốt hơn. Hãy chắc chắn rằng bạn làm theo thói quen này.

Mẹo 1: Giữ cấu trúc HTML cơ bản này tiện dụng. Bạn có thể sử dụng nó cho bất kỳ trang HTML mới nào! Keep this basic HTML structure handy. You can use it for any new HTML page!

Mẹo 2: Sử dụng phím tắt index.html1 để lưu tệp hiện tại. Use the keyboard shortcut index.html1 to save the current file.

Mẹo 3: Sử dụng phím tắt index.html2 cho hoàn tác. Use the keyboard shortcut index.html2 for undo.

Với các yếu tố HTML cơ bản này, chúng tôi đã chuẩn bị tốt để đưa trang web của chúng tôi lên một cấp độ mới. Đầu tiên, hãy để thêm một hình ảnh để trang chủ của danh mục đầu tư của chúng tôi trông thú vị hơn một chút.

Chèn một hình ảnh

Để chèn một hình ảnh, chúng tôi sử dụng phần tử index.html0. Ví dụ sau sẽ chèn hình ảnh của tôi:

<img src="marco.jpg" alt="Picture of me">

Phần tử index.html0 chỉ có một lỗ mở nhưng không có thẻ đóng. Nó chứa thuộc tính index.html5 và index.html6. Thuộc tính index.html5 chỉ định URL, đó là vị trí và tên tệp của hình ảnh. Thuộc tính index.html6 là một văn bản thay thế của người Viking, mô tả nội dung của hình ảnh. Văn bản này được sử dụng bởi các công cụ tìm kiếm và nếu một số lý do, hình ảnh không thể được hiển thị, ví dụ như trên đầu đọc màn hình cho người mù.

URL tương đối và tuyệt đối

URL được sử dụng cho thuộc tính index.html5 của hình ảnh và cũng cho thuộc tính ____ của các liên kết. URL chỉ định địa chỉ trên mạng của một tệp (ví dụ: một trang web khác hoặc một hình ảnh). Tùy thuộc vào vị trí của tệp, phải sử dụng URL tương đối hoặc tuyệt đối.

Nếu một tệp là một phần của cùng một trang web, thì có thể sử dụng URL tương đối. Như chúng ta đã thấy trong ví dụ trên, đây chỉ là tên của tệp.is part of the same web site, then a relative URL can be used. As we have seen in the example above, this is only the name of the file.

Một URL tương đối là liên quan đến trang HTML hiện tại hoặc liên quan đến gốc của trang web của chúng tôi. Để tham khảo một tệp trong cùng một thư mục, chúng ta chỉ có thể sử dụng tên tệp như index.html1. Nếu tệp đích được đặt trong một thư mục khác, điều này phải được tính đến. Nếu hình ảnh từ ví dụ trên nằm trong một thư mục con gọi là index.html2, URL tương đối sẽ là index.html3. Nếu tệp nằm trong thư mục chính, bạn có thể liên hệ với nó với index.html4. URL cho hình ảnh trong trường hợp này sẽ là index.html5.relative URL is either relative to the current HTML page or relative to the root of our website. To reference a file in the same folder, we can just use the filename like index.html1. If the target file is located in another folder, this must be taken into account. If the image from the example above were in a subfolder called index.html2, the relative URL would be index.html3. If the file is in a parent folder you can reach it with index.html4. The URL for the image in this case would be index.html5.

Thay vì điều hướng từ tệp hiện tại, chúng tôi cũng có thể bắt đầu từ gốc của trang web của chúng tôi bằng cách thêm một dấu gạch chéo hàng đầu index.html6. Chúng tôi có thể sử dụng điều này từ bất kỳ tệp nào trong trang web của bạn và trong bất kỳ thư mục con nào và nó sẽ luôn bắt đầu từ gốc. Điều này rất hữu ích cho các liên kết điều hướng như chúng ta sẽ thấy trong một phần sau của hướng dẫn.

Nếu tệp được đặt trên một trang web khác, phải sử dụng URL tuyệt đối. URL tuyệt đối chứa toàn bộ tên miền và đường dẫn. Một ví dụ sẽ là index.html7.on another website, an absolut URL must be used. Absolute URLs contain the entire domain name and path. An example would be index.html7.

Hãy nhớ những điều sau đây về URL:

Bên trong cùng một thư mục, chúng tôi chỉ sử dụng tên tệp, ví dụ index.html1
Hai dấu chấm (`..`) đề cập đến thư mục cha.
Nếu chúng ta muốn bắt đầu trong thư mục gốc, chúng ta sẽ thêm `/` trước đường dẫn của tệp, ví dụ index.html6.

Ví dụ về URL tương đối và tuyệt đối

<!-- Relative URLs -->
<a href="image-gallery.html">Image Gallery</a>
<a href="blog/first-blog-entry.html">My First Blog Entry</a>
<a href="../image-gallery.html">Back to Image Gallery</a>

<!-- Absolute URLs -->
<a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>

Danh mục đầu tư có hình ảnh

Nếu bạn chưa làm như vậy, hãy thử và chèn một hình ảnh vào danh mục đầu tư của bạn. Bạn phải sao chép một hình ảnh vào thư mục danh mục đầu tư của bạn trên máy tính của bạn. Đảm bảo rằng bạn chỉ định tên tệp chính xác, bao gồm cả phần mở rộng tệp.

Tất cả mã của bạn bây giờ có thể trông giống như thế này (Tôi đã thêm một phần phụ và một số văn bản khác):

index.html với mã danh mục đầu tư đã hoàn thành

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h2>Web Portfolio of Marco</h2>

    <h2>Welcome!</h2>

    <p>Thanks for stopping by.</p>

    <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p>

    <img src="marco.jpg" alt="Picture of me">

    <p>Marco :-)</p>
  </body>
</html>

Đó là cách mà danh mục đầu tư hiện trông giống như trong trình duyệt:

Cái gì tiếp theo?

→ Trong phần tiếp theo, bạn sẽ tìm hiểu cách xuất bản trang web của mình trên Internet. Tiếp tục với Phần 2: Xuất bản trang web của bạn

Làm cách nào để tạo mã HTML chỉ mục trong Visual Studio?

2 câu trả lời..

Nhấp chuột phải vào thư mục trong (không gian làm việc).

Chọn tệp mới ..

Đặt tên cho tệp có phần mở rộng HTML ..

Loại hình ! (Chỉ một dấu chấm than).

Nhấn Tab hoặc Enter ..

Làm thế nào để bạn tạo một tệp HTML chỉ mục?

Để tạo một chỉ mục cho một trang web..

Tạo một tệp chỉ mục ..

Tạo tệp HTML sẽ chứa chỉ mục của bạn ..

Đặt con trỏ của bạn tại vị trí mà bạn muốn tệp chỉ mục xuất hiện, sau đó nhấp vào HTML Help ActiveX Control. ....

Trong chỉ định hộp lệnh, nhấp vào chỉ mục, sau đó làm theo hướng dẫn trên màn hình của bạn ..

Làm cách nào để chạy tệp HTML chỉ mục trong mã VS?

Nhập bắt đầu theo sau là tên tệp HTML và nhấn ENTER.Ví dụ: nếu bạn muốn chạy tệp HTML chỉ mục của mình, bạn sẽ nhập start index.html và nhấn Enter.Điều này khởi chạy tệp HTML trong một cửa sổ riêng cho phép bạn xem trước tệp HTML của mình.type start index. html and press Enter. This launches the HTML file in a separate window allowing you to preview your HTML file.

Làm thế nào để bạn tạo mã HTML cho mã trực quan?

Chúng tôi khuyên bạn nên xem video trên và sau đó làm theo các bước viết dưới đây ...

Tạo một thư mục phát triển.Điều hướng đến một thư mục bằng cách sử dụng trình quản lý tệp của bạn hoặc thiết bị đầu cuối.....

Mở mã studio trực quan ..

Mở thư mục phát triển của bạn.....

Thêm một tập tin.....

Bắt đầu mã hóa!....

Xem tệp HTML của bạn trong trình duyệt ..

Làm cách nào để tạo một tệp HTML trong Visual Studio?

Ở menu trên cùng trong Visual Studio, hãy chuyển đến Tệp> Mới> Tệp.Chọn trang HTML.Ở góc dưới bên phải của hộp thoại Tệp mới trên nút Mở có một mũi tên xuống.Nhấp vào nó và bạn sẽ thấy một tùy chọn mở với.go to File > New > File. Select HTML Page. In the lower right corner of the New File dialog on the Open button there is a down arrow. Click it and you should see an option Open With.