Bài giảng Thiết kế và lập trình Web - Bài 2: HTML căn bản

Bài giảng Thiết kế và lập trình Web - Bài 2: HTML căn bản cung cấp cho người học các kiến thức: Giới thiệu về HTML, cấu trúc của 1 tài liệu HTML, các Tag cơ bản, các Tag danh sách, Tag liên kết trang,.... Mời các bạn cùng tham khảo.

Thiết kế lập trình Web Bài HTML Căn Viện CNTT & TT Thiết kế & Lập trình Web Nội dung  Giới thiệu HTML  Cấu trúc tài liệu HTML  Các Tag  Các Tag danh sách  Tag liên kết trang  Tag kẻ bảng Thiết kế & Lập trình Web Nội dung  Giới thiệu HTML  Cấu trúc tài liệu HTML  Các Tag  Các Tag danh sách  Tag liên kết trang  Tag kẻ bảng Thiết kế & Lập trình Web Giới thiệu HTML  HTML (Hyper Text Markup Language) - Ngôn ngữ đánh dấu siêu văn  Là ngôn ngữ dùng để xây dựng trang Web  Chứa thành phần định dạng để báo cho trình duyệt Web biết cách để hiển thị trang Web  Một trang web thông thường gồm có thành phần chính: – Dữ liệu trang web (văn bản, âm thanh, hình ảnh ) – Các thẻ (tag) HTML dùng để định dạng mô tả cách thức liệu hiển thị trình duyệt Thiết kế & Lập trình Web Giới thiệu HTML – Trình duyệt, trình soạn thảo Trình duyệt web (Browser) Trình soạn thảo (Editor) Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML Welcome to HTML My first HTML document Hiển thị ví dụ IE Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML Dòng chữ in đậm  Dữ liệu  Tên Tag  ln mang tính gợi nhớ – Ví dụ: B ~ Bold, I ~ Italic, P ~ Paragraph  Đôi không cần Tag đóng ,  Cú pháp chung Dữ liệu – Ví dụ : – Thuong mai Dien tu 1 – Thuong mai Dien tu 2 Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML.Cú pháp Mã HTML Đây dòng in Đậm Mức chữ tiêu đề Mã HTML Hiển thị Đây là dòng in Đậm Mức chữ tiêu đề Hiển thị Hello Hello Lưu ý : • Giá trị Thuộc tính Thẻ nên đặt dấu nháy đơn nháy kép • Khơng phân biệt chữ HOA thường • Bỏ qua khoảng trắng thừa dấu ngắt dòng, xuống dòng Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML.Cú pháp  Lưu ý: Các Tag nên lồng tuyệt đối Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML.Ví dụ Welcome to HTML My first HTML document 10 Thiết kế & Lập trình Web Các thành phần Form – Pull-down Menu  Dùng để tạo combo box  Cú pháp …… ……… …… ……… Thiết kế & Lập trình Web Các thành phần Form – Pull-down Menu combo box: Window Media 10 Jet Audio 9 Windows XP Windows XP SP2 Windows Vista Office 2007 Thiết kế & Lập trình Web Các thành phần Form – Field Set  Dùng để tạo Group box, nhóm thành phần nhập liệu form  Cú pháp GroupBox’s Name …  Ví dụ Subject English Mathematics Graph Theory Thiết kế & Lập trình Web Một số thuộc tính tiện ích Form Input  Accesskey=char – – – – Tạo phím nóng cho form fields Áp dụng cho tất form fields Cách nhấn Alt + char Tránh phím tắt browser  Title = string – Tạo tooltip cho form fields – Áp dụng cho tất form fields  Autocomplete = ON/OFF – Gợi ý tự động nhập liệu – Áp dụng cho tất tag form, input Thiết kế & Lập trình Web Bật chế độ Auto-complete cho IE Thiết kế & Lập trình Web Một số thẻ HTML đặc biệt  Thẻ Meta  Thẻ Script  Thẻ Marquee 80 Thiết kế & Lập trình Web 5.1 Thẻ meta  Thẻ : – Đặt … – Thường dùng quy định thuộc tính cho trang web – Tác dụng: font, tìm kiếm, chuyển trang… – cách viết thẻ : 82 Thiết kế & Lập trình Web 5.1 Thẻ meta  Thẻ meta cho phép tìm kiếm  Khai báo từ khóa để Search Engineer tìm kiếm: author, keywords,…  Ví dụ 83 Thiết kế & Lập trình Web 5.1 Thẻ meta  Thẻ meta tự động chuyển URL This page will automatically go to Film.html 84 Thiết kế & Lập trình Web 5.1 Thẻ meta      85 Thiết kế & Lập trình Web 5.2 Thẻ script  Muốn kiểm sốt hành động người dùng  Khai báo phương thức xử lý phía Client => Client Script: JavaScript VBScript  Cú pháp lệnh; 86 Thiết kế & Lập trình Web Thẻ MARQUEE  Dùng để tạo hiệu ứng chữ chạy hình trình duyệt  Cú pháp Text Text Text Thiết kế & Lập trình Web Tự động chuyển hướng trang web  Tự động chuyển hướng trang web sang trang web khác (URL) sau khoảng thời gian t (tính theo giây)  Cú pháp Thiết kế & Lập trình Web Giới thiệu HTML5  Các thành phần thuộc tính HTML  Hỗ trợ đầy đủ CSS3  Các thành phần Video audio  2D/3D graphics  Local storage  Local SQL database .. .Thiết kế & Lập trình Web Nội dung  Giới thiệu HTML  Cấu trúc tài liệu HTML  Các Tag  Các Tag danh sách  Tag liên kết trang  Tag kẻ bảng Thiết kế & Lập trình Web Nội dung  Giới thiệu HTML. .. xuống dòng Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML. Cú pháp  Lưu ý: Các Tag nên lồng tuyệt đối Thiết kế & Lập trình Web Giới thiệu HTML – Thẻ (Tag) HTML. Ví dụ ... nghĩa , Thiết kế & Lập trình Web Các tag Danh sách – Danh sách có thứ tự 30 Thiết kế & Lập trình Web Các tag Danh sách – Danh sách có thứ tự 31 Thiết kế & Lập trình Web Các tag Danh