Tài Liệu Học Làm Web Bằng HTML5 Và CSS3 Từ A-Z - WEBICO BLOG

Trang chủ » Tự Học Html5 » Tài Liệu Học Làm Web Bằng HTML5 Và CSS3 Từ A-Z - WEBICO BLOG

Có thể bạn quan tâm

Đăng nhập Đăng nhập Xin chào!Đăng nhập để tài khoản của bạn. tên đăng nhập của bạn mật khẩu của bạn Bạn quên mật khẩu? Phục hồi mật khẩu Khôi phục mật khẩu của bạn email của bạn Tìm kiếm 28.9 C Ho Chi Minh City 02-12-2024
  • Đăng nhập/Đăng ký
Đăng nhập Chào mừng bạn! Đăng nhập vào tài khoản của bạn tên đăng nhập của bạn mật khẩu của bạn Bạn quên mật khẩu? Trợ giúp Phục hồi mật khẩu Khôi phục mật khẩu của bạn email của bạn Một mật khẩu đã được gửi đến email của bạn WEBICO BLOG WEBICO BLOG WEBICO BLOG WEBICO BLOG Thiết kế website chuyên nghiệp Trang chủ Kiến thức website Tài liệu học làm web bằng HTML5 và CSS3 từ A-Z Chia sẻ trên Facebook Tweet on Twitter

HTML và CSS là 2 thành phần không thể thiếu của bất cứ website nào chính vì vậy để bắt đầu học thiết kế web thì việc bắt đầu tìm hiểu về html và css là điều cực kỳ cần thiết hôm nay mình sẽ chia sẻ cho các bạn trọn bộ tài liệu học làm web bằng HTML5 và CSS3 từ A-Z.

Html Css

  • 1 Cấu trúc một tài liệu web bằng HTML5
    • 1.1 Thẻ khai báo loại tập tin
    • 1.2  Thẻ đóng mở tài liệu HTML
    • 1.3 Thẻ đóng và mở phần thông tin website
    • 1.4 Có thẻ đóng và mở phần nội dung website
    • 1.5 Cấu trúc của CSS3
  • 2 Lời kết

Cấu trúc một tài liệu web bằng HTML5

Một tài liệu hay tập tin HTML để được gọi là một tài liệu web thì sẽ được bao gồm bốn yếu tố chính đó là:

  • Có thẻ khai báo loại tập tin/tài liệu.
  • Có thẻ đóng và mở tài liệu HTML.
  • Có thẻ đóng và mở phần thông tin website.
  • Có thẻ đóng và mở phần nội dung website.

Và trong bài này, chúng ta sẽ đi tìm hiểu qua 4 phần đó để tạo ra một tài liệu website bằng HTML đúng chuẩn.

Trước khi mình giải thích rõ các thành phần đó thì bạn hãy tạo ra một tập tin HTML với nội dung sau và lưu lại.

Thẻ khai báo loại tập tin

Ngay tại đoạn đầu tiên của tài liệu, chúng ta phải có một thẻ khai báo loại tập tin cho nó như thế này, cụ thể là ta sẽ khai báo rằng đây là tập tin HTML.

Xem thêm: Nên chọn PHP hay Asp.net để học lập trình website
01 <!DOCTYPE html>

Với thẻ <!DOCTYPE> ở trên, ta có thêm một tham số đó là html. Tham số html này nghĩa là chúng ta khai báo với trình duyệt rằng đây là tài liệu HTML5 (HTML phiên bản 5), dù rằng chúng ta có thể không sử dụng HTML5 nhưng hiện tại khi khai báo tập tin HTML thì bạn cứ sử dụng tham số này vừa ngắn gọn lại vừa dễ dàng sử dụng thêm HTML5 nếu thích.

Có một điều thú vị là thẻ <!DOCTYPE> không phải là một thẻ của HTML, mà nó chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt hiểu phiên bản HTML mà bạn sử dụng trên website mà thôi.

 Thẻ đóng mở tài liệu HTML

Kế tiếp, ở tầng tiếp theo sẽ là thẻ <html> </html> có nhiệm vụ khai báo cho trình duyệt biết rằng những nội dung bên trong cặp thẻ này là HTML. Tuy nhiên, bên trong thẻ này mình có thêm một thuộc tính tên là lang với giá trị là vi (<html lang="vi">). Thuộc tính này nghĩa là chúng ta khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, mã vi nghĩa là Vietnamese – tiếng Việt

Bạn nên nhớ một điều là thẻ <html> </html> phải bao bọc toàn bộ nội dung website, không bao gồm thẻ<!DOCTYPE>.

Thẻ đóng và mở phần thông tin website

Phần khai báo thông tin của website sẽ được đặt vào bên trong cặp thẻ gọi là <head> </head>. Nội dung bên trong thẻ này là các thẻ chuyên cho khai báo thông tin website (meta), tên website (title), khai báo CSS (style), khai báo các đoạn Javascript (script) và một số thông tin khác. Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp thành siêu văn bản trên web nhưng nó sẽ có nhiệm vụ chứa các thông tin quan trọng về website.

Xem thêm: Kiến thức về CSS (P6): Thuộc tính font size-Thuộc tính font family

Có thẻ đóng và mở phần nội dung website

