Bài Tập HTML Cơ Bản

Trang chủ » Bài Tập Về Html » Bài Tập HTML Cơ Bản

Có thể bạn quan tâm

https://www.elib.vn/huong-dan/
  1. Trang chủ
  2. Hướng dẫn
  3. Ôn thi
  4. Tin học
Bài tập HTML cơ bản (10) 281 lượt xem Share

Dưới đây là một số bài tập dùng HTML cơ bản để viết một số chương trình căn bản nhằm giúp các bạn nắm rõ hơn và ôn lại kiến thức cũ.

Mục lục nội dung

1. Bài tập 1

2. Bài tập 2

3. Bài tập 3

4. Bài tập 4

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 <hx> có một đoạn nhấn mạnh "Shared Hosting", nên ta cần sử dụng thẻ <strong>
  • 2 liên kết button có dạng danh sách, nên ta sử dụng thẻ <ul> <li>, 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 <section> bao ngoài.
  • 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ự.
  • Nếu cấu trúc là image thì dùng <img>.
  • Nếu cấu trúc là đoạn văn thì dùng <p>.
  • Nếu cấu trúc là một danh sách thì dùng <ul> <li>.
  • Nếu cấu trúc là một danh sách có thứ tự, thì dùng <ol> <li>.
  • Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ <form>.
  • Đố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.
  • Với mỗi thành bao ngoài như <section> hay <div> 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

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học lập trình</title> </head> <body> <section class="best-shared"> <p class="logo"><img src="/exercises/images/img_190x50.png" alt=""></p> <h2>Best <strong>Shared Hosting</strong> Company</h2> <p class="lead-text">With this responsive landing page template, you can promote your all hosting, domain and email services.</p> <ul class="btn-list"> <li><a href="./">View Plans</a></li> <li><a href="./">All Features</a></li> </ul> </section> </body> </html>

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à <button>, ta cần sử dụng các thành phần của <form>.

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 <section> bao ngoài.
  • 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ự.
  • Nếu cấu trúc là image thì dùng <img>.
  • Nếu cấu trúc là đoạn văn thì dùng <p>.
  • Nếu cấu trúc là một danh sách thì dùng <ul> <li>.
  • Nếu cấu trúc là một danh sách có thứ tự, thì dùng <ol> <li>.
  • Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ <form>.
  • Đố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.
  • Với mỗi thành bao ngoài như <section> hay <div> 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:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học lập trình</title> <link rel="stylesheet" href="/exercises/css/fontawesome.css" media="all"> </head> <body> <section class="invite"> <p class="icon"><i class="far fa-envelope"></i></p> <h2>Get the invite</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <form action="/" method=""> <p><input type="email" value="" placeholder="Enter Email"></p> <p><button type="submit">REQUEST INVITE</button></p> </form> </section> </body> </html>

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 <ul> <li>.
  • 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 <hx> 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 <section> bao ngoài.
  • 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ự.
  • Nếu cấu trúc là image thì dùng <img>.
  • Nếu cấu trúc là đoạn văn thì dùng <p>.
  • Nếu cấu trúc là một danh sách thì dùng <ul> <li>.
  • Nếu cấu trúc là một danh sách có thứ tự, thì dùng <ol> <li>.
  • Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ <form>.
  • Đố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.
  • Với mỗi thành bao ngoài như <section> hay <div> 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:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học lập trình</title> <link rel="stylesheet" href="/exercises/css/fontawesome.css" media="all"> </head> <body> <ul class="product-list"> <li> <p class="icon"><i class="fas fa-leaf"></i></p> <h3>UI/UX Design</h3> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.</p> </li> <li> <p class="icon"><i class="fa fa-desktop"></i></p> <h3>Web Development</h3> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.</p> </li> <li> <p class="icon"><i class="fa fa-briefcase"></i></p> <h3>Branding</h3> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.</p> </li> <li> <p class="icon"><i class="fa fa-camera"></i></p> <h3>Photography</h3> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.</p> </li> <li> <p class="icon"><i class="fab fa-android"></i></p> <h3>Apps Development</h3> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.</p> </li> <li> <p class="icon"><i class="fas fa-chart-line"></i></p> <h3>Digital Marketing</h3> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit mi quis, vulputate magna.</p> </li> </ul> </body> </html>

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 <h1> 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 <nav>.
  • Chú ý phần <button> 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 <section> bao ngoài.
  • 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ự.
  • Nếu cấu trúc là image thì dùng <img>.
  • Nếu cấu trúc là đoạn văn thì dùng <p>.
  • Nếu cấu trúc là một danh sách thì dùng <ul> <li>.
  • Nếu cấu trúc là một danh sách có thứ tự, thì dùng <ol> <li>.
  • Nếu cấu trúc có chứa thông tin nhập liệu, thì ta dùng các thẻ <form>.
  • Đố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.
  • Với mỗi thành bao ngoài như <section> hay <div> 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:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Học lập trình</title> <link rel="stylesheet" href="/exercises/css/fontawesome.css" media="all"> </head> <body> <header> <h1 id="logo"><a href="./"><img src="/exercises/images/img_190x50.png" alt=""></a></h1> <nav class="navigation"> <ul> <li><a href="./">Home</a></li> <li><a href="./">Features</a></li> <li><a href="./">Domain</a></li> <li><a href="./">Hosting</a></li> <li><a href="./">Pricing</a></li> <li><a href="./">Testimonials</a></li> <li><a href="./">Contact</a></li> </ul> </nav> <p class="login"><i class="fas fa-lock"></i><button>Customer Login</button></p> </header> </body> </html>

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
(10) 281 lượt xem Share Ngày:12/11/2020 Chia sẻ bởi:Denni Trần TẢI VỀ XEM ONLINE CSS HTML lập trình phần mềm

