Lý thuyết Thiết kế website .................................................................................................................................................................................................................................................................................
PHẦN II: CƠ SỞ LÝ THUYẾT VỀ THIẾT KẾ WEBSITE CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN VỀ WEBSITE 1.Webpage – Website a,Webpage Web hệ thống văn có mối siêu liên kết bên với (interlinked hypertext documents) truy xuất thông qua hệ thống Internet Webpage trang thông tin chứa: văn (text), hình ảnh (images), phim (videos) đa phương tiện khác…có mối siêu liên kết với (hyperlinks) Một trang web tập tin HTML XHTML truy xuất thông qua giao thức HTTP b, Website Website tập hợp trang web nằm tên miền tên miền phụ WWW hệ thống mạng Internet Phân loại: + Website tĩnh: Chủ yếu giới thiệu thông tin + Website động: Có tương tác với người dùng HTML, XHTML, DHTML a HTML HTML viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) HyperText – văn kết nối đến văn khác Sử dụng “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định cách biểu diễn trang web đến người sử dụng Một tập tin HTML tập tin văn có chứa thẻ đánh dấu (các tập tin có phần mở rộng *.htm *.html) b.XHTML XHTML viết tắt eXtensible HyperText Markup Language (ngôn ngữ đánh dấu siêu văn mở rộng): ngôn ngữ đánh dấu tương tự ngôn ngữ HTML có cú pháp chặt chẽ XHTML xem hệ HTML dựa chuẩn XML c.DHTML DHTML viết tắt Dynamic HyperText Markup Language (ngôn ngữ đánh dấu siêu văn động) Là ngôn ngữ dùng tạo trang web dựa kết hợp nhiều kỹ thuật như: ngôn ngữ HTML tĩnh, ngôn ngữ kịch máy khách (Javascript), ngơn ngữ định dạng trình diễn Cascading Style Sheets (CSS) Document Object Model (DOM) DHTML cho phép người dùng thêm hiệu ứng vào trang web mà HTML khơng thực 3.Các ngơn ngữ lập trình Web Hiện nay, có nhiều ngơn ngữ lập trình hỗ trợ cho việc viết ứng dụng web chạy máy chủ (xây dựng website động) như: ASP (Active Server Pages): Microsoft phát triển JSP (Java Server Pages): IBM phát triển PHP (Hypertext Preprocessor): cộng đồng phát triển (các tài liệu liên quan PHP cung cập Zend) Web Sever-Web Brower-HTTP Web Server: nơi nhận điều phối yêu cầu từ Web Browser gửi kết trả Web Browser: nơi thể liệu, tập hợp liệu người dùng gửi đến Web Server HTTP: giao thức dùng để trao đổi thông tin Web Browser với Web Server Hành động gởi nội dung đến Web Server q trình xử lý thơng tin sau Server trả kết cho Web Browser xem Postback Ví dụ: trang đăng nhập website, forum… Mơ hình ứng dụng 6.Q trình Request – Repone Trình tự xử lý: Web Browser (WB) yêu cầu 2.HTTP gởi yêu cầu đến Web Server (WS) (GET) Web Server xử lý yêu cầu Web Server gởi hồi đáp (kết quả) đến Web Browser (sử dụng giao thức HTTP để gửi HTTP response đến trình duyệt ) Web Browser xử lý kết (response) thể lên trang Web Khi người dùng nhập liệu thực hành động gởi liệu Web Server (như click chuột vào nút lệnh Submit) Lúc HTTP sử dụng để gởi liệu đến Web Server (POST) Web Server xử lý liệu Web Server gởi hồi đáp (kết quả) đến Web Browser (sử dụng giao thức HTTP để gửi HTTP response đến trình duyệt ) 10.Trình duyệt xử lý kết (response) thể lên trang Web Các bước xây dựng dự án web Khảo sát trạng Phân tích Thiết kế Lập trình Kiểm thử Cập nhật bảo trì CHƯƠNG 2: NGÔN NGỮ THIẾT KẾ WEBSITE HTML & CSS Giới thiệu a HTML gì? HTML viết tắt HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản) nhà khoa học Mỹ - Tim Berners Lee định nghĩa năm 1989 HyperText : – Văn kết nối đến văn khác Sử dụng “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định cách biểu diễn trang web đến người sử dụng Một tập tin HTML tập tin văn có chứa thẻ định dạng (các thẻ giúp trình duyệt Web xác định cách trình bày trang Web) Một tập tin HTML phải có mở rộng htm html Một tập tin HTML viết trình soạn thảo văn đơn giản b Các thẻ HTML: Các thẻ HTML xác định nằm cặp ngoặc góc nhọn ‘’ Các thẻ HTML thường theo cặp: Thẻ mở (thẻ bắt đầu): Thẻ đóng (thẻ kết thúc): Ví dụ: cặp thẻ định dạng chữ đậm Xin chào Các thẻ HTML không phân biệt chữ thường hay chữ hoa c Các thuộc tính thẻ HTML: Thuộc tính dùng mơ tả chi tiết thẻ Thơng thường có dạng: Tên_thuộc_tính=“Giá trị” Các thuộc tính đặt thẻ sau: < Tên_thẻ Tên_thuộc_tính=“Giá trị”> Một thẻ có nhiều thuộc tính: < Tên_thẻ Tên_TT01=“Giá trị” Tên_TT02=“Giá trị”> Thẻ đóng khơng có thuộc tính Cấu trúc tập tin HTML HTML > Heading > liệu > … > liệu > HTML > : Khai báo tài liệu HTML : Khai báo phần thân cho tài liệu : Khai báo header đến header : Chèn ký tự kết thúc dòng: Khai báo đoạn : Kẻ đường nằm ngang : Chú thích.hẻ HTML a Thẻ HTML: - Cơng dụng: thẻ cho trình duyệt biết tài liệu HTML - Cú pháp: Nội dung… b Thẻ BODY: - Công dụng: thẻ khai báo phần nội dung tài liệu - Cú pháp: Nội dung… Các thuộc tính thẻ BODY: c Thẻ Headings – thẻ từ đến : - Công dụng: dùng định dạng kích thước chữ (thẻ tự động thêm dòng trống trước sau dòng có thẻ heading) + : heading lớn + : heading nhỏ d Thẻ : - Công dụng: dùng để ngắt dòng đoạn văn + Thẻ khơng có thẻ đóng e Thẻ
: - Cơng dụng: dùng để xác định đoạn văn tài liệu (HTML tự động thêm dòng trống trước sau thẻ
f Thẻ : - Công dụng: dùng để kẻ đường ngang tài liệu (không có thẻ đóng) g Thẻ : - Công dụng: dùng để thực ghi mã lệnh tài liệu Tạo bảng HTML a Các loại thẻ sử dụng với bảng: Thẻ Mô tả Tạo bảng Khai báo phần header cho bảng Tạo hàng Tạo ô Tạo tiêu đề cho bảng Tạo nhóm cột Khai báo giá trị thuộc tính cho hay nhiều cột bảng Định nghĩa phần đầu bảng Định nghĩa phần thân bảng Định nghĩa phần cuối bảng b Thẻ : - Công dụng: dùng để khai báo tạo cấu trúc bảng +Một bảng chia thành hàng (bằng cách dùng thẻ ), hàng chia thành ô liệu (bằng cách dùng thẻ ) + td chữ viết tắt "table data" tức nội dung ô liệu + Một ô liệu chứa văn bản, hình ảnh, danh sách, đoạn, biểu mẫu, bảng,… - Các thuộc tính: c Thẻ - Cơng dụng: tạo hàng bảng - Các thuộc tính: d Thẻ : - Công dụng: tạo ô bảng - Các thuộc tính: - Các lưu ý tạo bảng: + Các bảng khơng có nội dung hiển thị khơng hầu hết trình duyệt như: đường viền (ngoại trừ Mozilla Firefox có hiển thị) => Khắc phục: thêm vào ô liệu rỗng Biểu mẫu thông tin người dùng a Các loại thẻ sử dụng với biểu mẫu (form): b Thẻ - Công dụng: dùng để tạo biểu mẫu cho phép người dùng nhập vào liệu Một biểu mẫu chứa vùng văn (textfield), hộp kiểm (checkbox), nút radio (radio-button) thành phần khác Form dùng để chuyển liệu người dùng đến URL xác định - Các thuộc tính chức năng: c Thẻ : - Công dụng: dùng để khai báo nhãn cho điều khiển d Thẻ : - Công dụng: dùng để tạo trường nhập liệu mà người dùng đưa thơng tin liệu vào Nên sử dụng phần tử để khai báo nhãn cho điều khiển form e Thẻ : - Công dụng: dùng để tạo vùng văn (một điều khiển nhập liệu nhiều dòng) f Thẻ : - Công dụng: dùng để tạo trường nhập liệu mà người dùng phép chọn lựa hay nhiều tùy chọn tùy chọn sẵn có i Thẻ : - Công dụng: dùng để tạo danh sách đổ xuống, thường dùng chung với thẻ j Thẻ : - Công dụng: dùng để định nghĩa mục chọn danh sách đổ xuống (nên sử dụng chung với thuộc tính value) k Thẻ : - Cơng dụng: định nghĩa nhóm mục chọn danh sách đổ xuống m Thẻ : - Công dụng: dùng để tạo nút bấm - Cú pháp: có dạng nút bấm Nội dung hiển thị nút - Ý nghĩa: • : dùng tạo nút bấm chứa nội dung hình ảnh bên nút • : nút bấm đặc biệt dùng để xác nhận thông tin gởi từ form •