Học HTML cơ bản từ đầu cho người mới

20-10-2021
Trung Minh
0 Comments

HTML (Hyper Text Markup Language) theo khái niệm là một ngôn ngữ siêu văn bản, chúng ta có thể hiểu theo các HTML đóng vai trò là vật liệu để xây dựng giao diện của website, nhiệm vụ của nó là hiển thị văn bản, hình ảnh, video, các nút bấm … trình duyệt sẽ dựa vào cấu trúc HTML, sử dụng một engine để đọc và render dữ liệu lên trình duyệt. Nếu bạn xây một ngôi nhà thì bạn sẽ cần gạch, đá, xi măng và các vật liệu phụ khác, vậy thì HTML nó giống như những vật liệu mà bạn cần để xây nhà đó.

Để làm việc với HTML, thưc chất không quá khó, nhìn chung nó là một tập văn bản với cấu trúc cây phân tầng định sẵn, sử dụng các thẻ (<tenthe>), để làm được cũng không nhất thiết phải biết hết các thẻ và rất dễ nhớ nên học nó không có gì khó, cái khó là làm thể nào kết hợp với CSS và javascript để trình bày một cách thẩm mỹ.

Hiện nay version mới nhất là HTML5, đây là version có mối liên hệ chặt chẽ với Javascript và CSS3 nên sẽ có độ phức tạo cao hơn, và đương nhiên càng phức tạp thì giao diện càng sinh động.

Trong chuyên mục này mình sẽ tổng hợp tất cả các tài liệu học HTML từ căn bản đến nâng cao, giúp các bạn có thể xây dựng một trang web tĩnh cơ bản.

HTML

Mục lục

Giới thiệu HTML5

Các thẻ tiêu đề (Heading tags)

Các thẻ nhập liệu để gửi dữ liệu thông qua form Form tags

Các thẻ danh sách (List tags)

Các thẻ làm việc với văn bản ( paragraph tags)

Các thẻ hay sử dụng (common tags)

HTML5 Canvas

Bài tập

Bài tập:

Sử dụng bootstrap, jquery và datatable (thư viện vẽ bảng) làm bài tập sau:

Tạo một dự án HTML có tên shopbanhang

Trong dự án HTML có cấu trúc như sau:

Thư mục admin
index.html

Trong thư mục admin tạo file login.html nội dung như sau:

Chương trình yêu cầu người dùng hiển thị giao diện đăng nhập , kèm link đăng ký giao diện như hình

Danh sách Dữ liệu mẫu admin được lưu trữ trong localstorage, người dùng xác thưực thành công mới cho chuyển trang sang mới, nếu ko yêu cầu người dùng nhập lại

Trong thư mục admin, Ttạo file index.html yêu cầu như sau:

Nếu người dùng chưa đăng nhập, ép quay lại trang login.html
Nếu đã đăng nhập, hiển thị giao diện bảng mô phỏng như hình dưới:
Yêu cầu sử dụng thư viện data table

Trong thư mục admin tạo file addnew.html với tính năng thêm mới sản phẩm

(Tự nghiên cứu giao diện)

Bên ngoài thư mục gốc tạo file index.html giao diệ n như hình với sản phẩm lấy từ local storage ra:

Làm tính năng giỏ hàng như hình bằng localstorage

Làm tính năng checkout như hình bằng localstorge:

Sau khi submit, alert cho khách hàg thôg tin order và quay về trang chủ