Thiết kế web

+ Phần mô tả máy local host: Nếu tất cả các bit của vùng mô tả máy bằng 0, thì địa chỉ IP dùng để mô tả địa chỉ mạng network address; Nếu tất cả các bit của vùng mô tả máy bằng 1, thì đị

Trang 3

LỜI GIỚI THIỆU

Trong khoảng thời gian gần đây, lập trình di động đang là một ngành hot Các mẩu tin tuyển dụng gần nhất mình đọc thường tuyển Android developer, iOS developer, … với mức lương khá cao, không thua kém gì lập trình web hay lập trình hệ thống nhúng Ngoài ra, nếu biết cách lập trình ứng dụng, bạn cũng có thể làm freelance, hoặc tự phát triển ứng dụng và kiếm tiền thông qua ứng dụng của mình Để phục vụ việc học tập và nghiên cứu của sinh viên Công nghệ thông tin, trường Cao đẳng Công nghiệp Nam Định,

chúng tôi biên soạn giáo trình Thiết kế Web Giáo trình bao gồm 4 chương, mỗi chương

đều có phần kiến thức lý thuyết, câu hỏi và phần thực hành cụ thể:

Chương 1 Tổng quan

Chương 2 Định dạng bằng CSS

Chương 3: Adobe DreamWeaver 2019

Chương 4 Scripts trong trang web

Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng một ứng dụng Web tĩnh từ

cơ bản đến nâng cao bằng công nghệ HTML, CSS và Script Được biên soạn với phương châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh viên những kiến thức cơ bản phục vụ cho nghiên cứu, thiết kế ứng dụng Web

Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập và nghiên cứu của sinh viên trường Cao đẳng Công nghiệp Nam Định Do thời gian có hạn nên trong phạm vi cuốn giáo trình, không thể đề cập được tất cả những vấn đề nóng hổi trong lĩnh vực thiết kế Web Nhóm tác giả rất mong nhận được các ý kiến đóng góp từ các thầy cô để tài liệu hoàn chỉnh hơn

Nam Định, 27 tháng 04 năm 2020

Chủ biên

Lê Hữu Toản

Trang 4

1

MỤC LỤC

LỜI GIỚI THIỆU 1

MỤC LỤC 1

DANH MỤC CHỮ VIẾT TẮT 4

DANH MỤC BẢNG, HÌNH VẼ 5

Chương 1 TỔNG QUAN 8

1.1 KHÁI NIỆM CƠ BẢN VỀ WEB 8

1.1.1 Giới thiệu về world wide web 8

1.1.1.1 Internet 8

1.1.1.2 Địa chỉ IP 9

1.1.1.3 Tên miền (Domain name) 10

1.1.1.4 World Wide Web (WWW) 11

1.1.2 Giao thức truyền siêu văn bản 12

1.1.3 Web tĩnh, Web động 13

1.1.3.1 Trang web 13

1.1.3.2 Web tĩnh 14

1.1.3.3 Web động 14

1.1.4 Ngôn ngữ kịch bản 15

1.2 NGÔN NGỮ HTML 15

1.2.1 Giới thiệu HTML 15

1.2.2 Cấu trúc trang HTML 15

1.2.3 Thẻ và cấu trúc thẻ 16

1.2.3.1 Các thẻ chính của trang web 16

1.2.3.2 Thẻ định dạng kí tự 18

1.2.3.3 Thẻ đường kẻ ngang 20

1.2.3.4 Chèn hình ảnh 21

1.2.3.5 Định dạng đoạn 22

1.2.3.6 Tạo bảng (Table) 23

1.2.3.7 Tạo liên kết (Hyperlink) 24

1.2.3.8 Tạo khung (Frame) 24

1.2.3.9 Tạo Form 25

TÓM TẮT NỘI DUNG CHƯƠNG 1 28

BÀI TẬP CHƯƠNG 1 29

BÀI THỰC HÀNH CHƯƠNG 1 30

HƯỚNG DẪN TỰ HỌC Ở NHÀ 39

Trang 5

2

NỘI DUNG THẢO LUẬN 40

Chương 2 ĐỊNH DẠNG BẰNG CSS 42

2.1 KHÁI NIỆM CSS 42

2.2 QUY ƯỚC VỀ CSS 43

2.2.1 Cú pháp CSS 43

2.2.2 Đơn vị CSS 44

a Đơn vị chiều dài 44

b Đơn vị màu sắc 44

2.2.3 Vị trí đặt CSS 45

2.3 SỬ DỤNG STYLE TRONG CSS 46

2.3.1 Mức độ ưu tiên style 46

2.3.2 Cách khai báo style 47

2.3.3 Một số Style cơ bản 47

2.3.3.1 Background 47

2.3.3.2 Font Chữ 48

2.3.3.3 Text 49

2.3.3.4 Định dạng liên kết 49

2.3.3.5 Span & Div 50

2.3.3.6 Margin & Padding 50

2.3.3.7 Border 51

2.3.3.8 Height & Width 51

HƯỚNG DẪN TỰ HỌC Ở NHÀ 61

NỘI DUNG THẢO LUẬN CHƯƠNG 2 62

Chương 3 ADOBE DREAM WEAVER 2019 63

3.1 MỘT SỐ CÔNG CỤ THIẾT KẾ WEB 63

3.1.1 Notepad++ 63

3.1.2 Microsft FrontPage 63

3.1.3 Adobe DreamWaver 64

3.2 THIẾT KẾ VỚI ADOBE DREAMWAVER 67

3.2.1 Teamplate trang Web 67

3.2.2 Tạo bảng (Table) và trang khung (Frame) 68

3.2.3 Multimedia trên trang web 71

3.3 LÀM VIỆC VỚI FORM 73

Trang 6

3

3.3.1 Các đối tượng của Form 73

3.3.2 Thuộc tính đối tượng 73

Chương 4 SCRIPT TRONG TRANG WEB 81

4.1 TỔNG QUAN VỀ SCRIPT TRONG TRANG WEB 81

4.2 CƠ BẢN VỀ JAVASCRIPT 81

4.2.1 Khái niệm JavaScript 81

4.2.2 Một số đối tượng có sẵn trong JavaScript 82

4.2.3 Xây dựng hàm xử lý sự kiện 89

4.3 CƠ BẢN VỀ VBSCRIPT 91

4.3.1 Khái niệm VBScript 91

4.3.2 Hàm và thủ tục trong VBScript 91

4.3.3 Đối tượng trong VBScript 95

HƯỚNG DẪN TỰ HỌC 98

PHỤ LỤC 98

TÀI LIỆU THAM KHẢO 103

Trang 7

4

DANH MỤC CHỮ VIẾT TẮT

ARPA Advanced Research Projects Agency

TCP/IP Transmission Control Protocol/Internet Protocol

SGML Standard Generalized Markup Language

ISP Internet Service Provider

HTTP HyperText Transfer Protocol

IETF Internet Engineering Task Force

MIME Multipurpose Internet Mail Extensions

URI Uniform Resource Identifier

SMTP Simple Mail Transfer Protocol

NNTP Network News Transfer Protocol

HTTPS Hypertext Transfer Protocol Secure

TLS Transport Layer Security

GUI Graphical User Interface

SEO Search Engine Optimization

Trang 8

5

DANH MỤC BẢNG, HÌNH VẼ

Hình 1- 1 Mô hình mạng Internet 9

Hình 1- 2 Minh họa thiết lập giao thức TCP/IP 10

Hình 1- 3 Phân cấp các tên miền 11

Hình 1- 4 Thống kê các trình duyệt được sử dụng 12

Hình 1- 5 Tiêu đề của trang web xuất hiện trên trình duyệt 16

