Tạo một trang HTML đơn giản

Date:07 tháng 02 năm 2020
Category: Học HTML
Type: Học

Bước 1: Bắt đầu với nội dung

Tạo file index.html có nội dung như sau:

Black Goose Bistro

The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a relaxed
atmosphere. The menu changes regularly to highlight the freshest local
ingredients.

Catering
You have fun. We'll handle the cooking. Black Goose Catering can handle
events from snacks for a meetup to elegant corporate fundraisers.

Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to
midnight

Mở index.html bằng trình duyệt để thấy kết quả:

Trông không được đẹp, các chữ dính lại với nhau thành một khối — không giống như khi ta gõ. Trình duyệt đã bỏ qua các dấu xuống dòng.

Trình duyệt bỏ qua những gì?

Nhiều dấu cách

Khi nội dung xuất hiện nhiều dấu cách liên tiếp, trình duyệt chỉ hiển thị một.

Chẳng hạn nếu nội dung có:

long,            long           ago

trình duyệt hiển thị:

long, long ago

Các dấu xuống dòng

Các dấu xuống dòng được chuyển thành dấu cách. Sau đó áp dụng quy tắc như đối với dấu cách thông thường ở trên.

Các tab

Các tab cũng được chuyển thành dấu cách. Sau đó áp dụng quy tắc như đối với dấu cách thông thường ở trên.

Các thẻ không xác định

Các chú thích

Chú thích là những văn bản nằm giữa .

Bước 2: Tạo cấu trúc cho tài liệu

Phần tử HTML (HTML element)

Cấu trúc chung:

<elementname>Content</elementname>

elementname: tên phần tử
<elementname>: gọi là thẻ mở (thẻ bắt đầu)
</elementname>: gọi là thẻ đóng (thẻ kết thúc)

Giữa thẻ mở và thẻ đóng là nội dung (content) của phần tử.

Ví dụ, một phần tử h1 có thể trông như sau:

<h1>Black Goose Bistro</h1>

Các thẻ bọc quanh nội dung phần tử còn gọi là “đánh dấu” (markup).

Không phải mọi phần tử đều có nội dung, có những phần tử trống, chẳng hạn như img.

Cấu trúc chung của tài liệu HTML

<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8">
    <title>Title here</title>
  </head>

  <body>
    Page content goes here.
  </body>

</html>

<!DOCTYPE html> khai báo tài liệu được viết bằng HTML5.
Toàn bộ tài liệu nằm trong phần tử html. Phần tử html gọi là phần tử gốc, bởi nó chứa mọi phần tử khác trong tài liệu.
Bên trong html, tài liệu được chia thành head và body. Phần tử head chứa các phần tử của tài liệu không được hiển thị trên trình duyệt, như tiêu đề (title), các stylesheet và các siêu dữ liệu (metadata).
Phần tử meta cung cấp metadata cho tài liệu — thông tin về tài liệu. Trong trường hợp này là phương thức mã hóa kí tự (UTF8). Một số kiểu meta khác cung cấp thông tin về tác giả, từ khóa, trạng thái xuất bản, mô tả được sử dụng bởi các máy tìm kiếm.
Trong head bắt buộc phải có phần tử title, mọi tài liệu HTML đều phải có tiêu đề.
Cuối cùng, phần tử body chứa mọi thứ được hiển thị trên trình duyệt.

Tiếp theo ta sửa lại nội dung của index.html như sau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Black Goose Bistro</title>
  </head>
  <body>
    Black Goose Bistro

    The Restaurant
    The Black Goose Bistro offers casual lunch and dinner fare in a relaxed
    atmosphere. The menu changes regularly to highlight the freshest local
    ingredients.

    Catering
    You have fun. We'll handle the cooking. Black Goose Catering can handle
    events from snacks for a meetup to elegant corporate fundraisers.

    Location and Hours
    Seekonk, Massachusetts;
    Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to
    midnight
  </body>
</html>

Lưu lại và mở trên trình duyệt, bạn thấy kết quả không thay đổi. Nhưng nhìn kỹ trên thanh tiêu đề của trình duyệt bạn sẽ thấy nội dung phần tử title được hiển thị.

Bước 3: Sử dụng một số phần tử định nghĩa văn bản

Dòng đầu tiên: Black Goose Bistro là đề mục chính của trang, nên ta đánh dấu nó bằng phần tử h1 như sau:

<h1>Black Goose Bistro</h1>

Trang của ta còn ba đề mục con khác, đánh dấu chúng bẳng phần tử h2:

<h2>The Restaurant</h2>
...
<h2>Catering</h2>
...
<h2>Location and Hours</h2>

