Bài 3: Xây dựng trang web đầu tiên bằng HTML/CSS (Phần 2)

Chào mừng bạn đến với phần 2 của bài học "Xây dựng trang web đầu tiên bằng HTML/CSS". Ở phần 1 mình đã giới thiệu khái niệm về HTML/CSS, và đã cho bạn thực hành thực tế để tạo ra một trang web bằng HTML rồi đúng không nào?. Nếu bạn nào chưa đọc phần 1 thì xin hãy click vào đây để học trước khi tiếp tục với bài học này nhé :). Ở phần này mình sẽ giới thiệu đến bạn về CSS và thực hành thực tế để bạn hiểu về ngôn ngữ này.

À, trước khi bắt đầu bạn hãy nhớ lại giúp mình chút ha: HTML sẽ luôn đại diện cho nội dung của website, còn CSS sẽ dùng để thể hiện kiểu (Phong cách), hay cách hiển thị của nội dung đó. Còn bây giờ chúng ta bắt đầu bài học nào.

1. Hiểu về các thuật ngữ phổ biến của CSS.

Cũng giống như HTML, CSS cũng có 3 thuật ngữ phổ biến nhất mà bạn chắc chắn phải làm quen để có thể tiếp tục hiểu về ngôn ngữ này, đó là "Selectors", "Properties", "Values", mình tạm dịch qua tiếng việt là "Bộ chọn", "Thuộc Tính (Tính chất)", và "Giá trị".

Selectors (Bộ chọn): Như phần trước các bạn học thì một trang HTML được bao gồm hàng loạt các phần tử (Elements) đúng không nào?. Mỗi phần tử như vậy chúng ta hoàn toàn có thể dùng CSS để tạo kiểu cho nó, vậy với hàng loạt các phần tử như thế, làm sao CSS biết được nó dùng để tạo kiểu cho phần tử hay một cụm phần tử nào?. Vâng, bộ chọn này giúp chúng ta làm được điều đó, bộ chọn dùng để xác định chính xác những phần từ nào trong HTML mà bạn muốn áp dụng kiểu.

Properties (Thuộc tính) và Values (Giá trị): Sau khi chúng ta dùng Selectors để chọn ra một phần tử, chúng ta cần khai báo các thuộc tính và gán cho thuộc tính đó một giá trị, mục đích là dùng để xác định kiểu mà chúng ta muốn áp dụng cho phần tử được chọn.

OK, lại lý thuyết suông, đọc qua thấy vừa hiểu vừa không hiểu đúng không nào? :). Hãy cũng mình phân tích qua ví dụ dưới đây để hiểu hơn về 3 thuật ngữ mình giới thiệu trên nha.

Ví dụ trong cấu trúc HTML của chúng ta có nhiều phần tử được tạo từ thẻ <p> và chúng ta muốn chọn hết những phần tử được tạo từ thẻ <p> này để tạo kiểu cho chúng, vậy thì mã CSS sẽ có cấu trúc như sau:

p {
    color: orange;
    font-size: 16px;
}

Cấu trúc như trên sẽ giúp CSS chọn hết tất cả các phần từ được tạo từ thẻ <p>. Việc chúng ta khai báo p {} (chữ p và cặp dấu mở đóng ngoặc nhọn như hình) gọi là Selector.

Ở giữa cặp dấu {} là nơi dùng để khai báo cặp đôi thuộc tính và giá trị. Như ở ví dụ trên chúng ta khai báo 2 thuộc tính, thứ nhất là color có giá trị là orange (Xác định màu chữ của phần tử được chọn sẽ là màu cam), thứ hai là font-size có giá trị là 16px (Xác định cỡ chữ của phần tử được chọn là 16 pixel). Bạn để ý nhé, mỗi khai báo sẽ bắt đầu bằng tên thuộc tính, theo sau là dấu hai chấm tiếp đến là giá trị của thuộc tính và cuối cùng là dấu chấm phẩy.

