Giáo trình thiết kế web (nghề quản trị mạng trình độ cao đẳng)

_ Ý nghĩa và vai trò của môn học/mô đun: Mục tiêu của môn học/mô đun: - Sử dụng thành thạo các công cụ thiết kế Web; - Xây dựng được các ứng dụng Multimedia; - Cài đặt, cấu hình được d

Trang 2

2

LỜI GIỚI THIỆU

Chương trình khung quốc gia nghề Quản trị mạng máy tính đã được xây dựng trên

cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun, môn học Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo các môđun, môn học đào tạo nghề là cấp thiết hiện nay Thiết kế web là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu thiết kế và lập trình web trong và ngoài nước, kết hợp với kinh nghiệm trong thực

tế sản xuất

Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn Xin chân thành cảm ơn!

Cần Thơ, ngày 17 tháng 06 năm 2018

Tham gia biên soạn

1 Chủ biên Nguyễn Phát Minh

Trang 3

3

MỤC LỤC

LỜI GIỚI THIỆU 2

MỤC LỤC 3

TRANG 3

GIÁO TRÌNH MÔN HỌC/MÔ ĐUN 6

Tên môn học/mô đun: THIẾT KẾ WEB 6

Mã môn học/mô đun: MĐ 17 6

BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML 7

Mã bài: MĐ 17 - 01 7

1 Lịch sử World Wide Web (www) 7

1.1 Giới thiệu về World Wide Web (www) 7

1.2 Giới thiệu về URL: 7

1.3 Giới thiệu về HTTP 9

2 Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) 9

3 Trang và văn bản trên trang 10

4 Ngôn ngữ đặc tả Script 11

4.1 Khai báo biến: 11

4.2 Toán tử: 11

4.3 Các cấu trúc điều kiện 12

4.4 Các cấu trúc lặp 13

4.5 Khai báo hàm và thủ tục: 13

4.6 Một số hàm thông dụng trong ASP: 13

5 CSS (Cascading Style Sheets) 14

5.1 Cú pháp CSS 14

5.2 Các thuộc tính trong CSS 15

5.3 Sử dụng CSS trong trang HTML 15

</p>Bài tập thực hành của học viên 16

BÀI 2: THIẾT KẾ WEB TĨNH 18

Mã bài: MĐ 17 - 02 18

1 Tổng quan: 18

2 Trang và văn bản trên trang 18

2.1 Tạo tiêu đề 19

2.2 Một số thẻ trình bày và định dạng văn bản: 19

2.3 Các thuộc tính của thẻ trình bày trang 20

3 Bảng biểu (Table) và trang khung (Frame) 20

3.1 Bảng biểu 20

3.2 Khung – Frames 22

4 Multimedia trên trang Web 26

4.1 Đặt màu nền 26

4.2 Màu chữ của văn bản 26

4.3 Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK 26

4.4 Thuộc tính và mã màu 26

4.5 Nạp hình ảnh làm nền cho trang văn bản 27

4.6 Chèn ảnh - thẻ <IMG…> 27

5 Các yếu tố động trên trang 28

Trang 4

4

5.1 Đưa âm thanh vào tài liệu 28

5.2 Đưa Video vào tài liệu 29

6 Khung nhập (Form) 30

6.1 Form 30

6.2 Các thành phần trong FORM 31

7 Liên kết – Link 35

7.1 Thẻ neo và mối liên kết 35

7.2 Thuộc tính HREF 35

7.3 Liên kết ra ngoài – External Links 35

7.4 Địa chỉ tuyệt đối 35

7.5 Địa chỉ tương đối 36

7.6 Liên kết nội tại – Internal Link 36

7.7 Siêu liên kết – Hyperlink 36

BÀI 3: XÂY DỰNG WEB ĐỘNG 40

Mã bài: MĐ 17 - 03 40

1.Tổng quan về ASP.Net và ADO.Net: 40

1.1 Tổng quan về ngôn ngữ ASP.Net: 40

1.2 Mô hình ADO.Net 49

2 Các đối tượng ASP.Net: 50

2.1 ASP.Net Web Server Controls: 50

2.2 Các đối tượng trong ASP.NET 57

2.3 Biến và các cấu trúc điều khiển: 65

2.4 Thủ tục và hàm 72

3 Các đối tượng ADO.Net: 74

3.1 Các đối tượng trong ADO.Net 74

3.2 Các lớp SqlClient trong mô hình ADO.Net 75

3.3 Các điều khiển dữ liệu ASP.Net 93

TÀI LIỆU THAM KHẢO 134

Trang 5

5

GIÁO TRÌNH MÔN HỌC/MÔ ĐUN

Tên môn học/mô đun: THIẾT KẾ WEB

Mã môn học/mô đun: MĐ 17

Vị trí, tính chất, ý nghĩa và vai trò của môn học/mô đun:

_ Vị trí: Mô đun được bố trí sau khi sau khi sinh viên học xong các môn học Hệ quản trị Cơ sở dữ liệu, Cơ sở dữ liệu, được đào tạo cho trình độ cao đẳng nghề quản trị mạng máy tính

