Giáo trình Thiết kế Web - CĐ Nghề Công Nghiệp Hà Nội

(NB) Giáo trình Thiết kế Web này cung cấp cho sinh viên ngành Công nghệ Thông tin những kiến thức căn bản về thiết kế web như: Các khái niệm cơ bản của thiết kế Web, quy trình thiết kế Web, các thẻ HTML cơ bản, các công cụ và phần mềm để thiết kế được giao diện Web, lập trình với ngôn ngữ ASP.NET kết hợp với cơ sở dữ liệu để tạo ra các trang Web động,....

TỔNG QUAN VỀ THIẾT KẾ WEB

Lịch sử WWW

Để hiểu rõ lịch sử của WWW, cần phân biệt giữa WWW và Internet Internet là mạng lưới kết nối hàng triệu máy tính toàn cầu, cho phép chúng giao tiếp khi cùng kết nối Trong khi đó, WWW (World Wide Web) là dịch vụ tìm kiếm và truy cập thông tin qua giao thức HTTP, sử dụng trình duyệt Web Do đó, WWW chỉ là một trong những dịch vụ phổ biến nhất của Internet, bên cạnh các dịch vụ khác như Email, FTP và CHAT.

Tim Berners-Lee, viện sĩ Viện Hàn lâm Anh, là cha đẻ của World Wide Web (WWW) Năm 1980, khi làm kỹ sư phần mềm cho CERN tại Geneva, ông nhận thấy đồng nghiệp gặp khó khăn trong việc tra cứu tài liệu và đã phát triển phần mềm Enquire, cho phép tạo ra một sổ tay “siêu văn bản” với khả năng kết nối các tài liệu trên máy tính của mình Mặc dù phần mềm hoạt động hiệu quả, ông mong muốn mở rộng khả năng này cho các máy tính khác trên mạng Năm 1989, cùng với Robert Cailliau, Tim Berners-Lee đã đề xuất dự án thiết kế hệ thống thông tin toàn cầu WWW, dựa trên ý tưởng siêu văn bản, nhằm giúp mọi người dễ dàng chia sẻ công việc qua mạng máy tính.

Mặc dù ít được chú ý, Tim Berners-Lee đã phát triển ba thành phần chính cho web: HTTP, HTML và trình duyệt web Ban đầu, ông tạo ra hệ thống siêu văn bản để quản lý hàng trăm dự án tại CERN Sử dụng máy tính NeXT, ông đã phát triển trình duyệt thô sơ mang tên World Wide Web vào mùa thu năm 1990 Vào ngày 06 tháng 8 năm 1991, ông và Cailliau đã tạo ra trang web đầu tiên trên thế giới, là danh bạ điện thoại của nhân viên CERN, và một bản sao của trang web này vẫn còn tồn tại đến ngày nay.

Web đã bùng nổ vào năm 1993 khi Marc Andreessen, một sinh viên tốt nghiệp Đại học Illinois, phát triển phần mềm Mosaic, cho phép hiển thị hình ảnh và văn bản trên các trang web Sự ra đời của trình duyệt này đã thúc đẩy sự phát triển nhanh chóng của web và Internet.

Vào ngày 30 tháng 4 năm 1993, CERN đã công bố World Wide Web miễn phí cho mọi người, nhờ vào sự thuyết phục của Tim Berners Lee Ông đã thuyết phục CERN chia sẻ công nghệ web và mã nguồn, tạo điều kiện cho tất cả mọi người có thể sử dụng và tham gia phát triển Đây là một trong những yếu tố quan trọng góp phần vào sự phát triển nhanh chóng và mạnh mẽ của web.

- Tháng 5-1993: Viện công nghệ Massachusetts lần đầu tiên đƣa một tờ báo lên web

- Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng trong lập trình web đƣợc công bố

- Tháng 11-1993: Webcam đầu tiên đƣợc kết nối

- Tháng 2-1994: Tiền thân của Yahoo đƣợc đƣa lên internet

- Tháng 4-1994: BBC mở website đầu tiên cho chương trình Ti vi: The Net

- Ngày 13-10-1994: Bill Clinton đƣa Nhà Trắng lên web

- Tháng 2-1995 : Radio HK chính thức trở thành một đài phát thanh trực tuyến “fulltime”

- Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trương

