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 Chuyên ngành Khóa học : Cao đẳng quy : Công Nghệ Thông Tin : 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 thực tập chuyên ngành này, em xin chân thành cảm ơn thầy cô trường Cao Đẳng Kinh Tế - Kỹ Thuật Thái Nguyên, đặc biệt thầy cô Khoa Kỹ Thuật Công Nghiệp chuyên ngành Công Nghệ Thông Tin suốt thời gian qua trang bị kiến thức chuyên ngành cho em thực đề tài Em xin chân thành cám ơn Cô Nguyễn Thị Hạnh hướng dẫn tận tình giúp đỡ, bảo em suốt thời gian thực đề tài giúp em học hỏi thêm nhiều kinh nghiệm làm việc tự lập để em hoàn thành tốt đề tài Em xin gửi lời cảm ơn đến gia đình, bạn bè động viên giúp đỡ em suốt thời gian học tập nghiên cứu, đóng góp kinh nghiệm quý báu thời gian thực đề tài Cuối em xin chân thành cảm ơn thầy cô bạn Thái Nguyên, ngày tháng 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! Bookmark not defined CHƯƠNG 1: TỔNG QUAN VỀ HTML VÀ CSS HTML 1.1.1 Định nghĩa HTML 1.2.1 Thành phần HTML: 1.3.1 Cơ thẻ HTML: CSS 15 CHƯƠNG 2: NHỮNG ĐIỂM KHÁC VÀ NỔI BẬT CỦA HTML5 VÀ CSS3 19 2.1 HTML5 20 2.2 CSS3 21 Multiple background 21 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 CSS3 27 Kết luận 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 phát triển Nếu trước đây, người dùng 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 (laptop), điện thoại thông minh (smartphone) nhiều trình duyệt khác (Firefox, Opera, Google Chrome …) người dùng dễ dàng lướt “net” nơi đâ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 xem trang web tốt, điện thoại thông minh giao diện cấu trúc trang bị xáo trộn Hay xem phim tốt với Google Chrome với opera, IE, 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ột số ví dụ người dùng làm với HTML5, CSS3 hỗ trợ từ JavaScript Thiết kế Shack có số ví dụ hiệu ứng động CSS3 khác Mặc dù thay hoàn toà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 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 thầy, cô giáo Khoa Kỹ Thuật Công Nghiệp ( Bộ môn CNTT ) giảng dạy em môn INTERNET & CÔNG NGHỆ WEB thời gian vừa qua Đặc biệt Cô giáo Nguyễn Thị Hạnh giáo viên hướng dẫn trực tiếp, tận tình bảo em hoàn thành đề tài CHƯƠNG 1: TỔNG QUAN VỀ HTML VÀ CSS 1.1 HTML 1.1.1 Định nghĩa HTML HTML biết đến loại ngôn ngữ dùng để mô tả hiển thị trang web * Hyper Text Markup langue HTML * Nhiều người nhầm tưởng HTML ngôn ngữ lập trình thực vậy, ngôn ngữ đánh dấu * Một ngôn ngữ đánh dấu thẻ đánh dấu * Để miêu tả trang web ta cần đánh dấu thẻ HTML 1.2.1 Thành phần HTML - Các dạng thẻ HTML  Thẻ HTML dùng để viết lên thành tố HTML  Thẻ HTML bao quanh hai dấu lớn < > nhỏ  Những thẻ HTML thường có cặp giống  Thẻ thứ thẻ mở đầu thẻ thứ hai thẻ kết thúc  Dòng chữ hai thẻ bắt đầu kết thúc nội dung  Những thẻ HTML không phân biệt in hoa viết thường, ví dụ dạng - Thành phần HTML Thành phần HTML bắt đầu với thẻ: Nội dung là: web design resources Thành phần HTML kết thúc với thẻ: Mục đích thẻ để xác định thành phần HTML phải thể dạng in đậm Phần bắt đầu thẻ bắt đầu kết thúc thẻ kết thúc Mục đích thẻ xác định thành phần HTML bao gồm nội dung tài liệu - Các thuộc tính thẻ HTML Những thẻ HTML có thuộc tính riêng Những thuộc tính cung cấp thông tin thành phần HTML trang web Tag xác định thành phần thân trang HTML: Với thuộc tính thêm vào bgcolor, báo cho trình duyệt biết màu trang màu đỏ, giống sau: (#E6E6E6 giá trị hex màu) Thẻ xác định dạng bảng HTML: với thuộc tính đường viền (border), báo cho trình duyệt biết bảng đường viền: Thuộc tính luôn kèm cặp name/value: name="value"(tên="giá trị") thuộc tính luôn thêm vào thẻ mở đầu thành phần HTML Dấu ngoặc kép, "red" 'red' Giá trị thuộc tính nên đặt dấu trích dẫn " " Kiểu ngoặc kép phổ biến hơn, nhiên kiểu đơn ' ' dùng Ví dụ vài trường hợp đặc biệt hiếm, ví dụ giá trị thuộc tính mang dấu ngoặc kép rồi, việc sử dụng ngoặc đơn cần thiết Ví dụ: name='ban"tay"den' 1.3.1 Cơ thẻ HTML: Những thẻ quan trọng HTML thẻ xác định Heading, đoạn văn xuống dòng Headings Headings định dạng với hai thẻ đến xác định heading lớn xác định heading nhỏ Đây heading Đây heading HTML tự động thêm dòng trắng trước sau heading Đoạn văn – paragraphs Paragraphs định dạng thẻ

Đây đoạn văn

Đây đoạn văn khác

HTML tự động thêm dòng trắng trước sau heading Line Breaks - xuống dòng Thẻ sử dụng muốn kết thúc dòng lại không muốn bắt đầu đoạn văn khác Thẻ tạo lần xuống dòng viết

Đây đo đoạn văn với thẻ xuống hàng

Thẻ thẻ trống không cần thẻ đóng dạng Lời thích HTML Thẻ thích sử dụng để thêm lời thích mã nguồn HTML Một dòng thích bỏ qua trình duyệt Có thể sử dụng thích để giải thích code, để sau có phải quay lại chỉnh sửa dễ nhớ Cần dấu chấm than ! sau dấu nhỏ không cần dấu lớn Các ký tự đặc biệt HTML Một vài ký tự tương tự dấu nhỏ < có ý nghĩa đặc biệt HTML, sử dụng chữ Do để hiển thị dấu nhỏ < HTML phải sử dụng ký tự đặc biệt Bởi dấu < xác định điểm bắt đầu thẻ HTML Nên muốn trình duyệt hiển thị ký tự phải thêm code thêm ký tự đặc biệt Một ký tự đặc biệt có phần: Ký hiệu (&), tên ký tự dấu # dãy số cuối dấu chấm phẩy ; Để hiển thị dấu nhỏ HTML phải viết < < Cái hay việc sử dụng tên thay sử dụng số tên dễ nhớ nhiều Nhưng dở lại trình duyệt hỗ trợ tên này, hầu hết trình duyệt nhận dạng số Nên ý ký tự đặc biệt phân biệt chữ hoa chữ thường Ví dụ sau thực nghiệm với ký tự đặc biệt Xin Lưu ý ký tự có trình duyệt Internet Explorer Non-breaking space Ký tự dùng nhiều HTML có lẽ nbsp (non-breaking space) Thường HTML cắt bớt khoảng trống chữ Ví dụ viết 10 chỗ trống text HTML loại bỏ số Để thêm khoảng trống vào chữ phải sử dụng ký tự đặc biệt   Thẻ Anchor thuộc tính Href HTML sử dụng thẻ (anchor) để tạo đường liên kết đến tài liệu khác Thẻ anchor liên kết đến tài nguyên internet, chúng trang HTML, hình, file nhạc, phim …v.v Cú pháp để tạo thẻ anchor ở đây Thẻ sử dụng để tạo điểm neo liên kết đó, thuộc tính href sử dụng để tài liệu liên kết đến, chữ xuất hai tag < > hiển thị dạng siêu liên kết Thuộc tính đích đến Với thuộc tính đích đến, xác định liên kết đến tài liệu khác mở đâu Dòng code mở tài liệu liên kết cửa sổ trình duyệt Mời vào diễn đàn niemvui.net Thẻ anchor thuộc tính tên 24 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG SLIDER Trong năm gần đây, xu hướng sử dụng Slider thiết kế web ngày 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 chuyên nghiệp cho website Việc sử dụng slider, với nội dung ảnh, video, audio,… để làm tăng thêm tính sinh động cho trang web ứng dụng nhiều hầu hết thể loại website Có nhiều cách để người dùng tạo slider đẹp, nhiều hiệu ứng, đầy đủ chức Nhưng việc sử dụng plugin khác nhiều vô tình làm tăng dung lượng trang web, người dùng muốn tùy chỉnh chức khó khăn, phải dựa vào API có sẵn Với đời nhiều thuộc tính CSS3 việc tạo hiệu ứng chuyển động trang web trở nên dễ dàng hết Trong cách sử dụng HTML CSS3 để tạo slider đơn giản sau: Tạo slider cho website sử dụng HTML CSS3 25 Đây Slider đơn giản sử dụng thẻ để ẩn nội dung Tức ấn vào cột nội dung Slider Cách thức hoạt động slider 3.1 Tạo HTML

• 1 Hình ảnh 1 26

  Cảm ơn bạn

• 2 Hình ảnh 2

  Cảm ơn bạn

• 3 Hình ảnh 3

  Cảm ơn bạn

27 Đoạn code tạo loạt nội dung chưa dẹp mắt Sau chèn HTML 3.2 Thêm hiệu ứng cho Slider CSS3 Sau tạo HTML, thấy ảnh toàn nội dung Slider nằm cách lề trái khoảng, cần dịch chuyển chúng lại sát lề với đoạn code 28 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Kéo phần tử sát lề 29 Ẩn Radio Buttons Radio Buttons nút tròn 1,2,3… để lựa chọn mẫu slider không cần đến nên ẩn Ẩn Radio Buttons Để ẩn Radio Buttons dùng đoạn CSS3 này: /*FORM*/ input { position: absolute; top: -9999px; left: -9999px; } Làm đẹp Label Tiếp theo, ẩn Radio Buttons, cần làm đẹp cho Label đoạn CSS3 này: 30 label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px; overflow: hidden; background: #999; text-align: center; font: 14px/50px Helvetica, Verdana, sans-serif; -webkit-transition: width 1s ease, background 0.5s ease; -moz-transition: width 1s ease, background 0.5s ease; -o-transition: width 1s ease, background 0.5s ease; -ms-transition: width 1s ease, background 0.5s ease; transition: width 1s ease, background 0.5s ease; } 31 Nếu thành công này: Có thể thay #999 màu theo muốn Tiếp cần dịch chuyển lại Label cho hàng: 32 ul { list-style: none; } #rad2 + label { background: #888; -webkit-transition: width 1s ease, background 0.5s ease; -moz-transition: width 1s ease, background 0.5s ease; -o-transition: width 1s ease, background 0.5s ease; -ms-transition: width 1s ease, background 0.5s ease; transition: width 1s ease, background 0.5s ease; } label:hover, #rad2 + label:hover { background: #232323; color: #fff; cursor: pointer; } 33 Tiếp cần tạo hiệu ứng ẩn hiển nội dung Slider: /*SLIDES*/ accslide { display: block; height: 330px; width: 0px; padding: 10px 0; float: left; overflow: hidden; color: #333; background: #fff; font: 12px/1.5 Helvetica, Verdana, sans-serif; -webkit-transition: Vậy slider cho all 1s website ease; xong với số đoạn code HTML CSS Đây Sider cho website đơn giản Trong sử dụng slider cho website -moz-transition: all 1s ease; HTML CSS3 nên không đẹp cho lắm, sử dụng thêm Javascript allnhiều 1s ease; sẽ-o-transition: ấn tượng -ms-transition: all 1s ease; transition: all 1s ease; } accslide p, h2, img { width: 420px; padding-left: 10px; } 34 accslide img { margin-top: 10px; } input[type="radio"]:checked ~ accslide { width: 450px; } 35 Vậy hoàn thành xong slider cho website sử dụng HTML CSS3 đơn giản, với đầy đủ tính play, pause, navigation với nhiều hiệu ứng khác Trong sử dụng slider cho website HTML CSS3 nên không hoàn chỉnh cho lắm, sử dụng thêm Javascript ấn tượng nhiều 36 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận - Ứng dụng đáp ứng yêu cầu giai đoạn phát triển website - Ứng dụng kết hợp với thẻ HTML5 CSS3 Hướng phát triển Có thể tìm hiểu rộng thêm ứng dụng chức mà CSS3 HTML5 mang đến cho Như sau thời gian làm việc nghiêm túc giúp đỡ tận tình cô giáo Nguyễn Thị Hạnh hướng dẫn em hoàn thành đề tài Quá trình tìm hiểu nghiên cứu thực đề tài giúp em hiểu biết thêm nhiều kiến thức môn Công nghệ thông tin Do thời gian thực đề tài có giới hạn kiến thức em hạn hẹp nên tránh khỏi thiếu sót chưa giới thiệu, đưa ưu điểm, nhược điềm tiềm ẩn bên website Chính em mong nhận giúp đỡ, đóng góp ý kiến cô Nguyễn Thị Hạnh, giáo viên hướng dẫn trực tiếp thầy cô khoa bạn sinh viên để báo cáo em hoàn thiện có hội phát triển 37 TÀI LIỆU THAM KHẢO Quách Ngọc Ân (1992), "Nhìn lại hai năm phát triển lúa lai", Di truyền học ứng dụng, 98 (1), tr 10-16 Bộ Nông nghiệp & PTNT (1996), Báo cáo tổng kết năm (1992 - 1996) phát triển lúa lai, Hà Nội Nguyễn Hữu Đống, Đào Tanh Bằng, Lâm Quang Dụ, Phan Đức Trực (1997), Đột biến - Cơ sở lý luận ứng dụng, NXB Nông nghiệp, Hà Nội 38 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Ngày tháng năm 2014