Làm cách nào để tạo mã 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 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 Show 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 soạn thảo 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ửaTrong 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
trình duyệtTấ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
Tại sao lập chỉ mục. Html?Bạn có thể cho rằng, cái tên 3 có ý nghĩa đặc biệt. Nếu một địa chỉ trang web được gọi, ví dụ như 6, thì tệp 3 sẽ tự động được hiển thị đầu tiên, trong trường hợp này là 8. Đối với chúng tôi, 3 đầ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ớiBâ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 3 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ử HTMLThẻ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à Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague0 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à Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague0, 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ẻ Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague3. Nó nói rằng tất cả nội dung giữa thẻ mở Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague3 và thẻ đóng Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague5 sẽ được hiển thị trong khu vực chính của trình duyệt Thuộc tínhThuộ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ử Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague6 ở trên bao gồm một thuộc tính Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague7 (viết tắt của “tham chiếu siêu văn bản”) với giá trị 6. 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 HTMLChúng ta đã thấy hai yếu tố 9 và Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague3. 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 HTML8 giải thích
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 31 để lưu tệp hiện tại Mẹo 3. Sử dụng phím tắt 32 để 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ử 30. Ví dụ sau sẽ chèn ảnh của tôi Phần tử 30 chỉ có một thẻ mở nhưng không có thẻ đóng. Nó chứa thuộc tính 35 và 36. Thuộc tính 35 chỉ định URL, đó là vị trí và tên tệp của hình ảnh. Thuộc tính 36 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 đốiURL được sử dụng cho thuộc tính 35 của hình ảnh và cũng cho thuộc tính Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague7 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ư 31. 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à 32, thì URL tương đối sẽ là 33. Nếu tệp nằm trong thư mục mẹ, bạn có thể truy cập tệp đó bằng 34. URL cho hình ảnh trong trường hợp này sẽ là 35 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 36. 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 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à 37 Hãy nhớ những điều sau đây về URL
Ví dụ về URL tương đối và tuyệt đối________số 8Danh mục đầu tư với một hình ảnhNế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ành9 Đó 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 |
