thiết kế Web

2.4 Các tag cơ bản trong HTML2.4.1 Tag chú giải Tag này được dùng để ghi các lời chú giải, trình duyệt không tính nội dung của tag này.. 2.4.4 Tag Tag được dùng để chèn hình ảnh vào tra

[ Tài liệu tham khảo:

• Thiết kế và Lập trình Web với ASP –

ĐHQG TP.HCM

• ASP Databases – NXB TRẺ

• Lập trình Web bằng ASP 3.0 – NXB

LAO ĐỘNG ]

Chương 1

NGÔN NGỮ SIÊU VĂN BẢN HTML

1 NGÔN NGỮ HTML

- HTML (Hypertext Markup Language) là ngôn ngữ định dạng văn bản siêu liên kết.

- Là ngôn ngữ lập trình Web căn bản, cho phép định dạng văn bản, bổ xung hình ảnh, âm thanh, video vào một tập tin mà bất

kỳ máy tính nào cũng có thể đọc được thông qua trình duyệt Web (Web Browser)

2 LẬP TRÌNH WEB VỚI HTML

2.1 Các thành phần cơ bản của HTML

a) Tag là gì?

- Là một tập các ký hiệu được định nghĩa trong HTML mang một ý nghĩa đặc biệt

- Tag được bắt đầu bằng ký hiệu nhỏ hơn (<), tiếp theo là một từ khoá và kết thúc bằng ký hiệu lớn hơn (>)

- Tag quy định văn bản được hiển thị trên màn hình như thế nào.

Ví dụ

Tag <B> định phông chữ cho văn bản

là chữ đậm

Tag <P> định dạng một đoạn văn bản

- Có hai loại tag là tag bắt đầu và tag kết thúc, tag kết thúc giống tag bắt đầu

nhưng có thêm ký hiệu / ở trước từ khoá Dữ liệu bị tác động sẽ nằm giữa hai tag này

Tag không phân biệt chữ hoa chữ thường

Chú ý

- Ta có thể sử dụng các tag lồng nhau.

Ví dụ

<P align=”left”>

<Table width = 200 border = 1>

- Trình duyệt sẽ bỏ qua khoảng trắng giữa các tag.

- Có thể tạo trang Web (tập tin HTML) bằng bất cứ chương trình xử lý văn bản nào như Notepad, Word, tuy nhiên nên dùng công cụ chuyên dụng như FrontPage,

DreamWeaver, EditPlus,

- Nên dùng chữ thường để đặt tên cho các tập tin HTML và đặt phần mở rộng là

.htm hoặc html.

2.2 Cấu trúc của một tập tin HTML

- Một trang Web luôn bắt đầu bằng tag

Ví dụ

2.3 Xem trang Web

Để xem được nội dung trang web ta phải dùng một trình duyệt Web (Web Browser) như Internet Explorer, Netscape Navigator,

Opera, theo cách

+ Khởi động trình duyệt

+ Nhập địa chỉ trang Web cần xem vào thanh địa chỉ (Address) và nhấn Enter (Hoặc vào File\Open …)

2.4 Các tag cơ bản trong HTML

2.4.1 Tag chú giải

Tag này được dùng để ghi các lời chú giải, trình duyệt không tính nội dung của tag này Cú pháp của tag như sau.

<! Nội dung lời chú giải >

2.4.2 Tag <Font>

Tag <Font> được dùng để định dạng văn bản, trong đó có các thuộc tính thường dùng là: + face: tên phông chữ

+ size: cỡ chữ + color: mầu chữ

Ví dụ

2.4.3 Tag <P>

Tag <P> được dùng để phân đoạn văn bản, thuộc tính align được dùng để căn lề cho đoạn văn Ví dụ:

2.4.4 Tag <Img>

Tag <Img> được dùng để chèn hình ảnh vào trang Web, các thuộc tính của Tag thường hay sử dụng

+ src : Chứa đường dẫn tới tập tin hình ảnh + border: Thêm đường viền cho hình ảnh.

+ align: Căn lề cho hình ảnh

Ví dụ

2.4.5 Tag <A>

Tag <A> được dùng để tạo liên kết tới các mục khác trong cùng một trang hoặc tới các trang khác các thuộc tính của <A>

thường hay sử dụng

+ href : Chứa đường dẫn tới trang (điểm)

