viết code giới thiệu 1 nhân vật nổi tiếng mà bạn yêu thích có tiểu sử hình ảnh có chèn bản nhạc

Question

Accepted Answer

Mã Giả Lập Trình Giới Thiệu Nhân Vật
Mã này sử dụng HTML để tạo cấu trúc và CSS để định dạng.

1. File nhanvat.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: Albert Einstein</title>
<style>
/* CSS nội tuyến để định dạng cơ bản */
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
header {
background: #3c5a99;
color: #fff;
padding: 10px 0;
text-align: center;
border-bottom: 5px solid #ffcc00;
}
h1 {
margin: 0;
font-size: 2.5em;
}
.intro-box {
display: flex;
margin-top: 20px;
align-items: flex-start;
}
.profile-image {
width: 200px;
height: 200px;
margin-right: 20px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #ffcc00;
}
.content {
flex-grow: 1;
}
.music-player {
margin: 20px 0;
padding: 15px;
background-color: #e6e6fa;
border-left: 5px solid #3c5a99;
}
h2 {
color: #3c5a99;
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
margin-top: 30px;
}
</style>
</head>
<body>

<div class="container">
<header>
<h1>🔬 Albert Einstein (1879 – 1955)</h1>
</header>

<div class="intro-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Albert_Einstein_Head.jpg"
alt="Chân dung Albert Einstein" class="profile-image">

<div class="content">
<h2>📚 Tiểu Sử Tóm Tắt</h2>
<p><strong>Albert Einstein</strong> là nhà vật lý lý thuyết người Đức, được coi là một trong những nhà khoa học có ảnh hưởng nhất mọi thời đại. Ông nổi tiếng nhất với việc phát triển <strong>Thuyết Tương đối</strong>, một trong hai trụ cột của vật lý hiện đại (cùng với cơ học lượng tử).</p>
<p>Công trình của ông, đặc biệt là công thức tương đương khối lượng–năng lượng $E = mc^2$, đã trở thành biểu tượng đại chúng của khoa học. Ông đoạt giải Nobel Vật lý năm 1921 cho những đóng góp của mình vào vật lý lý thuyết và khám phá ra định luật hiệu ứng quang điện.</p>
</div>
</div>

<div class="music-player">
<h2>🎶 Âm Nhạc Yêu Thích</h2>
<p>Einstein là một nghệ sĩ violin tài năng và yêu thích nhạc cổ điển, đặc biệt là <strong>Mozart và Bach</strong>. Hãy nghe một đoạn nhạc để cảm nhận sự tĩnh lặng và sáng tạo:</p>

<audio controls>
<source src="ten_bai_nhac_co_dien_cua_mozart.mp3" type="audio/mpeg">
Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>
<p><em>(Thay 'ten_bai_nhac_co_dien_cua_mozart.mp3' bằng đường dẫn thực tế đến file nhạc bạn muốn chèn)</em></p>
</div>

<h2>✨ Những Phát Biểu Nổi Tiếng</h2>
<blockquote>
"Trí tưởng tượng quan trọng hơn kiến thức. Kiến thức chỉ giới hạn những gì chúng ta biết và hiểu, trong khi trí tưởng tượng ôm trọn toàn bộ thế giới, và tất cả những gì chúng ta sẽ biết và hiểu."
</blockquote>
<blockquote>
"Hai điều là vô tận: vũ trụ và sự ngu dốt của con người; và tôi không chắc chắn về vũ trụ."
</blockquote>
</div>

</body>
</html>
2. Hướng dẫn sử dụng
Sao chép và Dán: Sao chép toàn bộ mã trên vào một file mới.

Lưu file: Lưu file đó với tên nhanvat.html.

Thay đổi ảnh: Bạn có thể thay đường link ảnh trong thẻ <img src="..."> bằng đường link đến một bức ảnh khác của Einstein hoặc ảnh bạn yêu thích.

Chèn nhạc: Để nhạc chạy được, bạn cần:

Tải một file nhạc (ví dụ: mozart.mp3) vào cùng thư mục với file nhanvat.html.

Sửa tên file trong thẻ <source src="ten_bai_nhac_co_dien_cua_mozart.mp3" ...> thành tên file nhạc của bạn (ví dụ: mozart.mp3).

Mở file: Mở file nhanvat.html bằng trình duyệt web (Chrome, Firefox, Edge) để xem kết quả.