Cách tạo tệp html trong thư mục

Việc tạo các trang HTML mới cho lớp học của bạn trở nên dễ dàng hơn bằng cách sử dụng nút Duyệt tìm Mẫu. Chọn một trang hoặc mẫu tương tự với trang bạn muốn tạo nội dung và định dạng sẽ được sao chép vào tệp mới của bạn. Sau đó, bạn có thể chỉ cần chỉnh sửa nội dung

• những gì được yêu cầu. Một khóa học D2L Brightspace và một tệp HTML

1. Nhấp vào Nội dung từ thanh điều hướng khóa học
2. Từ Mục lục bên trái, chọn mô-đun bạn muốn thêm tệp vào
3. Nhấp vào nút Mới
4. Chọn Tạo tệp
5. Nhập tiêu đề cho tài liệu của bạn
6. Nhấp vào nút Duyệt tìm mẫu
7. Chọn tệp HTML bạn muốn sử dụng làm mẫu hoặc Điều hướng đến thư mục HTML-templates [nếu có], mở thư mục và chọn định dạng bạn muốn. [template_lecture. html là một mẫu đa năng tốt]
8. Nhấp vào nút Thêm
9. Bây giờ bạn có một mẫu để làm việc. Chỉ cần chỉnh sửa tập tin và lưu nó
10. Khi lưu đừng bỏ qua tùy chọn Change Path. Điều này cho phép bạn lưu trữ tệp mới của mình trong thư mục thích hợp trong khu vực Quản lý tệp
11. Trong khi làm việc trên trang mới/mẫu, hãy ghi nhớ 7 tiêu chuẩn trợ năng

• Tiêu đề – Sử dụng các tiêu đề được định dạng đúng để cấu trúc trang
• Danh sách – Định dạng danh sách dưới dạng danh sách
• Hình ảnh và Đồ họa [bao gồm Đồ thị, Bản đồ và Hình dạng] – Cung cấp mô tả văn bản thay thế cho hình ảnh và hình dạng
• Liên kết – Viết văn bản liên kết có ý nghĩa cho biết đích của liên kết
• Bảng – Tạo bảng dữ liệu với tiêu đề cột và đảm bảo thứ tự đọc phù hợp trong bảng
• Màu sắc – Không chỉ sử dụng màu sắc để truyền đạt ý nghĩa và sử dụng đủ độ tương phản màu sắc

Cập nhật trang HTML hiện có thành Mẫu PCC mới

Những hướng dẫn này là để cập nhật các trang hiện có trong khóa học của bạn lên Mẫu PCC mới

Chuyển đổi Mẫu PCC cũ

1. Sao chép văn bản sau bằng cách sử dụng CTRL + C [Cmd + C dành cho MacOS].

2. Chuyển đến trang HTML bạn muốn cập nhật, nhấp vào menu thả xuống và chọn Chỉnh sửa HTML
3. Ở góc dưới cùng bên phải của cửa sổ trình soạn thảo, nhấp vào biểu tượng Trình chỉnh sửa mã nguồn HTML
4. Khoảng dòng thứ 5 trở xuống, bạn sẽ thấy
5. Đánh dấu và xóa nó
6. Nhấn CTRL + V [Cmd + V cho MacOS] để dán vào liên kết biểu định kiểu mới từ Bước 1
7. Nhấp vào nút Lưu để rời khỏi Trình chỉnh sửa mã nguồn HTML
8. Kiểm tra để đảm bảo rằng mọi thứ vẫn được định dạng chính xác và nhấp vào nút Lưu và Đóng để lưu trang

Áp dụng mẫu cho một trang HTML trống

1. Sao chép văn bản sau bằng cách sử dụng CTRL + C [Cmd + C dành cho MacOS].

2. Chuyển đến trang HTML bạn muốn cập nhật, nhấp vào menu thả xuống và chọn Chỉnh sửa HTML
3. Ở góc dưới cùng bên phải của cửa sổ trình soạn thảo, nhấp vào biểu tượng Trình chỉnh sửa mã nguồn HTML
4. Trong một số dòng văn bản đầu tiên, bạn sẽ thấy. Ghi chú. Có thể có một số văn bản ở giữa
5. Nhấn CTRL + V [Cmd + V cho MacOS] để dán mã biểu định kiểu từ bước [1] vào giữa và. Nếu có văn bản hiện có, chỉ cần chọn tất cả văn bản ở giữa và dán mã biểu định kiểu vào vị trí của nó
6. Nhấp vào nút Lưu để rời khỏi Trình chỉnh sửa mã nguồn HTML
   
