Giáo trình thiết kế web

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,

Trang 3

1

LỜI GIỚI THIỆU

Trong những năm gần đây, cùng với sự phát triển của Công nghệ thông tin thì mạng máy tính cũng được phát triển rộng rãi, kéo theo ứng dụng của mạng máy tính là internet và các dịch vụ cũng trở nên không thể thiếu trong cuộc sống hiện đại Để 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ể:

Bài 1 Tổng quan về WWW và ngôn ngữ HTML

Bài 2 Thiết kế trang Web

Bài 3: Microsoft FrontPage

Bài 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 20

Chủ biên

Trang 4

2

MỤC LỤC

LỜI GIỚI THIỆU 1

MỤC LỤC 2

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

Bài 1 TỔNG QUAN VỀ WWW VÀ NGÔN NGỮ HTML 6

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

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

1.1.1.1 Internet 6

1.1.1.2 Địa chỉ IP 7

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

1.1.1.4 World Wide Web (WWW) 9

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

1.1.3 Web tĩnh, Web động 11

1.1.3.1 Trang web 11

1.1.3.2 Web tĩnh 12

1.1.3.3 Web động 12

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

1.2 NGÔN NGỮ HTML 13

1.2.1 Giới thiệu HTML 13

1.2.2 Cấu trúc trang HTML 13

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

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

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

1.2.3.3 Thẻ đường kẻ ngang 18

1.2.3.4 Chèn hình ảnh 19

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

1.2.3.6 Tạo bảng (Table) 21

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

1.2.3.8 Tạo khung (Frame) 22

1.2.3.9 Tạo Form 23

TÓM TẮT NỘI DUNG 26

BÀI TẬP 27

BÀI THỰC HÀNH 28

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

NỘI DUNG THẢO LUẬN 38

Trang 5

3

Bài 2 THIẾT KẾ TRANG WEB 40

2.1 TỔNG QUAN 40

2.2 TRANG VÀ VĂN BẢN TRÊN TRANG 40

2.3 BẢNG BIỂU (TABLE) VÀ TRANG KHUNG (FRAME) 42

2.4 MULTIMEDIA TRÊN TRANG WEB 47

2.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG WEB 48

BÀI TẬP 50

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

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

Bài 3 MICROSOFT FRONTPAGE 59

3.1 TỔNG QUAN 59

3.2 TRANG VÀ VĂN BẢN TRÊN TRANG 60

3.3 TẠO BẢNG (Table) VÀ TRANG KHUNG (FRAME) 61

3.3.1 Làm việc với bảng 61

3.3.2 Làm việc với khung Frame 62

3.4 MULTIMEDIA TRÊN TRANG WEB 64

3.5 CÁC YẾU TỐ ĐỘNG TRÊN TRANG 66

3.6 KHUNG NHẬP - FORM 67

3.6.1 Các đối tượng của Form 67

3.6.2 Thuộc tính đối tượng 67

3.7 LIÊN KẾT 68

3.7.1 Liên kết trang 68

3.7.2 Liên kết địa chỉ web 68

3.7.3 Liên kết email 68

3.7.4 Liên kết bản đồ ảnh 68

BÀI TẬP 70

NỘI DUNG THẢO LUẬN CHƯƠNG 3 74

Bài 4 SCRIPT TRONG TRANG WEB 76

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

4.2 CƠ BẢN VỀ JAVASCRIPT 76

4.2.1 Khái niệm JavaScript 76

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

Trang 6

4

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

4.3 CƠ BẢN VỀ VBSCRIPT 86

4.3.1 Khái niệm VBScript 86

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

4.3.3 Đối tượng trong VBScript 90

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

BÀI TẬP 93

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

NỘI DUNG THẢO LUẬN 95

TÀI LIỆU THAM KHẢO 96

Trang 7

5

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

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

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

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

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

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

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

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

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

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

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

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

Trang 8

6

Bài 1 TỔNG QUAN VỀ WWW VÀ NGÔN NGỮ HTML 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 9

Để đơ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 10

8

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 11

9

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 12

10

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 13

11

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 14

12

+ Đị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 15

13

- 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 16

14

- 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 17

15

- 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 18

16

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 19

17

- 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 20

18

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 21

19

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 22

20

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 23

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 24

22

<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 25

23

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 26

- 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 27

25

</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 28

26

TÓM TẮT NỘI DUNG

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 29

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 30

28

BÀI THỰC HÀNH

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 31

29

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 32

30

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 33

31

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 34

32

- 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 35

33

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 36

34

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 37

35

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

Trang 38

36

Bài thực hành số 07: Thiết kế trang web theo yêu cầu

- Thiết kế nội dung theo mẫu

- Tại mục 2 tạo liên kết thực hiện mở 1 trang ChuongTrinhDTWeb.html

- Học phần I, II, III tạo liên kết đến từng học phần tương ứng trong cùng trang hiện tại

Bài thực hành số 08: Tạo liên kết đến các

Website lần lượt theo trình tự:

Thiết kế trang phiếu thăm dò ý kiến (Sử dụng

form tạo các đối tượng bên trong theo mẫu)

Gợi ý: Nên kết hợp với tạo bảng để trình bày

Trang 39

37

Bài thực hành số 10: Thiết kế trang chủ sau:

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

- Nắm chắc các khái niệm cơ bản về Web: WWW, HTTP, HTML, Web tĩnh, Web động

- Nghiên cứu các thẻ cơ bản và nâng cao của ngôn ngữ đánh dấu siêu văn bản HTML

- Sử dụng các phần mềm soạn thảo văn bản để thiết kế các trang web theo hướng dẫn của bài thực hành

- Em hãy duyệt trang web http://www.cnd.edu.vn sau đó nhấn phải chuột lên trang web, chọn View page source để hiển thị các mã code của trang web Từ đó cho biết trang web

đó sử dụng các thẻ HTML nào? Tìm hiểu và nêu công dụng của các thẻ đó

Trang 40

38

NỘI DUNG THẢO LUẬN

Chủ đề: Bố cục các thành phần của trang web theo bố cục xây dựng bằng các lệnh cơ bản của HTML như: table, <td>, <tr>, <div>

1 Xác định các dạng bố cục

Bố cục trang web rất quan trọng để tạo trang web của bạn trông đẹp hơn Vì thế thiết kế bố cục trang web cần cẩn thận Hầu hết các website bố cục nội dung của chúng trong nhiều cột giống như tạp chí và báo Nhiều cột được tạo ra bằng cách sử dụng các thẻ <table> và <div> Sử dụng style để thêm những thuộc tính cho những phần tử HTML

để website trong đẹp hơn

Tiêu đề	Giáo Trình Thiết Kế Web
Tác giả	Lê Hữu Toản
Trường học	Trường 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	Năm 20..
Thành phố	Nam Định

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