- Ngày 9-8-1995: “Bùng nổ tên miền com” Hàng loạt công ty trực tuyến chính thức mở cửa website của mình

- Ngày 24-8-1995: Microsoft Internet Explorer (IE) đƣợc phát hành và là một phần trong Windows 95

- Ngày 4-9-1995: EBay, website đấu giá trực tuyến đầu tiên đƣợc thành lập

- Ngày 15-12-1995: Alta Vista, công cụ tìm kiếm đa ngôn ngữ đầu tiên ra mắt người sử dụng Internet

- Ngày 17-12-1997: Jorn Barger đƣa ra khái niệm weblog, sau này rút gọn thành blog

- Tháng 9-1998: Gã khổng lồ Google mở cửa văn phòng đầu tiên của mình

- Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều người chơi (MMORPG) đầu tiên

- Ngày 19-8-1999: MySpace khai trương Đây là một trong những website đầu tiên về lưu trữ trực tuyến

- Tháng 11-1999: Boo.com trở thành site đầu tiên kinh doanh thời trang

- Ngày 2-7-2000: Hacker đánh sập 8 website lớn trong đó có Yahoo, CNN và Amazon

- Ngày 15-1-2001: Jimmy Wales sáng lập Bách khoa toàn thƣ trực tuyến Wikipedia

- Ngày 22-11-2001: Giáo hoàng John Paul II gửi bức thƣ điện tử đầu tiên từ chiếc laptop trong phòng làm việc của ông

- Ngày 11-12-2002: FBI bắt đầu đăng tin truy nã tội phạm trực tuyến

- Ngày 28-4-2003: Apples đƣa dịch vụ tải nhạc iTunes vào hoạt động

- Tháng 7-2004: Tim Berners Lee được phong tước hiệp sĩ

- Ngày 4-2-2004: Zuckerberg thành mạng xã hội Facebook

- Ngày 9-11-2004: Mozilla Firefox ra mắt công chúng

- Tháng 2-2005: Website chia sẻ video youtube.com ra đời

Ngày nay, Web toàn cầu đã phát triển vượt bậc, không chỉ hỗ trợ văn bản và đồ họa cơ bản mà còn tích hợp nhiều loại phương tiện đa dạng như hình động, âm thanh, phim ảnh và ứng dụng tương tác Nhiều trang Web hiện đại hoạt động giống như phần mềm máy tính, mang đến trải nghiệm phong phú và hấp dẫn cho người dùng.

Netscape Navigator và Microsoft Internet Explorer đều hỗ trợ nhiều loại nội dung trực tuyến, tuy nhiên, trong một số trường hợp, người dùng cần tải về các plug-in đặc biệt để trình duyệt có thể nhận diện và hiển thị nội dung đó đúng cách.

Ngày nay, với hàng tỷ trang web đang phát triển không ngừng, Internet đã trở thành một vũ trụ thông tin phong phú, phản ánh tri thức của nhân loại và lưu giữ kho tàng tri thức quý giá của con người.

Thiết kế Web

Để đánh giá hiệu quả trong việc xây dựng Web, cần thực hiện qua các bài viết, kiểm tra vấn đáp hoặc trắc nghiệm, tự luận Quan trọng là nắm rõ các bước quy trình xây dựng Web và viết đúng cú pháp câu lệnh khi lập trình Web động.

Dựa trên năng lực thực hành thiết kế, người học có thể xây dựng một ứng dụng Web tĩnh bằng cách sử dụng các ngôn ngữ lập trình Họ cũng có khả năng sử dụng các đối tượng lập trình và liên kết với các cơ sở dữ liệu để tạo ra một ứng dụng Web hoàn chỉnh.

BÀI 1 : TỔNG QUAN VỀ THIẾT KẾ WEB Mục tiêu :

- Hiểu được lịch sử của WWW

- Hiểu được các khái niệm cơ bản về WWW

- Hiểu được cấu trúc của một trang HTML

- Có khả năng thiết kế được giao diện

- Biết cách tổ chức được thông tin trong trang chủ

- Thực hiện các thao tác an toàn với máy tính