7. Bây giờ bạn có thể thiết kế trang của mình với H1, H2, H3, Bảng, hình ảnh, v.v. trong trình chỉnh sửa D2L và nó sẽ có thiết kế mẫu PCC
8. Khi bạn hoàn tất, nhấp vào nút Lưu và Đóng để lưu trang

Để phát triển web, bạn cần hai chương trình. trình chỉnh sửa để tạo 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

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 là đủ. Nhưng có những trình chỉnh sửa giúp đơ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 trình chỉnh sửa là Visual Studio Code [miễn phí]. Bạn có thể sử dụng trình soạn thảo tùy ý nhưng thỉnh thoảng tôi sẽ đề cập đến một số chức năng của Visual Studio Code [VS Code]. Các lựa chọn thay thế tốt là Atom hoặc Chân đế

Hãy tiếp tục và cài đặt trình chỉnh sửa. Nếu bạn không biết cái nào, hãy sử dụng Visual Studio Code ngay bây giờ

Tiện ích mở rộng của trình chỉnh sửa

Trong khi chúng tôi đang ở đó, chúng tôi sẽ mở rộng mã VS để cung cấp siêu năng lực cho trình chỉnh sửa của chúng tôi. Máy chủ trực tiếp

1. Mở mã Visual Studio

2. Mở menu “Tiện ích mở rộng”
   

3. Nhập “Live Server” vào trường tìm kiếm và cài đặt tiện ích mở rộng
   

4. Tải lại Visual Studio Code để 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 phải chạy trên 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 dành cho nhà phát triển mà bạn sẽ sử dụng thường xuyên

Nếu chưa có Chrome trên máy tính, bạn có thể cài đặt tại đây

Tạo một tài liệu HTML

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

1. Tạo một thư mục trên máy tính cho dự án của bạn. Đặt tên cho thư mục Portfolio [hoặc bất cứ thứ gì bạn muốn]

2. Mở mã VS

3. Mở menu File và chọn Open Folder…. Duyệt tìm thư mục bạn đã tạo và mở nó
   

4. 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

   5.

5. Bây giờ bạn có một tệp văn bản trống tên là

   5.

Tại sao lập chỉ mục. Html?

Bạn có thể cho rằng, cái tên

5 có ý nghĩa đặc biệt. Nếu một địa chỉ trang web được gọi, ví dụ như

8, tệp

5 sẽ tự động được hiển thị đầu tiên, trong trường hợp này là

0. Đối với chúng tôi,

5 đầ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 vào HTML của bạn

Để xem trang, chúng tôi sẽ sử dụng tiện ích mở rộng Live Server mà chúng tôi đã cài đặt ở trên. Nhấp chuột phải vào

5 của bạn [tệp bên dưới thư mục Danh mục đầu tư chứ không phải tệp bên trên trong “Open Editors”]. Sau đó nhấp vào Mở bằng máy chủ trực tiếp. Một cửa sổ trình duyệt sẽ 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, máy chủ trực tiếp sẽ tự động cập nhật chúng

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 một trình duyệt khác thành trình duyệt chuẩn của bạn. Ngoài ra, bạn có thể sao chép địa chỉ [ví dụ:

2] từ một trình duyệt và chèn địa chỉ đó vào một trình duyệt khác

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 bằng

3 hoặc

4

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

thụt đầu dòng

Để giữ cho mã của bạn sạch sẽ, điều quan trọng là bạn phải thụt lề chính xác các dòng bằng phím tab. Hãy chú ý đến mã ví dụ và thụt lề cho 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 là có thể có một cái nhìn rõ ràng

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

5 để di chuyển thụt lề sang trái

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

6 hoặc

5

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

8

Phần tử HTML

Thẻ

Trong ví dụ trên, bạn đã thấy các ký tự HTML điển hình có dấu ngoặc nhọn. Chúng được gọi là thẻ

Các phần tử HTML thường bao gồm [nhưng không phải luôn luôn] hai thẻ, một thẻ mở và một thẻ đóng. Trong ví dụ của chúng ta,

9 là thẻ mở và

00 với dấu gạch chéo là thẻ đóng

Văn bản giữa thẻ mở và thẻ đóng là nội dung của phần tử HTML. Với

9 và

00, chúng tôi cho trình duyệt biết về phần đầu và phần cuối của HTML của trang web của chúng tôi

Thẻ thứ hai chúng ta đã thấy là thẻ

03. Nó tuyên bố rằng tất cả nội dung giữa thẻ

03 mở và thẻ đóng

05 sẽ được hiển thị trong khu vực chính của trình duyệt

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ị