_ Tính chất: Là mô đun đào tạo nghề bắt buộc

_ Ý nghĩa và vai trò của môn học/mô đun:

Mục tiêu của môn học/mô đun:

- Sử dụng thành thạo các công cụ thiết kế Web;

- Xây dựng được các ứng dụng Multimedia;

- Cài đặt, cấu hình được dịch vụ IIS;

- Có khả năng kết hợp với cơ sở dữ liệu để tạo ra các trang Web động

Trang 6

M ục tiêu:

- Trình bày được lịch sử của WWW;

- Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ bản, cách

bố trí, xử lý và ứng dụng file CSS;

- Thực hiện thiết kế được giao diện;

- Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang

- Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script

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

Nội dung:

1 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 người ta dùng máy tính như một công cụ rất hữu ích để truy cập Internet, chủ yếu là tìm kiếm thông tin Thông tin này có thể là văn bản, hình ảnh, âm thanh hay thông tin đa phương tiện…

Nhu cầu tìm kiếm thông tin ngày càng nhiều đã đưa ra vấn đề: làm thế nào dễ dàng sử dụng máy tính truy cập Internet như một công cụ phục vụ đắc lực cho việc tra cứu, tìm kiếm thông tin trên mạng thông tin rộng lớn nhất toàn cục

Vấn đề trên trở nên dễ dàng hơn bởi ý tưởng siêu văn bản (Hypertext) – văn bản thông minh nhà tin học Ted Nelson đề xuất vào năm 1965 Đến 1989, dự án chính thức được thực hiện bởi một kỹ sư trẻ người Anh tên là Tim Berners – Lee

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)

1.2 Giới thiệu về URL:

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

Trang 7

7

URL được xem là một con trỏ dùng với mục đích đơn giản là xác định vị trí tài nguyên của môi trường Internet Thông qua các URL mà Web Browser có thể tham chiếu đến một Web Server hoặc các dịch vụ khác trên Internet và ngược lại

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

Ví dụ: URL xác định trang W3C Technical Reports là http://www.w3.org/TR

URL này có thể được đọc như sau: Có một tài liệu sẵn dùng theo giao thức HTTP,

đang lưu trong máy www.w3.org, có thể truy cập theo đường dẫn “/TR” Các cơ chế

khác ta có thể thấy trong các tài liệu HTML bao gồm “mailto” đối với thư điện tử và

“ftp” đối với FTP

Ví dụ sau đây chỉ tới hộp thư (mailbox) của 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 chỉ tới việc định vị một tài nguyên Kiểu này của URL kết thúc với “#” theo sau bởi một dấu hiệu kết nối (gọi là các định danh đoạn) Ví dụ, đây là một URL đánh dấu một móc tên là section_2: http://somesite.com/html/top.html#section_2

Các URL tương đối: không theo cơ chế đặt tên Đường dẫn của nó thường tham chiếu tới một tài nguyên trên cùng một máy chứa tài liệu hiện tại Các URL tương đối

có thể gồm các thành phần đường dẫn tương đối (như “ ” nghĩa là một mức trên trong cấu trúc được định nghĩa bởi đường dẫn), và có thể bao gồm các dấu hiệu đoạn

Ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc:

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)

Trang 8

- 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

- Thực hiện 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 ở đây là gửi phương thức GET dùng cho việc lấy một đối tượng

từ Server, hay POST dùng cho việc gửi dữ liệu tới một đối tượng trê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

- Kết thúc kết nối: Khi kết thúc quá trình trao đổi giữa Web Browser và Web Server thì sự kết nối chấm dứt Và như vậy mối liên hệ giữa Client và Server chỉ được tồn tại trong quá trình trao đổi với nhau, điều này có lợi điểm rất lớn là giảm được lưu thông trên mạng

2 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 cho việc kiểm soát các giao dịch (transaction) với các thiết bị từ xa, đối với người dùng trong việc tìm kiếm thông tin, tạo các sản phẩm, đặt hàng,.v.v…

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

Trang 9

Ví dụ: <b> văn bản này được in đậm</b>

sẽ cho kết quả ở trình duyệt là:

văn bản này được in đậm

- Thẻ mở: <Tag> văn bản chịu tác động

Ví dụ: Đoạn 1<p> Đ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ẻ đó

3 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à tập hợp của rất nhiều webpage có cùng chủ đề tại một địa chỉ nhất định Trong một website, người ta có thể “đi lại” giữa các webpage bằng con đường hyperlink

Các lo ại trang chủ yếu của website:

- Trang chủ, trang gốc (Master page): với mỗi website có một trang chủ Là nơi

thể hiện rõ chủ đề của site thông qua cách bố trí danh mục tin, cách trang trí mỹ thuật nổi bật…

- Trang nội dung (content page): là trang chứa nội dung của một mục tin Ngoài ra trên trang cũng có các danh mục tin con theo chủ đề của mục tin cha, các link để liên kết tới các trang khác

