Những điều cơ bản về html

Diendanraovataz.net - Diễn đàn rao vặt - Đăng tin mua bán - Quảng cáo miễn phí - Hiệu quả - 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/lap-trinh-react-native
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.
  
  

 

thank bài viết rất hay và chi tiết, nhung bạn nên post vào các group lập trình thì hơn