19/11/2024
19/11/2024
Chào mừng bạn đến với trang giới thiệu của tôi!
Tôi là một [nghề nghiệp hoặc lĩnh vực bạn đang làm việc]. Tôi yêu thích [sở thích hoặc đam mê của bạn].
Email: email@example.com
Vũ Thuận Thiên
19/11/2024
Timi container là gì vậy
19/11/2024
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
Nếu bạn muốn hỏi bài tập
Các câu hỏi của bạn luôn được giải đáp dưới 10 phút
CÂU HỎI LIÊN QUAN
Top thành viên trả lời