Bài giảng phân tích ứng dụng web

World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet. Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng một chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản. Chương trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử dụng yêu cầu (thông tin trong ô địa chỉ được gọi là tên miền (domain name)), rồi sau đó chương trình sẽ tự động gửi thông tin đến máy chủ (web server) và hiển thị trên màn hình máy tính của người xem. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web.

Trang 1

Phát triển ứng dụng Web Tài liệu lưu hành nội bộ

Cơ bản về phát triển ứng dụng Web

Triển khai hệ thống Web

Layout HTML & CSS

Ngôn ngữ lập trình PHP & MySQL

Phân tích thiết kế cơ sở

Trang 2

MỤC LỤC

Chương 1:Tổng quan về phát triển ứng dụng web 6

1.1 Các khái niệm cơ bản 6

1.1.1 Mạng máy tính 6

1.1.2 Giao thức 6

1.1.3 Địa chỉ IP 7

1.1.4 Tên miền 7

1.1.5 Máy chủ 8

1.1.6 Máy khách 8

1.1.7 Trang web, website, World Wide Web 9

1.2 Phân loại trang web 9

1.2.1 Web tĩnh 9

1.2.2 Web động 9

1.2.3 Web thế hệ mới 10

1.3 Các bước chính trong quá trình phát triển website 11

1.4 Công bố website trên Internet 11

Chương 2:KHÁO SÁT VÀ THIẾT KẾ WEBSITE 12

2.1 Khảo sát hệ thống 12

2.1.1 Tìm tác nhân hệ thống 12

2.1.2 Thu thập thông tin về các trường hợp sử dụng của từng tác nhân 12 2.1.3 Thu thập thông tin về chi tiết các chức năng 12

2.2 Thiết kế web (Design Website) 13

2.3 Site Structure 13

2.4 Wireframe 15

Trang 3

Chương 3:HTML 18

3.1 Giới thiệu chung về HTML 18

3.2 Trình bày tài liệu trong HTML 18

2.2.1 Thẻ thể hiện cấu trúc thẻ HTML 18

3.2.1 Thẻ meta 19

3.2.2 Thẻ định dạng khối 20

3.2.3 Thẻ định dạng danh sách 20

3.2.4 Các kí tự đặc biệt 21

3.2.5 Liên kết 21

3.2.6 Bảng 21

3.3 Multimedia 25

3.3.1 Hình ảnh 25

3.3.2 Âm thanh 26

3.3.3 Video 27

3.3.4 Flash 28

3.4 Khung-Frames 28

3.5 Forms 28

3.5.1 Giới thiệu 28

3.5.2 Các thành phần của form 29

3.5.3 Một số thuộc tính của form và Input 29

3.5.4 Gửi dữ liệu bằng POST/GET 31

Chương 4:Cascading Style Sheets 32

4.1 Giới thiệu 32

4.2 Các cách nhúng style cho văn bản HTML 32

4.3 Một số quy ước về cách viết CSS 33

4.4 Các lệnh cơ bản 35

Trang 4

4.4.1 Màu chữ và màu nền 35

4.4.2 Font chữ 36

4.4.3 Text 38

4.4.4 Pseudo-class for link 39

4.4.5 Class và Id 40

4.4.6 Span và Div 41

4.4.7 Box model 42

4.4.8 Margin và padding 43

4.4.9 Border 43

4.4.10 Height và Width 44

4.4.11 Float và Clear 45

4.4.12 Positions 49

4.4.13 Layers 50

4.5 Web standard 51

Chương 5:PHP căn bản 53

5.1 Giới thiệu 53

5.2 Cài đặt 53

5.3 Cú pháp 54

5.4 Biến 55

5.5 Chuỗi 55

5.6 Cấu trúc điều khiển 60

5.7 Lệnh lặp 64

5.8 Mảng 65

5.9 Hàm 68

Chương 6:PHP nâng cao 70

6.1 Hướng đối tượng 70

Trang 5

6.1.1 Các tính chất cơ bản 70

6.1.2 Lớp đối tượng trong PHP 71

6.2 Truyền nhận dữ liệu (POST/GET) 73

6.3 Cookies, Sessions 74

6.4 Xử lý ngày tháng 77

6.5 Xử lý tập tin & thư mục 79

6.6 Hình ảnh 83

6.7 E-mail, Secure E-mail 87

6.8 Xử lý lỗi 89

Chương 7:Phân tích thiết kế hệ thống 91

7.1 Thiết kế biểu đồ Usecases 91

7.2 Thiết kế biểu đồ hoạt động activities 92

7.3 Thiết kế biểu đồ trình tự 93

7.4 Thiết kế biểu đồ lớp 94

7.5 Thiết kế hệ thống theo kiến trúc MVC 95

7.5.1 Các thành phần trong MVC 95

7.5.2 Ưu điểm MVC 96

7.5.3 Nhược điểm 96

Chương 8:PHP và Cơ sở dữ liệu MySQL 97

8.1 Các kiểu dữ liệu trong MySQL 97

8.2 Các lệnh thông dụng trong MySQL 98

8.2.1 Các lệnh cơ bản kết nối trong MySQLi 98

8.2.2 Các lệnh cơ bản kết nối trong PDO 100

8.3 Các thao tác với CSDL MySQL (dùng PDO và mysqli) 101

8.3.1 Thao tác với MySQLi 101

