Chương 1: Tổng quan: Tổng quan vấn đề, giới thiệu, mục tiêu, các vấn đề cần giải quyết và phương pháp nghiên cứu Chương 2: Tìm hiểu công cụ thực hiện: Cách sử dụng công cụ Chương 3: Nội dung và kết quả nghiên cứu: Từ các vấn đề của bài toán tiến hành phân tích, thiết kế hệ thống, thiết kế các mô hình, thiết kế giao diện và hoàn thiện chương trình. Chương 4: Kết luận và hướng phát triển: Từ kết quả những gì làm được đưa ra kết luận về những gì đã đạt được, những gì chưa đạt được đồng thời đưa ra hướng phát triển cho đề tài. 8 Chương 2 Tìm hiểu công cụ 2.1 Tìm hiểu về HTML 2.1 HTML là gì? HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng.
HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web.2 Vai trò của HTML HTML là một loại ngôn ngữ đánh dấu siêu văn bản. Nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web.
Đồng thời, nó còn hỗ trợ khai báo các File kỹ thuật số như nhạc, Video, hình ảnh, … Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn sẽ cần đến HTML. HTML thực chất chứa những yếu tố cần thiết cho mọi thể loại Website. Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập. Điều này đúng dù trang của bạn xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu.3 Đặc điểm của HTML HTML có nhiều thẻ định dạng, do đó bạn có thể trình bày trang Web dễ dàng, hiệu quả với ngôn ngữ đánh dấu siêu văn bản này.
Với tôi, nó là một ngôn ngữ đánh dấu dễ dàng và đơn giản để sử dụng. Chúng ta có thể sử dụng nó để thiết kế trang Web cùng với văn bản một cách linh hoạt. HTML có thể liên kết đến các trang Web khác. Nhờ ngôn ngữ đánh dấu này, bạn có thể thêm các Video, hình ảnh, âm thanh vào để các Website hấp dẫn, đẹp mắt và dễ tương tác hơn.
9 Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux, Windows, và Mac vì nó là một nền tảng độc lập.4 Cấu trúc cơ bản trang HTML <!DOCTYPE html> <html> <head> <title>Tiêu đề trang web</title> </head> <body> .Phần thân viết ở đây.5 Lịch sử của HTML HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet. Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức. Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML.
Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới. Theo Mozilla Developer Network: HTML Element Reference, hiện tại có hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại). Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website. Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C).
Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website. Nâng cấp mới nhất gần đây là vào năm 2014, khi ra mắt chuẩn HTML5. Nó thêm vài tags vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article>, <header>, và <footer>.6 Ví Dụ + Kết quả Ví dụ Kết quả 2.2 Tìm hiểu về CSS 2.1 CSS là gì ? CSS là chữ viết tắt của Cascading Style Sheets, là ngôn ngữ tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh 11 dấu, như HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản, HTML không được thiết kế để gắn tag để giúp định dạng trang web.
Chỉ có thể dùng nó để “đánh dấu” lên site.2 Vai trò của CSS Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung. Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau.3 Cấu trúc của CSS Một đoạn CSS có cấu trúc 4 phần như sau: + selector : tên thẻ html hoặc class hoặc Id + { } : Cặp thẻ mở đóng, các thuộc tính của selector sẽ nằm trong cặp ngoặc nhọn này. + Thuộc tính: Thuộc tính của css qui định về cách bố trí, màu sắc,. + Giá trị thuộc tính: Nằm bên phải dấu " : " chỉ ra giá trị của thuộc tính đó.
VD: selector { thuộc tính 1 : giá trị 1; thuộc tính 2 : giá trị 2; .4 Lịch sử phát triển CSS được đề xuất lần đầu tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. Kể từ đó, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn. Tính từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Các 12 phiên bản mới sẽ giúp vá các lỗi của phiên bản cũ và mang đến nhiều cải tiến hơn.
Với phiên bản đầu tiên hay còn được gọi là CSS cấp 1 có những đặc điểm cụ thể như: thuộc tính font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính. Phiên bản CSS cấp 2 được W3C phát triển vào tháng 5 năm 1998. Với những cải tiến từ phiên bản CSS cấp 1 và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Khái niệm về các loại phương tiện, hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều.
Xuất hiện các kiểu font chữ mới để định dạng văn bản. Ngoài ra, sau phiên bản cấp 2 còn có một sự nâng cấp khác là CSS 2.1 được đề xuất vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặc không tương thích cho người dùng. CSS3 là phiên bản thay thế cho CSS2 với sự thay đổi đáng chú ý là mô- đun.
Các mô-đun có khả năng mới hoặc mở rộng các tính năng được xác định trong CSS2. Nhằm duy trì khả năng tương thích ngược. Đặc biệt, CSS3 mang đến các bộ chọn và thuộc tính mới cho phép linh hoạt hơn với bố cục và trình bày trang. Nhờ đó, người lập trình có thể tạo ra các hiệu ứng hình ảnh mà không cần tạo ra hình ảnh trước đó.5 Ví dụ + Kết quả Ví dụ 13 Kết quả 2.1 JavaScript là gì ? JavaScript là một ngôn ngữ kịch bản (scripting language) dùng để tương tác với các trang HTML dựa trên đối tượng (object-based scripting language).
Ngôn ngữ này chủ yếu dùng cho kỹ thuật lập trình ở phía client Các chương trình JavaScript thường được nhúng trực tiếp vào tập tin HTML bằng tag <script> hoặc tích hợp vào trang web thông qua một tập tin được khai báo trong tag <link> JavaScript có một số đặc điểm: Là một ngôn ngữ thông dịch (interpreted language), nghĩa là các script thi hành không cần biên dịch trước(precompile). Trình duyệt dịch Script phân tích và thi hành ngay tức thời Lập trình theo cấu trúc (Structured programing) Có phân biệt chữ hoa và chữ thường 2.2 Vai trò của Javascript Responding (đáp lại) nhanh chóng các request (yêu cầu) của người dùng. + Tạo ra các thành phần HTML nằm trong thành phần HTML khác. 14 + Kiểm tra tính hợp lệ của dữ liệu do người dùng nhập (gửi nhận file, đăng ký người dùng, .) + Thực hiện các tính toán đơn giản phía client (người dùng).3 Cấu trúc của JavaScript Đoạn mã javascript được đặt trong cặp thẻ mở javascript <scrip> </scrip> 2.4 Lịch sử Javascript JavaScript được bắt đầu vào năm 1995 tại Netscape Communications.
Vào thời gian này, các nhà sản xuất Netscape browser nhận ra rằng, việc thêm một "glue language" để nâng cao trải nghiệm người dùng sẽ làm tăng sự tiêu thụ nội dung của người dùng. Vì vậy, họ đã đưa Brendan Eich nhúng vào Scheme Programming language. Tuy nhiên, tại thời điểm đó, Java hiện là một ngôn ngữ mới, nóng hổi của website, nên họ đã quyết định làm cho ngôn ngữ này gần gũi với cú pháp của Java. Kết quả đem lại chính là JavaScript, với các tính năng của Scheme, định hướng đối tượng của SmallTalk và cú pháp của Java.
Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5 năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tên thành JavaScript vào tháng 12 năm 1995. Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trở thành, một đặc tính kỹ thuật tiêu chuẩn. Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên cho ngôn ngữ được phát hành là ECMA- 262. Phiên bản mới nhất của ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017.5 Ví dụ + kết quả Ví dụ 15 Kết quả 2.1 Bootstrap là gì ? Bootstrap là một framework cho phép thiết kế website responsive nhanh hơn và dễ dàng hơn, cho phép thiết kế phát triên responsive web mobile.
Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin JavaScript trong nó. Giúp cho việc thiết kế responsive của bạn dễ dàng hơn và nhanh chóng hơn.2 Lịch sử của Bootstrap Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub.
Tên gọi ban đầu là Twitter Blueprint. Đến ngày 31/1/2012, Bootstrap phiên bản 2 đã được phát hành. Bootstrap 2 được bổ sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích thước.