Giới thiệu về HTML&CSS, Tổng quan về cấu trúc web

Tiếp nối series git/github kì trước trong chuỗi bài về lập trình web, trong số này mình sẽ cung cấp series mới về các kiến thức cơ bản frontend - HTML&CSS. Mở đầu series này, mình sẽ giới thiệu tổng quan về HTML&CSS cũng như cấu trúc web.

Tổng quan HTML&CSS

Ngày nay, khi bạn mở trình duyệt web thực hiện các công việc hàng ngày như tìm kiếm thông tin, giải trí, làm việc... thì hầu hết các công việc đó đều được thực hiện trên trang web. Và thứ chúng ta nhìn thấy, tương tác hàng ngày đó chính là giao diện web.

Trước khi chúng ta bắt đầu hành trình tìm hiểu cách xây dựng trang web bằng HTML&CSS, bước đầu chúng ta tìm hiểu cú pháp của từng ngôn ngữ và một số thuật ngữ phổ biến.

HTML&CSS là gì?

HTML - HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệt ta gọi là Browser.

CSS hay Cascading Style Sheets là ngôn ngữ trình bày được dùng để tạo kiểu cho sự xuất hiện của nội dung sử dụng, ví dụ như phông chữ hoặc màu sắc.

Có một ví dụ trực quan trong thực tế để hiểu về HTML&CSS như sau: giả sử coi trang web là một ngôi nhà, bạn xây nhà và bạn sẽ sử dụng gạch, bê tông cốt thép để xây dựng ngôi nhà, xây dựng lên khung của ngôi nhà tương đương với khung của trang web. Nhưng để trang trí cho ngôi nhà thì bạn sẽ sử dụng một số đồ nội thất khác như sơn màu, ... thì lúc này sơn màu sẽ tác động làm thay đổi color mặc định của gạch. Hay ví von thì màu sơn chính là CSS và gạch chính là HTML.

Thông thường, trừ một số trường hợp đặc biệt, CSS không được viết bên trong một tài liệu HTML và ngược lại. Theo quy định, HTML sẽ luôn đại diện cho nội dung và CSS sẽ luôn thể hiện sự xuất hiện của nội dung đó.

Các thuật ngữ HTML phổ biến

Ba thuật ngữ HTML phổ biến khi bắt đầu là elements, tags và attributes.

1. ELEMENTS

Các element được xác định bằng cách sử dụng dấu ngoặc nhỏ hơn và lớn hơn < > bao quanh tên element - là cái nằm giữa 2 dấu < >.

Các element là các chỉ định xác định cấu trúc và nội dung của các đối tượng trong một trang.

Một số element được dùng thường xuyên hơn bao gồm:

thẻ tiêu đề (các thẻ <h1> đến <h6>)
thẻ đoạn văn (thẻ <p>);
các thẻ nội dung <a>, <div>, <span>, <strong>, và <em>
và nhiều elements khác nữa.

2. TAGS

Việc sử dụng một cấu trúc gồm < element > sẽ tạo ra cái được gọi là tag hay là thẻ. Thẻ thường xảy ra nhất trong các cặp thẻ mở và đóng.

Thẻ mở đánh dấu sự bắt đầu của một element.
Ví dụ: <div>.

Thẻ đóng đánh dấu vào cuối của một element. Nó bao gồm một dấu nhỏ hơn đến dấu gạch chéo và tên của element và sau đó kết thúc bằng dấu lớn hơn.
Ví dụ: </div>

Nội dung nằm giữa thẻ mở và thẻ đóng là nội dung của element đó.
Ví dụ: một liên kết anchor sẽ có thẻ mở <a>và thẻ đóng </a>.

<a>Anchor Link</a>

Những gì rơi vào giữa hai thẻ này sẽ là nội dung của liên kết anchor đó.

3. ATTRIBUTES

Các attributes là các thuộc tính được sử dụng để cung cấp thông tin bổ sung về một element.

Các thuộc tính phổ biến nhất:

id - attribute xác định một element
class - attribute phân loại một element
src - attribute xác định một nguồn cho nội dung nhúng như image hay video...
href - attribute cung cấp một hyperlink

