Báo cáo tốt nghiệp tìm hiểu về HTML5, CSS3 và xây dựng ứng dụng giao diện web sử dụng slider

TRƯỜNG CAO ĐẲNG KINH TẾ-KỸ THUẬT KHOA CÔNG NGHIỆP KỸ THUẬT TRẦN NGỌC HOÀNG BÁO CÁO KẾT QUẢ ĐỀ TÀI/CHUYÊN ĐỀ THỰC TẬP TỐT NGHIỆP Tên đề tài/Chuyên đề: TÌM HIỂU VỀ HTML5, CSS3 VÀ XÂY DỰNG ỨNG DỤNG GIAO DIỆN WEB SỬ DỤNG SLIDER Hệ đào tạo : Cao đẳng chính quy Chuyên ngành : Công Nghệ Thông Tin Khóa học : 2013 – 2014 TRƯỜNG CAO ĐẲNG KINH TẾ-KỸ THUẬT KHOA CÔNG NGHIỆP KỸ THUẬT TRẦN NGỌC HOÀNG BÁO CÁO KẾT QUẢ ĐỀ TÀI/CHUYÊN ĐỀ THỰC TẬP TỐT NGHIỆP Tên đề tài/Chuyên đề: TÌM HIỂU VỀ HTML5, CSS3 VÀ XÂY DỰNG ỨNG DỤNG GIAO DIỆN WEB SỬ DỤNG SLIDER Giáo viên hướng dẫn: Nguyễn Thị Hạnh LỜI CẢM ƠN Để hoàn thành báo cáo bài thực tập chuyên ngành này, em xin chân thành cảm ơn các thầy cô trong trường Cao Đẳng Kinh Tế - Kỹ Thuật Thái Nguyên, đặc biệt các thầy cô trong Khoa Kỹ Thuật Công Nghiệp chuyên ngành Công Nghệ Thông Tin trong suốt thời gian qua đã trang bị kiến thức chuyên ngành cho em thực hiện được đề tài này. Em xin chân thành cám ơn Cô Nguyễn Thị Hạnh đã hướng dẫn và tận tình giúp đỡ, chỉ bảo em trong suốt thời gian thực hiện đề tài giúp em học hỏi thêm nhiều kinh nghiệm khi làm việc tự lập để em hoàn thành tốt đề tài này. Em cũng xin gửi lời cảm ơn đến gia đình, bạn bè luôn động viên giúp đỡ em trong suốt thời gian học tập và nghiên cứu, đóng góp những kinh nghiệm quý báu trong thời gian thực hiện đề tài này. Cuối cùng em xin chân thành cảm ơn các thầy cô và các bạn. Thái Nguyên, ngày 5 tháng 6 năm 2014 GVHD: Nguyễn Thị Hạnh Sinh viên thực hiện: Trần Ngọc Hoàng MỤC LỤC LỜI NÓI ĐẦU Error: Reference source not found CHƯƠNG 1: TỔNG QUAN VỀ HTML VÀ CSSError: Reference source not found 1. HTML Error: Reference source not found 1.1.1. Định nghĩa về HTML Error: Reference source not found 1.2.1. Thành phần của HTML: Error: Reference source not found 1.3.1. Cơ bản về các thẻ HTML: Error: Reference source not found 2. CSS 15 CHƯƠNG 2: NHỮNG ĐIỂM KHÁC VÀ NỔI BẬT CỦA HTML5 VÀ CSS3Error: Reference source not found 2.1. HTML5 20 2.2. CSS3 Error: Reference source not found Multiple background Error: Reference source not found Selectors 22 Resize 22 Font 22 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG SLIDER 24 3.1. Tạo HTML 25 3.2. Thêm hiệu ứng cho slider bằng CSS3 27 Kết luận và Hướng phát triển 36 Tài liệu tham khảo 37 MỞ ĐẦU Hiện nay, công nghệ dành cho thiết bị laptop, máy tính bảng, di động ngày càng phát triển. Nếu như trước đây, người dùng phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (laptop), điện thoại thông minh (smartphone) cùng rất nhiều trình duyệt khác (Firefox, Opera, Google Chrome …) người dùng có thể dễ dàng lướt “net” ở bất kỳ nơi đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn trên máy tính có thể xem trang web này rất tốt, nhưng trên điện thoại thông minh thì giao diện và cấu trúc trang bị xáo trộn. Hay có thể xem phim rất tốt với Google Chrome nhưng với opera, IE, Firefox thì không. Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet. HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có những tính năng ưu việt hơn. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn. HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn. Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Web dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash. Một số ví dụ về những gì người dùng có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript. Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 sẽ có nhiều hứa hẹn 1 trong lĩnh vực này. Đó là lý do em lựa chọn đề tài “TÌM HIỂU VỀ HTML5, CSS3 VÀ XÂY DỰNG ỨNG DỤNG GIAO DIỆN WEB SỬ DỤNG SLIDER” .Em xin chân thành cảm ơn các thầy, cô giáo Khoa Kỹ Thuật Công Nghiệp ( Bộ môn CNTT ) đã giảng dạy em bộ môn INTERNET & CÔNG NGHỆ WEB trong thời gian vừa qua. Đặc biệt là Cô giáo Nguyễn Thị Hạnh là giáo viên hướng dẫn trực tiếp, đã tận tình chỉ bảo em hoàn thành đề tài. CHƯƠNG 1: TỔNG QUAN VỀ HTML VÀ CSS 2 1.1. HTML 1.1.1. Định nghĩa về HTML HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các trang web. * Hyper Text Markup langue chính là HTML. * Nhiều người nhầm tưởng HTML là ngôn ngữ lập trình nhưng sự thực không phải như vậy, nó là một ngôn ngữ đánh dấu. * Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu. * Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML. 1.2.1. Thành phần của HTML - Các dạng thẻ HTML • Thẻ HTML dùng để viết lên những thành tố HTML. • Thẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn. • Những thẻ HTML thường có một cặp giống như <b> và </b>. • Thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc. • Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung. • Những thẻ HTML không phân biệt in hoa và viết thường, ví dụ dạng <b> và <B> đều như nhau. - Thành phần HTML Thành phần của HTML bắt đầu với thẻ: <b> Nội dung của nó là: web design resources Thành phần của HTML kết thúc với thẻ: </b> Mục đích của thẻ <b> là để xác định một thành phần của HTML phải được thể hiện dưới dạng in đậm. 3 Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết thúc </body>. Mục đích của thẻ <body> là xác định thành phần của HTML bao gồm nội dung của tài liệu. - Các thuộc tính của thẻ HTML Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung cấp thông tin về thành phần HTML của trang web. Tag này xác định thành phần thân của trang HTML: <body>. Với một thuộc tính thêm vào là bgcolor, có thể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như sau: <body bgcolor="red"> hoặc <body bgcolor="#E6E6E6"> (#E6E6E6 là giá trị hex của màu) Thẻ này sẽ xác định dạng bảng HTML:<table> với một thuộc tính đường viền (border), có thể báo cho trình duyệt biết rằng bảng sẽ không có đường viền: <table border="0"> Thuộc tính luôn luôn đi kèm một cặp như name/value: name="value"(tên="giá trị") thuộc tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML. Dấu ngoặc kép, "red" hoặc 'red' Giá trị thuộc tính nên được đặt trong dấu trích dẫn " và ". Kiểu ngoặc kép như vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng. Ví dụ trong một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thuộc tính đã mang dấu ngoặc kép rồi, thì việc sử dụng ngoặc đơn là cần thiết. Ví dụ: name='ban"tay"den' 1.3.1. Cơ bản về các thẻ HTML: Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và xuống dòng. Headings Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất. <h6> xác định heading nhỏ nhất. 4 <h1>Đây là heading</h1> <h2>Đây là heading</h2> HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading. Đoạn văn – paragraphs Paragraphs được định dạng bởi thẻ <p>. <p>Đây là đoạn văn</p> <p>Đây là một đoạn văn khác</p> HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading. Line Breaks - xuống dòng Thẻ <br> được sử dụng khi muốn kết thúc một dòng nhưng lại không muốn bắt đầu một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi viết nó. <p> Đây <br> là một đo <br> đoạn văn với thẻ xuống hàng </p> Thẻ <br> là một thẻ trống nó không cần thẻ đóng dạng </br>. Lời chú thích trong HTML Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML. Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Có thể sử dụng chú thích để giải thích về code, để sau này có phải quay lại chỉnh sửa gì thì cũng dễ nhớ hơn. <! Chú thích ở trong này > Cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần ở dấu lớn hơn. Các ký tự đặc biệt trong HTML Một vài ký tự tương tự như dấu nhỏ hơn < có một ý nghĩa đặc biệt trong HTML, và do đó không thể được sử dụng như là chữ được. Do vậy để hiển thị được dấu nhỏ hơn < trong HTML chúng ta phải sử dụng những ký tự đặc biệt. Bởi vì dấu < xác định điểm bắt đầu của một thẻ HTML. Nên nếu muốn trình duyệt hiển thị ký tự đó phải thêm và code của nó thêm những ký tự đặc biệt. Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và một dãy số và cuối cùng là dấu chấm phẩy ; 5 [...]... center; } CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG SLIDER Trong những năm gần đây, xu hướng sử dụng Slider khi thiết kế web ngày càng trở nên phổ biến Slider vừa giúp người dùng tiết kiệm diện tích, vừa tạo sự chuyên nghiệp cho website Việc sử dụng slider, với nội dung có thể là ảnh, video, audio,… để 24 làm tăng thêm tính sinh động cho trang web đang được ứng dụng rất nhiều trong hầu hết các thể loại website hiện nay... ứng cũng như chuyển động trong các trang web đã trở nên dễ dàng hơn bao giờ hết Trong bài này cách sử dụng HTML và CSS3 để tạo slider đơn giản như sau: Tạo slider cho website sử dụng HTML và CSS3 Đây là một Slider đơn giản sử dụng thẻ để ẩn hiện nội dung Tức là khi ấn vào một cột thì nội dung Slider mới hiện ra 25 Cảm ơn bạn . THUẬT KHOA CÔNG NGHIỆP KỸ THUẬT TRẦN NGỌC HOÀNG BÁO CÁO KẾT QUẢ ĐỀ TÀI/CHUYÊN ĐỀ THỰC TẬP TỐT NGHIỆP Tên đề tài/Chuyên đề: TÌM HIỂU VỀ HTML5, CSS3 VÀ XÂY DỰNG ỨNG DỤNG GIAO DIỆN WEB SỬ DỤNG SLIDER Hệ. THUẬT KHOA CÔNG NGHIỆP KỸ THUẬT TRẦN NGỌC HOÀNG BÁO CÁO KẾT QUẢ ĐỀ TÀI/CHUYÊN ĐỀ THỰC TẬP TỐT NGHIỆP Tên đề tài/Chuyên đề: TÌM HIỂU VỀ HTML5, CSS3 VÀ XÂY DỰNG ỨNG DỤNG GIAO DIỆN WEB SỬ DỤNG SLIDER Giáo. nguyên phong phú hơn. HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều.