Chương 4 ngôn ngữ thiết kế website

NỘI DUNG 4.1 HTML cấu trúc 4.2 Một số thẻ 4.3 Hình ảnh liên kết 4.4 Tạo bảng 4.5 Danh sách 4.6 Form 4.7 Các thẻ đặc biệt 4.1 HTML VÀ CẤU TRÚC • Giới thiệu HTML – HTML (Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản, ngôn ngữ chuẩn để tạo trang web – HTML dùng thẻ (tags) để định dạng liệu – Tạo khung/bảng cho trang web 4.1 HTML VÀ CẤU TRÚC • Giới thiệu HTML – HTML (Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn – HTML ngôn ngữ đánh dấu ngơn ngữ lập trình, nhằm tạo trang web tĩnh dựa thẻ đánh dấu (tags), dựa vào thẻ đánh dấu để trình duyệt xác định cách hiển thị 4.1 HTML VÀ CẤU TRÚC • Cấu trúc trang tài liệu HTML – Một tài liệu HTML file văn chứa thẻ đánh dấu – Một tài liệu HTML phải có đuôi ( phần mở rộng): html 4.1 HTML VÀ CẤU TRÚC • Cấu trúc trang web 4.1 HTML VÀ CẤU TRÚC • Cấu trúc trang tài liệu HTML 4.1 HTML VÀ CẤU TRÚC • Các thành phần – Thẻ (tag): tập hợp ký hiệu định nghĩa HTML có ý nghĩa đặc biệt • thẻ bắt đầu "" • thẻ mở: • thẻ đóng: 4.1 HTML VÀ CẤU TRÚC • Các thành phần – Phần tử (element): bao gồm thẻ mở, thẻ đóng nội dung bên cặp thẻ mở, đóng Cấu trúc phần tử: Nội dung Ví dụ: Chữ có màu đỏ 4.1 HTML VÀ CẤU TRÚC • Các thành phần – Thuộc tính: • Mỗi thẻ hay nhiều thuộc tính kèm Thuộc tính nhập trước ngoặc đóng ‘>’ thẻ mở • Có thể có nhiều thuộc tính thẻ, thuộc tính phân cách khoảng trắng • Nếu giá trị chuỗi ký tự có khoảng trắng bên trong, bắt buộc phải dùng “ ” hay ‘ ’ để bao chuỗi lại 4.2 MỢT SỚ THẺ CƠ BẢN • Thẻ – Vị trí: Sau thẻ mở trước thẻ mở – Chứa thông tin website (nhưng không hiển t hị) cho t rì nh duyệt , S earch E n g i n e (Google, Yahoo, Bing,… ) 4.6 FORM 4.6.2 Các đối tượng form a) Thẻ input: • Button: – Tương tự Submit nhiên sử dụng Button liệu không gửi tới file xử lý (Khai báo phần action) mà thường kết hợp với JS để tạo tương tác – Cú pháp: 4.6 FORM 4.6.2 Các đối tượng form a) Thẻ input: • Reset: – Trả lại giá trị ban đầu chưa nhập liệu cho tất đối tượng form – Cú pháp: 4.6 FORM 4.6.2 Các đối tượng form a) Thẻ input: • Ví dụ: 4.6 FORM 4.6.2 Các đối tượng form a) Select tags: • Tạo danh sách sổ xuống: – Cú pháp: 4.6 FORM 4.6.2 Các đối tượng form a) Select tags: • Tạo danh sách chọn: – Cú pháp: 4.6 FORM 4.6.2 Các đối tượng form a) Hộp thoại soạn thảo: • Để tạo hộp thoại cho phép soạn thảo (dạng bình luận) sử dụng thẻ textarea • Cú pháp: Nội dung 4.6 FORM 4.6.2 Các đối tượng form a) Hộp thoại soạn thảo: • Ví dụ 4.7 CÁC THẺ ĐẶC BIỆT 4.7.1 Meta tags • Mọi thẻ meta đặt cặp thẻ • Cung cấp thơng tin website cho trình duyệt Search Engine 4.7 CÁC THẺ ĐẶC BIỆT 4.7.1 Meta tags a) Keyword • Tạo từ khóa cho website, cung cấp cho search engine • Cú pháp: b) Description • Thẻ mơ tả website, cung cấp thơng tin web • Cú pháp 4.7 CÁC THẺ ĐẶC BIỆT 4.7.1 Meta tags c) Refresh • Tự động tải lại trang khoảng thời gian định nghĩa • Cú pháp: d) Author • Cung cấp thơng tin tác giả website • Cú pháp: 4.7 CÁC THẺ ĐẶC BIỆT 4.7.1 Meta tags e) Refresh • Xác định kiểu charset mà website sử dụng • Cú pháp: 4.7 CÁC THẺ ĐẶC BIỆT 4.7.2 Style tags • Cặp thẻ đặt cặp thẻ • Xác định thơng tin định dạng website • Trong tài liệu HTML sử dụng nhiều cặp thẻ 4.7 CÁC THẺ ĐẶC BIỆT 4.7.1 Script tags • Bên cặp thẻ , chứa thơng tin mã kịch Javascript • Ví dụ: document.write(“Xin chào”); 4.7 CÁC THẺ ĐẶC BIỆT 4.7.3 !DOCTYPE • Nằm bên ngoại cặp thẻ • !doctype khơng phải thẻ mà cung cấp cho trình duyệt biết phiên HTML sử dụng website • Ví dụ: