Hướng dẫn bài mẫu html

• Trang chủ
• Bài tập & hướng dẫn
• Bài tập HTML & HTML5

Bài tập HTML & HTML5 cơ bản

Bài tập HTML & HTML5 nâng cao

Mục lục nội dung

1. Bài tập 1

Thực hiện code HTML theo nội dung design dưới đây

Hướng dẫn

Cấu trúc design không phức tạp:

• Xem công thức chung bên dưới.
• Riêng bên trong  có một đoạn nhấn mạnh "Shared Hosting", nên ta cần sử dụng thẻ 
• 2 liên kết button có dạng danh sách, nên ta sử dụng thẻ 
   
  • , nếu không quan trọng SEO chỗ này, thì có thể không cần cũng được.

  Công thức chung

  • Cần xác định rõ: đâu là image, đâu là text, đâu là button, để biết khi nào dùng hình, khi nào dùng text để sử dụng CSS cho đúng.
  • Thông thường image sẽ là hình chụp, hình design phức tạp,... 
  • Một số bài tập có sử dụng font icon, hocwebchuan sẽ sử dụng bộ font của fontawesome cho thuận lợi việc code.
  • Nếu cấu trúc là một nhóm có nội dung cụ thể, ta dùng 
     bao ngoài.
  • Nếu cấu trúc là tiêu đề thì dùng , khi code thực tế thì bạn cần sử dụng  cho đúng thứ tự.
  • Nếu cấu trúc là image thì dùng 

    Best Shared Hosting Company

    With this responsive landing page template, you can promote your all hosting, domain and email services.

    • View Plans
    • All Features

    Sau khi chạy chương trình trên, kết quả là:

    2. Bài tập 2

    Thực hiện code HTML theo nội dung design dưới đây:

    Hướng dẫn

    • Hình lá thư, thật ra là một font icon, nên chúng ta sử dụng font-awesome là được.
    • Cấu trúc bên dưới không có gì đặc biệt, ngoại trừ phần nhập liệu và , ta cần sử dụng các thành phần của 
      .

    Công thức chung

    • Cần xác định rõ: đâu là image, đâu là text, đâu là button, để biết khi nào dùng hình, khi nào dùng text để sử dụng CSS cho đúng.
    • Thông thường image sẽ là hình chụp, hình design phức tạp,... 
    • Một số bài tập có sử dụng font icon, hocwebchuan sẽ sử dụng bộ font của fontawesome cho thuận lợi việc code.
    • Nếu cấu trúc là một nhóm có nội dung cụ thể, ta dùng 
       bao ngoài.
    • Nếu cấu trúc là tiêu đề thì dùng , khi code thực tế thì bạn cần sử dụng  cho đúng thứ tự.
    • Nếu cấu trúc là image thì dùng 

      3. Bài tập 3

      Thực hiện code HTML theo nội dung design dưới đây:

      Hướng dẫn

      • Design này cũng là một danh sách, bên trong mỗi mục có nội dung chi tiết, ta dùng 
         
        • .
        • Các icons trong các mục, là font icon, nên chúng ta sử dụng font-awesome.
        • Chú ý sử dụng  cho tiêu đề.

        Công thức chung

        • Cần xác định rõ: đâu là image, đâu là text, đâu là button, để biết khi nào dùng hình, khi nào dùng text để sử dụng CSS cho đúng.
        • Thông thường image sẽ là hình chụp, hình design phức tạp,... 
        • Một số bài tập có sử dụng font icon, hocwebchuan sẽ sử dụng bộ font của fontawesome cho thuận lợi việc code.
        • Nếu cấu trúc là một nhóm có nội dung cụ thể, ta dùng 
           bao ngoài.
        • Nếu cấu trúc là tiêu đề thì dùng , khi code thực tế thì bạn cần sử dụng  cho đúng thứ tự.
        • Nếu cấu trúc là image thì dùng 

          4. Bài tập 4

          Thực hiện code HTML theo nội dung design dưới đây:

          Hướng dẫn

          • Design này là phần header, gồm có logo (image), danh sách (navigation - liên kết điều hướng), và button.
          • Logo thường sử dụng 

             và có liên kết về trang chủ.

          • Phần danh sách là một điều hướng (navigation), do đó cần bao ngoài bằng tag 
          • Chú ý phần  có chứa một font-icon.

          Công thức chung

          • Cần xác định rõ: đâu là image, đâu là text, đâu là button, để biết khi nào dùng hình, khi nào dùng text để sử dụng CSS cho đúng.
          • Thông thường image sẽ là hình chụp, hình design phức tạp,...
          • Một số bài tập có sử dụng font icon, hocwebchuan sẽ sử dụng bộ font của fontawesome cho thuận lợi việc code.
          • Nếu cấu trúc là một nhóm có nội dung cụ thể, ta dùng 
             bao ngoài.
          • Nếu cấu trúc là tiêu đề thì dùng , khi code thực tế thì bạn cần sử dụng  cho đúng thứ tự.
          • Nếu cấu trúc là image thì dùng 

            Customer Login

            Sau khi chạy chương trình trên, kết quả là:

            Trên đây là một số bài tập HTML cơ bản mà eLib tổng hợp được. Hy vọng những bài tập này giúp bạn củng cố và vận dụng được những kiến thức đã học vào thực tế lập trình.

            • Tham khảo thêm

            • docx Câu hỏi trắc nghiệm HTML có đáp án
            • docx Câu hỏi trắc nghiệm CSS có đáp án
            • doc Bài tập HTML nâng cao
            • doc Bài tập CSS cơ bản
            • doc Bài tập CSS nâng cao