Mẫu html chỉ mục github

Hello chào mừng mọi người đã quay lại với HoangLam. hôm nay, chúng ta sẽ cùng tìm hiểu về cách tạo một hoặc nhiều trang web bằng Github đơn giản trong 10 phút nhé. Oki no long lines nữa chúng ta cùng bắt đầu thôi

Cách tạo trang web đơn giản trong 10 phút với Github

Các bước thực hiện tạo trang web

Bước 1. Khởi tạo kho lưu trữ mới trên Github

Mọi người hãy truy cập vào trang Github này và điền một số thông tin như bên dưới nhé

Cách tạo trang web đơn giản trong 10 phút với Github bước 1

Phần Repository name mọi người có thể thay dấu cách bằng dấu gạch dưới cũng được hoặc để khoảng trống cũng được, và chọn Public nhé

Lưu ý khi mọi người khởi tạo repo mới, hãy nhớ tích vào chỗ Khởi tạo kho lưu trữ này bằng README. Nếu không, mọi người sẽ phải tự khởi động dự án trên máy tính của mình và sau đó trích xuất mã trên máy chủ github

Tiếp theo mọi người chọn Tạo kho lưu trữ

Bước 2. Tạo tệp . html

Sau khi khởi tạo repo mới, mọi người đang tiến hành theo thứ tự các bước nhỏ bên dưới

Chúng ta sẽ nhấp vào chọn Thêm tệp → Tạo tệp mới

Cách tạo trang web đơn giản trong 10 phút với Github bước 2A

Tiếp theo chúng ta sẽ đặt tên tệp là index. html [lưu ý không được sử dụng tên khác nhé]

Cách tạo trang web đơn giản trong 10 phút với Github bước 2B

Bước tới, tại ô Chỉnh sửa tệp mới phía dưới mọi người sao chép mã html của mọi người và dán vào [mã này có thể trích xuất từ ​​các trang web tĩnh khác]

Cách tạo trang web đơn giản trong 10 phút với Github bước 2C

Tiếp theo, chúng ta sẽ cuộn xuống bên dưới và chọn Cam kết tệp mới

Bước 3. website công khai

Sau khi up code xong, chúng ta vào phần Setting, để ý phần Option phía bên trái màn hình, chúng ta chọn phần Page

Cách tạo trang web đơn giản trong 10 phút với Github bước 3A

Cuối cùng chúng ta sẽ nhận được đường liên kết dẫn đến trang web mà chúng ta vừa tạo

Cách tạo trang web đơn giản trong 10 phút với Github bước 3B

Và đây là kết quả

Cách tạo trang web đơn giản trong 10 phút với Github bước 3C

Lưu ý. Trang web sẽ không hoạt động ngay, bạn cần đợi vài phút hoặc có thể lâu hơn để Github cập nhật mã lên nhé

Lời kết

Trên đây là bài viết hướng dẫn cách tạo website bằng Github đơn giản trong 10 phút được thực hiện bởi HoangLam. Mình hy vọng điều này sẽ là sự khởi đầu cho cuộc hành trình phát triển web của các bạn. Nếu có thắc mắc hay ý kiến ​​đóng góp hãy để lại bình luận phía bên dưới nhé

Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này

1. Tạo một tệp

   4 mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻ
   5 để có hành vi phản hồi phù hợp trong thiết bị di động

   
   
     
       
       
       Bootstrap demo
     
     
       Hello, world!
     
   
   

2. Bao gồm CSS và JS của Bootstrap. Đặt thẻ

   5 vào CSS của chúng tôi và thẻ
   5

   Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper

3. Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi

Để tham khảo, đây là các liên kết CDN chính của chúng tôi

Mô tảURLCSS

8JS

0

Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung

Bước tiếp theo

thành phần JS

Tò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu

Hiển thị các thành phần yêu cầu JavaScript

• Cảnh báo sa thải
• Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
• Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
• Thu gọn để chuyển đổi mức độ hiển thị của nội dung
• Danh sách thả xuống để hiển thị và định vị [cũng yêu cầu Popper]
• Các phương thức để hiển thị, định vị và hành vi cuộn
• Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
• Điều hướng với plugin Tab để chuyển đổi bảng nội dung
• Offcanvases để hiển thị, định vị và hành vi cuộn
• Scrollspy cho hành vi cuộn và cập nhật điều hướng
• Chúc mừng để hiển thị và loại bỏ
• Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị [cũng yêu cầu Popper]

Toàn cầu quan trọng

Bootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng tới việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào

loại tài liệu HTML5

Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ

  ...

Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn

Bạn có thể xem một ví dụ về điều này trong thực tế

kích thước hộp

Để định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu

1 từ

2 thành

3. Điều này đảm bảo rằng

4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của một phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của Google

Trong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau

.selector-for-some-widget {
  box-sizing: content-box;
}

Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua

5 và

6—tất cả sẽ kế thừa

1 đã chỉ định cho

8 đó

Tìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS

khởi động lại

Để cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các thiết lập lại có chủ ý hơn một chút cho các thành phần HTML phổ biến

Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này