Trang chủ » Thiết kế web » Hướng dẫn cho người mới bắt đầu xây dựng trang web HTML5 / CSS3

    Hướng dẫn cho người mới bắt đầu xây dựng trang web HTML5 / CSS3

    Bài viết này là một phần của chúng tôi "Loạt bài hướng dẫn HTML5 / CSS3" - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.

    HTML5 và CSS3 đã càn quét web chỉ sau 2 năm. Trước đó, đã có nhiều ngữ nghĩa thay đổi trong cách các nhà thiết kế web dự kiến ​​sẽ tạo ra các trang web và với sự hỗ trợ tuyệt vời của họ như phương tiện thay thế, thẻ kiểu XML và các thuộc tính đầu vào tiến bộ để các nhà thiết kế web đạt được mơ mộng các tính năng như hoạt hình.

    Mặc dù hầu hết các nhà phát triển dường như giới thiệu các bản demo tiềm năng nhưng phức tạp, HTML5 / CSS3 không thực sự là khoa học tên lửa và tôi sẽ hướng dẫn bạn qua quy trình thư giãn để xây dựng trang web HTML5 / CSS3 tiêu chuẩn với giải thích toàn diện và chuyên sâu! Phần thưởng như tài nguyên học tập và các mẫu HTML5 miễn phí có sẵn cho bạn, vì vậy hãy tận dụng cơ hội này để bắt đầu hành trình HTML5 của bạn!

    Thay đổi giữa HTML4 và HTML5

    Bạn có thể tự hỏi tại sao điều quan trọng hơn là chuyển sang HTML5. Có vô số lý do, nhưng chủ yếu là vì bạn sẽ làm việc với các tiêu chuẩn Internet toàn cầu như mọi nhà thiết kế khác Bằng cách này, bạn sẽ tìm thấy nhiều hỗ trợ trực tuyến hơn và của bạn các trang web sẽ hiển thị đúng trong các trình duyệt hiện đại được cải tiến liên tục.

    (Nguồn hình ảnh: W3C)

    So sánh giữa HTML4 và HTML5 rất khó phát hiện ở cấp độ bề mặt. Từ việc xem bản nháp HTML5 mới, bạn có thể thấy các yếu tố nổi bật và quy trình xử lý lỗi được sửa. Các nhà phát triển trình duyệt đặc biệt thích các thông số kỹ thuật mới để hiển thị các trang web mặc định.

    Những gì nhiều hơn từ HTML5 là chuyển đổi trình duyệt web hiện đại của chúng tôi. Với các thông số kỹ thuật mới này, toàn bộ web hiện được xem là một nền tảng ứng dụng cho HTML (đặc biệt là HTML5), CSS và JavaScript được xây dựng dựa trên. Ngoài ra, hệ thống này thanh lịch tạo ra sự hài hòa giữa các nhà thiết kế và phát triển web bằng cách thiết lập các tiêu chuẩn chung mà tất cả các trình duyệt nên tuân theo.

    Ngoài ra, nhiều yếu tố đã được tạo ra để đại diện cho phương tiện truyền thông kỹ thuật số thời đại mới. Bao gồm các đó là rất lớn cho hỗ trợ đa phương tiện. Trong một số trình duyệt, bạn có thể hoàn thành xác thực mẫu trực tiếp trong HTML. Cấp vẫn còn nhu cầu lớn đối với jQuery, vì có nhiều nhà phát triển phần mềm vẫn chưa nhận ra các tính năng. Nếu bạn muốn một danh sách các thẻ, hãy xem bảng W3Schools này để tìm hiểu thêm về chúng.

    Bộ xương HTML5 trần

    Tôi thấy cách dễ nhất để hiểu bất kỳ chủ đề nào là lặn ngay vào nó. Vì vậy, tôi sẽ xây dựng một mẫu khung HTML5 rất cơ bản cho một trang web. Tôi đã bao gồm một vài yếu tố mới hơn, mà tôi hy vọng sẽ phân loại một chút sau.

       Trang HTML5 đầu tiên của chúng tôi     

    Chào mừng, một và tất cả!

    một số nội dung ở đây.

    nhưng một số ở đây là tốt!

    Một số thông báo bản quyền và pháp lý ở đây. Có thể sử dụng biểu tượng © một chút.

    Ngay lập tức, điều này không khác lắm so với một trang web HTML4 tiêu chuẩn. Những gì bạn có thể nhận thấy là chúng tôi không cần bao gồm bất kỳ thẻ tự đóng nào nữa. Đây thực sự là một tin tuyệt vời vì nó sẽ tiết kiệm rất nhiều thời gian cho các dự án phát triển của bạn.

    Đối với những người không biết, trong bản nháp XHTML có nhiều yếu tố được dán nhãn tự đóng cửa. Những điều này sẽ kết thúc bằng một dấu gạch chéo về phía trước trước toán tử 'lớn hơn' để biểu thị bạn không cần đưa thẻ đóng khác vào nơi khác. Ví dụ: để tạo thẻ meta từ khóa bạn sẽ sử dụng không cần đóng cửa nơi khác.

    Quy tắc này vẫn được áp dụng trong HTML5. Nhưng bây giờ bạn thậm chí không cần thêm dấu gạch chéo! là hoàn toàn có hiệu lực, mặc dù bạn được phép tiếp tục sử dụng tiêu chuẩn XHTML / XML. Đối với tất cả các trình duyệt tuân thủ tiêu chuẩn, cả hai yếu tố sẽ hiển thị theo cùng một cách.

    Xác định khu vực trang của chúng tôi

    Phần lớn mã mới của chúng tôi không nên quá sốc. Của chúng tôi doctype đơn giản hơn hơn bao giờ hết, không cần thuộc tính cơ thể quá mức, và thông tin trong tiêu đề của chúng tôi được dán nhãn rõ ràng. Tiếp tục Tôi muốn tập trung sự chú ý của bạn vào nội dung bên trong chúng tôi nhãn. Điều này bao gồm tất cả các cấu trúc của trang chính. Tôi đã cố tình sử dụng một vài thẻ HTML5 đẹp để biểu thị cách bạn có thể đưa chúng vào công việc của riêng bạn.

    Đầu tiên bạn sẽ thấy toàn bộ trang là gói gọn trong một div nhãn. Tôi đã gắn nhãn này với ID của vỏ bánh, có nghĩa là nó bao quanh toàn bộ nội dung trang web của chúng tôi. Đây là hữu ích để đặt chiều rộng tối đa hoặc nội dung vị trí xung quanh trên màn hình. Tiếp theo tôi đã chia trang thành 3 yếu tố cốt lõi - một

    , một lõi
    , và ngắn
    . Trong khu vực tiêu đề tùy chỉnh của tôi, tôi đã thêm một màn hình đơn giản về tiêu đề của trang và các mục điều hướng bằng cách sử dụng
    © Savtec
    Thông tin hữu ích và lời khuyên phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu.