Trong thế giới siêu văn bản WWW, người sử dụng có thể dễ dàng đi từ tài liệu này sang tài liệu khác thông qua các mối liên kết.. Chính nó đã góp phần tạo ra bước phát [r]
(1)1
ỦY BAN NHÂN DÂN THÀNH PHỐ HÀ NỘI TRƯỜNG CAO ĐẲNG NGHỀ CÔNG NGHIỆP HÀ NỘI
Chủ biên: Nguyễn Thị Thanh Xuân
GIÁO TRÌNH THIẾT KẾ WEB
(Lưu hành nội bộ)
(2)Tuyên bố quyền
Giáo trình sử dụng làm tài liệu giảng dạy nội trường cao đẳng nghề Công nghiệp Hà Nội
Trường Cao đẳng nghề Công nghiệp Hà Nội không sử dụng không cho phép cá nhân hay tổ chức sử dụng giáo trình với mục đích kinh doanh
(3)3
BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Mã bài: MD38-01
Giới thiệu: Mục tiêu:
- Hiểu lịch sử WWW;
- Hiểu cấu trúc trang HTML thẻ HTML bản, cách bố trí, xử lý ứng dụng file CSS;
- Có khả thiết kế giao diện;
- Biết cách tổ chức thông tin trang chủ bố trí văn trang - Ghi nhớ lệnh điều khiển ngôn ngữ đặc tả Script
- Thực thao tác an toàn với máy tính
Nội dung:
1 Lịch sử World Wide Web (www)
1.1 Giới thiệu World Wide Web (www)
Ngày người ta dùng máy tính cơng cụ hữu ích để truy nhập Internet, chủ yếu tìm kiếm thơng tin Các thơng tin văn bản, hình ảnh âm hay thơng tin đa phương tiện…
Nhu cầu tìm kiếm thơng tin ngày nhiều đưa vấn đề làm người dễ dàng sử dụng máy tính truy cập Internet công cụ phục vụ đắc lực cho việc tra cứu tìm kiếm thơng tin mạng thơng tin rộng lớn toàn cục
Việc trở nên dễ dàng ý tưởng siêu văn (Hypertext) – văn thông minh Khái niệm nhà tin học Ted Nelson đề xuất vào năm 1965 1989, dự án thức thực kỹ sư trẻ người Anh tên Tim Berners – Lee
(4)4
World Wide Web (www) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL)
- Các giao thức, để truy nhập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML)
Dịch vụ World wide web xây dựng theo mô hình Client/Server, tức người ta thiết lập máy phục vụ cho việc lưu trữ tài liệu Hypertext gọi Web Server Phía người sử dụng có máy tính với phần mềm có khả hiểu tài liệu Hypertext giao tiếp với Web Server gọi Web Browser hay web client Khi người sử dụng có yêu cầu tài liệu cách gửi đến Web Server URL Web Server phục vụ tài liệu Web Browser hiển thị lên hình với khn dạng thích hợp
1.2 Giới thiệu URL:
Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có địa mà mã hóa URL
URL coi trỏ dùng với mục đích đơn giản xác định vị trí tài nguyên môi trường Internet Thông qua URL mà Web Browser tham chiếu đến Web Server dịch vụ khác Internet ngược lại
Các URL thường gồm phần:
- Việc đặt tên chế dùng để truy nhập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên
- Tên thân tài nguyên, đường dẫn
(5)5
Ví dụ khác URL, ví dụ tới hộp thư (mailbox) người dùng: Mọi góp ý, xin gửi thư tới
<A ref=”mailto:joe@someplace.com”>Joe Cool</A>
Các định danh đoạn (fragment identifiers): Một số URL tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu kết nối (gọi các định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2
Các URL tương đối: không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy tài liệu Các URL tương đối gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn
Các URL giải toàn URL sử dụng URL gốc Như ví dụ giải pháp URL tương đối, giả sử có URL gốc
“http://www.acme.com/support/intro.html”
URL tương đối đánh dấu cho liên kết siêu văn bản: <A href=”suppliers.html”>Suppliers</A>
sẽ mở rộng thành URL đầy đủ
“http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh
<IMG src=” /icons/logo.gif” alt=”logo”>
sẽ mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Các URL dùng để:
- Liên kết tới tài liệu tài nguyên khác
- Liên kết tới kiểu dạng bên kịch (script) 1.3 Giới thiệu HTTP
(6)6
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 URL - Internet số cổng (ngầm định 80) đặc tả URL
- Thực yêu cầu: Web Browser gửi thông tin tới Web Server để yêu cầu phục vụ Việc gửi thông tin gửi phương thức GET dùng cho việc lấy đối tượng từ Server, hay POST dùng cho việc gửi liệu tới đối tượng Server
- Phản hồi: Web Server gửi phản hồi Web Browser nhằm đáp ứng yêu cầu Web Browser
- Kết thúc kết nối: Khi kết thúc trình trao đổi Web Browser Web Server kết nối chấm dứt Và mối liên hệ Client Server tồn trình trao đổi với nhau, điều có lợi điểm lớn giảm lưu thông mạng
2 Nhập môn ngôn ngữ HTML (Hyper Text Markup Language)
Ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) Nó dùng cho mục đích sau:
- Phổ biến tài liệu trực tuyến với heading, văn bản, bảng, danh sách, ảnh, v.v…
- Truy tìm thơng tin trực tuyến theo liên kết siêu văn việc kích vào nút
(7)7
- Bao gồm spread-sheets, video clips, sound clips, ứng dụng trực tiếp khác tài liệu họ
HTML đánh dấu văn dạng thẻ (Tag) Cấu trúc thẻ HTML có dạng sau:
- Thẻ đóng: <Tag>văn chịu tác động</Tag>
Trong đó:
+ <Tag>: bắt đầu hiệu ứng thẻ + </Tag>: kết thúc hiệu ứng thẻ Ví dụ: <b> văn in đậm</b> cho kết trình duyệt là:
văn in đậm
- Thẻ mở: <Tag> văn chịu tác động Ví dụ: Đoạn 1<p> Đoạn
sẽ cho kết là:
Đoạn Đoạn
- Về quy tắc thẻ lồng lẫn phải đảm bảo cú pháp thẻ
3 Trang văn trang
Trang web có hai đặc trưng bản:
- Siêu văn (hypertext): bao gồm văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắ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 trang thành phần khác bất cư website phạm vi toàn cầu
Website tập hợp nhiều webpage có chủ đề địa định Trong website, người ta “đi lại” webpage băng đường hyperlink
(8)8
- Trang chủ, trang gốc (Master page): với website có trang chủ Là nơi thể rõ chủ đề site thông qua cách bố trí danh mục tin, cách trang trí mỹ thuật bật… - Trang nội dung (content page): trang chứa nội dung mục tin Ngoài trang có danh mục tin theo chủ đề mục tin cha, link để liên kết tới trang khác
- Trang đầu (home page, start page): trang xuất sau khởi động trình duyệt Có thể trang chủ khơng trang đặc biệt
- Trang đặc biệt (special page): trang xuất trang đầu khởi động trình duyệt web Trang có khơng, có thời gian tồn ngắn với nội dung thong báo, đưa tin đặc biệt, muốn người quan tâm trước tiên
Một trang web thường gồm vài trang hình
4 Ngôn ngữ đặc tả Script
Script hay kịch bản, theo thuật ngữ lập trình, chương trình chạy với chế độ thông dịch máy khách (client) hay máy chủ (server) nhằm tạo ứng dụng web (web base application) Xét phương diện:
- Client-side : script bổ sung vào trang web cho phép tạo trang web tương tác, có hiệu ứng động dựa vào mơ hình đối tượng trình duyệt (BOM: browser object model)
- Server-side: sử dụng đối tượng liên quan để chạy script server
Có nhiều loại ngơn ngữ đặc tả JavaScript, VBScript, Jscript, , tài liệu giới thiệu sơ lược ngôn ngữ đặc tả VBScript nhằm giúp học viên tham khảo thêm thực lập trình chức cho web
4.1 Khai báo biến:
VB Script khai báo biến thông qua từ khóa dim, biến VBScript khơng cần xác định kiểu, biến không cấu trúc xem biến vơ hướng, chứa tự chuyển đổi hầu hết kiểu liệu
(9)9
Mảng định nghĩa truy xuất thông qua số - Dim x,y,z
- Dim a(10) ‘Khai báo mảng 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ử giữ lại giá trị 10 phần tử đầu’
4.2 Toán tử:
VBScript cho phép sử dụng toán tử xử lý chuỗi, so sánh phép gán, tính tốn số học sau:
Tốn tử Tên gọi Ví dụ
^ Mũ 2^3 =
+ Cộng x+y
- trừ
* Nhân
/ Chia
\ Chia phần nguyên 7\3 (kết quả: 2)
Mod Chia lấy dư mod (kết quả: 1)
& + Cộng chuỗi “he” & “llo” (kết quả: “hello”)
= > < <> >= <=
bằng lớn nhỏ khác
lớn nhỏ
Not, And, Or, Xor Toán tử logic If(x>2)and(y<3)or(z>x)then
4.3 Các cấu trúc điều kiện
4.3.1 Lệnh If then If … then … else
(10)10
If <biểu thức logic> then
<khối lệnh1>
End if
If <biểu thức logic> then
<khối lệnh 1>
Else
<khối lệnh > End if
Chức năng:
- Ở lệnh khối lệnh 1 thực <biểu thức logic> trả giá trị True - Ở lệnh khối lệnh 1 thực <biểu thức logic> trả giá trị True, ngược lại khối lệnh 2 thực
Ví dụ:
<% If Trim(Request.Form("Go"))="Tim kiem" then
tloai=Request.Form("tuloai")
Else
tloai = request.QueryString("tloai")
End if %>
4.3.2 Lệnh Select case
Cú pháp:
Select Case <tham số> Case <giá trị 1>
<khối lệnh 1> …
Case Else
<khối lệnh> End select
Chức năng: lệnh cho phép lựa chọn nhiều trường hợp để định thực thi Mệnh đề Case Else cú pháp dùng cho trường hợp tất phép so sánh mệnh đề Case không xảy
http://somesite.com/html/top.html#section_2