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

Chắc hẳn sẽ có nhiều bạn không khỏi thắc mắc rằng: "Mới đầu khoá học, tôi đã biết cái méo gì đâu mà biểu là đi xây dựng trang web đầu tiên?". Nhưng các bạn yên tâm đi, bài học này không dạy bạn làm một trang web xịn xò mà chỉ là một trang với vài dòng code thôi, cái cốt yếu là mình muốn đề các bạn hiểu một trang web được xây dựng như thế nào, và nạp cho các bạn thêm các khái niệm cơ bản, đây chính là điểm bắt đầu, là tiền đề để các bạn học và làm những trang web thực sự xịn xò ở tương lai.

Và trước khi bắt đầu làm cái gì đó, dù là nhỏ nhất thì chúng ta cũng nên bắt đầu từ các khái niệm, vì điều quan trọng là bạn phải hiểu và phân biệt được sự khác biệt giữa hai ngông ngữ HTML và CSS, cú pháp của hai ngôn ngữ và một số thuật ngữ phổ biến. Nhiều bạn cứ nghĩ HTML/CSS là một vì người ta hay gọi chung nó với nhau, nhưng thực ra là hai ngôn ngữ khác nhau đấy nha.

1. HTML & CSS là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế ra để tạo nên các trang web. HTML tạo nên cấu trúc nội dung, mà cấu trúc đó giúp trình duyệt web xác định được ý nghĩa của một trang web, ví dụ như tiêu đề, đoạn văn bản, hình ảnh, hay video,... trên trang web đó.

CSS (Cascading Style Sheets) là ngôn ngữ trình bày, được thiết kế ra để tạo kiểu cho nội dung, hay nói cách khác nó dùng để định nghĩa về cách hiển thị cho nội dung HTML ví dụ như font chữ, cỡ chữ hay màu sắc,...

Hai ngôn ngữ HTML và CSS nên viết độc lập với nhau, CSS không nên được viết bên trong một tài liệu HTML và ngược lại. Theo quy tắc, HTML sẽ luôn đại diện cho nội dung của website, và CSS sẽ dùng để thể hiện kiểu (Phong cách), hay cách hiển thị của nội dung đó. Có thể chúng ta có 2 trang web có nội dung hoàn toàn giống nhau, nhưng giao diện mà chúng ta thấy lại hoàn toàn khác nhau, đó là vì chúng được định nghĩa bởi 2 mã CSS khác nhau.

Như vậy bạn đã hiểu sơ qua 2 ngôn ngữ và sự khác biệt giữa chúng, bây giờ chúng ta đi sâu vào một chút về HTML nhé.

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

Khi mới bắt đầu với HTML, bạn có thể sẽ gặp các thuật ngữ mới và chắc chắn là các thuật ngữ lạ :), rồi từ từ các bạn sẽ trở nên quen thuộc với tất chúng, nhưng ba thuật ngữ phổ biến mà chúng ta nên bắt đầu đó là: "elements", "tags", và "attributes" hay tạm dịch là "Yếu tố (Phần tử)", "Thẻ", và "Thuộc tính".

Elements (Phần tử): Chắc hẵn các bạn nghe từ phần tử là hiểu sương sương rồi đúng không nào, tức là nó là một phần của một trang web, hay khoa học hơn một xí thì nó là các chỉ định dùng để xác định cấu trúc và nội dung của một trang web, các bạn cứ hiểu đơn giản một trang web thì nó được kết hợp từ nhiều phần nhỏ khác nhau và mỗi phần nhỏ nhỏ đó được gọi là một Element, như vậy một trang HTML sẽ được bao gồm hàng loạt các Elements.

Tags (Thẻ):  Ở trên các bạn hiểu Element rồi đúng không, ở đây bạn hiểu rộng thêm một xí cho mình nữa thôi đó là Element thì được thể hiện bằng Tag nhé :). Trong HTML có nhiều loại Tag để thực hiện nhiều mục đích khác nhau lắm, nhưng mình sẽ trình bày cụ thể trong các bài học sau nhé :).

Thẻ thường sẽ được đi theo một cặp gồm một thẻ mở để đánh dấu bắt đầu của một Element, và một thẻ đóng để xác định kết thúc một Element. Nội dung năm giữa 2 thẻ đóng và mở này gọi là nội dung của Element đó. Thẻ mở và đống được khai báo gần như giống nhau chỉ khác ở thẻ đóng có thêm dấu / ở trước tên thẻ.

Attributes (Thuộc tính): Là các thành phần cung cấp thông tin bổ sung cho các Element. Các thuộc tính này luôn được chỉ định trong thẻ mở bao gồm tên thuộc tính và giá trị nhé.

OK, sau một hồi đọc lý thuyết xuông, chắc bạn cũng chưa hiểu gì lắm đâu nhỉ?, mình tinh chắc là như vậy. Giờ hãy cùng mình phân tích ví dụ dưới đây để hiểu rõ hơn nha:

(Hình ảnh phác thảo cú pháp HTML bao gồm một phần tử, thuộc tính và thẻ)