Đây là cặp thẻ mà bạn sẽ tiến hành viết nội dung vào, đó là cặp thẻ <body> </body>. Cặp thẻ này là để trình duyệt xác định đây là phần thân của website, nó sẽ chứa toàn bộ các nội dung siêu văn bản hoặc media mà bạn muốn nó hiển thị lên trang web của bạn. Phần này chúng ta sẽ làm việc nhiều hơn ở các bài sau.

Bây giờ nếu bạn mở tài liệu HTML ở trên lên bằng trình duyệt thì chỉ sẽ thấy nó có mỗi đoạn nội dung nằm bên trong thẻ <body> </body> mà thôi.

Cấu trúc của CSS3

Trong css thì cấu trúc đơn giản hơn chỉ có 1 cặp thẻ khi viết trực tiếp trong 1 file html nào đó là <style></style> tuy nhiên do nếu viết trong 1 file thì nó sẽ rất rối nên người ta thường tách ra các file riêng và có đuôi mở rộng là .css và được liên kết với file HTML bằng câu lệnh <link rel=”stylesheet” href=”đường dẫn file.css” type=”text/css”>.

Lời kết

Vậy là bây giờ bạn đã có thể tự tạo ra một tài liệu website đơn giản bằng HTML rồi đó, chỉ cần áp dụng cấu trúc tài liệu theo thứ tự mà mình đã giải thích và có ví dụ ở trên.

Còn nhiều bài học hay để bạn có thể vận dụng thiết kế web. Các bạn nhớ theo dõi nhé.

Xem thêm: Kiến thức về HTML (P8): Thẻ định dạng tiêu đề

Các bạn có thể download bộ tài liệu tại đây nếu các bạn muốn chi tiết hơn có thể học qua video thì đây là một Serie toàn tập của tác giả Thạch Phạm chia sẻ

  • Tóm tắt các bài học về kiến thức HTML
  • HTML6 là gì ? Các mẫu cấu trúc mới của HTML6
  • Tự học thiết kế web với Dreamweaver từ A – Z
post

BÀI VIẾT LIÊN QUANXEM NHIỀU HƠN TỪ TÁC GIẢ NÀY

Kiến thức website

Tìm hiểu về khái niệm và chức năng của domain, tên miền là gì?

carousel-la-gi Kiến thức website

Carousel là gì? 5 “bí kíp” giúp Carousel website trở nên hiệu quả

front-end-va-back-end-la-gi Kiến thức website

Front-end và Back-end là gì? Phân biệt lập trình Front end và Back end

proxy-server-la-gi Kiến thức website

Proxy Server là gì? 7 lý do nên và không nên sử dụng Proxy Server

Saas-la-gi Kiến thức website

SaaS là gì? Ưu điểm và nhược điểm của SaaS

Salesforce-la-gi Kiến thức website

Salesforce là gì? Tài liệu toàn tập về Salesforce

- Advertisement -

LATEST NEWS

Top 10 giao diện website nhà hàng đẹp và chuyên nghiệp

Kiến thức website Việt Nguyễn - 30/11/2019 0

CSR là gì? Ví dụ về CSR ở Việt Nam

15/04/2020

Chọn Background khi thiết kế Website

30/11/2019

TIN ĐỌC NHIỀU

Google analytics là gì? Tổng quan kiến thức Google Analytics cho người mới bắt...

Việt Nguyễn - 30/11/2019 0

Top 20 tên miền đắt giá nhất từ trước đến nay

An Nhy - 10/08/2018 0

Thiết kế website bóng đá online chất lượng, tốc độ load nhanh

Việt Nguyễn - 30/11/2019 0 Xem thêm

BÀI TIÊU BIỂU

Tìm hiểu về khái niệm và chức năng của domain, tên...

22/02/2023 cach-an-binh-luan-tren-facebook

7 cách ẩn bình luận trên Facebook

20/07/2022 mat-hang-kinh-doanh-loi-nhuan-cao

Top 8 mặt hàng kinh doanh lợi nhuận cao nhất hiện...

17/07/2022

BÀI VIẾT PHỔ BIẾN

Những công cụ hỗ trợ xây dựng chiến lược Content-Marketing tuyệt...

30/11/2019

Marketing 2024 – 3 xu hướng trên 4 thị trường

30/11/2019

Cập nhật những xu hướng tiếp thị nổi bật trong năm...

30/11/2019

CHUYÊN MỤC PHỔ BIẾN

  • Kiến thức website574
  • Marketing online347
  • Khởi nghiệp153
  • Wiki106
  • Công cụ52
  • Tin nội bộ43
  • Kiếm tiền online31
  • Toplist23
  • Featured post20
WEBICO BLOG | Boost Your SuccessVỀ CHÚNG TÔI WEBICO Blog là chuyên trang chia sẻ các kiến thức về marketing online, kiếm tiền online, bán hàng online, khởi nghiệp, kiến thức website nhằm mang lại cho người dùng cũng như các khách hàng những kiến thức bổ ích và chính xác nhất.THEO DÕI CHÚNG TÔI © Designed by WEBICO.VN BÀI HAY DÀNH CHO BẠN Kiến thức website

Top 10 cấu trúc content website thu hút lượt tương tác...

An Nhy - 10/04/2018 0

Từ khóa » Tự Học Html5