Xây dựng 1 trang HTML định dạng phong cách bằng CSS | Series HTML & CSS căn bản | Bài 9

Chào mừng bạn đã trở lại với series HTML & CSS căn bản! Trong bài giảng trước, ta đã tìm hiểu về các phương pháp chèn CSS vào 1 trang (văn bản) HTML. Trong bài giảng này, chúng ta cùng thực hiện 1 bài thực hành nho nhỏ để vận dụng các kiến thức của những bài trước.

Đề bài: Xây dựng 1 trang HTML đơn giản kết hợp CSS có nội dung và định dạng phong cách như dưới đây:

Trang HTML chưa được định dạng bằng CSS

Trang HTML đã được định dạng bằng CSS

Nếu các bạn đã từng tham khảo qua Bài 5: Xây dựng một trang (văn bản) HTML đơn giản chắc sẽ dễ dàng nhận ra rằng nội dung trang HTML của bài thực hành này chính là nội dung trang HTML mà ta đã xây dựng ở Bài 5. Tuy nhiên, trong Bài 5, chúng ta chỉ dừng lại ở công đoạn xây dựng bố cục phần tử và bố cục nội dung, chưa hề có sự góp mặt của CSS. Chính vì thế Bài giảng này sẽ tận dụng trang HTML mà bạn đã xây dựng trước đó để trung vào việc dùng CSS để định dạng phong cách cho trang.

Nếu bạn chưa từng xem qua Bài 5 thì hãy tham khảo ngay bây giờ để biết cách xây dựng bố cục phần tử và nội dung cho 1 trang HTML nhé. Còn nếu bạn đã tham khảo trước đó rồi, hay đã nắm rõ được cách xây dựng 1 trang HTML, thì chúng ta hãy bắt đầu thực hiện thôi.

Note:

  • Trong bài giảng này mình sẽ  đi thật chậm qua từng công đoạn, giải thích ý nghĩa và mục đích của từng thao tác để những bạn chỉ mới tiếp xúc với lập trình cũng có thể theo kịp.
  • Mình sẽ áp dụng đồng thời cả 3 phương pháp External CSS, Internal CSS và Inline CSS để thực hiện bài thực hành này

Chuẩn bị

Phần mềm soạn thảo: Vẫn sẽ là Notepad (trên Windows) hay TextEdit (trên MacOS). Mình vẫn luôn khuyến khích các bạn sử dụng những phần mềm soạn thảo đơn giản nhất, ít công cụ hỗ trợ nhất để bạn có thể nắm vững cú pháp (syntax) khi bạn học một ngôn ngữ lập trình mới.

Tải file my-page-2.html chứa các đoạn mã HTML (chưa có CSS) mà mình đã soạn sẵn về máy và lưu ở bất kỳ thư mục nào mà bạn mong muốn.

Mở file my-page-2.html bằng phần mềm Notepad (trên Windows) hay TextEdit (trên MacOS). Song song đó, bạn cũng mở file my-page-2.html bằng trình duyệt web (hoccode.org khuyến khích bạn dùng Chrome) để xem nội dung ban đầu của trang lúc chưa được định dạng bằng CSS.


 Lưu ý: Đối với TextEdit trên MacOS, nếu sau khi mở file mà bạn chỉ thấy văn bản đơn thuần thay vì code HTML thì bạn hãy làm theo hướng dẫn sau đây:

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.

Tiến hành

Bước 1: Xem lại nội dung trang HTML và phân chia bố cục nội dung

Trước khi đưa vào những dòng code mới đầu tiên, việt xem lại nội dung trang HTML và phân chia bố cục cho nó là một công việc cần thiết. Tất cả những dự án mình đã thực hiện, dù lớn hay nhỏ, trước khi mình viết CSS cho bất kỳ một trang nào, mình cũng đều thực hiện bước này, bởi nó giúp mình phân định rõ các khu vực nội dung, từ đó giúp công việc viết CSS trở nên nhanh và hiệu quả hơn.

Ở bài thực hành này, mình sẽ phân bố cục nội dung thành các khu vực như sau:

