Hướng dẫn tạo website mạng xã hội cơ bản bằng HTML, CSS - Giống Facebook - 常规

Tạo một trang web mạng xã hội giống Facebook với một kênh chat all bằng HTML và CSS đòi hỏi một số kiến thức về lập trình web. Dưới đây là một ví dụ cơ bản về cách tạo một trang web mạng xã hội đơn giản nhưng đẹp mắt.

Đầu tiên, tạo một tệp HTML mới và đặt tên là 'index.html'. Sau đó, sao chép mã HTML dưới đây vào tệp HTML của bạn:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>My Social Network</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        
        #header {
            background-color: #4267B2;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        
        #content {
            margin: 10px;
            display: flex;
        }
        
        #left-sidebar {
            flex: 1;
            background-color: #fff;
            padding: 10px;
        }
        
        #chat {
            flex: 2;
            background-color: #fff;
            padding: 10px;
        }
        
        #right-sidebar {
            flex: 1;
            background-color: #fff;
            padding: 10px;
        }
        
        #footer {
            background-color: #4267B2;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id='header'>
        <h1>My Social Network</h1>
    </div>
    <div id='content'>
        <div id='left-sidebar'>
            <!-- Nội dung thanh bên trái -->
        </div>
        <div id='chat'>
            <!-- Nội dung kênh chat all -->
        </div>
        <div id='right-sidebar'>
            <!-- Nội dung thanh bên phải -->
        </div>
    </div>
    <div id='footer'>
        <p>&copy; 2022 My Social Network. All rights reserved.</p>
    </div>
</body>
</html>

Tiếp theo, bạn có thể tùy chỉnh các phần của trang web, chẳng hạn như thêm nội dung vào thanh bên trái, kênh chat all và thanh bên phải.

Ví dụ, để thêm một danh sách bạn bè vào thanh bên trái, bạn có thể thêm mã HTML sau vào đoạn mã <div id='left-sidebar'>:

<h2>Friends</h2>
<ul>
    <li>Friend 1</li>
    <li>Friend 2</li>
    <li>Friend 3</li>
</ul>

Để thêm kênh chat all vào phần <div id='chat'>, bạn có thể sử dụng một thẻ <textarea> để người dùng nhập tin nhắn và một nút gửi để gửi tin nhắn. Dưới đây là một ví dụ:

<h2>Chat</h2>
<div id='message-container'></div>
<textarea id='message-input'></textarea>
<button id='send-button'>Send</button>

Cuối cùng, bạn có thể tùy chỉnh phần thanh bên phải bằng cách thêm nội dung tương tự như đã làm với thanh bên trái.

Sau khi chỉnh sửa và tùy chỉnh các phần của trang web, bạn có thể mở tệp HTML trong trình duyệt để xem kết quả.