cần liên kết.

+ name: Tạo điểm liên kết.

+ target: Chỉ định nơi hiển thị trang liên kết.

Ví dụ

2.4.6 Tag <Table>

Tag <Table> được dùng để tạo một bảng trên trang Tag <Table> thường sử dụng các thuộc tính sau:

+ bgcolor: Định mầu nền cho bảng + border: Độ dày/mảnh của đường viền + bordercolor: Mầu đường viền

+ cellpadding: Khoảng cách giữa nội dung và đường viền

+ cellspacing: Khoảng cách giữa các ô + height: Chiều cao bảng

+ width: Chiều rộng bảng + Tag <Tr>: Tạo hàng trong bảng + Tag <Td>: Tạo các cột trong bảng, …

Ví dụ

2.4.6 Tag <Form>

Tag <Form> được dùng để tạo các form –

là thành phần giao tiếp cơ bản giữa người duyệt Web và người tạo Web Thông tin từ phía người duyệt Web được nhập vào form thông qua các hộp điều khiển như Textbox, Checkbox, Button,

b) Tạo vùng văn bản (TextArea)

<TextArea Name=“name” Rows=n Cols=m>

c) Tạo nút nhấn (Button)

<Input Type=“button/submit” Name=“name” Value=“nhãn”>

a) Tạo hộp nhập liệu (Textbox)

<Input Type=“text/password” Name=“name” Value=“value” Size = n Maxlength = n>

Ví dụ

f) Tạo danh sách Listbox

<Select Name=“name”>

<Option Value=“value”>Nhãn</Option> <Option Value=“value”>Nhãn</Option>

</Select>

Ví dụ

2.4.7 Tag <Frame>

- Tag <Frame> được dùng để tạo các

frame – là thành phần cơ bản của một trang Web Mỗi trang Web có thể được chia thành nhiều frame, mỗi frame sẽ chứa một trang

Web riêng.

- Tag <Frame> có hai loại là Rows(hàng)

và Cols(cột) Tuy nhiên ta cũng có thể kết hợp

ca hai dạng này.

- Trong một trang nếu đã dùng tag

<Frame> thì không được dùng tang <Body> nữa.

- Cách dùng tag <Frame> như sau:

<Frameset Rows=“n,m, ”>

<Frame name=“name1” src=“url1”> <Frame naem=“name2” src=“url2”> …

</Frameset>

Ví dụ

Chương 2

GIỚI THIỆU NGÔN NGỮ KỊCH BẢN

VBSCRIPT VÀ JAVAS

1 GIỚI THIỆU CHUNG

- VBScript và JavaScript là ngôn ngữ chạy trên trình duyệt (phía máy khách -

Client), các đoạn chương trình viết bằng

ngôn ngữ này được nhúng vào trong các

trang HTML Các đoạn chương trình này có khả năng:

+ Xử lý các thành phần trên trang Web như: Thay đổi mầu chữ, phông chữ, hình

Java.

- VBScript không phân biệt chữ hoa chữ thường trong khi JavaScript lại có phân biệt JavaScript được hỗ trợ trên hầu hết các trình duyệt trong khi VBScript chỉ được hỗ trợ tốt nhất trên trình duyệt IE.

2 NGÔN NGỮ VBSCRIPT

2.1 Lời chú thích

Cách viết lời chú thích trong VBScript tương tự trong VB được bắt đầu bằng ký tự nháy đơn (‘) và chỉ có tác dụng trên một

2.2 Khai báo biến, hằng, mảng

2.2.1 Khai báo biến

- Dùng từ khoá Dim để khai báo biến, biến trong VBScript không cần chỉ định

kiểu, nó có thể chứa và chuyển đổi qua lại hầu hết các kiểu dữ liệu

- Cú pháp khai báo biến như sau:

Dim tên_biến1, tên_biến2, …

- Tuy nhiên trong VBScript không nhất thiết phải khai báo biến trước khi sử dụng

Để yêu cầu phải khai báo biến trước khi sử dụng ta dùng lệnh “Option Explicit” ở đầu đoạn chương trình.

Chú ý

- Biến không phân biệt chữ hoa chữ thường.

- Chiều dài biến không quá 255 ký tự.