1 Lịch sử WWW Để hiểu đƣợc lịch sử của WWW điều quan trọng là phân biệt đƣợc sự khác nhau giữa WWW và Internet Internet là mạng của các mạng, kết nối hàng triệu máy tính trên toàn cầu lại với nhau, hình thành một hệ thống mà trong đó bất cứ máy tính nào cũng có thể liên lạc với các máy tính khác khi chúng đang cùng đƣợc kết nối vào Internet Còn WWW (viết tắt từ World Wide Web - Web rộng khắp thế giới - gọi tắt là Web) là dịch vụ trao đổi, tìm kiếm và truy cập thông tin trên mạng theo giao thức HTTP ( Hyper Text Tranfer Protocol) WWW đƣợc sử dụng thông qua trình duyệt Web Nhƣ vậy WWW chỉ là dịch vụ phổ biến nhất của Internet Ngoài WWW, Internet còn có các dịch vụ khác nhƣ Email (thƣ điện tử), FTP (File Transfer Protocol - truyền tải tệp tin ), CHAT (tán gẫu),

Cha đẻ của World Wide Web (WWW) là viện sĩ Tim Berners-Lee, người đã phát triển phần mềm Enquire vào năm 1980 trong thời gian làm việc tại CERN Phần mềm này giúp ông kết nối các tài liệu với nhau qua một hệ thống siêu văn bản, cho phép truy cập thông tin một cách dễ dàng Nhận thấy tiềm năng của công nghệ này, vào năm 1989, ông cùng với Robert Cailliau đã đề xuất dự án xây dựng hệ thống thông tin toàn cầu WWW, nhằm tạo điều kiện cho việc chia sẻ thông tin giữa các máy tính trên mạng.

Mặc dù ít được chú ý, Tim Berners-Lee đã phát triển ba thành phần chính cho các trang web: HTTP, HTML và trình duyệt web Ông bắt đầu xây dựng hệ thống siêu văn bản để quản lý hàng trăm dự án và thiết bị tại khoa Vật lý năng lượng cao của CERN Sử dụng máy tính NeXT, ông đã tạo ra trình duyệt thô sơ đầu tiên mang tên World Wide Web vào mùa thu năm 1990, sau này được đổi thành Nexus Vào ngày 6 tháng 8 năm 1991, ông và Cailliau đã cho ra đời trang web đầu tiên trên thế giới, đó là danh bạ điện thoại của nhân viên CERN, và một bản sao của trang web này vẫn còn tồn tại đến ngày nay.

Web đã bùng nổ vào năm 1993 khi Marc Andreessen, một sinh viên tốt nghiệp Đại học Illinois, phát triển phần mềm Mosaic, trình duyệt đầu tiên cho phép hiển thị hình ảnh và văn bản trên các trang web Sự ra đời của Mosaic đã thúc đẩy sự phát triển nhanh chóng của web và Internet, mở ra kỷ nguyên mới cho công nghệ thông tin.

Vào ngày 30 tháng 4 năm 1993, CERN đã chính thức công bố World Wide Web miễn phí cho tất cả mọi người Tim Berners-Lee đã thuyết phục CERN chia sẻ công nghệ web và mã nguồn, cho phép mọi người sử dụng và tham gia phát triển Quyết định này là một trong những yếu tố quan trọng góp phần vào sự phát triển nhanh chóng và mạnh mẽ của web.

- Tháng 5-1993: Viện công nghệ Massachusetts lần đầu tiên đƣa một tờ báo lên web

- Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng trong lập trình web đƣợc công bố

- Tháng 11-1993: Webcam đầu tiên đƣợc kết nối

- Tháng 2-1994: Tiền thân của Yahoo đƣợc đƣa lên internet

- Tháng 4-1994: BBC mở website đầu tiên cho chương trình Ti vi: The Net

- Ngày 13-10-1994: Bill Clinton đƣa Nhà Trắng lên web

- Tháng 2-1995 : Radio HK chính thức trở thành một đài phát thanh trực tuyến “fulltime”

- Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trương

- Ngày 9-8-1995: “Bùng nổ tên miền com” Hàng loạt công ty trực tuyến chính thức mở cửa website của mình

- Ngày 24-8-1995: Microsoft Internet Explorer (IE) đƣợc phát hành và là một phần trong Windows 95

- Ngày 4-9-1995: EBay, website đấu giá trực tuyến đầu tiên đƣợc thành lập

- Ngày 15-12-1995: Alta Vista, công cụ tìm kiếm đa ngôn ngữ đầu tiên ra mắt người sử dụng Internet