8.3.2 Thao tác với PDO 102

8.4 Một số vấn đề khi thao tác với CSDL 102

Trang 6

Chương 9:Các vấn đề mở rộng 104

9.1 Thiết kế khuôn mẫu (design pattern) 104

9.1.1 Singleton Pattern 104

9.1.2 Factory Pattern 104

9.1.3 Proxy Pattern 105

9.1.4 Mô hình MVC 107

9.2 PHP và Ajax 108

9.2.1 Giao tiếp với máy chủ 109

9.2.2 Tạo một cá thể 112

9.2.3 Mở một kết nối đến máy chủ 113

9.2.4 Báo cho Ajax biết gọi phương thức nào 114

9.2.5 Gửi yêu cầu 115

9.2.6 Phản hồi không đồng bộ 116

9.3 Bảo mật ứng dụng Web 118

9.3.1 Các lỗi thường gặp 118

9.3.2 Cách khắc phục 122

Trang 7

CHƯƠNG 1: TỔNG QUAN VỀ PHÁT TRIỂN ỨNG DỤNG WEB

1.1 Các khái niệm cơ bản

Môi trường truyền mà các thao tác truyền thông được thực hiện qua đó Môitrường truyền có thể là các loại dây dẫn (dây cáp), sóng điện từ (đối với các mạngkhông dây)

Giao thức truyền thông là các quy tắc quy định cách trao đổi dữ liệu giữa cácthực thể

1.1.2 Giao thức

Giao thức (protocol) là tập luật quy định cách thức truyền thông giữa các hệthống máy tính Các giao thức cở bản hay sử dụng trong phát triển công nghệ webbao gồm:

- HTTP (HyperText Transfer Protocol - Giao thức truyền tải siêu văn bản) là mộttrong những giao thức chuẩn về mạng Internet, được dùng để liên hệ thông tingiữa Máy cung cấp dịch vụ (Web server) và Máy sử dụng dịch vụ (Web client) làgiao thức Client/Server dùng cho World Wide Web-WWW

- HTTPS: HTTPS là viết tắt của "Hypertext Transfer Protocol Secure", Nó là một

sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL hay TLS cho phép traođổi thông tin một cách bảo mật trên Internet Giao thức HTTPS thường được dùngtrong các giao dịch nhạy cảm cần tính bảo mật cao

- FTP thường được dùng để trao đổi tập tin qua mạng lưới truyền thông dùng giao

thức TCP/IP Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi là

trình chủ, lắng nghe yêu cầu về dịch vụ của các máy tính khác trên mạng lưới

Máy khách chạy phần mềm FTP dành cho người sử dụng dịch vụ, gọi là trình

khách Một khi hai máy đã liên kết với nhau, máy khách có thể xử lý một số thaotác về tập tin, như tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy củamình, đổi tên của tập tin, hoặc xóa tập tin ở máy chủ v.v

- SMTP (Giao thức truyền tải thư tín đơn giản) là một chuẩn truyền tải thư điện tửqua mạng Internet Trước khi một thông điệp được gửi, người ta có thể định vịmột hoặc nhiều địa chỉ nhận cho thông điệp - những địa chỉ này thường được

Trang 8

kiểm tra về sự tồn tại trung thực của chúng SMTP định nghĩa tất cả những gì cầnlàm với email Nó xác định cấu trúc của các địa chỉ tới, yêu cầu tên miền và bất

cứ điều gì liên quan đến email SMTP cũng xác định các yêu cầu cho Post OfficeProtocol (POP) và truy cập Internet Message Protocol (IMAP) máy chủ, do đóemail được gửi đúng cách

1.1.3 Địa chỉ IP

Địa chỉ IP (IP là viết tắt của từ tiếng Anh: Internet Protocol - giao thứcInternet) là một địa chỉ đơn nhất mà những thiết bị điện tử hiện nay đang sử dụng đểnhận diện và liên lạc với nhau trên mạng máy tính bằng cách sử dụng giao thứcInternet

Địa chỉ IP đang được sử dụng hiện tại là (IPv4) có 32 bit chia thành 4 Octet(mỗi Octet có 8 bit, tương đương 1 byte) cách đếm đều từ trái qua phải bít 1 cho đếnbít 32, các Octet tách biệt nhau bằng dấu chấm (.) và biểu hiện ở dạng thập phân đầy

Tên miền được tạo thành từ các nhãn không rỗng phân cách nhau bằng dấuchấm (.); những nhãn này giới hạn ở các chữ cái ASCII từ a đến z (không phân biệthoa thường), chữ số từ 0 đến 9, và dấu gạch ngang (-), kèm theo những giới hạn vềchiều dài tên và vị trí dấu gạch ngang Đó là dấu gạch ngang không được xuất hiện ởđầu hoặc cuối của nhãn, và chiều dài của nhãn nên trong khoảng từ 1 đến 63 và tổngchiều dài của một tên miền không được vượt quá 255 (RFC 1034)

Trang 9

1.1.5 Máy chủ

Figure 1 Mô hình Client server

