Lập trình 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

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 Lập trình 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 về lập trình Web

Chương 2 Cấu hình dịch vụ Web

Chương 3: Ngôn ngữ PHP

Chương 4 Lập trình Web động với PHP

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 động từ

cơ bản đến nâng cao bằng công nghệ HTML và ngôn ngữ PHP Đượ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

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 BẢNG, HÌNH VẼ 3

BÀI 1 TỔNG QUAN VỀ LẬP TRÌNH WEB 4

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

1.1.1 WWW 4

1.1.1.1 Internet 4

1.1.1.2 Địa chỉ IP 5

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

1.1.1.4 World Wide Web (WWW) 7

1.1.2 Webpage 8

1.1.3 Trình duyệt 9

1.1.4 Địa chỉ web, tên miền 11

1.2 GIỚI THIỆU CẤU TRÚC HTML VÀ THẺ HTML 12

1.2.1 Cấu trúc trang web 12

1.2.2 Các thẻ HTML thông dụng 13

1.2.3 Các thẻ HTML đặc biệt 20

TÓM TẮT NỘI DUNG 25

BÀI TẬP 26

BÀI THỰC HÀNH 27

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

NỘI DUNG THẢO LUẬN 37

BÀI 2 CẤU HÌNH DỊCH VỤ WEB 39

2.1 LẬP TRÌNH WEB ĐỘNG 39

2.1.1 Khái niệm Web động 39

2.1.2 Sự khác nhau giữa Web động và Web tĩnh 39

2.1.3 Ngôn ngữ lập trình Web động 40

2.2 WEB SERVER 41

2.2.1 IIS 41

2.2.2 APACHE 42

2.3 CƠ SỞ DỮ LIỆU 42

2.3.1 Cơ sở dữ liệu MySQL 42

2.3.2 Cơ sở dữ liệu Access 45

2.3.3 Cơ sở dữ liệu SQL Server 50

2.4 CÀI ĐẶT, CẤU HÌNH PHP, MYSQL, APACHE 51

BÀI TẬP 52

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

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

Bài 3 NGÔN NGỮ PHP 53

3.1 BIẾN, HẰNG, TOÁN TỬ, VÀ CÁC CẤU TRÚC ĐIỀU KHIỂN 53

Trang 5

2

3.1.1 Biến, hằng 53

3.1.2 Các toán tử 54

3.1.3 Cấu trúc điều khiển 57

3.2 HÀM TRONG PHP 60

3.2.1 Khái niệm 60

3.2.2 Các hàm thường dùng 60

3.2.3 Xây dựng hàm 62

BÀI TẬP 65

Bài 4 LẬP TRÌNH WEB ĐỘNG VỚI PHP 66

4.1 NHÚNG TẬP TIN VÀ MÃ PHP VÀO TRANG HTML 66

4.2 ĐỐI TƯỢNG TRONG PHP 67

4.2.1 Session 67

4.2.2 Cookies 68

4.2.3 Application 70

4.3 THAO TÁC VỚI CƠ SỞ DỮ LIỆU (MYSQL) 71

4.3.1 Kết nối cơ sở dữ liệu 71

4.3.2 Truy xuất dữ liệu 71

4.3.3 Thêm mới dữ liệu 73

4.3.3 Sửa, xoá dữ liệu 74

4.4 MỘT SỐ ỨNG DỤNG 74

4.4.1 Ứng dụng thương mại điện tử 74

4.4.2 Ứng dụng quản lý tin tức 77

BÀI TẬP 82

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

TÀI LIỆU THAM KHẢO 83

Trang 6

3

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

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

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

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

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

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

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

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

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

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

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

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 7

4

BÀI 1 TỔNG QUAN VỀ LẬP TRÌNH WEB 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 WWW

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 8

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

6

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 10

7

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 11

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

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

b 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

Trang 12

* 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

c 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

- 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.3 Trình duyệt

Trình duyệt web là một ứng dụng phần mềm để truy cập thông tin trên World Wide Web Mỗi trang web, hình ảnh và video riêng lẻ được xác định bằng một URL riêng biệt, cho phép các trình duyệt truy xuất và hiển thị chúng trên thiết bị của người dùng mới Trình duyệt web đọc định dạng HTML để hiển thị, do vậy một trang web có thể hiển thị khác nhau trên các trình duyệt khác nhau

