Đang tải... (xem toàn văn)
Những khái niệm về HTML 5,Giáo trình HTML5 css3,HTML căn bản,giáo trình html cơ bản,định dạng HTML,ngôn ngữ HTML, HTML, CSS, HTML và CSS, JAVASCRIPT, JAVA, cơ bản về HTML, kiến thức cơ bản về HTML, lập trình tin học, công nghệ thông tin,Làm việc với thành phần mở rộng của CSS3,Làm việc với CSS3, Giáo trình HTML5 và CSS3 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
BÀI NHỮNG KHÁI NIỆM ĐẦU TIÊN VỀ HTML5 MỤC TIÊU BÀI HỌC Định nghĩa HTML5 Tổng quát cú pháp HTML5 Một số thành phần HTML5 Tổng quan HTML5 API (giao diện lập trình ứng dụng) công nghệ hỗ trợ Giới thiệu CSS3 Slide - Những khái niệm HTML5 ĐỊNH NGHĨA HTML5 ĐỊNH NGHĨA HTML5 Thành phần HTML5: Thẻ HTML mới Thuộc .nh CSS3 HTML5 Javascript Công nghệ hỗ trợ tách biệt Slide - Những khái niệm HTML5 ĐỊNH NGHĨA HTML5 HTML5 họ HTML5: HTML5: • Là thành phần đánh dấu/ cú pháp • Các thẻ (tag) • Ví dụ: , , , … Họ HTML5: • Bao gồm thẻ • Công nghệ mới: CSS3, Geolocation, Web storage, web workers, web socket • Tác dụng công nghệ mới: – Cung cấp tính mạnh mẽ cho công cụ – Tạo website hữu dụng & tinh xảo Slide - Những khái niệm HTML5 ĐỊNH NGHĨA HTML5 Phạm vi sử dụng HTML5: PC Thiết bị di động & smartphone Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5 Ngôn ngữ HTML5 giới thiệu số thẻ/ thành phần giúp cấu trúc trang web logic thiết thực Phiên bản trước HTML5 This is my header #header { width:960px; height:100px; background-‐color:gray; } This is my header header { width:960px; height:100px; background-‐color:gray; } Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5 Thành phần HTML5: A: B: C: D: E: F: Slide - Những khái niệm HTML5 TỔNG QUAN VỀ CÚ PHÁP HTML5 Tên thành phần dựa theo tên thành phần thông dụng sử dụng phần bố cục trang web (div id="footer",div id="nav", ) Tác dụng thành phần HTML5: Giảm bớt phụ thuộc vào thẻ Thay cấu trúc trang web thống nhất, dễ đọc HTML5 không thay cú pháp HTML nào; mà bổ sung thêm thành phần (thẻ) vào danh sách có Slide - Những khái niệm HTML5 10 CSS3 LAYOUT Layout nhiều cột sử dụng CSS3: CSS3 cung cấp thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều cột: • Column-count: quy định cụ thể số lượng cột phần tử chia thành • Column-width: quy định cụ thể chiều rộng cột • Column-gap: quy định khoảng cách cột • Column-rule: thuộc tính viết tắt, cho phép thiết lập tất thuộc tính: chiều rộng, style, màu sắc cột Slide - Làm việc với thành phần mở rộng CSS3 11 CSS3 LAYOUT Cách thiết lập: #introduction-content { width: 600px; -moz-column-count: 3; -webkit-columncount: 3; column-count: 3; } Slide - Làm việc với thành phần mở rộng CSS3 12 CSS3 LAYOUT Thiết lập layout dạng hộp Flexible (hộp linh hoạt): Là dạng bố cục CSS3 Đại diện cho bốn dạng layout hỗ trợ CSS2.1 #introduction-content { width: 600px; height: 150px; border: 1px solid #821738; display: -webkit-box; -webkit-box-orient: horizontal; display: moz-box; -moz-box-orient: horizontal; } Slide - Làm việc với thành phần mở rộng CSS3 13 CSS3 USER INTERFACE (GIAO DIỆN NGƯỜI DÙNG) CSS3 USER INTERFACE CSS3 cung cấp số tính phía người dùng: Thay đổi kích thước thành phần trang Thay đổi kích thước hộp Phác thảo Các thuộc tính quy định: Resize box-sizing outline-offset Slide - Làm việc với thành phần mở rộng CSS3 15 CSS3 USER INTERFACE CSS3 resize: Quy định thành phần hay thay đổi kích thước người dùng show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } Slide - Làm việc với thành phần mở rộng CSS3 16 CSS3 USER INTERFACE CSS3 box-sizing: Cho xác định yếu tố phù hợp với khu vực CSS3: div.Container { width:30em; border:1em solid;} div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-boxsizing:border-box; width:50%; border:1em solid red; float:left;} HTML: This div occupies the left half. This div occupies the right half. Slide - Làm việc với thành phần mở rộng CSS3 17 CSS3 USER INTERFACE CSS3 Outline Offset: Quy định đường biên, bao phía bên đường biên mặc định cách tạo đường outline: • không không gian • Không phải dạng hình chữ nhật Slide - Làm việc với thành phần mở rộng CSS3 18 CSS3 USER INTERFACE CSS3 Outline Offset: div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; } Note: Internet Explorer and Opera does not support the outline-offset property. This div has an outline border 15px outside the border edge. Slide - Làm việc với thành phần mở rộng CSS3 19 TỔNG KẾT Sử dụng CSS3 media queries để thiết kế layout phù hợp với trình duyệt, thiết bị CSS3 giúp người thiết kế tạo dạng layout nhiều cột Giúp bố trí thông tin thuận tiện, rõ ràng cho người dùng CSS3 cung cấp số thuộc tính để tương tác với người dùng duyệt web Người dùng thay đổi kích thước thành phần trang Slide - Làm việc với thành phần mở rộng CSS3 20 Bài thực hành số – Làm việc với thành phần HTML5: Offline Storage, Geolocation, Drag & Drop Chú ý chung với toàn buổi lab: - Toàn tập buổi lab, bắt buộc sinh viên phải viết mã tay, sử dụng chương trình soạn thảo mã sau: o Notepad ++ o E- Text Editor Mục tiêu Buổi thực hành số giúp sinh viên làm việc với công việc mà HTML5 hỗ trợ: - Offline storage - Geolocation - Drag & drop WEB302_ HTML5 & CSS3 Lab7 Bài Sinh viên tự thực hành trước bước SGK với thư mục: - HTML5_13lessons - HTML5_14lessons - HTML5_15lessons Nộp thư mục hoàn thiện theo tên: - HTML5_13lessons_done - HTML5_14lessons_done - HTML5_15lessons_done Bắt buộc sinh viên phải làm phải có kết nộp cho giảng viên theo dõi Nếu sinh viên không thực hiện, giảng viên có quyền trừ điểm vào tập sau WEB302_ HTML5 & CSS3 Lab7 Bài Sử dụng layout có thư mục TaiNguyen\Lesson02 & hình ảnh để thực dàn trang web game xếp hình theo chuẩn HTML5 Mô tả yêu cầu game sau: Trên trang web bao gồm vùng: - Vùng hiển thị hình ảnh ghép hoàn chỉnh - Vùng hiển thị mảnh ghép Người chơi có nhiệm vụ kéo thả mảnh ghép cắt phía vào vùng hình ảnh hoàn chỉnh cho vị trí Yêu cầu người thiết kế trang web game sau: - Thực dàn layout cho trang web game - Thiết kế game với HTML5/ CSS3: o Thực phương thức kéo thả hình ảnh vào vùng hiển thị hoàn chỉnh o Nếu người chơi chọn nhầm vị trí cho miếng ghép hình ảnh ghép không chấp nhận hiển thị, người dùng phải lựa chọn miếng ghép khác o Với mảnh ghép vị trí, người chơi cộng điểm, người thiết kế game phải có trách nhiệm hiển thị vùng tính điểm trang o Khi người chơi kéo thả toàn vị trí mảnh ghép, hiển thị thông báo “Chúc mừng bạn hoàn thành game” WEB302_ HTML5 & CSS3 Lab7 Chú ý: không đủ thời gian làm lớp, sinh viên nhà làm & nộp sản phẩm cho giảng viên không 24h WEB302_ HTML5 & CSS3 Lab7 Yêu cầu nộp Cuối thực hành, sinh viên tạo thư mục theo tên _Lab7, chứa tất sản phẩm lab trên, nén lại thành file zip upload lên mục nộp tương ứng LMS WEB302_ HTML5 & CSS3 Lab7 [...]... WEB302_ HTML5 & CSS3 Lab1 4 Sinh viên nộp file theo tên sau: - index.html - common.css Yêu cầu nộp bài Cuối giờ thực hành, sinh viên tạo thư mục theo tên _Lab2, chứa tất cả sản phẩm của những bài lab trên, nén lại thành file zip và upload lên mục nộp bài tương ứng trên LMS Đánh giá bài lab STT 1 2 Bài số Bài 1 Bài 2 WEB302_ HTML5 & CSS3 Điểm 3 7 Lab1 BÀI 2 KHỞI TẠO, LÀM VIỆC VỚI MÃ HTML5. .. làm quen với những mã lệnh HTML5/ CSS3 Sinh viên sẽ làm việc với những công việc sau: - Khai báo mã HTML5 - Làm việc với ID trong HTML5 WEB302_ HTML5 & CSS3 Lab1 2 Bài 1 Dựa vào SGK & tài liệu Internet, trình bày theo cách hiểu của mình về những điểm mới nổi bật nhất của HTML5 (không cần thiết phải viết theo dạng bài luận, có thể viết theo... VỚI MÃ HTML5 VÀ THÀNH PHẦN FORM NHẮC LẠI BÀI TRƯỚC Định nghĩa về HTML5 Tổng quát về cú pháp của HTML5 Một số thành phần mới của HTML5 Tổng quan về HTML5 API (giao diện lập trình ứng dụng) và công nghệ hỗ trợ Giới thiệu CSS3 Slide 2 - Khởi tạo, làm việc với mã HTML5 và thành phần Form 2 MỤC TIÊU BÀI HỌC Sử dụng ngôn ngữ đánh dấu HTML5 Làm việc với các phần tử nội dung (content) của HTML5 Tổng... thành phần của HTML5, nhưng lại có mối liên quan mật thiết với HTML5 Slide 1 - Những khái niệm đầu tiên về HTML5 28 1 Bài thực hành số 1 – Những khái niệm đầu tiên về HTML5 Chú ý chung với toàn bộ các buổi lab: - Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng một trong các chương trình soạn thảo mã sau: o Notepad ++ o E- Text Editor Mục tiêu Buổi thực hành số 2... niệm đầu tiên về HTML5 23 TỔNG QUAN VỀ HTML5 API localStorage: Dữ liệu có thể truy cập tại bất kỳ thời điểm nào, ngay cả khi đóng trình duyệt hoặc khi hệ thống khởi động lại Web storage sessionStorage: Dữ liệu bị mất đi khi đóng trình duyệt Slide 1 - Những khái niệm đầu tiên về HTML5 24 CSS3 CSS3 CSS3 không phải là một thành phần của HTML5, nhưng lại... khái niệm đầu tiên về HTML5 21 TỔNG QUAN VỀ HTML5 API Ví dụ :flickr.com/map Slide 1 - Những khái niệm đầu tiên về HTML5 22 TỔNG QUAN VỀ HTML5 API Web workers: WebWorkers là một framework (nền tảng) giải quyết vấn đề hiệu suất của trình duyệt Là mã kịch bản chạy trên một luồng riêng biệt Web storage: Cải tiến cookie của trình duyệt Cookie là một công nghệ bị giới hạn và khó khăn cho các... file theo tên: noteHTML5.doc Bài 2 1 Sinh viên thực hiện khai báo lại cấu trúc mã HTML5 bằng notepad++ như sau: