Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Thiết kế web cho trẻ em: cấu trúc HTML

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website
Web Design for Kids: HTML Content

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với bài học thứ ba trong loạt bài thiết kế Web cho trẻ em của chúng tôi, cấu trúc HTML!

Chúng ta sẽ học cách viết cấu trúc của trang web của chúng ta với HTML. Cấu trúc này sẽ là cơ sở cho nội dung của trang web mà chúng ta sẽ thêm vào trong bài học tiếp theo.

Nếu chúng ta so sánh quá trình thiết kế web với xây một tòa nhà (giống như một tòa nhà của thị trấn Tuts+!) thì HTML sẽ là một cái gì đó giống như việc xây dựng nềnkhung nhà; nó là cơ sở mà từ đó mọi thứ khác được xây dựng trên đó.

Quan trọng! Các tập tin mà chúng ta sẽ tạo ra trong bài học này có thể được tải về tại đây.

HTML chính xác là gì?

Chúng ta đã đề cập HTML rất nhiều trong loạt bài này, nhưng đã không nói một cách chính xác nó là gì, nó hơn cả một "ngôn ngữ bí mật siêu tuyệt vời". Nói đến Web là nói đến ngôn ngữ và thông tin liên lạc, và HTML là một phần quan trọng của tất cả điều này.

Ngôn ngữ đánh dấu siêu văn bản, HTML, là một ngôn ngữ đánh dấu lên nội dung của một trang web để cho một trình duyệt hiểu và hiển thị. Nó đưa ra cấu trúc đối với một tập tin văn bản thông thường mà một nếu không phải một trình duyệt thì không có khả năng đọc được.

Ví dụ, chúng ta không thể gõ một đoạn văn bản vào trình gõ văn bản của chúng ta và hy vọng một trình duyệt biết nó là một đoạn văn bản. Đoạn văn bản phải ở bên trong của một thành phần HTML phù hợp, một đoạn văn hay phần tử <p> (một điều thú vị khi nhìn vào <p> ở đây cho thấy rằng văn bản này cũng là mã).

Các thành phần HTML

HTML được xây dựng dựa trên các phần tử có ý nghĩa quan trọng, như các phần tử văn bản đề cập ở trên. Mỗi phần tử có một thẻ (tag) mở (bắt đầu) và một thẻ (tag) đóng (kết thúc), với nội dung trang web được đặt giữa hai thẻ này.

Các thẻ mở và đóng cho mỗi phần tử này được viết bên trong dấu ngoặc góc (như thế này: < >), tuy nhiên một thẻ đóng có thêm một dấu gạch chéo phía trước (như thế này: < / >).

Hoạch định cấu trúc

Trong bài trước chúng ta đã vẽ bản thiết kế trang web của chúng ta và bây giờ là thời điểm để chuẩn bị các cấu trúc, hoặc sườn của thiết kế này.

Chúng ta sẽ bắt đầu bằng cách thêm một số ghi chú chung chung vào trang web để có một cái hình dung tốt hơn.

Trong phần tử body của tập tin html, chúng ta sẽ có một số yếu tố chính: một header, một phần main, và một footer.

Chuẩn bị các tài liệu của chúng ta

Chúng ta cũng đã nói về việc làm thế nào để thiết lập tập tin trang web trong bài học trước, vì vậy bây giờ chúng ta sẽ đưa kiến thức này vào thực tế!

  • Đầu tiên, tạo một thư mục trên máy tính của bạn, đặt tên là "tutsfolder".
  • Bây giờ là lúc để mở trình soạn thảo văn bản.
  • Sau đó, tạo một tài liệu mới (thường bằng cách chọn File > New File) và lưu nó thành "index.html" trong thư mục "tutsfolder".

Hãy nhớ rằng: "index" là tên tập tin và ".html" là phần mở rộng, nói với chúng ta loại tập tin là gì.

Các trang web có thể được tạo thành từ nhiều, rất nhiều trang, do đó, trang chính luôn luôn được gọi là "index.html" để nói rằng "Ê, đây là nơi tất cả sẽ bắt đầu!"

Bây giờ, chúng ta hãy viết một số HTML cuối cùng.

Xây dựng cấu trúc

Bây giờ chúng ta có thể thêm cấu trúc của chúng ta. Một lần nữa, hãy xem điều này như là việc cùng nhau xây một tòa nhà, chúng ta cần có bộ khung.

Phần đầu tiên của HTML mà chúng ta sẽ viết là <!DOCTYPE html> nói với trình duyệt "Ê, đây là một tài liệu HTML!"

Sau đó, ở phía dưới nó, chúng ta cần phần tử <html>:

Mọi thứ khác sẽ được đặt trong phần tử này.

Khoan đã. Lồng nhau ư?

