Blog

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

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

2 years ago Comment!

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.

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.

thiet-ke-web-cho-tre-em-cau-truc-html4

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ã).

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: < / >).

thiet-ke-web-cho-tre-em-cau-truc-html12

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.

thiet-ke-web-cho-tre-em-cau-truc-html10

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.

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!”

thiet-ke-web-cho-tre-em-cau-truc-html5

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

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.

“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.

thiet-ke-web-cho-tre-em-cau-truc-html9

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:

thiet-ke-web-cho-tre-em-cau-truc-html2

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

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!

1
2
3
4
5
<html>
    <head>
        <title>Tuts Town</title>
    </head>
</html>

thiet-ke-web-cho-tre-em-cau-truc-html11

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.

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 trongbody, và đây là nơi mà những điều thú vị thực sự bắt đầu!

thiet-ke-web-cho-tre-em-cau-truc-html1

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.

thiet-ke-web-cho-tre-em-cau-truc-html7

Đ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 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.

thiet-ke-web-cho-tre-em-cau-truc-html8

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.

thiet-ke-web-cho-tre-em-cau-truc-html1

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.

thiet-ke-web-cho-tre-em-cau-truc-html3

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.

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ếweb 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.

Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…