- Trang đầu (home page, start page): là trang xuất hiện ngay sau khi khởi động trình duyệt Có thể là trang chủ hoặc không nhưng không phải là trang đặc biệt

- Trang đặc biệt (special page): là trang xuất hiện trên nền trang đầu ngay khi khởi động trình duyệt web Trang này có thể có hoặc không, có thời gian tồn tại ngắn với nội dung thông báo, đưa những tin đặc biệt, muốn mọi người quan tâm trước tiên

Trang 10

10

Một trang web thường gồm một vài trang màn hình

4 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

Script hay kịch bản, theo thuật ngữ lập trình, là chương trình chạy với chế độ thông dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứng dụng web (web base application) Xét trên phương diện:

- Client-side : các script bổ sung vào trang web cho phép tạo ra các trang web tương tác, có những 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 các đối tượng liên quan để chạy các script trên server

Có nhiều loại ngôn ngữ đặc tả như JavaScript, VBScript, Jscript, , trong tài liệu này chỉ giới thiệu sơ lược về ngôn ngữ đặc tả VBScript nhằm giúp các học viên tham khảo thêm khi thực hiện lập trình chức năng 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 trong VBScript không cần xác định kiểu, các biến không cấu trúc được xem là biến vô hướng, có thể chứa và tự chuyển đổi hầu hết các kiểu dữ liệu

Hằng được khai báo bằng từ khóa Const Ví dụ:

Const p = 3.14

Mảng được định nghĩa và truy xuất thông qua chỉ số

- Dim x,y,z

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

& hoặc + Cộng chuỗi “he” & “llo” (kết quả: “hello”)

=

>

<

bằng lớn hơn nhỏ hơn

Trang 11

4.3 Các cấu trúc điều kiện

4.3.1 Lệnh If then và If … then … else

End if

Chức năng:

- Ở lệnh 1 khối lệnh 1 được thực hiện nếu <biểu thức logic> trả về giá trị True

- Ở lệnh 2 khối lệnh 1 được thực hiện nếu <biểu thức logic> trả về giá trị True, ngược lại khối lệnh 2 sẽ được thực hiện

Ví dụ:

<% If Trim(Request.Form("Go"))="Tim kiem" then

tloai=Request.Form("tuloai") Else

tloai = request.QueryString("tloai") End if

<khối lệnh>

End select

Chức năng: lệnh này cho phép lựa chọn nhiều trường hợp để ra quyết định thực

thi Mệnh đề Case Else trong cú pháp dùng cho trường hợp tất cả các phép so sánh của mệnh đề Case là không xảy ra

Trang 12

Chức năng: thực hiện <khối lệnh> trong khi <Biểu thức điều kiện> đúng hoặc

cho đến khi điều kiện trở nên đúng Lưu ý là điều kiện có thể kiểm tra tại điểm bắt đầu hoặc kết thúc của vòng lặp, điều khác biệt ở đây là <khối lệnh>sẽ thực hiện ít nhất một lần nếu điều kiện kiểm tra được đặt ở cuối Có thể thoát khỏi Do…Loop bằng lệnh Exit

Do

Ví dụ:

<%Do

Msgbox “hãy đến trường”

If ngay = “chu nhat” then

Exit do End if

Loop until ngay = “thu bay”

4.6 Một số hàm thông dụng trong ASP:

4.6.1 Hàm xử lý văn bản:

- TRIM(xâu as string): Bỏ khoảng trắng hai đầu kí tự

- LEFT(Xâu as string, n as interger): Lấy bên trái xâu n kí tự

- RIGHT(Xâu as string, n as interger): Lấy bên phải xâu n kí tự

Trang 13

13

- LCASE(Xâu as string) : Chuyển xâu về chữ thường

- UCASE(Xâu as string) : Chuyển xâu về chữ hoa

- MID(xâu as string, n1, n2): Lấy n2 kí tự trong xâu bắt đầu từ vị trí n1

- CSTR(Bi ến): Hàm chuyển đổi biến thành kiểu string

Hàm JOIN/SPLIT(Xâu as string, kí t ự ngăn cách): Sẽ Nối/Cắt xâu thành

một/nhiều đoạn bằng cách xác định kí tự ngăn cách ở trên và cho các đoạn đó lần lượt vào một mảng

Ví dụ:

<% x=”Hà Nội; Hải Phòng; TPHCM”

y=split(x,”;”) Response.write y(0) ‘y(0)=”Hà Nội”

%>

4.6.2 Các hàm x ử lý số:

- SQR (n): Căn bậc 2 của n

- INT (n): Lấy phần nguyên n

- MOD : phép chia lấy dư

- Round (s ố, n): Làm tròn số với n chữ số thập phân

- RND (): Trả về số ngẫu nhiên bất kì trong khoảng [0,1]

5 CSS (Cascading Style Sheets)