Phân chia bố cục

Theo sơ đồ trên, toàn bộ nội dung sẽ được chia thành 2 khu vực chính là

  • Header (bao gồm 2 phân khu nhỏ):
    • Heading
    • Navbar
  • Main content (bao gồm 3 phân khu nhỏ):
    • Part 1
    • Part 2
    • Part 3

Bước 2: Chèn External CSS và Internal CSS

Notepad (Windows) TextEdit (MacOS)

Trên phần mềm Notepad (Windows) bạn thực hiện thao tác:

  • Chọn File -> New Window (hoặc ấn tổ hợp Ctr + Shift + N)
  • Chọn File -> Save as
    • Ô Encoding: UTF-8
    • Đặt tên file là my-page-2-styles.css và lưu chung thư mục với file my-page-2.html.

Trên phần mềm TextEdit (MacOS) bạn thực hiện thao tác:

  • Chọn File -> New
  • Chọn File -> Save
    • Ô Plain Text Encoding: Unicode (UTF-8)
    • Đặt tên file là my-page-2-styles.css và lưu chung thư mục với file my-page-2.html.

Như vậy hiện tại chúng ta đang có 3 cửa sổ làm việc như sau:

  • 1 cửa sổ Notepad/TextEdit để chỉnh sửa file my-page-2.html
  • 1 cửa sổ Notepad/TextEdit để chỉnh sửa file my-page-2-styles.css.
  • 1 cửa sổ trình duyệt (Chrome) mở file my-page-2.html để xem nội dung hiển thị.

Và bây giờ, chúng ta sẽ bắt đầu đưa vào những dòng code mới đầu tiên:

Source code Diễn giải
<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"/>
         <link rel="stylesheet" type="text/css" href="my-page-2-styles.css"/>
         <style>
         </style>

    </head>
    <body>
         ...
    </body>
</html>

Trên cửa sổ Edit file my-page-2.html bạn tiến hành chèn External CSS bằng cách thêm phần tử thẻ <link/> vào bên trong nội dung của phần tử <head></head>.

Thẻ <link/> là thẻ được dùng để kết nối với một tập tin (CSS, media, ảnh...) bên ngoài trang HTML. Tra cứu thêm về thẻ <link/> tại đây.

Trong trường hợp bạn muốn dùng phần tử thẻ <link/> để chèn External CSS, thuộc tính của thẻ <link/> sẽ bao gồm:

  • rel="stylesheet" (bắt buộc)
  • type="text/css" (không bắt buộc)
  • src="..." (bắt buộc, giá trị thuộc tính là đường dẫn đến file chứa code CSS)

Bên trong phần tử thẻ <style></style> là vị trí chúng ta sẽ chèn Internal CSS

   Gợi ý | Để kiểm tra xem quá trình chèn External CSS đã thành công chưa, bạn thực hiện thao tác kiểm tra như sau:

*1 Trên cửa sổ Edit file my-page-2-styles.css bạn nhập 1 Rule CSS đơn giản: body {background-color: yellow} rồi lưu lại (Save).

*2 Trên cửa sổ trình duyệt Chrome đang mở file my-page-2.html bạn tiến hành refresh (F5 trên Windows hoặc Cmd + R tren MacOS). Nếu nền của nội dung trang đã chuyển sang màu vàng tức là 90% là bạn đã kết nối thành công.

*3 Để kiểm tra 10% còn lại cho chắc chắn, bạn chuột phải vào khoảng trắng trên nội dung trang -> chọn View Source. Sau đó tìm đến phần tử thẻ <link.../> click vào đường dẫn my-page-2-styles.css trong thuộc tính src. Nếu trình duyệt mở 1 tab mới với nội dung code giống hệt như ở *1 tức là 100% là bạn đã thực hiện thành công quá trình chèn External CSS rồi nhé.

*4 Trên cửa sổ Edit file my-page-2-styles.css bạn xoá Rule CSS đã thực hiện ở *1 đi để trả lại file trống như ban đầu.

Bước 3: Tiến hành định dạng phong cách cho khu vực header

Minh họa bước 3

Dưới đây là các CSS cần được bổ sung, và mình cũng trích dẫn lại đoạn mã HTML của khu vực này để các bạn dễ quan sát

HTML

      <div class="content-wrapper top-heading">
        <h1 class="text-center">Điện thoại Apple Iphone 12 Pro Max</h1>
        <div class="text-center">Chi tiết về thông số kỹ thuật và đánh giá ban đầu của Iphone 12 Pro Max
   </div>
    </div>
    <nav id="main-nav">
        <ul class="main-nav-list">
            <li class="main-nav-item">
                <a href="https://hoccode.org/photos/files/exercises/my-page-2.html#part1">Thông số kỹ thuật</a>
            </li>
            <li class="main-nav-item">
                <a href="https://hoccode.org/photos/files/exercises/my-page-2.html#part2">Đánh giá ban đầu</a>
            </li>
            <li class="main-nav-item">
                <a href="https://hoccode.org/photos/files/exercises/my-page-2.html#part3">Danh sách các cửa hàng</a>
            </li>
        </ul>
    </nav>

External CSS

Các Rule CSS được dùng để định dạng cho nhiều phần tử, hoặc những phần tử mà mình cho rằng có thể sử dụng cho 1 trang HTML khác có nội dung tương tự

html {
    scroll-behaviorsmooth;
}
Dùng để tạo hiệu ứng chuyển động trượt xuống mỗi khi người dùng click vào các anchor link trên Navbar
body {
    margin0px;
}
Các trình duyệt web thường gán thuộc tính CSS margin mặc định cho phần tử thẻ <body></body>, trong trường hợp này mình không cần nó nên sẽ điều chỉnh giá trị thuộc tính này về 0px
.content-wrapper {
    padding-left10px;
    padding-right10px;
}
Mình tạo CSS này và class content-wrapper để thụt lề 2 bên cho một số phần tử mà mình muốn. (Xem lại và đối chiếu với HTML bên trên)
.text-center {
    text-aligncenter;
}
Mình tạo CSS này và class text-center để canh lề giữa cho nội dung text của một số phần tử mà mình muốn. (Xem lại và đối chiếu với HTML bên trên)
.top-heading {
    background-color#0a4882;
    color#fff;
    padding-top1px;
    padding-bottom15px;
}
Để có thể định dạng cho khu vực Heading, mình đã tạo class top-heading và gắn nó với CSS Rule chứa các định dạng bao gồm: màu nền (background-color), màu chữ (color), tạo khoảng trống cho lề trên (padding-top), tạo khoảng trống cho lề dưới (padding-bottom).
#main-nav {
    border1px solid #ccc;
    box-shadow0 4px 2px -2px #ccc;
    positionsticky;
    top0px;
    background#fff;
}
Để định dạng cho khu vực Navbar, mình đã tạo id main-nav và gắn nó với CSS Rule chứa định dạng bao gồm: viền (border), đổ bóng (box-shadow), cố định thanh Navbar khi người dùng trượt xuống (position: sticky; top: 0px;), màu nền (background)
.main-nav-list {
    margin-block-start0;
    margin-block-end0;
    padding-inline-start0px;
    text-aligncenter;
}

CSS Rule này dùng để định dạng cho phần tử thẻ <ul class="main-nav-list"></ul> bên trong phần tử <nav id="main-nav"></nav>.

Các trình duyệt web thường gán thuộc tính CSS thụt lề trái cho phần tử thẻ <ul></ul>, do đó mình tạo class main-nav-list và gắn nó với CSS Rule chứa các định dạng ngăn không cho thụt lề trái cũng như canh lề giữa cho text bên trong (text-align)

.main-nav-item {
    displayinline-block;
    padding-top10px;
    padding-bottom10px;
    padding-left15px;
    padding-right15px;
}

CSS Rule này dùng để định dạng cho các phần tử thẻ <li class="main-nav-item"></li> bên trong phần tử <ul class="main-nav-list"></u>.