Các attributes được xác định trong thẻ mở, sau tên của một thành phần. Các attributes bao gồm tên và giá trị. Định dạng cho các attributes này bao gồm tên attribute theo sau là dấu = và sau đó là giá trị attributes được đặt trong 1 cặp dấu " ". Ví dụ: một element <a> bao gồm href và class sẽ trông như sau:

<a class="google-search" href="http://google.com/">Google Search</a>

Các thuật ngữ CSS phổ biến

Ba thuật ngữ CSS phổ biến khi bắt đầu là selectors, properties và values.

1. SELECTORS

Selector chỉ định chính xác thành phần nào trong HTML để nhắm mục tiêu và để áp dụng các style (như màu sắc, kích thước, vị trí...).

Các selector thường nhắm đến một attribute như một id hoặc class hay nhắm đến các elements như <h1> hoặc <p>. Trong ví dụ:

Selector dạng: .class như .intro sẽ select tất cả các elements có class là class="intro"
Selector dạng: #id như #firstname sẽ select element có id là id="firstname"
Selector dạng: element như p sẽ select tất cả các element <p>

Ngoài ra còn một số selector đa dạng khác, các bạn có thể tham khảo thêm tại W3School - CSS Selector.

Trong CSS các selectors được theo sau là 1 cặp dấu { } và các styles nằm trong đó để áp dụng cho các element đã được chọn.

2. PROPERTIES

Khi element được chọn, một thuộc tính sẽ xác định các style được áp dụng cho element đó.
Tên thuộc tính nằm sau selector, trong cặp dấu { } và ngay trước dấu :.
Có rất nhiều thuộc tính chúng ta có thể sử dụng, chẳng hạn như background, color, font-size, height,width... Đoạn code dưới, mình đang xác định các thuộc tính color và font-size được áp dụng cho tất cả các element <p>:

p {
  color: ...;
  font-size: ...;
}

3. VALUES

Khi đã chọn một element với selector và xác định style mà mình muốn áp dụng với property. Bây giờ chúng ta cần xác định value của property đó. Các giá trị - value được xác định là văn bản giữa dấu : và dấu ;. Như ví dụ, mình đang chọn tất cả các

và đặt value của thuộc color thành orange và giá trị của thuộc tính font-size là 16px.

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

4. THAM CHIẾU ĐẾN CSS

Để CSS nói chuyện với HTML, chúng ta cần tham chiếu tệp CSS trong HTML. Để tham chiếu CSS, chúng ta tham chiếu từ bên trong thẻ <head> của file HTML. Sử dụng một stylesheet duy nhất cho phép chúng ta sử dụng các stylesheet giống nhau trên toàn bộ trang web và nhanh chóng thực hiện các thay đổi.
Ví dụ về 1 tham chiếu:

<head>
    <link rel="stylesheet" href="/css/style.css">
</head>

Tổng quan về cấu trúc của file HTML

Tất cả các tài liệu HTML có một cấu trúc cần thiết bao gồm việc khai báo và các yếu tố sau: <!DOCTYPE html>, <html>, <head> và <body>.

Khi khai báo sẽ thông báo cho các browser web phiên bản HTML nào đang được sử dụng và đặt ở đầu của file HTML. Sau <!DOCTYPE html> sẽ là <html> là biểu thị phần đầu của file HTML.

Trong nội dung của <html> thì <head> xác định phần trên cùng của tài liệu, bao gồm mọi metadata (thông tin kèm theo về trang). Nội dung bên trong <head> không được hiển thị trên trang web. Thay vào đó, nó có thể bao gồm tiêu đề trang (được hiển thị trên thanh tab trong cửa sổ trình duyệt) hay liên kết đến bất kỳ tệp bên ngoài hoặc bất kỳ metadata có lợi nào khác.

Tất cả nội dung hiển thị trong trang web sẽ nằm trong . Cấu trúc tài liệu HTML điển hình trông như thế này:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is a web page.</p>
    </body>
</html>

Tổng kết

Chúng ta đã cập nhật cho mình khá nhiều kiến thức cơ bản về HTML&CSS trong bài này. Trong phần tiếp theo, mình sẽ tiếp tục đồng hành cùng các bạn trong series HTML&CSS này, tiếp nối với bài viết:
Các thẻ HTML cơ bản và thường sử dụng.
(Link bài viết tham khảo tại đây)