Mục tiêu: Biết cách tạo, bố trí, xử lý và ứng dụng file CSS

CSS là các Style dùng định nghĩa cách trình duyệt hiển thị các đối tượng HTML Các Style này được lưu trong Style Nhiều định nghĩa Style cho cùng một loại đối tượng

sẽ được sử dụng theo lớp

5.1 Cú pháp CSS

Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị:

Đối tượng {thuộc tính: giá trị}

Trong đó:

+ Đối tượng thường là các tag HTML cần định nghĩa cách hiển thị

+ Thuộc tính là thuộc tính hiển thị của đối tượng đó

+ Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào

+ Các cặp thuộc tính: giá trị sẽ được phân cách nhau bởi dấu “;”

Ví dụ:

Để định nghĩa Style cho thẻ p

Trang 14

p.right {text-align: right}

p.center {text-align: center}

.center { text-align: center; color: red}

Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa:

- Chỉ một thành phần HTML nào đó có ID được định nghĩa

Ví dụ: Style dùng cho tất cả các thành phần HTML có ID là "intro"

#intro { font-size:110%; font-weight:bold; color:#0000ff;}

Ví dụ: Style chỉ dùng cho thành phần <P> nào có ID là "intro" trong trang Web

p#intro { font-size:110%; font-weight:bold; color:#0000ff;}

5.3 Sử dụng CSS trong trang HTML

5.3.1 Dùng file CSS riêng

File CSS độc lập nên dùng khi Style được áp dụng cho nhiều trang Mỗi trang sử

dụng Style định nghĩa trong file CSS sẽ phải liên kết đến file đó bằng tag <link> đặt trong phần HEAD:

Trang 15

5.3.2 Định nghĩa các style trong phần HEAD

Các Style định nghĩa trong phần HEAD có thể dùng cho nhiều thành phần HTML trong trang Web đó Bạn sử dụng tag <Style> để định nghĩa Style:

Ghi chú: Trình duyệt thường bỏ qua các tag HTML mà nó không biết, do đó để

các trình duyệt không hỗ trợ CSS không hiển thị phần định nghĩa Style, bạn nên đặt trong tag ghi chú của HTML: <! … >

5.3.3 Dùng Style cho một thành phần HTML cụ thể

Style cho một tag HTML cụ thể gần như không tận dụng được các lợi điểm của CSS ngoại trừ cách hiển thị đối tượng Bạn dùng thuộc tính Style để định nghĩa Style cho thành phần HTML

Đây là đoạn văn bản

</p>

Trang 16

16

Bài tập thực hành của học viên

Câu 1: URL là gì? Trình bày chức năng của giao thức HTTP?

Câu 2: Nêu đặc điểm của siêu văn bản (HTML)

Câu 3: Định nghĩa CSS và trình bày các cách chèn CSS vào một trang Cho ví dụ minh họa

G ợi ý trả lời

Câu 1: Tham khảo mục 1 (1.2, 1.3) trong bài

Câu 2: Tham khảo mục 2 trong bài

Câu 3: Tham khảo mục 5 trong bài

Trang 17

M ục tiêu:

- Mô tả được các chế độ hiển thị một trang Web;

- Có khả năng đưa một File vào Web;

- Có khả năng tạo được các bảng biểu và các Frame;

- Tạo được ứng dụng bảng liên kết trang Web;

- Xây dựng được các ứng dụng Multimedia;

- Sử dụng tốt các công cụ hỗ trợ thiết kế Web;

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

Nội dung:

1 Tổng quan:

Mục tiêu: Mô tả được các chế độ hiển thị một trang Web

Ngôn ngữ đánh dấu siêu văn bản HTML chỉ rõ một trang web được hiển thị như

thế nào trong một trình duyệt Sử dụng các thẻ và các phần tử HTML, ta có thể:

- Điều khiển hình thức và nội dung của trang

- Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu HTML

- Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý giao dịch,…

- Chèn các đối tượng multimedia, các thành phần ActiveX khác,

Trong chương này đề cập đến các yếu tố về trang văn bản, cách trình bày trang khung, cách nhúng, chèn một đối tượng multimedia, hướng dẫn cách định dạng trang web bằng css, đó là các yếu tố căn bản để hình thành nên một webpage dạng tĩnh (trang web không kết nối với cơ sở dữ liệu)

2 Trang và văn bản trên trang

Mục tiêu: Đề cập đến cách trình bày văn bản, đánh dấu, định dạng văn bản trên trang web

Trang 18

18

2.1 Tạo tiêu đề

Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục, cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện

Có 6 mức tiêu đề trong HTML Cách thể hiện các tiêu đề phụ thuộc vào trình duyệt nhưng thông thường thì:

Đoạn văn bản

Thẻ này dùng để xác định một đoạn văn bản Thẻ <P> (Paragraph) có thể dùng

kèm thuộc tính để ấn định cách trình bày đoạn văn bản

Nếu không muốn chèn một dòng trắng mà chỉ đơn thuần muốn xuống dòng mới