Hình ở trên các bạn thấy là một đoạn mã HTML, với đoạn mã này thì trang web sẽ hiển thị văn bản "Go to Hoàng Phi IT's Blog" và khi người dùng click chuột vào đoạn văn bản đó thì sẽ đưa người dùng đến website "https://hoangphiit.com". Toàn bộ đoạn mã trên được xem là một phần từ (Element) được khai báo với thẻ mở <a> và thẻ đóng </a>, bao gồm đoạn văn bản Go to Hoàng Phi IT's Blog và thuộc tính href="https://hoangphiit.com/". Xét riêng về thuộc tính thì href chính là tên thuộc tính còn https://hoangphiit.com/ là giá trị thuộc tính.

Trong HTML, thẻ a là thẻ dùng để khai báo một phần từ siêu liên kết, với thuộc tính href dùng để xác định một liên kết mà trình duyệt web sẽ chuyển đến khi click vào phần tử đó.

Bây giờ bạn đã hiểu về Elements, Tags và Attributes là gì rồi, bây giờ chúng ta bắt đầu xây dựng một cấu trúc HTML cho trang web đầu tiên ha, chắc chắn sẽ có thêm những thứ mới mẻ nhưng đừng lo lắng hay bở ngỡ, mình sẽ ở đây cùng bạn để giải mã nó, điều mình cần ở bạn là hãy tin mình và làm theo các bước mình hướng dẫn :).

3. Bắt đầu thực hành xây dựng trang web đầu tiên nào.

Bài thực hành này mình sẽ hướng dẫn các bạn tạo một trang web giới thiệu bản thân đơn giản, và trang web giới thiệu này sẽ sử dụng xuyên suốt trong các bài học sau nữa, mình muốn các bạn tự làm nó từ đơn giản đến nâng cao, sau một bài học sẽ nâng cấp lên một chút ha :).

Và để bắt đầu viết code thì chắc chắn các bạn không thể thiếu trình soạn thảo văn bản đúng không nào, với dân chuyên nghiệp như mình thì tất nhiên mình sẽ dùng trình soạn thảo chuyên nghiệp để làm việc. Tuy nhiên, để học HTML mình khuyên các bạn hãy dùng trình soạn thảo văn bản đơn giản như Notepad hay Notepad++ nếu dùng Window hay dùng TextEdit nếu dùng MacBook. Các bạn hãy tin với mình rằng, dùng trình soạn thảo đơn giản là một cách tốt nhất để học HTML.

Tốt nhất các bạn dùng Notepad++ nhé, vì trình soạn thảo này có định dạng text giúp chúng ta dễ nhìn, thấy thích thú với các dòng code hơn.

Thực hiện theo các bước bên dưới để tạo trang web đầu tiên của bạn bằng Notepad++  thôi nào. Here we go!

1. Hãy tạo một thư mục để lưu trữ trang web của bạn, tạo ở đâu thì nhớ nhé vì sẽ lôi nó ra dùng lại cho các bài sau đấy :). Ví dụ mình sẽ tạo một thừ mục "my-website" ngay trên Desktop của mình. Sau đó tạo một file (tập tin) có tên "index.html" vào thư mục vừa tạo nha.
2. Mở file index.html vừa tạo lên bằng trình soạn thảo Notepad++ nha (Nhấp phải chuột lên file -> chọn Open with -> chọn Notepad++), sau đó nhập nội dung file là các đoạn mã HTML như bên dưới và lưu lại. Nhớ đặt mã hóa thành UTF-8 nhé (là mã hóa chuẩn cho các tệp HTML).
   

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>Trang web giới thiệu về Hoàng Phi IT</title>
       </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>

   Bạn có thể thay đổi lại các bạn văn bản theo thông tin mà bạn muốn nhé, ở trên là mình viết đại các dòng chữ ví dụ cho các bạn thôi. Mình muốn gửi đến bạn một lời khuyên chân thành: "Hãy tự mình viết ra các dòng code trên, đừng copy nhé!", các bạn sẽ bắt đầu học cách viết code ngay từ hôm nay ^^.

3. Bây giờ là lúc chúng ta xem kết quả như thế nào nhé. Bạn hãy mở file index.html lên bằng trình duyệt web bằng cách double click vào file hoặc nhấp phải chuột -> Open with -> Google Chrome hoặc trình duyệt nào khác bạn đang dùng, kêt quả sẽ được hiển thị như sau:
   
   

OK, đến đây các bạn đã dựng được trang web với giao diện như trên chưa?, nếu chưa thì kiểm tra lại nhé, còn ngon lành rồi thì tiếp tục cùng mình phân tích về đoạn code trên để các bạn hiểu rõ hơn nha.

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

Trước tiên bạn hãy nhìn vào đoạn cấu trúc HTML bên dưới và nhớ cho mình đây là cấu trúc cần thiết của một trang HTML. Bất kỳ trang HTML nào được tạo ra đều phải xây dựng trên cấu trúc này. Bạn xem lại đoạn code của trang web đầu tiên ở trên cũng dùng cấu trúc này đúng không nào?.

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

