TÓM TẮT NỘI DUNG
- 1 Đề 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:
- 1.1 Chuẩn bị
- 1.2 Tiến hành
- 1.2.0.1 HTML
- 1.2.0.2 External CSS
- 1.2.0.3 Internal CSS
- 1.2.0.4 Inline CSS
- 1.2.0.5 External CSS
- 1.2.0.6 Internal CSS
- 1.2.0.7 Inline CSS
- 1.2.0.8 .... <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> ....
- 1.2.0.9 <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>
- 1.2.1 Kiểm tra
Đề 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:
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:
|
Trên phần mềm TextEdit (MacOS) bạn thực hiện thao tác:
|
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"/> </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ẻ 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:
|
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
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 |
|
External CSSCá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-behavior: smooth; } |
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 { margin: 0px; } |
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-left: 10px; padding-right: 10px; } |
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-align: center; } |
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-top: 1px; padding-bottom: 15px; } |
Để có thể định dạng cho khu vực Heading, mình đã tạo classtop-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 { border: 1px solid #ccc; box-shadow: 0 4px 2px -2px #ccc; position: sticky; top: 0px; 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-start: 0; margin-block-end: 0; padding-inline-start: 0px; text-align: center; } |
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ẻ |
.main-nav-item { display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; } |
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ẻ
|
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
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à |
|
External CSSCá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-size: 24px;
}
|
CSS Rule này dùng để dịnh dạng các phần tử HTML sau đây:
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-left: 10px;
padding-right: 10px;
}
|
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 {
display: table;
content: ” “;
}
.clear-both::after {
display: table;
content: ” “;
clear: both;
}
|
Đâ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
|
Internal CSSCá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 {
width: 45%;
float: left;
text-align: center;
}
.part1-right {
width: 55%;
float: left;
}
|
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-lef t và part1-right trong đó:
|
.part2-left {
width: 47%;
float: left;
text-align: center;
}
.part2-right {
width: 53%;
float: left;
}
|
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 và part2-right , sao cho 2 phần tử thẻ <div></div> có thể nằm chung 1 hàng. |
.part2 {
background-color: #e4edf5;
padding-top: 20px;
padding-bottom: 20px;
}
|
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 đó:
|
Inline CSSCSS đượ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"> .... |
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ử
|
|
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ả!