Hình 1- 6 Tiêu đề của hình ảnh khi di chuột 22

Hình 1- 7 Form đăng kí thông tin 28

Hình 1- 8 Mô tả bài thực hành 1 30

Hình 1- 9 Mô tả bài thực hành 2 31

Hình 1- 10 Mô tả bài thực hành số 3 32

Bảng 1- 1 Thuộc tính thẻ <body> 20

Bảng 1- 2 Kích thước Font chữ 21

Bảng 1- 3 Các kiểu chữ trong HTML 22

Bảng 1- 4 Các dạng hiển thị văn bản trên web 22

Bảng 1- 5 Kí tự đặc biệt 23

Bảng 1- 6 Đánh chỉ số đầu cho đoạn văn bản 24

Bảng 1- 7 Đặt kí hiệu đầu đoạn văn bản 25

Bảng 1- 8 Cấu trúc thẻ làm việc với bảng 26

Hình 2- 1 Minh họa về CSS 42

Hình 2- 2 Minh họa về tác dụng thuộc tính Margin 51

Hình 2- 3 Các kiểu đường viền trong thiết kế 51

Hình 2- 4 Minh họa về bài thực hành số 1 55

Bảng 2- 1 Bảng đơn vị chiều dài 44

Bảng 2- 2 Bảng đơn vị màu sắc 44

Bảng 2- 3 Thuộc tính định vị ảnh nền 48

Trang 9

6

Hình 3- 1 Phần Footer giúp định hướng chức năng Error! Bookmark not defined Hình 3- 2 Trang web bán hàng trực tuyến Error! Bookmark not defined Hình 3- 3 Trang web mô hình B2B Error! Bookmark not defined Hình 3- 4 Trang web cổng thông tin điện tử tỉnh Nam ĐịnhError! Bookmark not defined.

Hình 3- 5 Màn hình làm việc của NotePade++ 63

Hình 3- 6 Màn hình làm việc chính của Microsoft FrontPage 64

Hình 3- 7 Màn hình làm việc của Dreamwave 65

Hình 3- 8 Các chức năng trong mục Insert của DreamWave 65

Hình 3- 9 Chế độ Split khi lập trình trên DreamWave 66

Hình 3- 10 Các đối tượng trên bảng Insert được chia thành nhóm 67

Hình 3- 11 Màn hình làm việc của Photoshop Error! Bookmark not defined Hình 3- 12 Các nhóm chức năng trên thanh công cụ PhotoshopError! Bookmark not defined Hình 3- 13 Màn hình làm việc của Macromedia Flash Error! Bookmark not defined. Hình 3- 14 Minh họa bài thực hành số 5 76

Hình 3- 15 Minh họa bài thực hành số 6 77

Hình 3- 16 Minh họa bài thực hành 7 78

Hình 3- 17 Màn hình làm việc của DreamWave 79

Hình 3- 18 Thanh công cụ Macromedia Dreamwave 79

Hình 4- 1 Bố cục trang web được thiết kế bằng vẽ tay Error! Bookmark not defined Hình 4- 2 Bố cục trang web được thiết kế bằng phần mềmError! Bookmark not defined Hình 4- 3 Layout 2 cột với kích thước cố định Error! Bookmark not defined Hình 4- 4 Layout 3 cột có kích thước khác nhau Error! Bookmark not defined Hình 4- 5 Layout 4 cột hoặc layout kết hợp Error! Bookmark not defined Hình 4- 6 Các thành phần cơ bản khi thiết kế Error! Bookmark not defined Hình 4- 7 Hình ảnh tạo mới file tài liệu Photoshop Error! Bookmark not defined Hình 4- 8 Tạo layer mới để thay đổi background Error! Bookmark not defined Hình 4- 9 Tạo màu cho layer Error! Bookmark not defined Hình 4- 10 Lựa chọn vùng làm header cho trang web Error! Bookmark not defined Hình 4- 11 Thay đổi màu nền cho header Error! Bookmark not defined Hình 4- 12 Vùng được lựa chọn làm thanh điều hướng Error! Bookmark not defined Hình 4- 13 Thiết lập thông số Error! Bookmark not defined Hình 4- 14 Kết quả thu được Error! Bookmark not defined Hình 4- 15 Phần hiển thị header và thanh điều hướng Error! Bookmark not defined Hình 4- 16 Tạo tên website vào header Error! Bookmark not defined Hình 4- 17 Nhập danh mục chức năng Error! Bookmark not defined.

Trang 10

7

Hình 4- 18 Tạo nút Hover button Error! Bookmark not defined.

Hình 4- 19 Giao diện thu được Error! Bookmark not defined.

Hình 4- 20 Thiết kế chức năng tìm kiếm Error! Bookmark not defined.

Hình 4- 21 Tạo layer khung hình Error! Bookmark not defined.

Hình 4- 22 Thiết kế layer hình ảnh Error! Bookmark not defined.

Hình 4- 23 Hình ảnh chèn đúng vị trí Error! Bookmark not defined.

Hình 4- 24 Tạo nội dung cho khung hình Error! Bookmark not defined.

Hình 4- 25 Thiết kế dải dây băng chứa tiêu đề Error! Bookmark not defined.

Hình 4- 26 Nội dung được chèn vào trang thiết kế Error! Bookmark not defined.

Hình 4- 27 Thiết kế layer footer 1 Error! Bookmark not defined.

Hình 4- 28 Thiết kế layer footer 2 Error! Bookmark not defined.

Hình 4- 29 Hình ảnh trang web khi thiết kế hoàn thiện Error! Bookmark not defined.

Hình 4- 30 Hình ảnh trang web sau khi định dạng bằng HTML và CSSError! Bookmark not defined Hình 4- 31 Trang chủ website bán hàng kĩ thuật số Error! Bookmark not defined.

Hình 4- 32 Trang chủ website bán đồ trang sức Error! Bookmark not defined.

Hình 4- 33 Trang chủ website của một công ty Error! Bookmark not defined.

Hình 4- 34 Trang chủ website Business Co Error! Bookmark not defined.

Trang 11

8

Chương 1 TỔNG QUAN MỤC TIÊU:

- Trình bày được các khái niệm cơ bản về web: www, http, url,

- Phân tích được ưu điểm, nhược điểm của phương pháp lập trình web tĩnh và lập trình web động

- Trình bày được khái niệm về ngôn ngữ kịch bản

- Thiết kế được giao diện một số trang web cơ bản: đăng kí, đăng nhập, hiển thị thông tin bằng các thẻ HTML cơ bản

1.1 KHÁI NIỆM CƠ BẢN VỀ WEB

1.1.1 Giới thiệu về world wide web

1.1.1.1 Internet

Mạng Internet ban đầu được biết dưới tên là ARPANET do tổ chức Advanced Research Projects Agency (ARPA) của Mỹ thiết lập năm 1969 Ngày nay Internet đã trở thành mạng toàn cầu kết nối hàng trăm triệu người trên thế giới Mạng máy tính toàn cầu Internet có thể được xem như là mạng của tất cả các mạng (Network of networks), trong đó người dùng tại bất cứ máy tính nào đều có thể truy cập tới các thông tin của các máy khác (nếu được phép)

Mục đích chính lúc này của mạng là kết nối và trao đổi thông tin giữa các máy tính nghiên cứu của các trường đại học Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn

có thể hoạt động khi một phần của nó bị phá hủy trong các trường hợp chiến tranh hoặc thiên tai

Ngày nay mạng Internet là một mạng công cộng kết nối hàng trăm triệu người trên thế giới Về mặt vật lí, mạng Internet sử dụng một phần của toàn bộ các tài nguyên của các mạng viễn thông công cộng đang tồn tại (Public telecommunication networks) Về mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là TCP/IP (Transmission Control Protocol/Internet Protocol) Hai mô phỏng của công nghệ mạng Internet là intranet and extranet cũng sử dụng các giao thức này