- Biến phải bắt đầu bằng ký tự chữ, không chứa dấu cách, không chứa các ký tự đặc biệt.

2.2.2 Khai báo hằng

- Hằng được định nghĩa bằng từ khoá Const Giá trị của hằng chỉ được sử dụng, không được thay đổi.

- Nên dùng chữ hoa cho hằng, chữ thường cho biến.

2.2.3 Khai báo mảng

a Mảng một chiều

- Cú pháp khai báo mảng:

Dim Tên_mang(kích thước của mảng)

- Số phần tử tối đa của mảng = kích thước của mảng + 1.

- Chỉ số của phần tử đầu tiên của mảng là 0, để truy xuất tới phần tử có chỉ số

i nào đó của mảng ta dùng Tên_mảng(i)

- Chỉ số của phần tử đầu tiên của mảng là (0,0), để truy xuất tới phần tử ở

2.3 Các kiểu dữ liệu

- Trong VBScript chỉ có một kiểu dữ liệu duy nhất là Variant Đây là kiểu dữ liệu

có thể chứa các loại giá trị từ kiểu chuỗi,

kiểu số cho đến các loại có cấu trúc Đây

cũng là kiểu trả về của các hàm, thủ tục viết bằng VBScript.

- Tuỳ theo ngữ cảnh mà môt biến có thể mang giá trị kiểu số, kiểu chuỗi, …

Các kiểu dữ liệu Ý nghĩa

Boolean Kiểu logic True hoặc False

Byte Số nguyên có giá trị từ 0 đến 255

Integer Số nguyên có giá trị từ -32768 đến 32767 Currency Kiểu tiền tệ

Double Số thực dài

Date(time) Ngày tháng( từ 01/01/100 - 31/12/9999)

Empty Kiểu dữ liệu chưa được khởi tạo

Object Chứa đối tượng trên Form

Chú ý

Chúng ta có thể chuyển đổi dữ liệu từ kiểu này sang kiểu khác bằng cách dùng các hàm thư viên: Cbyte, Cdate, Cint, CStr,

Cbool, …

2.4 Các toán tử cơ sở

2.4.1 Toán tử gán (=)

Tên_biến = Biểu_thức Biểu thức có thể bao gồm các biến, hằng, hàm và các toán tử khác.

2.4.2 Toán tử tính toán

+ (cộng), - (trừ), * (nhân), / (chia), \ (chia lây phần nguyên), mod (chia lấy phần dư), ^ (luỹ thừa)

2.4.3 Toán tử chuỗi

&, + (cộng chuỗi)

Ví dụ

S = “Nguyen” & “ “ & “Hoa”

hoặc S = “Nguyen” + “ “ + “Hoa”

2.4.4 Toán tử so sánh

= (bằng), > (lớn hơn), >= (lớn hơn hoặc bằng), …

Kết quả của một biểu thức so sánh sẽ thuộc

về kiểu logic (True/False)

2.4.5 Toán tử Logic

And, Or, Not

2.5 Các cấu trúc điều khiển

2.5.1 Cấu trúc tuần tự

Các lệnh được thực hiện tuần tự từ trên xuống dưới:

Lệnh1 Lệnh2

… Lệnhn

Ví dụ

Dim a, b, c

a = 6

b = a + 10

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

a) Cấu trúc If …Then

If <Btdk> Then

Các câu lệnh End If

Ví dụ

Dim myDate myDate = #1/5/2006#

If myDate < Now Then

myDate = Now End If

b) Cấu trúc If …Then … Else

If <Btdk> Then

Các câu lệnh Else

Các câu lệnh End If

Ví dụ

a = 15

If a mod 2 = 0 Then

document.Write(“So chan”) Else

document.Write(“So le”) End If

c) Cấu trúc Select Case

Select Case <Btdk>

Case <Gt1>:

Các câu lệnh Case <Gt2>:

Các câu lệnh

… Case Else:

Các lệnh End Select

Ví dụ

thang = 10 document.Write(“Thang “) document.Write(thang)

Select Case thang Case 2:

document.Write(“Co 28 ngay”) Case 1,3,5,7,8,10,12:

document.Write(“ Co 31 ngay”) Case 4,6,9,11:

document.Write(“Co 30 ngay”) Case Else

document Write(“Khong hop le”) End Select

Do While <Btdk>

Các lệnh Loop

