Bài tập - Tạo trang HTML

  • 5 phút

Trong bài tập này, bạn bắt đầu tạo trang web cho sơ yếu lý lịch của mình. Bạn bắt đầu bằng cách thêm một số thông tin ở mức cao chẳng hạn như tên và tiêu đề phần của bạn. Bạn cũng thêm một số nhận xét mà chúng tôi sử dụng làm đánh dấu vị trí để thêm thông tin trong bài tập sau này.

Bài tập này sử vscode.dev - một phiên bản dựa trên web của Visual Studio Code và CodeSwing. Các công cụ này giúp hợp lý hóa quá trình phát triển. Không có cài đặt địa phương là cần thiết để hoàn thành các bài tập sau đó.

Tạo trang HTML với CodeSwing

Bạn bắt đầu bằng cách tạo một thư mục, thiết lập công cụ của bạn, và tạo ra một "swing" bằng cách sử dụng CodeSwing trong vscode.dev. Một swing tự động hiển thị các kết quả của mã bạn tác giả trong vscode.dev. Điều này cho phép bạn nhanh chóng thực hiện sửa đổi và các bản cập nhật diễn ra trong thời gian thực.

Video sau đây minh họa cách cài đặt CodeSwing trong Mã Visual Studio. Các bước này cũng có trong các bước thực hiện.

  1. Tạo một thư mục trên màn hình nền có tên là sơ yếu lý lịch.
  2. Mở vscode.dev.
  3. Chọn Mở Thư mục.
  4. Dẫn hướng đến thư mục sơ yếu lý lịch bạn đã tạo trước đó, rồi chọn Chọn Thư mục.
  5. Khi được nhắc Cho phép tệp xem site, hãy chọn Xem Tệp.
  6. Chọn nút Tiện ích bổ sung.

    Ảnh chụp màn hình biểu tượng Tiện ích bổ sung.

  7. Trong hộp văn bản Phần mở rộng Tìm kiếm trong Marketplace , nhập CodeSwing.
  8. Chọn Cài đặt để cài đặt CodeSwing.
  9. Mở Command Palette bằng cách chọn Ctl-Shift-P hoặc Cmd-Shift-P trên máy Mac.
  10. Nhập CodeSwing trong Bảng màu Lệnh và chọn CodeSwing: Swing mới trong thư mục....
  11. Chọn Chọn Thư mục để sử dụng thư mục hiện tại (là thư mục bạn đã tạo trong bước trước đó).
  12. Chọn Cơ bản: Chỉ HTML.
  13. Khi được nhắc Lưu thay đổi để tiếp tục, hãy chọn Lưu thay đổi.

Visual Studio Code tạo hai cửa sổ cạnh nhau. Bên trái là trình soạn thảo của bạn, nơi bạn có thể nhập HTML của bạn. Bên phải hoạt động giống như một trình duyệt, hiển thị kết quả của mã HTML của bạn.

Thêm HTML để tạo cấu trúc trang của bạn

Tiếp theo, bạn thêm HTML để tạo cấu trúc trang của bạn. Bạn tạo ba yếu tố chính của html, headvà body. Bên trong body, bạn thêm một phần có chứa thông tin chung về bạn, chẳng hạn như tên và thông tin phương tiện truyền thông xã hội của bạn. Sau đó, bạn thêm các mục liệt kê giáo dục và kinh nghiệm của mình.

Video sau đây minh họa cách tạo HTML trong Visual Studio Code và có kết xuất mã trong CodeSwing. Các bước này cũng có trong các bước thực hiện.

Hãy thoải mái thay thế Tên bạn bằng tên của bạn. Trong các bài tập khác, bạn tạo danh sách và liên kết đến địa chỉ email, núm điều khiển phương tiện xã hội cũng như giáo dục và trải nghiệm của mình.

Sau khi thêm mã, bạn sẽ xem lại mã nào đã được thêm.

  1. Bên index.html, hãy thêm HTML sau đây:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Mỗi yếu tố trong HTML làm những điều cụ thể. Bảng sau mô tả các thẻ bạn đã sử dụng trong HTML của mình và cách trình duyệt hiểu chúng.

Thẻ Sự miêu tả
<html> Thẻ "bộ chứa" cho toàn bộ tài liệu HTML. Tất cả các thẻ khác được viết bên trong thành phần HTML.
<head> Bộ chứa tiêu đề. Tiêu đề thường bao gồm các tham chiếu đến các tệp khác mà trang hoặc site cần. Nó cũng có thể bao gồm dữ liệu mà công cụ tìm kiếm và các trang web truyền thông xã hội sử dụng để tìm trang web của bạn tốt hơn.
<body> Thẻ này tạo bộ chứa nội dung cho trang web. Hầu hết các yếu tố hiển thị đều đi vào thành phần nội dung.
<div> Thẻ chia sẽ tạo ra một phần trong HTML. Các phần thường có nội dung hoặc nội dung tương tự nhau có liên quan đến nhau.
<h1> - <h6> Đây là thẻ tiêu đề. Chúng cung cấp cho một số cấu trúc cho tài liệu HTML. Họ yêu cầu trình duyệt định dạng văn bản giữa chúng theo một cách cụ thể để hiển thị cấu trúc phân cấp đó.
<!-- comment text --> Các thẻ này là chú thích trong HTML. Chúng không tạo ra kết xuất. Chúng được nhà phát triển sử dụng để giúp các nhà phát triển dễ tìm, chia sẻ và hiểu mã hơn.
/* CSS comment */ Các thẻ chú thích này được dùng trong Biểu định Kiểu Xếp tầng.
  1. Khi bạn nhập, trang sẽ tự động cập nhật; kết quả cuối cùng xuất hiện tương tự như hình ảnh sau đây:

Ảnh chụp màn hình cấu trúc sơ yếu lý lịch.

Xem lại mã

Mỗi trang HTML đều có html phần tử cốt lõi gốc, với tất cả nội dung chứa bên trong nó. html thường có hai nhánh con trực tiếp, head chứa siêu dữ liệu và body chứa thông tin sẽ được hiển thị.

Lưu ý cách bạn chỉ sử dụng h1 phần tử cho tên của mình và sử h2 thành phần cho tiêu đề cho từng phần. Điều này giúp tô sáng các phần quan trọng nhất của trang. Tên của bạn là phần thông tin quan trọng nhất trên trang; do đó nó được thanh toán hàng đầu với h1.

Cuối cùng, có các nhận xét về địa chỉ email, phương tiện truyền thông xã hội, giáo dục và trải nghiệm. Chúng đang được sử dụng làm chỗ dành sẵn và được thay thế trong bài tập sau trong mô-đun này.