thì cần sử dụng thẻ <BR> (Break) Thẻ Break không cần có thẻ đóng kèm theo

Trang 19

19

Thẻ định nghĩa dạng: <CENTER> </CENTER>

Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản

2.3 Các thuộc tính của thẻ trình bày trang

Thuộc tính ALIGN của thẻ Paragraph

Thẻ <P> dùng để xác định một đoạn văn bản (như trình bày ở phần trước) Dưới đây ta tìm hiểu kỹ thêm một số các thuộc tính kèm theo (ALIGN) của nó Có thể căn lề

trái (left - mặc định), căn giữa (center) hoặc căn lề phải (right)

 Căn lề trái: <P ALIGN=LEFT>…</P>

 Căn giữa: <P ALIGN=CENTER>…</P>

 Căn lề phải: <P ALIGN=RIGHT>…</P>

Thuộc tính Clear của thẻ xuống dòng

Thẻ xuống dòng <BR> cũng có 3 thuộc tính kèm theo như sau:

Các kiểu đường kẻ ngang khác nhau

Như ở phần trên đã giới thiệu, thẻ <HR> tạo một đường kẻ ngang chạy suốt chiều

rộng cửa sổ màn hình Các đường kẻ này có thể được thay đổi độ đậm (mảnh), ngắn, dài, căn lề trái, căn lề phải,… bằng cách sử dụng các thuộc tính của chúng

<HR WIDTH=n% SIZE=n ALIGN=LEFT|RIGHT NOSHADE>

Trong đó:

màn hình Nếu không có % đằng sau thì độ dài tính theo đơn

vị pixcel

ALIGN=LEFT|RIGHT Căn lề trái|phải Đường kẻ ngang mặc định được căn chính giữa

3 Bảng biểu (Table) và trang khung (Frame)

Mục tiêu: Có khả năng tạo được các bảng biểu và các Frame

3.1 Bảng biểu

Mã lệnh tạo bảng

Giới hạn bảng: <asp : Table runat="server" “thuộc tính”

>…</asp:Table>

Định nghĩa một hàng: <asp :TableRow>…</asp:TableRow>

Định nghĩa một ô: <asp:TableCell>…</asp:TableCell>

Trang 20

<asp:TableCell> Bắt đầu một ô của bảng (bắt đầu cột trong một bảng)

(Default)/Right Căn lề cho bảng

Trang 21

21

3.2 Khung – Frames

HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau

Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau

để tiện theo dõi, so sánh Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung bên phải hiển thị tài liệu tương ứng

Trang 22

rows = Danh sách các độ cao của các khung

Danh sách gồm nhiều phần tử, cách nhau dấu phẩy Mỗi phần tử xác định độ cao (số dòng) của một khung Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử

Chiều cao thể hiện bằng

- Số pixel

- Tỷ lệ phần trăm chiều cao màn hình

- Tỷ lệ phần chiều cao còn lại

Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang

cols = Danh sách các độ rộng của các khung

Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc

Thuộc tính rows thiết lập việc chia khung theo chiều ngang trong một frameset Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều cao vùng hiển thị

Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng hiển thị

Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung

Các ví dụ

1- Chia màn hình thành hai nửa: nửa trên và nửa dưới:

Trang 23

3- Tạo lưới gồm 2 x 3 = 6 khung

the rest of the definition

Chia khung lồng nhau và thành phần FRAME

Việc chia khung có thể lồng nhau nhiều mức

Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới

.contents of first frame

.contents of second frame, first row

contents of second frame, second row

Trang 24

24

Các thuộc tính:

name = Tên của khung: Có thể dùng tên này để làm đích của mối siêu liên kết src = URI : Trỏ đến trang tài liệu sẽ hiển thị trong khung

noresize : Không cho phép co giãn lại kích thước

scrolling = auto|yes|no : Thiết lập thanh cuộn

 auto: Xuất hiện thanh cuộn khi cần thiết Đây là giá trị mặc định

 yes: Luôn có thanh cuộn

 no: Luôn không có thanh cuộn

frameborder = 1|0

Thiết lập đường biên

 1: Có đường biên giữa khung đang xét với các khung kề nó Đây là giá trị mặc định

 0: Không có đường biên giữa khung đang xét với các khung kề nó

Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung

target = tên khung đích

Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó

Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK), image map (AREA), và FORM

Thẻ NOFRAMES

Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình khách không

hỗ trợ frame hoặc đã tắt chức năng hiển thị frame

Thành phần NOFRAMES đặt ở phần cuối của thành phần FRAMESET

name = tên để tham chiếu trong tài liệu

width = Độ rộng của inline frame

height = Độ cao của inline frame

Ví dụ:

<IFRAME src="foo.html" width="400" height="500"

scrolling="auto" frameborder="1">

[Your user agent does not support frames or is currently configured

not to display frames However, you may visit

Trang 25

25

<A href="foo.html">the related document.</A>]

</IFRAME>

