Hướng dẫn này sẽ chỉ cho bạn cách xây dựng một trang web đơn giản, không có kinh nghiệm về HTML hoặc CSS trước đó. Sản phẩm cuối cùng sẽ trông giống như thế này
Nội dungGhi chú. Hướng dẫn này được thực hiện cho một hội thảo dành cho Câu lạc bộ Lập trình Máy tính của Đại học Santa Monica. Một số thông tin có thể bị thiếu trong văn bản
Điều đầu tiên chúng tôi sẽ làm là tạo một thư mục để chứa dự án của chúng tôi và tệp cơ sở của trang web của chúng tôi, được gọi là
Github
0. Đây là thư mục của bạn sẽ trông như thế nàowebsite/
index.html
Tiếp theo, mở
Github
0 trong trình soạn thảo văn bản của chúng tôi. Nếu không chắc nên sử dụng chương trình nào làm trình soạn thảo văn bản, bạn có thể sử dụng Sublime Text 3, Visual Studio Code hoặc AtomHãy bắt đầu với cấu trúc cơ bản cho một trang HTML
HTML được tạo thành từ các “thẻ” [những thứ được bao quanh bởi
Github
2]. Tôi sẽ không thảo luận về mọi thẻ được sử dụng ở đây, nhưng điều quan trọng nhất là nội dung của trang web nằm giữa các thẻ Github
3 và Github
4Nếu bạn nhấp đúp vào tệp
Github
0 trên máy tính của mình, tệp sẽ mở trong trình duyệt của bạnĐó là một cái gì đó
Chúng tôi đã tạo một trang web đang hoạt động. Mặc dù nó khá trống. Hãy thêm một số nội dung khác
Chúng được gọi là thẻ tiêu đề. Họ chỉ ra chủ đề hoặc thông tin quan trọng. Phạm vi tiêu đề từ
Github
0 đến Github
1liên kết
Trang web không có liên kết là gì? . Chúng ta có thể sử dụng thẻ
Github
2 để tạo liên kết, như thế nàyGithub
Thuộc tính
Github
3 trong thẻ giữ URL mà liên kết chuyển đến. Văn bản giữa các thẻ sẽ xuất hiện dưới dạng có thể nhấp được, như thế nàydanh sách
Chúng tôi muốn liệt kê nhiều liên kết trên trang web của mình, vì vậy chúng tôi sẽ sử dụng danh sách HTML. Mã cho một danh sách trông như thế này
- Item 1
- Item 2
Danh sách của chúng tôi sẽ được bao bọc trong thẻ
Github
4 [danh sách không có thứ tự]. Mỗi mục của danh sách sẽ được bọc trong thẻ Github
5 [mục danh sách]Hãy kết hợp những gì chúng ta biết về liên kết và danh sách để tạo danh sách liên kết truyền thông xã hội trên trang web của chúng ta
Vì vậy, chúng tôi có một danh sách không có thứ tự và mỗi mục danh sách chứa một liên kết. Chúng tôi có thể dễ dàng thêm nhiều liên kết hơn vào danh sách của mình
Tiếp theo, chúng tôi sẽ thêm vào nội dung của trang web của chúng tôi một tiểu sử ngắn. Chúng tôi sẽ sử dụng thẻ
Github
6 [viết tắt của đoạn văn] để chứa nóHình ảnh
Tất cả các văn bản đó là một chút nhàm chán. Hãy thêm một hình ảnh hồ sơ để trộn nó lên. Lấy một tệp ảnh bạn có và đặt nó vào thư mục
Github
7 trong dự án của bạn, như thế nàyGithub
1Chúng tôi có thể hiển thị hình ảnh đó trên trang bằng thẻ
Github
8. Hãy đặt một cái ở đầu trang của chúng tôiThuộc tính
Github
9 cho trình duyệt biết hình ảnh có liên quan đến tệp Github
0 của chúng tôi ở đâu. Thuộc tính
- Item 1
- Item 2
1 buộc hình ảnh phải rộng 200 pixel. Github
8 thẻ không cần thẻ đóng. Họ tự đóng cửaĐây là giao diện trang web của chúng tôi khi chúng tôi đã hoàn tất việc thêm tất cả nội dung
Trước khi chúng tôi có thể bắt đầu tạo kiểu cho trang của mình, chúng tôi cần nhóm các phần tử nhất định lại với nhau. Đây là một minh họa về những gì tôi muốn nói
Chúng tôi sẽ sử dụng phần tử
- Item 1
- Item 2
3 để chia HTML của chúng tôi thành các nhóm hợp lý. Chúng ta cần thêm ba
- Item 1
- Item 2
4 để đạt được điều đóĐiều này sẽ không thực sự thay đổi giao diện của trang web của chúng tôi, nhưng nó sẽ cho phép chúng tôi định vị lại các phần nội dung sau này
Các lớp học
Thật khó để theo dõi những gì từng yếu tố làm. Sau này, khi chúng tôi tạo kiểu cho trang, chúng tôi muốn đặt tên cho các phần tử của mình để chỉ định phần nào sẽ tạo kiểu. Đây là mục đích của thuộc tính
- Item 1
- Item 2
5. Thuộc tính
- Item 1
- Item 2
5 có thể xuất hiện trên bất kỳ thẻ nào. Hãy thêm các lớp vào tệp của chúng tôisang trọngCuối cùng thì chúng ta cũng đã sẵn sàng để bắt đầu tạo kiểu với CSS. Tôi sẽ đề cập đến điều đó trong Phần 2
Cái gì tiếp theo?Hãy xem Codecademy và Free Code Camp để biết một số hướng dẫn miễn phí tuyệt vời về HTML [và nhiều chủ đề khác]. W3Schools cũng là một tài liệu tham khảo nhanh tuyệt vời
Thử nghiệm với việc thêm nhiều liên kết xã hội hơn, sắp xếp lại thứ tự nội dung của bạn hoặc thêm nhiều hình ảnh hơn