Chuyên mục

Social Media HTML – Cách thêm Icon Mạng Xã Hội vào HTML

Posted by Lập Trình Viên HTML 9 phút đọc

Social Media HTML là một phương pháp để hiển thị biểu tượng mạng xã hội trên trang web bằng cách sử dụng CSS nội bộ và HTML.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới.

Social Media HTML

Quá trình thêm biểu tượng mạng xã hội vào tài liệu HTML có thể được thực hiện thông qua các bước đơn giản sau:

Bước 1: Đầu tiên, chúng ta phải gõ mã HTML trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp HTML hiện có trong trình soạn thảo văn bản theo ý muốn.

Bước 2: Tiếp theo, chúng ta phải đặt con trỏ trong thẻ đầu của tài liệu HTML ngay sau thẻ tiêu đề và sau đó định nghĩa thẻ <style> như được hiển thị trong khối sau đây.

<style>
    .social-icons{
        list-style:none;
        display:flex;
        justify-content:center;
    }
    .social-icons li{
        margin:0px 10px;
    }
    .social-icons li a{
        color:#fff;
        font-size:30px;
        display:block;
        text-align:center;
        background-color:#333;
        width:50px;
        height:50px;
        border-radius:50%;
        line-height:50px;
        transition:all 0.5s ease;
    }
    .social-icons li a:hover{
        transform:rotate(360deg);
    }
</style>

Bước 3: Sau đó, chúng ta phải sử dụng mã sau giữa việc đóng và mở thẻ <style>.

.social-icons li a[href^="https://www.facebook.com/"]{
    background-color:#3b5998;
}
.social-icons li a[href^="https://www.twitter.com/"]{
    background-color:#00acee;
}
.social-icons li a[href^="https://plus.google.com/"]{
    background-color:#dd4b39;
}
.social-icons li a[href^="https://www.linkedin.com/"]{
    background-color:#007bb6;
}
.social-icons li a[href^="https://github.com/"]{
    background-color:#333;
}

Chúng ta có thể đổi màu nền của biểu tượng bằng cách chỉnh sửa giá trị mã hex trong CSS.

Bước 4: Khi đã thêm thành công mã trên, chúng ta phải liên kết tệp CSS trong thẻ <head>.

<link rel="stylesheet" href="social-media.css">

Bước 5: Sau đó, chúng ta phải sử dụng mã sau trong thẻ <body> của tài liệu HTML.

<div class="social-icons">
    <ul>
        <li><a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://www.twitter.com/"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://plus.google.com/"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="https://github.com/"><i class="fa fa-github"></i></a></li>
    </ul>
</div>

Chúng ta có thể sử dụng bất kỳ biểu tượng nào trong thẻ <i> và chỉnh sửa href để tạo liên kết đến trang mạng xã hội yêu thích của chúng ta.

Bước 6: Cuối cùng, chúng ta phải lưu tệp HTML và sauđó chạy tệp trong trình duyệt.

Social Media HTML có thể được sử dụng bởi các nhà phát triển web, những người muốn hiển thị biểu tượng mạng xã hội trên trang web của họ.

Hướng dẫn Social Media HTML

Để thêm biểu tượng mạng xã hội vào tài liệu HTML, chúng ta có thể tuân theo các bước sau:

Bước 1: Tạo tệp HTML

Trong bất kỳ trình soạn thảo văn bản nào, tạo một tệp mới và lưu nó với định dạng “.html”.

Bước 2: Nhúng CSS

Thêm đoạn mã sau vào phần mở đầu của tài liệu HTML:

<head>
    <title>Tên trang web của bạn</title>
    <link rel="stylesheet" href="social-media.css">
</head>

Bước 3: Tạo HTML

Thêm đoạn mã sau vào phần thân của tài liệu HTML:

<div class="social-icons">
    <ul>
        <li><a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://www.twitter.com/"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://plus.google.com/"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="https://github.com/"><i class="fa fa-github"></i></a></li>
    </ul>
</div>

Bước 4: Tạo CSS

Tạo một tệp mới với định dạng “.css” và lưu nó trong cùng thư mục với tệp HTML. Thêm đoạn mã sau vào tệp CSS:

