Tài liệu Ngôn ngữ lập trình giao diện website: HTML, CSS, JS, jQuery, Bootstrap và tối ưu SEO giới thiệu đến các bạn những công việc thiết kế và triển khai giao diện Website, nội dung siêu dữ liệu, phần tử tiêu đề, trình bày văn bản,... Với các bạn chuyên ngành Công nghệ thông tin thì đây là tài liệu tham khảo hữu ích.
KIẾN THỨC CƠ BẢN VỀ NHỮNG NGÔN NGỮ GIAO DIỆN PHÍA MÁY KHÁCH Người xem (Person) Yêu cầu (Request) Truy cập “Lập trình không khó, quan trọng có ý tưởng, ý tưởng bất thành thiếu kiến thức kỹ năng.” Mai0214cs – Máy khách (Client) Màn hình (Desktop) Trình duyệt (Browser) Hiển thị giao diện tương tác người dùng Gửi yêu cầu nhận phản hổi Biên dịch thực thi tài liệu HTML, CSS, JS để tạo giao diện tương tác người dùng Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định (nadipage.com - webnadi.com - vneverestweb.com) Giữa năm 1993, Tim Berners-Lee - ngôn ngữ HTML 09/1995 Brendan Eich - ngôn ngữ LiveScript, sau chuyển thành Javascript Netscape 17/12/1996 Hakon Wium Lie - ngôn ngữ CSS 06/1999 CSS W3C 18/12/1997 HTML 4.0 W3C 08/1996 Jscript Microsoft 11/1996 ECMAScript ECMA Internet Explorer Mozilla 23/09/2002 Mozilla C++, Js, CSS, Rust, XUL, XBL 17/06/2015 ECMAScript 6.0 ECMA Phản hồi (Response) 28/10/2014 HTML 5.0 W3C 26/01/2000 XHTML 1.0 W3C 14/01/1997 HTML 3.2 W3C 24/11/1995 HTML 2.0 IETF Opera Opera Inc 04/1995 Opera C++ Nhận yêu cầu từ máy khách Xử lý kịch phía máy chủ, xuất tài liệu HTML, CSS, JS… trả phía máy khách 12/05/1998 CSS W3C 05/2005 Prototype Sam Stephénon Internet Explorer Thomas Reardon 16/08/1995 Microsoft C++ Máy chủ (Server) 26/08/2006 jQuery John Resig 27/05/2009 NodeJS Ryan Dahl 20/10/2010 AngulaJS Google 19/08/2011 Bootstrap Mark Otto & Jacob Thornton SƠ LƯỢC LỊCH SỬ HÌNH THÀNH VÀ PHÁT TRIỂN CỦA CÁC NGÔN NGỮ LẬP TRÌNH GIAO DIỆN WEBSITE VÀ SỰ RA ĐỜI CỦA CÁC TRÌNH DUYỆT WEB Safari Apple Inc 07/01/2003 Apple C++, Objective C UC Browser UC Inside, World in Hand 08/2004 UCWeb (Mobile) Google Chrome Google Inc 02/09/2008 Google C++ Cốc cốc Cốc cốc 14/05/2013 Cốc cốc C++, Hợp ngữ, Python, JS Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) ĐẠI CƯƠNG VỀ HTML Nội dung siêu liệu: nội dung thiết lập đặc điểm hành động nội dung lại tài liệu, mô tả mối quan hệ tài liệu với tài liệu khác khác, truyền tải dải thông tin link template style Nội dung tiêu đề: nội dung định nghĩa phần tiêu đề mục h2 Nội dung phân đoạn: nội dung tài liệu, meta abbr area b code ngôn ngữ đánh dấu siêu văn bản, dùng thẻ đoạn mã lệnh trình duyệt biết cách thức hiển thị thành phần trang web lên trình duyệt Cấu trúc trang HTML đơn giản Tiêu đề trang Nội dung trang HTML Nội dung thẻ bdo br dung nhúng: canvas math input meter s nội dung nhập từ nguồn khác vào tài liệu nội dung từ ngôn ngữ khác chèn vào tài liệu datelist date i mark Nội HTML (HyperText Markup Language): bdi data em map progress sup q ruby strong span time u var wbr audio frame a Nội dung mục: video svg kbd small Bố cục Website dfn ins output samp sub del img embed object label textarea nội dung dùng tập hợp nhóm phần tử khác lại nội dung dùng để định nghĩa thường đặt đầu cuối button keygent select form ul Nội dung tương tác: nội dung nhập từ nguồn khác vào tài liệu nội dung từ ngôn ngữ khác chèn vào tài liệu header table ol dl fieldset div figure address blockquote Thẻ đóng Thuộc tính Nội dung văn bản footer p aside article Cấu trúc phần tử div h5 noscript cite Tên thẻ h3 h6 script base Thẻ mở h1 nằm đoạn tài liệu title h4 nav section pre Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) NỘI DUNG SIÊU DỮ LIỆU Những thẻ nội dung siêu liệu thẻ sử dụng chủ yếu phần tử head tài liệu HTML Những nội dung không hiển thị trực tiếp giao diện đồ họa người dùng, mà sử dụng để thiết lập mô tả hay hành động nội dung lại tài liệu HTML, mô tả quan hệ tài liệu với tài liệu khác, truyền tải dải thông tin - Phần tử title dùng để đặt tiêu đề tên tài liệu Thông thường đoạn text mô tả tiêu đề trang hiển thị trạng thái trình duyệt Web Thiết kế Website - Phần tử base dùng để đường dẫn tài liệu Khi sử dụng phần tử bắt buộc sử dụng thuộc tính href target để đường dẫn website Các thuộc tính: href, target - Phần tử meta sử dụng thông thường với cặp kiểu, giá trị để mô tả thông tin trang hay cài đặt cấu hình hiển thị trang - Phần tử link dùng để liên kết tài nguyên khác vào trang, thông thường trang định kiểu CSS hay sử dụng để đưa vào trang Các thuộc tính: href, crossorigin, rel, media, hreflang, type, size, title PHẦN TỬ TIÊU ĐỀ Là phần định nghĩa tiêu đề mục, thông thường tài liệu HTML có phần tử h1 phần tử h2, h3, h4, h5, h6 khác không giới hạn số lượng h1 h2 h3 h4 h5 h6 A A A A A A - Phần tử script thường sử dụng để viết kịch động, hay khối liệu vào tài liệu HTML, mà thông dụng để gọi tập tin hay viết đoạn mã javascript alert(“Thông báo”); Các thuộc tính: src, type, charset, async, defer, crossorigin Trong thông thường thuộc tính async hay sử dụng để tải tập tin js không đồng vào trang - Phần tử noscript sử dụng hoạt động trình duyệt bạn không cho phép thực đoạn mã đưa phần tử script Trình duyệt bạn không hỗ trợ chạy Javascript - Phần tử template thường sử dụng để khai báo việc lồng ghép HTML nhân cách chèn liệu từ kịch script var data = [ { hovaten: 'Mai Đức Thạch', gioitinh: 'Nam', tuoi: 28 }, { hovaten: 'Trần Kim Duyên', gioitinh: 'Nữ', tuoi: 28 }, ]; var template = document.querySelector('#row'); for (var i = 0; i < data.length; i += 1) { var cat = data[i]; var clone = template.content.cloneNode(true); var cells = clone.querySelectorAll('span'); cells[0].textContent = cat.hovaten; cells[1].textContent = cat.gioitinh; cells[2].textContent = cat.tuoi; template.parentNode.appendChild(clone); } TRÌNH BÀY VĂN BẢN Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) XÂY DỰNG BỐ CỤC TRANG PHẦN TỬ ASIDE (trình bày nội dung sidebar trang) Phần tử aside sử dụng để trình bày phần trang mà nội dung có liên quan đến nội dung trang (hay nói cách khác nằm tách biệt với nội dung trang) Trong nhiều trang web, trình bày phần sidebar trang bao gồm trình đơn, quảng cáo, tin tức hay sản phẩm liên quan Ví dụ sau trình bày cách trình bày sidebar gồm modul danh mục sản phẩm tin tức mới: Danh mục sản phẩm Thời trang Nội thất Xu hướng thời trang 2016 Cập nhật Xu hướng thời trang năm 2016. Thời trang mùa xuân Xu hướng thời trang mùa xuân 2016. Chi tiết Thời trang mùa xuân Xu hướng thời trang mùa xuân 2016. Chi tiết PHẦN TỪ NAV (trình bày danh sách trình đơn) Phần tử nav dùng để xây dựng danh sách HTML thường sử dụng việc xây dựng trình đơn lựa chọn hay việc xây dựng trình diễn ảnh Khi sử dụng phần tử này, ta thường sử dụng kết hợp với phần tử danh sách Các phần tử danh sách kết hợp lồng hay kết hợp loại danh sách với Danh sách không thứ tự Danh sách có thứ tự Danh sách định nghĩa - Là danh sách liệt kê mục ký hiệu chấm tròn trước mục - Phần tử đánh dấu việc bắt đầu kết thúc danh sách - Phần tử có tác dụng thể việc bắt đầu kết thúc mục dấu chấm tròn Ta thay đổi dấu chấm tròn ký hiệu khác cách sử dụng thuộc tính type: square ■ disc ● circle ○ - danh sách mục theo thứ tự số thay đổi qua mục - Phần tử đánh dấu việc bắt đầu kết thúc danh sách - Phần tử có tác dụng thể việc bắt đầu kết thúc mục số thứ tự Thay ký tự thứ tự ký hiệu khác cách sử dụng thuộc tính type: A ABC a abc I I,II,III i i,ii,iii Để số n trở lên ta dùng - danh sách giống bảng từ vựng bảng giải thích thuật ngữ lùi vào - Phần tử đánh dấu bắt đầu kết thúc danh sách - Phần tử thuật ngữ cần định nghĩa - Phần tử thuật ngữ dùng để định nghĩa Trang chủ Giới thiệu Tin tức Liên hệ Trang chủ Tin tức Thời trang Xu hướng đại Thời trang Phong cách đại Gia dụng Tiện nghi hàng đầu PHẦN TỬ ARTICLE (trình bày nội dung trang) Phần tử article sử dụng để trình bày khối hoàn chỉnh tài liệu, trang, ứng dụng hay site nguyên tắc có tính độc lập tái sử dụng Trong trang web ta thường dùng việc trình bày nội dung chi tiết trang diễn đàn, tạp chí, báo, bình luận từ người dùng, tiện ích tương tác mục độc lập với nội dung Phần tử xác định thành phần trang (ngoại trừ phần đầu, phần cuối, trình đơn hay sidebar), cần sử dụng với số phần tử đánh dấu trang Ví dụ sau trình bày cách trình bày trang viết với bình luận viết đó: Xu hướng thiết kế web nay 3 ngày trước … Tại viết nội dung viết … Bình luận Đăng bởi: Trần Thái Hà 15 phút trước Rất tốt, viết giúp biết thêm nhiều điều! Đăng bởi: Phạm Thanh Hoa 15 phút trước Cảm ơn bạn nhiều chia sẻ này! PHẦN TỬ SECTION (trình bày danh sách thuộc mục) Phần tử section sử dụng để trình bày mục nhóm chung tài liệu hay ứng dụng Trên thực tế, ta thường sử dụng chúng để trình bày tin tức liên quan hay sản phẩm liên quan Khi trình bày phần này, ta thấy chủ đề mục xác định, nên ta sử dụng thẻ h1-h6 để đánh dấu tiêu đề mục phần tử section Ví dụ sau trình bày cách trình bày viết liên quan: Thời trang Cập nhật đầy đủ xu hướng thời trang đại, tốt Việt Nam nay … Nội dung chi tiết nói thời trang … Thời trang giới trẻ Giới trẻ thời theo đuổi phong cách thời trang trẻ trung, sôi động. Chi tiết Thời trang mùa hè Mùa hè mùa nóng năm, quần áo sáng màu lựa chọn. Chi tiết Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) PHẦN TỬ TABLE (trình bày bảng) PHẦN TỬ FORM (trình bày biểu mấu nhập liệu) Phần tử table sử dụng để trình bày bảng liệu tài liệu hay ứng dụng Trên thực tế, bảng sử dụng nhiều việc trình bày nội dung liệu trang danh sách quản trị phần nội dung trang chi tiết sản phẩm hay chi tiết tin tức Ví dụ sau trình bày cách trình bày bảng liệu: Phần tử form sử dụng để trình bày biểu mẫu tài liệu hay ứng dụng Trên thực tế, biểu sử dụng nhiều việc trình bày nội dung liệu trang quản trị phần nội dung trang liên hệ QUẢN LÝ SINH VIÊN IDHọ tên ĐiểmXếp loại Khóa A 1Trần Tiến Tài 7Khá 2Phạm Mạnh Khoa 8 Khóa B 3Trần Văn Hưng 5Trung bình 4Đỗ Đức Thành 10Giỏi TỔNG CỘNG7.5Khá - Phần tử form dùng để định nghĩa biểu mẫu Nó bao gồm thuộc tính: action xác định nơi giữ liệu biểu mẫu gửi method phương thức HTTP gửi liệu lên GET hay POST name đặt tên biểu mẫu Ngoài số thuộc tính khác như: target, enctype, accept, accept-charset - Phần tử input dùng phép người dùng nhập liệu vào Nó thường nằm phần tử form Nó bao gồm số thuộc tính thường dùng như: type Chọn kiểu nhập phần tử - Danh sách nút bấm: button submit reset image - Nhập vào tập tin: file - Nhập văn bản, số, ngày tháng …: text hidden search tel url email password date time number range color - Hộp kiểm lựa chọn từ danh sách: checkbox radio checked định phần tử chọn kiểu checkbox radio disabled không cho phép người dùng lựa chọn name tên phần tử input value giá trị phần tử Một số thuộc tính khác phần tử input: maxlength, minlength, size, readonly, required, multiple, pattern, min, max, step, list, placeholder - Phần tử select, datalist cho phép tạo hộp chọn sổ xuống Nó có thuộc tính: disabled Vô hiệu hóa việc lựa chọn Một số phần tử sử dụng để tạo bảng: - Phần tử table dùng để tạo bảng Thuộc tính border để xác định đường viền, thuộc tính cellpadding để xác định độ dày padding ô, thuộc tính cellspacing để xác định độ dày margin ô - Phần tử caption để tạo tiêu đề bảng - Phần tử tr dùng để tạo dòng Thuộc tính colspan để gộp ô cạnh dòng, thuộc tính rowspan để gộp ô cạnh cột - Phần tử thead để bao quanh dòng tiêu đề bảng, phần tử tfoot để bao quanh dòng tổng kết bảng Phần tử tbody để bao quanh dòng thân nội dung bảng - Phần tử th để tạo ô tiêu đề cột, phần tử td để tạo ô nội dung dòng Lưu ý: trang Web, không nên sử dụng bảng để tạo khung bố cục trang web, để tạo bố cục trang Web người ta thường dùng phần tử div, phần tử chức hiển thị, mà sử dụng gắn kèm class, id để tạo CSS xây dựng bố cục khung hiển thị trang web multiple Cho phép có nhiều lựa chọn lúc name Tên phần tử size Kích cỡ số tùy chọn phần tử Trong phần tử có phần tử là: + Phần tử optgroup cho phép nhóm lựa chọn vào kiểu + Phần tử option dùng để định nghĩa tùy chọn - Ngoài ra, để tạo biểu mẫu, ta sử dụng số phần tử khác như: định nghĩa biểu mẫu cho phép nhập nhiều dòng Nó có thuộc tinhs: cols Chiều rộng phần tử rows Số dòng hiển thị nhập disabled Vô hiệu hóa việc nhập phần tử name tên phần tử readonly cho phép đọc tạo nhãn cho phần tử tạo khung bao quanh biểu mẫu Tạo tiêu đề cho phần tử tạo nút button Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) SỬ DỤNG LIÊN KẾT VÀ HÌNH ẢNH TRONG HTML Phần tử Siêu liên kết a phần tử bên tài liệu liên kết đến vị trí xác định tài liệu liên kết đến trang hoàn toàn khác Khi ta click chuột vào siêu liên kết, nhảy đến vị trí mà liên kết đến Siêu liên kết có loại: Liên kết trong: liên kết đến phần tài liệu website Liên kết ngoài: liên kết đến trang site khác Để tạo siêu liên kết, cần xác định hai thành phần: Địa đầy đủ URL file kết nối Điểm nóng cung cấp cho liên kết Sử dụng siêu liên kết: Phần tử a sử dụng để xác định văn hay hình ảnh dùng làm siêu liên kết tài liệu HTML Thuộc tính href (tham chiếu siêu văn bản) dùng để địa chỉ, URL tài liệu hay file liên kết Hypertext Trong đó: Protocol: giao thức sử dụng Ta có số loại giao thức http (truyền siêu văn bản); telnet (mở phiên telnet); gopher (tìm kiếm file); ftp (giao thức truyền file); mailto (gửi thư điện tử) Host.domain: Địa Internet máy chủ Port: Cổng phục vụ máy chủ đích path/filename: Đường dẫn tới file Hypertext: Văn hay hình ảnh mà người dùng cần click vào để kích hoạt liên kết Ngoài phần tử a số thuộc tính khác như: coords xác định tọa độ liên kết title tiêu đề liên kết hreflang định ngôn ngữ tài liệu liên quan name định tên neo liên kết đến điểm xác định trang rel xác định mối quan hệ tài liệu hành tài liệu liên kết rev xác định mối quan hệ tài liệu liên kết tài liệu định hình dạng liên kết Nó nhận giá trị default (mặc định), rect (hình shape chữ nhật), circle (hình tròn), poly (hình đa giác) target định nơi để mở tài liệu liên kết Nó nhận giá trị: _blank _parent _self _top framename Để hiển thị hình ảnh trang, ta dùng phần tử img, kèm theo thuộc tính src để đường dẫn hình ảnh alt để mô tả hình ảnh ỨNG DỤNG CACHE Ứng dụng Cache lưu trữ web phía máy khách, điều có nghĩa ứng dụng web tự động lưu trữ truy cập mà không cần kết nối với internet Điều tiện lợi người dùng muốn truy cập lại web họ offline, nguồn tài liệu lưu trữ tải nhanh so với lấy từ máy chủ về, góp phần giảm tải xử lý cho máy chủ Nội dung tập tin liệu Mỗi bạn cập nhật tập tin máy chủ, bạn cần sửa đổi tên tập tin appcache để máy khách cập nhật lại phiên trang bạn Lưu ý: kích thước lưu trữ liệu cache trình duyệt khác (thông thường giới hạn khoảng 5MB trang) Liên kết văn Liên kết đến tài liệu khác - Giả sử ta có hai tài liệu đĩa cứng cục doc1.html doc2.html Ta tạo liên kết từ doc1 sang doc2 sau: Tới doc2 - Khi tới tài liệu khác ta nên cung cấp đường dẫn để quay lại - Lưu ý: file thư mục ta dùng đường dẫn tương đối, khác thư mục, ta dùng đường dẫn tuyệt đối Sử dụng email điện thoại - Liên kết đến ứng dụng gửi email: mai0214cs@gmail.com - Liên kết đến ứng dụng gọi điện skype: 0987.288.940 Liên kết đến điễm xác định tài liệu - Khi click vào đề tài (Topic name) chi tiết (marker) môt phần khác tài liệu hiển thị Cú pháp: Chủ đề Tại điểm cần liên kết đến ta đặt: Nội dung Liên kết đến điểm xác định tài liệu khác - Khi click vào đề tài (Topic name) chi tiết (marker) môt phần khác tài liệu khác hiển thị Cú pháp: Chủ đề Tại điểm cần liên kết đến ta đặt trang doc2: Nội dung Bản đồ hình ảnh: hình ảnh vùng khác hoạt động liên kết HTML cung cấp phần tử để tạo đồ hình ảnh - Phần tử xác định đồ hình ảnh Nó cung cấp thuộc tính name để rõ tên đồ hình ảnh - Phần tử rõ tọa độ khu vực bên hình ảnh hoạt động siêu liên kết hình dạng đồ hình ảnh Nó có thuộc tính: alt rõ văn thay đồ hình ảnh không xuất href rõ url trang cần liên kết đến đồ ảnh shape hình dạng chọn Nó nhận giá trị: default circle mặc định rect poly hình chữ nhật coords hình tròn hình đa giác tọa độ khu vực bấm, phụ thuộc vào hình dạng cho đồ hình ảnh center_x, center_y, radius Hình tròn left_x, top_y, right_x, Hình chữ nhật bottom_y tùy chọn Đa giác target nơi liên kết mở - Phần tử : chọn ảnh làm đồ ảnh Nó gồm thuộc tính: src đường dẫn đến hình ảnh alt văn thay hình ảnh không xuất usermap nói đến tên đồ hình ảnh align canh lề cho hình ảnh border chiều rộng đường viền bao quanh hình ảnh width xác định chiều rộng hình ảnh height xác định chiều cao hình ảnh hspace xác định khoảng trắng bên phải bên trái hình ảnh vspace xác định khoảng trắng bên bên hình ảnh ismap định kết nối đến hình ảnh đồ hình ảnh phía máy chủ Nó nhận giá trị ismap longdesc định url hình ành chứa mô tả hình ảnh Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) NỘI DUNG NHÚNG CHÈN VIDEO VÀO TÀI LIỆU HTML Để chèn video vào tài liệu HTML, ta sử dụng phần tử video Kiểu định dạng video hỗ trợ HTML5 mp4 video/mp4 ogg video/ogg webm video/webm Thuộc tính: autoload, autobuffer, controls, height, width, loop, preload, poster, src Chơi/ Dừng Lớn Nhỏ Bình thường var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused){ myVideo.play();} else{ myVideo.pause();} } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } CHÈN ÂM THANH VÀO TÀI LIỆU HTML Để chèn video vào tài liệu HTML, ta sử dụng phần tử audio Kiểu định dạng âm hỗ trợ HTML5 mp3 audio/mpeg ogg audio/ogg wav audio/wav Thuộc tính: autoplay, autobuffer, controls, loop, preload, src Cả phần tử audio video kích hoạt kiện sau: about,canplay, ended, error, loadeddata, loadstart, pause, play, progress, retachange, seeking, seepend, volumechange, waiting CHÈN ĐỐI TƯỢNG HTML, FLASH… VÀO TÀI LIỆU HTML Để chèn video vào tài liệu HTML, ta sử dụng phần tử object embed, iframe CHÈN ĐỒ HỌA AVG VÀO TÀI LIỆU HTML Phần tử svg dùng để chèn hình ảnh đồ họa vào tài liệu HTML Để tạo hình vẽ phần tử svg, ta sử dụng thuộc tính định dạng CSS chúng mà không cần sử dụng javascript Hình chữ nhật Hình tròn Hình elip Đường thẳng Đường gấp khúc Đa giác Đoạn Văn Nét vẽ I love SVG ry="30" ry="20" CHÈN ĐỒ CÔNG THỨC TOÁN MATH VÀO TÀI LIỆU HTML Phần tử math dùng để chèn công thức toán vào tài liệu HTML A= x y z w CHÈN ĐỒ HỌA CANVAS Phần tử canvas dùng để chèn hình ảnh đồ họa vào tài liệu HTML, hình vẽ vẽ Javascript, thường sử dụng để thiết kế game HTML THUỘC TÍNH CỦA PHẦN TỬ CÁC THUỘC TÍNH CƠ BẢN CỦA HTML Các thuộc tính HTML áp dụng cho hầu hết tất phần tử HTML: - Thuộc tính cốt lõi: Áp dụng cho hầu hết phần tử class Chỉ định nhiều classname cho phần tử, sử dụng nhiều CSS hay jQuery id Chỉ định id cho phần tử style Chỉ định thuộc tính CSS áp dụng cho phần tử title Chỉ định thông tin thêm phần tử Kịch chạy quay lại tài liệu onresize onmouseover Kịch chạy trỏ chuột di chuyển phần tử Kịch chạy thay đổi kích cỡ cửa sổ onmouseup Kich thực ta nhả chuột onstorage Kịch chạy khu lưu trữ web cập nhật onmousewheel Kịch chayj chuột di chuyển onscroll Kịch chạy thao tác với cuộn onundo Kịch chạy quay lại tài liệu onunload Kịch chạy người dùng rời khỏi tài liệu Sự kiện media: xảy ta kích hoạt loại đa phương tiện video, hình ảnh, âm thanh, đối tượng Sự kiện form: Sự kiện kích hoạt ta tác động vào form HTML Kịch chạy phần tử tiêu điểm onchange Kịch chạy thay đổi phần tử oncontextmenu Kịch chạy kích hoạt trình đơn onfocus Kịch thực phần tử nhận tiêu điểm onformchange Kịch thực thay đổi form onforminput Kịch thực truyền liệu vào form oninput Kịch chạy truyền liệu vào phần tử oninvalid Kịch chạy phần từ không hợp lệ onselect Kịch chạy phần tử chọn Chỉ định thứ tự tab vào phần tử onsubmit Kịch chạy biểu mẫu gửi THUỘC TÍNH SỰ KIỆN Sự kiện bàn phím: sực kiện kích hoạt ta sử dụng bàn phím Chỉ định ngôn ngữ hiển thị nội dung phần tử Chỉ định ngôn ngữ hiển thị nội dung phần tử (đối với tài liệu XHTML) - Thuộc tính bàn phím: accesskey Chỉ định phím tắt để kích hoạt, tiêu điểm vào phần tử xml:lang tabindex Kịch chạy lịch sử cửa sổ thay đổi onredo onblur data-*, item-* Các thuộc tính xây dựng metadata liệu - Thuộc tính ngôn ngữ: Áp dụng cho hầu hết phần tử: dir Chỉ định hướng hiển thị văn cho phần tử Có giá trị: ltr: phải qua trái; rtl: trái qua phải lang onpopstate Khi người dùng truy cập vào trang web bạn, họ làm số việc nhấp chuột vào văn bản, hình ảnh, liên kết hay di chuyển qua đối tượng Đây ví dụ mà JavaScript gọi kiện Chúng ta viết trình sử lý kiện ngôn ngữ JavaScript định xử lý kiện thuộc tính Sự kiện Window: kiện kích hoạt cho đối tượng window (áp dụng cho thẻ body) onkeydown Kịch chạy phím nhấn xuống onkeypress Kịch thực phím nhấn xuống thả onkeyup Kịch thực phím thả Sự kiện chuột: kiện thực gây chuột onabort Kịch chạy hủy bỏ oncanplay Kịch chạy tập tin sẵn sàng để bắt đầu chơi oncanplaythrough Kịch chạy tập tin cáo thể chơi hết đến cuối dừng mà không cần bấm dừng ondurationchange Kịch chạy thay đổi chiều dài media onemptied Kịch chạy có trường hợp xấu xảy tập tin bất ngờ biến (như mmất kết nối) onended Kịch chạy media chạy đến chỗ kết thúc (như xuất mẩu tin thông báo cảm ơn lắng nghe.) onerror Kịch chạy có lỗi xảy tập tin tải onloadeddata Kịch xảy media tải onloadedmetadata Kịch chạy liệu meta (như kích thước, thời gian) tải onloadstart Kịch chạy tập tin bắt đầu load trước hoàn thành onpause Kịch chạy media tạm dừng người sử dụng hay lập trình onplay Kịch chạy media sẵn sàng để bắt đầu chơi onplaying Kịch bannr chạy media thực bắt đầu chơi onprogress Kịch chạy trình duyệt nhận liệu media onratechange Kịch chạy lần thay đổi tỷ lệ phát (chạy nhanh hay chậm hơn) onreadystatechange Kịch chạy lần thay đổi trạng thái sẵn sàng onseeked Kịch chạy thuộc tính tìm kiếm thiết lập sai để tìm kiếm kết thúc onclick Kịch chạy click chuột ondblclick Kịch chạy click đúp chuột ondrag Kịch chạy phần tử kéo ondragend Kịch chạy cuối hành động kéo ondragenter Kịch chạy phần tử kéo đến mục tiêu thả hợp lệ onseeking Kịch chạy thuộc tính tìm kiếm hoạt động truevà việc tìm kiếm hoạt động onafterprint Kịch chạy sau tài liệu in onbeforeprint Kịch chạy trước tài liệu in onbeforeonload Kịch chạy trước tải tài liệu onblur Kịch chạy cửa sổ tiêu điểm onerror Kịch chạy có lỗi xảy onfocus Kịch chạy cửa sổ nhận tiêu điểm ondragleave Kịch chạy phần tử di chuyển đến mục tiêu hợp lệ onstalled Kịch chạy trình duyệt nhận liệu từ media lý onhaschange Kịch chạy thay đổi tài liệu ondragover onsuspend onload Kịch chạy tài liệu tải Kịch chạy phần tử kéo bênn mục tiêu hợp lệ onmessage Kịch kích hoạt tin nhắn kích hoạt ondragstart Kịch chạy bắt đầu kéo Kịch chạy lấy liệu mediađược dừng lại trước nạp hoàn toàn lý Kịch chạy tài liệu offline ondrop Kịch chạy phần tử kéo ontimeupdate onoffline ononline Kịch chạy tài liệu trở thành online onmousedown Kịch chạy nút chuột nhấn Kịch chạy vị trí chơi thay đổi (khi người dùng muốn chơi đoạn sau hay chạy lại đoạn trước) onpagehide Kịch chạy cửa sổ ẩn onmousemove Kịch chạy trỏ chuột di chuyển onvolumechange Kịch chạy âm thay đổi (bao gồm việc tắt tiếng) onpageshow Kịch chạy cửa sổ viếng thăm onmouseout Kịch chạy trỏ chuột di chuyển khỏi phần tử onwaiting Kịch chạy media tạm dừng tiếp tục săp tới (như tạm dừng để tải thêm liệu) Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) ĐẠI CƯƠNG VỀ CSS p{ float: left; padding:5px; border: 1px solid #ccc; CSS (Cascading Style Sheets): ngôn ngữ định kiểu xếp tầng, qui định qui tắc định dạng, hiển thị nội dung phần tử tài liệu HTML Bộ chọn: tên phần tử áp dụng định kiểu, có nhiều phần tử áp dụng chung định kiểu chúng phân cách dấu phẩy (,) Bộ định kiểu bên ngoài: CSS viết tách thành tập tin riêng (đuôi css) gọi vào tập tin HTML Nội dung tập tin style.css } Bộ định kiểu: danh sách cách thuộc tính, định kiểu hiển thị cho danh sách chọn Nội dung tập tin index.html Định kiểu Định kiểu div { color: red; border:1px solid #ccc; } Thuộc tính Giá trị Thuộc tính Giá trị Hiện tại, phiên CSS3, số thuộc tính CSS áp dụng kèm theo tiền tố phân biệt trình duyệt: -ms: trình duyệt IE -moz: trình duyệt Firefox -webkit-: hiển trình duyệt Chrome, Opera, Safari [...]... bạn bắt tay vào viết Website của mình và nó liên cáo sử dụng Javascript - không được công cụ tìm kiếm khuyến khích + Hạn chế sử dụng Javascript và CSS trong nội dung trang Web quan đến vấn đề bảo mật, tốc độ tải Web Hosting mà bạn lựa chọn phải đảm bảo có hỗ trợ Công nghệ và ngôn Bạn nên gọi nó từ một tập tin bên ngoài tập tin HTML, và được đặt ở ngữ lập trình Web và các tính năng lập trình khác mà... đúng cách và cuối cùng không lập chỉ mục đúng ý bạn, dẫn đến một thứ hạng SEO thấp Nội dung thực tế của một trang có mật độ từ khóa khoảng 10%, và trong khoảng 200 từ Một vài chỉ dẫn khi thiết kế bố cục và giao diện một trang web: + Bạn cần có nội dung văn bản nhiều hơn các phần tử HTML + Không sử dụng Frame + Không sử dụng quảng cáo nếu có thể Bởi vì hầu hết các quảng Công nghệ và ngôn ngữ lập trinh... setCookie("username", user, 30); } } } checkCookie(); LƯU TRỮ CỤC BỘ Với lưu trữ cục bộ, ứng dụng web có thể lưu dữ liệu cục bộ trên trình duyệt của người dùng So với sử dụng cookie, lưu trữ cục bộ là bảo mật hươn và lượng lưu trữ lớn hơn Lưu trữ cục bộ cung cấp 2 đối tượng để lưu trữ dữ liệu trên máy khách - Đối tượng localStorage lưu trữ dữ liệu lâu dài trên máy khách, và không bị mất từ ngày này quan ngày khác... (nadipage.com - webnadi.com - vneverestweb.com) Tối ưu khả năng chuyển đổi Trình tự tiến hành SEO một website Nội dung tiếp thị (Content Marketting) ( CRO Conversion Rate Optimization - Loại hình Website - Tên miền + Tổ chức tập tin - Hosting + Công nghệ và ngôn ngữ lập trình Web Tăng lượng truy cập (Traffic) > Thương hiệu Web (brand) SEO Onpage) Chia sẻ liên kết (SEO OffPage) Mức độ quan tâm của người xem... "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> LƯỚI BOOTSTRAP Hệ thống lưới được sử dụng để tạo lên bố cục của trang web thông qua các hang và các cột do bạn tạo ra Trong Bootstrap cho phép hỗ trợ chiều ngang 12 cột trên trang Khi bạn xây dựng bố cục dựa trên hệ thống lưới Bootstrap, bạn cần lưu ý một số điểm sau: - Các hàng phải... 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com) LOẠI HÌNH – HOSTING – DOMAIN – CÔNG NGHỆ SEO ONPAGE 1 Bố cục - giao diện: - Lựa chọn loại hình Website: Trước khi thực hiện xây dựng một Website bán hang cho riêng mình, Bố cục và giao diện trang web tạo ra ấn tượng đầu tiên về trang trước hết bạn phải trả lời 3 câu hỏi chính: web của bạn Các trang web lạ mắt dễ... Định - (nadipage.com - webnadi.com - vneverestweb.com) KHÁI NIỆM BOOTSTRAP CÀI ĐẶT BOOTSTRAP Bootstrap là một framework giao diện người dùng miễn phí nhằm giúp bạn phát triển web responsive nhanh hơn và dễ dàng hơn Bạn có thể vào trang http://maxcdn.bootstrapcdn.com để download thư viện bootstrap về rồi tiến hành cài đặt như dưới đây