Giáo trình Thiết kế và triển khai website: Phần 2

Giáo trình "Thiết kế và triển khai website" là tài liệu tham khảo phục vụ giảng dạy, học tập của sinh viên các chuyên ngành Quản trị Thương mại điện tử và Quản trị Hệ thống thông tin. Giáo trình được chia thành 4 chương, cuối mỗi chương đều có các câu hỏi ôn tập và thảo luận. Phần 2 này trình bày về: một số công cụ thiết kế website; triển khai website;... Mời các bạn cùng tham khảo!
Nội dung trích xuất từ tài liệu:
Giáo trình Thiết kế và triển khai website: Phần 2 Chương III MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE Chương III trình bày một số công cụ chủ yếu dùng trong việc thiết kế các website. Trước hết, đó là ngôn ngữ đánh dấu siêu văn bản HTML sử dụng trong việc tạo ra các trang Web. Tiếp đến, trình bày về ngôn ngữ lập trình JavaScript. Khác với HTML chỉ là ngôn ngữ định dạng website, JavaScript là một ngôn ngữ lập trình đầy đủ cho phía client, được sử dụng để viết những đoạn chương trình ngắn, tăng hiệu ứng cũng như khả năng tương tác cho trang Web. Phần cuối của chương trình bày về ngôn ngữ lập trình PHP là một ngôn ngữ lập trình kiểu script, chạy trên server và trả về mã HTML cho trình duyệt. PHP là một ngôn ngữ lập trình tạo website rất phổ biến trên mạng hiện nay. Sau khi học xong chương này, người học cần biết cách sử dụng các công cụ HTML, JavaScript và PHP để xây dựng được trang Web đơn giản. 3.1. NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN (HTML) 3.1.1. Giới thiệu về HTML HTML (HyperText Markup Language - ngôn ngữ đánh dấu siêu văn bản) được thiết kế ra để tạo nên các trang Web. Trong HTML, mỗi tệp tin là một văn bản có chứa các thẻ đánh dấu (Markup Tag), các thẻ đánh dấu này giúp các trình duyệt Web hiểu được cách trình bày và hiển thị trang Web. Tệp tin HTML có phần mở rộng (Extension) là htm hay html và có thể được tạo ra bằng bất cứ chương trình xử lý văn bản đơn giản nào. Nội dung của một tệp gọi là một tài liệu. Một tệp tin HTML bao gồm nhiều các phần tử (Element), mỗi phần tử được đánh dấu bằng các thẻ HTML. Mỗi thẻ đều có 2 phần chính là 105 tên thẻ và nội dung thẻ. Tên thẻ được bao bởi dấu < và dấu >. Thông thường các thẻ HTML được cấu trúc thành từng cặp có dạng: Nội dung thẻ Trong các thẻ HTML không phân biệt chữ hoa và chữ thường. 3.1.2. Cấu trúc cơ bản của tệp tin HTML Một tệp tin (một trang Web) viết (tạo) bằng HTML có cấu trúc như sau: Một tệp tin HTML luôn bắt đầu bằng và kết thúc bằng . Cặp thẻ này giúp trình duyệt Web nhận ra tệp tin được tạo bởi ngôn ngữ HTML và xử lý nó. Nội dung trang Web sẽ được viết trong cặp thẻ và . Ngôn ngữ HTML cho phép chèn thêm phần chú thích vào các thẻ mà không ảnh hưởng gì đến nội dung trang Web (phần chú thích sẽ không được hiển thị khi duyệt Web). Dòng chú thích được bắt đầu bằng Ví dụ về dòng chú thích: Ví dụ về một chương trình HTML để tạo 1 trang Web đơn giản: 106 Xin chào các bạn Để “chạy” thử ví dụ trên, chỉ cần tạo ra một file với đuôi là html (ví dụ: Thidu-fileHTML.html), bằng một phần mềm soạn thảo (Notepad chẳng hạn), sao chép (copy) nội dung trên vào, sau đó nháy đúp chuột vào “file” đó. Hệ điều hành sẽ tự động mở file này ra bằng trình duyệt mặc định và người dùng có thể thấy được nội dung của trang Web tương ứng. Hình 3.1 minh họa biểu tượng của một file kiểu html trên màn hình. Hình 3.1. Biểu tượng của file HTML trên màn hình 3.1.3. Các thẻ của HTML Ngôn ngữ HTML định dạng trang Web thông qua 1 khái niệm gọi là “thẻ”. Có thể hiểu thẻ là một ký hiệu giúp trình duyệt nhận biết được các phần tử của một chương trình (một tệp tin HTML) sẽ được thể hiện thành nội dung trang Web như thế nào. 107 Ví dụ: Căn lề giữa Thẻ này giúp trình duyệt Web biết được nội dung cần phải để giữa màn hình. Mỗi thẻ trong ngôn ngữ HTML thông thường được đặt trong một cặp ký hiệu (Vì thế, mỗi thẻ còn được gọi là một cặp thẻ), bắt đầu bằng một ký hiệu gọi là “mở thẻ” hay “bắt đầu thẻ” và kết thúc bằng ký hiệu “đóng thẻ” hay “kết thúc thẻ”, và tuân theo đúng cấu trúc như sau: Nội dung thẻ Trong đó: , là từ khóa, người sử dụng phải tuân thủ; chỉ sự bắt đầu (mở thẻ), chỉ sự kết thúc (đóng thẻ) một thẻ; nội dung thẻ (nội dung của phần tử) là phần do người sử dụng đưa vào tùy thuộc mục đích. Nội dung nằm giữa ký hiệu mở thẻ và ký hiệu đóng thẻ này sẽ được định dạng theo ý nghĩa (nội dung) mà thẻ đó quy định. Trong các thẻ HTML không phân biệt chữ hoa và chữ thường. Tuy nhiên, có một số loại thẻ đặc biệt, chỉ có mở thẻ mà không có đóng thẻ. Những thẻ này sẽ được trình bày cụ thể ở phần sau. Để dễ dàng hơn trong việc định dạng trang Web hầu hết các thẻ của HTML cho phép khai báo thêm 1 số thuộc tính của thẻ. Các thuộc tính này sẽ giúp cho nội dung được định dạng dễ dàng và uyển chuyển hơn. Thuộc tính trong một thẻ HTML được viết ngay sau tên thẻ và theo cấu trúc sau: Ví dụ: Thẻ 108 xác định đặt màu nền trang Web là màu đỏ. (Ở đây body là tên thẻ; bgcolor là tên thuộc tính; red là giá trị của thuộc tính). 3.1.3.1. Các thẻ định cấu trúc tài liệu a) Thẻ HTML Cặp thẻ này được sử dụng để trình duyệt Web xác nhận nội dung 1 file là trang Web HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của trang Web được đặt giữa cặp thẻ này. Với các tài liệu không sử dụng thẻ , trình duyệt sẽ coi đó là những tệp tin văn bản bình thường. Cú pháp: Nội dung tài liệu đặt ở đây b) Thẻ HEAD Thẻ được dùng để xác định phần mở đầu cho một tài liệu. Cú pháp: c) Thẻ TITLE Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong phạm vi giới hạn bởi cặp thẻ . Cặp thẻ này dùng để đặt tiêu đề cho trang Web. 109 Cú pháp: Tiêu đề của tài liệu d) Thẻ BODY Thẻ này được sử dụng để xác định phần nội dung chính của trang Web. Trong phần nội dung của thẻ này có thể chứa các thông tin định dạng nhất ...