Inline frames mặc định là không co giãn được, không cần phải nêu rõ noresize

4 Multimedia trên trang Web

Mục tiêu: Xây dựng được các ứng dụng Multimedia;

4.2 Màu chữ của văn bản

Thuộc tính TEXT Thuộc tính này để thiết lập màu cho các con chữ trong văn bản, trừ các đầu mối liên kết phải có màu khác đi

Nội dung của tài liệu

</BODY>́

Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết

- LINK - đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết

- VLINK - Đặt màu sau khi đích liên kết đã được đến thăm (visited)

- ALINK - đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active)

Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red

Nội dung của tài liệu

Trang 26

26

4.5 Nạp hình ảnh làm nền cho trang văn bản

Thuộc tính BACKGROUND

Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn bản Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn

Nội dung tài liệu

Ví dụ:

4.6 Chèn ảnh - thẻ <IMG…>

Cú pháp chèn ảnh vào trang Web: <IMG SRC=”URL”>

IMG (Image), thuộc tính SRC (Source) là đường dẫn đến nơi lấy tệp ảnh Giá trị

của thuộc tính SRC được gán bằng URL là một địa chỉ trên máy tính địa phương hay trên Internet Nó chỉ ra nơi lưu trữ tệp ảnh cần chèn vào

Địa chỉ URL báo cho trình duyệt biết cần lấy tệp ảnh ở đâu

Nếu tệp ảnh nằm ngay trên máy tính địa phương thì cần ghi rõ đường dẫn

Nếu tệp ảnh lấy từ một nơi khác trên Internet thì phải ghi đầy đủ địa chỉ URL

Thuộc tính ALT – ALTernative cho phép ta chèn một đoạn chữ thay thế vào chỗ

có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào ảnh Nên luôn sử dụng thuộc tính này khi đưa hình ảnh vào trang Web vì nhiều người muốn có tốc độ cao, lướt nhanh qua các thông tin là chính đã tắt chức năng đọc ảnh của trình duyệt vẫn có thể biết được ảnh đó mang nội dung gì

Ví dụ:

<IMG SRC=”face.gif” ALT=”Nhay mat”>

Hiện ảnh Ảnh (không hiện lên) khi có và không sử dụng thuộc tính ALT

Trang 27

27

Nếu không sử dụng thuộc tính ALT thì tại chỗ có hình sẽ hiện từ IMAGE hoặc

biểu tượng ảnh bị khuyết

Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều cao của

ảnh Giá trị này có thể tính theo phần trăm (%) hoặc pixel

Nếu như không có thuộc tính này thì mặc định ảnh được đặt tại đúng nơi đặt thẻ IMG dóng trên cùng dòng chữ, theo cạnh dưới của khung nhìn

Thuộc tính VSPACE và HSPACE

Khi sử dụng thuộc tính ALIGN, ảnh được chèn vào dòng văn bản với các chữ dính sát liền Thuộc tính VSPACE và HSPACE dùng để tạo khoảng trống nhỏ viền xung quanh ảnh (tính theo đơn vị pixel)

Ví dụ:

<IMG SEC=”face.gif” VSPACE=20 HSPACE=20>

5 Các yếu tố động trên trang

Mục tiêu: Xây dựng được các ứng dụng Multimedia trên web;

5.1 Đưa âm thanh vào tài liệu

5.1.1 Liên kết đến tệp âm thanh

Để chèn một đoạn âm thành vào tài liệu HTML ta cũng theo đúng quy tắc tạo mối liên kết thông thường Trong thẻ neo, tại địa điểm URL bây giờ là địa chỉ của tệp

âm thanh

Dưới đây là một ví dụ về việc chèn âm thành vào tài liệu Khi nhấn chuột vào mối liên kết này, tệp âm thanh sẽ được phát lại

Trang 28

28

5.1.2 Tạo âm thanh nền

Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể nhúng

âm thanh vào tài liệu, nghĩa là âm thanh nền phát ra khi trang tài liệu bắt đầu hiển thị

Để nhúng âm thanh vào tài liệu ta dùng thẻ

Trong đó:

của phần mềm phát âm thanh

AUTOSTART=true|false Âm thanh tự động được kích hoạt khi bắt đầu nạp tài liệu hiện thị (nên đặt là true)

Đặt thẻ <EMBED> ở đâu thì khung nhìn của giao diện điều khiển việc phát tệp

âm thanh xuất hiện ở đó

Việc chèn tệp video vào tài liệu HTML cũng giống như chèn tệp âm thanh

Ví dụ đoạn mã sau đây sẽ chèn một đoạn phim video vào tài liệu Nó sẽ tạo ra một mối liên kết tới tệp video đã chọn và khi ta nhấn chuột vào mối liên kết thì sẽ được xem lại tệp video đó

của phần mềm phát âm thanh

AUTOSTART=true|false Âm thanh tự động được kích hoạt khi bắt đầu nạp tài liệu hiện thị (nên đặt là true)