- Ngày 17-12-1997: Jorn Barger đƣa ra khái niệm weblog, sau này rút gọn thành blog

- Tháng 9-1998: Gã khổng lồ Google mở cửa văn phòng đầu tiên của mình

- Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều người chơi (MMORPG) đầu tiên

- Ngày 19-8-1999: MySpace khai trương Đây là một trong những website đầu tiên về lưu trữ trực tuyến

- Tháng 11-1999: Boo.com trở thành site đầu tiên kinh doanh thời trang

- Ngày 2-7-2000: Hacker đánh sập 8 website lớn trong đó có Yahoo, CNN và Amazon

- Ngày 15-1-2001: Jimmy Wales sáng lập Bách khoa toàn thƣ trực tuyến Wikipedia

- Ngày 22-11-2001: Giáo hoàng John Paul II gửi bức thƣ điện tử đầu tiên từ chiếc laptop trong phòng làm việc của ông

- Ngày 11-12-2002: FBI bắt đầu đăng tin truy nã tội phạm trực tuyến

- Ngày 28-4-2003: Apples đƣa dịch vụ tải nhạc iTunes vào hoạt động

- Tháng 7-2004: Tim Berners Lee được phong tước hiệp sĩ

- Ngày 4-2-2004: Zuckerberg thành mạng xã hội Facebook

- Ngày 9-11-2004: Mozilla Firefox ra mắt công chúng

- Tháng 2-2005: Website chia sẻ video youtube.com ra đời

Trước đây, Web toàn cầu chỉ hỗ trợ văn bản và đồ họa cơ bản, nhưng hiện nay, nó đã phát triển mạnh mẽ với khả năng hỗ trợ nhiều loại phương tiện đa dạng Nhiều trang web hiện chứa đựng hình động, âm thanh, phim ảnh và các ứng dụng hoạt động giống như phần mềm máy tính thông thường.

Netscape Navigator và Microsoft Internet Explorer hỗ trợ nhiều nội dung trực tuyến, nhưng đôi khi bạn cần tải về các plug-in đặc biệt để trình duyệt có thể nhận diện chúng.

Ngày nay, với hàng tỷ trang web đang phát triển mạnh mẽ, Internet đã trở thành một vũ trụ thông tin phong phú, phản ánh tri thức nhân loại và lưu giữ kho tàng kiến thức của chúng ta.

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

Hệ thống web là một phần của Internet, bao gồm nhiều máy chủ web (Web Server) trên toàn cầu, cho phép người dùng truy cập các trang web từ bất kỳ đâu Web Server là máy tính được kết nối liên tục với Internet và cài đặt các hệ điều hành cùng phần mềm chuyên dụng như Apache và Internet Information Services để đáp ứng nhu cầu truy cập Những máy chủ này thường có cấu hình cao, hoạt động ổn định và tốc độ đường truyền nhanh, giúp xử lý nhiều yêu cầu truy cập đồng thời từ nhiều người dùng.

Trình duyệt web, hay còn gọi là Web Browser, là công cụ mà người dùng sử dụng trên máy khách để truy cập các dịch vụ web Người dùng có thể yêu cầu một trang tài liệu bằng cách nhập URL (Địa chỉ truy cập của trang Web) vào khung Address của trình duyệt Sau đó, trình duyệt sẽ gửi thông tin này đến Web Server, nơi sử dụng URL để xác định và hiển thị trang web theo yêu cầu Đối với các trang web động, Web Server sẽ xử lý thông tin và trả kết quả về cho người dùng Một số trình duyệt phổ biến hiện nay bao gồm Internet Explorer, Netscape, Opera, Google Chrome và Firefox.

2.2 Website, Web page, Static page, Dynamic page

Ngày nay, máy tính trở thành công cụ hữu ích cho việc truy cập Internet, chủ yếu để tìm kiếm thông tin Để nâng cao hiệu quả sử dụng máy tính trong việc tra cứu thông tin trực tuyến, cần tìm ra cách thức giúp mọi người dễ dàng khai thác tối đa tiềm năng của công nghệ này.

Siêu văn bản (Hypertext) là một khái niệm giúp người dùng dễ dàng tìm kiếm tài liệu liên quan thông qua các liên kết Trong thế giới siêu văn bản, nội dung không chỉ giới hạn trong một trang văn bản mà còn được mở rộng với nhiều loại tài liệu khác như hình ảnh, âm thanh và hoạt hình Người dùng có thể dễ dàng di chuyển giữa các tài liệu thông qua các liên kết, tạo điều kiện cho việc khám phá thông tin phong phú ngay tại nhà.

Người dùng không cần phải đến Louvre ở Paris để chiêm ngưỡng các kiệt tác hội họa, nhờ vào sự phát triển bùng nổ của Internet trong những năm gần đây Để phổ biến thông tin toàn cầu, cần một ngôn ngữ dễ hiểu cho tất cả máy tính, và ngôn ngữ đó là HTML (Hyper Text Markup Language) Các trang web sinh động trên World Wide Web được tạo ra từ HTML, cho phép kết hợp hài hòa giữa văn bản, hình ảnh, âm thanh, video và các liên kết đến các trang siêu văn bản khác.

Tên gọi ngôn ngữ đánh dấu siêu văn bản phản ánh đúng thực chất của công cụ này:

- Đánh dấu (Markup): HTML là ngôn ngữ của các thẻ đánh dấu –

Tag Các thẻ này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình

LÝ THUYẾT

4.1 Soạn thảo trang mã nguồn HTML

Trang mã nguồn HTML là một tệp văn bản đơn giản chứa các ký tự ASCII, có thể được tạo ra bằng bất kỳ trình soạn thảo văn bản nào Việc soạn thảo siêu văn bản yêu cầu tạo ra mã nguồn HTML đúng quy định để trình duyệt có thể hiểu và hiển thị chính xác Thông thường, mã nguồn HTML được viết trên các chương trình soạn thảo văn bản thông dụng.

30 định dạng như NotePad Các bước tiến hành tạo trang mã nguồn HTML nhƣ sau :

- Thiết lập bảng mã Unicode cho trình gõ VietKey, Unikey

- Khởi động Note Pad : Start/Program/Accessories/NotePad

- Chọn Font Unicode trong trình soạn thảo (Format / Font  Arial hoặc Times New Roman)

 Tại cửa sổ soạn thảo: File / Save As

Hình 1.2 : lưu tệp tin HTML

 Gõ tên tệp tin trong khung File name với phần mở rộng html hoặc htm ( Ví dụ: VD01.htm)

 Chọn kiểu file trong khung Save as type là AllFiles

 Chọn mã Encoding là UTF-8 (nếu nội dung có là tiếng việt có dấu)

- Mở tập tin đã soạn thảo: Tại cửa sổ soạn thảo: File / Open  Chọn tập tin cần mở và kích nút Open

- Xem trang Web sau khi soạn thảo:

 Cách 1: Mở thư mục đã lưu trữ sau đó Kích đúp chuột vào tệp tin html

 Cách 2: Khởi động trình duyệt Web  File / Open  Chọn

Browser để tìm tập tin cần mở sau đó Kích Ok

- Làm tươi nội dung : Khi đang hiển thị một trang web trên trình

Người dùng có thể xem và chỉnh sửa nội dung mã nguồn trực tiếp từ trình soạn thảo Sau khi lưu các thay đổi, họ có thể xem lại kết quả mới bằng cách nhấn vào biểu tượng Refresh hoặc sử dụng phím Enter.

- Xem mã nguồn: Từ trình duyệt có thể xem mã nguồn trang Web bằng cách kích vào Menu View / Source

Hiện nay, có nhiều công cụ soạn thảo siêu văn bản mạnh mẽ như Microsoft FrontPage và DreamWeaver, với giao diện trực quan và khả năng tự động sinh mã HTML, giúp người dùng dễ dàng soạn thảo siêu văn bản như soạn thảo thông thường Tuy nhiên, việc hiểu rõ cú pháp HTML và nắm vững ý nghĩa của các thẻ khác nhau vẫn rất quan trọng để tạo ra các trang web động và tương tác, phục vụ cho các ứng dụng web sau này.

Tập tin HTML là văn bản chứa các thẻ (Tag) để xây dựng các thành phần của tài liệu Thẻ là yếu tố cơ bản trong HTML, giúp trình duyệt hiểu cách hiển thị và xử lý các đối tượng liên quan.

