Hướng dẫn về html - các thẻ thường sử dụng
Trang 1 trong tổng số 1 trang
Hướng dẫn về html - các thẻ thường sử dụng
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.
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.
t11nguyen- Binh Nhất
- Tổng số bài gửi : 36
Tuổi : 35
Đăng ký ngày : 22/04/2017
Danh tiếng : 0
Similar topics
» Các loại máy đầm phổ biến thường dùng
» Mái che sân thượng đã quá nhàm chán, hãy sử dụng thứ này....
» CÔNG DỤNG + HƯỚNG DẪN SỬ DỤNG BỘT CAFE NGUYÊN CHẤT TẮM TRẮNG
» Xu hướng xây dựng năm 2012.
» hướng dẩn sử dụng máy chà sàn và máy mài sàn
» Mái che sân thượng đã quá nhàm chán, hãy sử dụng thứ này....
» CÔNG DỤNG + HƯỚNG DẪN SỬ DỤNG BỘT CAFE NGUYÊN CHẤT TẮM TRẮNG
» Xu hướng xây dựng năm 2012.
» hướng dẩn sử dụng máy chà sàn và máy mài sàn
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|