Đặt thẻ <EMBED> ở đâu thì khung nhìn của giao diện điều khiển việc phát tệp video xuất hiện ở đó

5.2.3 Nhúng Flash vào tài liệu

Sử dụng thẻ <object> "></object>

Trang 29

29

<param>

Ví dụ

</object>

Ví dụ

Form là một cách để chuyển dữ liệu từ người sử dụng đến cho Web Server xử lý Forms được sử dụng rộng rãi trên WWW Các forms rất tiện lợi cho người dùng điền các yêu cầu tìm kiếm, các biểu mẫu điều tra, nhập dữ liệu đầu vào 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 Tuỳ 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ũng cần phải chỉ rõ cho máy chủ dịch vụ biết cách xử lý form

Có nhiều loại chương trình ứng dụng khác nhau trong máy chủ dịch vụ để làm việc này: các chương trình CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet

Cặp thẻ để tạo Form là <FORM > </FORM>

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

</FORM>

Thuộc tính METHOD chỉ ra phương thức trao đổi dữ liệu giữa trình duyệt Web

và máy chủ Web Có 2 phương thức là POST, GET Đối với form phương thức thường

là POST

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

Trang 30

30

Ví dụ:

Your name: <input type="text" name="fname" size="20">

Như đã nêu trên, có nhiều loại thành phần khác nhau trong một Form Dưới đây

sẽ trình bày lần lượt những điểm cơ bản nhất

<asp:TextBox id="tb2" TextMode="password" runat="server" /><br />

A TextBox with text:

<asp:TextBox id="tb3" Text="Hello World!" runat="server" /><br />

A multiline TextBox:

<asp:TextBox id="tb4" TextMode="multiline" runat="server" /><br />

A TextBox with height:

<asp:TextBox id="tb5" rows="5" TextMode="multiline" runat="server"/>

A TextBox with width:<asp:TextBox id="tb6" columns="30" runat="server"/>

</form>

Kết quả:

Trang 31

31

Các lựa chọn – Radio Button

Các nút chọn radio là một nhóm nút tròn, chỉ cho phép bạn được chọn một trong nhiều nút

Select your favorite color: <br />

<asp:RadioButton id="red" Text="Red" Checked="True"

Trang 32

32

GroupName="colors" runat="server"/> <br />

<asp:Button text="Submit" OnClick="submit" runat="server"/>

TextAlign canh lề cho đoạn text

OnCheckedChanged: giá trị cho phép thực thi mã lệnh khi có sự thay đổi

AutoPostBack cho phép tự động phản hồi khi có sự kiện lựa chọn xảy ra

Ví dụ:

Sub Check(sender As Object, e As EventArgs)

if check1.Checked then work.Text=home.Text

<p>Home Phone: <asp:TextBox id="home" runat="server" /> <br />

Work Phone: <asp:TextBox id="work" runat="server" />

<asp:CheckBox id="check1" Text="Same as home phone"

TextAlign="Right" AutoPostBack="True" OnCheckedChanged="Check"

Trang 33

Sub submit(sender As Object, e As EventArgs)

lbl1.Text="Your name is " & txt1.Text

End Sub

Trang 34

34

</script>

Enter your name: <asp:TextBox id="txt1" runat="server" />

<asp:Button OnClick="submit" Text="Submit" runat="server" />

</form>

Kết quả:

7 Liên kết – Link

Mục tiêu: tạo ứng dụng bảng liên kết trang Web

7.1 Thẻ neo và mối liên kết

Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó

Liên kết siêu văn bản gồm có ba phần: giao thức, neo và địa chỉ hay URL

Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo Cặp thẻ tạo neo là <A id="url" runat="server" >…</A> (Anchor) Thẻ này có nhiều thuộc tính

bắt buộc phải xác định rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau

Giao thức để tham chiếu HREF là HTTP Nếu là liên kết nội tại – internal link

thì không cần phải có phần giao thức

7.3 Liên kết ra ngoài – External Links

Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu đích Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị

Cú pháp để tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là như sau:

<A id="URL"> Nhóm t ừ đầu mối liên kết</A>

7.4 Địa chỉ tuyệt đối

Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ URL của tệp đích

<A id="full URL"> </A>

Ví dụ:

<A id="http://www.srl.rmit.edu.au/sa/vicsa.html>Victorian Subject Associations on Internet</A>

Trang 35

35

7 5 Địa chỉ tương đối

Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối Thay cho URL là tên tệp cùng với đường đẫn đến thư mục nơi chứa tệp đích

<A id ="path & filename"> </A>

Ví dụ: <A id ="examples/exam1.htm">Ví dụ 1</A>

7.6 Liên kết nội tại – Internal Link

Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác Điều này rất có ích khi tài liệu có kích thước lớn Ta có thể tạo mục lục toàn

bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng

Để làm điều này, cần đánh dấu điểm đích -book mark- của liên kết bằng thẻ neo

<A id ="Tên điểm đích">

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

<A id ="Tên điểm đích">