Mỗi thẻ HTML được định nghĩa bằng một từ khóa nằm giữa hai dấu "" Hầu hết các lệnh trong HTML sử dụng cặp thẻ, bao gồm thẻ mở () và thẻ đóng (), trong đó dấu gạch chéo ("/") chỉ ra thẻ đóng Các lệnh này sẽ tác động đến nội dung nằm giữa hai thẻ.

Cấu trúc tổng quát của một thẻ :

thành phần chịu tác động

Ví dụ : Chào các bạn ! Khi duyệt web, nội dung „Chào các bạn‟ sẽ đƣợc in đậm

Một số thẻ không có cặp, chúng đƣợc gọi là các thẻ rỗng hay thẻ đơn Chỉ có thẻ mở mà thôi

Nhiều thẻ trong lập trình đi kèm với các thuộc tính, cung cấp thông tin chi tiết cho việc thực hiện lệnh Các thuộc tính này được phân chia thành hai loại: thuộc tính bắt buộc và thuộc tính không bắt buộc Một thuộc tính được coi là bắt buộc khi nó là điều kiện cần thiết để thẻ lệnh có thể thực thi.

Để chèn hình ảnh vào trang tài liệu, chúng ta sử dụng thẻ Tuy nhiên, cần xác định rõ hình ảnh nào sẽ được chèn vào để đảm bảo tính chính xác và hiệu quả.

32 lập bằng thuộc tính SRC ="địa chỉ của tệp ảnh" Thuộc tính SRC là bắt buộc phải có đối với thẻ

Một số quy tắc chung khi soạn thảo siêu văn bản bằng HTML:

- Nhiều dấu cách liền nhau cũng chỉ có tác dụng nhƣ một dấu cách Bạn phải sử dụng thẻ để thể hiện nhiều dấu giãn cách liền nhau

- Gõ Enter để xuống dòng đƣợc xem nhƣ một dấu cách, để xuống hàng thì chúng ta phải sử dụng thẻ tương ứng

- Có thể viết tên thẻ không phân biệt chữ in thường và in hoa

Bạn có thể thêm các dòng bình luận và chú thích vào mã nguồn bằng cách sử dụng cặp dấu chú thích Các trình duyệt sẽ không xem xét phần mã nằm giữa cặp dấu này.

HTML cho phép lồng các thẻ, với quy tắc là thẻ mở sau phải được đóng trước Người dùng có thể viết các thẻ trên cùng một dòng hoặc tách thành nhiều dòng, nhưng nên tuân thủ cấu trúc rõ ràng để dễ dàng quản lý và đọc hiểu.

4.3 Cấu trúc tổng quát tệp tin HTML

- Mọi tài liệu HTML đều có khung cấu trúc nhƣ sau

Hình 1.3: Cấu trúc trang HTML

- : Là từ khoá để tất cả các trình duyệt web đều hiểu đó là bắt đầu và kết thúc tệp tin HTML

- : Phần đầu trang web Đƣợc dùng để chỉ ra tiêu đề và một số thông tin khác đƣợc dùng cho máy tìm kiếm nhƣ:

 : Khai báo các địa chỉ cho file HTML

 : Các thông tin về trang web

Thẻ chứa xâu ký tự sẽ hiển thị trên thanh tiêu đề của trình duyệt Nếu thẻ này để trống, trình duyệt sẽ hiển thị tên tệp thay vì tiêu đề.

- Toàn bộ nội dung của tài liệu nằm giữa hai thẻ xác định thân của trang

Các dòng văn bản, hình ảnh, âm thanh, video, các mối liên kết tạo nên trang Web đều phải nằm ở đây

Hình 1.4 : Soạn thảo mã lệnh HTML

Để soạn thảo tài liệu HTML đúng cú pháp, việc nắm vững cấu trúc của từng thành phần HTML là rất quan trọng Khác với lập trình, khi mắc lỗi cú pháp, HTML sẽ không hiển thị thông báo lỗi mà trình duyệt sẽ hiểu sai và trình bày trang web không đúng như mong muốn.

Thẻ BODY là thành phần quan trọng nhất trong trang HTML, nơi chứa tất cả nội dung của trang web Các thuộc tính của thẻ BODY ảnh hưởng đến định dạng chung, tác động đến toàn bộ giao diện của trang.

Ví dụ nhƣ màu nền, hình nền, màu siêu liên kết, đặt lề Các thuộc tính chính của thẻ BODY nhƣ sau:

- BgColor: màu nền của trang web

- Background: ảnh nền của trang web

