Hướng dẫn how to create a website using html only - cách tạo một trang web chỉ bằng html
|
// Sê -ri Hướng dẫn // Show
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ó Để 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 Tiếp theo, tạo một tệp mới có tên 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: Để 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 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 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ẻ Lưu ý: Bạn có thể lưu ý rằng thẻ Tương tự, thẻ nhấn mạnh Để 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 [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ử 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 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ử 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 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 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 Hãy thử thêm thẻ 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 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 ( 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 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 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 đề 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 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ẻ For example, in the example below, the 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ẻ 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 //Các thuộc tính HTML có thể được sử dụng để thay đổi màu sắc, kích thước và các tính năng khác của các phần tử HTML. Ví dụ: bạn có thể sử dụng một thuộc tính để thay đổi màu hoặc kích thước của phông chữ cho phần tử văn bản hoặc chiều rộng và chiều cao cho phần tử hình ảnh. Trong hướng dẫn này, chúng tôi sẽ học cách sử dụng các thuộc tính HTML để đặt các giá trị cho các thuộc tính kích thước và màu của các phần tử văn bản HTML. Một thuộc tính HTML được đặt trong thẻ mở như thế này: Một thuộc tính phổ biến là Sử dụng thuộc tính kiểuChúng ta có thể thay đổi nhiều thuộc tính của một phần tử 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:
Lưu ý rằng các thuộc tính và giá trị được chứa bởi các dấu ngoặc kép và mỗi cặp Lưu tệp và tải lại nó trong trình duyệt của bạn. (Để biết hướng dẫn tải tệp trong trình duyệt của bạn, hãy xem hướng dẫn của chúng tôi ở đây.) Bạn sẽ nhận được một cái gì đó như thế này: Văn bản này là 40 pixel và màu xanh lá cây.Bây giờ bạn đã học được cách sử dụng thuộc tính Các thuộc tính HTML có thể được sử dụng để thay đổi màu sắc, kích thước và các tính năng khác của các phần tử HTML. Ví dụ: bạn có thể sử dụng một thuộc tính để thay đổi màu hoặc kích thước của phông chữ cho phần tử văn bản hoặc chiều rộng và chiều cao cho phần tử hình ảnh. Trong hướng dẫn này, chúng tôi sẽ học cách sử dụng các thuộc tính HTML để đặt các giá trị cho các thuộc tính kích thước và màu của các phần tử văn bản HTML.Một thuộc tính HTML được đặt trong thẻ mở như thế này: Một thuộc tính phổ biến là Sử dụng thuộc tính kiểuChúng ta có thể thay đổi nhiều thuộc tính của một phần tử 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:
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ố Lưu tệp 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: Lư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 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 Khi 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 Hã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ư . 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: Hã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 //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 Hã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ư . Bạn sẽ nhận được một đầu ra như thế này: Lưu ý rằng phần tử Lư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ử 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: Bạn cũng có thể đặt 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: Bạn cũng có thể đặt 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: Bạn cũng có thể đặt Bây giờ bạn nên có một sự hiểu biết cơ bản về cách thức hoạt động của // Hướng dẫn // Bạn có thể sử dụng HTML để sửa đổi màu của một số yếu tố và phần nội dung của trang web. Ví dụ: bạn có thể thay đổi màu của văn bản, đường viền hoặc được thể hiện trong hướng dẫn về phân chia nội dung HTML của một yếu tố Trong hướng dẫn này, bạn sẽ học cách thay đổi màu của văn bản, đường viền hình ảnh và các yếu tố Màu của các phần tử văn bản, chẳng hạn như Hãy thử viết mã này trong tệp Bạn sẽ nhận được một cái gì đó như thế này: Đây là văn bản màu xanh. Màu của các phần tử văn bản, chẳng hạn như Hãy thử viết mã này trong tệp Bạn sẽ nhận được một cái gì đó như thế này: Đây là văn bản màu xanh. Màu của đường viền được sửa đổi bằng cách sử dụng thuộc tính Hãy thử viết mã này trong tệp
Bây giờ bạn nên có một sự hiểu biết cơ bản về cách thức hoạt động của Đố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 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 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, Tiếp theo, chúng tôi sẽ thêm phần tử Tài liệu của bạn bây giờ trông như thế này: Từ 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 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 //Cách thêm phần tử HTML vào trang web của bạnXuấ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 Hướng dẫn này sẽ hướng dẫn bạn qua các bước để thêm phần tử Lưu ý: Phần tử HTML Thêm thẻ mở và đóng Lưu ý rằng bạn đã lồng một loạt các yếu tố HTML bên trong nhau. Các phần tử 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ẻ Dòng mã tiếp theo đặt tiêu đề tài liệu HTML bằng cách sử dụng phần tử Mặc dù các nhà phát triển thường thêm thông tin bổ sung trong phần 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 //Cách thêm phần tử HTML vào trang web của bạn 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 Để 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à Tiếp theo, thêm phần tử Đảm bảo thay thế 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 //Cách tạo kiểu cho phần tử 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ử HTML Để thêm phần tử Bây giờ bạn sẽ hiểu mục đích của một phần tử HTML và hiểu cách thêm một phần vào tệp HTML của bạn. Trong bước tiếp theo, chúng tôi sẽ bắt đầu thêm nội dung trang web của mình giữa các thẻ Cách tạo kiểu cho phần tử 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ử HTML Cách tạo kiểu cho phần tử 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ử HTML Để thêm phần tử Bây giờ bạn sẽ hiểu mục đích của một phần tử HTML và hiểu cách thêm một phần vào tệp HTML của bạn. Trong bước tiếp theo, chúng tôi sẽ bắt đầu thêm nội dung trang web của mình giữa các thẻ Bây giờ chúng tôi sẽ bắt đầu thêm nội dung bằng cách sao chép phần trên cùng của trang web trình diễn. Phần trên cùng này bao gồm một hình ảnh nền lớn, hình ảnh hồ sơ nhỏ, tiêu đề văn bản, đầu phụ văn bản và một liên kết. Mỗi phần nội dung này được tạo kiểu và định vị với HTML. Trong các hướng dẫn còn lại của loạt bài này, chúng tôi sẽ học cách sử dụng HTML để tạo lại nội dung này trên một trang web mới. Trong hướng dẫn này, chúng tôi sẽ học cách sử dụng container Trước khi chúng tôi bắt đầu, chúng tôi sẽ cần một hình ảnh nền. Bạn có thể tải xuống và sử dụng hình ảnh nền của trang web trình diễn của chúng tôi cho mục đích hướng dẫn hoặc bạn có thể chọn một hình ảnh mới. . Để loại bỏ lề này, chúng ta cần thêm một thuộc tính kiểu vào thẻ 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 Bây giờ bạn sẽ biết cách thêm một thùng chứa 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 Dán phần yếu tố Đảm bảo chuyển địa chỉ 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 Thêm các thuộc tính được tô sáng vào phần tử Hã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ỉ 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ị Bâ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. . Khi bạn đã chọn một hình ảnh, hãy lưu nó dưới dạng Dán phần yếu tố Đảm bảo chuyển địa chỉ 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 Thêm các thuộc tính được tô sáng vào phần tử Hã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ỉ 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ị Bâ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 //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 Trang 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 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 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: Đả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 Thay đổ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 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 Bây giờ bạn nên có một liên kết hướng đến trang web 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 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 Ví 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: Để 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ế 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 Để tập trung vào nội dung này, chúng tôi sẽ thêm thuộc tính Xác định vị trí phần tử Chỉ sao chép và thêm thuộc tính 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 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 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 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 Hã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 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 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ẻ Hã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 Cách thêm phần "về tôi" vào trang web của bạn Tiế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 containerTrong 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ẻ Để bắt đầu, hãy dán đoạn mã sau sau khi đóng thẻ Trong đoạn trích này, 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ử 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ử 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. 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 //Khi bạn chia sẻ các liên kết trên các nền tảng truyền thông xã hội, chúng sẽ được trình bày với hình ảnh phong phú và một tiêu đề, tóm tắt và liên kết được định dạng độc đáo, thay vì văn bản đơn giản. Chẳng hạn, đây là cách Twitter sẽ hiển thị một liên kết đến loạt hướng dẫn này: Bạn có thể thêm các khả năng chia sẻ xã hội truyền thông phong phú này vào trang web của mình bằng cách bao gồm các thẻ Trong hướng dẫn này, bạn sẽ tìm hiểu cách thêm cả thẻ Twitter và Mở siêu dữ liệu đồ thị vào trang web của bạn. Thêm siêu dữ liệu thẻ Twitter vào trang webThẻ Twitter là một đặc điểm kỹ thuật siêu dữ liệu được Twitter sử dụng để hiển thị văn bản, hình ảnh và video phong phú khi các liên kết được chia sẻ trên dịch vụ. Thông số kỹ thuật đánh dấu thẻ Twitter đầy đủ có nhiều tùy chọn, nhưng bạn có thể bắt đầu với thông tin cơ bản nhất và mở rộng từ đó. Để thêm siêu dữ liệu thẻ Twitter cơ bản vào trang web của bạn, hãy đặt các thẻ Hãy chắc chắn cập nhật các phần được tô sáng với thông tin của riêng bạn. Hãy cùng đi qua từng thẻ mà chúng tôi vừa thêm vào:
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ẻ Đặt các thẻ này vào
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ý Bạn 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.
Làm cách nào để tạo một trang web bằng HTML?Thực hiện theo các bước bên dưới để tạo trang web đầu tiên của bạn với Notepad hoặc Textedit ... Bước 1: Mở Notepad (PC) Windows 8 trở lên: .... Bước 1: Mở Textedit (Mac) Mở Finder> Ứng dụng> Textedit..... Bước 2: Viết một số HTML..... Bước 3: Lưu trang HTML..... Bước 4: Xem trang HTML trong trình duyệt của bạn .. HTML có thể được sử dụng một mình không?Bạn chắc chắn có thể tạo ra các trang web đẹp với HTML một mình, hoạt hình và tất cả.Những gì bạn không thể làm là nhận được nó để trả lời các sự kiện nhấp chuột hoặc bàn phím hoặc phản hồi khác với đầu vào ngoài việc nhấp vào liên kết.Vì vậy, nó sẽ chỉ ngồi đó và trông rất đẹp, điều này thực sự tốt cho rất nhiều trang., animations and all. What you can't do is get it to respond to clicks or keyboard events or otherwise respond to input other than clicking on links. So it'll just sit there and look pretty, which is actually just fine for a lot of pages.
Tôi có thể tạo trang web của riêng mình không?Bạn có thể thuê ai đó để thiết kế và mã hóa một trang web hoặc bạn có thể tự thử (nếu bạn là người mới, các khóa học tốt nhất để học cách xây dựng trang web là một điểm khởi đầu tuyệt vời).Bạn có thể sử dụng một dịch vụ trực tuyến để tạo các trang web hoặc xây dựng nó ngoại tuyến bằng công cụ phần mềm máy tính để bàn.you can try your own hand (if you're a novice, The Best Courses for Learning How to Build Websites is an excellent starting point). You can use an online service to create web pages, or build it offline using a desktop software tool. |
