Hiển thị các bài đăng có nhãn Tài Liệu. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Tài Liệu. Hiển thị tất cả bài đăng

Bài 7: Thẻ tạo form trong html

Lukaku 19:05 Add Comment
Thẻ form trong html là thẻ giữ vai trò tương tác giữa người dùng và website. Trong bài học này, chúng ta sẽ cùng tìm hiểu cách sử dụng thẻ form để tạo 7 dạng giao diện form cơ bản. ( còn phần xử lý form sẽ được học trong ngôn ngữ php )

Khai báo thẻ Form

 form username trong html

Form nhập username

 form username trong html
Với type="text" là nhập các kí tự từ bàn phím, size="25" là độ dài khung bằng 25.

Form nhập password

 form password trong html
Với type="password" là các kí tự sẽ được thay thế bằng ***, size="25" là độ dài khung bằng 25.

Form textarea

 form textarea trong html
Với rows="..." là chiều cao, cols="..." là chiều ngang.
Dạng form textarea này chúng ta có thể nhập đoạn văn dài vào đây.
Thường được dùng để tạo khung comment hoặc là khung đóng góp ý kiến.

Form select, option

 form select trong html
Dạng này thường được dùng chọn ngày tháng năm sinh...v.v

Form radio

 form radio trong html
Dạng này thường được dùng để tạo form lựa chọn giới tính.

Form checkbox

 form checkbox trong html
Dạng này chúng ta có thể check nhiều lựa chọn cùng lúc. Khác với form radio chỉ chọn được 1.

Form submit

 form submit trong html
Với value="login" tức là button submit sẽ có tên hiển thị là "login".
Xem hướng dẫn chi tiết trong video phía dưới:


Nguồn: 2school.vn

Bài 6: Thẻ tạo bảng trong html

Lukaku 19:03 Add Comment
Để tạo bảng trong html người ta sử dụng thẻ table. Một table sẽ bao gồm nhiều dòng và nhiều cột được xác định bằng thẻ tr và thẻ td.

Thẻ table trong html

 thẻ table trong html

Khai báo thẻ tr để tạo dòng.

 tạo dòng

Khai báo thẻ td để tạo cột.

 ví dụ table

Viết thuộc tính border để tạo khung cho table.

 border table trong html
Xem hướng dẫn chi tiết trong video phía dưới:


Nguồn: 2school.vn

Bài 5: Thẻ danh sách trong html

Lukaku 18:28 Add Comment
Trong html, thẻ danh sách được dùng để tạo ra một danh sách các bài viết để người dùng lựa chọn giống như hình dưới.
 thẻ ol li trong html
Có tất cả 3 dạng danh sách mà các bạn cần phải học.

Danh sách có thứ tự

Cách viết:
 thẻ ol li trong html

Danh sách không có thứ tự

Cách viết:
 thẻ ul li trong html
Dạng thẻ ul, li này được sử dụng nhiều nhất

Danh sách lồng nhau

Cách viết:
 danh sách lồng nhau trong html
Dạng này thường được sử dụng làm menu left
Xem hướng dẫn chi tiết trong video phía dưới:


Nguồn: 2school.vn

Bài 4: Thẻ chuyển liên kết trong html

Lukaku 18:26 Add Comment
Trong HTML, để website chuyển từ bài viết này sang bài viết khác thì chúng ta sẽ sử dụng thẻ liên kết. Cách viết thẻ liên kết cũng tương đối giống với thẻ hình ảnh ở bài 3.

Thẻ liên kết

Cách viết:
 thẻ liên kết trong html
Khi chúng ta click vào "click here" thì website sẽ chuyển liên kết "đến đường dẫn liên kết".
Đường dẫn của thẻ liên kết cũng giống đường dẫn của thẻ hình ảnh.
Được chia làm 2 loại: đường dẫn tuyệt đối và đường dẫn tương đối

Đường dẫn tuyệt đối

Tuyệt đối tức là không thay đổi.
Loại đường dẫn này chúng ta sẽ copy nó ở trên thanh địa chỉ của trình duyệt web.
Cách viết:
 đường dẫn tuyệt đối trong html
Nhận xét: đường dẫn tuyệt đối bắt đầu bằng http://

Đường dẫn tương đối

Tương đối tức là sẽ thay đổi.
Loại đường dẫn này chúng ta sẽ tự viết ra.
Cách viết: có tất cả 4 kiểu viết đường dẫn tương đối
 đường dẫn tương đối trong html
Nhận xét: đường dẫn tương đối không có http://
Đặc biệt
Nếu chúng ta không có đường dẫn cụ thể thì chúng ta sẽ sử dụng dấu # để thay thế.
Cách viết
 dấu thăng trong thẻ liên kết

Thuộc tính target = "..."

Tác dụng: khi click chuột thì liên kết sẽ được mở ra trên một tab mới.
Cách viết:
 thuộc tính target
Xem hướng dẫn chi tiết trong video phía dưới:


Nguồn: 2school.vn

Bài 3: Thẻ chèn hình ảnh trong html

Lukaku 18:24 Add Comment
Trong html, để hiển thị hình ảnh lên website người ta dùng thẻ img. Khi học về thẻ hình ảnh này, các bạn chú ý kĩ cách lấy đường dẫn tương đối và tuyệt đối trong thuộc tính src.

Thẻ hình ảnh

Cách viết:
 thẻ hình ảnh trong html
Đường dẫn tấm hình được chia làm 2 loại: đường dẫn tuyệt đối và đường dẫn tương đối

Đường dẫn tuyệt đối

Tuyệt đối tức là không thay đổi.
Loại đường dẫn này chúng ta sẽ copy nó ở trên thanh địa chỉ của trình duyệt web.
Cách viết:
 đường dẫn tuyệt đối trong html
Nhận xét: đường dẫn tuyệt đối bắt đầu bằng http://

Đường dẫn tương đối

Tương đối tức là sẽ thay đổi.
Loại đường dẫn này chúng ta sẽ tự viết ra.
Cách viết: có tất cả 4 kiểu viết đường dẫn tương đối
 đường dẫn tương đối  trong html
Nhận xét: đường dẫn tương đối không có http://
Resize tấm hình
Chúng ta sẽ sử dụng thuộc tính width(chiều rộng) và height(chiều cao) để thu nhỏ hay phóng to tấm hình.
Cách viết
 thuộc tính của thẻ hình ảnh trong html
Xem hướng dẫn chi tiết trong video phía dưới:


Nguồn: 2school.vn