- LeftMargin: lề trái của trang web

- RightMargin: lề phải của trang web

- TopMargin: lề trên của trang web

- BottomMargin: lề dưới của trang web

- Text: xác định màu chữ của văn bản trong trang web

- Link, Vlink, Alink: xác định màu sắc cho liên kết chƣa, đã và đang đƣợc kích hoạt

- Scroll: có hay không có thanh cuộn(Yes/No)

Để bổ sung thuộc tính ảnh nền cho trang web lưu trong thư mục Htmls, bạn cần chỉ định đường dẫn đến tập tin ảnh trong thư mục Images, nằm cùng cấp với thư mục Htmls Sử dụng thuộc tính thẻ BODY để thực hiện điều này.

Để xác định màu sắc, bạn có thể sử dụng tên màu hoặc mã hex tương ứng Dưới đây là bảng các mã màu cơ bản.

Ví dụ: Xác định chữ màu xanh Navy, màu liên kết là màu đỏ cho toàn bộ trang web ta sử dụng các thuộc tính thẻ BODY nhƣ sau:

4.5 Văn bản trên trang web

Tạo tập tin VD02.htm với nội dung nhƣ sau:

> BAI THO CO HAI MO

Thơ thẩn đường chiều một khách thơ

Say nhìn xa rặng núi xanh lơ

Khí trời lặng lẽ và trong trẻo

Thấp thoang rừng mơ, cô hái mơ

Khi duyệt web chúng ta có kết quả nhƣ sau:

Hình 1.7 : Ví dụ về không ngắt dòng

Nhƣ vậy các câu thơ không xuống dòng nhƣ soạn thảo mà chỉ tự mà ngắt dòng tuỳ theo kích thước cửa sổ trình duyệt

- Để ngắt dòng tạo đoạn mới, tạo dòng trống: Đặt văn bản trong cặp thẻ

- Để ngắt dòng không tạo đoạn mới: Chèn thẻ tại vị trí muốn ngắt dòng

- Để giữ các phần tử trên cùng 1 dòng: Đặt văn bản trong cặp thẻ

Khi sử dụng chuỗi ký tự " " giữa hai từ, chúng sẽ không bị ngắt xuống dòng Ngoài ra, chuỗi ký tự này còn được áp dụng để tạo khoảng trắng cần thiết giữa các từ hoặc trong các ô trắng của bảng.

- Nội dung văn bản trong cặp thẻ sẽ đƣợc giữ nguyên vị trí nhƣ khi soạn thảo khi hiển thị trên trình duyệt

THỰC HÀNH

Sử dụng các ảnh và file tƣ liệu trong thƣ mục C:/DATA/TKWEB Hãy tạo website “datnuocVietNam” theo yêu cầu sau:

Sáu liên kết chính nằm ở góc trên bên trái với màu nâu đỏ, khi di chuột qua sẽ chuyển sang màu xanh, dẫn đến các trang con tương ứng trong thư mục HTML.

 Dòng chữ “ Thiết kế bởi ” lặp liên tục từ trái sang phải, chữ trắng nghiêng, đậm cỡ 4

 Kích vào bản đồ ở giữa trang sẽ liên kết đến ảnh bản đồ lớn chi tiết các thành phố

 Nhúng nhạc nền cho trang web

 Có danh mục ở đầu trang và đặt liên kết đến từng phần tương ứng trong trang

2 Bảng vật tƣ thiết bị cần thiết

TT Thiết bị - Vật tƣ Thông số kỹ thuật

Hệ thống mạng và đường truyền Internet

1 Bộ máy tính Cài đặt hệ điều hành Windows, phần mềm

2 Bộ đĩa lưu các file ảnh, file dữ liệu phục vụ môn học ảnh JPG

TT Công việc Thao tác Yêu cầu

- Kiểm tra các hoạt động của máy tính

- Hoạt động bình thường Đầy đủ

- Copy ảnh vào thƣ mục IMAGES

- Tạo các trang web trắng bằng NotePad và lưu theo quy cách vào thƣ mục HTML Đúng yêu cầu

Thiết kế trang index.htm

- Chọn font tiếng việt Unicode của Vietkey

- Mở tệp tin index.htm bằng NotePad

- Đặt màu nền, nhạc nền trong thẻ body