+ Dạng 2

Do

Các lệnh Loop While <Btdk>

+ Dạng 3

Do Until <Btdk>

Các lệnh Loop

+ Dạng 4

Do

Các lệnh Loop Until <Btdk>

b) Cấu trúc While…WEnd

While <Btdk>

Các lệnh WEnd

Ví du

Tính tổng S = 1+2+ +N Dim N,i,S

N = 10

S = 0

i = 1

While (i<=N)

S = S + i

i = i + 1 WEnd

+ Dạng 2

For <bc = csd> to <csc> Step <bn>

Các lệnh Next

Ví du

Tính tổng S = 1+2+ +N Dim N,i,S

N = 10

S = 0

For i = 1 to N

S = S + i Next

c) Cấu trúc For Each…Next

Lặp với mỗi phần tử trong tập hợp

‘ Duyet qua các phan tu

For Each I in D

document.Write(D.Item(i)) Next

2.6 Hàm vào thủ tục

2.6.1 Khai báo hàm

Function Tên_hàm[(các tham số)]

Các lệnh End Function

Ví dụ

Xây dựng hàm tính diện tích hình tròn khi biết bán kính.

Function FDtich(R)

Dim S

S = 3.14*R*R FDtich = S

End Function

2.6.2 Khai báo thủ tục

Sub Tên_thủ _tục [(các tham số)]

Các lệnh End Sub

Ví dụ

Xây dựng thủ tục tính diện tích hình tròn khi biết bán kính.

Sub SDtich(R)

Dim S

S = 3.14*R*R document Write(“DienTich”,S) End Sub

Ví dụ

Sử dụng hàm và thủ tục đã xây dựng ở trên

3 NGÔN NGỮ JAVASCRIPT

3.1 Lời chú thích

Cách viết lời chú thích trong JavaScript tương tự trong C và Java Chú thích trên một dòng viết sau hai ký tự gạch chéo (//), chú thích viết trên nhiều dòng đặt giữa hai cặp dấu /* và */

Ví dụ

// Loi chu thich tren mot dong

/* Loi chu thich

tren nhieu dong */

3.2 Khai báo biến, hằng, mảng

3.2.1 Khai báo biến

Dùng từ khoá var để khai báo biến Ta không cần định kiểu khi khai báo nhưng có thể gán giá trị cho biến khi khai bao Cú

Chú ý

- Biến có phân biệt chữ hoa chữ thường.

- Chiều dài biến không quá 255 ký tự.

- Biến phải bắt đầu bằng ký tự chữ, không chứa dấu cách, không chứa các ký tự đặc biệt.

* Mỗi câu lệnh của JavaScript được kết thúc bằng dấu chấm phẩy (;)

- Hằng được định nghĩa bằng từ khoá Const Giá trị của hằng chỉ được sử dụng, không được thay đổi.

- Nên dùng chữ hoa cho hằng, chữ thường cho biến.

3.2.2 Khai báo hằng

Ví dụ

const ERR_INVALID_USERID = 300;

3.3 Các kiểu dữ liệu trong JavaScript

- Các phép toán trên kiểu ký tự:

<, <=, >, >=, ==, !=

3.3.3 Kiểu chuỗi

- Chuỗi là một dãy các ký tự, một hằng chuỗi được đặt giữa hai dấy nháy kép.

- Các phép toán trên kiểu ký tự:

- Các phép toán trên kiểu ký tự:

&&, ||, !

3.3.5 Kiểu ngày tháng

- Là kiểu dữ liệu mô tả thông tin về Ngày, tháng, năm, giờ, phút, giây của hệ thông.

- Để xử lý ngày giờ ta có một số hàm sau:

getTime() Giờ theo mily giây

- Ngoài các kiểu dữ liệu thông dùng trên còn có kiểu object, null

3.4 Các cấu trúc điều khiển

3.4.2 Cấu trúc điều kiện a) Cấu trúc if

if (btdk) khối_lệnh;

b) Cấu trúc if else

if (btdk) khối_lệnh1;

else khối_lệnh2;

Ví dụ

a = 15;

if(a%2 == 0)

document.write(“So chan”); else

document.write(“So le”);

c) Cấu trúc switch case

switch(bt) {

case gt1:

khối_lệnh1; break; case gt2:

khối_lệnh2; break;

… default:

khối_lệnhn; break; }

