Học hỏi Net

Mạng học hỏi cho học sinh và cuộc sống

Bạn đang ở:Trang chủ / Lập trình HTML và CSS / Bài tập HTML cơ bản

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

by

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

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 .
    • Nếu cấu trúc là đoạn văn thì dùng 

      .

    • Nếu cấu trúc là một danh sách thì dùng 
         

      • .
      • Nếu cấu trúc là một danh sách có thứ tự, thì dùng 
           

        1. .
        2. Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ 
          .
        3. Đối với các thành phần lớn gần nhau, theo các nhóm riêng biệt, ta dùng 
           để gom lại sẽ thuận lợi cho việc layout.
        4. Với mỗi thành bao ngoài như 
           hay 

           ta cần sử dụng id hoặc class để thuận lợi cho việc layout sau này.

      Bài giải

      



Học lập trình


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

      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à 

      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 .
      • Nếu cấu trúc là đoạn văn thì dùng 

        .

      • Nếu cấu trúc là một danh sách thì dùng 
           

        • .
        • Nếu cấu trúc là một danh sách có thứ tự, thì dùng 
             

          1. .
          2. Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ 
            .
          3. Đối với các thành phần lớn gần nhau, theo các nhóm riêng biệt, ta dùng 
             để gom lại sẽ thuận lợi cho việc layout.
          4. Với mỗi thành bao ngoài như 
             hay 

             ta cần sử dụng id hoặc class để thuận lợi cho việc layout sau này.

        Bài giải:

        



Học lập trình



  
        
    
        
    
        Get the invite
        
    
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

        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 .
          • Nếu cấu trúc là đoạn văn thì dùng 

            .

          • Nếu cấu trúc là một danh sách thì dùng 
               

            • .
            • Nếu cấu trúc là một danh sách có thứ tự, thì dùng 
                 

              1. .
              2. Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ 
                .
              3. Đối với các thành phần lớn gần nhau, theo các nhóm riêng biệt, ta dùng 
                 để gom lại sẽ thuận lợi cho việc layout.
              4. Với mỗi thành bao ngoài như 
                 hay 

                 ta cần sử dụng id hoặc class để thuận lợi cho việc layout sau này.

            Bài giải:

            



Học lập trình



  
              
    
            • 
      
              
      
              UI/UX Design
              
      
              Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.
              
    
              • 
    
            • 
      
              
      
              Web Development
              
      
              Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.
              
    
              • 
    
            • 
      
              
      
              Branding
              
      
              Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.
              
    
              • 
    
            • 
      
              
      
              Photography
              
      
              Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.
              
    
              • 
    
            • 
      
              
      
              Apps Development
              
      
              Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.
              
    
              • 
    
            • 
      
              
      
              Digital Marketing
              
      
              Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.
              
    
              •

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

      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ô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 .
      • Nếu cấu trúc là đoạn văn thì dùng 

        .

      • Nếu cấu trúc là một danh sách thì dùng 
           

        • .
        • Nếu cấu trúc là một danh sách có thứ tự, thì dùng 
             

          1. .
          2. Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ 
            .
          3. Đối với các thành phần lớn gần nhau, theo các nhóm riêng biệt, ta dùng 
             để gom lại sẽ thuận lợi cho việc layout.
          4. Với mỗi thành bao ngoài như 
             hay 

             ta cần sử dụng id hoặc class để thuận lợi cho việc layout sau này.

        Bài giải:

        



Học lập trình

        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.

CÓ THỂ BẠN QUAN TÂM