Sự ra đời của giao thức HTTP và HMTL đã đánh dấu một bước ngoặt mới trong việc sử dụng Internet Cho tới năm 1990 các dịch vụ cơ bản của Internet vẫn chỉ là email, listserv, telnet và ftp Năm 1992, Tim Berners-Lee, một nhà vật lí học tại CERN đã phát triển các giao thức cho World Wide Web (WWW) Trong khi tìm kiếm cách để liên kết các tài liệu khoa học lại với nhau, anh ta đã tạo ra HyperText Markup Language (HTML), một tập con của Standard Generalized Markup Language (SGML)

Từ một chuẩn cho các tài liệu văn bản, HTML ngày nay có thể chứa hình ảnh, âm thanh, video, và cho phép phát triển các ứng dụng thông qua Common Gateway Interface (CGI), ASP, JSP, PHP, Java Servlet

Trang 12

Để đơn giản hóa người ta phân dãy địa chỉ 32-bit này thành 4 con số 8 bit viết cách nhau bởi dấu chấm “.” Vì mọi máy là một phần của mạng nên người ta chia địa chỉ IP thành 2 phần:

+ Phần mô tả mạng (network) mà máy đó thuộc về

+ Phần mô tả máy (local host): Nếu tất cả các bit của vùng mô tả máy bằng 0, thì địa chỉ IP dùng để mô tả địa chỉ mạng (network address); Nếu tất cả các bit của vùng mô

tả máy bằng 1, thì địa chỉ IP này chính là địa chỉ broadcast (broadcast address); Nếu không thuộc hai trường hợp trên, địa chỉ IP này dùng để mô tả địa chỉ máy (host address) Địa chỉ IP tự nó không chứa thông tin về phần nào mô tả mạng, phần nào mô tả máy

mà thành phần subnet mask đi kèm với mỗi địa chỉ sẽ cung cấp thông tin này Theo qui ước, vùng các bit 1 xác định vùng mô tả mạng, và vùng các bit 0 xác định vùng mô tả máy Trong subnet mask chỉ gồm 2 dãy liên tục các bit 1 và dãy liên tục các bit 0 nằm liên tiếp nhau tính từ trái sang

Việc phân chia địa chỉ IP trên Internet do ICANN chịu trách nhiệm Địa chỉ IP thường được quản lí bởi các nhà cung cấp dịch vụ Internet (ISP – Internet Service Provider) Các địa chỉ IP này thường được gọi là địa chỉ IP thực Nếu người dùng muốn thiết lập một website để các máy tính sử dụng Internet có thể truy cập vào được, ít nhất máy chủ chứa website phải có địa chỉ IP thực Nếu không có địa chỉ IP thực, người dùng phải sử dụng dịch vụ webhosting để thuê chỗ đặt website trên các máy chủ có địa chỉ

IP thực được kết nối với Internet

Trang 13

10

Hình 1- 2 Minh họa thiết lập giao thức TCP/IP

1.1.1.3 Tên miền (Domain name)

Tên miền có thể được xem như là tên giao dịch của công ty hay tổ chức trên Internet Tên miền của các công ty thương mại thường có dạng yourcompany.com Ví

dụ, công ty Intel sẽ lấy tên là miền là intel.com; công ty Microsoft lấy tên miền là microsoft.com

Việc đưa ra khái niệm tên miền giúp cho việc truy cập đến các tài nguyên trên Internet dễ dàng hơn Việc ánh xạ qua lại giữa tên miền và địa chỉ IP của máy phục vụ được thực hiện bởi DNS Server

Ví dụ: Một địa chỉ www.intel.com cho ta một số thông tin sau:

+ Đây là địa chỉ của một máy thuộc tổ chức sở hữu tên miền intel.com

+ Địa chỉ IP của máy này sẽ là 192.102.198.160

+ Phần "com" trong tên miền mô tả mục đích của tổ chức (trong trường hợp này là "commercial" – thương mại) và được gọi là tên miền cấp 1 (top-level domain name)

+ Phần ngay trước dấu “.” trong tên miền trên thông thường là tên của tổ chức (ví

dụ như intel) được gọi là tên miền cấp 2 (second-level domain name) Tên miền cấp 3 thông thường được dùng để định nghĩa một máy phục vụ cụ thể nào đó và toàn bộ chúng

sẽ được ánh xạ tới một địa chỉ Internet

Một địa chỉ IP có thể được ánh xạ cho nhiều tên miền Điều này cho phép nhiều cá nhân, công ty và các tổ chức chia sẻ cùng một Internet server Do tầm quan trọng của tên miền nên một trong các bước đầu tiên của việc xây dựng website là thiết lập tên miền bằng cách mua từ các công ty được ủy quyền bán tên miền Các tên miền có đuôi

là “ com” rất thông dụng trong các giao dịch quốc tế Ngoài ra, các công ty Việt nam cũng thường hay lấy tên miền có đuôi là “.com.vn”

Trang 14

11

Hình 1- 3 Phân cấp các tên miền

1.1.1.4 World Wide Web (WWW)

World Wide Web là một không gian thông tin toàn cầu cho phép người dùng có thể truy cập (đọc và viết) qua các máy tính có nối mạng internet Đây là dịch vụ thông dụng nhất trên Internet Để sử dụng dịch vụ này, người dùng cần có một trình duyệt web (Web browser) Một số trình duyệt thông dụng là Google Chrome, I n t e r n e t E x p l o r e r

Trang 15

12

Hình 1- 4 Thống kê các trình duyệt được sử dụng

1.1.2 Giao thức truyền siêu văn bản

Giao thức truyền siêu văn bản (HyperText Transfer Protocol - HTTP) được ứng dụng để truyền tải tài liệu, các tệp siêu văn bản giữa máy chủ Web (Web server) và máy khách Web (Web client) thông qua một trình duyệt Web Cụ thể hơn, HTTP là một giao thức ở tầng ứng dụng trong các hệ thống thông tin phân tán, cộng tác, siêu phương tiện (Hypermedia), cho phép một máy khách gửi yêu cầu thông qua tệp siêu văn bản đến máy chủ và nhận đáp ứng từ máy chủ

Nhà khoa học máy tính người Anh Tim Berners-Lee và nhóm dự án “World Wide Web” là những người đầu tiên được công nhận phát minh ra HTTP cùng với ngôn ngữ đánh dấu siêu văn bản HTML

Cho đến nay, giao thức HTTP gồm có ba phiên bản là:

- Phiên bản HTTP 0.9: Được Hiệp hội web toàn cầu (World Wide Web - W3C) công bố năm 1991 Đây là giao thức đơn giản để truyền dữ liệu thô trên Internet

- Phiên bản HTTP 1.0: Được định nghĩa vào năm 1996 trong tài liệu kỹ thuật và tổ chức về Internet (Request For Comments - RFC) do nhóm chuyên trách kỹ thuật Internet ban hành (Internet Engineering Task Force - IETF) Tại phiên bản này cho phép gửi nhận các thông điệp định dạng kiểu giao thức mở rộng thư Internet đa chức năng (Multipurpose Internet Mail Extensions - MIME), như kiểu văn bản phi cấu trúc (Text), kiểu hình ảnh (Image), kiểu âm thanh (Audio), kiểu phim (Video), kiểu ứng dụng (Application), chứa các thông tin mô tả về dữ liệu được truyền và các tham số chỉnh sửa theo yêu cầu/đáp ứng Tuy nhiên, phiên bản này không tác động nhiều đến các proxy phân cấp, bộ nhớ đệm, nhu cầu kết nối liên tục hay đến các máy chủ lưu trữ ảo Proxy là một chương trình trung gian hoạt động vừa như một máy chủ và vừa như một máy khách nhằm mục đích thực hiện các yêu cầu thay cho các máy khách khác

