Bài 01: Tạo Template HTML5 Đầu Tiên

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt ...

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt đầu phanh phui nó nhé.

Nếu bạn tham khảo một số website được viết bằng HTML5 thì các bạn sẽ thấy các thẻ như header, nav, section, footer, ... Tất cả những thẻ này nguyên bản HTML không tồn tại, chỉ có HTML5 mới có những thẻ này. Để dễ hình dung ta đi vào xem một ví dụ nhé:

Cấu Trúc Template HTML5

Các bạn xem ví dụ dưới đây:

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Chương Trình HTML Đầu Tiên</title>
    </head>
    <body>
        <header>
            <h1>HTML5 Cho Người Mới Bắt Đầu Tại Freetuts.net</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Serie</a></li>
                <li><a href="#">Tutorial</a></li>
                <li><a href="#">Ebook</a></li>
            </ul>
        </nav>
        <section>
            Nội dung trang web
        </section>
        <aside>
            <h3>Tuts HTML</h3>
            Học Lập Trình HTML5
        </aside>
        <footer>
            Copyright 2014 By Freetuts.net
        </footer>
    </body>
</html>
Đây là một cấu trúc chuẩn cho một template được xây dựng bằng HTML5, tôi nói chuẩn cho riêng bản thân tôi chứ không phải cho toàn bộ cộng đồng viết HTML5.

Bạn xem xét dòng đầu tiên <!doctype html>, đây là một khai báo bắt buộc nếu một template được xây dựng bằng HTML5. Tiêp theo là phần <html lang="vi">, các bạn cũng nên đặt lang vào thẻ html cho rõ ràng.

Phần head dưới đây thì khỏi bàn cãi rồi nhỉ? Không phải là chỉ HTML5 mới có :D

<head>
        <meta charset="utf-8" />
        <title>Chương Trình HTML Đầu Tiên</title>
    </head>
Vào phần body là quan trọng nhất, ở phần body tôi có sử dụng các thẻ sau:

Thẻ header dùng để chứa nguyên phần header website của bạn. Nếu lúc trước bạn dùng thẻ div thì với HTMl5 bạn sẽ dùng thẻ này để thay thế.

<header>
            <h1>HTML5 Cho Người Mới Bắt Đầu Tại Freetuts.net</h1>
        </header>
Thẻ Nav, thẻ này thường dùng để chứa những phần navigation như menu.
<nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Serie</a></li>
                <li><a href="#">Tutorial</a></li>
                <li><a href="#">Ebook</a></li>
            </ul>
        </nav>
Thẻ section là thẻ dùng để chứa nội dung chính của website. Nếu bạn không dùng HTMl5 thì bạn hay dùng thẻ div với id là content để bao quan nó đấy
<section>
            Nội dung trang web
        </section>
Thẻ aside, thẻ này thường dùng để chứa khung sidebar như left-sidebar, right-sidebar.
<aside>
            <h3>Tuts HTML</h3>
            Học Lập Trình HTML5
        </aside>
Và thẻ cuối cùng là thẻ footer, thay vì khai báo một cái div và định dạng thì ta dùng thẻ footer để bao quanh lại.
<footer>
            Copyright 2014 By Freetuts.net
        </footer>

Bạn thấy đó nếu ta dùng những thẻ theo chuẩn HTML5 này thì nhìn vào website ta khỏi cần comment phần nào là header, phần nào là footer phải không nào? Rất trực quan và dễ cập nhật.

Chạy lên và đây là kết quả template html5 của chúng ta:

Lời Kết

Đơn giản phải không nào? Qua bài này mình muốn giới thiệu cho các bạn một cấu trúc template chuẩn theo html5, trong bài này dùng mới được vài thẻ thông dụng nhưng cũng rất là trực quan. Ở những bài tiếp theo ta sẽ tìm hiểu thêm nhiều thẻ tags mới trong html nữa. Các bạn đón chờ nhé

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Tạo ứng dụng AngularJS đầu tiên

Trước khi bắt đầu tạo ứng dụng XinChao bằng AngularJS, chúng ta hãy xem các phần thực tế của một ứng dụng AngularJS là gì. Một ứng dụng AngularJS bao gồm ba phần quan trọng sau: ng-app : Directive này định nghĩa và gắn kết một ứng dụng AngularJS đến trang ...

Bùi Văn Nam viết 11:01 ngày 23/08/2018

Ruby_Cài đặt Ruby on rails&Tạo dự án đầu tiên

Cài Đặt Để có thể sử dụng Ruby on Rails thì cần cài đặt trên máy tính các phần mềm sau: Ruby: Ngôn ngữ lập trình sử dụng bởi Ruby on Rails. RubyGems: Chương trình quản lý thư viện Ruby (còn được gọi là gem) trên máy tính (hoặc máy chủ). Ruby on Rails: Khác với một số framework khác, Ruby ...

Tạ Quốc Bảo viết 17:57 ngày 12/08/2018

[Android Boilerplate]Cùng tạo ứng dụng đầu tiên sử dụng MVVM, Dagger2, RxJava, LiveData và Room (P2 : Setup Retrofit, Repository Pattern, ViewModel)

P1 : Setup Dagger 2 + Room 1. Setup Retrofit Ở Phần trước : Chúng ta đã cấu hình và implement injection dependency framework và cơ sở dữ liệu local rồi. Ở bước này chúng ta sẽ tạo kết nối internet đến API của CoinmarketCap và lấy các dữ liệu mà chúng ta cần. Để lấy các dữ liệu từ API thì ...

Tạ Quốc Bảo viết 17:53 ngày 12/08/2018

Bài 1: Cài đặt Vue và chạy chương trình Hello world đầu tiên

Ở bài đầu tiên này mình sẽ hướng dẫn các bài cài đặt VueJS vào project Laravel, sau đó chúng ta sẽ cùng xem những thứ cơ bản của Vue nhé. Vì Laravel đã hỗ trợ tích hợp VueJS nên việc cài đặt của chúng ta sẽ hết sức đơn giản.Ở thời điểm hiện tại (05/2018) thì mỗi khi bạn tạo project Laravel thì ...

Bùi Văn Nam viết 17:46 ngày 12/08/2018

Kotlin Tutorial - Bài 1: Tạo Project đầu tiên với Kotlin

Hôm nay mình giới thiệu với tất cả mội người về sử dụng Kotlin trong phát triển Android. Trong loạt bài viết này chúng ta sẽ nói về những phần quan trọng nhất trong ngôn ngữ Kotlin được sử dụng để phát triển ứng dụng Android. Ngay từ mới bắt đầu, nếu bạn đã nghe nói về Kotlin nhưng chưa thử qua thì ...

Trịnh Tiến Mạnh viết 16:10 ngày 12/08/2018
0