Chào các bạn đã trở lại với series HTML & CSS căn bản!
Trong bài giảng trước đó, chúng ta đã tìm hiểu về bố cục phần tử và bố cục nội dung của 1 trang (văn bản) HTML. Trong bài giảng này, chúng ta sẽ cùng thực hiện một bài tập thực hành nho nhỏ để áp dụng các kiến thức đã học trong bài giảng trước, cũng như tìm hiểu thêm về cách dùng của một số thẻ HTML phổ biến.
Nào chúng ta cùng bắt đầu thôi!
TÓM TẮT NỘI DUNG
Đề bài: Tạo một trang (văn bản) HTML có nội dung như sau
Chuẩn bị
Phần mềm soạn thảo code: Notepad (trên Windows) hoặc TextEdit (trên MacOS)
Đối với những bạn mới tập tành viết code, mình khuyến khích các bạn sử dụng 2 phần mềm trên, vì những lợi ích mà nó mang lại như sau:
- Là phần mềm có sẵn trên hệ điều hành, không cần phải cài đặt.
- Gọn, nhẹ, tốc độ mở file cực kỳ nhanh.
- Giao diện tối giản giúp người viết code có thể tập trung hoàn toàn vào những dòng code.
Việc sử dụng những phần mềm chứa những công cụ nâng cao, tự động hoá, quá sớm (ví dụ như Dreamweaver) sẽ thui chột đi sự nhạy bén, khả năng ghi nhớ và nhận diện syntax, tính sáng tạo của lập trình viên trong những dòng code. Ngay cả W3School cũng khuyến khích những coder mới (newbee) chỉ nên sử dụng Notepad hoặc TextEdit khi mới làm quen.
Tạo một file mới trên phần mềm soạn thảo:
| Đối với Notepad (trên Windows) | Đối với TextEdit (trên MacOS) |
| Bước 1: Khởi động phần mềm Notepad
Bước 2: Chọn File -> Save as
|
Bước 1: Khởi động phần mềm TextEdit
Bước 2: Chọn New Document Bước 3: Chọn Format -> Make Plain Text Bước 4: Chọn File -> Save
Bước 5: Chọn Text Edit -> Preferences
|
Sau đó bạn cũng mở file my-page-1.html bằng trình duyệt web (khuyến khích bạn sử dụng trình duyệt Chrome). Như vậy lúc này ta có 2 cửa sổ làm việc:
- 1 cửa sổ dùng để Edit file
my-page-1.htmlbằng Notepad/TextEdit - 1 cửa sổ dùng để xem nội dung file
my-page-1.htmlsau khi được rendered (bằng trình duyệt Chrome)
Tiến hành
Bước 1: Tạo đoạn mã với bố cục phần tử cơ bản như sau:
| Source code | Ghi chú về syntax |
<html> <head></head> <body></body></html>
Nhớ thực hiện thao tác save sau khi bạn viết xong đoạn code nhé! |
Mỗi khi bạn viết một phần tử HTML dưới dạng cặp thẻ, sau khi bạn viết thẻ mở <tag>, hãy viết thẻ đóng </tag> ngay lặp tức, sau đó đặt trỏ ở giữa thẻ mở và thẻ đóng để viết nội dung bên trong. Việc tập thói quen này sẽ giúp bạn không vấp phải lỗi quên viết thẻ đóng trong HTML.
Ví dụ: Ban đầu mình viết cặp thẻ Sau đó mình đặt trỏ ở giữa cặp thẻ này, để chèn nội dung:
|
Bước 2: Tạo các phần tử chứa các Metadata cần thiết bên trong phần tử thẻ <head></head>
| Source code | Ghi chú về syntax |
<html> <head> <title>Điện thoại Apple Iphone 12 Pro Max</title> <meta name="description" content="Chi tiết về thông số kỹ thuật và đánh giá ban đầu của Iphone 12 Pro Max"/> </head> <body></body></html>
Nhớ thực hiện thao tác save sau khi bạn viết xong đoạn code nhé! |
Khi viết những phần tử HTML (phần tử con) nằm bên trong phần tử HTML khác (phần tử cha), hãy đặt nó ở 1 dòng riêng và thụt dòng bằng tab với khoảng cách sao cho lề của phần tử con luôn lớn hơn lề của phần tử cha 1 tab. Việc này sẽ giúp code của bạn trong đẹp mắt, cân đối hơn, dễ phát hiện sai sót (nếu có) hơn. |
Bước 3: Viết các phần tử nội dung bên trong phần tử thẻ <body></body>. Chúng ta sẽ bắt đầu với tiêu đề, mô tả và mục lục.
| Source code | Ghi chú syntax |
...<body> <h1>Điện thoại Apple Iphone 12 Pro Max</h1> <p>Chi tiết về thông số kỹ thuật và đánh giá ban đầu của Iphone 12 Pro Max</p> <p>Mục lục: <a href="#part1">Thông số kỹ thuật</a> - <a href="#part2">Đánh giá ban đầu</a> - <a href="#part3">Danh sách các cửa hàng</a></p></body>...
Nhớ thực hiện thao tác save sau khi bạn viết xong đoạn code nhé! |
Thẻ <a></a> không phải lúc nào cũng được sử dụng để tạo một liên kết tới 1 trang khác hay 1 website khác, mà nó có thể sử dụng để tạo phần tử liên kết đến một phần tử khác có thuộc tính id. Đó chính là anchor link.
Ở trang HTML này, mình tạo 3 anchor link để liên kết với 3 phần tử có giá trị thuộc tính id lần lượt là |
| Preview | |
Bước 4: Viết các phần tử cho đoạn nội dung “Thông số kỹ thuật”
| Source code | Ghi chú syntax |
...<h2 id="part1">Thông số kỹ thuật</h2><table> <tbody> <tr> <td>Màn hình:</td> <td>OLED, 6.7", Super Retina XDR</td> </tr> <tr> <td>Hệ điều hành:</td> <td>iOS 14</td> </tr> <tr> <td>Camera sau:</td> <td>3 camera 12 MP</td> </tr> <tr> <td>Camera trước:</td> <td>12 MP</td> </tr> <tr> <td>CPU:</td> <td><a href="https://en.wikipedia.org/wiki/Apple_A14">Apple A14 Bionic 6 nhân</a></td> </tr> <tr> <td>RAM:</td> <td>6 GB</td> </tr> <tr> <td>Lựa chọn bộ nhớ trong:</td> x </tr> <tr> <td>Khe SIM:</td> <td>1 Nano SIM & 1 eSIM, Hỗ trợ 5G</td> </tr> <tr> <td>Dung lượng pin:</td> <td>3687 mAh, có sạc nhanh</td> </tr> </tbody></table>....
Nhớ thực hiện thao tác save sau khi bạn viết xong đoạn code nhé! |
Để tạo 1 bảng (table), ta sử dụng thẻ <table></table> để bao lấy các phần tử bên trong, bao gồm:
Xem thêm về cách tạo 1 bảng (table) trong HTML tại đây. Để chèn 1 ảnh (hình) vào một vị trí nhất định trong nội dung HTML, ta sẽ sử dụng thẻ |
Bước 5: Viết các phần tử cho đoạn nội dung “Đánh giá ban đầu”
| Source code |
... <h4>Màn hình luôn là điểm nhấn của dòng Pro Max</h4> <p><img width="550px" height="auto" alt="Màn hình của Iphone 12 Pro Max" src="https://fdn.gsmarena.com/imgroot/reviews/20/apple-iphone-12-pro-max/lifestyle/-1200w5/gsmarena_019.jpg"/></p> <p>Với màn hình lớn kết hợp cùng chất lượng hiển thị được cải tiến, Iphone 12 Pro Max đem lại cho người dùng trải nghiệm thuộc hàng đỉnh cao. Bên cạnh công nghệ OLED và Super Retina XDR giúp màu sắc của các điểm ảnh trở nên trung thực và sắc nét, việc trang bị thêm tần số quét 120Hz giúp các thao tác kéo thả trở nên mượt mà hơn bao giờ hết, cũng như nâng cao chất lượng trải nghiệm khi xem các video, phim hay chơi các tựa game. Ngoài ra, so với phiên bản tiền nhiệm Iphone 11 Pro Max, tai thỏ trên màn hình của Iphone 12 Pro Max được thu nhỏ hơn đáng kể, giúp người dùng có thêm không gian để hiển thị các chi tiết UI hay nội dung.</p> <h4>Thời lượng pin đảm bảo tốt cho giải trí và công việc</h4> <p><img width="550px" height="auto" alt="Thời lượng Pin của Iphone 12 Pro Max" src="https://fdn.gsmarena.com/imgroot/reviews/20/apple-iphone-12-pro-max/battery/-1200/gsmarena_309.jpg"/></p> <p>Với kích thước màn hình lớn hơn so với Iphone 12, dĩ nhiên chiếc Iphone 12 Pro Max sẽ được trang bị pin có dung lượng nhiều hơn, lên đến 3687 mAh, có sạc nhanh. Kết quả thử nghiệm trên trang GSMANERA cho thấy chiến Iphone 12 Pro Max có thể xem video liên tục trong vòng 15 tiếng 17 phút, lướt web liên tục trong vòng 14 tiếng 13 phút, thực hiện cuộc gọi 3GB liên tục trong 20 tiếng 54 phút.</p>
Nhớ thực hiện thao tác save sau khi bạn viết xong đoạn code nhé! |
Bước 6: Viết các phần tử cho đoạn nội dung “Danh sách các cửa hàng”
| Source code | Ghi chú syntax |
... <h3 id="part3">Danh sách các cửa hàng</h3> <p>Hiện tại, các bạn có thể mua chiếc điện thoại Iphone 12 Pro Max trên các hệ thống cửa hàng trong danh sách sau đây:</p> <ul> <li> <li>Di động Việt (didongviet.vn)</li> <li>Cellphone S (cellphones.com)</li> <li>FPT Shop (fptshop.com.vn)</li> </ul>...
Nhớ thực hiện thao tác save sau khi bạn viết xong đoạn code nhé! |
Để tạo một danh sách (list) không có đánh dấu thứ tự (unordered), ta sử dụng thẻ <ul></ul> làm phần tử bao lấy các phần tử thẻ <li></li> chứa nội dung của mỗi đầu mục.
Note:
Xem thêm về cách tạo 1 danh sách trong HTML tại đây. |
Kiểm tra
Khi bạn hoàn tất bước 6 cũng đồng nghĩa với việc bạn đã đi qua hết các bước của bài thực hành này rồi đấy. Dĩ nhiên sẽ luôn còn một bước cuối cùng mà bất cứ ai cũng luôn thực hiện, đó là kiểm tra. Hãy nhớ kiểm tra bằng cách refresh lại cửa sổ trình duyệt đang chạy file my-page-1.html xem nội dung hiển thị đã đúng và đầy đủ so với đề bài chưa nhé.
Nếu có bước nào mà bạn thực hiện chưa được, hay bạn chưa hiểu rõ mục đích thực hiện của công đoạn nào, hãy để lại bình luận cho chúng tớ biết nhé. Hoặc nếu bạn cảm thấy nội dung của bài thực hành này bổ ích, hãy cho chúng tớ 1 like, share hay đánh giá nhé.
Chúc các bạn có một ngày học tập và làm việc hiệu quả!
>. Tham Khảo : CSS là gì? Vai trò & vị trí của CSS trong HTML | Series HTML & CSS căn bản | Bài 6