- Phiên bản HTTP 1.1: Lần đầu tiên được công bố vào tháng 01 năm 1997 và sau đó được cập nhật tại RFC vào tháng 07 năm 1999 HTTP 1.1 có các yêu cầu nghiêm ngặt hơn HTTP 1.0 để đảm bảo tính tin cậy khi thực hiện các tính năng của nó

HTTP cho phép một tập các phương thức hoặc câu lệnh (methods/commands) và các tiêu đề mở - đóng (open - ended header) để chỉ ra mục đích của một yêu cầu HTTP được xây dựng trên nguyên tắc tham chiếu được cung cấp bởi định danh tài nguyên thống

Trang 16

13

nhất (Uniform Resource Identifier - URI), hoặc định vị tài nguyên thống nhất (Uniform Resource Locator - URL) hay tên tài nguyên thống nhất (Uniform Resource Name - URN), nhằm chỉ ra nguồn tài nguyên áp dụng phương thức Thông điệp được gửi theo định dạng tương tự với định dạng sử dụng thư Internet theo quy định của MIME

HTTP cũng được sử dụng như một giao thức chung để truyền thông giữa tác nhân người dùng (User Agent - UA) và các proxy, gateway (một máy chủ hoạt động như một điểm trung gian đối với máy chủ khác, tiếp nhận các yêu cầu từ máy khách với vai trò như một máy chủ gốc) đến các hệ thống Internet khác, gồm cả các hệ thống hỗ trợ giao thức truyền thư đơn giản (Simple Mail Transfer Protocol – SMTP), giao thức truyền tin tức liên mạng (Network News Transfer Protocol – NNTP), giao thức truyền tệp tin (File Tranfer Protocol – FTP), giao thức Gopher (được thiết kế chính để tìm kiếm và lưu trữ tài liệu phân tán) và WAIS (hệ thống tìm kiếm theo mô hình khách – chủ sử dụng tiêu chuẩn ANSI Z39.50) Bằng cách này, HTTP cho phép truy cập siêu phương tiện đến các tài nguyên sẵn có từ các ứng dụng đa dạng

Giao thức HTTP là một giao thức có dạng yêu cầu/đáp ứng Khi một máy khách gửi một yêu cầu đến máy chủ gồm phương thức yêu cầu (GET, POST, HEAD,…), URL, phiên bản giao thức, kèm với thông điệp kiểu MIME gồm các tham số chỉnh sửa của yêu cầu, thông tin máy khách và nội dung chính thông qua kết nối đến máy chủ Máy chủ sẽ đáp ứng bằng dòng trạng thái, gồm phiên bản giao thức thông điệp và mã thông báo thành công hay lỗi, kèm với thông điệp kiểu MIME có chứa thông tin về máy chủ, các thông tin thêm về đối tượng và nội dung chính của đối tượng

An toàn bảo mật của giao thức HTTP phiên bản 1.1 cũng là một vấn đề hết sức quan trọng đối với các nhà phát triển ứng dụng, nhà cung cấp thông tin và người dùng cuối Các vấn đề an toàn bảo mật cần xem xét bao gồm:

- Bảo vệ thông tin cá nhân (lạm dụng thông tin đăng nhập máy chủ, truyền thông tin nhạy cảm, mã hóa thông tin nhạy cảm ở dạng URI, vấn đề riêng tư khi kết nối để nhận các tiêu đề),

- Các tấn công tệp tin và tên đường dẫn, hệ thống tên miền (Domain Name System – DNS) giả, các tiêu đề giả, các vấn đề sắp xếp nội dung, vấn đề xác thực và máy khách không hoạt động, vấn đề về proxy và cache, các tấn công từ chối dịch vụ trên proxy

Do đó, để đảm bảo an toàn khi truyền thông trên mạng, có thể sử dụng HTTPS (Hypertext Transfer Protocol Security)

HTTP được ứng dụng trong các phần mềm máy chủ Web và trong các trình duyệt Web để trao đổi thông tin giữa máy chủ Web và máy khách Web trên môi trường mạng

- Địa chỉ web (Uniform Resource Locator - URL): một địa chỉ tham chiếu đến một file cụ thể trong tài nguyên mạng Địa chỉ web có 2 dạng:

+ Địa chỉ tuyệt đối: là địa chỉ internet đầy đủ của một trang hoặc một tệp tin bao gồm giao thức, vị trí mạng, đường dẫn tùy chọn và tên tệp tin

Trang 17

14

+ Địa chỉ tương đối: mô tả ngắn gọn địa chỉ tệp tin kết nối có cùng đường dẫn với tập tin hiện hành

1.1.3.2 Web tĩnh

Website tĩnh là website chỉ bao gồm các trang web không có cơ sở dữ liệu đi kèm

- Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, DHTML…

- Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít thay đổi

- Tốc độ truy cập nhanh: Tốc độ truy cập của người dùng vào các trang web tĩnh nhanh hơn các trang web động vì không mất thời gian trong việc truy vấn cơ sở dữ liệu như các trang web động

- Thân thiện hơn với các máy tìm kiếm (search engine): Bởi vì địa chỉ URL của các trang *.html, *.htm… trong web tĩnh không chứa dấu chấm hỏi (?) như trong web động

- Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp hơn nhiều so với website động vì không phải xây dựng các cơ sở dữ liệu, lập trình phần mềm cho website và chi phí cho việc thuê chỗ cho cơ sở dữ liệu, chi phí yêu cầu hệ điều hành tương thích

* Nhược điểm:

- Khó khăn trong việc thay đổi và cập nhật thông tin: Muốn thay đổi và cập nhật thông tin của trang website tĩnh cần biết về ngôn ngữ HTML, sử dụng được các chương trình thiết kế đồ hoạ và thiết kế web cũng như các chương trình đưa file lên server

- Thông tin không có tính linh hoạt, không thân thiện với người dùng: Do nội dung trên trang web tĩnh được thiết kế cố định nên khi nhu cầu về thông tin của người truy cập tăng cao thì thông tin trên website tĩnh sẽ không đáp ứng được

- Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một website tĩnh hầu như là phải làm mới lại website

1.1.3.3 Web động

Web động là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm xử

lý dữ liệu và phát triển web

- Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng truy vấn tới một trang web Trang web được gửi tới trình duyệt gồm những câu chữ, hình ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc ở nhiều hình thức khác nữa

- Web động thường được phát triển bằng các ngôn ngữ lập trình bậc cao như PHP, ASP, ASP.NET, Java, CGI, Perl, và sử dụng các hệ quản trị cơ sở dữ liệu như Access, MySQL, MS SQL, Oracle, DB2

- Thông tin trên web động dễ dàng được cập nhật thường xuyên thông qua việc sử dụng các công cụ cập nhật của các phần mềm quản trị web Thông tin luôn được cập nhật trong một cơ sở dữ liệu và người dùng Internet có thể xem những chỉnh sửa đó ngay lập tức

Trang 18

15

- Web động có tính tương tác với người sử dụng cao: Với web động, người dùng dễ dàng quản trị nội dung và điều hành website của mình thông qua các phần mềm hỗ trợ

mà không nhất thiết phải có kiến thức nhất định về ngôn ngữ html, lập trình web

- Dễ dàng thay đổi hoặc kế thừa những kết quả đã có: chẳng hạn một ứng dụng đã

có sẵn những cơ sở dữ liệu như cơ sở dữ liệu sản phẩm, nhân sự, khách hàng hay bất kỳ

cơ sở dữ liệu nào đó và muốn đưa thêm giao diện web vào để người dùng nội bộ hay người dùng Internet đều có thể sử dụng chương trình chỉ với trình duyệt web của mình

- Hầu hết tất cả các website thương mại điện tử, các website của các tổ chức, doanh nghiệp hoạt động chuyên nghiệp…trên môi trường Internet đều sử dụng công nghệ web động Có thể nói web động là website của giới chuyên nghiệp hoạt động trên môi trường Internet

1.1.4 Ngôn ngữ kịch bản

Ngôn ngữ kịch bản (Script language) là một ngôn ngữ lập trình hỗ trợ viết kịch bản (script) Các chương trình được viết cho ngôn ngữ kịch bản có thể được thực thi thông qua lời gọi từ các tác vụ thay vì chạy thủ công bởi người dùng

Kịch bản có thể được viết và thực hiện mà không cần biên dịch (compile) và liên kết (linked) Khác với các ngôn ngữ thông thường, chương trình viết ra cần biên dịch thành mã máy trước khi đến tay người dùng, chương trình viết bằng ngôn ngữ kịch bản thường được chạy trực tiếp từ mã nguồn hoặc bytecode, do đó người sử dụng hoàn toàn

xem và đổi mã nguồn của chương trình

1.2 NGÔN NGỮ HTML

1.2.1 Giới thiệu HTML

Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language - HTML) không phải một ngôn ngữ lập trình, mà là các quy ước được xây dựng để thiết kế Web, giúp tạo, chia sẻ các tài liệu điện tử tích hợp đa phương tiện qua Internet và được hiển thị bởi những trình duyệt Web HTML cho phép áp dụng siêu liên kết tới tài liệu và trình bày tài liệu với định dạng phù hợp với hệ thống hiển thị văn bản

- HyperText: Là một từ hay một cụm từ dùng để tạo liên kết giữa các trang web

- Markup: Là cách định dạng văn bản để trình duyệt hiểu và thông dịch được

- Language: Là tập hợp những quy luật để định dạng văn bản trên trang web

Một trang Web dạng trang HTML là một tập tin văn bản ASCII nên có thể soạn thảo bằng bất kỳ một phần mềm nào như Notepad, Wordpad, Microsoft Word Ngoài ra

có rất nhiều phần mềm chuyên hỗ trợ cho việc thiết kế và quản lý Website dễ dàng như Microsoft FrontPage, DreamWaver, Coffecup HTML Editor, NotePad++

1.2.2 Cấu trúc trang HTML

Trang HTML được cấu trúc bởi các thẻ (Tag), mỗi thẻ có một hay nhiều thuộc tính (Attribute) Nội dung một trang HTML sẽ đặt giữa hai thẻ <HTML>…</HTML> và thường được chia làm 2 phần:

- Phần đầu (Header): Đặt giữa 2 thẻ <HEAD> </HEAD>, chứa các thông tin tổng quát về trang Web như thông tin hiển thị trên thanh tiêu đề trình duyệt, bảng mã sử dụng…và các thông tin này không được hiển thị trên trình duyệt

- Phần thân (Body): Nội dung chính của trang web đặt giữa cặp thẻ <BODY> và

</BODY>

Chú ý:

Trang 19

16

- Thẻ chú thích: <! nội dung cần chú thích > nội dung nằm giữa thẻ này sẽ

được bỏ qua, không hiển thị lên trên trình duyệt

- Phần lớn các thẻ HTML có dạng với chức năng quy định cách thức hiển thị của các thành phần lên trên trang web:

<Thẻ Thuộctính1 = Giátrị1 Thuộctính2 = Giátrị2…>Chuỗi văn bản</Thẻ> hoặc đơn giản là: <Thẻ>Chuỗi văn bản</Thẻ>

- Một số phần tử không có bất kỳ nội dung nào kèm theo và được gọi là phần tử

trống, có dạng <Thẻ Thuộctính1 = Giátrị1 Thuộctính2 = Giátrị2…/> hay </Thẻ>

- Các thẻ không phân biệt hoa thường, và có thể lồng vào nhau

- Để xây dựng một trang HTML có thể sử dụng các phần mềm soạn thảo như NotePad, Notepad++, FrontPage để soạn thảo các nội dung và lưu thành các định dạng như HTML, HTM

- Một trang HTML được biên dịch bằng các trình duyệt như Explorer, Firefox

Ví dụ: Trang HTML đơn giản

1.2.3.1 Các thẻ chính của trang web

- Thẻ <HTML></HTML>: Quy định phần bắt đầu và kết thúc của trang web tĩnh

- Thẻ <HEAD></HEAD>: Đánh dấu điểm bắt đầu của phần đầu của trang web

đồng thời quy định một số kiểu cách của trang web như tiêu đề, font chữ, nhạc nền

- Thẻ <TITLE></TITLE>: Chỉ định tiêu đề của của trang web Tiêu đề này sẽ

xuất hiện trên thanh tiêu đề của trình duyệt Thẻ này chỉ hợp lệ khi đặt trong cặp thẻ

<HEAD>

Hình 1- 5 Tiêu đề của trang web xuất hiện trên trình duyệt

Trang 20

17

- Thẻ <BGSOUND>: Thiết lập nhạc nền cho trang web Thẻ này được đặt trong

phần đầu trang Ðịnh nghĩa như sau:

<BGSOUND SCR=url LOOP=n>

Trong đó:

Url: Đường dẫn tới tập tin nhạc (các định dạng là wav, au, midi…)

N: Số lần lặp lại bài nhạc Nếu n= -1 hoặc infinite thì sẽ lặp đến khi đóng trang Web

Ví dụ: Đặt nhạc nền cho trang Web

- Thẻ <BODY></BODY>: Thẻ này dùng chỉ định điểm bắt đầu và kết thúc phần thân trang Web Thẻ này được định nghĩa như sau:

Bảng 1- 1 Thuộc tính thẻ <body>

BACKGROUND =url Chỉ định ảnh nền cho trang Web

Url là địa chỉ và tên tập tin làm ảnh nền

BGCOLOR=color

Chỉ định màu nền cho trang web color là màu dạng

#nnnnnn với n:0,1, ,F, hoặc là tên các màu đã quy định trước như: aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, purple, silver, teal, white, yellow, red, blue…

BGPROPERTIES=FIXED Chỉ định ảnh nền trang web không cuộn khi cuộn thanh

cuộn

LEFTMARGIN=n Chỉ định lề trái trang Web, n là 1 số nguyên dương tính

theo đơn vị đo lường: mm, cm, pixel

LINK=color Chỉ định màu cho các Hyperlink khi chưa được xem

TEXT=color Chỉ định màu văn bản trong trang Web

TOPMARGIN=n Chỉ định lề trên trang Web, n là 1 số nguyên dương tính

theo đơn vị đo lường: mm, cm, pixel

<BODY BACKGROUND=url BGCOLOR=color BGPROPERTIES=FIXED

LEFTMARGIN=n LINK=color TEXT=color TOPMARGIN=n VLINK=color>

Trang 21

18

VLINK=color Chỉ định màu cho các Hyperlink khi đã được xem

Ví dụ 1: Đặt màu nền và màu chữ cho trang web

<BODY TEXT=black BACKGROUND="images/so01871_1.gif"

TOPMARGIN="20" LEFTMARGIN="25" LINK=#800000 VLINK=green>

</BODY> </HTML>

1.2.3.2 Thẻ định dạng kí tự

- Thẻ <BASEFONT></BASEFONT>: Chỉ định phông chữ, cỡ chữ, màu chữ cho

