Xây dựng một trang (văn bản) HTML đơn giản | Series HTML & CSS căn bản | Bài 5

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!

Đề 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

  • Ô Encoding: UTF-8
  • Đặt tên file là my-page-1.html và lưu ở bất kỳ thư mục nào mà bạn muốn.

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

  • Ô Plain Text Encoding: Unicode (UTF-8)
  • Đặt tên file là my-page-1.html và lưu ở bất kỳ thư mục nào mà bạn muốn.

Bước 5: Chọn Text Edit -> Preferences

  • Tab New Document -> Mục Format chọn Plain Text.
  • Tab Open and Save -> Mục When Opening a File chọn Display HTML files as HTML code instead of formatted text.

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.html bằng Notepad/TextEdit
  • 1 cửa sổ dùng để xem nội dung file my-page-1.html sau 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ẻ <html></html>

Sau đó mình đặt trỏ ở giữa cặp thẻ này, để chèn nội dung:

<html>
   ...Nội dung của mình..
</html>


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>
        <meta charset="utf-8"/>

        <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à part1, part 2part 3.

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>
<p><img width="350px" height="auto" alt="Iphone 12 Pro Max" src="https://cdn.tgdd.vn/Products/Images/42/213033/iphone-12-pro-max-xanh-duong-new-600x600-600x600.jpg"/></p>

<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:

<tbody></tbody> là phần tử bao lấy phần thân của bảng.

<tr></tr> là phần tử bao lấy 1 hàng của bảng.

<td></td> là phần tử bao lấy  1 ô bên trong 1 hàng của bảng.

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ẻ <img/> để làm phần tử chèn ảnh, trong đó thuộc tính src sẽ chứa giá trị đường dẫn đến file ảnh, thuộc tính alt chứa giá trị thông tin mô tả ngắn về ảnh, thuộc tính widthheight quy định chiều ngang và chiều cao của ảnh.

Preview

Bước 5: Viết các phần tử cho đoạn nội dung "Đánh giá ban đầu"

Source code

...
        <h3 id="part2">Đánh giá ban đầu</h3>

        <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é!

Preview

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>
            Thế giới Di Động (thegioididong.com)                  </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:

ul là viết tắt của unordered list

li là viết tắt của list item

Xem thêm về cách tạo 1 danh sách trong HTML tại đây.

Preview

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ả!

Đăng ký để nhận được thông báo mỗi khi có bài viết mới!