Dưới mỗi đề mục là các đoạn văn bản được đánh dấu bằng phần tử p. Trong đoạn văn bản, ta có thể nhấn mạnh văn bản nào đó (hiển thị dạng in nghiêng) bằng phần tử em.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Black Goose Bistro</title>
  </head>
  <body>
    <h1>Black Goose Bistro</h1>

    <h2>The Restaurant</h2>

    <p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed
      atmosphere. The menu changes regularly to highlight the freshest local
      ingredients.</p>

    <h2>Catering</h2>
    
    <p>You have fun. <em>We'll handle the cooking</em>. Black Goose Catering can handle
      events from snacks for a meetup to elegant corporate fundraisers.</p>

    <h2>Location and Hours</h2>

    <p>Seekonk, Massachusetts;
      Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to
      midnight</p>   
  </body>
</html>

Phần tử dòng và phần tử khối

Các đề mục và đoạn văn bản, luôn bắt đầu trên một dòng mới so với nội dung trước nó — chúng được gọi là phần tử khối (block element).

Trình duyệt coi các phần tử khối như các hình chữ nhật xếp chồng lên nhau trong trang.

Ngược lại, phần tử em không bắt đầu trên một dòng mới, mà nằm đúng vị trí của nó trong đoạn văn bản — nó được gọi là phần tử dòng (inline element).

Bước 4: Thêm ảnh

Phần tử trống

Các phần tử không cần có nội dung gọi là phần tử trống. Phẩn tử ảnh img cũng là một phần tử trống. Nó nói cho trình duyệt biết lấy ảnh từ server và chèn nó vào trang. Ngoài ra còn nhiều phần tử trống khác, ví dụ br (xuống dòng), hr (đường kẻ ngang), và meta.

Khi viết phần tử trống, không cần phải viết thẻ đóng:

<elementname>

Ví dụ:

<p>1005 Gravenstein Highway North<br>Sebastopol, CA 95472</p>

Thuộc tính

Bởi không có nội dung, một phần tử trống chỉ có thể nhận thông tin nhờ cái gọi là các thuộc tính (attribute). Với phần tử img thuộc tính src (viết tắt của “source”) bắt buộc phải có, nó cung cấp địa chỉ URL của ảnh.

Cú pháp khai báo thuộc tính như sau:

attributename="value"

attributename: tên thuộc tính
value: giá trị thuộc tính

Khai báo thuộc tính đặt ngay sau tên thuộc tính trong thẻ mở (nếu không phải phần tử trống).

<!-- Khai báo thuộc tính cho phần tử trống -->
<element attributename="value">

<!-- Khai báo thuộc tính cho phần tử không trống -->
<element attributename="value">Content</element>

Có thể đặt nhiều thuộc tính trong phần tử theo thứ tự tùy ý:

<element attribute1="value1" attribute2="value2">

Ví dụ, phần tử img có hai thuộc tính src và alt như sau:

<img src="bird.jpg" alt="photo of bird">

Đây là những điều bạn cần biết về các thuộc tính:

Các thuộc tính đặt ngay sau tên phần tử trong thẻ mở, không bao giờ đặt trong thẻ đóng.
Một phần tử có thể có nhiều thuộc tính, thứ tự các thuộc tính không quan trọng.
Hầu hết các thuộc tính có giá trị, đặt sau dấu bằng (=). Trong HTML có những thuộc tính không cần khai báo giá trị như checked. Chúng là những thuộc tính boolean.
Giá trị thuộc tính có thể là một số, một từ, một chuỗi, một địa chỉ URL, hoặc một giá trị đo lường, tùy theo mục đích của thuộc tính.
Đặt giá trị thuộc tính giữa " và " được khuyến khích sử dụng, nhưng không bắt buộc nếu giá trị thuộc tính không chứa khoảng trắng.

Phần tiếp theo ta chèn ảnh vào index.html:

<h1><img src="blackgoose.png" alt="logo"><br>Black Goose Bistro</h1>

Ảnh blackgoose.png tải về tại địa chỉ: https://hungly.net/assets/images/hoc-html/blackgoose.png và đặt cùng thư mục với index.html.

Bước 5: Áp dụng stylesheet cho trang web

Tạo file style.css trong cùng thư mục với index.html, nội dung của nó như sau:

body {
  background-color: #faf2e4;
  margin: 0 10%;
  font-family: sans-serif;
}

h1 {
  text-align: center;
  font-family: serif;
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px solid #57b1dc;
  margin-top: 30px;
}

h2 {
  color: #d1633c;
  font-size: 1em;
}

Để áp dung stylesheet này cho index.html, trong head ta sử dụng phần tử link như sau:

<link rel="stylesheet" href="styles.css">

Thuộc tính href là đường dẫn tới stylesheet.

Kết quả trang web của ta trông như sau:

Để viết stylesheet ta cần biết về CSS. Về sau bạn sẽ được học về CSS.