Bài tập HTML nâng cao - Học hỏi Net

1. Bài tập 1

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

Hướng dẫn

Nhìn vô design ta thấy cấu trúc như sau:

và

.
gồm 3 , 1 , 1 <button> và 1 đoạn text ghi chú.</li> <li>Do nội dung của <br /> <form> thường sử dụng để lấy hoặc gửi thông tin, do đó không quá quan trọng SEO cho phần này, nên ta có thể dùng </p> <table> hoặc </p> <div> hoặc </p> <p> cho tiện việc layout.</li> </ul> <p><strong>Công thức chung</strong></p> <ul> <li>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.</li> <li>Thông thường image sẽ là hình chụp, hình design phức tạp,…</li> <li>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.</li> <li>Nếu cấu trúc là một nhóm có nội dung cụ thể, ta dùng <br /> <section> bao ngoài.</li> <li>Nếu cấu trúc là tiêu đề thì dùng <hx>, khi code thực tế thì bạn cần sử dụng <hx> cho đúng thứ tự.</li> <li>Nếu cấu trúc là image thì dùng <img>.</li> <li>Nếu cấu trúc là đoạn văn thì dùng <p>.</li> <li>Nếu cấu trúc là một danh sách thì dùng <ul> </p> <li>.</li> <li>Nếu cấu trúc là một danh sách có thứ tự, thì dùng <ol> </p> <li>.</li> <li>Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ <br /> <form>.</li> <li>Đố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 <div> để gom lại sẽ thuận lợi cho việc layout.</li> <li>Với mỗi thành bao ngoài như <br /> <section> hay </p> <div> ta cần sử dụng id hoặc class để thuận lợi cho việc layout sau này.</li> </ul> <p><strong>Bài giải:</strong></p> <pre> <code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học lập trình</title> </head> <body> <section class="contact-form"> <h2>Get in touch with us by filling contact form below</h2> <form method="" action=""> <p><input type="text" name="name" placeholder="* Enter your full name" value=""> <input type="email" name="email" placeholder="* Enter your email address" value=""></p> <p><input type="text" name="subject" placeholder="* Enter your subject" value=""></p> <p><textarea name="message" placeholder="* Your message here" cols="50" rows="10">

* Please fill all require form field, thanks!

Khi chạy chương trình, sẽ có kết quả sau:

2. Bài tập 2

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

Hướng dẫn

Đây là một danh sách, danh sách này gồm các phần như sau:
- Một image bên trái.
- Một nhóm nội dung bên phải gồm:
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


  
    
      
      
        CLIMATE CHANGE
        Etiam cras ac sapien ipsum. Morbi scelerisque efficitur nibh a fringilla. Nam et diam vel justo praesent rhoncus volutpat turpis vitae hendrerit.
      
    

    
      
      
        COMPREHENSIVE IMMIGRATION REFORM
        Morbi scelerisque efficitur nibh a fringilla. Nam et diam vel justo feugiat venenatis. Praesent rhoncus volutpat turpis vitae hendrerit.
      
    

    
      
      
        ECONOMIC OPPORTUNITY
        Phasellus vulputate pharetra tempor. Aliquam in tortor in arcu iaculis malesuada, nam et diam vel justo feugiat venenatis.
      
    

    
      
      
        HEALTH CARE
        onec feugiat ipsum ac risus auctor dignissim. Phasellus ante dolor, molestie vitae malesuada id, posuere non est.
      
    
  
```
  Khi chạy chương trình, sẽ có kết quả sau:
  
  3. Bài tập 3
  
  Hướng dẫn
  
  Design này là footer, cấu trúc tách biệt làm 2 phần.
  - Phần bên trên chia làm 3 phần, cấu trúc mỗi phần làm như các bài tập trước.
  - Phần bên dưới là copyright, nên dùng
    hoặc
    
    đều đượ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



  
    
      
        About us
        Nullam viverra a velit et sodales. Etiam eu odio quis felis pretium interdum quis in velit. Nullam eu justo.
      

      
        Quick Links
        
          
            Home
            Service
            Appointment
          
        
      

      
        Follow Us
        
          
          
          
          
        
      
    

    Copyright Hoc Web Chuan All Right Reserved.
  
```
    Khi chạy chương trình, sẽ có kết quả sau:
    
    Trên đây là một số bài tập HTML nâng cao 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ận dụng và nâng cao được những kiến thức đã học vào thực tế lập trình.

1. Bài tập 1

2. Bài tập 2

CLIMATE CHANGE

COMPREHENSIVE IMMIGRATION REFORM

ECONOMIC OPPORTUNITY

HEALTH CARE

3. Bài tập 3