Ví dụ, hãy xem phần tử HTML cho một liên kết. Đây có lẽ là một trong những yếu tố quan trọng nhất — Internet sẽ ra sao nếu không có liên kết?

Phần tử

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

07 [viết tắt của “tham chiếu siêu văn bản”] với giá trị

8. 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 một trang HTML

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

9 và

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

Cấu trúc HTML

0

giải thích

• Luôn đặt
  11 trên dòng đầu tiên. Nó cho trình duyệt biết về loại tài liệu
• Thẻ
  9 cho biết bắt đầu và
  00 cho biết kết thúc của tài liệu
• Phần tử
  14 chứa thông tin bổ sung về trang. Ngược lại với phần tử
  03, thông tin này không xuất hiện trong khu vực chính của trình duyệt
  • Trong
    14, cần có chỉ báo về bộ ký tự.
    17. 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ử
    18 không có thẻ đóng. Có một số phần tử không có thẻ đóng [
    19,
    50, v.v. ], nhưng chúng là ngoại lệ
  • Tiếp theo, bạn sẽ thấy phần tử
    51. Tiêu đề được hiển thị trên thanh tiêu đề ở đầu cửa sổ trình duyệt của bạn
• Mọi thứ bên trong phần tử
  03 được hiển thị trong khu vực chính của trình duyệt
  • Một
    53 xác định tiêu đề chính. Tiêu đề phụ có thể được tạo bằng
    54, ________ 355, ________ 356, ________ 357 và ________ 358
  • Văn bản giữa
    59 và
    50 là một đoạn văn
• Sau mỗi thẻ mở, phần tử tiếp theo nên được thụt vào [có một tab hoặc hai dấu cách] để có cái nhìn tổng quan 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

Mẹo 2. Sử dụng phím tắt

51 để lưu tệp hiện tại

Mẹo 3. Sử dụng phím tắt

52 để hoàn tác

Với những yếu tố HTML cơ bản này, chúng tôi đã chuẩn bị tốt để đưa trang web của mình lên một tầm cao mới. Trước tiên, hãy thêm một hình ảnh để trang chủ của danh mục đầu tư của chúng ta 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ử

50. Ví dụ sau sẽ chèn ảnh của tôi

Phần tử

50 chỉ có một thẻ mở nhưng không có thẻ đóng. Nó chứa thuộc tính

55 và

56. Thuộc tính

55 chỉ định URL, đó là vị trí và tên tệp của hình ảnh. Thuộc tính

56 là “văn bản thay thế”, 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 vì lý do nào đó, hình ảnh không thể hiển thị, chẳng hạn như trên trình đọc màn hình dành cho người mù

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

URL được sử dụng cho thuộc tính

55 của hình ảnh và cũng cho thuộc tính

07 của liên kết. URL chỉ định "địa chỉ" của tệp [ví dụ: trang web khác hoặc 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 một URL tương đối. Như chúng ta đã thấy trong ví dụ trên, đây chỉ là tên của tệp

URL tương đối liên quan đến trang HTML hiện tại hoặc liên quan đến thư mục gốc của trang web của chúng tôi. Để tham chiếu một tệp trong cùng một thư mục, chúng ta chỉ cần sử dụng tên tệp như

51. Nếu tệp đích nằm 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 thư mục con có tên là

52, thì URL tương đối sẽ là

53. Nếu tệp nằm trong thư mục mẹ, bạn có thể truy cập tệp đó bằng

54. URL cho hình ảnh trong trường hợp này sẽ là

55

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ừ thư mục gốc của trang web của mình bằng cách thêm dấu gạch chéo ở đầu

56. Chúng tôi có thể sử dụng tệp 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ừ thư mục gốc. Điều này hữu ích cho các liên kết điều hướng như chúng ta sẽ thấy trong phần sau của hướng dẫn

Nếu tệp nằm trên một trang web khác, phải sử dụng một 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à

57

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

• Trong cùng một thư mục, chúng tôi chỉ sử dụng tên tệp, ví dụ:
  51
• Hai dấu chấm [`. `] tham khảo thư mục mẹ
• Nếu chúng ta muốn bắt đầu trong thư mục gốc, chúng ta thêm `/` trước đường dẫn của tệp, ví dụ:
  56

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

0

Danh mục đầu tư với một hình ảnh

Nếu bạn chưa làm như vậy, hãy thử 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ư trên máy tính của mình. Đả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 tiêu đề phụ và một số văn bản khác]

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

1

Đó là cách danh mục hiện tại trông như thế nào trong trình duyệt

Cái gì tiếp theo?

→ Trong phần tiếp theo, bạn sẽ học 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