Để định dạng cho các phần tử thẻ <li></li> này, mình đã tạo class main-nav-item và gắn nó với CSS Rule chứa các định dạng:

  • Chuyển kiểu hiển thị của phần tử về dạng khối có thể nằm chung hàng với text (display: inline-block)
  • Tạo khoảng trống bên trên phần tử (padding-top)
  • Tạo khoảng trống bên dưới phần tử (padding-bottom)
  • Tạo khoảng trống bên trái phần tử (padding-left)
  • Tạo khoảng trống bên phải phần tử (padding-right)
Internal CSS

Ở khu vực này mình chưa cần dùng đến Internal CSS

Inline CSS

Ở khu vực này mình chưa cần dùng đến Inline CSS

Bước 4: Tiến hành định dạng phong cách cho khu vực Main Content

Bước 4

Dưới đây là các CSS cần được bổ sung, và mình cũng trích dẫn lại đoạn mã HTML của khu vực này để các bạn dễ quan sát

HTML

Nhờ vào các Rule CSS đã tạo sẵn ở bước 1 có selector là .content-wrapper  và .text-center, mình có thể sử dụng nó làm giá trị thuộc tính class cho một số phần tử  HTML khác mà mình muốn định dạng ở khu vực nội dung này. Đây chính là một trong những thủ thuật giúp lập trình viên có thể rút ngắn các dòng code, giúp code đẹp và dễ chỉnh sửa hơn.


   <section class="part1">
        <div class="content-wrapper">
            <h2 id="part1" class="section-title text-center">Thông số kỹ thuật</h2>
            <div class="clear-both">
                <div class="part1-left">
                    <p><img style="width: 100%; max-width: 350px; height: auto;" alt="Iphone 12 Pro Max"
                            src="./my-page-2_files/iphone-12-pro-max-xanh-duong-new-600x600-600x600.jpg"></p>
                </div>
                <div class="part1-right">
                    <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>
                                <td>128GB / 256GB / 512GB</td>
                            </tr>
                            <tr>
                                <td>Khe SIM:</td>
                                <td>1 Nano SIM &amp; 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>
                </div>
            </div>
        </div>
    </section>
    <section class="part2">
        <div class="content-wrapper">
            <h3 id="part2" class="section-title text-center">Đánh giá ban đầu</h3>
            <div class="clear-both">
                <div class="part2-left">
                    <p class="pd-lr-10"><img style="width: 100%; max-width: 450px; height: auto;"
                            alt="Màn hình của Iphone 12 Pro Max" src="./my-page-2_files/gsmarena_019.jpg"></p>
                </div>
                <div class="part2-right">
                    <h4>Màn hình luôn là điểm nhấn của dòng Pro Max</h4>
                    <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>
                </div>
            </div>
            <div class="clear-both">
                <div class="part2-right">
                    <h4>Thời lượng pin đảm bảo tốt cho giải trí và công việc</h4>
                    <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>
                </div>
                <div class="part2-left">
                    <p class="pd-lr-10"><img style="width: 100%; max-width: 450px; height: auto;"
                            alt="Thời lượng Pin của Iphone 12 Pro Max" src="./my-page-2_files/gsmarena_309.jpg"></p>
                </div>
            </div>
        </div>
    </section>
    <section class="part3">
        <div class="content-wrapper">
            <h3 id="part3" class="section-title text-center">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>
        </div>
    </section>

External CSS

Các Rule CSS  thường được dùng để định dạng cho nhiều phần tử, hoặc những phần tử mà mình cho rằng có thể sử dụng cho 1 trang HTML khác có nội dung tương tự

.section-title {
    font-size24px;
}

CSS Rule này dùng để dịnh dạng các phần tử HTML sau đây:

...
<h2 id="part1" class="section-title text-center">Thông số kỹ thuật</h2>
...
<h3 id="part2" class="section-title text-center">Đánh giá ban đầu</h3>
...
<h3 id="part3" class="section-title text-center">Danh sách các cửa hàng</h3>
...

