Lôøi môû ñaàu ĐẠI HỌC THÁI NGUYÊN TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT KHOA KỸ THUẬT CÔNG NGHIỆP BÁO CÁO THỰC TẬP CƠ SỞ CNTT Đề tài TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG VỀ HTML5 VÀ CSS3 Giáo viên hướng dẫn Nguyễ[.]
ĐẠI HỌC THÁI NGUYÊN TRƯỜNG CAO ĐẲNG KINH TẾ - KỸ THUẬT KHOA KỸ THUẬT CÔNG NGHIỆP BÁO CÁO THỰC TẬP CƠ SỞ CNTT Đề tài: TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG VỀ HTML5 VÀ CSS3 Giáo viên hướng dẫn : Nguyễn Thị Hạnh Sinh viên thực : Phạm Viết Quý : Phạm Thị Ngọc :Trần Thị Ngọc Ánh Lớp : K7 CNTT Năm học : 2012 - 2013 Thái Nguyên, năm 2013 LỜI NÓI ĐẦU Hiện nay, công nghệ dành cho thiết bị di động ngày phát triển Nếu trước đây, bạn phải dùng máy tính để bàn (MTĐB) cồng kềnh trình duyệt web IE (Internet Explorer) để lướt web, với máy tính xách tay (MTXT), điện thoại thơng minh (ĐTTM) nhiều trình duyệt khác (Firefox, Opera…) bạn dễ dàng lướt “net” đâu Tuy nhiên với thiết bị, trình duyệt web khác nhau, nội dung hiển thị hình khác Chẳng hạn, máy tính bạn xem trang web tốt, ĐTTM giao diện cấu trúc trang bị xáo trộn Hay bạn xem phim tốt với IE với Firefox khơng Vậy giải pháp để người dùng sử dụng trình duyệt thiết bị xem đầy đủ, trọn vẹn nội dung, thông tin internet HTML5 cho phép nhà phát triển, lập trình web tạo trang web có tính ưu việt Khơng vậy, HTML5 đem đến cho người dùng trải nghiệm tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú HTML5 CSS3 làm cho ứng dụng web trang web hấp dẫn HTML5 có tính thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng nhiều Ví dụ nhiều màu sắc hỗ trợ đường cong, việc làm mờ, góc trịn (thay ép buộc nhà thiết kế web sử dụng hình ảnh để tạo góc trịn), dĩ nhiên việc lưu trữ offline Tất điều làm trang Web trở nên dễ nhìn hơn, bắt mắt làm cho thứ trở nên sát với mà nhà thiết kế tưởng tượng đầu Ngoài ra, HTML5 CSS3 giúp nhà thiết kế Web dễ dàng việc tạo hiệu ứng động trị chơi tương tác mà khơng cần dùng đến Flash Mặc dù khơng thể thay hồn tồn cho Flash HTML5 CSS3 có nhiều hứa hẹn lĩnh vực Đó lý em lựa chọn đề tài “Tìm hiểu xây dựng ứng dụng HTML5 CSS Chúng em xin chân thành cảm ơn cô giáo Nguyễn Thị Hạnh thầy khoa tận tình giúp đỡ, truyền đạt kiến thức kinh nghiệm quý giá để chúng em hoàn thành đề tài Trong q trình hồn thành đề tài khơng thể tránh khỏi thiếu sót chúng em mong thầy bạn góp ý để làm chúng em hồn thiện Nhóm sinh viên thực Phạm Viết Quý Phạm Thị Ngọc Trần Thị Ngọc Ánh CHƯƠNG I TỔNG QUAN VỀ HTML VÀ CSS I.1 TỔNG QUAN VỀ HTML I.1.1 Giới thiệu HTML • HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn • File HTML file văn chứa các thẻ đánh dấu • Các thẻ đánh dấu báo cho trình duyệt biết cách hiển thị trang HTML • File HTML phải có HTML HTM • File HTML tạo sử dụng trình soạn thảo văn trình soạn thảo HTML WYSIWYG (What You See Is What You Get) I.1.2 HTML Elements HTML văn bao gồm HTML Element Mỗi HTML Element đánh dấu HTML Tag Mỗi tag có tên, bao kí tự < > Tag thường theo cặp Ví dụ Thẻ gọi thẻ mở (), thẻ sau gọi thẻ đóng () Văn thẻ mở thẻ đóng nội dung HTML Element HTML tag không phân biệt hoa thường: thẻ giống thẻ I.1.3 Các thẻ HTML (HTML Basic Tags) Cấu trúc trang HTML - Thẻ DOCTYPE: Mọi trang HTML nên bắt đầu thẻ DOCTYPE để loại ngôn ngữ đánh dấu sử dụng - Thẻ HTML: + Thẻ html thẻ gốc phải có trang HTML + Thẻ html chứa nhiều thẻ head thẻ body + Khơng có thẻ nằm ngồi thẻ html ngoại trừ thẻ DOCTYPE + Thẻ head dùng để chứa thông tin mô tả trang web loại charset dùng (utf-8, iso-8859-1),tiêu đề, tóm tắt trang, + Thẻ head bị lược bỏ ta không cần mô tả trang + Thẻ body chứa tất nội dung thật trang web (bắt buộc phải có) - Thẻ h + Thẻ heading dùng để tạo tiêu đề, đầu đề cho trang web Thẻ heading dùng để đánh dấu đoạn text mang ý nghĩa quan trọng tiêu đề viết, mục lục dùng để in đậm văn + Có thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6 Theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất) Hầu hết trình duyệt hiển thị thẻ heading tô đậm sử dụng font lớn bình thường h1 lớn đậm h6 lớn đậm - Thẻ p + Thẻ p dùng để đánh dấu đoạn văn (paragraph) + Trình duyệt tự động thêm dịng trống trước sau đoạn văn - Thẻ br + Thẻ br dùng để ngắt dòng (xuống hàng) để bắt đầu đoạn văn + Thẻ br ngắt dòng nơi xuất + Thẻ br thẻ rỗng (nó khơng có thẻ đóng, thẻ mở) I.1.4 HTML Attributes - Canh heading My page • Giá trị align : + center : canh + left : canh trái + right : canh phải - Đặt màu màu chữ cho trang web : + bgcolor qui định màu nền, text qui định màu chữ + Màu chữ (red,yellow) số (Ví dụ #FF0000, #FFFF00 ) Hello World + Màu sắc bao gồm giá trị R (Red) G (Green ) B (Blue) + Giá trị thấp của R,G,B cao 255(FF) I.1.5 HTML Formats HTML cung cấp nhiều thẻ dùng để định dạng văn Có loại thẻ : – Thẻ định dạng vật lý : thẻ định trình duyệt phải hiển thị đoạn văn font to hay font nhỏ, đậm hay lợt, nghiêng hay bình thường – Thẻ định dạng logic : thẻ định cho trình duyệt biết loại nội dung đoạn văn Trình duyệt tự hiển thị theo cách I.1.6 HTML Entities HTML Entities dùng để hiển thị kí tự có ý nghĩa đặc biệt (, : gán nhãn (hoặc thích ảnh) cho hình ảnh trang web • : nhóm tập thành phần vào thành phần hợp lý • … II.1.4 Tổng quan HTML5 API - API (Application Programming Interfaces – giao diện lập trình ứng dụng): • Là cách tạo ứng dụng sửdụng thành phần dựng sẵn • Khơng áp dụng phát triển web mà với ngơn ngữ kịch • Mục đích API để chuẩn hóa chế làm việc đơn giản hóa nhiệm vụ lập trình phức tạp • Một số HTML5 API: Drag and Drop, Web storage, Microdata,và Geolocation - API Geolocation: • Gúp xác định vị trí địa lý trình duyệt web • Thông tin sử dụng để gửi dạng liệu liên quan dựa vị trí • Geolocation kích hoạt số trình duyệt đại - Web workers: • WebWorkers framework (nền tảng) giải vấn đềhiệu suất trình duyệt • Là mã kịch chạy luồng riêng biệt - Web storage: • Cải tiến cookiecủa trình duyệt • Cookie cơng nghệ b ịgiới hạn khó khăn cho nhà thiết kế để có thểsửdụng • Web storage nâng cấp mơ hình để cung cấp 19 không gian lưu trữ lớn cho ứng dụng web đại II.2 Làm việc với mã HTML5 - Cú pháp HTML5 mở: • Khơng phân biệt kiểu chữ in hoa, in thường Ví dụ : • Các phần tử khơng bắt buộc phải có thẻ đóng Ví dụ: • Khơng bắt buộc phải có dấu nháy kép cho thuộc tính Ví dụ : - Cấu trúc file mã HTML5 - Khai báo DOCTYPE: DOCTYPE sử dụng để kiểm tra hợp lệ tài liệu 20