1. <!DOCTYPE html> : Thông báo cho trình duyệt web biết phiên bản HTML nào đang được sử dụng. Dòng này luôn bắt buộc phải đặt ở dòng đầu tiên của một file HTML nhé. HTML thì từ khi ra đời đến giờ đã trải qua rất nhiều phiên bản, nhưng các bạn chỉ cần dùng <!DOCTYPE html> cho mình, như thế này trình duyệt cứ hiểu là mình dùng HTML phiên bản mới nhất.
2. <html> : các bạn thấy ở đây mình dùng Tag (thẻ)  html để tạo ra một Element (phần tử). Element này được bắt đầu bằng thẻ mở <html> và thẻ đóng </html> như mình đã trình bày ở phần trên đúng không nào?. Ở giữa 2 thẻ đóng và mở chính là nội dung của Element html, và như các bạn thấy nội dung của Element html thực ra cũng chứa các Element khác mà thôi, cái này gọi là các phần tử lồng nhau. HTML bao gồm hàng loạt các phần tử lồng nhau như vậy đó, phần tử ở ngoài gọi là Phần Tử Cha (Parent Element) ở trong gọi là Phần Tử Con (Child Element). Ở đây các bạn cứ hiểu cho mình phần tử html này là phần tử gốc của một trang HTML, tức một trang HTML phải được bắt đầu từ Phần tử này.
3. <head> : Là một phần từ con của phần tử <html> đúng không nào. Những nội dung trong thẻ này dùng để khải báo thông tin kèm theo của trang, ví dụ mình khai báo tiêu để của tài liệu ở trong này (Tiêu đề tài liệu sẽ được hiển thị trên thanh tiêu đề của cửa sổ trình duyệt hay hiển thị trên kế quả tìm kiếm của google), hoặc để liên kết với tài nguyên khác bên ngoài mà mình muốn dùng nó vào trang web của mình. Nội dung bên trong phần tử này sẽ không được hiển thị lên trên giao diện của website nhé.
4. <body> : Phần tử này dùng để chứa nội dung trang hiển thị. Tức là tất cả nội dung nào nằm trong phần tử này sẽ được hiển thị trên giao diện website.
5. Ở trong phần từ <head> mình có thêm 2 phần tử con đúng không nào?
   

   <meta charset="utf-8">​

   Phần tử này được tạo từ thẻ meta được gán một thuộc tính (Attribute) có tên là charset và giá trị là utf-8. Dùng để thông báo cho trình duyệt biết rằng, website của tôi đang dùng bảng mã UTF-8. Sau này tất cả các website bạn làm đều sử dụng bảng mã này cho mình, đây là bảng mã chuẩn cho Website. À ở đây mình muốn nói thêm chút, như các bạn thấy Element này chỉ được tạo từ một thẻ mở mà không có thẻ đóng, đừng hoang mang, thực ra trong HTML có một số Element không cần đến thẻ đóng như vậy, mình sẽ nói cụ thể ở các bài sau nhé :).

   <title>Trang web giới thiệu về Hoàng Phi IT</title>

   Phần tử này được tạo ra từ thẻ title mục đích là dùng để chỉ định tiêu đề của tài liệu HTML. Tiêu đề tài liệu sẽ được hiển thị trên thanh tiêu đề của cửa sổ trình duyệt hay hiển thị trên kế quả tìm kiếm của google,... như mình nói ở trên.

6. Trong phần từ <body> mình cũng thêm 2 phần từ con đơn giản là <h1> và <p>, ở trong <p> mình lại thêm một phần tử con nữa là <a>
   

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

   Thẻ <h1> dùng để tạo ra một tiêu đề lớn. Cũng giống như khi các bạn dùng Microsoft Word để soạn thảo một tài liệu vậy đó, trong tài liệu có các đề mục lớn, rồi trong mỗi đề mục lớn có các đề mục nhỏ hơn, thì trong HTML cũng hỗ trợ các thẻ tạo đề mục từ <h1> đến <h6> theo cấp độ nhỏ dần.
   Thẻ <p> dùng để hiển thị một đoạn văn bản đơn thuần thôi, p là viết tắt của chữ paragraph dịch sang tiếng việt là đoạn văn đó :).
   Thẻ <a> để khai báo một phần từ siêu liên kết, với thuộc tính href dùng để xác định một liên kết mà trình duyệt web sẽ chuyển đến khi click vào phần tử đó. Như trang web chúng ta làm ở trên, nếu người dùng click vào dòng chữ "Hoàng Xuân Phi" thì trình duyệt sẽ chuyển hướng trang sang trang facebook "https://www.facebook.com/phi.hx".

OK. Mình tạm kết bài viết tại đây, vì chủ đề này khi viết mình thấy khá là dài nên mình tách ra 2 phần cho các bạn dễ tiếp thu. Phần này chủ yếu mình chỉ để cập về HTML, phần 2 mình sẽ đề cập đến CSS, để các bạn biết cách dùng CSS làm cho giao diện của trang web đầu tiên này đẹp hơn như thế nào nhé.

Nếu bạn có bất kỳ câu hỏi nào, cứ việc để lại một bình luận bên dưới nhé, mình sẽ trả lời nhanh thôi^^. À, đừng quên like bài viết nhé, hehe.