Bài giảng Thiết kế và triển khai websites - Chương 3: Ngôn ngữ và công cụ

Bài giảng Thiết kế và triển khai websites - Chương 3: Ngôn ngữ và công cụ. Chương này cung cấp cho học viên những nội dung về: ngôn ngữ HTML; ngôn ngữ CSS (Cascading Style Sheet); ngôn ngữ JavaScript; ngôn ngữ PHP;... Mời các bạn cùng tham khảo!
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế và triển khai websites - Chương 3: Ngôn ngữ và công cụ CHƯƠNG 3: NGÔN NGỮ VÀ CÔNG CỤ Ngôn ngữ Công cụ 1. HTML 1. Frontpage 2. CSS 2. EditPlus++ 3. Java Script 3. Macro Dreamwaver 4. PHP và MySQL Web Application Development Framework 1. Laravel (PHP) 2. ASP.NET (C#, VB.net,..) CHƯƠNG 3: CÁC NGÔN NGỮ VÀ CÔNG CỤ  HTML: khai báo ra các đối tượng trên trang web + một số thuộc tính định dạng cơ bản, tạo ra cấu trúc của trang web  CSS: xác định kiểu trình diễn các đối tượng trên trang web với bộ thuộc tính phong phú, được hỗ trợ bởi tất cả các trình duyệt  JavaScript: quản lý các đối tượng trên trang web, đặt các phép tính, điều kiện logic, các chức năng lập trình — Ví dụ: thẻ tạo nút bấm và xử lý sự kiện khi nút được bấm  PHP: ngôn ngữ lập trình để tạo trang web động, ngôn ngữ phía máy chủ, cho phép tạo các hoạt động bên trong trang web, được thực thi trên máy chủ, trả về đầu ra HTML. 3.1. Ngôn ngữ HTML 3.1.1. Tổng quan về HTML 3.1.2. Các thẻ của HTML 3.1.3. Sử dụng Frontpage, Notepad++ để soạn thảo mã HTML 3.1.2. Các thẻ HTML  Các lớp thẻ — Cấu trúc (structure) — Định dạng (formatting) — Ảnh (image) — Danh sách (list) — Bảng (table) — Form — Khung hiển thị (frame) 3.1.1. Tổng quan về HTML  HTML=HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản (ngôn ngữ để viết các trang web)  Là ngôn ngữ được dùng để tạo các trang Web chứa dữ liệu (gồm hình ảnh, âm thanh, văn bản, siêu liên kết,…)  Sử dụng thẻ (tags) để đánh dấu có loại dữ liệu gì và đánh dấu cách hiển thị dữ liệu đó.  Các phiên bản: 1994 (HTML drapt) ---- 1999 (HTML 4.01) ---- 2016 (HTML 5)  Tệp mã nguồn HTML: .html hoặc .htm Tệp mã nguồn HTML và trang Web  Tệp mã nguồn HTML — Là tệp văn bản bình thường gồm các kí tự ASCII — Có thể được tạo ra bằng bất cứ bộ soạn thảo thông thường nào (Frontpage, EditPlus, MS Word, Notepage, Wordpage,…) — Có đuôi là .html hoặc .htm Tệp mã nguồn HTML và trang Web  Trang Web — Là kết quả hiển thị tệp mã nguồn bằng cách sử dụng trình duyệt (Browsers: Internet Explorer, Google Chrome, Firefox, Mozilar) — Không tồn tại trên ổ đĩa cứng của máy tính — Bấm chuột phải vào bất kỳ vị trí nào trên trang Web, tệp mã nguồn được mở ra. Bài tập số 5  Tạo website cá nhân: — Tiêu đề: chào mừng bạn đến trang cá nhân của tôi — Trang chủ (index.html) • Đề mục: Giới thiệu • Nội dung của đề mục: thông tin cá nhân cơ bản (danh sách) + ảnh chân dung — Trang quá trình đào tạo/sở trường/sở thích — Trang liên kết (contact.html) • Đề mục: các liên kết • Nội dung: • Liên kết tới “Trường tôi”: liên kết đến website của Trường • Liên kết từ trang này đến trang chủ: index.html • Liên kết đến đề mục khác trong cùng trang • Mailto Bài tập 6  Tệp mã html? Bài tập 7  Tệp mã html? Bài tập 8  Tệp html? Bài tập về nhà  Mỗi bạn tạo 1 website cá nhân (tĩnh) gồm các trang web: — Trang chủ: sử dụng các liên kết trong cùng và khác website — Quá trình học tập và làm việc: sử dụng bảng — Sở thích: chèn hình ảnh, film, audio (bản nhạc) — Trang liên kết (contact.html) • Đề mục: các liên kết • Nội dung: • Liên kết tới “Trường tôi”: liên kết đến website của Trường • Liên kết từ trang này đến trang chủ: index.html • Liên kết đến đề mục khác trong cùng trang • Mailto — Liên lạc: sử dụng các đối tượng của form Tổ chức lưu trữ các tệp html theo các thư mục  Trang chủ — Tệp index.html Địa chỉ tương đối liên kết các trang 3.1.3. Công cụ thiết kế web  Fronpage — Có sẵn trong bộ MS Office — Tách biệt cửa sổ Design View, Code View  Notepad++ 3.1.3. Công cụ thiết kế web  Fronpage  Notepad++ — Có sẵn trong bộ cài đặt Window — Tính năng: số dòng, mã màu, gợi ý lệnh, … Tổng kết  Các khái niệm webpage, website, …  Các lớp thẻ cơ bản: cấu trúc, định dạng, form, chèn ảnh, bảng biểu, khung  Các công cụ thiết kế web Bài tập về nhà  Mỗi bạn tạo 1 website cá nhân (tĩnh) gồm các trang web: — Trang chủ: sử dụng các liên kết trong cùng và khác website — Quá trình học tập và làm việc: sử dụng bảng — Sở thích: chèn hình ảnh, film, audio (bản nhạc) — Liên lạc: sử dụng các đối tượng của form 3.2. Ngôn ngữ CSS (Cascading Style Sheet) 3.2.1. Giới thiệu 3.2.2. Cú pháp 3.2.3. Một số thuộc tính định dạng cơ bản 3.1.1. Giới thiệu CSS  HTML: khai báo ra các đối tượng trên trang web + một số thuộc tính định dạng cơ bản  CSS: xác định kiểu trình diễn các đối tượng trên trang web với bộ thuộc tính phong phú, được hỗ trợ bởi tất cả các trình duyệt — Style Sheet: bảng định dạng, cho biết áp dụng kiểu dáng gì trên loại đối tượng nào — Giúp tách biệt nội dung trang web với cách trình diễn nội dung — Giúp đảm bảo sự nhất quán trong trình diễn — Giúp sử dụng lại mã trong trình ...