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) Máy chủ (Server) “Lập trình không khó, quan trọng là có ý tưởng, ý tưởng bất thành nếu thiếu kiến thức và kỹ năng.” -- Mai0214cs – (Nguồn tài liệu: http://vneverestweb.com/lap-trinh-giao-dien.html) Giữa năm 1993, 09/1995 17/12/1996 Tim Berners-Lee - Brendan Eich - Hakon Wium Lie -ngôn ngữ HTML ngôn ngữ LiveScript, ngôn ngữ CSS sau chuyển thành Javascript Netscape Truy Máy khách cập (Client) Màn hình Trình duyệt (Desktop) (Browser) Gửi yêu cầu và nhận phản hổi. Biên dịch Hiển thị giao diện và thực,thi các tài liệu tạo giao diện tương tác người dùng Nhận yêu cầu từ máy khách. Xử lý kịch bản phía máy chủ, xuất tài liệu HTML, CSS, JS… trả về phía máy khách. Phản hồi (Response) 17/06/2015 ECMAScript 6.0 ECMA 28/10/2014 HTML 5.0 W3C 18/12/1997 HTML 4.0 W3C 12/05/1998 CSS 2 W3C 06/1999 CSS 3 W3C 26/01/2000 XHTML 1.0 W3C 08/1996 Jscript Microsoft 24/11/1995 HTML 2.0 IETF 11/1996 ECMAScript ECMA 14/01/1997 HTML 3.2 W3C 05/2005 26/08/2006 27/05/2009 20/10/2010 19/08/2011 Prototype jQuery NodeJS AngulaJS Bootstrap Sam Stephénon John Resig Ryan Dahl Google 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 Internet Explorer Thomas Reardon 16/08/1995 Microsoft C++ Opera Opera Inc. 04/1995 Opera C++ Internet Explorer Mozilla 23/09/2002 Mozilla C++, Js, CSS, Rust, XUL, XBL 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 ĐẠI CƯƠNG VỀ HTML Nội dung siêu dữ liệu: nội dung thiết lập những đặc điểm và hành động về những nội dung còn lại của tài liệu, hoặc nó mô tả mối quan hệ tài liệu với những tài liệu khác khác, hoặc những truyền tải ngoài dải thông tin link template style Nội dung phân đoạn: nội dung của tài liệu, title nằm trong một đoạn của tài liệu. meta script abbr area b bdi bdo br base noscript cite code data date datelist del dfn Nội dung tiêu đề: nội dung định nghĩa phần tiêu đề của một mục. h2 h4 h6 h1 h3 h5 Bố cục Website cơ bản em i input ins kbd map mark meter output progress q ruby HTML (HyperText Markup Language): là ngôn ngữ đánh dấu siêu văn bản, nó dùng các thẻ hoặc các đoạn mã lệnh để chỉ cho trình duyệt biết cách thức hiển thị các thành phần của trang web lên trên trình duyệt. Cấu trúc căn bản của một trang HTML đơn giản Nội dung trang HTML Thẻ mở Nội dung thẻ Nội dung nhúng: nội dung nhập từ một nguồn khác vào tài liệu hoặc nội dung từ một ngôn ngữ khác được chèn vào tài liệu wbr canvas audio math frame a video svg img embed button object label keygent textarea select Nội dung tương tác: nội dung nhập từ một nguồn khác vào tài liệu hoặc nội dung từ một ngôn ngữ khác được chèn vào tài liệu Thẻ đóng small span strong time u var Nội dung mục: nội dung dùng tập hợp một nhóm phần tử khác lại. nội dung dùng để định nghĩa thường được đặt ở đầu hoặc cuối form table header footer ul ol dl p div fieldset figure pre address blockquote aside article nav Tên thẻ Thuộc tính section Cấu trúc một phần tử div NỘI DUNG SIÊU DỮ LIỆU Những thẻ nội dung siêu dữ liệu là những thẻ được sử dụng chủ yếu trong phần tử head của tài liệu HTML. Những nội dung này không được hiển thị trực tiếp trên giao diện đồ họa người dùng, mà nó được sử dụng để thiết lập những mô tả hay hành động về những nội dung còn lại của tài liệu HTML, hoặc là mô tả quan hệ giữa tài liệu với các tài liệu khác, hoặc những truyền tải ngoài dải thông tin. - Phần tử title dùng để đặt tiêu đề hoặc tên của tài liệu. Thông thường đoạn text mô tả tiêu đề của trang được hiển thị trên thanh trạng thái của trình duyệt Web. - Phần tử base dùng để chỉ đường dẫn cơ bản của tài liệu. Khi sử dụng phần tử này bắt buộc sử dụng thuộc tính href hoặc target để chỉ ra đường dẫn cơ bản của website. Các thuộc tính: href, target. - Phần tử meta được sử dụng thông thường cùng với các 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 một tài nguyên khác vào trong trang, thông thường là các trang bộ định kiểu CSS hay được sử dụng để đưa vào trong 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 đề của một mục, thông thường mỗi một tài liệu HTML chỉ được có 1 phần tử h1 và các phần tử h2, h3, h4, h5, h6 khác không giới hạn số lượng. - Phần tử script thường được sử dụng để viết những kịch bản động, hay những khối dữ liệu vào trong tài liệu HTML, mà thông dụng nhất là để gọi các tập tin hay viết các đoạn mã javascript. Các thuộc tính: src, type, charset, async, defer, crossorigin. Trong đó thông thường thuộc tính async hay được sử dụng để tải các tập tin js không đồng bộ vào trang. - Phần tử noscript được sử dụng và chỉ hoạt động khi trình duyệt của bạn không cho phép thực hiện các đoạn mã được đưa ra trong phần tử script. - Phần tử template thường được sử dụng để khai báo việc lồng ghép HTML có thể được nhân bản bằng cách chèn dữ liệu từ kịch bản script. TRÌNH BÀY VĂN BẢN h1 h2 h3 h4 h5 h6 A A A A A A XÂY DỰNG BỐ CỤC TRANG PHẦN TỬ ASIDE (trình bày nội dung sidebar của trang) Phần tử aside được sử dụng để trình bày một phần của trang mà nội dung của nó có ít liên quan đến nội dung của trang (hay nói cách khác là nó nằm tách biệt với nội dung của trang). Trong nhiều trang web, nó trình bày phần sidebar của trang bao gồm như trình đơn, quảng cáo, tin tức hay sản phẩm liên quan. Ví dụ sau đây trình bày cách trình bày sidebar gồm modul danh mục sản phẩm và tin tức mới:

Thời trang mùa xuân

Xu hướng thời trang mùa xuân 2016.

Thời trang mùa xuân

Xu hướng thời trang mùa xuân 2016.

PHẦN TỪ NAV (trình bày danh sách trình đơn) Phần tử nav dùng để xây dựng các danh sách trong HTML thường được sử dụng trong việc xây dựng các trình đơn lựa chọn hay việc xây dựng các 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 các phần tử danh sách. Các phần tử danh sách này có thể kết hợp lồng nhau hay kết hợp các loại danh sách với nhau. Danh sách không thứ tự Danh sách có thứ tự Danh sách định nghĩa PHẦN TỬ ARTICLE (trình bày nội dung chính của trang) Phần tử article được sử dụng để trình bày một khối hoàn chỉnh trong một tài liệu, trang, ứng dụng hay site và về nguyên tắc nó có tính độc lập hoặc tái sử dụng. Trong một trang web ta thường dùng trong việc trình bày nội dung chi tiết trang trên diễn đàn, tạp chí, bài báo, một bình luận từ người dùng, một tiện ích tương tác hoặc một mục bất kỳ độc lập với nội dung. Phần tử này được xác định là thành phần chính của trang (ngoại trừ phần đầu, phần cuối, trình đơn hay các sidebar), nó cần sử dụng cùng với một số phần tử đánh dấu trang. Ví dụ sau đây trình bày cách trình bày trang bài viết cùng với các bình luận về bài viết đó:

Xu hướng thiết kế web hiện nay

3 ngày trước

… Tại đây viết nội dung chính của bài viết …

Bình luận

Rất tốt, bài viết này giúp tôi biết thêm nhiều điều!

Cảm ơn bạn rất nhiều về những chia sẻ này!

- Là danh sách liệt kê các mục bằng ký hiệu chấm tròn trước mỗi mục. - Phần tử

đánh dấu việc bắt đầu và kết thúc danh sách. - Phần tử
• có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng dấu chấm tròn. Ta có thể thay đổi dấu chấm tròn bằng các ký hiệu khác bằng cách sử dụng thuộc tính type: square ■ disc ● circle ○ - là danh sách các mục theo thứ tự số thay đổi qua các mục. - Phần tử
  đánh dấu việc bắt đầu và kết thúc danh sách. - Phần tử
  1. có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng số thứ tự. Thay ký tự thứ tự bằng ký hiệu khác bằng cách sử dụng thuộc tính type: A ABC a abc I I,II,III i i,ii,iii Để bắt đầu từ số n trở lên ta dùng
     ...
     - là một danh sách giống như một bảng từ vựng và bảng giải thích thuật ngữ lùi vào trong. - Phần tử

     đánh dấu bắt đầu và kết thúc danh sách. - Phần tử

     chỉ ra thuật ngữ cần định nghĩa. - Phần tử

     chỉ thuật ngữ dùng để định nghĩa. ... - tailieumienphi.vn