Trong CSS cung cấp cho chúng ta rất rất nhiều thuộc tính, để chúng ta đa dạng hoá được kiểu hiển thị hay giao diện cho website, nó nhiều đến nỗi mình cũng không có nhớ được hết đâu, nhưng mình hiểu, nên lúc nào cần dùng mà bị quên thì lại lên GOOGLE thôi :). Còn về phía bạn, hãy yên tâm đi, mình sẽ giới thiệu đến bạn nhiều hơn nữa về CSS trong những bài sau.

Đến đây các bạn đã hiểu về các thuật ngữ trên chưa nhỉ?. Bây giờ cùng mình xây dựng cấu trúc CSS cho trang web đầu tiên ha.

2. Bắt đầu thực hành CSS cho trang web đầu tiên nào.

Bài thực hành này chúng ta sẽ tiếp tục với bài ở phần 1 nhé, và trình soạn thảo để viết code cũng tương như như phần một, mình khuyến khích bạn sử dụng Notepad++ nha. Ở phần 1 mình hướng dẫn các bạn tạo một thư mục có tên "my-website", và tạo một cấu trúc HTML dưới file index.html ở trong thư mục này rồi đúng không nào, giờ lục nó ra lại để tiếp tục các bước dưới đây nha.

1. Đầu tiên bạn vào thư mục "my-website" và tạo thêm một file có tên "style.css" cùng cấp với file index.html nhé.
2. Tiếp theo bạn mở file style.css lên bằng trình soạn thảo Notepad++, nhập đoạn mã CSS như dưới và lưu lại. Nhớ đặt mã hóa thành UTF-8 nhé.
   

   h1{
       background-color: DodgerBlue;
       text-align: center;
       color: white;
       font-size: 24px;
       padding: 10px;
   }
   p{
       color:Brown;
       font-size: 20px;
   }

3. Tiếp theo bạn mở file index.html lên và thêm vào trong phần tử <head> một phần tử mới này 

   <link rel="stylesheet" type="text/css" href="style.css">​

   Đây là cấu trúc được dùng để chèn CSS vào file HTML nhé. Như thế trình duyệt sẽ đọc nội dung trong file style.css và trình bày website theo kiểu mà chúng ta đã khai báo trong file CSS này.
   Sau khi thêm phần tử <link> như trên vào thì cấu trúc mới của file HTML sẽ như sau:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>Trang web giới thiệu về Hoàng Phi IT</title>
           <link rel="stylesheet" type="text/css" href="style.css">
       </head>
       <body>
           <h1>Chào mừng bạn đến với Hoàng Phi IT's Blog</h1>
           <p>Cảm ơn mọi người đã ghé thăm website của mình, chúng ta kết bạn với nhau trên facebook nhé. Facebook của mình là <a href="https://www.facebook.com/phi.hx">Hoàng Xuân Phi</a></p>
       </body>
   </html>

4. Cuối cùng, hãy mở file index.html trên trình duyệt web để xem thành qủa nào :). Dưới đây là kết quả của mình nhé.
   

Đến bước này bạn đã ra được màn hình kết quả như trên chưa nào, chưa thì xem lại nhé :). OK rồi thì đọc tiếp xem mình giải thích để bạn hiểu rõ hơn về các thuộc tính CSS mà mình đã dùng cho trang web ở trên ha.

3. Giải thích sơ bộ

Đầu tiên bạn hãy xem lại một lượt giúp mình các đoạn code CSS mà mình đã hướng dẫn các bạn làm ở trên đã nha, trong đó bạn thấy mình đã sử dụng 2 Selectors như dưới đúng không nào.

h1{
    ...
}
p{
    ...
}

Cái đầu tiên có nghĩa là chọn ra các Elements được tạo từ thẻ <h1> để tạo kiểu, cái thứ 2 tương tự, sẽ chọn ra các Elements được tạo ra từ thẻ <p> để tạo kiểu. Quá đơn giản đúng không nào?, vấn đề ở chổ các thuộc tính ở trong mà mình đã dùng nghĩa là gì thôi, mình sẽ giới thiệu cho bạn lần lượt từng cái một ha, đây cũng là những thuộc tính (Properties) cơ bản đầu tiên của CSS mà các bạn được học đấy :).

