Cách tạo website cá nhân bằng html

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

Ghi 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

Nội dung

Đ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ào

website/
  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 Atom

Hã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

4

Nế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

1

liê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ày

Github

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ày

danh 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ày

Github

1

Chú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ôi

Thuộ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

Cấu trúc

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ôi

sang trọng

Cuố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

Làm thế nào để tạo trang web cá nhân với HTML?

Bạn có thể tạo một trang web chỉ bằng HTML không?

Làm cách nào tôi có thể tạo một trang web HTML trực tuyến miễn phí?

Làm cách nào tôi có thể tự tạo trang web của riêng mình?