các văn bản không được định dạng

Trong đó:

SIZE=n: Chỉ định kích thước văn bản, n từ 1 đến 7 Giá trị mặc nhiên là 3

FACE=name: Tên phông chữ

COLOR=color: Màu chữ

- Thẻ <FONT></FONT>: Chỉ định phông chữ, cỡ chữ, màu văn bản:

Trong đó:

SIZE=n: Chỉ định kích thước văn bản, n từ 1 đến 7

FACE=name: Tên phông chữ

COLOR=color: Màu chữ

Bảng 1- 2 Kích thước Font chữ

<FONT SIZE=5> Kích thước văn bản là 5</font>

<P><FONT SIZE=+1>Kích thước văn bản là 4

<BODY BGCOLOR=YELLOW TEXT=#800000>

HTML là ngôn ngữ đánh dấu

</BODY>

<BASEFONT SIZE=n FACE=name COLOR=color>

<FONT SIZE=n FACE=name COLOR=color>

Trang 22

19

- Thẻ <B></B>: Hiển thị văn bản kiểu chữ in đậm

- Thẻ <I></I>: Hiển thị văn bản kiểu chữ nghiêng

- Thẻ <U></U>: Hiển thị văn bản kiểu chữ gạch dưới

- Thẻ <S></S>: Hiển thị văn bản kiểu chữ gạch giữa

Bảng 1- 3 Các kiểu chữ trong HTML

<I>Dòng chữ này nghiêng</I> Dòng chữ này nghiêng

<FONT COLOR="#800000" FACE="Verdana">Đoạn văn

thứ nhất màu đỏ có phông là Verdana.</FONT><P>

<FONT COLOR="black" FACE="Verdana">Ðoạn văn thứ

hai màu đen có phông là Verdana.</FONT></P>

Ðoạn văn thứ nhất màu

đỏ có phông là Verdana Ðoạn văn thứ hai màu đen có phông là Verdana

<B><I>Dòng chữ này vừa đậm vừa nghiêng</I></B> Dòng chữ này vừa đậm

- Thẻ <STRONG></STRONG>:Hiển thị văn bản đậm theo logic type

- Thẻ <EM></EM>: Hiển thị văn bản nghiêng theo logic type

- Thẻ <STRIKE></STRIKE>: Hiển thị văn bản gạch dưới theo logic type

- Thẻ <SUB></SUB>: Hiển thị văn bản dạng chỉ số (A2)

- Thẻ <SUP></SUP>: Hiển thị văn bản dạng mũ theo (A2)

+ Thẻ <SMALL> </SMALL>: Hiển thị thu nhỏ chữ

+ Thẻ <BIG> </BIG>: Hiển thị phóng lớn chữ

Trang 23

20

Bảng 1- 4 Các dạng hiển thị văn bản trên web

<STRONG>Dòng này đậm</STRONG> Dòng này đậm

<EM>Dòng này nghiêng</EM> Dòng này nghiêng

<STRIKE>Dòng này gạch giữa</STRIKE> Dòng này gạch giữa

<STRONG><EM>Dòng này vừa đậm vừa nghiêng

+ Thẻ <BR></BR>: Ngắt xuống dòng mới nhưng vẫn thuộc cùng một đoạn hiện

hành Thẻ </BR> không nhất thiết phải có

+ Ký tự đặc biệt: Có nhiều ký tự mà HTML dùng vào mục đích đặc biệt, bao gồm

cả ký hiệu < (nhỏ hơn) và > (lớn hơn), bởi những ký hiệu này được dùng để chỉ các thẻ nên không thể dùng chúng như trong HTML Những ký tự đặc biệt như vậy được đánh

dấu trong HTML dưới dạng: &XXXX;

Trong đó XXXX là tên mã (Code Name) cho ký tự đặc biệt đó:

ALIGN=align-type: căn lề cho đường kẻ ngang Align-type có thể là: left, right, hay

<HR ALIGN=align-type COLOR=color NOSHADE SIZE=n WIDTH=m>

Trang 24

21

center

COLOR=color: màu đường thẳng ngang

NOSHADE: không có bóng đổ

SIZE=n : độ dày của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị

đo lường được thiết lập

ALIGN=align-type: Lề cho ảnh hay cho văn bản bao quanh ảnh Giá trị có thể là

TOP, MIDDLE, BOTTOM, LEFT, RIGHT

ALT=text: Văn bản hiển thị khi di chuyển Mouse đến hình ảnh, hay thay thế cho

hình ảnh khi chức năng “Show Picture” trong trình duyệt bị tắt

SRC=url: Chỉ định địa chỉ hình ảnh

BORDER=n: Độ dày đường viền ảnh Nếu ảnh được dùng cho Hyperlink thì

đường viền có màu trùng với màu Hyperlink Nếu ảnh không dùng cho hyperlink thì đường viền không hiển thị

HEIGTH=n, WIDTH=n: Chỉ độ cao và độ rộng của ảnh Ðơn vị bằng pixel HSPACE=n, VSPACE=n: Chỉ định khoảng cách từ ảnh đến văn bản quanh nó

theo chiều ngang và dọc

Ví dụ: Chèn hình ảnh và hiển thị văn bản: “Viettel khởi động chương trình “Tôi

sinh viên 2014””khi di chuột vào ảnh

<IMG ALIGN=align-type ALT=text SRC=url BORDER=n

HEIGTH=n WIDTH=n HSPACE=n VSPACE=n>

<A HREF="index.htm">

<IMG SRC="images/quangcao.gif"

ALT="Viettel khởi động chương trình “Tôi sinh viên 2014” "

ALIGN=MIDDLE HSPACE=5 VSPACE=5> </A>

</A></P>

Trang 25

22

Hình 1- 6 Tiêu đề của hình ảnh khi di chuột

1.2.3.5 Định dạng đoạn

- Thẻ <P></P>: Ngắt văn bản sang đoạn (Paragraph) mới Thẻ </P> cuối đoạn

không nhất thiết phải có

ALIGN=align-type: Chỉ định kiểu căn đoạn Align-type có thể: left, right hoặc

center

- Thẻ <OL>: Tự động đánh số đầu mỗi đoạn

Bảng 1- 6: Đánh chỉ số đầu cho đoạn văn bản

- Thẻ <UL>: tự động đặt ký hiệu đầu mỗi đoạn trong danh sách

Bảng 1- 7: Đặt kí hiệu đầu đoạn văn bản

Trang 26

BGCOLOR=color-type: Màu nền của bảng

BORDER=n: Đường viền bảng, n tính bằng pixel

CELLPADDING=n: Khoảng cách từ ô tới nội dung của ô

BGCOLOR=color-type: Màu nền của dòng

VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ô trên dòng Giá

trị có thể là: top, bottom, middle

- Thẻ <TD></TD>: Sử dụng để tạo ô trong các dòng của bảng

Trong đó:

ALIGN=align-type: Lề văn bản trong ô, có giá trị là left, right hay center

BACKGROUND=url: Chỉ định ảnh nền cho ô

BGCOLOR=color-type: Màu nền của ô

COLSPAN=n: Trộn n ô gần nhau theo hàng ngang

ROWSPAN=n: Trộn n ô gần nhau theo hàng dọc

VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ô

- Thẻ <TH>: tương tự như TD chỉ khác là văn bản được in đậm, căn giữa

Bảng 1- 8: Cấu trúc thẻ làm việc với bảng

<TD ALIGN=align-type BACKGROUND=url BGCOLOR=color-type

COLSPAN=n ROWSPAN=n VALIGN=v-align-type>

Trang 27

24

<TD> Tạo ô

