HTML Blog Lab
Loading...
</> HTML Blog Lab
Studio thiết kế Web 01 trong số 04
Presenter mode

PHÒNG THÍ NGHIỆM BLOG HTML · 01

Xây dựng một trang blog với HTML.

HTML mang đến một ngôi nhà cho mọi ý tưởng. Hôm nay, chúng ta sẽ biến một ý tưởng blog thành một trang web rõ ràng, thân thiện — bằng cách xây dựng từng thành phần ý nghĩa một.

✦

Mọi người đều có thể đóng góp: phác thảo, thảo luận, nhập liệu, chỉ dẫn, đặt câu hỏi hoặc làm việc theo cặp.

01Lập kế hoạchChọn những gì người đọc cần trước tiên.
02Xây dựngSử dụng các thẻ để định hình trang.
03Quan tâmGiúp trang web dễ tiếp cận hơn với nhiều người hơn.
HTML
+
IDEAS

Một trang web là một cuộc trò chuyện với người đọc.

BƯỚC 1 · CẤU TRÚC

Bắt đầu với khung sườn.

Các thẻ HTML mô tả chức năng của từng phần. Một khung xương ngữ nghĩa giúp trình duyệt, trình đọc màn hình và bạn học hiểu được trang web của bạn.

Hãy thử cách nàyHãy chỉ vào từng thẻ và nói rõ chức năng của thẻ đó là gì.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Ghi chép hiện trường</h1>
      <nav>Giới thiệu · Lưu trữ</nav>
    </header>
    <main>
      <article>
        <h2>Điều gì tạo nên một trang web tốt?</h2>
      </article>
    </main>
  </body>
</html>
Các thẻ có ý nghĩa giúp trang web dễ điều hướng hơn.

BƯỚC 2 · NỘI DUNG

Hãy tạo cho trang một giọng nói.

Thẻ chứa nội dung, nhưng con người mới mang lại quan điểm. Hãy thêm tiêu đề, một liên kết hữu ích và một hình ảnh với những từ ngữ kể lại câu chuyện.

✓Một tiêu đề tạo ra kỳ vọng
✓Một đoạn văn với một ý tưởng rõ ràng
✓Một liên kết cho biết nơi nó dẫn đến
Gợi ý cho cặp đôiHãy đọc to tiêu đề của bạn. Nó có thu hút người đọc không?
our-blog.local / journal•••

NHẬT KÝ CHUNG

Một trang web tốt
sẽ mang lại cảm giác như thế nào?

Một tập hợp những quan sát nhỏ, từ studio của chúng tôi đến bạn.

Đọc mục này↗

BƯỚC 3 · CHĂM SÓC & TRUY CẬP

Nhường chỗ cho mọi người.

HTML tốt không chỉ là về vẻ ngoài. Nó mang lại cho nhiều người hơn cơ hội công bằng để đọc, hiểu và tham gia vào cuộc trò chuyện.

AaTiêu đềTạo một lộ trình rõ ràng.
↗Liên kếtMô tả điểm đến.
▧Hình ảnhThêm văn bản thay thế hữu ích.
Đến lượt bạnPhác thảo một phần blog, sau đó chọn thẻ HTML phù hợp để đặt nó vào.
Tôi nhận thấy…
Tôi tự hỏi…
Tôi có thể thử…
←Quay lại
Tiếp theo→