Skip to content

260611 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tynab merged 1 commit into from
Jun 11, 2026
Merged

260611 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
# Auto detect text files and perform LF normalization
* text=auto
# Summary: Normalize text files while keeping binary image assets managed by Git LFS.
* text=auto eol=lf

# Source and documentation files should stay readable in diffs.
*.html text eol=lf
*.md text eol=lf
*.yml text eol=lf
*.yaml text eol=lf

# Image files are binary assets, so they should not be normalized as text.
*.jpg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
15 changes: 3 additions & 12 deletions .github/FUNDING.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
# These are supported funding model platforms

# Summary: GitHub funding links displayed on the repository sponsor panel.
github: tynab
patreon: yamiannephilim
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
custom: paypal.me/yamiannephilim
custom:
- https://paypal.me/yamiannephilim
22 changes: 17 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
# BÀI TẬP
Tạo trang web.
# Bài Tập HTML

## HÌNH ẢNH DEMO
<p align='center'>
<img src='pic/0.jpg'></img>
## Summary

Repository này chứa các bài thực hành HTML cơ bản về bố cục trang, liên kết nội bộ, hình ảnh, danh sách và bảng dữ liệu cho một Coffee Shop demo.

## Cấu trúc

- `exercise_1/index.html`: Trang giới thiệu Coffee Shop đơn giản với hai phần Coffee và Tea.
- `exercise_2/index.html`: Trang giới thiệu có liên kết nội bộ, ảnh minh họa và liên kết sang menu.
- `exercise_2/coffee/coffee.html`: Menu Coffee với danh sách, hình ảnh và bảng giá.
- `exercise_2/tea/tea.html`: Menu Tea với danh sách, hình ảnh và bảng giá.
- `exercise_summary/index.html`: Bài tổng hợp dạng thẻ nội dung ngắn.

## Hình ảnh demo

<p align="center">
<img src="pic/0.jpg" alt="Ảnh demo giao diện bài tập HTML" style="width: 100%; max-width: 720px; height: auto;">
</p>
131 changes: 92 additions & 39 deletions exercise_1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,101 @@
<!DOCTYPE html>
<html>
<!--
Summary:
- Trang giới thiệu Coffee Shop ở mức cơ bản.
- Nội dung được chia thành hai section Coffee và Tea.
- CSS đặt trong file để bài tập có thể mở trực tiếp trên trình duyệt.
-->
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to the Coffee Shop</title>

<style>
/* Base layout: keeps the page centered and responsive on smaller screens. */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #222;
background-color: #fffdf9;
}

.page {
width: min(100% - 32px, 1200px);
margin: 0 auto;
padding: 16px 0 32px;
}

.page-title {
margin: 0;
padding: 12px 16px;
text-align: center;
color: #fff;
background-color: #a52a2a;
}

.divider {
height: 3px;
margin: 16px 0;
border: 0;
background-color: #808080;
}

.section-title {
text-align: center;
}

.coffee-text {
color: #8f2f24;
}

.tea-text {
text-align: right;
color: #1d4ed8;
}

@media (max-width: 640px) {
.tea-text {
text-align: left;
}
}
</style>
</head>

<body>
<div style="width: 1550px; margin: auto; padding-top: 10px;">
<h1 style="text-align: center; background-color: #A52A2A; color: white">Welcome to the Coffee Shop</h1>
<hr style="height: 3px; background-color: #808080;">
<hr style="height: 3px; background-color: #808080;">
<h3 style="text-align: center;">Coffee</h3>
<p style="color: #A52A2A;">
Coffee is a brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea
plant.<br>
The genus Coffea is native to tropical Africa (specifically having its origin in Ethiopia and Sudan) and
Madagascar, the Comoros, Mauritius, and Réunion in the Indian Ocean.<br>
The plant was exported from Africa to countries around the world.<br>
Coffee plants are now cultivated in over 70 countries, primarily in the equatorial regions of the Americas,
Southeast Asia, India, and Africa.<br>
The two most commonly grown are arabica and robusta.<br>
Once ripe, coffee berries are picked, processed, and dried.<br>
Dried coffee seeds (referred to as beans) are roasted to varying degrees, depending on the desired
flavor.<br>
Roasted beans are ground and brewed with near-boiling water to produce coffee as a beverage.<br>
</p>
<hr style="height: 3px; background-color: #808080;">
<hr style="height: 3px; background-color: #808080;">
<h3 style="text-align: center;">Tea</h3>
<p style="text-align: right; color: blue;">
Coffee is a brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea
plant.<br>
The genus Coffea is native to tropical Africa (specifically having its origin in Ethiopia and Sudan) and
Madagascar, the Comoros, Mauritius, and Réunion in the Indian Ocean.<br>
The plant was exported from Africa to countries around the world.<br>
Coffee plants are now cultivated in over 70 countries, primarily in the equatorial regions of the Americas,
Southeast Asia, India, and Africa.<br>
The two most commonly grown are arabica and robusta.<br>
Once ripe, coffee berries are picked, processed, and dried.<br>
Dried coffee seeds (referred to as beans) are roasted to varying degrees, depending on the desired
flavor.<br>
Roasted beans are ground and brewed with near-boiling water to produce coffee as a beverage.<br>
</p>
</div>
<!-- Main content wrapper for the whole exercise page. -->
<main class="page" aria-labelledby="page-title">
<h1 class="page-title" id="page-title">Welcome to the Coffee Shop</h1>

<hr class="divider">

<!-- Coffee section: short introduction about coffee beans and brewing. -->
<section aria-labelledby="coffee-title">
<h2 class="section-title" id="coffee-title">Coffee</h2>
<p class="coffee-text">
Coffee is a brewed drink prepared from roasted coffee beans, which are the seeds of berries from the
Coffea plant. The genus Coffea is native to tropical Africa and islands in the Indian Ocean. Coffee
plants are now cultivated in over 70 countries, primarily in equatorial regions of the Americas,
Southeast Asia, India, and Africa. Once ripe, coffee berries are picked, processed, dried, roasted,
ground, and brewed with near-boiling water to produce coffee as a beverage.
</p>
</section>

<hr class="divider">

<!-- Tea section: separate tea content instead of repeating the coffee paragraph. -->
<section aria-labelledby="tea-title">
<h2 class="section-title" id="tea-title">Tea</h2>
<p class="tea-text">
Tea is an aromatic beverage made by pouring hot water over cured or fresh leaves. Green tea, black tea,
oolong tea, and white tea all come from the same tea plant, but they are processed in different ways.
Tea can be served hot or cold, enjoyed plain, or combined with milk, fruit, herbs, and sugar depending
on local taste.
</p>
</section>
</main>
</body>

</html>
</html>
Loading