Kiến thức cơ bản về những ngôn ngữ giao diện phía máy khách
Kiến thức cơ bản về những ngôn ngữ giao diện phía máy khách
Tài liệu Kiến thức cơ bản về những ngôn ngữ giao diện phía máy khách 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) 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
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
Tiêu đề trang
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
Nội dung văn bản
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.
Thiết kế Website
- 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
… 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ử
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