<TH> Tạo ô tiêu đề (Chữ in đậm, căn giữa)

<CAPTION> Mặc định tiêu đề của bảng nằm ở trên và căn lề giữa

Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính ALIGN bên trong CAPTION

Ví dụ: Tạo một bảng thông tin

<TABLE BORDER=1 WIDTH=100%>

<CAPTION> Bảng thông tin</CAPTION>

<TR><TD> Ô 11<TD> Ô 12

<TR><TD> Ô 21<TD>Ô 22

</TABLE>

Ví dụ: Tạo bảng và thực hiện trộn 2 ô trong bảng

<TABLE BORDER=1 WIDTH=100%>

<CAPTION> Tạo bảng và trộn ô </CAPTION>

<TR><TD>Ô 11<TD COLSPAN=2>

Ô 12 trải dài trên 2 ô

<TR><TD>Ô 21<TD>Ô 22<TD>Ô 23

</TABLE>

1.2.3.7 Tạo liên kết (Hyperlink)

- Thẻ <a> </a>: tạo liên kết để đến các trang web khác

Url: Là địa chỉ trang Web cần liên kết đến

Ví dụ: Tạo các liên kết đến trang Web trên Internet

<A HREF="http://www.microsoft.com">Website Microsoft</A><br>

<A HREF="index.htm">Liên kết đến trang chủ index.htm</A><br>

<A HREF=” / /default.htm”>Welcome to Siêu thị SuperMarket </A><br>

<A HREF=”images/quangcao.gif”>Welcome to Sieu Thi Bai Tho</A><br>

<A HREF="sample.htm" TARGET="viewer">Liên kết đến trang sample.htm</A>

Chú ý:

- Ngoài việc tạo liên kết cho các đoạn text ra có thể liên kết hình ảnh

- Liên kết để gửi thư điện tử

Ví dụ: <A HREF="mailto:khoacntt@cnd.edu.vn">giangvien@cnd.edu.vn </A>

1.2.3.8 Tạo khung (Frame)

- Thẻ <FRAMESET> <FRAME>: Sử dụng để chia màn hình cửa sổ trình duyệt

<A HREF=url>Chuỗi diễn giải Hyperlink</A>

<A HREF="http://www.microsoft.com"><IMG SRC="images/bullet.gif">

Click vào ảnh này để liên kết đến trang Web của Microsoft </A>

<A HREF=Dia_Chi_E-mail>Chuỗi diễn giải liên kết gởi E-mail</A>

Trang 28

25

thành nhiều khung (Frame) Thẻ <FRAMESET> được kết hợp với thẻ <FRAME> để định nghĩa một khung

- Thẻ <IFRAME>: Để chèn khung vào bên trong trang Web

Ví dụ: Tạo trang Web có tên là home.htm chứa 2 khung, khung bên trái chứa nội dung trang Web page_1.htm và khung bên phải chứa nội dung trang Web page_2.htm

- SRC=url: Để chỉ định trang Web hiển thị trên khung

- Ðể các liên kết trong Frame “mucluc” liên kết đến các trang page_1.htm, page_2.htm và sẽ hiển thị trong khung noidung, ta chỉ định:

<FRAME NAME=”mucluc” TARGET="noidung" SRC="page_1.htm">

hoặc là trong từng liên kết có khai báo thuộc tính TARGET:

<A HREF="page_2.htm" TARGET=”noidung”>page 2</A>

hoặc là trang Web page_1.htm trong phần đầu <HEAD></HEAD> có khai báo sau:

<BASE TARGET="noidung">

- Ðể không xuất hiện thanh cuộn và đường viền khung, thêm thuộc tính SCROLLING="no" và FRAMEBORDER=0 vào thẻ <FRAME>

1.2.3.9 Tạo Form

- Thẻ <FORM>: Được sử dụng để định nghĩa một Form trong trang Web, chứa các

đối tượng để tương tác với người dùng

- Thẻ <INPUT>: Định nghĩa các đối tượng trên Form Bao gồm các thuộc tính:

+ TYPE="text": Chỉ định loại đối tượng trên Form, có thể nhận các giá trị:

- Text: Hộp nhập dữ liệu

- Hidden: Hộp nhập dữ liệu ẩn (không nhìn thấy)

- Password: Hộp nhập mật khẩu Thông tin nhập vào giấu bằng kí tự *

- Radio: Tạo các nút lựa chọn (Chọn một trong nhiều)

- Checkbox: Tạo các nút lựa chọn đánh dấu (Chọn nhiều trong nhiều)

- File: Hộp chọn tập tin, hiển thị hộp thoại để chọn tập tin

<FORM METHOD="POST" ACTION=url NAME=tên>

Trang 29

- NAME = tên: Chỉ định tên của đối tượng

- VALUE = giátrị: Chỉ định giá trị của đối tượng

- SIZE=n: Chỉ định chiều dài của đối tượng

- MAXLENGTH=n: Số ký tự tối đa nhập vào đối tượng

- CHECKED: Đối tượng đang được chọn

- READONLY: Chỉ định đối tượng là chỉ đọc, không cho phép nhập dữ liệu

- STYLE = "font-family:Arial; font-weight:bold; font-size:10pt": chỉ định phông chữ, kiểu chữ, cỡ chữ

- ALT = Chuỗi thay thế: Chỉ định chuỗi ký tự thay thế

- ACCESSKEY = kýtự: Chỉ định phím tắt ALT + Ký tự, khi ấn tổ hợp phím này

sẽ chuyển nhanh đến đối tượng trên Form

- TABINDEX: Thứ tự nhận con trỏ trên Form khi ấn Tab

Ví dụ: Thiết kế form nhập mới thông tin như hình

Hình 1-7 Form đăng kí thông tin

<P><INPUT TYPE="text" READONLY NAME="T1" SIZE="20" STYLE="font-

family: Arial; font-weight:bold; font-size:10pt"></P>

<P><INPUT TYPE="checkbox" NAME="C1" VALUE="ON" CHECKED>Sở thích

</P>

Trang 30

27

</FORM>

- Thẻ <SELECT> và <OPTION>: Được sử dụng để tạo hộp danh sách lựa chọn

Ví dụ: Thiết kế nút lựa chọn danh sách

</SELECT></P>

Trong đó: Thẻ <SELECT> gồm các thuộc tính:

+ NAME=tên: Chỉ định tên của hộp danh sách

+ SIZE=n: Chỉ định số dòng hiển thị của hộp danh sách

+ MULTIPLE: Cho phép chọn nhiều mục trong hộp danh sách

+ Thẻ <OPTION>: định nghĩa các mục trong hộp danh sách, với:

- Thuộc tính SELECTED nghĩa là mục đang được chọn

- Thuộc tính VALUE=giátrị chỉ định giá trị của mục trong hộp danh sách

- Chuỗi ký tự giữa hai thẻ <OPTION>, </OPTION> là các mục trong hộp danh sách

- Thẻ <TEXTAREA>: Sử dụng để định nghĩa một đối tượng cho phép nhập nhiều dòng

thông tin

Trong đó:

+ ROWS=n: Chỉ định số dòng hiển thị của hộp nhập dữ liệu

+ COLS=n: Chiều dài của hộp nhập dữ liệu

+ NAME=tên: Tên của hộp nhập dữ liệu

<SELECT NAME=name MULTIPLE>

<OPTION VALUE=”giá trị 1”> Tên giá trị 1 </OPTION>

<SELECT>

<P><TEXTAREA ROWS="2" NAME="S1" COLS="20">

</TEXTAREA></P>

Trang 31

28

TÓM TẮT NỘI DUNG CHƯƠNG 1

1 Khái niệm cơ bản