Server còn được định nghĩa như là một máy tính nhiều người sử dụng(multiuser computer) Vì một server phải quản lý nhiều yêu cầu từ các client trênmạng cho nên nó hoạt động sẽ tốt hơn nếu hệ điều hành của nó là đa nhiệm với cáctính năng hoạt động độc lập song song với nhau như hệ điều hành UNIX,WINDOWS Server cung cấp và điều khiển các tiến trình truy cập vào tài nguyêncủa hệ thống Các ứng dụng chạy trên server phải được tách rời nhau để một lỗi củaứng dụng này không làm hỏng ứng dụng khác Tính đa nhiệm đảm bảo một tiến trìnhkhông sử dụng toàn bộ tài nguyên hệ thống Vai trò của server Như chúng ta đã bàn ởtrên, server như là một nhà cung cấp dịch vụ cho các clients yêu cầu tới khi cần, cácdịch vụ như cơ sở dữ liệu, in ấn, truyền file, hệ thống Các ứng dụng server cung cấpcác dịch vụ mang tính chức năng để hỗ trợ cho các hoạt động trên các máy clients cóhiệu quả hơn Để đảm bảo tính an toàn trên mạng cho nên server này còn có vai trònhư là một nhà quản lý toàn bộ quyền truy cập dữ liệu của các máy clients, nói cáchkhác đó là vai trò quản trị mạng Có rất nhiều cách thức hiện nay nhằm quản trị cóhiệu quả, một trong những cách đang được sử dụng đó là dùng tên Login và mật khẩu

1.1.6 Máy khách

Client Trong mô hình client/server, ta còn định nghĩa một máy client là mộtmáy trạm mà chỉ được sử dụng bởi 1 người dùng Máy client có thể sử dụng các hệđiều hành bình thường như Win9x, DOS, OS/2, WIN7, WIN8… Máy khách trong môhình phát triển ứng dụng web được trang bị những phần mềm trình duyệt đề có thểduyệt và tương tác với hệ thống web trên máy chủ (server) Ví dụ: Firefox, chrome,

Trang 10

Internet explorer, opera… Việc tồn tại quá nhiều trình duyệt cũng gây khó khăn chocác lập trình viên trong việc xây dựng web để có tính tương thích cao Ngoài ra tạimáy khách cũng có thể được cài đặt những phần mềm đặc biết để kết nối tới server vàthực hiện nhưng thao tác về file, dữ liệu hoặc email Ví dụ như các phần mềm FTP,email…

1.1.7 Trang web, website, World Wide Web

World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là mộtkhông gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua cácmáy tính nối với mạng Internet

Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu vănbản (hypertext), đặt tại các máy tính trong mạng Internet Người dùng phải sử dụngmột chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản.Chương trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sửdụng yêu cầu (thông tin trong ô địa chỉ được gọi là tên miền (domain name)), rồi sau