- Chèn bảng 1 có hai hàng, ba cột, nền trắng, kích thước 90%, có 2 hàng và 3 cột

- Hàng 1 của bảng 1, nối 3ô, chèn vào ảnh banner

- Ô đầu tiên của hàng 2 bảng 1,

- Sử dụng chính xác các thẻ

58 chỉnh độ rộng 20%, màu ô vàng nhạt Chèn vào ô này bảng 2 Bảng 2 có kích thước 100%, có 1 cột và 9 hàng

6 hàng đầu tạo các liên kết bằng text đến các trang web tương ứng 3 hàng cuối chèn 3 ảnh trang trí

Chỉnh sửa ô giữa của hàng 2 bảng 1 với độ rộng 60% Chèn bảng 3 vào ô này, kích thước 100%, gồm 3 hàng và 1 cột Ô trên cùng của bảng 3 được tô màu vàng đậm Trong ô giữa bảng 3, gõ nội dung theo yêu cầu và chèn ảnh bản đồ Việt Nam nhỏ, đồng thời đặt liên kết đến tệp tin ảnh bản đồ Việt Nam lớn Ô dưới cùng của bảng 3 có màu giống ô trên cùng và chèn chữ chạy.

Ô cuối của hàng 2 trong bảng 1 cần được chỉnh độ rộng 20% và màu nền vàng nhạt Trong ô này, chèn bảng 4 với kích thước 100%, gồm 1 cột và 6 hàng Nội dung và ảnh minh họa sẽ được chèn xen kẽ vào 6 hàng của bảng này.

Thiết kế trang lichsu.htm

- Save as trang index thành trang lichsu.htm và lưu vào thư mục HTML

- Sửa lại đường dẫn file ảnh

- Sửa lại các đường dẫn của liên kết

- Xoá nội dung ô giữa bảng 3, nhập nội dung cho trang lịch sử

- Tạo liên kết bookmark để chuyển giữa các phần nội dung

- Sử dụng chính xác các thẻ

5 Kiểm tra - Duyệt thử web

- Chỉnh sửa cho đúng yêu cầu

- Các liên kết hoạt động tốt

- Hiển thị văn bản chính xác

- Giáo viên thao tác mẫu

- Học sinh thực hiện trên máy dưới sự hướng dẫn của giáo viên

- Website đúng cấu trúc: 1 điểm

- Trang index.htm đúng mẫu, màu sắc hài hòa, liên kết tốt và nổi bật: 5 điểm

- Trang lichsu.htm đúng mẫu, liên kết tốt giữa các phần: 4 điểm

CÂU HỎI VÀ BÀI TẬP CỦA BÀI 1

1 Phần mở rộng của tập tin HTML là ? a Htm b Html c Cả 2 câu trên đều đúng

2 Từ HTML là từ viết tắt của từ nào? a Hyperlinks and Text Markup Language b Home Tool Markup Language c Hyper Text Markup Language d Tất cả đều sai

3 Đâu là tag tạo ra tiêu đề web kích cỡ lớn nhất a b c d

4 Đâu là tag tạo ra tiêu đề web kích cỡ nhỏ nhất a b c d

5 Đâu là tag để xuống dòng trong web? a b c

6 Đâu là tag để để giữ nội dung cố định trên dòng trong trang web? a b c d

7 Đâu là tag tạo ra màu nền của web? a b c yellow

8 Đâu là tag tạo ra chữ in đậm a b c d

9 Đâu là tag tạo ra chữ in nghiêng a b c

10 Đâu là tag tạo ra gạch chân chữ a b c d Tất cả đều sai

11 Đâu là tag tạo ra liên kết (link) trong web a W3Schools.com b http://www.w3schools.com c W3Schools d W3Schools.com

12 Đâu là tag tạo ra liên kết đến Email? a b c xxx@yyy d

13 Làm sao để khi kích chuột vào link thì tạo ra cửa sổ mới? a b c

14 Đâu là những tag dành cho việc tạo bảng? a b c d

15 Đâu là tag căn lề trái cho nội dung 1 ô trong bảng a

62 b c d

16 Đâu là tag tạo ra 1 danh sách đứng đầu bằng số a

b c
d

17 Đâu là tag tạo ra 1 danh sách đứng đầu bởi dấu chấm? a b

c
d

18 Tag nào dùng để chèn 1 hình vào web? a b image.gif c d