Lưu ý có thêm dấu "#"

Ví dụ, để tạo liên kết nội tại từ đây nhảy về đầu trang ta cần tạo một book mark

ở đầu trang với tên là Top chẳng hạn Sau đó, tạo thẻ neo liên kết ở dòng dưới như sau:

<A id ="#Top"> về đầu trang </A>

7.7 Siêu liên kết – Hyperlink

HyperLink là khai báo cho biết dùng siêu liên kết

ImageUrl là khai báo hình ảnh hiển thị cho đường liên kết

NavigateUrl khai báo địa chỉ đích Target khung của địa chỉ đích

Trang 36

36

Trang 37

37

Bài t ập thực hành của học viên

Câu 1: Thiết kế trang web theo mẫu sau đây:

Câu 2: Thiết kế trang web theo mẫu sau đây

Trang 39

M ục tiêu:

- Cài đặt, cấu hình được IIS và ngôn ngữ lập trình Web

- Sử dụng thành thạo môi trường phát triển và lập trình web động

- Sử dụng tốt các đối tượng ASP.Net, ADO.Net, tiện ích của ngôn ngữ lập trình

- Có khả năng kết nối với cơ sở dữ liệu

- Thực hiện tốt công tác an toàn lao động và vệ sinh phân xưởng

Nội dung:

1.Tổng quan về ASP.Net và ADO.Net:

Mục tiêu: Giới thiệu tổng quan về công nghệ phát triển web động bằng Asp.Net

và Ado.Net, giới thiệu về nền tảng Net Framework, cách cài đặt, cấu hình máy chủ web

ảo IIS Giới thiệu môi trường lập trình web – bộ Visual Studio Net

1.1 Tổng quan về ngôn ngữ ASP.Net:

1.1.1 Gi ới thiệu ASP.Net (Active Server Page Net):

a) Các mô hình code trong trang ASP.NET

Một trang Web bao gồm hai phần MarkUp Code và Programming code Khi duyệt một trang ta thấy phần layout của nó trên trình duyệt Phần layout được thiết

kế bởi các thẻ markup Programming code được viết cho sự điều khiển sự tương tác của người sử dụng và một số sự kiện

- MarkUp file chỉ dẫn cho trình biên dịch cách biên dịch và xử lý trang ASP.NET

- Programming code bao gồm các kỹ thuật xử lý sự kiện khác nhau

MarkUp code và Programming code có thể ở trên cùng một trang hoặc trên các trang khác nhau Dựa vào đó người ta chia Web Page ra làm hai dạng:

- Single File Page: chứa cả MarkUp code và Programming code trên cùng một trang

- Code Behind Page: IDE sẽ tạo ra hai file MarkUp (có phần mở rộng là aspx chứa markup code) và Class (phần mở rộng là aspx.cs, aspx.vb, chứa logic lập trình Markup file chứa tham chiếu đến Code Behind file nên 2 file này được liên kết với nhau

File Code Behind tự động tạo Partial Class Từ khóa Partial chỉ định lớp này

không chứa đầy đủ các thành phần mà nó được kế thừa từ lớp Page

Trang 40

40

Lớp Page: dẫn xuất từ lớp Page thuộc namespace "System.Web.UI“, được kế thừa các thuộc tính, các phương thức và các sự kiện của lớp này

ID Chỉ định hoặc truy xuất định danh đối tượng của lớp Page

Title Chỉ định hoặc truy xuất tiêu đề của trang

Server Truy xuất đến thể hiện của lớp Server

Session Truy xuất đến thể hiện của lớp Session đối với Session hiện tại

Controls Truy xuất đến thể hiện của lớp ControlCollection cho tất cả các

điều khiển Server Controls

ErrorPage Chỉ định hoặc truy xuất đến trang Error mà trang này được điều hướng

đến khi có lỗi xảy ra

HasControls Kiểm tra xem có tồn tại các controls trên trang hay không

LoadControl Load một thể hiện của lớp Control

GetValidators Trả về tập các đối tượng Validator liên quan đến nhóm

Validation chỉ định

MapPath Trả về đường dẫn ảo ánh xạ đến

Trong đó cấu trúc cơ bản của file aspx cho cả hai dạng bao gồm các chỉ dẫn trang, script code và user interface code

b) Các ch ỉ dẫn (Directives)

Các chỉ dẫn là các câu lệnh mô tả ứng dụng ASP.NET được biên dịch như thế nào Các chỉ dẫn được bao trong cặp <%%> và thuộc file aspx Các chỉ dẫn tốt nhất nên khai báo ở vị trí đầu tiên trên trang Sau đây là một số chỉ dẫn:

@Page Định nghĩa các thuộc tính cho Web Page

Tiêu đề	Giáo Trình Thiết Kế Web
Tác giả	Nguyễn Phát Minh
Trường học	Cần Thơ
Chuyên ngành	Quản trị mạng
Thể loại	sách giáo trình
Năm xuất bản	2018
Thành phố	Cần Thơ

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