CÓ THỂ BẠN QUAN TÂM

  • Bài 2: Đối tượng, mục đích và yêu cầu về phương pháp học tập, nghiên cứu những nguyên lý cơ bản của chủ nghĩa Mác - Lênin
  • Từ vựng tiếng Anh chủ đề các loài động vật
  • Từ vựng tiếng Anh chủ đề các loài cây
  • Từ vựng tiếng Anh chủ đề các loại trái cây
  • Từ vựng tiếng Anh chủ đề các loại rau củ
  • Từ vựng tiếng Anh chủ đề phong cảnh
  • Từ vựng tiếng Anh chủ đề thời tiết
  • Từ vựng tiếng Anh chủ đề môi trường
  • Bài 1: Đối tượng nghiên cứu
  • Từ vựng tiếng Anh chủ đề màu sắc
Lập trình HTML và CSS

Giới thiệu về HTML

  • 1 Các thẻ trong HTML
  • 2 Định dạng trong HTML
  • 3 Đoạn văn trong HTML
  • 4 Liên kết trong HTML
  • 5 Image trong HTML
  • 6 Table trong HTML
  • 7 Danh sách trong HTML
  • 8 Danh sách có thứ tự trong HTML
  • 9 Danh sách không có thứ tự trong HTML
  • 10 Danh sách mô tả trong HTML
  • 11 Form trong HTML
  • 12 Thuộc tính style trong HTML
  • 13 Comment trong HTML
  • 14 Màu trong HTML
  • 15 Các thuộc tính trong HTML

Các thẻ HTML

  • 1 Thẻ Marquee trong HTML
  • 2 Thẻ Textarea trong HTML
  • 3 Doctype HTML
  • 4 Thẻ title trong HTML
  • 5 Thẻ meta trong HTML
  • 6 Thẻ Div trong HTML
  • 7 Thẻ pre trong HTML
  • 8 Thẻ code trong HTML
  • 9 Thẻ Label trong HTML
  • 10 Thẻ Input trong HTML
  • 11 Thẻ Button trong HTML
  • 12 Thẻ HR trong HTML
  • 13 Thẻ BR trong HTML
  • 14 Thẻ Script trong HTML
  • 15 Thẻ NoScript trong HTML
  • 16 Thẻ b trong HTML
  • 17 Thẻ Quotes trong HTML

Giới thiệu về CSS

  • 1 Cú pháp CSS
  • 2 CSS Selector
  • 3 Liên kết CSS với HTML
  • 4 Đơn vị đo trong CSS
  • 5 Mã màu trong CSS
  • 6 Comment trong CSS

CSS Các thuộc tính

  • 1 CSS Background
  • 2 CSS Border
  • 3 CSS display
  • 4 Thuộc tính float trong CSS
  • 5 Thuộc tính Font trong CSS
  • 6 Thuộc tính Margin trong CSS
  • 7 Thuộc tính opacity trong CSS
  • 8 Thuộc tính overflow trong CSS
  • 9 Thuộc tính Padding trong CSS
  • 10 Thuộc tính Position trong CSS
  • 11 Thuộc tính Align trong CSS
  • 12 Thuộc tính white-space trong CSS
  • 13 Thuộc tính tùy chỉnh kích thước trong CSS
  • 14 Thuộc tính word-wrap trong CSS
  • 15 Thuộc tính outline trong CSS
  • 16 Thuộc tính visibility trong CSS
  • 17 Thuộc tính Counter trong CSS
  • 18 Block và Inline trong CSS
  • 19 Thuộc tính cursor trong CSS
  • 20 Tạo kiểu, viết CSS cho List
  • 21 Tạo kiểu, viết CSS cho Link
  • 22 Thuộc tính z-index trong CSS
  • 23 Pesudo Element trong CSS
  • 24 Pesudo class trong CSS

CSS nâng cao

  • 1 CSS Animation
  • 2 CSS Gradient
  • 3 Transition trong CSS
  • 4 Tooltip trong CSS
  • 5 CSS Arrow
  • 6 CSS Flexbox
  • 7 Media Type trong CSS
  • 8 2D Transform trong CSS
  • 9 3D Transform trong CSS
  • 10 User Interface trong CSS
  • 11 Qui tắc @page trong CSS

CSS Design

  • 1 Layout trong CSS
  • 2 Table trong CSS

Bài tập HTML, CSS

  • 1 Câu hỏi trắc nghiệm HTML có đáp án
  • 2 Câu hỏi trắc nghiệm CSS có đáp án
  • 3 Bài tập HTML cơ bản
  • 4 Bài tập HTML nâng cao
  • 5 Bài tập CSS cơ bản
  • 6 Bài tập CSS nâng cao

Phỏng vấn HTML, CSS

  • 1 Câu hỏi phỏng vấn HTML
  • 2 Câu hỏi phỏng vấn CSS

Tài liệu tham khảo HTML, CSS

  • 1 Tài liệu tham khảo HTML & CSS
Thông báo
Bạn vui lòng đăng nhập trước khi sử dụng chức năng này Bỏ qua Đăng nhập ATNETWORK ATNETWORK

Từ khóa » Bài Tập Về Html