đó chương trình sẽ tự động gửi thông tin đến máy chủ (web server) và hiển thị trênmàn hình máy tính của người xem Người dùng có thể theo các liên kết siêu văn bản(hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồitheo máy chủ trong một quá trình tương tác Hoạt động truy tìm theo các siêu liên kếtthường được gọi là duyệt Web

Website còn gọi là trang web, trang mạng, là một tập hợp trang web, thườngchỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet.Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTPhoạc HTTPS Website có thể được xây dựng từ các tệp tin tĩnh HTML (website tĩnh)hoặc vận hành, chạy trên máy chủ có sự tương tác với người sử dụng (website động)

1.2 Phân loại trang web

1.2.1 Web tĩnh

Là hệ thống web được xây dựng dựa trên thuần túy văn bản hoặc HTML Nộidung của site sẽ không thây đổi được trừ khi người quản trị website can thiệp trực tiếpvào mã nguồn của web

1.2.2 Web động

Là hệ thống web được xây dựng dựa trên các công nghệ giúp cho người dùng

có thể tương tác với web site Nội dung của site có thể bị thay đổi bời người dùng màkhông cần phải can thiệp trực tiếp vào mã nguồn của web Ta thường sử dùng một sốcông nghệ để lập trình sự tương tác này như ASP, PHP, JSP Và thường một hệ quảntrị cở sở dữ liệu sẽ được sử dụng để lưu trữ dữ liệu trên web động

Trang 11

1.2.3 Web thế hệ mới

Web 1.0 là hình thức xuất bản nội dung lên Internet 1 chiều, thời kỳ cựcthịnh của chúng là những năm 1995 - 2004

Web 2.0 là thế hệ thứ 2 của web, nó cung cấp nhiều ứng dụng hơn cho người

sử dụng, các thông tin và dữ liệu được cập nhật hàng ngày Trong đó người sử dụng

có thể tham gia đóng góp, chia sẻ thông tin , làm phong phú cho trang web một cách

dễ dàng

Để phân biệt có những dấu hiệu sau:

Mức độ tập trung Tập trung một nơi Phân tán nhiều nơi

Mức độ tương tác Dành cho cá nhân Dành cho cá nhân , tập thể, xã hội Mức độ nội dung Cung cấp nội dung Cung cấp các dịch vụ và hệ giao tiếp

lập trình ứng dụng (APIs)

Mức độ liên kết Truyền phát giữa các hệ thống Đồng bộ giữa các hệ thống

Mức độ hệ thống Hệ thống bao gồm cấu trúc, nội dung tạora đã có tính toán trước Tự sản sinh, tự đề xuất

Mức độ truy xuất Cứng nhắc, không linh hoạt Quan hệ mềm dẻo, lỏng

Trang 12

1.3 Các bước chính trong quá trình phát triển website

Xây dựng danh sách yêu cầu người dùng, quá trình này đảm bảo mọi yêu cầucủa người sử dụng đều đước tính đến và lưu lại

Phân tích và thiết kế hệ thống, Hệ thống sẽ được xây dựng dựa trên một sốcông nghệ, ngôn ngữ thiết kế hiện tại như UML Hệ thống sẽ được mô hình hóa và lưutrữ dười dạng tài liệu và các sơ đồ thiết kế

Triển khai thực hiện xây dựng hệ thống, hế thống sẽ được xây dựng dựa trêncác công nghệ đã được lựa chọn ví dự như PHP&MySQL, và được phát triển theo cácbản thiết kế đã được xây dựng từ bước trước

Kiểm thử và bảo trì hệ thống, hệ thống sau khi được xây dựng sẽ được kiểmthử với danh sách thử đã được đặt ra khi thiết kế hệ thống Hệ thống sẽ được bảo trìliên tục theo yêu cầu hoặc định kỳ

1.4 Công bố website trên Internet

Quá trình công bố web site trên mạng internet bao gồm các bước sau :

- Chuẩn bị hệ thống web sẵn sàng cái đặt, như đã được xây dựng ở bước trên

- Chuẩn bị về hosting và domain Quá trình lựa chọn domain cần tìm phải đơngiản, dể hiểu và gần gũi với nội dung website Hệ thống hosting cần phải hộ trợcác đặc tính về công nghệ cho phù hợp với hệ thống web đã xây dựng(vd: nếubạn xây dựng web trên nền java bạn cần server hỗ trợ JSP )

- Config server để phù hợp chạy web Ta cần config hoặc tạo một số yêu cầu cầnthiết của server cho phù hợp với hệ thống web Ví dụ tạo trước CSDL rỗng

- Thực hiện cài đặt hệ thống web Quá trình này đôi khi đòi hỏi cần cài đặt cả hệthống file và hệ thống CSDL

- Công bố site trên internet Site sau khi hoạt động sẽ được quảng cáo trên mạnginternet cũng như trong đời sống để thu hút người sử dụng Ta cũng cần một sốnhững thủ thuất để tối ưu hóa hệ thống để công cụ tìm kiếm tìm tới site tốt hơn(SEO)

Trang 13

CHƯƠNG 2: KHÁO SÁT VÀ THIẾT KẾ WEBSITE

2.1 Khảo sát hệ thống

2.1.1 Tìm tác nhân hệ thống

Đây là bước nhà phát triển cần tìm ra tất cả các tác nhân của hệ thống và thựchiện phân nhóm theo đối tượng sử dụng Từng nhóm sẽ hình thành tác nhân, đâychính là đối tượng chính sẽ sử dụng hệ thống web do vậy quá trình tìm hiểu và thuthập thông tin cần cực kỳ chi tiết và rõ ràng Sau khi hoàn thành bước này ta cần trả

lời được câu hỏi: Ai là người sử dụng hệ thống?

Ví dụ: Một hệ thống bán hàng trực tuyến có thể có: khách hàng, quản trị viên,quản lý kho, nhà cung cấp

2.1.2 Thu thập thông tin về các trường hợp sử dụng của từng tác nhân

Với từng tác nhân đã tìm được ở bước trên ta cần xem họ sẽ có những yêu cầu gì

về chức năng đối với hệ thống, các chức năng này cần sát với yêu cầu người sử dụng

Sau khi hoàn thành quá trình thu thập này ta sẽ trả lời được câu hỏi: Các tác nhân sử

2.1.3 Thu thập thông tin về chi tiết các chức năng

Sau khi đã liệt kê được hết các chức năng (trường hợp sử dụng) của hệ thống,người thu thập thông tin dự án tại bước này cần làm rõ từng chức năng một đã tìmđược Nên thu thập và tổ chức việc mô tả chức năng này theo từng bước nhỏ Sau khi

hoàn thành quá trình thu thập này ta sẽ trả lời được câu hỏi: Các tác nhân sử dụng

từng chức năng của hệ thống đó như thế nào?

Ví dụ:

1 Khách hàng sau khi vào trang chủ

2 Click vào trang phản hồi

3 Điền thông tin và form phản hồi

4 Click gửi thông tin

Trang 14

2.2 Thiết kế web (Design Website)

2.3 Site Structure

Như ta đã biết một hệ thống website được xây dựng dựa trên nhiều trang (webpage) Những trang web này thể hiện những chủ đề chính của hệ thống và cần được tổchức lại để tạo nên một kiến trúc chung cho toàn bộ website Một kiến trúc hợp lý sẽgiúp cho người sử dụng dễ dàng và nhanh chóng truy cập tới các thông tin mà họmuốn tìm

Để có thể xây dựng nên một kiên trúc hợp lý ta cần thực hiện các bước sau:

Figure 2 Topic, chức năng và mối quan hệ giữa chúng.

Xây dựng các chủ đề và chức năng chính cho toàn bộ hệ thống website Sau đóxác định mối quan hệ giữa chúng

Figure 3 Tổ chức site structure.

Thực hiện tối ưu và sắp xếp các chủ đề và chức năng theo dạng cây Chú ýnhưng điểm sau: Không nên xây dựng kiến trúc quá dàn trải mà nên phân nhóm, nếukhông site sẽ trở nên quá rộng đồi với người sử dụng (hình 3 bên trái) Không để liênkết của các chủ đề và chức năng quá sâu, nếu không người sử dụng sẽ càm thấy chánnản khi tìm thông tin của mình vì nó mất quá nhiều thời gian và thao tác (hình 3 bênphải)

Việc tổ chức hớp lý sẽ tạo được xương sống quá toàn bộ site.( site map)

Trang 16

2.4 Wireframe

Wireframe là một kịch bản đồ họa: như một loạt các hình minh họa, hình ảnhhiển thị theo thứ tự để giúp hình dung ra một vần đề nhanh chóng Khi xây dựng mộttrang web ta thường hình dung ra các khối thông tin (block), các khối này khi sắp xếpvới nhau sẽ hình thành nên một trang

Thường Wireframe được bắt đầu bằng trang chủ, đây là trang quan trọng nhấtcủa toàn bộ hệ thống website Khi thiết kế site, ta chỉ có khoảng 3 tới 5 giây để thu hútkhách do vậy trang web phải thật đơn giản, nếu nó phức tạp và rối thì sẽ gây khó khăncho ngưởi sử dụng

Ví dụ về Wireframe trang chủ

Trang 17

Wireframe trang danh mục sản phẩm

Trang 18

Trang chi tiết sản phẩm:

Trang 19

CHƯƠNG 3: HTML

3.1 Giới thiệu chung về HTML

HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để xây dựng web.Trong các thành phần của web thì đây thành phần cơ bản nhất Cho dù trang web có

sử dụng PHP, ASP hay JAVA để lập trình, nhưng nếu muốn hiển thị nội dung lêntrình duyệt ta đều cần hiểu về cách trình bày văn bản HTML Đây chính là định dạng

mà trình duyệt web có thể đọc được và hiển thị nội dung theo nó

Thậm chí ta có sử dụng những CMS (Content Management System) nhưJoomla, Drupal, Wordpress… thì đầu ra cuối cùng vẫn sẽ là HTML Cho nên hiểu vàbiết cách vận hành HTML là rất cần thiết cho bất kì nhà phát triển hệ thống web nào

 HTML là chữ viết tắt của Hyper Text Markup Language hay tiếngViệt gọi là Ngôn ngữ đánh dấu siêu văn bản

 HTML không phải là ngôn ngữ lập trình, mà là một ngôn ngữ đánh dấu( hiển thị) bao gồm tập các thẻ hiển thị (HTML Tag)

 HTML dùng các HTML tags để miêu tả trình bày một trang web

 Một file HTML chứa những thẻ HTML

 Những thẻ HTML sẽ hướng dẫn trình duyệt web trình bày thành phầncủa một trang web

 Một file HTML phải có phần mở rộng là html hoặc htm

 Một file HTML có thể được tạo ra bởi trình soạn thảo văn bản đơn giảnnhư Notepad

3.2 Trình bày tài liệu trong HTML

 Các tag đầu tiên trong một cặp là thẻ bắt đầu, các thẻ thứ hai là thẻ kết thúc

 Thẻ Bắt đầu và thẻ kết thúc còn được gọi là thẻ mở và thẻ đóng

 Thẻ đóng kết thúc bằng dấu / (</tenthe>)

 Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở

 Một số thẻ chỉ có thẻ mở mà không có thẻ đóng (như các thẻ <img>, <br />,

<hr />)

Trang 20

Cách thực hiện để chạy một file HTML, lưu file lại với tên là

"myfirstpage.html" vào desktop Sau đó đóng trình soạn thảo Notepad hoặc SimpleText lại và tìm đến file myfirstpage.html ở desktop rồi nhấp đúp vào trình duyệt sẽhiển thị nội dung của trang

3.2.1 Thẻ meta

Thẻ meta là thẻ thông tin cho một văn bản HTML Thẻ này sẽ không hiển thịđối với người sử dụng, nó sẽ được ẩn và thể hiện một nội dung nào đó cho phép cácứng dụng có thể đọc và hiểu thông qua từng nội dung của thẻ Thẻ Meta phải nằmtrong thẻ HEAD của văn bản HTML

Trang 21

Thẻ P: Được dùng để định dạng đánh dấu một đoạn văn bản.

Thẻ H1, H2…: Được dùng để đánh dấu đề mục trong văn bản

- Danh sách không theo thứ tự (Unorder list- UL)

- Danh sách theo thứ tự (Ordered List – OL)

- Một hoặc nhiều thể phần tử trong danh sách (List Item – LI)

Trang 22

3.2.4 Các kí tự đặc biệt

Ðôi khi trong trang Web của bạn có các ký tự đặc biệt, chẳng hạn như ký tựkhông phải là tiếng Anh, một dấu nhấn HTML quy định việc hiển thị các ký tự đónhư sau

&XXXX;

Trong đó XXXX là tên mã cho các ký tự đặc biệt đó Bạn có thể xem Danhsách các ký tự đặc biệt này để biết thêm chi tiết Trong trang Web của bạn nhiều lúcphải hiển thị các ký tự như dấu lớn hơn (>) hoặc dấu nhỏ hơn (<), dấu và (&) , màcác ký tự này trùng với ký hiệu của một tag Ðể hiển thị các ký tự này, HTML cungcấp cho ta các ký hiệu thay thế như sau:

< thay cho <

> thay cho >

& thay cho &

<a href="http://google.com.vn" target="_blank">Google pages</a>

Các thuộc tính (Attribute) của thẻ <a>

1 href: quy định địa chỉ (url) mà liên kết trỏ tới

2 target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu:

_self (trang hiện tại), _blank (cửa sổ mới),

3.2.6 Bảng

Bảng trong HTML được định nghĩa bởi thẻ <table> Một bảng được chia thànhcác hàng (row, định nghĩa bởi <tr>), và mỗi hàng được chia thành các cột (column,định nghĩa bởi <td>) Ngoài ra bảng còn có các thẻ khả để định nghĩa các thành phầnnhư heading <th>, body <tbody>… giúp cho qua trình thể hiện bảng được rõ rànghơn

Trang 23

Khi xây dựng bảng, hãy nhớ quy tắc sau: bắt đầu từ ô cao nhất bên trái, tiếptheo xây dựng các ô của hàng đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựngcác phần tử của hàng thứ 2

> > > > -> > | -

| > > > > -> >

Ðể tìm hiểu về các tag cơ bản của bảng, trước hết ta xét ví dụ sau

Mỗi hàng được xác định bởi <tr> và </tr> viết tắt của table row

Mỗi ô được định nghĩa bởi <td> và </td> viết tắt của table data

Ðể căn chỉnh lề trong mỗi ô, bạn thêm các thuộc tính sau vào tag <td>

Chỉnh lề theo chiều ngang

Trang 24

<td align = left> sắp xếp về bên trái

<td align = right> sắp xếp về bên phải

<td align = center> sắp xếp vào giữa

Trang 25

Ðể tạo được những bảng như trên, chúng ta sử dụng các thuộc tính colspan vàrowspan trong tag <td> </td>

Thuộc tính colspan=x có tác dụng mở rộng cột của bảng, ví dụ trong bảng 1 để

mở rộng ô thứ 2 của hàng 1 ra rộng bằng hai cột bình thường ta đặt:

Thuộc tính rowspan có tác dụng mở rộng hàng của bảng, trong bảng 2 để mởrộng ô thứ 2 của hàng 2 ra rộng bằng 2 hàng bình thường ta đặt:

Ðiều khiển xuống hàng trong một ô.

Trong một ô, nếu muốn giữ dòng văn bản trên một dòng, tức là không cho nóxuống hàng thì thêm thuộc tính nowrap vào trong tag <td> hoặc <th>

Thêm đầu đề vào bảng (caption)

Ngay sau tag <table>, bạn gõ vào tag <catpion> tựa đề của bảng, và kết thúcbằng tag đóng </caption>

Trang 26

- src là đường dẫn tới file ảnh, có thể là đường dẫn tương đối và đường dẫn tuyệt đối.

- alt là text được sử dụng thay thế cho file ảnh khi ảnh không thể load

- width và height là 2 thông số về chiều rộng và chiều cao của ảnh

Trang 27

3.3.2 Âm thanh

Quá trình thể hiện âm thanh trong HTML khá phức tạp Có khá nhiều cách thểhiện, thông thường ta có nhưng cách sau, sử dụng player trung gian để chạy file audiotrên trình duyệt, sử dụng code của HTML5 để chạy file audio… Mỗi cách có ưu vànhược điểm riêng

Sử dụng plugin:

- type là loại media được chay tương ứng với src

Sử dụng kết hợp cả hai, với cách sử dụng này player cua HTML5 sẽ được gọi nếukhông thể chạy được file đó, plugin của trình duyệt sẽ được gọi để chạy file

Trang 28

3.3.3 Video

Quá trình thể hiện video trong HTML cũng tương tự như audio, ta có thể sửdụng plugin và sử dung code HTML5

Sử dụng plugin:

</video>

Trong đó:

- src là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc tươngđối

- type là loại media được chay tương ứng với src

- height/width là chiều cao và chiều rộng của player

Sử dụng kết hợp cả hai, với cách sử dụng này player cua HTML5 sẽ được gọi nếukhông thể chạy được file đó, plugin của trình duyệt sẽ được gọi để chạy file

</embed>

</object>

</video>

Trang 29

Trong đó:

- src là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc tươngđối

- type là loại media được chạy tương ứng với src

3.3.4 Flash

Sử dụng thẻ object và plugin từ flash player để chạy

- Param có name =”src” trỏ tới file flash

3.4 Khung-Frames

Sử dụng thẻ iframe để đưa nội dung của một site khác vào site hiện tại

- Thẻ định nghĩa form:

Trang 30

input elements

</form>

3.5.2 Các thành phần của form

- Thẻ định nghĩa dữ liệu text:

<form action=”diachifileguithongtintoi.php” method=”get”>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" />

</form>

- Thẻ định nghĩa dữ liệu là kiểu mật khẩu:

<form action=”diachifileguithongtintoi.php” method=”get”>Password: <input type="password" name="pwd" />

</form>

- Thẻ định nghĩa dữ liệu là kiểu lựa chọn radio:

<input type="radio" name="sex" value="female" /> Nữ

</form>

- Thẻ định nghĩa dữ liệu là kiểu lựa chọn checkbox:

<input type="checkbox" name="vehicle" value="Car" /> Tôi có xe máy

</form>

- Thẻ định nghĩa nút bấm submit:

<input type="checkbox" name="vehicle" value="Car" /> Tôi có xe máy

</form>

3.5.3 Một số thuộc tính của form và Input

Một số thuộc tính của thẻ FORM:

Trang 31

accept MIME_type Chỉ rõ những kiểu file có thể upload

thông qua formaccept-charset character_set Chỉ rõ những hệ mã hóa kí tự có thể

sử dụng trong form

enctype

urlencoded

application/x-www-form-multipart/form-datatext/plain

Chỉ rõ phương thức mã hóa dữ liệukhi form gửi dữ liệu tới server (chỉ

sử dụng cho method="post")

(Thuộc tính bắt buộc)Một số thuộc tính của thẻ INPUT

Thuộc tính Giá trị có thể có Giải thích

Định nghĩa cho một phần tử đã được chọn sẵn.( Chỉ sử dụng cho type="checkbox" hoạctype="radio")

disabled disabled Định nghĩa nếu thẻ input này không được sử dụng.maxlength number Định nghĩa số lượng tối đa các kí tự có thể có trong

thẻ input

readonly readonly Định nghĩa nếu thẻ chỉ được phép đọc

src URL Chỉ rõ đường dẫn cho file ảnh (chỉ sử dụng cho

type="image")type button Định nghĩa kiểu cho loại thẻ INPUT

Trang 32

checkboxfilehiddenimagepasswordradioresetsubmittextvalue text Chỉ rõ giá trị của thẻ.

3.5.4 Gửi dữ liệu bằng POST/GET

Theo định nghĩa phương thức GET được sử dụng khi gửi dữ liệu của form sẽ tựđộng thêm dữ liệu theo từng cặp name=value vào URL Với phương thức POST dữliệu trong form khi gửi sẽ được mã hóa và gửi theo HTTP POST

Với hai phương thức gửi dữ liệu GET và POST ta cần chú ý một số điểm sau:

- Sử dụng GET cho những giao dịch an toàn, sử dụng POST cho nhữnggiao dịch không an toàn

- Sử dụng POST cho các dữ liệu nhạy cảm

- Sử dụng POST cho dữ liệu có kích cỡ lớn

- Sử dụng GET cho các request AJAX

Trang 33

CHƯƠNG 4: CASCADING STYLE SHEETS

4.1 Giới thiệu

CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạngfile text với phần tên mở rộng là css Trong Style Sheet này chứa những câu lệnhCSS 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.v

Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa cácthành phần trình bày và nội dung với nhau Nhưng với sự xuất hiện của CSS, người ta

có thể tách rời hoàn toàn phần trình bày và nội dung Giúp cho phần code của trangweb cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn Ví dụ nếu làm việc vớiHTML và muốn font chữ của toàn bộ trang web là Arial, sẽ phải làm đi làm lại nhưthế cho tất cả các file html mà bạn có Nhưng nếu bạn sử dụng CSS, thì chỉ cần làmmột lần và tất cà các trang khác sẽ tự động được thay đổi

4.2 Các cách nhúng style cho văn bản HTML

Hiện tại có ba cách để định dạng văn bản sử dụng CSS: cục bộ, nhúng vàotrang và liên kết đến một file CSS riêng biệt Trong thực tế thì cách cuối cùng là liênkết đến một file riêng biệt được sử dụng phổ biến nhất

Cục bộ: code CSS được chèn trực tiếp vào trong thẻ HTML Cách định dạngcục bộ là bạn sử dụng code CSS chèn trực tiếp vào thẻ HTML và chỉ có tác động lênthẻ đó

Ví dụ

Nếu bạn thêm code CSS vào trong thẻ này nó sẽ thay đổi cách hiển thị trên trình duyệt

</p>

Nhúng vào trang web Cách thứ hai là khai báo code CSS nằm trong cặp thẻ

có tác động cục bộ lên file chèn đoạn code CSS này Nó có phạm vi ảnh hưởng lớnhơn là cách chèn cục bộ được nói ở trên, nhưng nó không có ảnh hưởng đến các filekhác trong cùng một trang web Ví dụ:

<head>

<title>Nhúng vào trang</title>

Trang 34

h1 {font-size: 16px;}

p {color:blue;}

</style>

</head>

Liên kết đến một file biệt lập Thực tế cách cuối cùng này mới là thế mạnh thực

sự của CSS bởi vì chỉ cần tạo ra một file CSS và viết code chỉ một lần Nó sẽ ảnhhưởng đến toàn bộ trang web chứ không chỉ ảnh hưởng đến một file html đơn lẻ hoặcchỉ một thẻ trong hàng ngàn thẻ mà bạn có Bằng cách này ta có thể tách rời hoàn toànnhững thành phần trình bày và nội dung ra khỏi nhau Nếu viết toàn bộ code CSStrong một file và liên kết nó đến những trang còn lại, thì việc thay đổi sửa chữa trangweb trở nên cực kỳ đơn giản Để liên kết file CSS đến tất cả các file html chỉ cầnchèn đoạn code sau vào giữa thẻ <head></head> của tài liệu:

Và trình duyệt sẽ tự động dùng file style_sheet.css để định dạng cho trang web củabạn Tất nhiên trong file style_sheet.css bạn đã viết code CSS rồi

4.3 Một số quy ước về cách viết CSS

Dưới đây là một ví dụ rất đơn giản của CSS thể hiện về cú pháp của câu lệnhCSS Nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương

h3 {color: blue;}

Code HTML như sau

<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>

Về cơ bản cú pháp của CSS bao gồm 2 phần chính: Selector và Declaration.Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và Declaration sẽ quyếtđịnh đối tượng đó bị ảnh hưởng như thế nào Ở ví dụ trên, thẻ h3 là Selector và phần{color: blue;} là Declaration Trong Declaration cũng có 2 phần là: Property và Value.Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởngnhư thế nào Ở ví dụ trên color là Property nó quyết định sẽ tác động đến màu của h3

và blue là Value, nó quyết định màu sẽ là màu xanh Một số lưu ý khi sử dụng các câulệnh CSS:

Trang 35

Nhóm nhiều Declaration vào một dòng

p {color:blue; font-size:12px; line-height:15px;}

nếu ta có một đoạn văn bản như sau trong code html

<p>Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các Declaration ở trên</p>

nó sẽ có màu xanh, cỡ chữ là 12px và độ cao giữa các dòng là 15px

Lưu ý: Mỗi Declaration được ngăn cách bởi dấu chấm phẩy ; dấu chấm phẩy ởcuối cùng không bắt buộc, nhưng nên cho vào để sau này nếu có thêm Declaration sẽkhông bị quên

Để nhóm nhiều Selector vào một dòng, nếu ta muốn chữ từ h1 đến h6 có màu

đỏ và được in nghiêng bạn có thể viết

Trang 36

4.4 Các lệnh cơ bản

4.4.1 Màu chữ và màu nền

Để có thể định dạng nền của một thành phần HTML ta có thể sử dụng các địnhdạng sau:

background-color // background-image //chỉ định hình ảnh được sử dụng trongnền

background-repeat // chỉ định tính lặp lại của nền

background-attachment // chỉ định kiểu di chuyển của nền

Trong đó url là đường dẫn tương đối hoặc tuyệt đối của file ảnh

Với một hình ảnh nên đã được xác định ta còn có thể định dạng cho hình ảnh đó cóthể lặp theo chiều X hoặc Y hoặc cả 2 chiều bằng cách sử dụng thuộc tính repeat

Trang 37

Ta có thể viết tắt các câu lệnh trên theo cú pháp rút gọn đã được học.

body {background:#ffffff url('img_tree.png') no-repeat right top;}

4.4.2 Font chữ

Trong CSS hệ thống font chữ có thể định dạng được các thuộc tính sau: loạifont chữ (font family), độ dạy của font chữ (font boldness), cỡ font chữ (font size),kiểu font chữ (font style)

Font families

Có 2 loại nhóm font trong CSS: generic family là nhóm các loại font có cùngkiểu dáng với nhau Font family là một font cụ thể đã được định nghĩa sẵn

Serif Times New RomanGeorgia

Serif fonts thường có những dòng kẻ ở cuốicác kí tự

Sans-serif Arial

Verdana

Không có những dòng kẻ ở điểm cuối của các

kí tự

Lucida Console Với kiểu này các kí tự đếu có cùng chiều rộng

Để định dạng font family trong CSS ta sử dụng cú pháp sau:

p{font-family:"Times New Roman", Times, serif;}

Trang 38

Trong đó "Times New Roman" là font family, Times là font family thứ 2 sẻđược sử dụng nếu trình duyệt không hỗ trợ font family thứ nhất, serif là định nghĩageneric font.

Font weight

Để định dạng độ dày của chữ ta sử dụng thuộc tính font-weight của CSS Các giá trị

có thể nhận của thuộc tính này là: normal, bold, bolder, lighter, các giá trị từ 100 tới900

Cú pháp cho việc định dạng độ dày như sau:

cỡ chữ khi duyệt web

Mặc định font-size của paragraph nếu không được định nghĩa sẽ là 16px

Cú pháp để định nghĩa font-size cho văn bản Việc sử dụng đơn vị EM sẽ giúp tươngthích với các trình duyệt thấp của IE

Trang 39

Các văn bản trong CSS có thể được căn lề theo giữa (centered), trái (left), phải (right)

và căn giãn tự động (các chữ trong dòng sẽ được tự động giãn ra để các dòng có cùngchiều rộng) Ví dụ:

h4 {text-decoration:blink}

Trang 40

4.4.4 Pseudo-class for link

Pseudo có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class haygọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như nhữngclass thông thường Pseudo Class sẽ tạo ra thay đổi tới thành phần của XHTML khimột sự kiện nào đó sẽ xảy ra Pseudo Class được sử dụng thông dụng nhất với cácđường liên kết khi người dùng di chuột qua hoặc nhấp vào nó Với những trình duyệtmới hơn (trừ Internet Explorer 6) ta có thể dễ dàng tạo ra hiệu ứng Rollover với bất cứthành phần nào trên trang chứ không chỉ thẻ <a>

Pseudo Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo

ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó ví dụ nhưnhững đường liên kết trên izwebz, khi ta di chuột qua sẽ có màu nền là màu xanh nhạt

Có tất cả 4 trạng thái của đường liên kết

 Link: đơn thuần là đường liên kết để báo cho người đọc biết nó làđường liên kết

 Visited: Người đọc đã từng nhấp chuột vào link này rồi

 Hover: Người đọc di chuột qua đường liên kết

 Active: Đường liên kết đang được người đọc nhấp chuột

Tương đương với 4 Pseudo Class

Định dạng
Số trang	126
Dung lượng	0,96 MB