Để 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
Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague 0 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í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?
Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague 6 ở 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 HTML
Chú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 HTML
8
giải thích
- Luôn đặt
91 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 phần đầu vàImage Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague
0 phần cuối của tài liệu - Phần tử
94 chứa thông tin bổ sung về trang. Ngược lại với phần tửImage Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague
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
94, cần có chỉ báo về bộ ký tự.
97. 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ử
98 không có thẻ đóng. Có một số phần tử không có thẻ đóng [
99,
30, v.v. ], nhưng chúng là ngoại lệ - Tiếp theo, bạn sẽ thấy phần tử
31. Tiêu đề được hiển thị trên thanh tiêu đề ở đầu cửa sổ trình duyệt của bạn
- Trong
- Mọi thứ bên trong phần tử
Image Gallery My First Blog Entry Back to Image Gallery Blog of a Colleague
3 được hiển thị trong khu vực chính của trình duyệt- Một
33 xác định tiêu đề chính. Tiêu đề phụ có thể được tạo bằng ________ 334, ________ 335, ________ 336, ________ 337 và
38 - Văn bản giữa
39 và______330 là một đoạn văn
- Một
- 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
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 đối
URL đượ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
- Trong cùng một thư mục, chúng tôi chỉ sử dụng tên tệp, ví dụ:
31 - 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ụ:
36
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à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