Tổng hợp bộ bài tập HTML CSS lời giải cho người mới bắt đầu

2024-06-02 07:06:24

1. Tổng quan về HTML

1.1. Định nghĩa HTML

HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu tiêu chuẩn để tạo nên trang web. HTML sử dụng các thẻ để đánh dấu nội dung, và các trình duyệt web hiển thị nội dung dựa trên các thẻ này.

Có thể bạn quan tâm

1.2. Cấu trúc cơ bản của một trang html5

Một trang HTML5 cơ bản thường bao gồm các phần sau:

Bạn đang xem: Tổng hợp bộ bài tập HTML CSS lời giải cho người mới bắt đầu




    
    Tiêu đề trang


    
    
Đây là tiêu đề

    
Đây là đoạn văn bản.
  • : Định nghĩa phiên bản HTML.
  • : Thẻ mở đầu cho một tài liệu HTML.
  • : Chứa thông tin về tài liệu như tiêu đề, meta, và các liên kết tới các tập tin CSS, JavaScript.
  • : Đặt bộ mã hóa ký tự UTF-8 cho tài liệu.
  • </code>: Tiêu đề của trang web.</li> <li><code><body></code>: Nội dung chính của trang web.</li> </ul> <h3><span id="13_Cac_the_va_thuoc_tinh_co_ban">1.3. Các thẻ và thuộc tính cơ bản</span></h3> <ul> <li> <p>Thẻ tiêu đề:</p> <pre><code><h1>Đây là tiêu đề lớn nhất</h1> <h2>Đây là tiêu đề lớn hơn</h2></code></pre> </li> <li> <p>Đoạn văn bản:</p> <pre><code><p>Đây là đoạn văn bản.</p></code></pre> </li> <li> <p>Liên kết:</p> <pre><code><a href="https://www.example.com">Đây là liên kết</a></code></pre> </li> <li> <p>Hình ảnh:</p> <pre><code><img src="duong-dan-den-anh.jpg" alt="Mô tả ảnh"></code></pre> </li> <li> <p>Biểu mẫu:</p> <pre><code><form action="/submit" method="post"> <label for="name">Tên:</label> <input type="text" id="name" name="name"> <input type="submit" value="Gửi"> </form></code></pre> </li> </ul> <div class="read-more"><div class="vertical-line"></div><p>READ MORE:</p><ul><li><a href="https://ispacedanang.edu.vn/giao-trinh-make-up.html">Tổng Hợp Giáo Trình Makeup Chuẩn Chi Tiết 2024</a></li><li><a href="https://ispacedanang.edu.vn/trong-scratch-co-may-kieu-du-lieu.html">Bài 8: Các kiểu dữ liệu và cách sử dụng</a></li></ul></div><h2><span id="2_Bai_tap_HTML_HTML5_co_ban">2. Bài tập HTML & HTML5 cơ bản</span></h2> <h3><span id="21_De_bai_Tao_mot_trang_HTML_don_gian_voi_doan_tieu_de_nhan_manh_cac_yeu_to_manh_me_va_hinh_anh">2.1. Đề bài: Tạo một trang HTML đơn giản với đoạn tiêu đề nhấn mạnh các yếu tố mạnh mẽ và hình ảnh</span></h3> <p class="internal-link" style="padding: 20px; background: #e9ebec;">Xem thêm : <a href="https://ispacedanang.edu.vn/bang-ma-ascii.html" rel="noopener noreferrer" target="_blank">[C]. Bảng Mã ASCII</a></p><p>Trong bài tập này, bạn sẽ tạo một trang HTML đơn giản có các thẻ tiêu đề, đoạn văn, thẻ mạnh, danh sách, và hình ảnh.</p> <p>Yêu cầu: Hình ảnh được đặt ở đầu trang có tại [đường link]. Hình ảnh được đặt ở cuối trang được đặt tại [đường link ảnh 1], [đường link ảnh 2], và [đường link ảnh 3]. Tất cả các siêu liên kết đều trỏ đến [đường link].</p> <p>Lời giải:</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is the first HTML-CSS exercise demo image for html-css exercise

    FIFA World Cup 2014 News

    The biggest scoreline in the history of the FIFA World Cup qualifiers - and indeed in the history of international football - was recorded on 11 April 2001, when Australia beat American Samoa 31-0.

    This legendary match also brought global renown for Archie Thompson, whose 13-goal haul set a new world record, which stands to this day, for an individual player in a single international match.

    And though the defeat earned American Samoa ignominy, so inspiring has their subsequent recovery been that it is now the subject of an acclaimed documentary, ‘Next Goal Wins', showing across the world.

    Destinations

    RSS Feed LinkedIn follow w3resource on twitter

    2.2. Đề bài: Tạo bảng HTML phức tạp

    Lời giải:

    
    
    
        Quick
        brown fox
        jumps
    
    
    
    
        over the
        lazy
        dog
        and
    
    
    
    
        then
        it
        fall
    
    
    
    
        prey to a hunter

    2.3. Đề bài: Tạo Biểu mẫu HTML đơn giản bao gồm các thành phần biểu mẫu chính

    Trong bài tập này bạn sẽ tạo một biểu mẫu HTML đơn giản.

    Khi hoàn thành, trang sẽ có dạng như sau:

    demo image for html-css exercise

    Lời giải:

    


    
    HTML CSS Form exercise


    
    
        
    Travel reservation form
    
        
    * denotes mandatory
    
        
    
            
    
            
    
            
    
            
    
            
    
            
    
            
    
            
    
            
    
            
    
            
    
            Boarding
    
            Fooding
    
            Sight seeing
    
            
    
            
    
            
    
            I agree
    
            I disagree

    2.4. Đề bài: Nhúng âm thanh và video vào trang HTML

    Xem thêm : KHÓA HỌC KỸ NĂNG HỖ TRỢ HELPDESK CHUYÊN NGHIỆP – Professional IT HelpDesk Training Course – Học viện InfoChief

    Tệp cần nhúng được lấy từ: [đường link video ogv] và [đường link video mp4]

    Lời giải:

    


    
    HTML CSS Audio/Video exercise

    2.5. Đề bài: Sử dụng code HTML để code lại nội dung dưới đây

    demo image for html-css exercise

    Code giải:

    


    
    Học web chuẩn


    
    
        
    Learn more about beautiful funiture web design combinations
    
        
    
        
    Today we will teach you how to find professional materials for your funiture web design.
    
        
    Cras malesuada lacus sed eros egestas iaculis. In malesuada ligula justo, eu ornare felis fermentum non. Nunc porta aliquet eros sed varius. Duis feugiat, risus eget tincidunt cursus.
    
        
    Read More

    2.6. Đề bài: Sử dụng CSS để lập trình lại nội dung dưới đây

    demo image for html-css exercise

    Lời giải:

    


    
    Học web chuẩn


    
    
        
    
            
        
    
        
    
            
    Vestibulum ullamcorper ut leo quis
    
            
    
                
    Aenean facilisis lectus ante, ut rutrum eros convallis et.
    
                Vestibulum ullamcorper ut leo quis tristique. Donec in erat commodo, pharetra purus ac, consectetur lacus. Suspendisse odio sapien, egestas at ex sit amet, molestie sagittis est.
    
                In id purus imperdiet nisl accumsan scelerisque. Donec nec justo sed enim dapibus rhoncus. Morbi sed elit vitae metus ullamcorper efficitur.
    
                Fusce aliquam magna id ipsum ultricies interdum. Maecenas nibh risus.
    
            
    
            
    DETAIL

    READ MORE:

    3. Một số dạng bài tập CSS cơ bản

    3.1. Đề bài: Sử dụng CSS để lập trình lại bản thiết kế dưới đây

    Lời giải:

    


    
    Học web chuẩn
    


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

    3.2. Đề bài: Sử dụng Css để lập trình lại bản thiết kế dưới đây

    Lời giải:

    



    
    Học web chuẩn