Có, bạn chỉ có thể tạo một trang web bằng kiến thức về HTML của bạn. Tôi đã tạo một trang web ví dụ hoàn toàn ra khỏi HTML mà bạn có thể tự kiểm tra. Đây là cách nó trông như thế nào. Show
Bạn có thể xác nhận rằng tôi chưa thêm CSS nào để tạo kiểu trang web. Vì vậy, một trang web HTML chỉ chứa gì?Một trang web chỉ HTML thường có các yếu tố sau:
Trang web sẽ trông tuyệt vời? Không. Bạn không thể mong đợi trang web trông tuyệt vời cho đến khi bạn áp dụng kiểu dáng cho nó. Một trang web HTML sẽ áp dụng kiểu mặc định của trình duyệt mà nó được xem trên. CSS đến để cung cấp cho bạn khả năng thêm thiết kế cụ thể vào trang web. Với các thư viện CSS và CSS, bạn có thể đưa ra các hướng dẫn rõ ràng về cách bạn muốn từng yếu tố HTML riêng lẻ trông như thế nào. Tôi muốn tạo một trang web chỉ có HTML. Tôi nên làm gì?Tôi đã tạo ra một hướng dẫn có thể giúp bạn đạt được điều đó. Bạn có thể tìm hiểu những công cụ bạn nên sử dụng khi xây dựng dự án HTML đầu tiên của mình. HTML có đủ để tạo một trang web không?Nó phụ thuộc vào loại trang web bạn đang tạo. Nếu bạn muốn tạo một trang web đơn giản, hãy tiếp tục và tạo một trang web chỉ với HTML. Nó sẽ hoạt động giống như bất kỳ trang web nào khác. Tuy nhiên, nếu bạn muốn thay đổi cách thiết kế và phong cách của nó, bạn phải tìm đến các thư viện CSS và CSS để làm điều đó. Với CSS, bạn có thể lấy trang web HTML mà bạn đã tạo và thực hiện các cải tiến về nó. Một trang web có thể được thực hiện mà không cần HTML?Có bạn có thể làm trang web mà không biết HTML. Nhờ các hệ thống như CMS (Hệ thống quản lý nội dung) như WordPress, chúng tôi có thể tạo trang web và xuất bản nội dung mà không hiểu cách thức hoạt động của công nghệ cơ bản. Ngay khi chúng tôi lái xe ô tô mà không cần mày mò với họ dưới mui xe. Tuy nhiên, kết quả cuối cùng sẽ được hiển thị trên trình duyệt sẽ là trang HTML. Chào bạn! Tôi là avic ndugu.Avic Ndugu. Tôi đã xuất bản hơn 100 bài đăng trên blog về HTML, CSS, JavaScript, React và các chủ đề liên quan khác. Khi tôi không viết, tôi thích đọc, đi bộ đường dài và nghe podcast. // Sê -ri Hướng dẫn // Cách xây dựng một trang web với HTML Giới thiệuGiới thiệuNếu bạn quan tâm đến việc học cách xây dựng và thiết kế các trang web, ngôn ngữ đánh dấu siêu văn bản (HTML) là một nơi tuyệt vời để bắt đầu. Sê-ri hướng dẫn dựa trên dự án này sẽ giới thiệu cho bạn HTML và các phương thức của nó bằng cách xây dựng một trang web cá nhân bằng trang web trình diễn của chúng tôi (bên dưới) làm mô hình. Khi bạn tìm hiểu những điều cơ bản, bạn sẽ biết cách thay đổi thiết kế trang web và thêm nội dung được cá nhân hóa. Không có kinh nghiệm mã hóa trước là cần thiết để theo dõi các hướng dẫn trong loạt bài này. HTML là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Được phát triển lần đầu tiên bởi Tim Berners Lee vào năm 1990 khi làm việc tại Tổ chức Nghiên cứu Hạt nhân Châu Âu (CERN), HTML là một trong những công nghệ sáng tạo quan trọng được sử dụng để xuất bản trang web đầu tiên trên thế giới vào ngày 6 tháng 8 năm 1991. Nhờ dự án phục hồi của CERN, Bây giờ bạn có thể xem lại trang web gốc. Kể từ thời điểm đó, HTML đã được cập nhật và mở rộng đáng kể nhưng mục đích cơ bản của nó để định dạng và cấu trúc các trang web vẫn giữ nguyên. Ngày nay, HTML là một trong nhiều công cụ được sử dụng để xây dựng web. Biết cách viết HTML sẽ cung cấp một nền tảng vững chắc cho sự nghiệp của bạn với tư cách là một nhà thiết kế web và chuẩn bị cho bạn học các kỹ năng phát triển web phía trước như CSS và JavaScript. Trong chuỗi hướng dẫn này, bạn sẽ học cách tạo và tùy chỉnh một trang web bằng các thẻ và kỹ thuật HTML thông thường. Sau khi hoàn thành hướng dẫn này, bạn sẽ có một trang web sẵn sàng triển khai lên đám mây. Điều kiện tiên quyết
Khi bạn đã sẵn sàng điều kiện tiên quyết của mình, bạn sẽ sẵn sàng thiết lập dự án HTML của mình trong hướng dẫn tiếp theo. Tóm tắt chế độ xem xem chi tiết // Hướng dẫn //Để khám phá HTML trong thực tế và bắt đầu xây dựng một trang web HTML, chúng tôi sẽ cần thiết lập một dự án mới bằng trình chỉnh sửa văn bản. Sê -ri hướng dẫn này sử dụng Code Visual Studio Code, trình soạn thảo mã miễn phí có sẵn cho Mac, Windows hoặc Linux, nhưng bạn có thể sử dụng bất kỳ trình chỉnh sửa mã nào bạn thích. Sau khi mở trình chỉnh sửa văn bản ưa thích của bạn, hãy mở một thư mục dự án mới và đặt tên cho nó 5. Chúng tôi sẽ sử dụng thư mục này để lưu trữ tất cả các tệp và thư mục chúng tôi tạo trong quá trình của loạt hướng dẫn này.Để tạo một thư mục dự án mới trong Code Visual Studio, điều hướng đến mục menu của tệp tệp trong menu trên cùng và chọn thư mục Thêm vào không gian làm việc. Trong cửa sổ mới, nhấp vào nút thư mục mới của Google và tạo một thư mục mới có tên 5 như được minh họa trong GIF dưới đây:Tiếp theo, tạo một tệp mới có tên 7 bên trong thư mục 5. Chúng tôi sẽ sử dụng tệp này thông qua chuỗi hướng dẫn để thử nghiệm HTML. Nếu bạn đang sử dụng mã Visual Studio, bạn có thể tạo một tệp mới bằng cách sử dụng ____ 49 (trên Windows) hoặc 0 (trên MAC) trên thư mục 5, chọn tệp mới và tạo tệp 7 như được minh họa trong GIF dưới đây:Bây giờ bạn có một thư mục dự án và tập tin để khám phá HTML. Chúng tôi sẽ quay lại tập tin này trong các hướng dẫn phía trước. Gỡ lỗi và khắc phục sự cố CSS và HTMLTrước khi chúng tôi bắt đầu với các bài tập HTML của chúng tôi, hãy lưu ý rằng độ chính xác là rất quan trọng khi viết HTML. Ngay cả một không gian bổ sung hoặc nhân vật bị nhầm lẫn cũng có thể giữ cho mã của bạn không hoạt động như mong đợi. Nếu mã HTML của bạn không hiển thị trong trình duyệt như dự định, hãy đảm bảo bạn đã viết chính xác mã. Để khắc phục sự cố lỗi, hãy kiểm tra các không gian bổ sung hoặc thiếu, các thẻ bị thiếu hoặc sai chính tả và các dấu chấm câu bị thiếu hoặc không chính xác. Mỗi lần bạn thay đổi mã, hãy đảm bảo lưu tệp của bạn trước khi tải lại nó trong trình duyệt để kiểm tra kết quả của bạn. Một lưu ý nhanh về các tính năng hỗ trợ HTML tự độngMột số trình chỉnh sửa mã, ví dụ như Trình chỉnh sửa mã Visual Studio mà chúng tôi sử dụng trong loạt bài này cung cấp hỗ trợ tự động để viết mã HTML. Đối với Visual Studio Code, hỗ trợ đó bao gồm các đề xuất thông minh và hoàn thành tự động. Mặc dù hỗ trợ này thường hữu ích, nhưng hãy lưu ý rằng bạn có thể tạo thêm mã sẽ tạo ra lỗi nếu bạn không quen làm việc với các tính năng hỗ trợ này. Nếu bạn tìm thấy các tính năng này gây mất tập trung, bạn có thể tắt chúng trong các tùy chọn của Trình chỉnh sửa mã. Bây giờ chúng tôi đã sẵn sàng để bắt đầu học cách ngôn ngữ CSS hoạt động. Trong hướng dẫn tiếp theo, chúng tôi sẽ bắt đầu khám phá cách các quy tắc CSS được sử dụng để kiểm soát phong cách và bố cục của nội dung HTML trên trang web. // Hướng dẫn //Hướng dẫn này sẽ giới thiệu cho bạn một tài liệu HTML cơ bản và dạy bạn cách xem mã nguồn của tài liệu HTML trong trình duyệt. HTML được sử dụng để đánh dấu một tài liệu với các hướng dẫn cho trình duyệt biết cách hiển thị và diễn giải nội dung tài liệu. Ví dụ, HTML có thể nói cho trình duyệt nào nội dung văn bản nên được hiểu là tiêu đề và nội dung văn bản nào nên được hiểu là các đoạn văn. HTML cũng được sử dụng để thêm hình ảnh và gán liên kết vào văn bản và hình ảnh. Các hướng dẫn này được truyền thông qua các thẻ HTML, được viết như thế này: 3. Nhiều, mặc dù không phải tất cả các thẻ, hãy sử dụng thẻ mở và đóng thẻ để quấn xung quanh nội dung mà chúng được sử dụng để sửa đổi.Để hiểu được cách sử dụng các thẻ này, hãy để kiểm tra một đoạn mã HTML. Mã HTML bên dưới cho thấy cách các thẻ HTML được sử dụng để cấu trúc văn bản và thêm các liên kết và hình ảnh. Don Tiết lo lắng nếu bạn không hiểu các thẻ ngay lập tức- chúng tôi sẽ nghiên cứu những thứ đó trong hướng dẫn tiếp theo.
Mã HTML này được hiển thị trong trình duyệt như sau: Bây giờ bạn sẽ có một sự hiểu biết về cách mã ví dụ HTML được hiển thị trong trình duyệt. Tiếp theo, chúng tôi sẽ tìm hiểu cách xem mã nguồn của bất kỳ trang web nào bằng công cụ trình duyệt. Xem mã nguồn của trang webGần như mọi trang web bạn gặp phải đều sử dụng HTML để cấu trúc và hiển thị các trang HTML. Bạn có thể kiểm tra mã nguồn của bất kỳ trang web nào bằng cách sử dụng trình duyệt web như Firefox hoặc Chrome. Trên Firefox, điều hướng đến mục menu của Công cụ trên mạng trong menu trên cùng và nhấp vào nhà phát triển web/nguồn trang web của Web như vậy: Trên Firefox, bạn cũng có thể sử dụng phím tắt 4 để xem mã nguồn của trang web.Trên Chrome, quá trình này rất giống nhau. Điều hướng đến mục Menu trên cùng, Xem Chế độ xem và nhấp vào Nguồn phát triển/xem của nhà phát triển. Bạn cũng có thể sử dụng phím tắt bàn phím 5.Hãy thử kiểm tra mã nguồn của trang web demo mà chúng tôi sẽ xây dựng trong loạt hướng dẫn này. Bạn sẽ nhận được một trang có nhiều thẻ HTML hơn ví dụ của chúng tôi ở trên. Don Tiết được báo động nếu nó có vẻ quá sức. Đến cuối loạt hướng dẫn này, bạn sẽ hiểu rõ hơn về cách diễn giải mã nguồn HTML và cách sử dụng HTML để xây dựng và tùy chỉnh các trang web của riêng bạn. Lưu ý: Như đã đề cập ở trên, bạn có thể kiểm tra mã nguồn của bất kỳ trang web nào bằng các công cụ từ trình duyệt web Firefox hoặc Chrome. Hãy thử kiểm tra mã của một vài trang web yêu thích của bạn để hiểu về mã cơ bản cấu trúc các tài liệu web. Mặc dù mã nguồn của các trang web này có thể sẽ chứa nhiều ngôn ngữ hơn HTML, việc học HTML trước tiên sẽ giúp chuẩn bị cho bạn học các ngôn ngữ và khung bổ sung để tạo trang web sau này nếu bạn muốn.: As mentioned above, you can inspect the source code of any webpage using tools from the Firefox or Chrome web browser. Try inspecting the code of a few of your favorite websites to get a sense of the underlying code that structures web documents. Though the source code of these sites will likely contain more languages than HTML, learning HTML first will help prepare you to learn additional languages and frameworks for creating websites later on if you wish. Bây giờ bạn sẽ có một sự hiểu biết chung về định dạng của tài liệu HTML và biết cách kiểm tra mã nguồn HTML bằng công cụ trình duyệt. Để hiểu rõ hơn về cách HTML hoạt động, hãy để kiểm tra các thành phần chính của nó. Trong hướng dẫn tiếp theo, chúng tôi sẽ tìm hiểu thêm về các phần tử HTML, các khối xây dựng được sử dụng để tạo các tài liệu HTML. // Hướng dẫn //Các tài liệu HTML bao gồm các phần tử HTML. Hầu hết các phần tử HTML đều chứa nội dung (như văn bản hoặc hình ảnh) cùng với các thẻ HTML cho trình duyệt biết cách diễn giải nội dung (như tiêu đề hoặc văn bản đoạn văn). Các phần tử HTML có thể được sử dụng để thêm cấu trúc, ngữ nghĩa và định dạng cho các phần khác nhau của tài liệu HTML. Một phần tử HTML thường được tạo ra, nhưng không phải lúc nào cũng bằng cách mở và đóng các thẻ HTML, bao quanh một phần nội dung. Dưới đây là một minh họa gắn nhãn cho mỗi phần của phần tử HTML: Hãy thử khám phá HTML trong thực tế. Hãy thử dán dòng sau vào tệp index index.html của bạn mà bạn đã tạo khi thiết lập dự án HTML của mình:
Trong ví dụ này, thẻ 6 thêm định dạng mạnh mẽ bằng cách đặt văn bản với một cặp thẻ mở và đóng 6. Lưu ý rằng các thẻ đóng luôn được biểu thị bằng một dấu gạch chéo phía trước ( 8).Lưu ý: Bạn có thể lưu ý rằng thẻ 6 tag acts very similar to adding bold styling to the text. You can achieve the same
styling effect by using the bold 0 tag, however the 6 tag adds bold styling and semantic meaning that indicates the text is of strong importance. If you are using the bold styling because you want to note the importance of the text, make sure to use the 6 tag, which will enable screen readers to announce their importance to the user.Tương tự, thẻ nhấn mạnh 3 thêm kiểu dáng in nghiêng và ý nghĩa ngữ nghĩa chỉ ra văn bản được nhấn mạnh. Thẻ nghiêng 4 chỉ thêm kiểu chữ in nghiêng vào văn bản. Nếu bạn đang sử dụng kiểu chữ in nghiêng vì bạn muốn nhấn mạnh văn bản, hãy đảm bảo sử dụng thẻ 3, điều này sẽ cho phép người đọc màn hình công bố sự nhấn mạnh của họ với người dùng.Để kiểm tra kết quả của mã HTML này, chúng tôi có thể tải tệp index index.html trong trình duyệt của chúng tôi. Mặc dù tệp của bạn không trực tuyến, trình duyệt vẫn có thể diễn giải tệp HTML như thể đó là tài liệu trang web. Đảm bảo lưu tệp index index.html của bạn trước khi tải nó vào trình duyệt vì chỉ các bản cập nhật được lưu sẽ được hiển thị. Cách xem tệp HTML ngoại tuyến trong trình duyệt của bạnBạn có thể xem tệp HTML ngoại tuyến trong trình duyệt theo nhiều cách:
Nếu bạn đang sử dụng Trình soạn thảo văn bản mã Visual Studio, bạn có thể sao chép đường dẫn tệp bằng 0 (trên Macs) hoặc 9 (trên Windows) trên tệp Index Index.html, trong bảng điều khiển bên trái và chọn đường dẫn sao chép. Sau đó, dán đường dẫn vào trình duyệt web của bạn như được minh họa trong GIF dưới đây:[Lưu ý] Lưu ý: Để tải tệp trong trình duyệt, điều quan trọng là bạn phải sao chép đường dẫn tuyệt đối, (đề cập đến vị trí tệp so với thư mục gốc), thay vì đường dẫn tương đối thư mục làm việc hiện tại). Trong Code Visual Studio, đường dẫn sao chép của Nhật Bản đề cập đến đường dẫn tệp đầy đủ. Tuy nhiên, hãy lưu ý rằng chúng tôi sẽ sử dụng các đường dẫn tương đối của các tệp trong các phần khác của hướng dẫn này.Note: To load the file in the browser, it’s important that you copy the absolute path, (which refers to the file location relative to the root directory), rather than the relative path, (which refers to the file relative to the current working directory). In Visual Studio Code, “Copy Path” refers to the full file path. Be aware, however, that we will use relative paths of files in other parts of this tutorial. Sau khi tải tệp trong trình duyệt của bạn, bạn sẽ nhận được một trang có chứa những điều sau: Văn bản mạnh mẽ của tôi Hãy thử thử nghiệm các yếu tố HTML khác. Trên dòng tiếp theo của tệp thực hành của bạn.html, hãy thử thêm phần tử 3, điều này thêm vào sự nhấn mạnh.
Lưu tệp và tải lại tệp trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Văn bản mạnh mẽ của tôi, văn bản nhấn mạnh của tôi My emphasized text Cụm từ đầu tiên nên được tạo kiểu với định dạng mạnh mẽ và cụm từ thứ hai nên được tạo kiểu với sự nhấn mạnh. Tuy nhiên, bạn có thể ngạc nhiên bởi vị trí cạnh nhau của hai cụm từ. Nếu bạn đã thêm 1 vào dòng thứ hai của trình soạn thảo văn bản, bạn có thể đã mong đợi văn bản nhấn mạnh của tôi để hiển thị trên dòng bên dưới văn bản mạnh mẽ của tôi trong trình duyệt web. Tuy nhiên, một số yếu tố HTML nhất định, chẳng hạn như 6 và 3, yêu cầu bạn chỉ định các mức phá vỡ dòng với các phần tử HTML bổ sung (nếu bạn mong muốn các dòng bị phá vỡ). Chúng tôi sẽ giải thích tại sao trong hướng dẫn tiếp theo.My strong
text” in the web browser. However, certain HTML elements, such as 6 and 3, require you to specify line breaks with additional HTML elements (if you desire lines breaks). We’ll explain why in the next tutorial.// Hướng dẫn //Hướng dẫn này sẽ dạy cho bạn sự khác biệt giữa các yếu tố cấp độ nội tuyến và cấp độ khối trong HTML và cách chúng ảnh hưởng đến một phần của vị trí nội dung trên trang. Khi sắp xếp các yếu tố trong tài liệu HTML, điều quan trọng là phải hiểu làm thế nào các yếu tố này chiếm không gian trên trang web. Một số yếu tố có thể chiếm nhiều không gian hơn trên trang web so với nội dung chúng chứa. Hiểu hành vi của các loại phần tử khác nhau sẽ giúp bạn dự đoán cách chúng ảnh hưởng đến vị trí của các phần tử khác trên trang. Nói chung, có hai loại yếu tố khác nhau của các yếu tố cấp độ và các yếu tố cấp độ khối, người có khoảng cách mặc định hoạt động khác nhau. Dưới đây, chúng tôi sẽ mô tả cách các cài đặt mặc định của các yếu tố này xác định vị trí của chúng trên trang web và liên quan đến vị trí của các yếu tố gần đó. Các yếu tố cấp nội tuyếnCác phần tử nội tuyến là các phần tử có chiều rộng ngang được xác định bởi chiều rộng của nội dung chúng chứa. Phần tử 6 và phần tử 3 mà chúng tôi đề cập trong hướng dẫn cuối cùng là cả hai ví dụ về các yếu tố nội tuyến.Chúng tôi có thể sử dụng thanh tra nhà phát triển web Firefox, để kiểm tra kích thước của các yếu tố HTML trên trang web. . Quay lại tệp 7 mà bạn đã tải trong trình duyệt của mình. Nếu bạn cần tải lại và không nhớ cách nào, hãy tham khảo các hướng dẫn tải tệp HTML trong trình duyệt của bạn từ hướng dẫn cuối cùng.Sau đó điều hướng đến mục menu Công cụ trong thanh menu trên cùng và chọn Nhà phát triển/Thanh tra Web Web. Chọn mục menu này sẽ mở giao diện Thanh tra cho phép bạn kiểm tra HTML và CSS của trang web. Tiếp theo, di chuột con trỏ của bạn qua văn bản 7, sẽ làm nổi bật văn bản màu xanh nhạt. Điểm nổi bật này cho thấy toàn bộ phạm vi của không gian bị chiếm bởi yếu tố mà con trỏ của bạn đang lơ lửng. Như bạn có thể mong đợi, không gian chiếm phần của phần tử chỉ đủ lớn để chứa nội dung văn bản của nó:Không giống như các yếu tố cấp khối, mà chúng tôi sẽ bao gồm trong phần tiếp theo, các phần tử nội tuyến không chiếm được dòng không gian ngang của riêng chúng. Do đó, các phần tử nội tuyến sẽ được đặt cạnh nhau trên trang web nếu bạn không chỉ định ngắt với phần tử HTML bổ sung, chẳng hạn như phần tử ngắt dòng 8. Mặc định kích thước này thường thuận tiện, vì bạn có thể muốn đánh dấu các từ đơn trong một đoạn có phần tử nội tuyến như 6 hoặc 3 mà không cần đẩy văn bản tiếp theo vào dòng tiếp theo.Hãy thử thêm thẻ 8 ở giữa hai dòng mã của bạn trong tệp 7. .
Lưu và tải lại tài liệu trong trình duyệt của bạn để kiểm tra kết quả của bạn. Bạn sẽ nhận được một cái gì đó như thế này: Văn bản mạnh mẽ của tôi, văn bản nhấn mạnh của tôi My emphasized text Hai cụm từ của bạn bây giờ sẽ nằm trên các dòng riêng biệt vì chúng được phân tách bằng phần tử ngắt dòng 8.Nếu bạn sử dụng Thanh tra Nhà phát triển Web Firefox để kiểm tra kích thước của các phần tử, bạn có thể xác nhận rằng chiều rộng của từng phần tử văn bản vẫn được xác định bởi chiều rộng của nội dung văn bản: ! [Kiểm tra phần tử một lần nữa] (https://assets. Các yếu tố cấp khốiCác phần tử cấp khối hoạt động khác với các yếu tố cấp nội tuyến ở chỗ chúng chiếm toàn bộ một dòng không gian ngang trên trang web. Điều này có nghĩa là họ tự động bắt đầu trên một dòng mới và họ cũng tự động đẩy các yếu tố tiếp theo vào một dòng mới. Ví dụ: các phần tử tiêu đề HTML ( 5 đến 6) là các phần tử cấp khối tự động đặt nội dung của chúng lên một dòng mới và đẩy bất kỳ nội dung nào theo dòng mới. Mỗi trong số sáu yếu tố tiêu đề này đại diện cho một kích thước tiêu đề khác nhau.Hãy để nghiên cứu cách thức hoạt động này trong thực tế. Ở dưới cùng của tệp 7 của bạn, hãy thử dán trong đoạn mã được tô sáng:
Lưu tệp của bạn và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Bây giờ, hãy để kiểm tra các yếu tố tiêu đề cấp khối để nghiên cứu cách chúng khác với các yếu tố văn bản ở cấp độ nội tuyến ở trên. Mở Thanh tra Nhà phát triển Web Firefox và di chuột qua từng yếu tố để kiểm tra không gian bị chiếm đóng của họ như được chỉ ra bởi màu xanh nổi bật. Bạn sẽ có thể xác nhận rằng không gian ngang bị chiếm đóng của từng phần tử cấp nội tuyến được xác định bởi nội dung văn bản của nó, trong khi không gian ngang bị chiếm đóng của từng phần tử cấp khối trải dài trên toàn bộ trang web: Các phần tử cấp khối sẽ luôn đẩy các phần tử cấp nội tuyến xuống dòng tiếp theo, ngay cả khi bạn viết các phần tử HTML đó trên cùng một dòng của tài liệu HTML. Để xác nhận điều này cho chính bạn, hãy thử viết một phần tử cấp khối và phần tử cấp nội tuyến trên cùng một dòng tệp 7 của bạn. Xóa nội dung hiện có khỏi tệp của bạn và thêm đoạn mã sau:
Bạn có thể đoán được mã HTML này sẽ hiển thị như thế nào trong trình duyệt không? Lưu tệp của bạn và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Lưu ý rằng phần tử tiêu đề 5 đã bắt đầu trên một dòng mới và đẩy phần tử văn bản tiếp theo vào một dòng mới mặc dù các phần tử được viết trên cùng một dòng trong tài liệu HTML.Bây giờ bạn nên có một sự hiểu biết về cách các yếu tố cấp độ nội tuyến và cấp độ khối được định vị và cách chúng ảnh hưởng đến vị trí của các yếu tố gần đó. Ghi nhớ các hành vi riêng biệt của họ có thể hữu ích khi sắp xếp các yếu tố HTML trong tương lai. Chúng tôi sẽ tiếp tục tìm hiểu về các yếu tố nội tuyến và chặn mới trong các hướng dẫn phía trước. // Hướng dẫn //Hướng dẫn này sẽ dạy bạn cách làm tổ các phần tử HTML để áp dụng nhiều thẻ HTML cho một phần nội dung duy nhất. Các phần tử HTML có thể được lồng, có nghĩa là một phần tử có thể được đặt bên trong một phần tử khác. Nesting cho phép bạn áp dụng nhiều thẻ HTML cho một phần nội dung duy nhất. Ví dụ: hãy thử dán đoạn mã sau trong tệp 7 của bạn:
Lưu tệp của bạn và tải lại nó trong trình duyệt. . Văn bản táo bạo của tôi và văn bản táo bạo và nhấn mạnh của tôi Làm tổ thực hành tốt nhấtLưu ý rằng chúng tôi nên luôn đóng các thẻ lồng nhau theo thứ tự ngược lại mà chúng đã được mở. Ví dụ: trong ví dụ dưới đây, thẻ 3 đóng đầu tiên vì đây là thẻ cuối cùng mở. Thẻ 6 đóng cuối cùng vì đây là thẻ đầu tiên mở.For example, in the example below, the 3 tag closes first as it was the last tag to open. The 6 tag closes last as it was the first to open.
Ví dụ như một ví dụ, mã HTML sau đây chứa các thẻ không được lồng theo các thông lệ tốt nhất, vì thẻ 6 đóng trước thẻ 3:
Mặc dù về mặt kỹ thuật không cần thiết để hiển thị HTML của bạn trong trình duyệt, việc tổ chức các thẻ của bạn theo đúng thứ tự có thể giúp cải thiện khả năng đọc mã HTML của bạn cho bạn hoặc các nhà phát triển khác. // Hướng dẫn //Hướng dẫn này sẽ dạy bạn cách làm tổ các phần tử HTML để áp dụng nhiều thẻ HTML cho một phần nội dung duy nhất. Các phần tử HTML có thể được lồng, có nghĩa là một phần tử có thể được đặt bên trong một phần tử khác. Nesting cho phép bạn áp dụng nhiều thẻ HTML cho một phần nội dung duy nhất. Ví dụ: hãy thử dán đoạn mã sau trong tệp 7 của bạn:
Lưu tệp của bạn và tải lại nó trong trình duyệt. . Văn bản táo bạo của tôi và văn bản táo bạo và nhấn mạnh của tôiLàm tổ thực hành tốt nhất 0Lưu ý rằng chúng tôi nên luôn đóng các thẻ lồng nhau theo thứ tự ngược lại mà chúng đã được mở. Ví dụ: trong ví dụ dưới đây, thẻ 3 đóng đầu tiên vì đây là thẻ cuối cùng mở. Thẻ 6 đóng cuối cùng vì đây là thẻ đầu tiên mở.
Chúng ta có thể thay đổi nhiều thuộc tính của một phần tử 5 với thuộc tính kiểu. Xóa tệp index index.html của bạn và dán mã bên dưới vào trình duyệt của bạn. .Trước khi chúng tôi tải tệp trong trình duyệt của mình, hãy để xem xét từng phần của phần tử HTML này: <element attribute="property:value;"> 9 là tên của thẻ. Nó đề cập đến yếu tố tiêu đề lớn nhất. 6 là thuộc tính. Thuộc tính này có thể lấy một loạt các thuộc tính khác nhau.// Hướng dẫn //Cách thêm hình ảnh vào trang web của bạn bằng HTMLXuất bản vào ngày 28 tháng 7 năm 2020 · Cập nhật vào ngày 9 tháng 8 năm 2021 Trong hướng dẫn này, chúng tôi sẽ học cách sử dụng HTML để thêm hình ảnh trên trang web. Chúng tôi cũng sẽ học cách thêm văn bản thay thế vào hình ảnh để cải thiện khả năng truy cập cho khách truy cập trang web sử dụng đầu đọc màn hình. Thêm một hình ảnh với HTMLHình ảnh được thêm vào một tài liệu HTML bằng phần tử 13. Phần tử 13 yêu cầu thuộc tính 17 cho phép bạn đặt vị trí của tệp nơi lưu trữ hình ảnh. Một yếu tố hình ảnh được viết như thế này: 1Lưu ý rằng phần tử 13 không sử dụng thẻ 19 đóng. Để thử sử dụng phần tử 13, hãy tải xuống hình ảnh của Sammy the Shark và đặt nó vào thư mục dự án của bạn 21Lưu ý: Để tải xuống hình ảnh của Sammy the Shark, hãy truy cập liên kết và 0 (on Macs) or 9 (on Windows) on the image and select “Save Image As” and save it
as 24 to your project directory.Tiếp theo, xóa nội dung của tệp 7 của bạn và dán 26 vào tệp. .Sau đó, sao chép đường dẫn tệp của hình ảnh và thay thế 28 bằng vị trí của hình ảnh đã lưu của bạn. Nếu bạn đang sử dụng trình soạn thảo văn bản Visual Studio Code, bạn có thể sao chép đường dẫn tệp bằng cách sử dụng 0 (trên Macs) hoặc 9 (trên Windows) trên tệp hình ảnh 24 trong bảng điều khiển bên trái và chọn đường dẫn sao chép. Để biết minh họa của quy trình, vui lòng xem GIF dưới đây:Lưu ý: Đảm bảo sao chép đường dẫn tệp tương đối hoặc dự án của hình ảnh thay vì đường dẫn tệp tuyệt đối hoặc đầy đủ của hình ảnh. Đường dẫn tương đối đề cập đến vị trí tệp so với thư mục làm việc hiện tại (trái ngược với đường dẫn tuyệt đối, đề cập đến vị trí tệp so với thư mục gốc.) Trong khi cả hai đường dẫn sẽ hoạt động trong trường hợp này, chỉ có đường dẫn tương đối sẽ hoạt động Nếu chúng tôi quyết định xuất bản trang web của chúng tôi trực tuyến. Vì mục tiêu cuối cùng của chúng tôi là tạo một trang web có thể xuất bản, chúng tôi sẽ bắt đầu sử dụng các đường dẫn tương đối ngay bây giờ khi thêm các yếu tố 13 elements to our document.Lưu tệp 7 của bạn và tải lại nó trong trình duyệt của bạn. Bạn sẽ nhận được một cái gì đó như thế này:Về mặt kỹ thuật, bạn cũng có thể sử dụng các liên kết đến hình ảnh được lưu trữ trực tuyến dưới dạng đường dẫn tệp. Để hiểu cách thức hoạt động của nó, hãy thử thay thế vị trí hình ảnh bằng một liên kết đến hình ảnh của chúng tôi về Sammy the Shark như thế này: 2Lưu tệp của bạn và tải lại nó trong trình duyệt. Hình ảnh vẫn sẽ tải trong tài liệu web của bạn, nhưng lần này hình ảnh được lấy từ vị trí trực tuyến của nó thay vì thư mục dự án địa phương của bạn. Bạn có thể thử nghiệm thêm các hình ảnh trực tuyến khác bằng cách sử dụng các liên kết vị trí của chúng làm thuộc tính 17 trong thẻ 13.Tuy nhiên, khi xây dựng một trang web, thường thì tốt hơn là lưu trữ hình ảnh của bạn trong thư mục dự án của bạn để đảm bảo tính bền vững của trang web. Nếu hình ảnh được gỡ xuống bởi máy chủ của nó hoặc nếu địa chỉ của nó thay đổi, nó sẽ không còn hiển thị trên trang web của bạn. Văn bản thay thế cho khả năng truy cậpKhi thêm một hình ảnh, bạn phải luôn bao gồm văn bản thay thế mô tả nội dung của nó bằng thuộc tính 36. Văn bản này thường không được hiển thị trên trang web nhưng được người đọc màn hình sử dụng để truyền đạt nội dung cho khách truy cập trang web bị suy giảm trực quan. 3Khi thêm văn bản thay thế, hãy ghi nhớ các thực tiễn tốt nhất sau:
Bây giờ bạn nên có sự quen thuộc với cách thêm hình ảnh vào tài liệu HTML của bạn và cách thêm văn bản thay thế để hỗ trợ khả năng truy cập. Chúng tôi sẽ học cách thay đổi kích thước và kiểu hình ảnh trong hướng dẫn cách thêm hình ảnh hồ sơ vào trang web của bạn sau này trong loạt bài. Trong hướng dẫn tiếp theo, chúng tôi sẽ học cách thêm các liên kết vào tài liệu HTML. // Hướng dẫn //Hướng dẫn này sẽ hướng dẫn bạn qua các bước thêm siêu liên kết vào trang web của bạn. Siêu liên kết có thể được thêm vào văn bản hoặc hình ảnh với phần tử liên kết neo 12. Thẻ 12 yêu cầu thuộc tính 41, được sử dụng để chỉ định liên kết đích. Phần tử 12 được sử dụng như thế này: 4Hãy thử thêm đoạn mã bên dưới vào tệp index index.html của bạn và thay đổi văn bản được tô sáng mẫu bằng một liên kết thực, chẳng hạn như 43: 5. Bạn sẽ nhận được một đầu ra như thế này: Bạn cũng có thể liên kết hình ảnh bằng cách gói một phần tử hình ảnh với một phần tử như vậy: 6Hãy thử kiểm tra đoạn mã trong trình duyệt của bạn để kiểm tra xem nó có hoạt động không. Bây giờ bạn sẽ hiểu cách thêm siêu liên kết vào văn bản và hình ảnh trên trang web của bạn. // Hướng dẫn //Cách sử dụng A, phần tử phân chia nội dung HTMLXuất bản vào ngày 28 tháng 7 năm 2020 · Cập nhật vào ngày 9 tháng 8 năm 2021 Phần tử phân chia nội dung HTML ( 14) hoạt động như một container để cấu trúc một trang web thành các thành phần riêng biệt cho kiểu dáng riêng lẻ. Hướng dẫn này sẽ dạy bạn cách tạo và tạo kiểu container 14 trên trang web của bạn.Bản thân, phần tử 14 ít ảnh hưởng đến bố cục của trang và thường được cung cấp các thuộc tính để điều chỉnh kích thước, màu sắc, vị trí hoặc các tính năng khác của nó. Thông thường, các nhà phát triển theo phong cách 14 Các yếu tố với CSS, nhưng hướng dẫn này sẽ cung cấp cho bạn sự hiểu biết về cách các yếu tố 14 hoạt động bằng cách tạo kiểu cho chúng trực tiếp trong một tài liệu HTML.Phần tử 14 được tạo kiểu với thuộc tính HTML 6. Như đã trình bày trong ví dụ dưới đây, phần tử 14 có thể chứa nhiều thuộc tính kiểu: 7Lưu ý rằng phần tử 14 có thẻ mở và đóng nhưng không yêu cầu bất kỳ nội dung nào. Để hiểu cách thức hoạt động của phần tử 14, hãy xóa tệp 7 của bạn và dán mã bên dưới. . 8Lưu tệp và tải lại nó trong trình duyệt. . Bạn cũng có thể thêm nội dung vào phần tử 14 bằng cách thêm nội dung giữa các thẻ mở và đóng 14. Thử thêm văn bản vào giữa các thẻ 14 của bạn như vậy: 9Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Bạn cũng có thể đặt 14 container bên trong các container 14. Hãy thử thêm một thùng chứa màu vàng 14 bên trong thùng chứa 14 màu đỏ như vậy: 0Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Bạn cũng có thể đặt 14 container bên trong các container 14. Hãy thử thêm một thùng chứa màu vàng 14 bên trong thùng chứa 14 màu đỏ như vậy: 1Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Bạn cũng có thể đặt 14 container bên trong các container 14. Hãy thử thêm một thùng chứa màu vàng 14 bên trong thùng chứa 14 màu đỏ như vậy:// Hướng dẫn //Cách sử dụng A, phần tử phân chia nội dung HTML Xuất bản vào ngày 28 tháng 7 năm 2020 · Cập nhật vào ngày 9 tháng 8 năm 2021 Phần tử phân chia nội dung HTML ( 14) hoạt động như một container để cấu trúc một trang web thành các thành phần riêng biệt cho kiểu dáng riêng lẻ. Hướng dẫn này sẽ dạy bạn cách tạo và tạo kiểu container 14 trên trang web của bạn. 2Bản thân, phần tử 14 ít ảnh hưởng đến bố cục của trang và thường được cung cấp các thuộc tính để điều chỉnh kích thước, màu sắc, vị trí hoặc các tính năng khác của nó. Thông thường, các nhà phát triển theo phong cách 14 Các yếu tố với CSS, nhưng hướng dẫn này sẽ cung cấp cho bạn sự hiểu biết về cách các yếu tố 14 hoạt động bằng cách tạo kiểu cho chúng trực tiếp trong một tài liệu HTML.Phần tử 14 được tạo kiểu với thuộc tính HTML 6. Như đã trình bày trong ví dụ dưới đây, phần tử 14 có thể chứa nhiều thuộc tính kiểu:Lưu ý rằng phần tử 14 có thẻ mở và đóng nhưng không yêu cầu bất kỳ nội dung nào. Để hiểu cách thức hoạt động của phần tử 14, hãy xóa tệp 7 của bạn và dán mã bên dưới. .Lưu tệp và tải lại nó trong trình duyệt. . 3Bạn cũng có thể thêm nội dung vào phần tử 14 bằng cách thêm nội dung giữa các thẻ mở và đóng 14. Thử thêm văn bản vào giữa các thẻ 14 của bạn như vậy:Bạn sẽ nhận được một cái gì đó như thế này: Màu của thùng chứa 14 được sửa đổi bằng cách sử dụng thuộc tính 6 và thuộc tính 82 như vậy: 4Hãy thử viết mã này trong tệp 7 của bạn và tải nó vào trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:Trong các ví dụ này, giá trị màu được xác định bằng tên màu. Hãy thử thay đổi màu của văn bản, đường viền hình ảnh và các yếu tố 14 bằng cách sử dụng các tên màu sau: 85, 86, 87, 88, 89, 90 .Lưu ý rằng màu sắc cũng có thể được chỉ định bởi các giá trị thập lục phân. Một màu thập lục phân bao gồm sáu chữ số chữ và số trước một biểu tượng pound, chẳng hạn như 01 (màu xanh), 02 (màu ngọc lam) hoặc 03 (bạc). Tuy nhiên, đối với loạt hướng dẫn này, chúng tôi sẽ tiếp tục sử dụng tên màu.Bây giờ bạn nên có một sự quen thuộc cơ bản với cách thay đổi màu sắc của văn bản, đường viền hình ảnh và các yếu tố 14 bằng tên màu. Chúng tôi sẽ trở lại màu sắc sau này trên loạt hướng dẫn khi chúng tôi bắt đầu xây dựng trang web của mình.// Hướng dẫn //
Điều đầu tiên cần làm khi tạo một dự án trang web mới là tạo một thư mục dự án (hoặc thư mục) để lưu trữ tất cả các tệp sẽ được tạo trong quy trình. Hướng dẫn này sẽ hướng dẫn bạn qua các bước thiết lập các thư mục và tệp cần thiết để xây dựng trang web của bạn với HTML. Đối với dự án trang web này, chúng tôi có thể tiếp tục sử dụng thư mục dự án 5 và tệp 7 mà chúng tôi đã tạo trước đó trong loạt hướng dẫn. .Lưu ý: Nếu bạn quyết định chọn tên của riêng mình cho thư mục, hãy đảm bảo tránh không gian ký tự, ký tự đặc biệt (như!, #, %Hoặc người khác) và chữ in hoa, vì những điều này có thể gây ra vấn đề sau này.: If you decide to choose your own name for the directory, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on. Tiếp theo, chúng tôi sẽ định dạng tệp 7 để đóng vai trò là trang chủ của trang web. Bước đầu tiên trong việc định dạng một tài liệu web là thêm khai báo 09 vào dòng đầu tiên. Đảm bảo tệp 7 của bạn rõ ràng và sau đó thêm 09 để dòng đầu tiên của tài liệu.Tuyên bố này cho biết trình duyệt loại HTML nào đang được sử dụng và rất quan trọng để khai báo vì có nhiều phiên bản của HTML. Trong tuyên bố này, 12 chỉ định tiêu chuẩn web hiện tại của HTML, đó là HTML5.Tiếp theo, chúng tôi sẽ thêm phần tử 13 bằng cách thêm các thẻ mở và đóng 13. Phần tử 13 cho trình duyệt biết rằng tất cả nội dung mà nó chứa đều được dự định sẽ được đọc là HTML. Bên trong thẻ này, chúng tôi cũng sẽ thêm thuộc tính 16, trong đó chỉ định ngôn ngữ của trang web. Trong ví dụ này, chúng tôi sẽ chỉ định rằng trang web của chúng tôi bằng tiếng Anh bằng thẻ ngôn ngữ 17. Để biết danh sách đầy đủ các thẻ ngôn ngữ, hãy truy cập sổ đăng ký phụ IANA.Tài liệu của bạn bây giờ trông như thế này: 5Từ thời điểm này trở đi, tất cả nội dung mà chúng tôi thêm vào trang web của chúng tôi sẽ được thêm vào giữa các thẻ mở và đóng 13.Chúng tôi sẽ bắt đầu thêm nội dung vào trang web của chúng tôi trong hướng dẫn tiếp theo. // Hướng dẫn //Điều đầu tiên cần làm khi tạo một dự án trang web mới là tạo một thư mục dự án (hoặc thư mục) để lưu trữ tất cả các tệp sẽ được tạo trong quy trình. Hướng dẫn này sẽ hướng dẫn bạn qua các bước thiết lập các thư mục và tệp cần thiết để xây dựng trang web của bạn với HTML.Đối với dự án trang web này, chúng tôi có thể tiếp tục sử dụng thư mục dự án 5 và tệp 7 mà chúng tôi đã tạo trước đó trong loạt hướng dẫn. .Lưu ý: Nếu bạn quyết định chọn tên của riêng mình cho thư mục, hãy đảm bảo tránh không gian ký tự, ký tự đặc biệt (như!, #, %Hoặc người khác) và chữ in hoa, vì những điều này có thể gây ra vấn đề sau này. Tiếp theo, chúng tôi sẽ định dạng tệp 19 element is a semantic element in that it tells the browser and the developer the meaning or purpose of its content. Semantic elements are used to aid human readability of an HTML document, provide the browser further information for interpreting the content, improve site
accessibility (screen readers use semantic tags), and can assist with SEO positioning.Tuyên bố này cho biết trình duyệt loại HTML nào đang được sử dụng và rất quan trọng để khai báo vì có nhiều phiên bản của HTML. Trong tuyên bố này, 12 chỉ định tiêu chuẩn web hiện tại của HTML, đó là HTML5. 6Tiếp theo, chúng tôi sẽ thêm phần tử 13 bằng cách thêm các thẻ mở và đóng 13. Phần tử 13 cho trình duyệt biết rằng tất cả nội dung mà nó chứa đều được dự định sẽ được đọc là HTML. Bên trong thẻ này, chúng tôi cũng sẽ thêm thuộc tính 16, trong đó chỉ định ngôn ngữ của trang web. Trong ví dụ này, chúng tôi sẽ chỉ định rằng trang web của chúng tôi bằng tiếng Anh bằng thẻ ngôn ngữ 17. Để biết danh sách đầy đủ các thẻ ngôn ngữ, hãy truy cập sổ đăng ký phụ IANA.Bây giờ, hãy tạm dừng ngắn gọn để hiểu mục đích của mã mà chúng tôi vừa thêm vào. Dòng mã sau khi mở thẻ 19 ____________ 230 Chỉ định ký tự tài liệu được đặt thành UTF-8, một định dạng Unicode hỗ trợ phần lớn các ký tự từ nhiều ngôn ngữ viết khác nhau.Dòng mã tiếp theo đặt tiêu đề tài liệu HTML bằng cách sử dụng phần tử 25. Nội dung bạn chèn vào phần tử này sẽ được hiển thị trên tab Trình duyệt và là tiêu đề của trang web trong kết quả tìm kiếm, nhưng nó sẽ không hiển thị trên chính trang web. Hãy chắc chắn để thay thế trang web đầu tiên của Sammy Sammy bằng tên của bạn hoặc tên của trang web mà bạn đang xây dựng.Mặc dù các nhà phát triển thường thêm thông tin bổ sung trong phần 19, nhưng giờ đây chúng tôi có đủ thông tin để tạo trang web HTML cơ bản. Lưu tệp của bạn trước khi chuyển sang phần tiếp theo. Nếu bạn thử tải tệp trong trình duyệt của mình, bạn sẽ nhận được một trang trống.Bây giờ bạn sẽ biết mục đích của các phần tử HTML và cách thêm một vào tệp HTML. // Hướng dẫn //Trong hướng dẫn này, chúng tôi sẽ đi qua các bước liên quan đến việc thêm favicon vào trang web của bạn bằng HTML. Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích cho favicon của mình, nhưng hãy nhớ rằng những hình ảnh đơn giản, có độ tương phản cao thường hoạt động tốt nhất với kích thước nhỏ của Favicon. Bạn cũng có thể tạo một favicon tùy chỉnh thông qua các trang web như favicon.cc. Favicon là một hình ảnh nhỏ nằm trong tab Trình duyệt ở bên trái của tiêu đề trang web. Hình ảnh dưới đây minh họa vị trí của một favicon. Để thêm favicon vào trang web của bạn, hãy tạo một thư mục trong thư mục dự án của bạn có tên là 33 (nếu bạn không có) và lưu hình ảnh favicon mong muốn của bạn trong thư mục này. Nếu bạn không có hình ảnh, bạn sẽ tải xuống hình ảnh cá mập Sammy này mà chúng tôi đã lưu trữ trên trang web trình diễn của chúng tôi. .Tiếp theo, thêm phần tử 34 (được tô sáng bên dưới) vào tệp 7 của bạn ngay bên dưới phần tử 25. Mã của bạn bây giờ sẽ như thế này: 7Đảm bảo thay thế 37 bằng đường dẫn tệp tương đối của hình ảnh favicon của bạn. Lưu tệp 7 và tải lại trong trình duyệt web của bạn. Tab trình duyệt của bạn bây giờ nên chứa hình ảnh favicon.Bây giờ bạn nên biết cách thêm hình ảnh Favicon vào các trang web bằng HTML. // Hướng dẫn //Trong hướng dẫn này, chúng tôi sẽ đi qua các bước liên quan đến việc thêm favicon vào trang web của bạn bằng HTML. Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích cho favicon của mình, nhưng hãy nhớ rằng những hình ảnh đơn giản, có độ tương phản cao thường hoạt động tốt nhất với kích thước nhỏ của Favicon. Bạn cũng có thể tạo một favicon tùy chỉnh thông qua các trang web như favicon.cc.Favicon là một hình ảnh nhỏ nằm trong tab Trình duyệt ở bên trái của tiêu đề trang web. Hình ảnh dưới đây minh họa vị trí của một favicon. Để thêm favicon vào trang web của bạn, hãy tạo một thư mục trong thư mục dự án của bạn có tên là 33 (nếu bạn không có) và lưu hình ảnh favicon mong muốn của bạn trong thư mục này. Nếu bạn không có hình ảnh, bạn sẽ tải xuống hình ảnh cá mập Sammy này mà chúng tôi đã lưu trữ trên trang web trình diễn của chúng tôi. .Tiếp theo, thêm phần tử 34 (được tô sáng bên dưới) vào tệp 7 của bạn ngay bên dưới phần tử 25. Mã của bạn bây giờ sẽ như thế này: 8Đảm bảo thay thế 37 bằng đường dẫn tệp tương đối của hình ảnh favicon của bạn. Lưu tệp 7 và tải lại trong trình duyệt web của bạn. Tab trình duyệt của bạn bây giờ nên chứa hình ảnh favicon.Bây giờ bạn nên biết cách thêm hình ảnh Favicon vào các trang web bằng HTML. // Hướng dẫn //Trong hướng dẫn này, chúng tôi sẽ đi qua các bước liên quan đến việc thêm favicon vào trang web của bạn bằng HTML. Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích cho favicon của mình, nhưng hãy nhớ rằng những hình ảnh đơn giản, có độ tương phản cao thường hoạt động tốt nhất với kích thước nhỏ của Favicon. Bạn cũng có thể tạo một favicon tùy chỉnh thông qua các trang web như favicon.cc. Favicon là một hình ảnh nhỏ nằm trong tab Trình duyệt ở bên trái của tiêu đề trang web. Hình ảnh dưới đây minh họa vị trí của một favicon. Để thêm favicon vào trang web của bạn, hãy tạo một thư mục trong thư mục dự án của bạn có tên là 33 (nếu bạn không có) và lưu hình ảnh favicon mong muốn của bạn trong thư mục này. Nếu bạn không có hình ảnh, bạn sẽ tải xuống hình ảnh cá mập Sammy này mà chúng tôi đã lưu trữ trên trang web trình diễn của chúng tôi. .// Hướng dẫn //Trong hướng dẫn này, chúng tôi sẽ đi qua các bước liên quan đến việc thêm favicon vào trang web của bạn bằng HTML. Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích cho favicon của mình, nhưng hãy nhớ rằng những hình ảnh đơn giản, có độ tương phản cao thường hoạt động tốt nhất với kích thước nhỏ của Favicon. Bạn cũng có thể tạo một favicon tùy chỉnh thông qua các trang web như favicon.cc. Favicon là một hình ảnh nhỏ nằm trong tab Trình duyệt ở bên trái của tiêu đề trang web. Hình ảnh dưới đây minh họa vị trí của một favicon. Để thêm favicon vào trang web của bạn, hãy tạo một thư mục trong thư mục dự án của bạn có tên là 33 (nếu bạn không có) và lưu hình ảnh favicon mong muốn của bạn trong thư mục này. Nếu bạn không có hình ảnh, bạn sẽ tải xuống hình ảnh cá mập Sammy này mà chúng tôi đã lưu trữ trên trang web trình diễn của chúng tôi. .Tiếp theo, thêm phần tử 34 (được tô sáng bên dưới) vào tệp 7 của bạn ngay bên dưới phần tử 25. Mã của bạn bây giờ sẽ như thế này: 9Đảm bảo thay thế 37 bằng đường dẫn tệp tương đối của hình ảnh favicon của bạn. Lưu tệp 7 và tải lại trong trình duyệt web của bạn. Tab trình duyệt của bạn bây giờ nên chứa hình ảnh favicon.Lưu ý rằng chúng tôi đã thêm nhận xét 57 để giúp tổ chức mã HTML của chúng tôi. Một nhận xét là một đoạn mã bị bỏ qua bởi trình duyệt. Nhận xét được sử dụng để giúp giải thích hoặc sắp xếp mã cho các nhà phát triển. Chúng được tạo với thẻ mở 58 và thẻ đóng 59.Chúng tôi cũng đã chỉ định 60 đến 480 pixel và 61 đến 80 pixel, sẽ tạo ra 80 pixel không gian giữa phần trên của phần tử 14 và bất kỳ nội dung nào chúng tôi đặt bên trong. Lưu ý rằng bạn sẽ không thể thấy các hiệu ứng của giá trị 61 cho đến khi chúng tôi đặt nội dung bên trong bước tiếp theo.Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Thay phiên, bạn có thể sử dụng màu nền thay vì hình nền. Để sử dụng màu nền, hãy thay thế đoạn mã phần tử 14 mà bạn vừa tạo bằng đoạn mã phần tử 14 được đánh dấu sau đây như thế này: 0Lưu tệp và tải lại nó trong trình duyệt để kiểm tra kết quả của bạn. Hình ảnh nền bây giờ nên được thay thế bằng một thùng chứa có cùng kích thước nhưng có màu vàng rắn. Nếu bạn so sánh container 14 trên trang web của mình với cùng một container 14 trên trang web trình diễn, bạn có thể nhận thấy rằng trang web của bạn container 14 của bạn được bao quanh bởi một biên độ nhỏ của không gian trắng. Biên độ này là do thực tế là tất cả các trang HTML được đặt tự động có biên độ nhỏ theo mặc định.Để loại bỏ lề này, chúng ta cần thêm một thuộc tính kiểu vào thẻ 39 mở đặt lề của phần tử 39 của trang HTML thành 0 pixel. Xác định vị trí 39 trong tệp 7 của bạn và sửa đổi nó bằng mã được tô sáng:Lưu và tải lại tệp trong trình duyệt của bạn. Bây giờ nên không có lề trắng xung quanh container 14 trên cùng.Bây giờ bạn sẽ biết cách thêm một thùng chứa 14 với hình ảnh nền để cấu trúc phần trên cùng của trang web.// Hướng dẫn //Trong hướng dẫn này, chúng tôi sẽ đi qua các bước thêm và tạo kiểu cho hình ảnh hồ sơ hàng đầu như được hiển thị trong trang web trình diễn. Trước khi chúng tôi bắt đầu, bạn có thể muốn chọn một bức ảnh hồ sơ cá nhân để bao gồm trên trang web của bạn. Nếu bạn không có ảnh hồ sơ, bạn có thể sử dụng bất kỳ hình ảnh nào cho mục đích trình diễn hoặc tạo hình đại diện thông qua một trang web như getavataaars.com. Nếu không, bạn có thể sử dụng hình ảnh từ trang web trình diễn của chúng tôi bằng cách tải xuống hình ảnh ở đây. . Khi bạn đã chọn một hình ảnh, hãy lưu nó dưới dạng 75 trong thư mục 76 của bạn.Dán phần yếu tố 13 được tô sáng sau ở giữa các thẻ mở và đóng 14 bạn đã tạo trong hướng dẫn cuối cùng như vậy: 1Đảm bảo chuyển địa chỉ 17 được tô sáng với đường dẫn tệp của hình ảnh hồ sơ của bạn. Lưu ý rằng chúng tôi cũng đang sử dụng thuộc tính 6 để chỉ định chiều cao của hình ảnh thành 150 pixel. Phần tử 13 không yêu cầu thẻ đóng.Lưu và tải lại trang trong trình duyệt để kiểm tra kết quả của bạn. Bạn sẽ nhận được những điều sau: Hình ảnh hồ sơ của bạn sẽ xuất hiện dưới dạng 150 pixel với chiều cao mà chúng tôi đã chỉ định với thuộc tính 6. Nó cũng phải được đặt 80 pixel dưới đỉnh của thùng chứa 14, với thuộc tính 84 mà chúng tôi đã chỉ định cho thùng chứa 14 trong hướng dẫn trước. Tiếp theo, hãy để thêm các thuộc tính vào thuộc tính 6 của chúng tôi sẽ cung cấp cho hình ảnh của chúng tôi một hình dạng hình tròn và đường viền màu vàng. Chúng tôi cũng sẽ thêm văn bản thay thế để cải thiện khả năng truy cập cho khách truy cập trang web sử dụng đầu đọc màn hình.Thêm các thuộc tính được tô sáng vào phần tử 13 của bạn: 2Hãy chắc chắn rằng bạn vẫn có đường dẫn tệp chính xác của hình ảnh được liệt kê là địa chỉ 17. Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:
Trước khi tiếp tục, hãy để tạm dừng một thời gian ngắn để nghiên cứu các sửa đổi mã mà chúng tôi vừa thực hiện. Đặt giá trị 89 thành 50% mang lại cho hình ảnh hình dạng hình tròn. Đặt giá trị đường viền thành 90 mang lại cho hình ảnh một đường viền chắc chắn rộng 10 pixel và có giá trị màu thập lục phân 91Bây giờ bạn sẽ biết cách thêm và tạo kiểu hình ảnh hồ sơ vào trang web của bạn với HTML. Bây giờ chúng tôi đã sẵn sàng để thêm một tiêu đề và phụ đề vào trang web trong hướng dẫn tiếp theo. // Hướng dẫn //Trong hướng dẫn này, chúng tôi sẽ đi qua các bước thêm và tạo kiểu cho hình ảnh hồ sơ hàng đầu như được hiển thị trong trang web trình diễn.Trước khi chúng tôi bắt đầu, bạn có thể muốn chọn một bức ảnh hồ sơ cá nhân để bao gồm trên trang web của bạn. Nếu bạn không có ảnh hồ sơ, bạn có thể sử dụng bất kỳ hình ảnh nào cho mục đích trình diễn hoặc tạo hình đại diện thông qua một trang web như getavataaars.com. Nếu không, bạn có thể sử dụng hình ảnh từ trang web trình diễn của chúng tôi bằng cách tải xuống hình ảnh ở đây. . Trong hướng dẫn này, chúng tôi sẽ thêm và tạo kiểu tiêu đề và phụ đề cho trang chủ của chúng tôi. Đối với trang trình diễn, chúng tôi sử dụng tên Sammy, và tiêu đề chuyên nghiệp Sammy, nhưng bạn có thể thêm bất kỳ nội dung nào ở đây mà bạn thích. Đối với nội dung này, chúng tôi sẽ sử dụng phần tử tiêu đề 5, phần tử đoạn 71 và yếu tố nhấn mạnh 3.Dán đoạn mã được tô sáng sau đây sau khi cấu hình 13 của bạn và trước khi đóng thẻ 56: 3Đảm bảo thay đổi văn bản với thông tin của riêng bạn. Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Các yếu tố được sử dụng trong đoạn mã này áp dụng một số kiểu dáng ánh sáng cho tiêu đề và phụ đề của chúng tôi. Tuy nhiên, chúng tôi sẽ cần thêm các giá trị phong cách bổ sung nếu chúng tôi muốn phong cách tiêu đề và phụ đề của chúng tôi để phù hợp với phong cách của trang trình diễn. Để thực hiện các sửa đổi này, chúng tôi sẽ thêm thuộc tính 6 vào các yếu tố này để đặt các thuộc tính bổ sung. Thêm các thuộc tính được tô sáng vào các phần tử 5 và 71 của bạn như đã được trình bày trong đoạn mã sau: 4Lưu tệp của bạn và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này: Các thuộc tính kiểu này điều chỉnh kích thước phông chữ thành 30 pixel và thay đổi màu phông chữ thành màu trắng. Chúng tôi cũng đã thêm một biên độ 10 pixel vào phần tử 5.Bây giờ bạn sẽ biết cách thêm và tạo kiểu tiêu đề và phụ đề vào trang web của bạn với HTML. Trong hướng dẫn tiếp theo, chúng tôi sẽ học cách tạo và liên kết đến một trang web bổ sung trên trang web của bạn. // Hướng dẫn //Cách tạo các trang web bổ sung trên trang web HTML của bạnXuất bản vào ngày 29 tháng 7 năm 2020 · Cập nhật vào ngày 9 tháng 8 năm 2021 Khi xây dựng một trang web, bạn có thể muốn có nhiều hơn một trang web. Nếu bạn muốn thêm và liên kết đến các trang bổ sung, trước tiên bạn sẽ cần tạo tệp 12 mới trong thư mục dự án trang web của bạn. Trong hướng dẫn này, chúng tôi sẽ học cách tạo và liên kết đến một trang web bổ sung trên trang web của bạnTrang web trình diễn của chúng tôi bao gồm một trang web về Giới thiệu về các trang web. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn qua quá trình tạo và liên kết đến một trang web về Giới thiệu về các trang web, nhưng bạn có thể thay đổi tiêu đề và nội dung của trang này để phù hợp với nhu cầu của bạn. Để thêm một trang mới vào trang web của bạn, hãy tạo một tệp mới có tên 02 và lưu nó vào thư mục dự án của bạn 5. .Lưu ý: Nếu bạn quyết định chọn tên của riêng mình cho tệp, hãy đảm bảo tránh không gian ký tự, ký tự đặc biệt (chẳng hạn như!, #, %Hoặc những người khác) và chữ in hoa vì những điều này có thể gây ra vấn đề sau này. Bạn cũng phải bao gồm tiện ích mở rộng 05 extension.Tiếp theo, bạn sẽ cần định dạng tệp bằng cách thêm thông tin giúp trình duyệt diễn giải nội dung tệp. Để định dạng tệp, hãy thêm đoạn mã sau ở đầu tài liệu: 5Đảm bảo thay đổi văn bản được tô sáng với một tiêu đề bạn muốn cho trang của bạn. Để được giải thích về từng thẻ HTML, vui lòng truy cập hướng dẫn trước đó trong loạt bài này thêm phần tử HTML vào trang web của bạn. Lưu tệp trước khi bạn tiếp tục. Trước khi thêm bất kỳ nội dung nào vào trang này, hãy để Lừa đi qua các bước thêm liên kết vào trang này trên trang chủ của bạn. Đầu tiên, hãy quay lại tệp 7 của bạn và thêm đoạn trích sau đây bên dưới phụ đề của trang web của bạn và trên thẻ 56 đóng: 6Thay đổi đường dẫn tệp được tô sáng sang đường dẫn tệp tương đối của tệp về.html của bạn. Đường dẫn tương đối đề cập đến vị trí tệp liên quan đến thư mục làm việc hiện tại (trái ngược với đường dẫn tuyệt đối, đề cập đến vị trí tệp so với thư mục gốc.) Nếu bạn đang sử dụng Trình chỉnh sửa văn bản mã Visual Studio, bạn có thể sao chép Đường dẫn tệp tương đối của 0 (trên MAC) hoặc đường dẫn tương đối 09Copy.`Lưu ý rằng chúng tôi cũng đã chỉ định một kích thước phông chữ và màu bằng cách sử dụng thuộc tính 6. Lưu tệp 7 của bạn và tải lại nó trong trình duyệt.Bây giờ bạn nên có một liên kết hướng đến trang web 02 của bạn như thế này:Nếu bạn nhận được lỗi, hãy đảm bảo rằng tệp của bạn nằm trong cùng thư mục dự án với tệp 7 của bạn và không có lỗi nào trong đường dẫn dự án của bạn.Bây giờ bạn sẽ biết cách tạo và liên kết đến một trang web mới trên trang web của bạn. Bạn có thể sử dụng các bước tương tự để tạo và liên kết đến các trang web bổ sung trên trang web của mình. Bạn cũng có thể thêm nội dung vào bất kỳ trang web mới nào giống như cách bạn đang học cách thêm nội dung vào trang chủ của bạn. // Hướng dẫn //Căn chỉnh nội dung vào trung tâm, trái hoặc bên phải có thể hữu ích để sắp xếp nội dung trên trang của bạn. Trong hướng dẫn này, chúng tôi sẽ học cách căn chỉnh văn bản bằng HTML. Để căn chỉnh văn bản trên webage, chúng ta có thể sử dụng thuộc tính 6 và thuộc tính 15Ví dụ: đoạn mã sau sẽ tập trung vào văn bản văn bản văn bản mẫu: 7Để căn chỉnh nội dung HTML của bạn sang bên trái hoặc bên phải, bạn sẽ thay thế 16 bằng 17 hoặc 18.Trong hướng dẫn này, chúng tôi sẽ trải qua quá trình sử dụng thuộc tính 19 để tập trung các hình ảnh và văn bản ở phần trên cùng của trang web của chúng tôi như được minh họa trong trang web trình diễn của chúng tôi.Để tập trung vào nội dung này, chúng tôi sẽ thêm thuộc tính 19 vào phần tử 14 chứa hình ảnh nền, hình ảnh hồ sơ, tiêu đề, phụ đề và liên kết trong phần trên cùng của trang chủ.Xác định vị trí phần tử 14 này trong tệp 7 của bạn và thêm văn bản được tô sáng như vậy: 8Chỉ sao chép và thêm thuộc tính 19 được tô sáng vì các phần khác của mã HTML này sẽ không cụ thể cho dự án của bạn. Lưu tệp của bạn và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:Bây giờ bạn nên hiểu cách tập trung và căn chỉnh văn bản và có một phần trông giống như phần trên cùng của trang trình diễn. Trong hướng dẫn tiếp theo, chúng tôi sẽ tái tạo phần giữa của trang trình diễn. // Hướng dẫn //Làm thế nào để tạo cơ thể của trang chủ của bạn với HTMLXuất bản vào ngày 29 tháng 7 năm 2020 · Cập nhật vào ngày 9 tháng 8 năm 2021 Trong hướng dẫn này, chúng tôi sẽ tạo lại phần thân hoặc phần giữa của trang web trình diễn của chúng tôi bằng các thuộc tính HTML 14 và HTML 6.Phần giữa của trang web trình diễn của chúng tôi chứa một hình ảnh hồ sơ lớn và một đoạn văn bản ngắn được hiển thị cạnh nhau. Chúng ta có thể đạt được bố cục này bằng cách sử dụng các container 14 mà chúng ta đã học được trong một hướng dẫn trước đây trong loạt bài này. Lưu ý rằng nếu bạn tiếp tục học các kỹ năng mặt trước như CSS, có các phương pháp cải tiến để sắp xếp nội dung trên trang web xây dựng dựa trên các phương pháp mà chúng tôi sẽ sử dụng trong hướng dẫn này.Cách thêm hình ảnh hồ sơ lớn vào trang web của bạnĐầu tiên, chúng tôi sẽ thêm một hình ảnh hồ sơ lớn như được hiển thị trong trang trình diễn. Trước khi chúng tôi bắt đầu, hãy đảm bảo bạn đã chọn một hình ảnh hồ sơ lớn hoặc hình ảnh khác để sử dụng. Chúng tôi sẽ hiển thị hình ảnh của chúng tôi ở mức 400 x 600 pixel, vì vậy hãy đảm bảo kích thước hình ảnh của bạn sẽ hoạt động với các kích thước đó. Nếu bạn không có hình ảnh, bạn có thể tải xuống hình ảnh từ trang web demo của chúng tôi. Khi bạn có hình ảnh của mình, hãy lưu nó trong thư mục hình ảnh của bạn. . Tiếp theo, sao chép đoạn mã sau sau khi đóng cuối cùng 56 và trước khi đóng thẻ 39 trong tệp index index.html của bạn: 9Hãy để tạm dừng ngắn gọn để xem lại từng phần của đoạn mã này:
Lưu tệp index index.html của bạn và tải lại nó trong trình duyệt. Phần bên dưới phần trên cùng của trang web của bạn bây giờ sẽ trông như thế này: Nếu bạn có lỗi, hãy kiểm tra để đảm bảo rằng bạn đã thêm tất cả mã HTML trong khu vực chính xác của tệp 7 và hình ảnh của bạn nằm trong đường dẫn tệp bạn đã chỉ định với thuộc tính 17.Cách thêm phần "về tôi" vào trang web của bạnTiếp theo, chúng tôi sẽ thêm một đoạn văn bản ở bên phải của hình ảnh. Hãy thoải mái thay thế văn bản giả trong ví dụ này bằng văn bản của sự lựa chọn của riêng bạn. Chúng tôi sẽ tạo phần văn bản này bằng cách tạo container 14 và chèn nội dung văn bản bên trong.Trong tệp index index.html của bạn, hãy thêm đoạn mã sau sau khi hình ảnh bạn đã thêm vào bước trên và trước khi đóng thẻ 54: 0Hãy để tạm dừng ngắn gọn để xem lại từng phần của đoạn mã này:
Lưu tệp index index.html của bạn và tải lại nó trong trình duyệt. Phần bên dưới phần trên cùng của trang web của bạn bây giờ sẽ trông như thế này: Hình ảnh và văn bản của bạn bây giờ nên được hiển thị khi chúng ở trong trang web trình diễn. Bạn có thể điều chỉnh các thuộc tính kiểu trong đoạn mã để thay đổi chiều cao, lề, kích thước phông chữ hoặc các thuộc tính kiểu khác trong nội dung của bạn. Lưu ý rằng nếu chế độ xem trình duyệt của bạn bị thu hẹp rộng rãi, văn bản của bạn cuối cùng sẽ chảy vào các yếu tố khác trên trang của bạn. Để tạo bố cục đáp ứng với một loạt các thiết bị, bạn sẽ cần phải học thêm các kỹ năng đầu tiên như CSS (Sê -ri Hướng dẫn sắp ra mắt) và Flexbox. Bây giờ bạn sẽ có một sự hiểu biết về cách sắp xếp hình ảnh và văn bản cạnh nhau bằng cách sử dụng các thùng chứa 14, thuộc tính 6 và các thuộc tính kiểu. Trong hướng dẫn tiếp theo và cuối cùng của loạt bài, chúng tôi sẽ học cách tạo một chân trang web với phần tử HTML 55.// Hướng dẫn //Một trang web trang web là khối cuối cùng của nội dung ở cuối trang web. Footers có thể chứa bất kỳ loại nội dung HTML nào, bao gồm văn bản, hình ảnh và liên kết. Trong hướng dẫn cuối cùng của loạt bài này, chúng tôi sẽ tạo chân trang cơ bản sau đây cho trang web của chúng tôi bằng phần tử 55:Để bắt đầu, hãy dán đoạn mã sau sau khi đóng thẻ 56 của bạn và trước khi bạn đóng thẻ 54: 1Trong đoạn trích này, 59 là một nhận xét sẽ không được đọc bởi trình duyệt và được sử dụng để giúp tổ chức tệp 12 của chúng tôi cho mục đích đọc của con người. Bên dưới nhận xét này, chúng tôi đã thêm một phần tử 55, chỉ định màu nền của nó và sử dụng thuộc tính kiểu để đặt chiều cao của nó để tự động điều chỉnh theo nội dung bên trong. Phần tử 55 là một yếu tố ngữ nghĩa trong đó tên của nó cho nhà phát triển biết mục đích của nội dung. Điều này rất hữu ích cho các nhà phát triển cũng như cho khách truy cập trang web sử dụng đầu đọc màn hình. Mặt khác, phần tử 55 hoạt động giống như một phần tử 14.
Chúng tôi cũng đã thêm nội dung văn bản và một biểu tượng cảm xúc bên trong phần tử 5. Hãy thay đổi nội dung văn bản này với một thông điệp và biểu tượng cảm xúc mà bạn chọn.Lưu tệp của bạn và tải lại nó trong trình duyệt để kiểm tra kết quả. Bạn sẽ nhận được một cái gì đó như thế này: Lưu ý rằng nội dung chân trang của chúng tôi không giống như trang trong trang trình diễn. Nội dung chân trang của chúng tôi có lề dưới cùng và văn bản có kiểu dáng khác nhau. Để loại bỏ lề dưới cùng và tạo kiểu văn bản, hãy thêm các thuộc tính được tô sáng vào phần tử 5 của bạn như vậy: 2Lưu tệp và tải lại nó trong trình duyệt. Bây giờ bạn nên có một chân trang được tạo kiểu theo cách tương tự như trang trình diễn được hình ảnh ở đầu hướng dẫn này. Trong hướng dẫn này, bạn đã học được cách tạo và tạo kiểu chân trang. Bây giờ bạn có thể khám phá việc thêm các loại nội dung và kiểu dáng khác nhau vào chân trang của bạn bằng cách sử dụng các yếu tố từ loạt hướng dẫn này. // Hướng dẫn //Một trang web trang web là khối cuối cùng của nội dung ở cuối trang web. Footers có thể chứa bất kỳ loại nội dung HTML nào, bao gồm văn bản, hình ảnh và liên kết. Trong hướng dẫn cuối cùng của loạt bài này, chúng tôi sẽ tạo chân trang cơ bản sau đây cho trang web của chúng tôi bằng phần tử 55:Để bắt đầu, hãy dán đoạn mã sau sau khi đóng thẻ 56 của bạn và trước khi bạn đóng thẻ 54:Trong đoạn trích này, 59 là một nhận xét sẽ không được đọc bởi trình duyệt và được sử dụng để giúp tổ chức tệp 12 của chúng tôi cho mục đích đọc của con người. Bên dưới nhận xét này, chúng tôi đã thêm một phần tử 55, chỉ định màu nền của nó và sử dụng thuộc tính kiểu để đặt chiều cao của nó để tự động điều chỉnh theo nội dung bên trong. Phần tử 55 là một yếu tố ngữ nghĩa trong đó tên của nó cho nhà phát triển biết mục đích của nội dung. Điều này rất hữu ích cho các nhà phát triển cũng như cho khách truy cập trang web sử dụng đầu đọc màn hình. Mặt khác, phần tử 55 hoạt động giống như một phần tử 14.Chúng tôi cũng đã thêm nội dung văn bản và một biểu tượng cảm xúc bên trong phần tử This sentence contains HTML elements that are <strong><em>not nested according to best practices</strong></em>. 5. Hãy thay đổi nội dung văn bản này với một thông điệp và biểu tượng cảm xúc mà bạn chọn.Lưu tệp của bạn và tải lại nó trong trình duyệt để kiểm tra kết quả. Bạn sẽ nhận được một cái gì đó như thế này: Lưu ý rằng nội dung chân trang của chúng tôi không giống như trang trong trang trình diễn. Nội dung chân trang của chúng tôi có lề dưới cùng và văn bản có kiểu dáng khác nhau. Để loại bỏ lề dưới cùng và tạo kiểu văn bản, hãy thêm các thuộc tính được tô sáng vào phần tử 5 của bạn như vậy:Lưu tệp và tải lại nó trong trình duyệt. Bây giờ bạn nên có một chân trang được tạo kiểu theo cách tương tự như trang trình diễn được hình ảnh ở đầu hướng dẫn này. 3Trong hướng dẫn này, bạn đã học được cách tạo và tạo kiểu chân trang. Bây giờ bạn có thể khám phá việc thêm các loại nội dung và kiểu dáng khác nhau vào chân trang của bạn bằng cách sử dụng các yếu tố từ loạt hướng dẫn này.
Siêu dữ liệu này sẽ dẫn đến một thẻ Twitter trông giống như sau: Để biết thêm thông tin về các thẻ và tùy chọn thẻ Twitter khác, hãy truy cập tài liệu thẻ Twitter chính thức. Thêm siêu dữ liệu biểu đồ mở vào trang webGiao thức đồ thị mở là một tiêu chuẩn mở cho siêu dữ liệu mà nhiều trang web sử dụng để hiển thị các bản xem trước liên kết phong phú cho người dùng của họ. Các trang web như Facebook, LinkedIn và Pinterest sử dụng biểu đồ mở để hiển thị các liên kết. Đánh dấu cho biểu đồ mở tương tự như thẻ Twitter: một số thẻ 26 trong 19 của tài liệu HTML của bạn. Một tập hợp tối thiểu các thẻ đồ thị mở được hiển thị bên dưới: 4Đặt các thẻ này vào 19 của tài liệu HTML của bạn, cập nhật các phần được tô sáng khi cần thiết. Các thẻ bạn cần là:
Thông tin thêm về giao thức đồ thị mở có sẵn trên trang web Giao thức đồ thị mở chính thức. Kiểm tra siêu dữ liệu trang webCó một vài công cụ bạn có thể sử dụng để xem trước cách các thẻ meta của bạn sẽ hiển thị trên một trang web. Trình gỡ lỗi đồ thị mở là một trình giả lập không chính thức hiển thị cả thẻ Twitter và thông tin đồ thị mở và không yêu cầu sử dụng tài khoản. Tất cả các trình xác nhận chính thức sau đây đều yêu cầu bạn đăng nhập vào dịch vụ của họ trước khi sử dụng:
Nhiều trang web khác có công cụ tương tự. Nếu một trang web hoặc cộng đồng quan trọng đối với bạn hoặc doanh nghiệp của bạn, hãy tìm tài liệu nhà phát triển của họ để xem họ có cung cấp một dịch vụ tương tự để kiểm tra không. Bây giờ bạn đã biết cách thiết lập một bộ siêu dữ liệu tối thiểu để hiển thị định dạng liên kết phong phú trên các trang web xã hội khác nhau. Tham khảo thẻ Twitter và tài liệu đồ thị mở để biết thêm thông tin chi tiết. Sự kết luậnSự kết luậnXin chúc mừng, bây giờ bạn đã xây dựng một trang web bằng HTML. Bây giờ bạn nên làm quen với cách các phần tử, thẻ, bộ chia nội dung và thuộc tính HTML hoạt động và biết cách cấu trúc các trang web HTML, văn bản định dạng và thêm hình ảnh, liên kết và nhận xét. Hãy tiếp tục sửa đổi trang web của bạn bằng cách thêm nội dung và kiểu dáng bổ sung. Đối với một số ý tưởng bắt đầu, bạn có thể quan tâm đến:
Để tìm hiểu cách xuất bản trang web của bạn miễn phí bằng nền tảng ứng dụng DigitalOcean, hãy truy cập hướng dẫn của chúng tôi cách triển khai một trang web tĩnh lên đám mây với nền tảng ứng dụng Digital Ocean. Nếu bạn quan tâm đến việc phát triển hơn nữa các kỹ năng phát triển trang web của mình, chúng tôi khuyên bạn nên làm theo loạt hướng dẫn của chúng tôi cách xây dựng một trang web với CSS. Bản thân, HTML bị giới hạn trong khả năng của nó và không có nghĩa là được sử dụng để tạo kiểu cho một trang web. Ngày nay, hầu hết các trang web được phát triển với HTML và CSS, ngôn ngữ biểu định kiểu tầng, cùng với một số công cụ và khung khác. Khi bạn có sự hiểu biết cơ bản về HTML và CSS, bạn sẽ sẵn sàng khám phá nhiều công cụ phát triển web thú vị khác có thể được sử dụng cùng với chúng. Bạn muốn dạy loạt bài này trong một hội thảo từ xa hoặc trực tiếp? Kiểm tra cách xây dựng một trang web của chúng tôi với bộ dụng cụ hội thảo HTML có mọi thứ bạn cần để dạy một hội thảo chín mươi phút, bao gồm các slide, ghi chú loa và trang đích để giúp người tham gia bắt đầu. Kiểm tra tất cả các chuỗi hướng dẫn của chúng tôi Muốn tìm hiểu thêm? Tham gia cộng đồng DigitalOcean!Tham gia cộng đồng DigitalOcean của chúng tôi miễn phí hơn một triệu nhà phát triển! Nhận trợ giúp và chia sẻ kiến thức trong phần Câu hỏi & Câu trả lời của chúng tôi, tìm hướng dẫn và công cụ sẽ giúp bạn phát triển như một nhà phát triển và mở rộng quy mô dự án hoặc doanh nghiệp của bạn, và đăng ký các chủ đề quan tâm. Đăng ký Tôi có thể xây dựng một trang web chỉ có HTML không?Câu trả lời ngắn gọn là có, bạn có thể xây dựng một trang web đơn giản chỉ với HTML và CSS.Tuy nhiên, nếu bạn muốn bắt đầu xây dựng một số trang web thực sự tuyệt vời và linh hoạt hơn trong những gì bạn có thể làm, bạn cần sử dụng JavaScript, ngôn ngữ phụ trợ, lưu trữ web và cơ sở dữ liệu.yes, you can build a simple website with just HTML and CSS. However, if you want to start building some really cool websites, and have more flexibility in what you can do, you need to use JavaScript, a backend language, web hosting, and databases.
HTML có tốt cho việc tạo trang web không?HTML tĩnh là tốt để xây dựng một trang web cơ bản.Tuy nhiên, bạn cần thực hiện một chút mã hóa nếu bạn muốn cập nhật nội dung của mình và bạn cần viết lại CSS của mình nếu bạn muốn thay đổi diện mạo của trang web của mình.Chi phí bảo trì cao là không thể tránh khỏi nếu bạn muốn xây dựng trang web của mình bằng HTML.. However, you need to do a little coding if you want to update your content, and you need to rewrite your CSS if you want to change your site's appearance. A high maintenance cost is inevitable if you want to build your website using HTML.
Bạn có thể tạo một trang web miễn phí với HTML không?Trình tạo trang web Appy Pie cho phép bạn tạo các trang web dựa trên HTML mà không cần mã hóa.Nhờ bộ chuyển đổi phụ trợ của chúng tôi, tất cả các trang web bạn tạo đều tự động HTML.Tất cả những gì bạn cần làm là chọn các tính năng bạn muốn trong trang web HTML của bạn.. Thanks to our backend converter, all websites you create are automatically HTML. All you need to do is choose the features you want in your HTML website. |