- World Wide Web là một không gian thông tin toàn cầu cho phép người dùng có thể truy cập (đọc và viết) qua các máy tính có nối mạng internet

- Giao thức truyền siêu văn bản (Hypertext Transfer Protocol - HTTP) được ứng dụng để truyền tải tài liệu và các tệp siêu văn bản giữa máy chủ Web (Web server) và máy khách Web (Web client) thông qua một trình duyệt Web

- Website tĩnh là website chỉ bao gồm các trang web không có cơ sở dữ liệu đi kèm + Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, DHTML… + Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít thay đổi và cập nhật

+ Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm quen với môi trường Internet

- Web động là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm xử lý dữ liệu và phát triển web

- Một ngôn ngữ kịch bản hay ngôn ngữ lập trình kịch bản (Scripting language hay script language) là một ngôn ngữ lập trình hỗ trợ viết kịch bản (script) Các chương trình được viết cho ngôn ngữ kịch bản có thể được thực thi thông qua lời gọi từ các tác vụ thay vì chạy thủ công bởi người dùng

2 Ngôn ngữ HTML

- Cấu trúc trang HTML cơ bản

<! Đây là phần đầu trang >

<TITLE>BÀI THƠ SuperMarket</TITLE>

- Các thẻ chính của trang web

+ Thẻ đầu trang web: <HEAD></HEAD>, <TITLE></TITLE>, <BGSOUND> + Thuộc tính thẻ <BODY></BODY>: BACKGROUND, BGCOLOR, LINK, TEXT BGPROPERTIES, LEFTMARGIN,

Trang 32

Câu hỏi 3: Cho biết các tên miền được dùng thông dụng hiện nay?

Câu hỏi 4: So sánh sự khác nhau cơ bản giữa lập trình Web tĩnh và lập trình Web động? Câu hỏi 5: Liệt kê các thẻ cơ bản của HTML làm việc với table và form

Trang 33

30

BÀI THỰC HÀNH CHƯƠNG 1

Bài thực hành số 1: Tạo trang web theo yêu cầu sau:

Hình 1- 7 Mô tả bài thực hành 1

Yêu cầu thiết kế:

Màu

1 Trang web - Tiêu đề cửa sổ: Các tag cơ bản

2 Nội dung

trang web

- Sử dụng các thẻ cơ bản để tạo trang web trên, trong đó:

+ Dòng đầu tiên: Căn giữa

+ Đọan văn bản ”Lập trình web ngôn ngữ HTML”:

Căn giữa Hướng dẫn giải :

1 Trang web - Sử dụng thẻ <title>

2 Nội dung

trang web

- Dòng 1: Thẻ <h1> và thuộc tính align để căn giữa

- Dòng 2: Thẻ <h2> và thuộc tính style (text-decoration) để gạch dưới

- Dòng 3: Thẻ <p> hoặc <div> và thuộc tính style(font-weight) để in đậm

- Đọan văn bản ”Lập trình web ngôn ngữ HTML”: Thẻ <p> hoặc

<div> và thuộc tính align để căn giữa, thẻ <br> để xuống dòng

Trang 34

31

Bài thực hành số 02: Tạo trang web nội dung và yêu cầu sau:

Hình 1- 8 Mô tả bài thực hành 2

1 Trang web - Tiêu đề cửa sổ: Định dạng văn bản

Trang 35

32

Bài thực hành số 03: Tạo trang web có nội dung sau:

Hình 1- 9 Mô tả bài thực hành số 3

- Ba đọan thơ: in nghiêng, có 3 màu chữ khác nhau

- Mỗi đoạn cách nhau bởi 1 đường kẻ ngang

- Toàn bộ bài thơ có màu nền là màu vàng nhạt

Trang 36

33

Hướng dẫn giải:

- Ba đọan thơ: Thẻ <div> và thuộc tính align, style (font-style; background-color; color) để căn giữa, in nghiêng, tô màu nền, màu chữ; Thẻ <br> đề xuống dòng

- Đường kẻ ngang: Thẻ <hr> và thuộc tính width xác định độ rộng của đường kẻ

Trang 37

34

- Khi nhấn chuột vào dòng “Liên hệ”: Mở trang web

của công ty bán hoa tươi – http://www.shopbanhoa.vn

Hướng dẫn giải :

2 Nội dung

trang web

- Tiêu đề: Thẻ <h2> và thuộc tính align, style (color)

- Hình: Thẻ <img> và thuộc tính src, height và align

- Hai đọan văn bản Giới thiệu và Liên hệ: Các thẻ <ol>,<li>, <ul>

và thuộc tính type

- “Giới thiệu” và “Liên hệ”: Thẻ <font> và thuộc tính style

(background-color; color; font-weight )

- Tạo liên kết đến trang web: Mở trang web của công ty bán hoa tươi http://www.shopbanhoa.vn

Trang 38

35

Yêu cầu thực hiện:

1 Trang web - Tiêu đề cửa sổ: Tạo bảng, trộn dòng và cột

Trang 39

36

Hướng dẫn giải :

(background-+ Ô thứ 2: Thẻ <td> và thuộc tính width, rowspan, align

- Dòng 2: Thẻ <tr> và <td> và thuộc tính colspan, height -Dòng 3: Thẻ <tr> và <td> và thuộc tính colspan, style (color; background- color; font-weight; font-size: 28px), align

- Dòng 4: Thẻ <tr>

+ Ô 1, 2: Thẻ <td> và thuộc tính colspan, valign

+ “Sản phẩm khuyến mãi”, “Đối tượng tham gia” và “Cách thức nhận giải”: Thẻ <font> và thuộc tính style (color; font-weight; font-size:18px)

+ Các đoạn văn bản còn lại: Thẻ <ul>, <li>, <ol>, <b>

Trang 40

37

Yêu cầu thực hiện:

1 Trang web - Tiêu đề cửa sổ: Tạo form và các điều khiển

2 Nội dung

trang web

- Tạo form

- Tạo table trong form

- Tạo các điểu khiển Text Fields, Radio, Drop-down box và nút Button

- Đăng kí Nghề nghiệp có danh sách như sau: Giáo viên, sinh viên,

bác sĩ…

- Tạo điều khiển nhãn dùng để in câu thông báo: “Bạn đã đăng ký thành công!!!”

Stt Đối tượng Yêu cầu xử lý chức năng

1 Nút Đồng ý Khi chọn: Xuất nội dung câu thông báo

Hướng dẫn thực hiện:

2 Nội dung

trang web

- Tạo form: Thẻ <form> và thuộc tính id

- Tạo table gồm 9 dòng 2 cột: Thẻ <table> và các thuộc tính

- Tạo điểu khiển: Thẻ <input>

- Text Fields: Thuộc tính type (text), id, size

- Radio buttons: Thuộc tính type (radio), name, id, value và checked

- Button: Thẻ <input> và thuộc tính type (button), id, value

- Đăng kí Dropdown-box:

+ Nghề nghiệp: Thẻ <select> và thuộc tính id, thẻ <option> và

thuộc tính value

+ Chọn sản phẩm tham gia: Thẻ <select> và thuộc tính id, size=4,

multiple; Thẻ <option> và thuộc tính value, selected

- Tạo điều khiển nhãn: Thẻ <div> và thuộc tính id

Xử lý chức năng

1 Nút Đồng ý - Dùng sự kiện “onClick” của nút điều khiển Button

- Dùng thuộc tính InnerText của đăng kí nhãn

Định dạng
Số trang	106
Dung lượng	2,63 MB

Tiêu đề	Thiết kế Web
Tác giả	Lê Hữu Toản
Trường học	Cao đẳng Công nghiệp Nam Định
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Giáo trình
Năm xuất bản	2020
Thành phố	Nam Định