1. background-color: DodgerBlue; : background-color là thuộc tính của CSS dùng để tạo màu nền nhé, DodgerBlue chính là giá trị của thuộc tính background-color, như vậy định nghĩa này mục đích là muốn tạo ra một màu nền cho phần tử được chọn và màu nền được tạo là màu DodgerBlue (Xanh dương). Bạn có thể thay đổi màu khác tuỳ thích theo bảng màu ở liên kết này nhé.
2. text-align: center; : text-align là thuộc tính dùng để căn lề chữ ở trong phần tử được chọn, ở đây mình muốn căn giữa nên chọn giá trị là center. Bạn có thể thử giá trị khác như left (căn trái), right (căn phải) hay justify (căn đều 2 bên). Sao thấy cũng na ná Microsoft Word mà bạn đã được học thế nhỉ?, đơn giản đúng không nào?, haha.
3. color: white; : color là thuộc tính dùng để tạo màu chữ cho phần tử được chọn, ở đây mình muốn màu chữ là màu trắng nên mình chọn giá trị là white. Bạn có thể thay đổi màu khác theo bảng màu mình đã đề cập ở mục background-color nha.
4. font-size: 24px; : font-size là thuộc tính dùng để tạo cỡ chữ nhé, ở đây mình tạo cỡ chữ là 24 pixel. Các bạn thử thay đổi cỡ chữ khác tuỳ thích để hiểu về độ lớn của cỡ chữ nhé, thử nâng lên 50px hay giảm xuống 10px xem thế nào. Nhớ là không có khoảng cách giữa con số và chữ px nhé, ví dụ 24 px là sai đấy.
5. padding: 10px; : padding là thuộc tính dùng để tạo ra khoảng trống (không gian) xung quanh nội dung của một phần tử. Các bạn cứ hiểu như này, khi các bạn tạo ra một phần tử trong HTML, thì phần tử đó được cấp cho một không gian vừa đủ để chứa nội dung của nó hiển thị trên trình duyệt thôi, còn nếu bạn muốn tạo cho không gian đó lớn hơn hay nhỏ hơn thì dùng thuộc tính padding nhé, ở đây mình tạo không gian cho nội dung của thẻ <h1> là 10px, bạn hãy thử đổi giá trị lớn hơn hay nhỏ hơn để xem cho hiểu hơn nha.

OK, có lẽ khi các bạn đọc xong phần giải thích, thì chắc đâu đó thấy sự thân quen với các thuộc tính ở trên đúng không nào, nó cũng na ná như Microsoft Word mà bạn đã được học vậy, nó chỉ khác ở chổ bên Microsoft Word thì các bạn bôi đen rồi chọn trên giao diện phần mềm, còn ở đây mình phải tự gõ ra các dòng code để định nghĩa nó, thú vị hơn nhiều đúng không nào? :).

4. Tóm lược 

Thật tuyệt vời, sau khi kết thúc bài học này thì có lẽ chúng ta đã thực hiện xong một bước tiến lớn trong khoá học "Để trở thành Web Developer" này. Bởi vì đến bây giờ, bạn đã nắm được những kiến thức cơ bản về HTML và CSS, bạn đã hiểu được HTML/CSS là gì?, đã làm quen với Elements, Tags và Attributes trong HTML, làm quen với Selectors, Properties, Values trong CSS, và đã thiết lập được cấu trúc trang web đầu tiên. Đây hoàn toàn là những thứ quan trọng nhất trong khoá học này, vì đó là những kiến thức cơ sở, là bước đệm để các bạn tiếp tục dễ dàng hơn với các bài học sau, và những bài sau này chắc chắn bạn sẽ phải dành nhiều thời gian hơn để viết mã HTML và CSS, hay dùng một từ cho nó chuyên nghiệp hơn trong giới Lập Trình, đó là "Coding".

Mình tạm kết bài học này tại đây, và hẹn bạn ở bài 4 nhé, mình tin rằng đó là bài học thú vị nhất trong khoá học này ^^. Đừng quên like và share khoá học này đến bạn bè nếu thấy hay nhé :).

Để hiểu thêm về nhiều thuật ngữ khác nữa của HTML, bạn hãy xem ở trang này nhé: HTML Terms.Và để hiểu thêm về nhiều thuật ngữ khác nữa của CSS, thì bạn nãy xem ở trang này: CSS Terms.