i++;

}

c) Cấu trúc do while

do khối_lệnh;

while(btdk);

Ví dụ

s = 0; i=0;

do {

s+=2*i; i++;

} while(i<=10);

3.5 Định nghĩa và sử dụng hàm

- Hàm được định nghĩa theo mẫu sau: function tên_hàm([các tham số hình thức]) {

Ví dụ

//định nghĩa hàm function tongn(n)

document.write(t);

4 SỬ DỤNG SCRIPT TRONG WEB

4.1 Chèn Script vào trang web

- Các đoạn Script được chèn vào trang bằng thẻ <Script> theo cách

<Script Language = “javascipt[/vbscript]”>

Ví dụ

//Xem trong viduchuong2\vidu2_1\

4.2 Nhập xuất dữ liệu trong Script

- Đối tượng document là đối tượng đại diện cho trang web hiện hành, còn đối

tượng window thì đại diện cho cửa sổ trình duyệt mà trang web đang hiển thị.

- Để xuất dữ liệu ra trang web ta dùng phương thức write và writeln của đối tương document theo cú pháp:

document.write(“Chuỗi hiển thị”) document.writeln(“Chuỗi hiễn thị”)

- Chúng ta có thể kết hợp các tag HTML để xuất dữ liệu trong các đoạn script theo cách

document.write(“tag chuỗi hiển thị tag”)

Ví dụ

//Xem trong viduchuong2\vidu2_2\

- Để hiển thị các hộp thông báo ta dùng phương thức alert của đối tượng

window theo cú pháp:

window.alert(“Chuỗi thông báo”)

Ví dụ

//Xem trong viduchuong2\vidu2_3\

- Để xác nhận lựa chọn ta dùng phương thức confirm của đối tượng window theo cú pháp:

window.confirm(“Chuỗi thông báo”)

Ví dụ

//Xem trong viduchuong2\vidu2_4\

- Để nhập giá trị cho biến từ bàn phím dùng phương thức prompt của đối tượng

4.3 Sử lý các sự kiện khi tương tác với các thành phần trên trang Web.

Các sự kiện được phát sinh khi ta kích hoạt (onClick, onMouseOver,

onMouseOut, ) các thành phần trên trang web như các nút, các danh sách, các liên

Ví dụ

//Xem trong viduchuong2\vidu2_6\

Chương 3

NGÔN NGỮ LẬP TRÌNH ASP

1 GIỚI THIỆU VỀ ASP

ASP (Active Server Page) là một ngôn ngữ lập trình ứng dụng dược chạy trên phía Server Một trang ASP có các đặc điểm sau:

- Một trang ASP được lưu với phần mở rộng asp

- Cung cấp chế độ bảo mật tốt vì các

mã code trong trang ASP người duyệt Web không thấy được.

- Kết nối với CSDL đơn giản.

- Được hỗ trợ bởi trình chủ Web Server IIS (Internet Information Services) và PWS (Personal Web Server).

Để thực thi được các trang ASP ta cần cài đặt IIS hoặc PWS Để cài đặt IIS ta làm như sau:

+ Chọn Start / Settings / Control Panel / Add or Remove Program Hộp thoại Add or Remove Program xuất hiện.

+ Trên hộp thoại Add or Remove Program chọn Add/Remove Windows

Components Hộp thoại Windows

Components Wizard xuất hiện.

+ Trên hộp thoại Windows Components Wizard chọn Internet

Information Services và nhấn Next/ Finish.

2 NẠP ỨNG DỤNG WEB LÊN IIS

Để xem được các trang ASP ta phải nạp nó lên trình chủ Web IIS theo các bước sau:

Bước 1: Mở trình chủ Web IIS bằng cách chọn Start / Settings / Control Panel / Addministrative Tools / Internet Services

Manager

Bước 2: Tạo thư mục ảo cho ứng dụng như sau:

+ Trên màn hình Internet Information Services bấm phải chuột vào mục Default

Web Site và chọn New/Virtual Directory.

+ Trên hộp thoại Virtual Directory Creation Wizard nhập bí danh cho thư mục

ảo vào hộp Alias rồi bấm Next

+ Chọn đường dẫn thư mục vật lý chứa ứng dụng cho mục Directory rồi bấm Next.