Hướng dẫn về html - các thẻ thường sử dụng

by t11nguyen 24/5/2017, 11:53

2. Các khái niệm cơ bản về html
2.1 Giới thiệu về Html

- Bất kỳ ngôn ngữ hay kỹ thuật lập trình web nào cuối cũng đều sinh ra mã Html để hiển thị lên trình duyệt web .

- Do vậy dù bạn có phát triển ứng dụng web bằng asp.net , php , jsp thì cũng đều cần có hiểu biết về html ( cũng như các công cụ bên cạnh nó là javascript , css ) .
Tìm hiểu về php : https://vietpro.net.vn/hoc-lap-trinh-web-php-co-ban

- Thông thường ta thiết kế 1 website thì chỉ cần tạo ra các tài liệu html , sau đó upload lên máy chủ web .Tuy nhiên ở đây tài liệu html lại khó thay đổi nội dung ( phải chỉnh sửa nội dung trong mã nguồn ) .Do đó ta gọi là các website hay tài liệu html tĩnh .

- Các tài liệu html được tự động sinh từ các ngôn ngữ lập trình như .net , php , java thì có thể tạo động các mã html ( tức là có thể tạo giao diện thay đổi nội dung ) .Ta gọi các website này là website động .

- Trong tài liệu này chúng ta chủ yếu tìm hiểu về html tĩnh , để hiểu cơ chế định dạng – trang trí – xử lý html .Việc xây dựng các trang html động chúng ta cần tham khảo các khóa học về asp , java , php

2.2 Cấu trúc tài liệu html
- Các tài liệu html tuân thủ theo cấu trúc sau

2.3 Thẻ ( tag) html
- html là ngôn ngữ đánh dấu tài liệu dùng các thẻ (div , h , a , ul …) , mỗi thẻ có ý nghĩa riêng , và được sử dụng tùy biến để mô tả tài liệu .

- Mỗi thẻ html có các attribute , để ta có thể dễ dàng thể hiện nội dung thẻ html cũng như truy xuất tới chúng 1 cách dễ dàng , ví dụ :

// thẻ input là thẻ dùng tạo các Control nhập liệu trong html , ở đây hiển thị 1 ô textBox dùng để nhập chữ ( attribute type ) và đặt tên cho thẻ là name1 ( thông qua Attribute name )

- Các Attribute tường được dùng rất nhiều đó là : name . id , class
Các ngôn ngữ lập trình cơ bản khác : https://vietpro.net.vn/hoc-ajax
3. Các thẻ html hay dùng
3.1 Thẻ div
- Thẻ div dùng để nhóm khối phần tử html

- Hướng dẫn dùng Visual Studio thực hành viết mã html

- Mở Visual Studio ( ở đây chúng tôi hướng dẫn trên phiên bản VS 2012 ) .Chọn mẫu Template Project theo hình sau :

- Nhấn Ok , mở Solution right lên Project chọn theo hình sau để tạo thư mục trong Project

- Đặt tên thư mục tùy ý thường đặt theo tên bài học

- Tạo mới file html như hình vẽ

chọn mẫu html như hình dưới :

// vào thư mục lưu file ViDu3.1.html mở bằng trình duyệt được kết quả như chạy bằng VS
3.2 Thẻ p
// tương tự như với ví dụ về thẻ div , các bạn tự code các thẻ dưới đây để xem kết quả chạy trên trình duyệt .

p là thẻ mô tả đoạn văn bản ( paragraph )

Đoạn văn 1

Đoạn văn 2

Kết quả :Không như thẻ div thành phần bên trong thẻ p không bao gồm các thẻ chứa nội dung như : thẻ h , thẻ div mà chỉ chứa các control html như input , button , label …

3.3 Thẻ ul
- thẻ ul đi đôi với thẻ li dùng để liệt kê danh sách

Danh sách 1

Danh sách 2

Kết quả :
3.4 Thẻ h
h ( header ) là thẻ dùng mô tả tiêu đề đối tượng , mỗi thẻ h có kích cỡ từ nhỏ tới lớn theo thứ tự từ h1 tới h6

Tiêu đề 1

Tiêu đề 2

3.5 Thẻ a
- Thẻ a dùng để định nghĩa 1 link liên kết

3.6 Thẻ span
- Thẻ span dùng để nhóm phần tử html , khác với thẻ div dùng để nhóm khối phần tử .Tức là trong thẻ div có thể có nhiều thẻ khác nhưng với thẻ span thì không .

Hello world

Kết quả :

- thẻ span có thể đặt trong thẻ p

3.7 Thẻ br
- thẻ br dùng để xuông dòng .Đây là 1 thẻ trung gian , không chứa nội dung

- Khi không có thẻ br thì Link 1 và Link 2 được đặt trên cùng 1 dòng

Kết quả :
3.8. Thẻ fieldset
- Thẻ fieldset dùng để bao quanh và nhấn mạnh 1 nội dung

Mô tả thẻ fieldset

Nội dung chi tiết 1

Nội dung văn bản

Kết quả :

Mẹo nhỏ :

- Trong môi trường VisualStudio hỗ trợ các Snippets các ngôn ngữ lập trình ( html , css , C# …) để gõ nhanh code .

- Giả sử muốn tạo nhanh thẻ table ta gõ

// kết quả nhấn tab 2 lần

- Một tính năng mạnh mẽ nữa đó là chúng ta có thể tạo các đoạn gõ tắt Snippets cho riêng mình .

4 Thẻ Inline – Block
- Xét về việc xắp xếp các thẻ ( trên cùng 1 hàng hay xuống hàng ) các thẻ html chia ra làm 2 loại : Inline và Block
- thẻ Inline là các thẻ html mà các thẻ sau xếp cùng trên 1 hàng so với thẻ trước , khi không gian còn trống. Các loại thẻ Inline thường gặp như : , , ,
Ví dụ :

Kết quả :
Code tạo 2 link nằm trên cùng 1 dòng .

- Thẻ block là các thẻ html mà các thẻ theo sau nó tự động xuống hàng ( không cùng 1 dòng )

Các loại thẻ block thường gặp như :

,
,

,
Ví dụ :

Tiêu đề 1

Tiêu đề 2

Kết quả :

- Ta tạm hiểu đơn giản là các thẻ Inline nằm trên cùng 1 dòng , các thẻ block nằm trên các dòng riêng biệt .

- Ta có thể dùng CSS để thay đổi giá trị Inline hoặc block của bất kỳ thẻ html nào .
Giới thiệu các ngôn ngữ khác: https://vietpro.net.vn/hoc-html-va-css
Bài học đến đây là kết thúc. Chúc các bạn học tập tốt.