trong đó thuộc tính CSS font-size sẽ giúp định dạng lại cỡ chữ cho 3 phần tử này

.pd-lr-10 {
    padding-left10px;
    padding-right10px;
}
Mình tạo CSS Rule này và class pd-lr-10 để thụt lề 2 bên với khoảng cách 10px cho một số phần tử mà mình muốn. (Xem lại và đối chiếu với HTML bên trên)
.clear-both::before {
    displaytable;
    content" ";
}
.clear-both::after {
    displaytable;
    content" ";
    clearboth;
}

Đây là một dạng đặc biệt trong CSS được gọi là CSS generated content, khi Rule CSS cho phép bạn chèn thêm content ở vị trí đầu (before) và cuối (after) của một phần tử.

Mình tạo CSS Rule này và class clear-both bao lấy những phần tử con bên trong, không cho những phần tử khác bên ngoài nhảy vào chung hàng. (Xem lại và đối chiếu với HTML bên trên)


Internal CSS
Các Rule CSS thường được dùng để định dạng cho nhiều phần tử của 1 trang HTML duy nhất
.part1-left {
    width45%;
    floatleft;
    text-aligncenter;
}
.part1-right {
    width55%;
    floatleft;
}
Mặc định, phần tử thẻ <div></div> luôn được trình duyệt định dạng chiều rộng là 100%. Chính vị thế để định dạng cho phân khu part 1 theo kiểu ảnh (hình) bên trái, nội dung thông số kỹ thuật bên phải, mình tạo 2 Rule CSS này để định dạng cho phần tử mang class part1-left và part1-right trong đó:
  • width dùng để thay đổi chiều rộng của phần tử
  • float: left dùng để định dạng phần tử dạng khối (block) có thể nằm chung hàng với 1 phần tử khác
  • text-align dùng để canh lề cho text
.part2-left {
    width47%;
    floatleft;
    text-aligncenter;
}
.part2-right {
    width53%;
    floatleft;
}
Tương tự như trên, 2 CSS Rule này cũng được dùng để định dạng cho những phần tử mang class part2-left part2-right, sao cho 2 phần tử thẻ <div></div> có thể nằm chung 1 hàng.
.part2 {
    background-color#e4edf5;
    padding-top20px;
    padding-bottom20px;
}

Cuối cùng, mình tạo Rule CSS để định dạng cho phần tử bao lấy toàn bộ phân khu Part 2, trong đó:

  • background-color dùng để định dạng màu nền
  • padding-top:  dùng để tạo khoảng trống bên trên phần tử
  • padding-bottom:  dùng để tạo khoảng trống bên dưới phần tử
Inline CSS
CSS được dùng để định dạng 1 phần tử nhất định của 1 trang HTML duy nhất
....
<div class="part2-left">

   <p class="pd-lr-10"><img style="width: 100%; max-width: 450px; height: auto;" alt="Màn hình của Iphone 12 Pro Max" src="./my-page-2_files/gsmarena_019.jpg"></p>
</div>
....
width: 100% quy định độ rộng phần tử luôn bằng với độ rộng bên trong của phần tử bao lấy nó (khi phần tử bao lấy nó thu nhỏ, thì bản thân nó cũng sẽ thu nhỏ theo, và ngược lại
max-width quy định độ rộng phần tử không bao giờ lớn hơn 1 con số nhất định
height: auto quy định chiều cao của phần tử sẽ được điều chỉnh tự động tương ứng với độ rộng của phần tử
<div class="part2-left">
  <p class="pd-lr-10"><img style="width: 100%; max-width: 450px; height: auto;" alt="Thời lượng Pin của Iphone 12 Pro Max" src="./my-page-2_files/gsmarena_309.jpg"></p>
</div>

Kiểm tra

Khi bạn hoàn tất bước 4 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. Công đoạn cuối cùng không thể thiếu chính là kiểm tra. Bạn hãy kiểm tra lại kết quả của mình bằng cách refresh lại cửa sổ trình duyệt đang chạy file my-page-2.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!