"Giống như một tổ chim?" À, có lẽ giống như các đồ chơi lắp ghép hơn, hoặc tòa nhà lồng nhau ở thị trấn Tuts+. Lồng nhau là những gì sẽ xảy ra khi chúng ta đặt một phần tử bên trong một phần tử khác.

Một ít mã dưới đây cho thấy một đoạn văn bản được lồng trong phần tử <body>, bởi vì nó được đặt ở giữa thẻ mở và thẻ đóng của body.

Chúng ta làm cho mã trong file HTML của chúng ta dễ dàng hơn để đọc bằng cách đẩy các phần tử lồng bên trong xa hơn về bên phải. Giống thế này:

Được rồi, quay trở lại công việc...

Phần Head

Bây giờ, lồng trong phần tử html chúng ta sẽ thêm một phần tử head.

Phần head sẽ chứa title của trang của chúng ta, sẽ hiển thị trong một tab của trình duyệt. Lồng nhau rất nhiều!

Rất nhiều thứ được đặt trong phần head của một tài liệu HTML sẽ không được nhìn thấy trên trang web, nhưng thay vào đó sẽ giúp cho công cụ tìm kiếm, như Google, biết những gì trang web của chúng ta nói về.

Đồng thời, sau đó khi chúng ta tạo ra một tập tin mới để thêm phong cách vào cái này, chúng ta sẽ kết nối hai tài liệu với nhau thông qua một liên kết được thêm vào phần head. Vì vậy, nó là thứ giống như hậu trường Trung tâm kiểm soát số lượt truy cập website của chúng ta mà người xem không thể nhìn thấy các thành phần.

Phần body

Tất cả mọi thứ trên trang web của chúng ta mà chúng ta sẽ nhìn thấy trong trình duyệt sẽ được lồng trong body, và đây là nơi mà những điều thú vị thực sự bắt đầu!

Phần Header

Phần tử header không giống như phần tử head mà chúng ta đã đã đề cập. Phần header được đặt trong body và thường chứa tất cả các thứ ở trên cùng của một trang web.

Điều đầu tiên chúng ta có ở trên cùng của trang web của chúng ta là một tiêu đề chứa một số văn bản và hình ảnh của thị trấn Tuts+.

Chúng ta sẽ chỉ thêm header bây giờ để chuẩn bị cho nội dung được thêm vào.

Phần chính

Phần chính của trang web thị trấn Tuts+ chứa thông tin quan trọng nhất. Danh sách doanh nghiệp là những gì trang web của chúng ta nói về, do đó, tất cả các nội dung này sẽ đặt trong phạm vi một phần tử được gọi là main.

Chúng ta sẽ nói về các kho chứa nhỏ hơn (như các nhóm khác nhau: ngủ, thực phẩm, và các cửa hàng) nằm trong kho chứa main trong bài học tiếp theo khi chúng ta thêm nội dung vào.

Phần Footer

Phần footer là phần cuối của trang web. Chúng ta thường có một số liên kết ở đây, chẳng hạn như Facebook và Twitter, hoặc một số văn bản nhỏ để chỉ cho mọi người biết người đã tạo ra trang web.

Chúng ta sẽ thêm một câu tự hào nói rằng chúng ta đã tạo nên trang web trong phần tử footer.

Hãy nhớ rằng: hiện tại chúng ta vẫn còn phải thêm các phần tử được lồng trong body.

Đánh giá cuối cùng

Bây giờ, chúng ta hãy làm một bài đánh giá cuối cùng của cấu trúc HTML của chúng ta.

Rất dễ quên đóng thẻ, điều này sẽ gây ra một số lỗi trên trang web của chúng ta. Chúng tôi muốn đảm bảo rằng mỗi thẻ chúng ta mở ra thì có một thẻ đóng lại.

Có vẻ như tất cả mọi thứ đã được đóng! Bây giờ là thời gian để bắt đầu thêm một số nội dung vào cấu trúc mà chúng ta đã tạo ra.

Các lưu ý nhanh trên ghi chú

HTML cho phép chúng ta viết các ghi chú hữu ích bên trong tập tin html của chúng ta. Những ghi chú này sẽ không hiển thị trên trang web của chúng ta, nhưng là thông tin vô cùng hữu ích cho các nhà thiết kế khác nhìn vào mã của chúng ta.

Tập tin HTML cho bài học này (mà bạn có thể tải về) có một số ghi chú để giúp chúng ta hiểu nó tốt hơn.

Làm tốt lắm!

Trong bài học này chúng ta đã học HTML là gì, phần tử của nó là gì, làm thế nào để lồng những phần tử này vào nhau, và làm thế nào để thiết lập một cấu trúc HTML cơ bản với một số phần tử cơ bản.

Trong bài học tiếp theo, chúng ta sẽ thêm văn bản và hình ảnh của trang web của chúng ta vào cấu trúc mới được xây dựng.

Hẹn gặp lại bạn trong thị trấn!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.