Bài 3 Lý thuyết xây dựng HTML
Xin chào các bạn đã quay trở lại với khóa học Frontend HTML. Bài học hôm nay chúng ta sẽ tìm hiểu về điểm xây dựng, tìm hiểu về cách gắn thẻ dùng HTML và tại sao chúng ta phải dùng HTML?
Đầu tiên chúng ta sẽ tìm hiểu HTML là gì? Tại sao phải cần HTML làm web?
HTMl là viết tắt của Hypertext Markup Language( ngôn ngữ đánh dấu siêu văn bản) tức là ở đây ngôn ngữ này được xây dựng ra để đánh dấu văn bản bởi vì nội dung hiển thị trình duyệt phần nó là văn bản, ở đây không phải là văn bản trong các phần mềm soạn thảo văn bản Word mà là văn bản thuần luôn, văn bản mà chúng ta có thể đọc được nội dung. và HTML là một ngôn ngữ để đánh dấu các văn bản đó.
– HTML về cơ bản được sử dụng để đánh dấu các nội dung văn bản trên trang Web
– HTML là tập hợp các thành phần xây dựng các khối trên HTML và bên dưới nền phần này người dùng không xem được. Ví dụ chúng ta có trang web dân trí chẳng hạn, về mặt người dùng chúng ta chỉ để cái giao diện.
– Giao diện này nó không phải UI, giao diện này nó là Frontend rồi, chúng ta có thể tương tác được.
– UI là cái giao diện có các thành phần không tương tác được, đó là bản thiết kế, cái này khi tương tác ta bấm vào đây. Và ở đây nội dung chúng ta hiển thị ở đây có rất nhiều dạng khác nhau. Và các cái này thì nó đều được hình thành bởi HTML CSS và những cái nguyên khác hình ảnh v…v.
– Người dùng không thể nhìn thấy khi chúng ta phát triển chúng ta nhìn thấy ở bên dưới cái mã thuộc ngôn ngữ HTML ở bên dưới để có thể dễ dàng kiểm tra như sau.
– Giả dụ như chữ số người mắc này chúng ta có thể thả chuột vào chúng ta sẽ thấy cái thẻ A đây.
– Rồi các nội dung, các thẻ HTML thì chính là các thẻ HTML đánh dấu các văn bản như số người mắc, đây là văn bản bình thường nhưng nó được bọc bởi văn bản A hay đúng hơn là nó đánh dấu văn bản A.
– Đây là chúng ta nhìn thấy, A là một cái thẻ nó có đường link tới hình ảnh. tất cả nội dung này là văn bản nhưng để có được những cái định dạng đều được bọc thẻ HTML.
– Và việc tạo ra giao diện này dựa vào giao diện UI có sẵn
Tiếp đến là Tại sao chúng ta lại cần đến HTML?
– Vì thường thì không có định dạng cụ thể cho nên chúng ta cần HTML để định dạng để đánh dấu theo các thành phần của UI. Không thể hiện được các thành phần giao dịch hoặc tạo liên kết nội dung bằng các thẻ HTML.
– Và bây giờ chúng ta sẽ thử xem một cấu trúc file HTML hoàn chỉnh như sau. Nếu như chúng ta chỉ đơn thuần thôi, các thẻ này nó chưa có định dang nào. Nhưng ít ra ở đây nó được có kích thước của chữ, bởi vì 2 thẻ này nó có đặc tính format văn bản. Chúng ta có thể xem ở đây, nếu bây giờ mà chúng ta không có cái thẻ này thì điều gì sẽ xảy ra?
– Nó là một văn bản bình thường không hơn không kém. Điều này nói lên rằng là nếu như văn bản thông thường trên web thì nó sẽ viết liền tù tì như nhau, không phân biệt định dạng. Và để phân biệt định dạng, chúng ta sẽ phải có thẻ đánh dấu. Hay nói dễ hiểu hơn, đó là bọc lại.
– Thì chúng ta thấy cấu trúc đầy đủ của trang web bao gồm các thẻ HTML, và việc dựng cấu trúc này ban đầu khá là đơn giản.
Bởi vì để muốn làm 1 file HTML chúng ta phải một cấu trúc rất đơn giản. Cơ bản đây là những thẻ ban đầu dù nó chưa có nội dung.
Chúng ta có thể tạo đơn giản như sau:
Chúng ta tạo một cái file my first HTML, và dĩ nhiên cái file này chưa phải là HTML. Bởi vì nó chưa có cấu trúc đầy đủ .
Đây là một file đầy đủ. Chúng ta có thể xem dễ dàng.
Nguyên tắc đặt thẻ trong HTML
– Tên thẻ class/id được đặt cho thẻ HTML, nhưng được sử dụng chủ yếu cho CSS và lập trình javascript
– Nếu là thành phần cần phân biệt duy nhất trên trang web sử dụng tên dạng ID
– Nếu là thành phần có thể dùng lại nhiều lần trên trang web sử dụng Class
– Quy tắc đặt tên
– Một thẻ chỉ có 1 tên id nhưng có thể có nhiều tên class cách nhau khoảng cách
– Không có dấu và kí tự đặc biệt
Các cấp độ thẻ HTML( Block và Inline)
Mọi thành phần HTML đều có giá trị hiển thị mặc định trên website phụ thuộc vào loại thẻ HTML cụ thể. Song được phân loại theo 2 dạng cơ bản:
– Thẻ HTML cấp độ BLOCK luôn bắt đầu ở một dòng hiển thị mới và luôn tự gắn rộng có thể( phần chứa thẻ block)
– Thẻ HTML cấp độ Inline không bắt đầu ở dòng mới ở độ rộng giới hạn bởi nội dung chính nó( thường nằm trong cùng dòng các thành phần khác)
Nguyên tắc lồng thẻ HTML( thẻ nào bọc thẻ nào)
– Các thẻ Block bọc được cả thẻ Inline và một số thẻ Block khác
– Các thẻ Inline chỉ bọc được thẻ Inline
– Các thẻ Block nhóm dựng bố cục có thể được bọc các thẻ Block nhóm khác
– Một số thẻ bọc lồng thẻ cùng loại
– Đặc biệt một số thẻ không thể bọc thẻ cùng loại
ĐỂ THEO DÕI CÁC BÀI HỌC TIẾP THEO BẠN LIKE VÀ ĐĂNG KÝ KÊNH ĐỂ NHẬN THÔNG BÁO NHÉ
———————————————-
TRUNG TÂM ĐÀO TẠO THIẾT KẾ VNSKILLS
👉 Website:
👉 Số điện thoại: 0983.637.549
👉 Email: vnskills.academy@gmail.com
#hochtmlcss #tuhochtmlcss #huongdanhochtmlcss
