(NB) Giáo trình Thiết kế web dùng đào tạo kỹ năng cơ bản về thiết kế và lập trình web, cho trình độ cao đẳng nghề quản trị mạng máy tính. Mời các bạn cùng tham khảo để nắm chi tiết nội dung giáo trình!
TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
Lịch sử World Wide Web (www)
Mục tiêu:Trình bày được lịch sử của WWW.
1.1 Gi ớ i thi ệ u v ề World Wide Web (www)
Ngày nay, máy tính trở thành công cụ hữu ích để truy cập Internet, chủ yếu phục vụ cho việc tìm kiếm thông tin Thông tin này có thể bao gồm văn bản, hình ảnh, âm thanh và nội dung đa phương tiện.
Nhu cầu tìm kiếm thông tin ngày càng tăng cao, đặt ra câu hỏi về cách sử dụng máy tính và Internet một cách hiệu quả Việc khai thác Internet như một công cụ hỗ trợ đắc lực cho việc tra cứu và tìm kiếm thông tin trong kho tàng dữ liệu khổng lồ trên mạng là rất cần thiết.
Ý tưởng siêu văn bản (Hypertext) do nhà tin học Ted Nelson đề xuất vào năm 1965 đã giúp đơn giản hóa vấn đề này Đến năm 1989, Tim Berners-Lee, một kỹ sư trẻ người Anh, đã chính thức thực hiện dự án này.
World Wide Web (www) là một mạng các tài nguyên thông tin WWW dựa trên
3 cơ chế để các tài nguyên trở nên sẵn dùng cho người xem càng rộng rãi nhất càng tốt, đó là:
- Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW (như các URL).
- Các giao thức, để truy cập tới các tài nguyên qua WWW (như HTTP).
- Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML).
Mọi tài nguyên sẵn dùng trên WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có một địa chỉ mà có thể được mã hóa bởi một URL.
URL là một công cụ quan trọng giúp xác định vị trí tài nguyên trên Internet, cho phép trình duyệt web kết nối đến máy chủ web hoặc các dịch vụ khác Thông qua các URL, người dùng có thể truy cập và tương tác với nội dung trực tuyến một cách hiệu quả.
Các URL thường gồm 3 phần:
- Việc đặt tên của các cơ chế dùng để truy cập tài nguyên.
- Tên của máy tính lưu trữ (tổ chức) tài nguyên.
- Tên của bản thân tài nguyên, như một đường dẫn.
W3C Technical Reports có URL http://www.w3.org/TR, cho phép truy cập tài liệu qua giao thức HTTP trên máy chủ www.w3.org với đường dẫn “/TR” Ngoài ra, các cơ chế khác trong tài liệu HTML bao gồm “mailto” cho email và “ftp” cho truyền tải tệp tin.
Ví dụ sau đây chỉ tới hộp thư (mailbox) của người dùng:
Joe Cool
Fragment identifiers are specific components of a URL that help locate a resource on a webpage These URLs typically end with a "#" followed by a connecting identifier, known as a fragment identifier For example, the URL "http://somesite.com/html/top.html#section_2" points to a specific section labeled "section_2" within the document.
URL tương đối không tuân theo cơ chế đặt tên cố định, mà thường chỉ định một tài nguyên trên cùng một máy chủ với tài liệu hiện tại Chúng có thể bao gồm các thành phần đường dẫn tương đối, chẳng hạn như “ ” để chỉ mức cao hơn trong cấu trúc đường dẫn, và có thể sử dụng các dấu hiệu đoạn để xác định vị trí chính xác của tài nguyên.
Ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc:
“http://www.acme.com/support/intro.html”.
URL tương đối trong đánh dấu dưới đây cho một liên kết siêu văn bản:
Suppliers sẽ mở rộng thành URL đầy đủ
“http://www.acme.com/support/suppliers.html” trong khi URL tương đối trong việc đánh dấu cho một ảnh dưới đây
sẽ mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif”
Các URL được dùng để:
- Liên kết tới tài liệu hoặc tài nguyên khác.
- Liên kết tới kiểu dạng bên ngoài hoặc kịch bản (script).
Web Browser và Web Server giao tiếp với nhau thông qua một giao thức được gọi là HTTP Sự kết nối HTTP qua 4 giai đoạn:
Hình 1.1: Sự kết nối HTTP
- Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ URL.
- Internet và số cổng (ngầm định là 80) được đặc tả trong URL.
Web Browser gửi yêu cầu tới Web Server để nhận thông tin, sử dụng phương thức GET để lấy dữ liệu từ Server hoặc phương thức POST để gửi dữ liệu đến Server.
- Phản hồi: Web Server gửi một phản hồi về Web Browser nhằm đáp ứng yêu cầu của Web Browser.
Khi quá trình trao đổi giữa Web Browser và Web Server kết thúc, kết nối sẽ chấm dứt Mối liên hệ giữa Client và Server chỉ tồn tại trong suốt quá trình trao đổi, điều này giúp giảm lưu thông trên mạng một cách hiệu quả.
Nhập môn ngôn ngữ HTML (Hyper Text Markup Language)
Mục tiêu: Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ bản.
Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup
Language) Nó được dùng cho các mục đích sau:
- Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách, ảnh, v.v…
- Truy tìm thông tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào một nút.
Thiết kế các định dạng kiểm soát giao dịch từ xa giúp người dùng dễ dàng tìm kiếm thông tin, tạo sản phẩm và đặt hàng.
- Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác trong các tài liệu của họ.
HTML đánh dấu văn bản dưới dạng các thẻ (Tag) Cấu trúc thẻ HTML có dạng như sau:
- Thẻ đóng: văn bản chịu tác động
+ : bắt đầu hiệu ứng thẻ.
+ : kết thúc hiệu ứng thẻ.
Ví dụ: văn bản này được in đậm sẽ cho kết quả ở trình duyệt là: văn bản này được in đậm
- Thẻ mở: văn bản chịu tác động
Ví dụ: Đoạn 1
Đoạn 2 sẽ cho kết quả là: Đoạn 1 Đoạn 2
- Về quy tắc các thẻ có thể lồng lẫn nhau nhưng vẫn phải đảm bảo đúng cú pháp của thẻ đó.
Trang và văn bản trên trang
Mục tiêu:Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang; Thực hiện thiết kế được giao diện.
Trang web có hai đặc trưng cơ bản:
- Siêu văn bản (hypertext): bao gồm các văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắc và các thành phần khác.
- Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với các trang và các thành phần khác ở bất cứ một website nào trên phạm vi toàn cầu.
Website là một tập hợp các trang web (webpage) liên quan đến cùng một chủ đề và được lưu trữ tại một địa chỉ cụ thể Người dùng có thể dễ dàng di chuyển giữa các trang này thông qua các liên kết (hyperlink).
Các loại trang chủ yếu của website:
Trang chủ, hay còn gọi là trang gốc (Master page), là phần quan trọng nhất của mỗi website, nơi thể hiện rõ ràng chủ đề của trang thông qua việc bố trí danh mục tin và cách trang trí mỹ thuật nổi bật.
Trang nội dung là nơi lưu trữ thông tin chi tiết về một mục tin cụ thể, đồng thời hiển thị các danh mục tin con liên quan đến chủ đề của mục tin cha Trang này cũng bao gồm các liên kết dẫn đến các trang khác, giúp người đọc dễ dàng khám phá thêm thông tin liên quan.
Trang đầu, hay còn gọi là trang khởi động, là trang xuất hiện ngay khi bạn mở trình duyệt Nó có thể là trang chủ của bạn hoặc một trang khác, nhưng không phải là một trang đặc biệt nào đó.
Trang đặc biệt là một phần quan trọng của trình duyệt web, xuất hiện ngay khi khởi động Trang này có thể tồn tại ngắn hạn và chứa đựng các thông báo hoặc tin tức đặc biệt nhằm thu hút sự chú ý của người dùng.
Một trang web thường gồm một vài trang màn hình.
Ngôn ngữ đặc tả Script
Mục tiêu: Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script.
Kịch bản, hay script, là chương trình hoạt động dưới dạng thông dịch trên máy khách hoặc máy chủ, nhằm phát triển các ứng dụng web.
Các script phía khách hàng được tích hợp vào trang web, cho phép tạo ra các trang web tương tác với hiệu ứng động, dựa trên mô hình đối tượng trình duyệt (BOM - browser object model).
- Server-side: sử dụng các đối tượng liên quan để chạy các script trên server.
VBScript là một trong những ngôn ngữ đặc tả phổ biến, bên cạnh JavaScript và Jscript Tài liệu này cung cấp cái nhìn tổng quan về VBScript, giúp các học viên có thêm thông tin hữu ích khi lập trình chức năng cho website.
Trong VBScript, biến được khai báo bằng từ khóa "Dim" và không cần xác định kiểu dữ liệu Các biến không cấu trúc được coi là biến vô hướng, cho phép chứa và tự động chuyển đổi hầu hết các kiểu dữ liệu khác nhau.
Hằng được khai báo bằng từ khóa Const Ví dụ:
Mảng được định nghĩa và truy xuất thông qua chỉ số
- Dim a(10) ‘Khai báo mảng một chiều a có 10 phần tử’
- Dim b(5,10) ‘Khai báo mảng hai chiều b’
- Redim a(20) ‘Khai báo lại mảng a tăng thêm 10 phần tử vẫn giữ lại giá trị 10 phần tử đầu’
VBScript cho phép sử dụng các toán tử xử lý chuỗi, so sánh và các phép gán, tính toán số học như sau:
Toán tử Tên gọi Ví dụ
\ Chia phần nguyên 7\3 (kết quả: 2)
Mod Chia lấy dư 7 mod 3 (kết quả: 1)
& hoặc + Cộng chuỗi “he” & “llo” (kết quả: “hello”)
< bằng lớn hơn nhỏ hơn
>< khác lớn hơn hoặc bằng nhỏ hơn hoặc bằng Not, And, Or, Xor Toán tử logic If(x>2)and(yx)then
4.3.1 L ệ nh If then và If … then … else
If then
If then
-Ở lệnh 1khối lệnh 1 được thực hiện nếu trả về giá trị True.
- Ở lệnh 2khối lệnh 1 được thực hiện nếu trả về giá trị True, ngược lạikhối lệnh 2 sẽ được thực hiện.
" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" height="100" width="860">
Khung nhập (Form)
Mục tiêu:Trình bày cú pháp, chức năng Form và các thành phần trong Form.
Form là phương tiện quan trọng để truyền tải dữ liệu từ người sử dụng đến Web Server để xử lý Chúng được sử dụng phổ biến trên WWW, giúp người dùng dễ dàng thực hiện các yêu cầu tìm kiếm, tham gia khảo sát và nhập dữ liệu cho các ứng dụng.
Có nhiều thành phần khác nhau (gọi là các điều khiển control) trong một form.
Tuỳ theo yêu cầu giao tiếp với người sử dụng cần chọn thành phần thích hợp nhất.
Khi tạo form, bạn cần chỉ định cho máy chủ dịch vụ cách xử lý dữ liệu Có nhiều loại ứng dụng trên máy chủ như CGI, ISAPI, và các script như ASP, JSP, Java Bean, Servlet để thực hiện nhiệm vụ này.
Cặp thẻ để tạo Form là .
Mọi thành phần của form như sẽ trình bày dưới đây đều phải nằm trong phạm vi giới hạn bởi cặp thẻ này.
Công thức tạo form là:
Toàn bộ các thành phần khác bên trong form nằm ở đây
Thuộc tính METHOD xác định phương thức trao đổi dữ liệu giữa trình duyệt Web và máy chủ Web, bao gồm hai phương thức chính là POST và GET, trong đó phương thức POST thường được sử dụng cho các biểu mẫu.
Thuộc tính ACTION để thiết lập địa chỉ URL của chương trình sẽ nhận và xử lý dữ liệu gửi từ form.
Your name:
Victorian Subject Associations on Internet
7.5 Đị a ch ỉ t ươ ng đố i
Khi liên kết đến một tệp trên máy chủ của bạn, bạn nên sử dụng địa chỉ tương đối thay vì địa chỉ URL tuyệt đối Điều này có nghĩa là bạn chỉ cần ghi tên tệp kèm theo đường dẫn đến thư mục chứa tệp đó.
Ví dụ: Ví dụ 1
Trong tài liệu siêu văn bản lớn, việc tạo mối liên kết giữa các phần khác nhau rất hữu ích Bạn có thể tạo một mục lục ở đầu trang, bao gồm tên các chương và liên kết từng tên chương đến nội dung tương ứng Để thực hiện điều này, cần đánh dấu điểm đích của liên kết bằng thẻ neo (bookmark).
còn trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng tên nói trên.
Để tạo liên kết nội tại từ một vị trí cụ thể trở về đầu trang, bạn cần tạo một bookmark ở đầu trang với tên gọi là "Top" Sau đó, bạn có thể tạo thẻ neo liên kết ở vị trí mong muốn bằng cách sử dụng mã sau: ` về đầu trang `.