Trang 13

10

Các trình duyệt web phổ biến nhất là Chrome, Firefox, Internet Explorer và Microsoft Edge(Edge Chromuim)

Trình duyệt web đầu tiên, được gọi là WorldWideWeb, được phát minh vào năm

1990 bởi Sir Tim Berners-Lee Sau đó ông đã tuyển dụng Nicola Pellow để viết Line Mode Browser,hiển thị các trang web trên các thiết bị đầu cuối; nó được phát hành vào năm 1991 Năm 1993 là một năm đầy ấn tượng với việc phát hành Mosaic, được công nhận là "trình duyệt phổ biến đầu tiên trên thế giới".Giao diện đồ họa sáng tạo của nó làm cho hệ thống World Wide Web dễ sử dụng và do đó người dùng trung bình dễ tiếp cận hơn Điều này, đến lượt nó, đã làm bùng nổ sự bùng nổ Internet của những năm 1990 khi Web phát triển với tốc độ rất nhanh Marc Andreessen, lãnh đạo của Mosaic, đã sớm thành lập công ty riêng của mình, Netscape, đã phát hành Netscape Navigator bị ảnh hưởng bởi Mosaic vào năm 1994 Navigator nhanh chóng trở thành trình duyệt phổ biến nhất

Microsoft ra mắt Internet Explorer vào năm 1995, dẫn đến một cuộc chiến trình duyệt với Netscape Microsoft đã có thể đạt được một vị trí thống trị vì hai lý do: nó đi kèm Internet Explorer với hệ điều hành Windows phổ biến của họ và nó là phần mềm miễn phí mà không có giới hạn sử dụng Cuối cùng, thị phần của Internet Explorer đạt hơn 95% vào năm 2002 Năm 1998, tuyệt vọng để duy trì tính cạnh tranh, Netscape chuyển đổi thành Mozilla Foundation để tạo ra một trình duyệt mới sử dụng mô hình phần mềm nguồn mở Công trình này phát triển thành Firefox, lần đầu tiên được Mozilla phát hành vào năm 2004 Firefox đã đạt 28% thị phần trong năm 2011

Apple phát hành trình duyệt Safari của họ năm 2003 Nó vẫn là trình duyệt thống trị trên nền tảng của Apple, mặc dù nó không bao giờ trở thành một yếu tố ở nơi khác

Người tham gia chính cuối cùng vào thị trường trình duyệt là Google Nó là trình duyệt Chrome, ra mắt vào năm 2008, đã là một thành công lớn Nó dần dần chiếm thị phần từ Internet Explorer và trở thành trình duyệt phổ biến nhất trong năm 2012 Nó vẫn chiếm ưu thế kể từ đó

Về mặt công nghệ, các trình duyệt đã mở rộng đáng kể khả năng HTML, CSS, JavaScript và đa phương tiện từ những năm 1990 Một lý do là cho phép các trang web phức tạp hơn, chẳng hạn như các ứng dụng web Một yếu tố khác là sự gia tăng đáng kể kết nối băng thông rộng, cho phép mọi người truy cập vào nội dung web chuyên sâu dữ liệu, chẳng hạn như phát trực tuyến trên YouTube, điều này không thể thực hiện được trong thời đại modem dial-up

Các tính năng giao diện người dùng phổ biến của trình duyệt:

+ Các nút Back và forward để quay lại trang trước đó đã truy cập hoặc chuyển tiếp tới trang tiếp theo

+ Một nút refresh hoặc reload để tải lại trang hiện tại

+ Một nút stop để hủy tải trang (Trong một số trình duyệt, nút dừng được hợp nhất với nút reload.)

+ Một nút home để quay lại trang chủ của người dùng

+ Một thanh địa chỉ để nhập URL của một trang và hiển thị nó

Trang 14

11

+ Thanh tìm kiếm để nhập cụm từ vào công cụ tìm kiếm Trong một số trình duyệt, thanh tìm kiếm được hợp nhất với thanh địa chỉ

1.1.4 Địa chỉ web, tên miền

Địa chỉ website hay còn gọi là domain, được định nghĩa là dòng chữ mà người dùng nhập vào các trình duyệt trên mạng Internet để truy cập đến website của bạn Mỗi website đều phải có domain riêng với đặc tính rõ ràng, dễ nhớ và đặc biệt là không được trùng lặp với các địa chỉ trang web khác Theo thuật ngữ chuyên ngành, địa chỉ của website được gọi là tên miền Trước khi website đi vào hoạt động thì cần phải có đăng ký tên miền và hosting

Lợi ích mà địa chỉ website mang lại?

Thứ nhất, địa chỉ website được ví như là một công cụ để khách hàng vào bên trong website của bạn Điều này giúp khách hàng truy cập vào trang web của bạn nhanh chóng

và dễ dàng

Thứ hai, bạn có thể tạo một hệ thống email theo tên miền cho doanh nghiệp ví dụ như orders@tencongty.com, sales@tencongty.com, hay info@tencongty.com , Bởi vậy, các hoạt động công ty trở nên chuyên nghiệp, uy tín hơn và củng cố thêm niềm tin cho khách hàng ghé thăm web của bạn

Thứ ba, địa chỉ website giúp bạn tiếp cận và mở rộng thị trường thông qua Google Đây là một trong những trang giao diện được người dùng sử dụng nhiều nhất Do đó địa chỉ trang web sẽ giúp doanh nghiệp của bạn tiếp cận khách hàng toàn cầu với tốc độ mạnh mẽ chỉ bằng một cái click chuột

Cuối cùng, địa chỉ website không giới hạn thời gian hoạt động Mang đến cho doanh nghiệp của bạn khách hàng tiềm năng mọi lúc mọi nơi

Các thành phần của một địa chỉ website

Giao thức

Giao thức mạng được gọi là địa chỉ IP, bao gồm:

• Giao thức truyền siêu văn bản (HTTP) hỗ trợ người dùng truy cập vào các trang web bảo mật (HTTPS), chuyên sử dụng cho các trang web thương mại điện tử hoặc cổng thông tin yêu cầu mọi người phải đăng nhập

• Giao thức truyền tệp (FTP) được sử dụng để gửi email và truyền tệp

Trang 15

12

Các giao thức được tách ra khỏi phần còn lại của địa chỉ website bởi dấu hai chấm Một

số trình duyệt như Firefox hoặc Chrome không hiển thị giao thức trong thanh địa chỉ Bên cạnh đó, trình duyệt Opera chỉ xuất hiện khi bạn nhấp vào thanh địa chỉ

Đường dẫn và tên tệp

Đường dẫn nghĩa là cho bạn biết trình duyệt sẽ mở thư mục hoặc tệp nào và được phân biệt chữ hoa, chữ thường Nếu không có đường dẫn nào được chỉ định, thì “Trang chủ” hoặc tệp “index.html” sẽ được hiển thị

Với bài viết trên, Bizfly đã giúp bạn hiểu rõ hơn về địa chỉ website Đừng quên truy cập

Bizfly.vn để cập nhật thêm những thông tin về gói dịch vụ thiết kế website chuyên nghiệp, uy tín toàn diện phù hợp với mọi lĩnh vực doanh nghiệp nhé

1.2 GIỚI THIỆU CẤU TRÚC HTML VÀ THẺ HTML

1.2.1 Cấu trúc trang web

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

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ú ý:

- 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

Trang 16

13

- Để 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

- 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

- 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

Trang 17

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

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 BACKGROUND=url BGCOLOR=color BGPROPERTIES=FIXED

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

<BODY BGCOLOR=YELLOW TEXT=#800000>

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

</BODY>

Trang 18

15

<HTML>

<HEAD>

<TITLE>Web demo</TITLE></HEAD>

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

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

</BODY> </HTML>

*) 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

- 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

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

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

Trang 19

16

<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

17

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

18

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

19

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

*) Đị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

21

<TR> Tạo dòng

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

*) 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>

<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

22

*) Tạo khung (Frame)

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

*) 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)

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

Trang 26

23

- 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

- Submit: Nút Submit, khi người dùng sẽ chuyển đến trang quy định bởi thuộc tính ACTION của thẻ FORM

- Image: nút Submit hình ảnh

- Button: nút lệnh

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

<P><INPUT TYPE="image" ALT=”Tìm kiếm” BORDER="0" SRC="timkiem1.jpg"

Trang 27

24

NAME="I1" WIDTH= "100" HEIGHT="20">

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

25

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

27

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

28

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

29

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

30

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

31

- 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

32

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

33

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

34

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

35

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

36

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

37

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 đề	Lập trình 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

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