Lập Trình Web HTML/CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Tiêu đề xuất hiện trên tab trình duyệt</title>
  </head>
  <body>
    <h1>Tiêu đề lớn nhất</h1>
    <p>Đây là một đoạn văn bản (paragraph).</p>
  </body>
</html>

h1 {
  color: blue;       /* Thuộc tính: Giá trị */
  font-size: 20px;
}

<style>
  body { font-family: Arial, sans-serif; }
  .highlight { color: orange; font-weight: bold; }
</style>

a {
  text-decoration: none; /* Bỏ gạch chân */
  color: #3b82f6;
}
a:hover {
  text-decoration: underline; /* Gạch chân khi di chuột */
  color: #1d4ed8;
}

ul {
  list-style-type: square; /* Hình vuông */
  /* Các giá trị khác: circle, none (bỏ dấu) */
}

.box {
  width: 200px;
  padding: 20px; /* Đệm trong */
  border: 2px solid black; /* Viền */
  margin: 10px; /* Lề ngoài */
}

table {
  width: 100%;
  border-collapse: collapse; /* Gộp 2 viền thành 1 */
}
th, td {
  border: 1px solid #ddd;
  padding: 8px; /* Khoảng cách nội dung */
  text-align: left;
}
/* Hiệu ứng sọc ngựa vằn */
tr:nth-child(even) { background-color: #f2f2f2; }

input[type="text"], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px; /* Bo góc */
  box-sizing: border-box; /* Tính cả padding vào width */
}

button {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

<table border="1">
  <tr> <!-- Hàng -->
    <th>Tên</th> <!-- Tiêu đề cột -->
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>An</td> <!-- Ô dữ liệu -->
    <td>20</td>
  </tr>
</table>

<img src="hinh-anh.jpg" alt="Mô tả ảnh" width="300">

<audio controls>
  <source src="nhac.mp3" type="audio/mpeg">
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

<!DOCTYPE html>
<html>
<head>
  <title>Hồ Sơ Của Tôi</title>
  <style>
    body { font-family: sans-serif; margin: 0; background: #f4f4f4; color: #333; }
    
    /* Header & Nav */
    header { background: #3b82f6; color: white; padding: 20px; text-align: center; }
    nav a { color: white; margin: 0 10px; text-decoration: none; font-weight: bold; }
    nav a:hover { text-decoration: underline; color: #fbbf24; }
    
    /* Main Layout */
    .container { max-width: 800px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    
    section { margin-bottom: 30px; }
    h2 { border-bottom: 2px solid #3b82f6; padding-bottom: 10px; color: #1e3a8a; }
    
    /* Elements */
    img { border-radius: 50%; border: 4px solid #3b82f6; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
    th { background: #eff6ff; }
    
    form input, form textarea { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
    button { background: #3b82f6; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background: #2563eb; }
    
    footer { text-align: center; padding: 20px; color: #666; font-size: 0.9em; border-top: 1px solid #ddd; margin-top: 20px; }
  </style>
</head>
<body>

  <header>
    <img src="https://via.placeholder.com/100" alt="Avatar">
    <h1>Nguyễn Văn A</h1>
    <nav>
      <a href="#about">Giới Thiệu</a>
      <a href="#skills">Kỹ Năng</a>
      <a href="#contact">Liên Hệ</a>
    </nav>
  </header>

  <div class="container">
    <section id="about">
      <h2>Giới Thiệu</h2>
      <p>Xin chào! Tôi là một lập trình viên web đầy nhiệt huyết. Tôi thích tạo ra những trang web đẹp và hữu ích.</p>
    </section>

    <section id="skills">
      <h2>Kỹ Năng</h2>
      <table>
        <tr><th>Kỹ Năng</th><th>Đánh Giá</th></tr>
        <tr><td>HTML & CSS</td><td>⭐⭐⭐⭐⭐</td></tr>
        <tr><td>JavaScript</td><td>⭐⭐⭐⭐</td></tr>
      </table>
    </section>

    <section id="contact">
      <h2>Liên Hệ</h2>
      <form>
        <label>Email của bạn:</label>
        <input type="email" placeholder="example@gmail.com">
        <label>Lời nhắn:</label>
        <input type="text" placeholder="Xin chào...">
        <button>Gửi Tin Nhắn</button>
      </form>
    </section>
  </div>

  <footer>
    <p>© 2024 Nguyễn Văn A. All rights reserved.</p>
  </footer>

</body>
</html>

<!-- HTML Structure -->
<div class="gallery">
  <div class="card">
    <img src="student1.jpg" alt="Student 1">
    <h3>Nguyễn Văn A</h3>
    <p>"Học hết sức, chơi hết mình!"</p>
  </div>
  <!-- More cards... -->
</div>

<!-- CSS -->
<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.card {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  transition: transform 0.3s;
}
.card:hover {
  transform: scale(1.05); /* Phóng to khi di chuột */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.card img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>