Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML

---

Trong hướng dẫn này, ta sẽ đi qua các bước thêm và tạo kiểu cho hình ảnh profile hàng đầu như trong trang trình diễn .

Trước khi ta bắt đầu, bạn có thể cần chọn một ảnh profile cá nhân để đưa vào trang web của bạn . Nếu bạn không có ảnh profile , bạn có thể sử dụng bất kỳ hình ảnh nào cho mục đích demo 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 trình diễn của ta bằng cách download hình ảnh tại đây . (Để biết thêm thông tin về cách thêm hình ảnh vào trang web bằng HTML, vui lòng truy cập hướng dẫn Hình ảnh HTML của ta từ phần trước trong loạt bài hướng dẫn này.)

Khi bạn đã chọn một hình ảnh, hãy lưu nó dưới dạng small-profile.jpg trong folder image của bạn.

Dán phần tử <img> vào giữa các <div> mở và đóng mà bạn đã tạo trong hướng dẫn cuối cùng như sau:

... <div style="background-image: url('ImageLocation');background-size: cover; height:480px; padding-top:80px;">   <img src="ImageFilePath;" style="height:150px;"> </div> ... 

Đảm bảo chuyển địa chỉ src đánh dấu bằng đường dẫn file của ảnh profile của bạn. Lưu ý ta cũng đang sử dụng thuộc tính style để chỉ định chiều cao của hình ảnh là 150 pixel. Phần tử <img> không yêu cầu thẻ đóng.

Lưu và reload 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 profile của bạn sẽ xuất hiện với chiều cao 150 pixel theo chiều cao mà ta đã chỉ định với thuộc tính style . Nó cũng phải nằm dưới 80 pixel bên dưới đầu của containers <div> , với thuộc tính top-padding mà ta đã chỉ định cho containers <div> 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 style của ta để tạo cho hình ảnh của ta một hình tròn và một đường viền màu vàng. Ta 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 trình đọc màn hình.

Thêm các thuộc tính được đánh dấu vào phần tử <img> của bạn:

<img src="ImageFilePath" style="height:150px; border-radius: 50%; border: 10px solid #FEDE00;" alt="This is a small profile image of Digital Ocean’s mascot, a blue smiling shark."> 

Đảm bảo rằng bạn vẫn có đường dẫn file chính xác của hình ảnh được liệt kê dưới dạng địa chỉ src . Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Trước khi tiếp tục, hãy tạm dừng một chút để nghiên cứu các sửa đổi mã mà ta vừa thực hiện. Đặt giá trị border-radius thành 50% sẽ tạo cho hình ảnh một hình tròn. Đặt giá trị đường viền thành 10px solid #FEDE00 sẽ cung cấp cho hình ảnh một đường viền đặc rộng 10 pixel và có giá trị màu thập lục phân là #FEDE00.

Đến đây bạn nên biết cách thêm và tạo kiểu ảnh profile cho trang web của bạn bằng HTML. Bây giờ ta đã sẵn sàng để thêm tiêu đề và phụ đề vào trang web trong hướng dẫn tiếp theo.

---

---

Các tin liên quan

Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách Căn giữa hoặc Căn chỉnh Văn bản và image trên Trang web của Bạn bằng HTML
2020-09-14
Cách thêm HTML Thành phần cho trang web của bạn
2020-09-14
Cách tạo và liên kết đến các trang web bổ sung bằng HTML
2020-09-14
Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML
2020-09-14
Cách thiết lập dự án trang web HTML của bạn
2020-09-14
Cách tạo kiểu cho HTML Thành phần
2020-09-14
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách sử dụng