Code một page giới thiệu bản thân bằng Html - Css

Question

Accepted Answer

HTML:

HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới
thiệu về tôi</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">

<h1>Nguyễn Văn A</h1>
<h2>Sinh viên năm 3 - Đại học Bách khoa Hà Nội</h2>
<img src="avatar.jpg" alt="Ảnh đại diện">
<p>
Chào mừng bạn đến với trang giới thiệu của tôi. Tôi là một sinh viên năm 3 ngành Công nghệ thông tin tại Đại học Bách khoa Hà Nội. Tôi có niềm đam mê với lập trình web và thiết kế đồ họa.
</p>
<ul>
<li>Kỹ năng: HTML, CSS, JavaScript, React</li>
<li>Sở thích: Đọc sách, chơi thể thao, nghe nhạc</li>
</ul>
<a href="https://www.linkedin.com/in/your-linkedin-profile">Liên kết đến LinkedIn</a>
</div>
</body>
</html>
Hãy thận trọng khi sử dụng các đoạn mã.

CSS (style.css):

CSS
.container {
text-align: center;
margin: 0 auto;
width: 80%;
padding: 20px;
}

img {
border-radius: 50%;
width: 200px;
height: 200px;
}

ul {
list-style: none;
padding: 0;
}
Hãy thận trọng khi sử dụng các đoạn mã.

Giải thích:

HTML:
Cấu trúc cơ bản của một trang web.
<h1>, <h2>: Tiêu đề trang.
<img>: Thẻ để hiển thị ảnh.
<p>: Đoạn văn để giới thiệu bản thân.
<ul>: Danh sách không dấu đầu dòng.
<a>: Liên kết đến một trang web khác.
CSS:
container: Lớp để định dạng chung cho toàn bộ nội dung.
img: Định dạng cho ảnh đại diện (làm tròn góc, kích thước).
ul: Loại bỏ dấu đầu dòng cho danh sách.
Tùy chỉnh:

Nội dung: Thay thế tên, thông tin, kỹ năng, sở thích và ảnh của bạn.
CSS: Thay đổi màu sắc, font chữ, bố cục, kích thước để tạo ra một trang web có giao diện độc đáo.
Thêm các phần: Bạn có thể thêm các phần khác như dự án, kinh nghiệm, liên hệ, v.v.
Responsive: Sử dụng các đơn vị đo lường tương đối (em, rem, %) để trang web hiển thị tốt trên các thiết bị khác nhau.
Framework: Sử dụng các framework như Bootstrap, Materialize để tiết kiệm thời gian và có được giao diện chuyên nghiệp hơn.
Các công cụ hỗ trợ:

Trình duyệt: Chrome, Firefox, Edge để xem kết quả.
Trình soạn thảo code: Visual Studio Code, Sublime Text, Atom.
CodePen: Để thử nghiệm code trực tuyến

Code một page giới thiệu bản thân bằng Html - Css

Xin chào, tôi là [Tên của bạn]

Về tôi

Kỹ năng

Liên hệ