Chương 1: CƠ SỞ LÝ THUYẾT 1. GIỚI THIỆU VỀ NGÔN NGỮ LẬP TRÌNH 1. Ngôn ngữ HTML 1. Một số khái niệm về HTML HTML (viết tắt cho HyperText Markup Language, hay là "ngôn ngữ đánh dấu siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang Web, nghĩa là các mẫu thông tin được trình bày trên World Wide Web.
HTML bao gồm một tập hợp các thẻ dùng để: - Định nghĩa cấu trúc của trang Web. - Định dạng nội dung của trang Web. - Tạo các siêu liên kết để liên kết đến các trang Web khác. - Chèn âm thanh, hình ảnh, video.
vào trang Web. Tập tin HTML Tập tin HTML là một tập tin text có chứa các thẻ HTML. Tập tin HTML còn được gọi là một trang Web. Nếu cú pháp có bị sai thì trình duyệt cũng không báo lỗi, nó chỉ hiện thị không như ý muốn.
Thẻ trong HTML Mỗi thẻ là một từ khóa, được bao quanh bởi cặp ngoặc nhọn (Ví dụ: <html>, <head>, <body>) Mỗi thẻ HTML thường bao gồm một cặp: thẻ mở (bắt đầu định dạng), và thẻ đóng (kết thúc định dạng) Thẻ đóng giống thẻ mở, nhưng ở thẻ đóng thì có thêm ký hiệu dấu gạch chéo (/) trước tên thẻ (ví dụ: </html>, </head>, </body>). Văn bản cần định dạng được đặt giữa thẻ mở và thẻ đóng. Ví dụ: <p> Đây là một đoạn văn bản</p> Các khoảng trắng dư thừa và ký tự xuống dòng sẽ bị bỏ qua. Các thẻ gồm một cặp thẻ đóng và mở được gọi là thẻ kép (Ví dụ: <b></b>, <p></p>, <i></i>).
Các thẻ chỉ có một thẻ mở được gọi là thẻ đơn (Ví dụ: <img>) Các thẻ có thể được lồng vào nhau, nhưng không được chéo nhau. 4 Ví dụ đúng: <p>Đây là<b>một đoạn</b>văn bản</p> Ví dụ sai: <p>Đây là<b>một đoạn</p>văn bản</b> 1. Cấu trúc cơ bản của 1 tập tin HTML Một tập tin HTML được bắt đầu bằng thẻ <html> và kết thúc bởi </html> Bên trong cặp thẻ <html></html> được chia thành hai phần chính: + Phần <head>: chứa tiêu đề của trang Web, các tập tin hỗ trợ, các khai báo. + Phần <body>: chứa các nội dung mà bạn muốn hiển thị ra màn hình Hình ảnh dưới đây minh họa cho cấu trúc của một tập tin HTML Hình 1.1: Cấu trúc tệp tin HTML Hiện nay đã ra đến phiên bản HTML5 (phiên bản này cung cấp thêm những thẻ mới với tính năng hay hơn).
Để sử dụng phiên bản HTML5 ta thêm thẻ <!DOCTYPE html> ở đầu tập tin. Ngôn ngữ CSS 1.1 Một số khái niệm về CSS CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền, .) dựa trên các cặp thuộc tính: giá trị thuộc tính Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp. CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó. 5 Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.
CSS có thể tùy chỉnh bố cục định dạng hiển thị nội dung, màu sắc căn chỉnh màu nền, đường viền, đổ bóng cho các thẻ HTML. Nếu 1 Website mà chỉ làm bằng HTML không sử dụng CSS thì Website đó nhìn sẽ rất thô sơ. Chúng ta có thể tưởng tượng nó như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngoài chỉ còn lại mỗi bộ khung và máy. CSS cung cấp cho ta hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả.
Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau.2 Cách chèn CSS vào Website Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn CSS và Website: + Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style> trong phần <head></head> của trang Web Hình 1.2: Cách chèn CSS + Cách 2: Chèn nội dung CSS vào trực tiếp vào thẻ mở html thông qua thuộc tính style Hình 1.3: Cách chèn CSS + Cách 3: Lưu nội dung CSS ra 1 file riêng có phần mở rộng là .CSS và chèn file này vào Website thông tin thẻ <link>, thường file CSS được chèn trong cặp thẻ <head></head> 6 Hình 1.4: Cách chèn CSS Chúng ta lên sử dụng theo cách 3, vì như vậy sẽ dễ quản lý code dễ hơn, sau này có chỉnh sửa chỉ cần vào file CSS sửa. Ngôn ngữ Javascipt 1. Giới thiệu về JavaScipt JavaScript là ngôn ngữ dưới dạng script gắn với các file HTML. JavaScript không được biên dịch mà được trình duyệt diễn dịch.
JavaScript là ngôn ngữ lập trình dựa trên hướng đối tượng. JavaScript không phải là ngôn ngữ lập trình hướng đối tượng do không hỗ trợ các lớp hay tính thừa kế. JavaScript chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. JavaScript là ngôn ngữ phía Client.
Cách nhúng JavaScript vào trong tập tin HTML + Nhúng trong thẻ <head>: Hình 1.5: Cách chèn JavaScript vào head 7 + Nhúng trong thẻ <body>: Hình 1.6: Cách chèn JavaScript vào body 1. Ngôn ngữ lập trình PHP 1. Một số khái niệm về PHP PHP là từ viết tắt của "PHP : Hypertext Preprocessor". PHP là một ngôn ngữ kịch bản phía máy chủ, nó thường được dùng để xây dựng các trang Web động.
Mã PHP có thể thực thi trên server để tạo ra mã HTML và xuất ra trình duyệt Web theo yêu cầu của người sử dụng. PHP cho phép xây dựng ứng dụng Web trên mạng Internet tương tác với mọi cơ sở dữ liệu như : MYSQL, … Ngôn ngữ lập trình PHP được tối ưu hóa cho các ứng dụng Web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình phổ biến nhất thế giới.Một số tính chất của file PHP Các file PHP trả về kết quả cho trình duyệt là một trang thuần HTML. Các file PHP có thể chứa văn bản (Text), các thẻ HTML (HTML tags) và đoạn mã kịch bản (Script). Các file PHP có phần mở rộng là : PHP, PHP3.
Từ phiên bản 4.0 trở về sau mới hỗ trợ session.Cơ chế hoạt động Khi người dùng muốn truy cập một tập tin PHP thì họ phải gửi yêu cầu thông qua việc truy cập vào đường dẫn nơi nó được lưu trên máy chủ Web. Sau đó, máy chủ Web sẽ tiếp nhận yêu cầu và biên dịch tập tin PHP thành các đoạn mã HTML rồi trả về cho trình duyệt của người dùng. Dưới đây là hình ảnh minh họa cơ chế hoạt động của PHP : 8 Hình 1.7: Cơ chế hoạt động của PHP 1.4 Cách tạo và chạy 1 tệp tin PHP a. Cách tạo 1 tệp tin PHP - Mở Notepad hoặc công cụ khác như Sublime_text, Dreamweaver lên và gõ vào đó một đoạn mã PHP như sau.8: Đoạn mã PHP - Lưu tệp tin vào thư mục www trong folder wamp với đuôi.
PHP và đặt tên là taptindautien. Chạy tệp tin PHP - Mở trình duyệt Web - Gõ vào thanh địa chỉ dòng chữ localhost/taptindautien.PHP rồi nhấn Enter. Nếu trình duyệt hiển thị giống như hình bên dưới thì tức là ta đã chạy thành công tập tin PHP.9: Hiển thị tệp PHP 1. Bootstrap Bootstrap là một framework HTML, CSS, và JavaScript cho phép thiết kế phát triển responsive Web mobile.
Nếu bạn chưa hiểu về responsive Web mobile bạn có thể xem bài viết của em ở đây để hiểu hơn về nó “Khác nhau cơ bản giữa Mobile Web và Responsive Web Design“. Bootstrap là gì? Bootstrap là một framework cho phép thiết kế Website reponsive nhanh hơn và dễ dàng hơn 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ế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.
Lịch sử Bootstrap: Bootstrap là dược phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub. Tính ra đến thời điểm mình viết bài viết này nó cũng đã phát triển được 3 năm rồi. Bản Bootstrap mới nhất bây giờ là Bootstrap 3.2 Giới thiệu và hướng dẫn sử dụng Bootstrap Hình 1.10: Các phiên bản Bootstrap 3 Đây là cấu trúc file sau khi tải về và giải nén.11: File Bootstrap 3 + Nhúng thư viện Bootstrap vào Website.
10 Cũng giống như nhúng file CSS vào Website bằng cách thường thì Bootstrap còn cung cấp cho chúng ta một bộ liên kết , mà chỉ cần nhúng vào Website thì ngay lập tức có thể gọi đến các thuộc tính CSS & JS để sử dụng ngay, rất tiện lợi. Nhưng bên cạnh đó nếu như một ngày nào đó mà cáp quang việt nam không may bị quái thú cắn đứt thì các bạn sẽ phải kêu trời vì load không nổi bộ liên kết này. Giải pháp tối ưu nhất là dowload về giải nén ra và nhúng trực tiếp vào Website của mình.12: Nhúng Bootstrap Phần định nghĩa CSS chúng ta sẽ để trong cặp thẻ <head>, còn phần định nghĩa JS chúng ta chèn phía sau cặp thẻ <body>. làm xong việc này thì ngay từ bây giờ chúng ta có thể gọi ngay các thuộc tính CSS trong Bootstrap , tiến hành xây dựng giao diện Website một cách nhanh chóng.2 Ưu và nhượt điểm của Bootstrap + Ưu điểm: Phát triển giao diện nhanh chóng: Bạn dễ dàng phát triển giao diện Website một cách rất nhanh, nếu một trang bình thường thì bạn có thể cắt xong trong một ngày hoặc chưa tới một ngày.
Chưa kể đến tính tương thích với các trình duyệt và thiết bị di động Dễ học, dễ sử dụng: Cộng đồng đông đúc và tài liệu tham khảo rõ ràng chính là sức mạnh của Bootstrap. Nền tảng tối ưu: Trong Bootstrap đã tạo sẵn một thư viện để lưu trữ mà các nhà thiết kế có thể sử dụng và tuỳ ý chỉnh sửa theo mục đích cá nhân. Điều này giúp cho việc phát triển Website trở nên nhanh chóng bởi vì bạn có thể lựa chọn một mẫu có sẵn phù hợp và thêm màu sắc, hình ảnh, video. là đã có ngay giao diện 11 đẹp.
Hơn nữa, Bootstrap sự tương thích với trình duyệt và thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn có thể yên tâm với kết quả mình làm ra, thậm chí bạn còn có thể bỏ qua cả bước kiểm tra lại, và bạn sẽ tiết kiệm được thời gian, tiền bạc cho Website của mình.