Học html bắt đầu từ đâu

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 ) .


- 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-lap-trinh-typescript
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 .
  
  Bài học đến đây là kết thúc. Chúc các bạn học tập tốt.