BÀI 1: NHỮNG KHÁI NIỆM CƠ BẢN I. Các khái niệm cơ bản 1. Một trang Web - Xét về một khía cạnh nào đó thì một trang Web rất giống một trang văn bản. - Là một bộ sưu tập gồm các từ văn bản, các hình ảnh, phim ảnh,… được tổ chức một cách liên tục. - Độ dài của một trang Web là không có giới hạn về mặt vật lý - Có khả năng liên kết trực tiếp với các trang Web khác. - Có thể dùng bất kỳ một phần mềm soạn thảo văn bản nào để tạo một trang Web + Ứng dụng Web tồn tại hai loại: - Trang Web tĩnh: là trang HTML chỉ có kịch bản trình khách - Trang Web động: được viết bằng kịch bản trình chủ (có thể có kết nối cơ sở dữ liệu) + Cho dù là Web tĩnh hay Web động, nếu muốn trình bày dữ liệu trên trình duyệt Web đều phải khai báo thể hiện dữ liệu thông qua các thẻ HTML 2. Trang Home Page (trang chủ) - Một trang Home Page là một trang Web đặc biệt, nó là một điểm vào của một Website. - Tạo ấn tượng đầu tiên với người sử dụng - Liên kết đến các trang khác 3. Website Website là một tập các trang Web được kết nối với nhau bằng các siêu liên kết. 4 . Khái niệm HTML HTML (HyperText Markup Language) không phải là một ngôn ngữ lập trình như Pascal, C,… Nó không thể tạo ra các chương trình ứng dụng dùng trực tiếp ngôn ngữ máy. HTML là ngôn ngữ đánh dấu siêu văn bản để tạo ra các liên kết giữa các trang văn bản đa dạng với nhau và liên kết với các Multimedia như phim, ảnh, âm thanh,… 5. Trình duyệt Web (Web browser) Phần mềm phiên dịch đánh dấu của các file bằng HTML, định dạng chúng sang các trang Web, và thể hiện chúng cho người dùng. Để có thể thể hiện được một trang Web đúng ý nghĩa, người sử dụng cần có một trình duyệt Web trên máy tính để để biểu diễn các trang Web. Các trình duyệt Web làm cho Internet trở nên thân thiện và dễ sử dụng hơn với người dùng. Một số trình duyệt Web hiện nay như: Internet Explorer, Nestcape, Opera, FireFox,…. 6. Giao thức (Protocol) Giao thức là một phương thức truy cập các trang Web của trình duyệt. ctsdhv@yahoo.com 1 + Http:// (HyperLink Text Tranfer Protocol) là giao thức truyền các văn bản siêu liên kết trên mạng, là một giao thức hay dùng nhất để mở các tàiliệu HTML trong trình duyệt. + file:// là giao thức truy cập trang Web ngay trên máy của người dùng. + ftp:// (File Tranfer Protocol) là giao thức truyền tệp tin 7. URL (Uniform Resource Locator) là địa chỉ của nguồn tài nguyên thống nhất của Web. vd: http://www.vinhuni.edu.vn http://www.vnn.vn http://mail.yahoo.com file://c:/Inetpub/wwwroot/index.html II. Cấu trúc trang Web Trang Web trình bày dữ liệu trên trình duyệt dưới dạng cấu trúc HTML. Cấu trúc này được bắt đầu bằng thẻ mở <HTML> và kết thúc bằng thẻ đóng </HTML>. Trang HTML thường có phần mở rộng là *.htm, *.html 1. Thẻ định dạng (Tag) Các lệnh của HTML đơn giản chỉ là các mã đánh dấu định dạng. Mỗi mã đánh dấu định dạng gọi là các thẻ (Tag) nằm giữa hai dấu ngoặc nhọn < …> trong đó có tên thẻ và các thuộc tính của thẻ đó nếu có. Mỗi thẻ chỉ dẫn cho trình duyệt biết định dạng của đối tượng nằm sau mã theo một quy cách đã định. HTML quy định không phân biệt chữ hoa và chữ thường với tên thẻ và thuộc tính của nó. Không được có khoảng trắng trong định nghĩa tên thẻ. Thẻ HTML có hai loại: - Loại có thẻ mở kèm thẻ đóng - Có thẻ mở, không có thẻ đóng Các thẻ nhập sai thì trình duyệt sẽ bỏ qua mà không báo lỗi vì trình duyệt sẽ coi đó là một phần văn bản mà không coi đó là mã định dạng. 2. Tổ chức của một trang Web <HTML> <HEAD> <TITLE>Tiêu đề trang web</TITLE> </HEAD> <BODY> Thân trang web </BODY> </HTML> a. Thẻ <HTML> …. </HTML> Mở đầu và kết thúc trang HTML ctsdhv@yahoo.com 2 b. Thẻ <Head> …. </Head> Tất cả các thông tin chứa trong thẻ này đều không xuất hiện trên trang Web. Có thể khai báo các thẻ <title>, <meta>,…. ở trong phần này. c. Thẻ <Title> …. </Title> Cho phép trình bày chuỗi trên thanh tiêu đề của trình duyệt Web. d. Thẻ <body> … </body> Tất cả các thông tin được khai báo trong thẻ này đều có thể xuất hiện trên trang Web. 3. Thẻ định dạng văn bản a. Thẻ <p> … </p> Định dạng đoạn văn bản. Sau khi kết thúc thẻ đóng </p>, dữ liệu trình bày tự động xuống hàng. b. Thẻ <font> … </font> Thẻ này cho phép định dạng một đoạn văn bản với kiểu chữ nhất định, cở chữ và màu chữ cũng được định nghĩa trong thẻ <font> vd: <font face=”Arial” color=”FF0000” size=8> c. Thẻ <b>…</b>, <i> … </i>, <u> … </u> d. Môt số thẻ khác Tag xuống dòng không sang đoạn mới: <BR> Tag thêm đường thẳng nằm ngang: <HR> Tag 6 mức tiêu đề: <hN></hN> (N=1 6) Tag chỉ số dưới: <SUB></SUB> Tag chỉ số trên: <SUP></SUP> Tag hình ảnh, phim: <IMG></IMG> Tag định dạng bảng <TABLE><TR><TD></TD></TR></TABLE> Tag tạo Frame <FRAMESET><FRAME></FRAMESET> Tag liên kết đến 1 đoạn chỉ định trong tư liệu hiện hành hoặc một trang web khác <A></A>. vd: <a href=”http://www.vnn.vn”> Việt nam net </a> Tag chữ chạy <MARQUEE> … </MARQUEE> Ví dụ: <Marquee direction=up scrolldelay=150> Xin chào các bạn! </marquee> direction=up, down, left, right ctsdhv@yahoo.com 3 III. Thiết kế các ứng dụng Web Thiết kế một ứng dụng web là một quá trình bao gồm: + Xác định các nhu cầu + Tổ chức thông tin + Thiết kế cấu trúc của ứng dụng web + Phát triển lịch trình của các trang web 1. Xác định các nhu cầu - Mục đích của ứng dụng web này là gì ? - Nó được dự định dùng để làm gì ? - Các mục tiêu của ứng dụng web này là gì ? - Nó được dùng để giải trí, để học tập hay để bán các sản phẩm ? 2. Tổ chức thông tin - Tổ chức theo một trật tự nội dung rõ ràng - Tổ chức theo thứ tự từ điển - Tổ chức theo thời gian - Tổ chức theo không gian 3. Thiết kế cấu trúc của ứng dụng Việc tổ chức thông tin ra sao sẽ quyết định cấu trúc của ứng dụng web. Có ba cách để cấu trúc một ứng dụng web: phân cấp, siêu văn bản, và cơ sở dữ liệu. - Cấu trúc phân cấp là cách tiếp cận truyền thống từ trên xuống. Đầu tiên phải xây dựng các hạng mục ở mức cao, sau đó sẽ sắp xếp các tàiliệu thuộc các hạng mục con. - Cấu trúc siêu văn bản: siêu văn bản là các văn bản hoặc các bức ảnh được kết nối với các văn bản và đồ hoạ khác. Các kết nối này có thể có ở các vị trí bất kỳ trong trang và tạo ra khả năng chuyển nhanh tới dữ liệu được kết nối. Đây là một cách tiếp cận của một cấu trúc phi tuyến. - Cấu trúc kiểu cơ sở dữ liệu: một cơ sở dữ liệu có thể được sử dụng để cấu tạo một trạm web bằng cách xây dựng các trang thông tin từ một cơ sở dữ liệu khi các thông tin này được yêu cầu. 4. Phát triển lược đồ duyệt các trang Web - Lược đồ duyệt của ứng dụng web phụ thuộc rất nhiều vào cấu trúc mà ta đã xây dựng và ảnh hưởng trực tiếp đến việc di chuyển của người sử dụng trong trạm web và việc thâm nhập vào các thông tin được trình bầy. - Sau đây là những vấn đề chính cần phải xem xét trong khi thiết lập các lược đồ duyệt, bao gồm hướng đi của chương trình duyệt, duy trì sự phân cấp và cấu trúc của thiết kế. (1) Đường đi của chương trình duyệt Vì ứng dụng web sẽ chạy dưới một chương trình duyệt nên đã có sẵn công cụ điều khiển duyệt từ trước. (2) Bảo trì thứ tự phân cấp và cấu trúc của thiết kế Lược đồ duyệt sẽ là con đường chính để người dùng đọc một ứng dụng web. Người sử dụng không chỉ dùng lược đồ duyệt để tìm ra những chỗ cần đến mà còn biết được chúng ở chỗ nào và chúng có liên quan như thế nào với phần còn lại của ứng dụng web. ctsdhv@yahoo.com 4 . bản nào để tạo một trang Web + Ứng dụng Web tồn tại hai loại: - Trang Web tĩnh: là trang HTML chỉ có kịch bản trình khách - Trang Web động: được viết bằng. một trang Web đặc biệt, nó là một điểm vào của một Website. - Tạo ấn tượng đầu tiên với người sử dụng - Liên kết đến các trang khác 3. Website Website là