.social-icons{
    list-style:none;
    display:flex;
    justify-content:center;
}
.social-icons li{
    margin:0px 10px;
}
.social-icons li a{
    color:#fff;
    font-size:30px;
    display:block;
    text-align:center;
    background-color:#333;
    width:50px;
    height:50px;
    border-radius:50%;
    line-height:50px;
    transition:all 0.5s ease;
}
.social-icons li a:hover{
    transform:rotate(360deg);
}

.social-icons li a[href^="https://www.facebook.com/"]{
    background-color:#3b5998;
}
.social-icons li a[href^="https://www.twitter.com/"]{
    background-color:#00acee;
}
.social-icons li a[href^="https://plus.google.com/"]{
    background-color:#dd4b39;
}
.social-icons li a[href^="https://www.linkedin.com/"]{
    background-color:#007bb6;
}
.social-icons li a[href^="https://github.com/"]{
    background-color:#333;
}

Bước 5: Chạy tài liệu HTML

Lưu và chạy tài liệu HTML trong trình duyệt để xem biểu tượng mạng xã hội được thêm vào.

Ưu và Nhược điểm Social Media HTML

Ưu điểm:

  1. Dễ dàng sử dụng: Thêm biểu tượng mạng xã hội bằng Social Media HTML rất đơn giản và dễ dàng.
  2. Tối ưu hóa SEO: Hiển thị biểu tượng mạng xã hội có thể giúp tăng lượt truy cập và tối ưu hóa SEO.
  3. Cải thiện trải nghiệm người dùng: Hiển thị biểu tượng mạng xã hội có thể cải thiện trải nghiệm người dùng và giúp họ dễ dàng kết nối với các trang mạng xã hội khác nhau.

Nhược điểm:

  1. Không tạo ra hiệu ứng động: Biểu tượng mạng xã hội thêm vào bằng Social Media HTML không có hiệu ứng động hoặc chuyển đổi, làm giảm tính tương tác của trang web.
  2. Không linh hoạt: Social Media HTML chỉ cho phép thêm biểu tượng mạng xã hội cố định trên trang web và không cho phép thay đổi trông chúng hoặc di chuyển chúng đến vị trí khác.

Lời khuyên Social Media HTML

Khi sử dụng Social Media HTML để thêm biểu tượng mạng xã hội vào trang web của bạn, hãy lưu ý những lời khuyên sau:

  1. Sử dụng biểu tượng mạng xã hội phù hợp với ngành nghề của bạn.
  2. Đảm bảo rằng biểu tượng mạng xã hội được đưa ra theo cách hợp lý trên trang web của bạn và không làm giảm tính thẩm mỹ của nó.
  3. Sử dụng CSS để tạo hiệu ứng động cho biểu tượng mạng xã hội.
  4. Thêm biểu tượng mạng xã hội ở vị trí thuận tiện để người dùng có thể dễ dàng truy cập.
  5. Chỉ thêm những biểu tượng mạng xã hội mà bạn sử dụng thường xuyên để tránh làm cho trang web của bạn trở nên rườm rà.

Kết luận

Trên đây là một số thông tin về cách thêm biểu tượng mạng xã hội vào tài liệu HTML bằng Social Media HTML, các ưu và nhược điểm của công nghệ này, lời khuyên và câu hỏi thường gặp. Hy vọng rằng bài viết này sẽ giúp ích cho bạn trong quá trình thực hiện dự án của mình.

1. Social Media HTML là gì?

Social Media HTML là một công nghệ được sử dụng để thêm biểu tượng mạng xã hội vào trang web của bạn bằng cách sử dụng mã HTML và CSS.

2. Ai sử dụng Social Media HTML?

Social Media HTML được sử dụng bởi các nhà phát triển web và các chủ doanh nghiệp muốn hiển thị biểu tượng mạng xã hội trên trang web của họ.

3. Social Media HTML có khả năng tương tác không?

Không, Social Media HTML chỉ cho phép thêm biểu tượng mạng xã hội cố định trên trang web và không có tính năng tương tác.

4. Làm thế nào để tạo hiệu ứng động cho biểu tượng mạng xã hội?

Sử dụng CSS để tạo hiệu ứng động cho biểu tượng mạng xã hội.

5. Làm thế nào để thêm biểu tượng mạng xã hội phù hợp với ngành nghề của bạn?

Chọn biểu tượng mạng xã hội phù hợp với ngành nghề của bạn và tuân theo hướng dẫn để thêm chúng vào trang web của bạn bằng Social Media HTML.