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, mạng máy tính đang được phát triển rộng rãi, một trong những ứng dụng phổ biến trên mạng máy tính là Internet và các dịch vụ 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 nghiên cứu của sinh viên cao đẳng CNTT, tác giả biên soạn giáo trình Thiết kế Web. Giáo trình bao gồm 5 chương, mỗi chương đều có phần kiến thức lý thuyết và câu hỏi nghiên cứu cụ thể. Mời các bạn cùng tham khảo.
Mạng máy tính
Trong quá trình sử dụng máy tính cá nhân, nhu cầu trao đổi và sử dụng thông tin trong xã hội ngày càng tăng cao Khi các máy tính chưa được kết nối, việc trao đổi thông tin trở nên tốn thời gian và gây phiền phức Để khắc phục tình trạng này, sự phát triển của ngành công nghiệp máy tính đã dẫn đến sự ra đời của các thiết bị đặc biệt và mạng máy tính.
Mạng là tập hợp các hệ thống máy tính và thiết bị mạng, cho phép chia sẻ dữ liệu, chương trình và tài nguyên thông qua một đường truyền kết nối truyền thông chung, dựa trên một hệ điều hành mạng.
Mạng máy tính điển hình bao gồm một hệ thống các thiết bị truyền dẫn vật lý, có chức năng chuyển tải các tín hiệu sóng điện từ Đường truyền vật lý được chia thành hai loại chính.
- Hữu tuyến: cáp đồng trục, cáp đôi dây xoắn, cáp quang, cáp điện thoại, và công nghệ mới nhất hiện nay là cáp điện năng thông th−ờng
- Vô tuyến: sóng cực ngắn (viba), tia hồng ngoại
Hiện nay, thông th−ờng mạng máy tính đ−ợc phân loại nh− sau: a Mạng cục bộ - LAN (Local Area Network)
Các máy tính cá nhân và thiết bị khác trong một khu vực hạn chế được kết nối qua dây cáp chất lượng cao, cho phép người dùng trao đổi thông tin, chia sẻ thiết bị ngoại vi và truy cập các chương trình cũng như dữ liệu lưu trữ trên máy chủ tệp Mạng diện rộng (WAN) kết nối các mạng nhỏ hơn, mở rộng khả năng giao tiếp và chia sẻ thông tin trên một phạm vi lớn hơn.
Mạng diện rộng (Wide Area Network) kết nối các máy tính qua đường dây điện thoại hoặc các phương tiện liên lạc khác, cho phép liên lạc trong khoảng cách từ vài chục đến vài ngàn dặm.
Mạng LAN và WAN khác nhau rõ rệt về quy mô và độ phức tạp Mạng LAN thường chỉ kết nối một vài máy tính cá nhân và một thiết bị ngoại vi đắt tiền, như máy in laser Trong khi đó, các hệ thống phức tạp hơn có thể bao gồm máy tính trung tâm, cho phép người dùng giao tiếp qua thư điện tử, phân phối chương trình nhiều người sử dụng và truy cập vào cơ sở dữ liệu chung Mạng đô thị (MAN) cũng là một loại mạng quan trọng trong bối cảnh này.
Mạng MAN là một loại mạng trải dài trên một không gian địa lý lớn hơn mạng LAN nhưng nhỏ hơn mạng WAN, thường được sử dụng để kết nối các khu vực trong một thành phố hoặc khu công nghiệp.
Mạng Internet là một hệ thống mạng sử dụng nội bộ như LAN hoặc WAN, cho phép thực hiện các ứng dụng và dịch vụ của Internet, chủ yếu là dịch vụ web thông qua giao thức truyền tệp siêu văn bản HTTP.
Internet là một hệ thống toàn cầu kết nối các mạng máy tính, cho phép truyền thông dữ liệu hiệu quả như đăng nhập từ xa, gửi tệp tin, và trao đổi thư tín điện tử Nó mở rộng khả năng hoạt động của từng mạng thành viên, tạo điều kiện thuận lợi cho việc chia sẻ thông tin và kết nối giữa người dùng trên khắp thế giới.
Mạng Internet hiện nay là một hệ thống toàn cầu với hàng chục triệu người dùng, bắt nguồn từ cuối thập kỷ 60 thông qua một thí nghiệm của Bộ Quốc phòng Mỹ Ban đầu, Internet được phát triển từ ARPAnet, một mạng thử nghiệm phục vụ nghiên cứu quốc phòng, với mục tiêu tạo ra một mạng máy tính có khả năng chịu đựng sự cố, đảm bảo rằng ngay cả khi một số nút mạng bị tấn công, các phần còn lại vẫn có thể hoạt động bình thường.
Mạng cho phép mọi máy tính giao tiếp với nhau, tạo ra khả năng kết nối giữa các hệ thống khác nhau Điều này không chỉ thu hút sự quan tâm của nhiều người mà còn là phương pháp duy nhất để liên kết các máy tính từ các hãng khác nhau.
Mạng Internet nguyên thuỷ được thiết kế để cung cấp thông tin cho giới khoa học, cho phép mọi hệ thống kết nối qua cổng điện tử Điều này đã dẫn đến sự hợp tác giữa hàng ngàn máy tính và nhiều hệ thống dịch vụ điện tử có thu phí như MCI và Compuserve, trở thành thành viên của Internet Hiện nay, Internet có hơn hai triệu máy chủ phục vụ.
20 triệu người dùng, mạng Internet đang phát triển với tốc độ bùng nổ, mỗi tháng có thêm khoảng một triệu ng−ời tham gia mới
Ngày nay, Internet kết nối hàng trăm triệu người trên toàn cầu, cho phép họ giao tiếp và trao đổi thông tin thông qua bộ giao thức TCP/IP (Transmission Control Protocol/Internet Protocol).
Các giao thức Internet
Bộ giao thức Internet TCP/IP, phát triển bởi Bộ Quốc phòng Mỹ và triển khai từ năm 1982, cung cấp dịch vụ tăng cường tín hiệu trên các liên mạng lớn, cho phép các loại máy tính khác nhau kết nối và giao tiếp Với khả năng hỗ trợ trên hầu hết các hệ thống, TCP/IP đã trở thành giao thức chuẩn của Internet Phần TCP đảm bảo rằng mọi thông tin gửi đi đều được nhận đầy đủ và chính xác, trong khi phần IP cung cấp kỹ thuật truyền tải các gói thông tin đến địa chỉ nhận một cách hiệu quả Gần đây, các giao thức Internet ngày càng trở nên phổ biến, hình thành nên những giao thức mạng thông dụng nhất hiện nay.
Có nhiều giao thức kết hợp với bộ giao thức Internet D−ới đây là các mô tả một số giao thức này
3.1 Giao thức điều khiển phiên truyền
Giao thức điều khiển phiên truyền (TCP) là một giao thức Internet thuộc tầng giao vận của mô hình OSI, cung cấp khả năng chuyển tải hướng kết nối và song công đầy đủ TCP duy trì một tuyến kết nối logic giữa các máy tính gửi và nhận, đảm bảo tính nguyên vẹn của phiên truyền và nhanh chóng phát hiện sự cố để chỉnh lý Mặc dù TCP không nhanh bằng giao thức gam dữ liệu người dùng (UDP), nó có khả năng phân chia và tập hợp thông điệp, chấp nhận thông điệp với kích thước bất kỳ từ các giao thức tầng trên TCP chia các luồng thông điệp thành các phân đoạn mà IP có thể quản lý, bổ sung dịch vụ hướng kết nối và đồng bộ hóa phân đoạn với số chuỗi tại mức byte.
TCP không chỉ phân chia thông điệp mà còn duy trì nhiều cuộc đối thoại với các giao thức tầng trên, giúp cải thiện việc sử dụng băng thông mạng Bằng cách tổ hợp nhiều thông điệp vào một phân đoạn, TCP tối ưu hóa hiệu suất truyền tải Mỗi kết nối mạch ảo được gán một ID kết nối, gọi là cổng (port), để xác định các gam dữ liệu liên quan đến các tuyến kết nối đó.
The Internet Protocol (IP) is a connectionless protocol that facilitates the transmission of data packets, commonly referred to as IP datagrams IP functions as a packet-switching protocol, responsible for addressing and routing processes An IP header is attached to the packets, which are then transmitted by lower-level protocols in the form of frames.
IP định tuyến các gói tin qua các mạng bằng cách sử dụng bảng định tuyến động, được tham chiếu tại mỗi bước nhảy Quá trình xác định tuyến đường dựa vào thông tin từ thiết bị mạng vật lý và logic, mà giao thức phân giải địa chỉ (ARP) cung cấp.
Giao thức IP có chức năng tách rời và lắp ghép các gói tin theo yêu cầu về kích thước, được quy định cho các tầng vật lý và liên kết dữ liệu Ngoài ra, IP cũng thực hiện kiểm tra lỗi trên phần đầu dữ liệu thông qua tổng kiểm tra (checksum), mặc dù dữ liệu của các tầng phía trên không được kiểm tra lỗi.
3.3 Giao thức gam dữ liệu người dùng
Giao thức UDP (User Datagram Protocol) là một giao thức tầng giao vận phi kết nối, cho phép truyền tải dữ liệu giữa các máy chủ mà không cần xác nhận nhận thông điệp UDP chỉ tập trung vào việc chuyển giao các gói dữ liệu một cách nhanh chóng và hiệu quả.
TCP và UDP sử dụng địa chỉ cổng để truyền tải dữ liệu, nhưng các địa chỉ này không liên kết với các mạch ảo mà chỉ đơn thuần xác định các tiến trình xử lý trên máy chủ cục bộ.
UDP thường được ưa chuộng hơn TCP khi tốc độ truyền tải dữ liệu cao hơn là ưu tiên, trong khi độ tin cậy không phải là yếu tố quan trọng Vì UDP không yêu cầu thiết lập, duy trì hay kết thúc kết nối, cũng như không cần kiểm soát luồng dữ liệu, nên nó thường hoạt động nhanh hơn TCP.
UDP là giao thức tầng giao vận, được sử dụng trong giao thức quản trị mạng đơn giản (SNMP), một chuẩn quản trị mạng cho các mạng TCP/IP UDP cho phép SNMP thực hiện quản trị mạng với tính năng điều hành tối thiểu.
3.4 Giao thức phân giải địa chỉ
Ba kiểu thông tin địa chỉ dưới đây được sử dụng trên các mạng TCP/IP:
- Địa chỉ vật lý: đ−ợc tầng vật lý và tầng liên kết dữ liệu sử dụng
Địa chỉ IP là các ID máy chủ và mạng logic, được biểu diễn bằng bốn con số thập phân có chấm Ví dụ, một địa chỉ IP có thể là 192.123.1.1.
Các tên nút logic là những định danh cho các máy chủ cụ thể bằng cách sử dụng các ID ký tự-số, giúp dễ nhớ hơn so với các địa chỉ ID toàn số Chẳng hạn, codienhanoi.edu.vn là một ví dụ điển hình về tên nút logic.
Giao thức phân giải địa chỉ (ARP) xác định địa chỉ IP thông qua tên nút logic, duy trì bảng dữ liệu phân giải địa chỉ và quảng bá gói tin để phát hiện địa chỉ trên mạng Các địa chỉ IP được ARP phát hiện có thể được sử dụng cho các giao thức tầng liên kết dữ liệu.
3.5 Giao thức hệ thống tên miền
Giao thức hệ thống tên miền (DNS) cung cấp dịch vụ phân giải tên và địa chỉ cho các ứng dụng trên máy khách Các máy chủ DNS cho phép người dùng truy cập tài nguyên trên mạng thông qua các tên nút logic dễ nhớ.
3.6 Giao thức chuyển thư đơn giản
The Simple Mail Transfer Protocol (SMTP) and Post Office Protocol version 3 (POP3) are essential protocols for routing email across networks, utilizing the TCP/IP protocol suite for efficient communication.
Địa chỉ IP
Địa chỉ IP là công cụ giúp nhận diện các thiết bị mà không cần quan tâm đến công nghệ mạng cơ sở, đơn giản hóa việc định tuyến trên mạng Nó mang tính toàn cầu, cho phép các máy trong mạng cục bộ được nhận diện trên Internet thông qua địa chỉ IP Địa chỉ IP hiện tại (IPv4) có 32 bit, chia thành 4 octet, mỗi octet gồm 8 bit và được phân cách bởi dấu chấm Các octet có thể được biểu diễn bằng số thập phân, nhị phân hoặc thập lục phân Địa chỉ IP bao gồm ba thành phần chính.
- Bit nhận dạng lớp (Class bit)
- Định danh của mạng (Network Identifier – NET ID)
- Định danh máy chủ (Host Identifier – HOST ID)
Để thuận tiện cho việc quản lý cấp phát địa chỉ IP, các địa chỉ mạng được chia thành 5 lớp khác nhau, phù hợp với tổ chức và độ lớn của các mạng cục bộ trong liên mạng Ký hiệu của các lớp này giúp dễ dàng nhận diện và phân loại địa chỉ mạng.
Lớp A sử dụng 7 bit để định danh mạng và 24 bit cho các trạm, cho phép tối đa 27-2 mạng và 224-2 trạm trong mỗi mạng, thích hợp cho các mạng có số lượng trạm lớn Tổng số địa chỉ trong lớp A lên tới hơn 2 tỷ, với vùng địa chỉ từ 1.0.0.1 đến 126.255.255.254.
Lớp B trong mạng máy tính sử dụng 14 bit để định danh mạng và 16 bit cho các trạm, cho phép tạo ra 16,382 mạng và 65,534 trạm trong mỗi mạng, tổng cộng hơn 1 tỷ địa chỉ Vùng địa chỉ lớp B bắt đầu từ 128.0.0.1 đến 191.254.255.254.
Lớp C sử dụng 21 bit cho định danh mạng và 8 bit cho định danh các trạm, cho phép tạo ra 2^21 - 2 mạng và 2^8 - 2 trạm trong mỗi mạng Lớp này phù hợp cho các mạng nhỏ với số trạm tối đa là 254 Tổng số địa chỉ trong lớp C lên tới hơn nửa tỉ, với vùng địa chỉ từ 192.0.0.1 đến 223.255.254.254.
- Lớp D: địa chỉ lớp này đ−ợc sử dụng cho việc quảng bá (dùng để gửi IP datagram tới một nhóm trên mạng sử dụng cùng kiểu địa chỉ)
- Lớp E: địa chỉ dự phòng trong tương lai.
Các khái niệm khác
URL (Uniform Resource Locator) là thuật ngữ chỉ địa chỉ web, bao gồm tên giao thức như HTTP hoặc FTP, theo sau là dấu hai chấm (:), hai dấu gạch chéo (//), và cuối cùng là tên miền cần kết nối Một ví dụ điển hình về URL là
“http://www.codienhanoi.edu.vn/diendan” hướng dẫn trình duyệt web sử dụng giao thức http để kết nối đến máy chủ www.codienhanoi.edu.vn và mở tệp mặc định default.htm (hoặc index.htm) trong thư mục “diendan” Tên tệp này không cần phải nhập vào URL, và người dùng cũng có thể bỏ qua giao thức http vì nó được coi là mặc định trong trình duyệt.
URL có cú pháp đặc biệt và yêu cầu tính chính xác cao; ngay cả một ký tự sai hay thiếu dấu chấm cũng sẽ bị Web Server từ chối Việc nhập sai một ký tự trong địa chỉ URL có thể dẫn đến việc truy cập vào một trang web khác hoặc nhận thông báo rằng trang web không tồn tại.
Siêu liên kết (hyperlink) là thành phần thiết yếu trong siêu văn bản của World Wide Web, giúp người dùng dễ dàng truy cập thông tin đa dạng về một chủ đề Khi nhấp vào siêu liên kết, người dùng có thể thực hiện các thao tác như chuyển hướng đến trang web khác hoặc mở tài liệu liên quan.
- Đ−a đến phần khác của trang
- Đ−a đến một trang web khác trong cùng một Web site
- Đ−a đến một trang web khác trong Web site khác
- Cho phÐp download mét file
- Chạy một ứng dụng, trình diễn một đoạn video hoặc âm thanh
Hình ảnh minh họa dưới đây là một phần của trang web, với các từ được gạch dưới thể hiện các liên kết Bạn chỉ cần nhấn chuột vào siêu liên kết để xem nội dung tài liệu mà nó trỏ tới.
Hình 1.3 Minh họa một Hyperlink (siêu liên kết)
5.3 Web Browser (trình duyệt web)
Trình duyệt web là công cụ cho phép người dùng truy cập và xem thông tin trên internet Có nhiều loại trình duyệt web, mỗi loại có những đặc điểm riêng và cách hiển thị các trang web không hoàn toàn giống nhau.
Các trình duyệt web như Internet Explorer, Netscape Navigator, Opera và Mozilla Firefox có nhiều phiên bản khác nhau, với các phiên bản mới nhất thường sở hữu nhiều tính năng vượt trội hơn Ngoài việc duyệt web, các trình duyệt còn hỗ trợ người dùng thực hiện các tác vụ khác như gửi nhận email và tải tập tin từ Web Server thông qua các Add-on và Plugin.
5.4 Web Server (máy chủ Web)
Web Server là máy chủ lưu trữ thông tin dưới dạng trang Web, bao gồm HTML và có thể chứa âm thanh, hình ảnh, video, văn bản, và nhiều loại nội dung khác Các Web Server được kết nối qua mạng Internet, với mỗi Server sở hữu một địa chỉ duy nhất trên Internet.
Phần mềm là thành phần chính của Web Server, hoạt động trên nền tảng phần cứng và hệ điều hành cụ thể Để cung cấp dịch vụ cho nhiều client cùng lúc, Web Server cần có cấu hình mạnh mẽ và khả năng lưu trữ lớn cho tài nguyên Web.
Nói về chức năng và hiệu năng, các Web Server phân thành 4 nhóm chính:
- Các máy chủ truyền thông thông th−ờng
- Máy chủ th−ơng mại
- Máy chủ mhóm làm việc
- Máy chủ dùng cho mục đích đặc biệt
Các tiêu chuẩn đánh giá một Web Server:
- Hiệu năng: nền tảng hệ điều hành và xử lý đa luồng
- Bảo mật: Thông qua địa chỉ IP, tên máy chủ của mạng con, th− mục
Web Oracle cung cấp giải pháp bảo mật thông tin bằng cách mã hóa tên người sử dụng và khóa mã hoàn toàn trong quá trình truyền thông qua mạng.
Hầu hết các Web Server hiện nay sử dụng giao diện CGI để truy cập và tích hợp cơ sở dữ liệu, trong khi một số khác áp dụng giao diện lập trình ứng dụng (API) hoặc ngôn ngữ truy vấn có cấu trúc SQL.
Quản lý và quản trị Web Server là tiêu chuẩn quan trọng với khả năng quản trị từ xa, giao diện đồ họa thân thiện và khả năng điều khiển cấu hình máy chủ hiệu quả.
Website là một tập hợp các trang web liên quan đến công ty, tổ chức, cá nhân hoặc chủ đề chung mà nhiều người quan tâm Ví dụ về website bao gồm trang của Chính phủ (www.chinhphu.org.vn), cơ quan như Bộ GD&ĐT (www.moet.edu.vn), báo chí (www.thanhnien.com.vn) và các chủ đề khác (www.thuvientinhoc.vn).
World Wide Web (Web) là một dịch vụ trên Internet, ra đời gần đây nhưng phát triển nhanh chóng Nó cung cấp giao diện thân thiện, dễ sử dụng, giúp người dùng thuận tiện trong việc tìm kiếm thông tin.
Web không phải là một hệ thống cụ thể, mà là tập hợp các công cụ và giao diện siêu (meta-Interface) cho phép người dùng tự tạo "siêu văn bản" và chia sẻ với những người khác trên Internet.
5.7 Phân biệt Inetrnet và WWW
Cách thức để tổ chức xây dựng một Web Site
Xây dựng một trang web thu hút người dùng không phải là điều dễ dàng Thiết kế trang web không chỉ cần đảm bảo người dùng quay lại mà còn phải phù hợp với mục đích tạo ra thông tin Để tạo ra một trang web hiệu quả, cần chú ý đến những vấn đề quan trọng.
- Có một mục đích rõ ràng: Đây là điểm quan trọng trong việc bắt đầu thiết kế Web
Khi xây dựng nội dung cho trang web, điều quan trọng là luôn nghĩ đến khách hàng – những người sẽ truy cập vào site Chúng ta cần xem xét các đặc điểm của họ như lứa tuổi, nghề nghiệp, sở thích và thời gian rảnh rỗi để tạo ra nội dung phù hợp và hấp dẫn.
Để giảm thiểu sự chán nản của người truy cập, hãy sử dụng các mục có khả năng tải xuống nhanh chóng Thời gian chờ đợi lâu để lấy thông tin có thể khiến người dùng nhấn nút dừng, vì vậy việc tối ưu hóa tốc độ tải trang là rất quan trọng.
- Cố gắng làm cho Web Site của mình xuất hiện một cách trực quan: không nên cho quá nhiều màu sắc hoặc không có màu sắc trong trang
- Đừng có cố gắng cho mọi thứ vào trong một trang: Một trang Web bừa bộn sẽ gây ra cảm giác chán nản và nhức mắt
Tổ chức nội dung một cách thông minh là yếu tố quan trọng để tối ưu hóa trang web Cần nhớ rằng trang chủ không chỉ có "độ sâu" một bậc, vì vậy chỉ nên đưa vào những thông tin thực sự cần thiết như tên công ty, mục đích hoạt động và một số sản phẩm tiêu biểu.
Trước khi đưa website lên máy chủ, cần kiểm tra và chạy thử kỹ lưỡng Hãy thử nghiệm trang web trên các trình duyệt khác nhau, hệ điều hành đa dạng và các kích thước cửa sổ khác nhau để đảm bảo rằng website hoạt động mượt mà và không gặp phải vấn đề gì.
Dựa vào đặc trưng, kết nối dữ liệu và công cụ phát triển người ta có thể chia ra làm 2 loại Web sau đây:
Các trang web này chủ yếu chứa nội dung trực quan dành cho người dùng, chẳng hạn như văn bản và hình ảnh đơn giản, ví dụ như hình ảnh một cốc cà phê đang bốc khói.
Nội dung của trang web động khác biệt so với trang web tĩnh, vì nó bao gồm các đoạn mã lệnh cho phép truy cập cơ sở dữ liệu trực tuyến Tùy thuộc vào nhu cầu, ứng dụng có thể cung cấp khả năng truy cập dữ liệu và tìm kiếm thông tin hiệu quả.
Câu hỏi và bài tập
Câu 1: Phân biệt mạng Intranet và mạng Internet
Câu 2: Mạng Internet sử dụng những giao thức nào? Chức năng của chúng?
Câu 3: Cấu trúc các lớp của địa chỉ IP
Câu 4: Các khái niệm URL, hyperlinks, web page, web browser, web server
Câu 5: Phân biệt Internet và World Wide Web
Câu 6: Cách thức xây dựng một website
Câu 7: Phân biệt các loại web
Giới thiệu
HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu chứ không phải ngôn ngữ lập trình Nó cho phép chúng ta hiển thị tài liệu văn bản, hình ảnh, âm thanh, phim và nhiều loại thông tin điện tử khác trên các trang web Ngôn ngữ này được sử dụng để định dạng và liên kết các tài liệu mà không phụ thuộc vào loại máy tính mà các tập tin được tạo ra.
HTML là một ngôn ngữ quan trọng vì nó cho phép tài liệu được hiển thị trên bất kỳ trình duyệt web nào mà không phụ thuộc vào phần mềm cụ thể Khi chúng ta gửi tài liệu cho bạn bè, nếu họ không có cùng một trình xử lý, tài liệu có thể không đọc được HTML được viết dưới dạng văn bản đơn giản, giúp các phần mềm xác định các yếu tố như tiêu đề, nội dung và chân trang, từ đó quy định cách các phần tử này hoạt động Những phần tử này, được gọi là thẻ, được phát triển bởi Tổ chức W3C, và sẽ được tìm hiểu chi tiết hơn trong các bài học tiếp theo.
1.2 Tags Đây là những phần tử của một trang web đ-ợc sử dụng để định nghĩa các trang này nên ứng xử nh- thế nào Chúng th-ờng đ-ợc sử dụng thành từng cặp, bao quanh chúng là các phần tử xác định
Nhóm phát triển giao thức cho World Wide Web hiện nay có 180 thành viên, bao gồm các tổ chức thương mại, học thuật và chính phủ từ khắp nơi trên thế giới.
1.4 HTML làm việc như thế nào?
Máy tính của chúng ta sử dụng trình duyệt Web như Internet Explorer hoặc Mozilla Firefox để tìm kiếm thông tin trên Internet Khi tìm kiếm, trình duyệt sẽ truy cập vào dữ liệu đã được lưu trữ trên máy tính hoặc máy chủ thông qua giao thức HTTP Dữ liệu này được gửi về máy tính dưới dạng các tập tin văn bản Cuối cùng, trình duyệt biên dịch các văn bản và thẻ HTML để hiển thị các định dạng, đồ họa và nội dung trên trang web cho người dùng.
Lời khuyên: HTTP không phải là giao thức duy nhất trên Internet; có nhiều giao thức khác phục vụ cho các dịch vụ mạng đặc biệt như thư điện tử và truyền tải file.
1.5 Tạo trang web đầu tiên
Trong bài này, chúng ta sẽ học về cách khởi tạo, l-u trữ và hiển thị một trang Web đơn giản
Cách tốt nhất để học từ cuốn sách này là tự tạo các trang web riêng khi đọc Như đã đề cập trong phần giới thiệu, chúng ta có thể tạo trang web hoặc tài liệu HTML bằng bất kỳ trình soạn thảo văn bản nào, bao gồm Microsoft Notepad, MS DOS, Mac SimpleText và UNIX Hầu hết chúng ta đều có ít nhất một trong số các trình soạn thảo này được cài đặt trên máy tính, ngay cả khi chưa từng sử dụng trước đó.
Mặc dù có thể tạo trang web bằng các trình soạn thảo như Microsoft Word hay các chương trình như Microsoft FrontPage và Dreamweaver, nhưng tôi khuyên bạn nên tập trung vào việc học HTML trước Việc sử dụng Dreamweaver để học HTML sẽ được thảo luận trong chương 3, "Thao tác với phần mềm tạo Web."
1.2.2 Các thẻ quan trọng Để xem các mã HTML và tìm hiểu các thẻ HTML cơ bản nhất, hãy nhìn vào một tài liệu rất đơn giản, mã HTML Hình 2,1 hiển thị một trang web đơn giản trong
Microsoft Notepad Chúng ta có thể viết mã giống nh- thế này trong trình soạn thảo của mình để theo cùng với các bài học
Hình 2.1 Các thẻ và là bắt buộc để bạn tạo ra một tài liệu HTML
Mọi tài liệu HTML đều phải bắt đầu với thẻ và kết thúc một tài liệu bởi thẻ
Ngoài cặp thẻ và , Trong ví dụ trên còn có ba cặp thẻ mà chúng nên có trong mọi tài liệu HTML
Thẻ và được sử dụng để chỉ rõ thông tin về tài liệu của chúng ta Trong các bài học sau, chúng ta sẽ tìm hiểu cách thêm thông tin vào thẻ này.
• Cặp thẻ và đ-ợc sử dụng để để thêm vào một tiêu đề để hiển thị trên tiêu đề trình duyệt của chúng ta
• Cặp thẻ và đ-ợc sử dụng để hiển thị mọi văn bản xuất hiện trong trang HTML
Tất cả tài liệu HTML bao gồm hai phần chính: phần đầu (head) và phần thân (body) Phần đầu chứa thông tin quan trọng về tài liệu, trong đó cặp thẻ và được đặt trong cặp thẻ và .
Khi tạo một trang HTML đơn giản, chúng ta sẽ thấy bốn cặp thẻ giống nhau xuất hiện trong tài liệu, chỉ khác nhau ở nội dung văn bản nằm giữa các cặp thẻ đó.
Trang HTML thứ 2
Đây là trang HTML thứ 2
Hầu hết các thẻ HTML đều tạo thành cặp, với thẻ đầu tiên (ví dụ: ) chỉ định cho máy tính bắt đầu áp dụng khuôn dạng, trong khi thẻ thứ hai (ví dụ: ) yêu cầu ngừng áp dụng khuôn dạng bằng cách thêm dấu gạch chéo trước tên thẻ Thẻ đầu tiên thường được gọi theo tên bên trong dấu móc, và thẻ thứ hai được sử dụng để kết thúc hoặc đóng tài liệu, như kết thúc HTML.
1.2.3 L ưu và hiển thị trang Để hiển thị trang của chúng ta trong trình duyệt, chúng ta phải l-u nó lại Sau khi chúng ta tạo ra một tài liệu HTML, chúng ta sẽ l-u nó lại với đuôi mở rộng là htm hoặc html (vÝ dô: first.htm)
Chúng ta có thể xem trước tệp tin HTML ngay trên trình duyệt, ngay cả khi nó được lưu trữ trên máy tính cá nhân Trong Internet Explorer, có thể mở tệp bằng cách chọn "Open" từ menu File hoặc nhấp đúp vào tệp htm Hình 2.2 minh họa cách trình duyệt Internet Explorer hiển thị tệp first.htm mà chúng ta đã tạo ra.
Tổng quan về HTML
Toàn bộ nội của tài liệu đ-ợc đặt ở đây
Tiêu đề của tài liệu
2.1 Các thẻ định dạng tài liệu
Cặp thẻ này xác nhận tài liệu là HTML, cho thấy tài liệu sử dụng các thẻ HTML để trình bày Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ nh- những tệp tin văn bản b×nh th-êng
Thẻ HEAD đ-ợc dùng để xác định phần mở đầu cho tài liệu
Cặp thẻ này chỉ được phép sử dụng trong phần mở đầu của tài liệu, nghĩa là nó phải nằm trong thẻ được giới hạn bởi cặp thẻ .
Phần mở đầu (HEADER) của tài liệu đ-ợc đặt ở đây
phần nội dung của tài liệu đ-ợc đặt ở đây
Thẻ này xác định phần nội dung chính của tài liệu, bao gồm thân tài liệu với các thông tin định dạng như ảnh nền, màu nền, màu văn bản siêu liên kết và lề trang Những thông tin này được cấu hình trong phần tham số của thẻ.
Thẻ BODY trong HTML có cú pháp cơ bản, nhưng từ phiên bản HTML 3.2 trở đi, đã có nhiều thuộc tính mới được sử dụng Dưới đây là các thuộc tính chính của thẻ BODY.
Để đặt ảnh nền cho văn bản, bạn cần sử dụng tham số BACKGROUND với giá trị là URL của file ảnh Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt, nhiều ảnh sẽ được lặp lại để phủ kín toàn bộ màn hình.
BGCOLOR được sử dụng để thiết lập màu nền cho trang web khi hiển thị Nếu cả hai tham số BACKGROUND và BGCOLOR đều có giá trị, trình duyệt sẽ ưu tiên hiển thị màu nền trước, sau đó mới tải hình ảnh lên phía trên.
TEXT= Xác định màu chữ của văn bản, kể cả các đề mục
ALINK, VLINK, và LINK được sử dụng để xác định màu sắc cho các siêu liên kết trong văn bản Cụ thể, alink (liên kết đang hoạt động) là liên kết mà người dùng đang kích hoạt, trong khi vlink (liên kết đã truy cập) chỉ những liên kết mà người dùng đã từng nhấp vào.
Tiêu đề của tài liệu
Nội dung của tài liệu
Nh- vậy một tài liệu HTML có cấu trức nh- sau:
2.2.2 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6
HTML hỗ trợ 6 mức đề mục, với mỗi mức thể hiện một cấu trúc logic khác nhau Các trình duyệt có thể hiển thị đề mục với kích thước font chữ khác nhau, ví dụ như đề mục cấp 1 có thể là 14 point ở trình duyệt này nhưng lại là 20 point ở trình duyệt khác Đề mục cấp 1 là mức cao nhất và kích thước giảm dần đến cấp 6, thường thì văn bản ở cấp 5 và cấp 6 có kích thước nhỏ hơn văn bản thông thường.
D-ới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
Định dạng đề mục cấp 1
Định dạng đề mục cấp 2
Định dạng đề mục cấp 3
Định dạng đề mục cấp 4
Định dạng đề mục cấp 5
Định dạng đề mục cấp 6
Thẻ trong HTML được sử dụng để chuyển sang dòng mới, nhưng không có thẻ kết thúc tương ứng Khi trình duyệt Web hiển thị nội dung, các khoảng trắng liền nhau, ký tự tab và ký tự xuống dòng sẽ được coi như một khoảng trắng duy nhất Do đó, để tạo dòng mới trong tài liệu HTML, bạn cần sử dụng thẻ .
Thẻ được sử dụng để giới hạn đoạn văn bản đã được định dạng sẵn, cho phép hiển thị văn bản chính xác như khi nhập Nội dung giữa hai thẻ này sẽ giữ nguyên định dạng, bao gồm cả dấu xuống dòng, mà không bị trình duyệt coi là dấu cách.
2.3 Các thẻ định dạng danh sách
•` Danh sách không sắp xếp ( hay không đánh số)
- với thuộc tính TYPE= xác định kiểu ký hiệu đầu dòng cho các mục trong danh sách, có thể nhận các giá trị như disc (chấm tròn đậm), circle (vòng tròn) và square (hình vuông).
2.4 Các thẻ định dạng ký tự
2 4.1 Các thẻ định dạng in ký tự
Các thẻ HTML được sử dụng để định dạng các thuộc tính như in nghiêng, in đậm và gạch chân cho ký tự và văn bản hiển thị trên trình duyệt.
Đoạn văn bản giữa hai thẻ được sử dụng để định nghĩa một từ, thường được in nghiêng hoặc thể hiện qua một kiểu dáng đặc biệt nào đó.
In chữ bị gạch ngang
In chữ lớn hơn bình th-ờng bằng cách tăng kích th-ớc font hiện thời lên một Việc sử dụng các thẻ
Sử dụng thẻ để tạo hiệu ứng chữ tăng dần, nhưng cần lưu ý rằng mỗi trình duyệt có giới hạn kích thước cho mỗi font chữ Nếu vượt quá giới hạn này, các thẻ sẽ không còn tác dụng.
In chữ nhỏ hơn bình th-ờng bằng cách giảm kích th-ớc font hiện thời đi một Việc sử dụng các thẻ
Thực hành
3.1 Tạo trang web cho nhóm
Tạo trang web cá nhân cho nhóm với tên gọi InfoGroup.htm (ví dụ: nhóm 1 sẽ là InfoGroup1.htm) Trang web cần bao gồm các thông tin chính của các thành viên như họ và tên, công việc và chức vụ hiện tại, địa chỉ liên lạc, điện thoại, fax, email, và số di động Các nhóm cũng có thể thêm các thông tin bổ sung khác.
• Upload trang web đã soạn lên website
• Thử truy cập trang web đã tải lên
Tham khảo các site thông tin của Việt Nam
• http://www.vdc.com.vn
Tham khảo các site bán hàng nổi tiếng
Tham khảo các site giải trí
• http://www.vnn.vn/ecards/
• http://www.fpt.vn/Postcard/main.asp
Tham khảo các site về lao động việc làm tại VN
• http://www.vietname-business.com/jobnld/
• http://www.jobsonline.saigonnet.vn/
Tạo trang web chứa các hyperlink dùng để truy cập nhanh
Tạo một trang web với tên gọi Links.htm, trong đó bao gồm các hyperlink đã được đề cập trước đó Ngoài ra, hãy bổ sung thêm các hyperlink và các phân loại khác mà bạn đã biết để làm phong phú thêm nội dung trang web.
• Upload lên website và kiểm tra lại
• Tạo trang web HomePage đặt tên là Default.htm giới thiệu về nhóm và các công việc mà nhóm đang triển khai
• Kết nối hai trang đã tạo vào HomePage
• Upload lên website và kiểm tra lại
Chọn chủ đề thiết kế website
• Website về dịch vụ việc làm
• Website về dịch vụ nhà đất (http://www.nhadat.com)
• Website báo điện tử (http://vnexpress.net )
• Website bán hàng (cửa hàng, siêu thị ảo trên Internet)
• Website dịch vụ giải trí nh- ECards, Điện hoa,
3.2 Đăng ký website miễn phí trên Internet
1 Vào địa chỉ http://www.freeservers.com để đăng kí website miễn phí với địa chỉ truy cập có dạng http://.freeservers.com
2 Gõ vào địa chỉ mà chúng ta dự định đăng kí tại ô yourname Sau đó click Go Màn hình tiếp theo sẽ hiện ra, chúng ta chọn mục cuối cùng 100% Free Hosting
Option và click vào SignUp
3 Sau đó chúng ta hãy điền vào các thông tin liên quan cần thiết như Họ tên, mật khẩu, email, … Cuối cùng gõ vào ARTK để chắc rằng chúng ta đã đồng ý với các qui định của FreeServers khi cung cấp dịch vụ miễn phí này
4 Nếu đăng kí thành công, màn hình sau sẽ hiện ra để cung cấp cho chúng ta một số lựa chọn khi xây dựng website của mình
3.3 Thiết kế một số website mẫu
1 Thiết kế website theo mẫu sau (http://greetings.yahoo.com)
2 Thiết kế website theo mẫu sau (http://www.flowers.com)
3 Thiết kế website theo mẫu sau (http://shopping.yahoo.com)
4 Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn)
5 Thiết kế website theo mẫu sau (http://vnexpress.net)
6 Thiết kế website theo mẫu sau (http://www.codeproject.com)
7 Thiết kế website theo mẫu sau (http://www.bttvn.com ) Để tham khảo cách thiết kế các trang web trên, hãy:
- Tải về máy bằng cách chọn chức năng Save của IE
- Dùng MS Front Page hoặc notepad để mở tập tin đã lưu lên
- Chuyển qua lại giữa các màn hình Normal View và HMTL View để biết cách thiết kế
Với mỗi trang web đã xem hãy chú ý các vấn đề sau:
- Cách bố trí các bảng (table)
- Cách sử dụng font chữ
- Cách chèn vào các hình ảnh để trang trí
- Cách định nghĩa các thuộc tính như màu chữ, màu nền,
- Phần tĩnh (không thay đổi) mỗi khi click vào các hyperlink chuyển qua một nội dung mới
Từ các trang web trên, hãy tự thiết kế các trang cho website của nhóm.
• Danh sách có sắp xếp (hay có đánh số)
- , mỗi mục trong da nh sách đ-ợc sắp xếp thứ tự
• Danh sách thực đơn
• Danh sách phân cấp
Nhiều trình duyệt cho phép sử dụng danh sách phân cấp và danh sách thực đơn tương tự như danh sách không đánh số Đối với thẻ OL, cú pháp được sử dụng như sau:
Văn bản đã đ-ợc định dạng
TYPE =1 Các mục đ-ợc sắp xếp theo thứ tự 1, 2, 3
=a Các mục đ-ợc sắp xếp theo thứ tự a, b, c
=A Các mục đ-ợc sắp xếp theo thứ tự A, B, C
=i Các mục đ-ợc sắp xếp theo thứ tự i, ii, iii
=I Các mục đ-ợc sắp xếp theo thứ tự I, II, III
Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách
Thẻ