Chào Mừng Bạn đến Với HTML5
F12 Test Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com III CẤU TRÚC HTML5 Giới Thiệu Cấu Trúc HTML5 HTML5 nhận trang web có cấu trúc, giống sách có cấu trúc tài liệu XML khác Nhìn chung, trang Web có nội dung (body), cộng với header, footer, tính khác HTML tạo thẻ để hỗ trợ yếu tố trang - để xác định phần nội dung trang - định nghĩa tiêu đề trang - xác định chân trang - dùng cho vùng điều hướng (menu, bar, ) - định nghĩa báo hay nội dung trang - định nghĩa thêm nội dung bên nội dung khác - định nghĩa hình ảnh thích viết Hình : Sự khác HTML5 phiên cũ Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Các Thẻ Mới Trong HTML5 Internet thay đổi nhiều từ HTML 4.01 trở thành chuẩn quốc tế Tuy nhiên ngày HTML 4.01 lỗi thời số thẻ sử dụng, Những thẻ xóa viết lại HTML5 Các thẻ HTML hoàn toàn Thẻ Mô tả Dùng cho nội dung bên text từ tin tức, blof, forum hay nguồn liệu Dùng đặt nội dung riêng từ nội dung mà đặt bên Nội dung riêng nên liên quan tới nội dung bao quanh Thể button, hay radiobutton, hay checkbox Mô tả chi tiết tài liệu hay phần tài liệu (document) Nhãn, hay tóm tắt, bên thẻ Dùng gom nhóm vùng nội dung riêng lẻ, video Nhãn vùng cấu hình Dùng cho phần footer document hay vùng, bao gồm tên tác giả, ngày document, thông tin liên hệ hay phần thông tin quyền Dùng cho phần giới thiệu tài liệu vùng, bao gồm phần điều hướng (thanh menu nằm ngang web) Dùng cho vùng tiêu đề, sử dụng đến , thể tiêu đề phụ vùng Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Đánh dấu cho text Dùng đo lường, sử dụng cho giá trị max, xác định Dùng cho vùng điều hướng (menu, bar, ) Trang thái làm việc Dùng cho thích ruby (ghi kiểu Trung Quốc hay kí tự khác) Giải thích thích ruby Hiển thị trình duyệt không hỗ trợ thẻ ruby Cho vùng document chapter, header, footer hay vùng document Định nghĩa ngày tháng & thời gian Xuống dòng Định nghĩa chỗ xuống dòng Thiết Kế Layout HTML5 a Thiết kế layout với HTML5 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Viết code www.nhatnghe.com header, nav, footer, article {display:block;} header{background-color:#099;} nav {float:left; width:20%;background-color:#9F0;} article {float:right; width:79%;background-color:#F9C;} footer {clear:both;background-color:#F90;} Header Nav 10 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Kết b Canvas Radial Gradient Gradien vùng tô đầy di chuyển từ màu sang màu khác, pha trộn màu nơi chúng giao Có hai kiểu gradien mà bạn tạo Canvas là: tuyến tính xuyên tâm Gradiant tuyến tính var grd=context.createLinearGradient(startX, startY, endX, endY); grd.addColorStop(offset, color); window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var fillColor = context.createLinearGradient(50,50, 150,50); fillColor.addColorStop(0.15,"red"); fillColor.addColorStop(0.35,"black"); fillColor.addColorStop(0.65,"green"); fillColor.addColorStop(0.87,"yellow"); context.fillStyle= fillColor; context.fillRect(50,50,100,100); Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 61 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com var fillColorText = context.createLinearGradient(300,50,600,50); fillColorText.addColorStop(0.2,"yellow"); fillColorText.addColorStop(0.4,"green"); fillColorText.addColorStop(0.6,"black"); fillColorText.addColorStop(0.8,"red"); context.fillStyle= fillColorText; context.font="20px verdana"; context.textBaseline="top"; context.fillText("Trung Tâm ĐÀo Tạo Mạng Máy Tính Nhát Nghệ!", 170,50); } Kết Gradiant xuyên tâm var grd=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); grd.addColorStop(offset, color); window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var fillColordiagonal = context.createLinearGradient(50,200, 100,450); fillColorRadial = context.createRadialGradient(450,300,0, 450,300,200); fillColorRadial.addColorStop(0, "red"); fillColorRadial.addColorStop(0.2, "black"); 62 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com fillColorRadial.addColorStop(0.4, "green"); fillColorRadial.addColorStop(0.7, "yellow"); context.fillStyle = fillColorRadial; context.rect(300,200,500,400); context.fill(); } Kết Một số thẻ HTML5 Chèn nhạc mp3 thay cho Flash Chèn video mp4 không cần dùng Flash Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 63 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Kiểm tra thuộc tính form html5 không dung Javascript Kiểm tra email Kiểm tra số nhập Kiểm tra URL 64 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Tham khảo thêm: http://w3schools.com/html5/ Làm việc với CSS3 Định nghĩa thẻ HTML5 block header, footer, section, aside, nav, article { display: block; } Style Introduction #intro { position: relative; margin-top: 66px; padding: 44px; background: #467612 url("images/intro_background.png") repeat-x; /* Them thuoc tinh (TT) trinh duyet vao TT background-size */ -webkit-background-size: 100%; /* Safari browsers */ -o-background-size: 100%; /* Opera browsers */ /* Them thuoc tinh (TT) trinh duyet vao TT border-radius */ -moz-border-radius: 22px; /* Firefox browsers */ -webkit-border-radius: 22px; /* Safari browsers */ } Tại id intro này, nhận thấy có thuộc tính là: background-size boder-radius Background-size: sử dụng để thiết lập kích cỡ hình so với box (ở intro), giãn nở theo độ rộng box Boder-radius: sử dụng để định nghĩa bán kính đường tròn góc bo Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 65 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com khung viền id intro, thiết lập thông số cho thuộc tính này, làm cho góc bo đường viền bạn trở nên tròn trịa Đây thuộc tính CSS3 (-moz, -webkit) để thông báo cho trình duyệt tương ứng với hiểu Vì thuộc tính CSS trình duyệt hỗ trợ, nên hầu hết thuộc tính CSS đểu phải thêm vào thuộc tính trình duyệt vào trước Style Content Sidebar #content { display: table; } #mainContent { display: table-cell; width: 620px; padding-right: 22px; } aside { display: table-cell; width: 300px; } Khu vực mainContent sidebar theo thiết kế nằm cạnh Thông thường theo truyền thống sử dụng thuộc tính float để định nghĩa nằm dòng, CSS3, sử dụng table Trong CSS 3, thuộc tính display có giá trị table dùng để hỗ trợ xử lý việc chia bảng, cột, ô dòng, chia dòng cột CSS dễ định hình cho bạn không quen với float Ở sử thiết lập display:table 66 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com display:table-cell có nghĩa định nghĩa#content bảng, #mainContent aside tương ứng ô nằm dòng, thuộc bảng #content column-count: số dòng cần chia column-gap: khoảng cách cột HTMLLorem ipsum dolor sit amet
Pellentesque ut sapien arcu
Vivamus vitae nulla dolor
CSS blogPost div { /* Them thuoc tinh (TT) trinh duyet vao TT Column-count */ -moz-column-count: 2; -webkit-column-count: 2; /* Them thuoc tinh (TT) trinh duyet vao TT Column-gap */ -moz-column-gap: 22px; -webkit-column-gap: 22px; } Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 67 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Thực hành HTML5 & CSS3 Bo góc hình web với CSS3 Trong thiết kế web, đặc biệt trang bán hàng việc trình bày sản phẩm ấn tượng thu hút khách hàng chọn mua sản phẩm Các bạn làm bật sản phẩm nhiều cách khác việc trình bày hình ảnh có bo góc hay chọn lựa, bạn thêm hiệu ứng bóng đổ ấn tượng Có cách để bo góc cho ảnh web: Cách 1: Sử dụng photoshop để thiết kế hình, cách hay chổ phù hợp cho trình duyệt sử dụng phổ biến tính đến thời điểm viết viết (tháng 06/2012) Tuy nhiên cách làm nhiều thời gian bạn Cách 2: Sử dụng hoàn toàn code CSS3, với cách tiết kiệm thời gian cho bạn Tuy nhiện thể trình duyệt (IE 10.0, firefox, Chrome,…), bạn đừng bận tâm trình duyệt cập nhật liên tục hoàn toàn miễn phí Yên tâm sử dụng nha bạn Trong viết minh họa với bạn cách trình bày sản phẩm cho trang web bán hàng (bán hoa tươi) với hình ảnh bo góc bóng đổ chuyên nghiệp với CSS3 Bước 1: Trước thực bạn download source thực hành đây, giải nén folder Desktop (hoặc đâu bạn muốn) tạo site dreamweaver, minh họa bảng Dreamweaver CS5.5 Bạn double click vào file spmoi.html để mở sau: Ở trình bày sẵn cho bạn khung để chứa tất sản phẩm, trình bày sản phẩm với hình minh họa, tên sản phẩm có class=tensp, giá sản phẩm có class=giasp, xem chế độ thiết kế bạn thấy thành phần chưa định dạng sau: 68 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Bước 2: Công việc bạn copy > Paste thành nhiều sản phẩm (6,9, 12, tùy bạn) đồng thời thay đổi hình, tên sản phẩm, giá tương ứng copy thêm sản phẩm để minh họa Nếu chuyển sang hình thiết kế bạn đoán sản phẩm trình bày phải không, dĩ nhiên chúng chưa định dạng nên cột từ xuống xem chẳng giống trang web tí Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 69 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Bước 3: Bây lúc bạn định dạng cho sản phẩm CSS, bạn phải ý đến tên đối tượng nha: 70 - div chứa tất sản phẩm: class=spmoi - Hình sản phẩm: class=sp - Tên sản phẩm: class=tensp - Giá sản phẩm: class=giasp Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Trước hết quy định khung chứa tất sản phẩm có chiều rộng: 450px (.spmoi), div chứa sản phẩm có chiều rộng: 150px (.spmoi div) canh trái để sản phẩm xếp theo dòng cột Tương tự định cho tên sản phẩm in đậm, size:18px, màu text xanh đậm ( tensp), tương tự bạn định dạng cho giá sản phẩm Bước 4: Giờ đến lúc bo góc tạo bóng đổ cho hình sản phẩm Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 71 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Bạn thêm code sau để bo góc cho sản phẩm: Trong đó: border-radius: 10px; > bo góc tròn 10px cho góc hình border: solid 1px #666666; > định kiểu đường viền, size, màu cho đường viền box-shadow: 2px 2px 2px #FF0000; > Các tham số theo thứ tự: Vị trí bóng đổ theo trục x, y, size tham số cuối màu bóng đổ Bây bạn nhấn F12 để xem thành củ trình duyệt (nhớ xem trình duyệt Firefox, Chrome, Opera IE version nha) Ấn tượng không bạn, bắt tay làm thử biết thật đam mê!@? 72 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Tạo chuyển sắc cho web với CSS3 mà không dùng hình Để tạo chuyển sắc cho web bạn có cách thực hiện: Cách 1: Theo phương pháp cổ điển bạn sử dụng hình vẽ từ photoshop kết hợp với CSS, cách thời gian hay chổ xem trình duyệt Cách 2: Dùng code CSS3, cách đở thời gian (Copy code > Paste xong) web duyệt nhanh hơn, nhiên chạy tốt trình duyệt mới, trình duyệt cũ bó tay Với bạn làm web tin bạn biết cách hôm giới thiệu với bạn cách tạo chuyển sắc cho web mà không cần dùng hình (Cách 2), cách giúp web bạn chạy nhanh hơn, làm đơn giản (Copy code > paste) Tuy nhiên không hỗ trợ trình duyệt cũ đặc biệt IE phải từ Version 10.0+, Firefox, Opera, Chrome OK Nào ta bắt đầu nha: Bước 1: Tạo file *.html phần mềm soạn thảo web bạn muốn, dùng Dreamweaver CS5 Ở phần code CSS bạn copy > Paste đoạn code sau vào thẻ … Phần nội dung web bạn tự lo nha, muốn viết Sau có nội dung bạn nhấn F12 để xem trình duyệt (nhớ dùng Firefox để thử nghiệm nha, dùng IE bó tay nha bạn) Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 73 TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Quá đẹp không nào, chẳng cần dùng hình Trong màu chuyển sắc có tham số: - top: kiểu tô linear thẳng từ xuống (Có thể sử dụng: left, right, bottom) - #F9F: màu - #FFF: màu - repeat-x: màu chuyển sắc lặp theo trục x Bước 2: Thay đổi tham số để có kiểu chuyển sắc ý: Tô chuyển sắc từ trái sang phải, repeat-y 74 Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ TRUNG TÂM ĐÀO TẠO MẠNG MÁY TÍNH NHẤT NGHỆ ĐỐI TÁC ĐÀO TẠO CỦA MICROSOFT TẠI VIỆT NAM 105 Bà Huyện Thanh Quan, Q3, TP HCM Tel: 3.9322.735 – 0913.735.906 Fax: 3.9322.734 www.nhatnghe.com Tô chuyển sắc từ trái sang phải, repeat-y Tô chuyển sắc kiểu tròn từ tâm Các bạn thử nghiệm nha, đơn giản@!# Phiên Bản Thử Nghiệm – Lưu Hành Nội Bộ 75