CHƯƠNG 1

Mở đầu về thiết kế web

Giảng viên : Ths. PHẠM ĐÀO MINH VŨ

Khoa CNTT-Trường CĐ CNTT TPHCM

Email : vupdm@itc.edu.vn

Nội dung

ü Một số khái niệm

ü Phân loại trang web

ü Một số bước chính trong phát triển website

ü Công bố website trên internet

ü Tạo Domain Free trên Internet

Một số khái niệm

Mạng, giao thức, Internet

ü Mạng máy tính (Computer

Network): Hệ thống các máy tính được kết nối với nhau nhằm trao đổi dữ liệu.

– Tập hợp các quy tắc được thống nhất giữa các máy tính trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác

– Ví dụ: TCP/IP, HTTP, FTP,…

ü Giao thức: Protocol:

Các dịch vụ cơ bản trên Internet

tìm kiếm thông tin

ü World Wide Web : Truy cập,

ü Email – Electronic Mail : Trao đổi thông điệp, văn bản…

ü FTP – File Tranfer Protocol : Trao đổi tập tin, chương trình,…

trao đổi trực tiếp với nhau bằng văn bản, âm thanh, hình ảnh, …

ü Chat – Tán gẫu: Người dùng

Địa chỉ IP: IP Address

ü Xác định một máy tính trong mạng dựa trên giao thức TCP/IP. Hai máy tính trong mạng có 2 địa chỉ IP khác nhau ü Có dạng x.y.z.t (0 ≤ x, y, z, t ≤

255)

ü Ví dụ: 74.125.71.105: địa chỉ máy chủ web của Google.com. ü Đặc biệt: địa chỉ: 127.0.0.1 (địa

chỉ loopback) là địa chỉ của chính máy tính đang sử dụng dùng để thử mạng

Tên miền: Domain Name

ü Là tên được “gắn” với 1 địa chỉ IP. ü Máy chủ DNS thực hiện việc “gắn” (ánh

xạ)

ü Ở dạng văn bản nên thân thiện với con

người

ü Được chia thành nhiều cấp, phân biệt bởi

dấu chấm (.). Đánh số cấp lần lượt từ phải sang trái bắt đầu từ 1.

ü Cấp lớn hơn là con của cấp nhỏ hơn ü Ví dụ: it.dlu.edu.vn gắn với 203.162.18.59 trong đó: – vn: Nước Việt Nam (Cấp 1) – edu: Tổ chức giáo dục (Cấp 2) – dlu: Tên cơ quan (Cấp 3) – it: đơn vị nhỏ trong cơ quan (Cấp 4)

ü Đặc biệt: Tên localhost được gắn với

127.0.0.1

Máy chủ (máy phục vụ): Server

ü Là máy tính chuyên cung cấp tài

nguyên, dịch vụ cho máy tính khác.

ü Thường được cài các phần mềm

chuyên dụng để có khả năng cung cấp

ü Một máy chủ có thể dùng cho một hay nhiều mục đích. Tên máy chủ thường gắn với mục đích sử dụng. Ví dụ: – File server – Application server – Mail server – Web server

ü Thực tế: các máy chủ có cấu hình cao, khả năng hoạt động ổn định

Máy khách: Client

ü Máy khai thác dịch vụ của

máy chủ

ü Với mỗi dịch vụ, thường có các phần mềm chuyên biệt để khai thác

ü Một máy tính có thể vừa là

client vừa là server

ü Một máy tính có thể khai thác dịch vụ của chính nó.

Cổng dịch vụ: Service Port

– Là số Î [0; 65535]

xác định dịch vụ của máy chủ

– 2 dịch vụ khác nhau chiếm các cổng khác nhau

• Web: 80

• FTP: 21

– Mỗi dịch vụ thường chiếm các cổng xác định, ví dụ:

Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator)

ü Tài nguyên: file trên mạng

ü URL: Xác định vị trí và cách khai thác file

ü Cấu trúc:

giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file

ü Ví dụ:

http://www.dlu.edu.vn:8080/html/test.htm

ü Trong trường hợp mặc định, nhiều thành phần có

– Giao thức, cổng: Được trình duyệt đặt mặc định

– Tên file: được máy chủ đặt mặc định

thể bỏ qua:

Trang web, web site, World Wide Web

– Là một trang nội dung

– Có thể được viết bằng nhiều ngôn ngữ khác nhau (HTML, ASP.NET, PHP,…) nhưng kết quả trả về client là HTML

ü Trang web: Web page:

– Tập hợp các trang web có nội dung

thống nhất phục vụ cho một mục đích nào đó

ü Web site:

ü World Wide Web (WWW): Tập hợp các web site trên mạng internet.

Web server, Web browser

ü Web server:

– Máy tính dùng lưu trữ các trang Web, có kết nối Internet, cung cấp thông tin cho người dùng

– Một số phần mềm web server chuyên

dụng:

• Apache: mã nguồn mở • Internet Information Services (IIS):

Sản phẩm của Microsoft

ü Web Browser:

– Phần mềm chạy trên client để khai

thác dịch vụ web – Một số Web browser:

• Nescape • Mozilla Firefox • Internet Explorer (IE): tích hợp sẵn

trong windows

• ...

Mô hình hoạt động website

Địa chỉ youtube.com ở đâu em ?

Máy chủ DNS

http://youtube.com

INTERNET

Dạ 74.125.67.100 anh

Đưa đây trang chủ ?

Máy chủ Youtube 74.125.67.100

Phân loại trang web

Phân loại trang web

ü Dựa vào công nghệ phát triển, có 2 loại: – Web tĩnh: Thường được viết bằng ngôn ngữ

HTML kết hợp JavaScript.

• Thường để chỉ những website có Cơ sở dữ liệu

• Có thể được viết bằng ngôn ngữ ASP, ASP.NET, PHP,

JSP, … với CSDL có thể là Access, SQLServer, MySQL, Oracle, …

– Web động:

WEB TĨNH

• Thiết kế đồ họa đẹp, ấn tượng, …

• Tốc độ truy cập nhanh

• Chi phí đầu tư thấp, dễ phát triển, …

– Ưu Điểm:

• Khó khăn trong thay đổi, cập nhật thông tin

• Thông tin cố định, không mang tính linh hoạt

• Khó tích hợp, nâng cấp, mở rộng.

• Tương tác yếu

– Khuyết điểm:

WEB ĐỘNG

• Thông tin được cập nhật nhánh chóng, liên tục =>

tạo sự thu hút

• Tương tác người dùng mạnh mẽ

• Thực hiện các tác vụ phức tạp với độ bảo mật cao

như : mua bán, thanh toán trực tuyến,…

• Ít tốn công sức cập nhật thông tin

– Ưu Điểm:

• Tốc độ truy cập chậm (do kết nối CSDL và có xử lý

tính toán phức tạp)

• Chi phí đầu tư cao, …

– Khuyết điểm:

Một số bước chính trong phát triển website

Các bước

ü Tương tự với phân tích và thiết kế hệ

thống.

1. Đặc tả

2. Phân tích

3. Thiết kế

4. Lập trình

5. Kiểm thử

Một số điều cần chú ý

– Web để làm gì?

– Ai dùng?

– Trình độ người dùng?

– Nội dung, hình ảnh?

ü Đặc tả:

– Mối liên quan giữa các

nội dung?

– Thứ tự các nội dung?

ü Phân tích

Một số điều cần chú ý (tt)

– Sơ đồ cấu trúc website

– Giao diện

– Tĩnh hay động

– CSDL

– Nội dung từng trang

– Liên kết giữa các trang

ü Thiết kế

– Cấu trúc thư mục

– Các modul dùng chung

– …

ü Xây dựng

Một số điều cần chú ý (tt)

ü Kiểm thử

– Kiểm tra trên nhiều

trình duyệt

– Kiểm tra trên nhiều

loại mạng

– Kiểm tra tốc độ

– Kiểm tra các liên kết

– Thử các lỗi bảo mật

– …

Công bố website trên Internet

Các điều kiện cần thiết

ü Xây dựng website

ü Quyền sử dụng hợp pháp

– Sử dụng tên miền con miễn phí

– Đăng ký tên miền riêng

ü Domain (tên miền)

– Sử dụng miễn phí

– Thuê không gian riêng

– Tự host website của mình

ü Hosting

ü Duy trì và phát triển và quảng bá website

Đăng ký tên miền

ü Xác định tên

– Tên tiếng Việt

– Tên giao dịch tiếng Anh

ü Xác định nơi đăng ký

ü Đăng ký tên miền càng sớm càng tốt

– Tên viết tắt

– Thủ tục đơn giản, nhanh chóng

• Việt Nam: 450.000+480.000/năm

• Nước ngoài: 8 – 12USD

– Kinh phí rẻ

Hosting

– Máy chủ Windows

• Support ASP, PHP…, SQL Server, MySQL…

• Đắt hơn máy chủ Linux

– Máy chủ Linux

• Support PHP, JSP…, MySQL…

• Rẻ hơn máy chủ Windows

ü Xác định môi trường vận hành của website

ü Xác định dung lượng thực tế của website, khả

năng sẽ mở rộng

ü Xác định băng thông, các dịch vụ đảm bảo an

toàn, an ninh, backup dữ liệu…

Duy trì website

ü Cập nhật thông tin

• Upload Webpage thông qua Web

Browser

• Upload Webpage thông qua FTP

program (Cute FTP, FTP Voyager,… )

– Web tĩnh:

• Form cập nhật CSDL nếu Site có

kết nối CSDL

– Web động

Phát triển website

ü Các chiến lược marketing

– Sử dụng thư điện tử

– Đầu tư quảng cáo 1 đợt trên

ü Liên kết với các site cùng

các phương tiện truyền thông (Báo, đài, Tivi…)

loại

– Trao đổi banner

– Giới thiệu lẫn nhau.

Quảng bá website

– Đăng ký Website vào các máy tìm

kiếm trong nước và thế giới (search engine)

• Vietnam Searchengine: Panvietnam, vinaseek…

• Global Searchengine: google,

altavista, hotboot…

– Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới.

• Google rank (the important of

website: 1-10)

• Alexa rank: Traffic ranking of

website.

ü Quảng bá Website

Phát triển website

– Tự động hoá dần các chức năng

của Website.

– Bảo mật web

– Phát triển các chức năng phức tạp như : mua bán, thanh toán trực tuyến,…

– Biến Website thành một môi

trường kinh doanh thực sự hiệu quả 24/24 trên Internet.

ü Nâng tầm phát triển Website

CHƯƠNG 2

Ngôn ngữ HTML

Phần cơ bản

Giới thiệu HTML

ü HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản, dùng để thiết kế trang web

ü Mô tả cách thức mà dữ liệu được hiển thị thông qua các ký hiệu đánh dấu gọi là tag (Element)

ü File HTML phải có đuôi HTML hoặc HTM

ü File HTML có thể được tạo bất kỳ trình soạn thảo

web hoặc văn bản nào

ü HTML trở thành 1 chuẩn của Internet do tổ chức World Wide Web Consortiun (W3C) phát triển và duy trì.

Ví dụ HTML

ü Cấu trúc tổng quát của 1 file HTML:

This is my first homepage. This text is bold

ü Để xem kết quả, nhấn đúp vào file

hello.html

HTML Elements (Tag)

ü HTML là văn bản bao gồm các HTML Element,

Hay được gọi là các HTML Tag

ü Mỗi tag có 1 tên, được bao giữa 2 kí tự “<“ và

“>”

ü Tag thường đi theo cặp. Ví dụ

ü Thẻ đầu tiên gọi là thẻ mở (), thẻ sau gọi là

thẻ đóng ()

ü Văn bản giữa thẻ mở và thẻ đóng là nội dung của

HTML Tag

ü HTML tag không phân biệt hoa thường.

giống

Ví dụ về HTML Elements

This text is bold

ü Trong đó :

– b là tên thẻ đánh dấu bắt đầu và kết thúc element

– Thẻ mở

– Thẻ đóng

– Nội dung của HTML Element là : This text is bold

– Khi hiển thị trên trình duyệt : This text is bold

– Mục đích của thẻ b là in đậm văn bản nằm trong nó

ü Đây là 1 HTML Element

Ví dụ về HTML Tag (tt)

ü Đây cũng là 1 HTML Tag

This is my first homepage. This text is bold ü Trong đó

– body là tên thẻ

– Thẻ mở , thẻ đóng

– Nội dung :

This is my first homepage. This text is bold – Mục đích thẻ body là chứa tất cả các Element nội dung

trong trang HTML

Chú ý

Mặc dù thẻ HTML không

phân biệt hoa thường và

nhiều trang web sử dụng

chữ hoa. Thế nhưng để phù

hợp với các tiêu chuẩn mới

nhất của web ta sẽ sử dụng

chữ thường cho tất cả các

thẻ HTML

Cấu trúc trang HTML

Thẻ DOCTYPE

ü Mọi trang HTML đều nên bắt đầu bằng 1

thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng.

ü Trong ví dụ trên ta dùng XHTML 1.0

Transitional

ü DOCTYPE sẽ cho trình duyệt biết nên

render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quick mode) mà không theo chuẩn

Cấu trúc trang HTML đơn giản

ü Cấu trúc 1 trang HTML đơn giản không

DOCTYPE

ü Cách xem mã nguồn của 1 trang web :

Click chuột phải , nhấn view source

Thẻ html

ü . . . : Bắt đầu và kết thúc tập tin

HTML

ü . . . : Phần đầu trang web

ü … : Khai báo thông tin trang web

ü : Hiển thị nội dung

trên thanh tiêu đề

ü : Là tag rỗng, chứa khai báo đến các tập tin có liên quan như tập tin định dạng thể hiện (.css), xử lý (.js),…

ü Nội dung trên trang : Hiển thị nội

dung trên trang.

ü : Khai báo mẫu định dạng chung cho 1

Element nào đó (tag

,

, ,…)

ü

ü Ta sử dụng thẻ

ü Ví dụ :

Cú pháp Javascript

ü Lệnh đơn : mỗi lệnh đơn kết thúc bằng ;

ü Khối lệnh : được bao bằng { }

ü Chú thích : // và /* .. */

ü Cấu trúc điều khiển :

– Rẽ nhánh : if, else, switch

– Lặp : for, while, do... while, for ... in

Biến trong javascript

ü Javascript không cần khai báo biến vẫn có thể sử

dụng được

ü Tên biến phân biệt hoa thường, phải bắt đầu

bằng kí tự hoặc gạch dưới ( _ )

ü Biến nếu được khai báo thì không cần khai báo

kiểu :

– var a;

– a = 10;

ü Một biến có thể chứa bất kỳ giá trị nào (nguyên,

thực , chuỗi ...)

Tầm vực của biến

ü Tầm vực là tầm ảnh hưởng của biến :

– Biến toàn cục : được khai báo ngoài các

hàm.Biến có tác dụng từ vị trí khai báo cho đến cuối chương trình

ü Nếu trong hàm, biến cục bộ trùng tên với biến toàn cục thì biến cục bộ sẽ được sử dụng

– Biến cục bộ : được khai báo trong hàm. Biến chỉ có tác dụng trong hàm được khai báo.

Kiểu dữ liệu

ü Biến trong javascript không cần khai báo kiểu dữ liệu

ü Khai báo biến kiểu số :

– a = 1.4; b = 2

ü Khai báo biến kiểu chuỗi :

– str = ‘Chuỗi dùng dấu nháy đơn’ ; str2 =

“Dấu nháy kép”

ü Khai báo biến boolean

– var dung = true,sai = fase;

ü Khai báo biến null

– obj = null

Phép toán

Phép gán

Phép so sánh

Phép toán logic

Phép toán +

ü Phép + trên 1 chuỗi sẽ cho ra chuỗi.

ü Ví dụ : s = “Chào các bạn” + “sinh viên ITC”

Kí tự đặc biệt

ü Các kí tự đặc biệt muốn xuất hiện trong

chuỗi phải escape :

– \n : new line

– \t : tab

– \b : BackSpace

– \& : dấu &

– \”: dấu “

Kí tự đặc biệt

Cấu trúc rẽ nhánh

ü if , else :

if (n % 2 == 0)

document.write(“Chẳn”);

else

document.write(“Lẻ”);

ü switch :

switch (n)

{

case 2 : document.write(“Thứ 2”); break;

case 3 : document.write(“Thứ 3”); break;

}

Cấu trúc lặp

ü for

var i=0; for (i=0;i<=5;i++) {

document.write("The number is " + i); document.write("
");

}

ü while

var i=0; while (i<=5) {

document.write("The number is " + i); document.write("
"); i++;

}

Cấu trúc lặp

ü for ... in

var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";

for (x in mycars) {

document.write(mycars[x] + "
");

}

Hàm

ü Cú pháp :

function functionName(var1,var2,...,varX) {

//some code

}

ü Hàm không được thực thi khi trang web được load

ü Hàm chỉ thực thi khi được gọi (ví dụ trong sự kiện hoặc

trực tiếp)

ü Hàm có thể đặt ở trong hoặc nhưng nên đặt trong . Nó sẽ luôn được nạp trước khi gọi

Ví dụ hàm

Hàm trả về giá trị

ü Từ khóa return dùng để trả về giá trị cho

hàm

ü Cú pháp :

function functionName(var1,var2,...,

varX)

{

//some code …

return value;

}

Ví dụ hàm trả về giá trị

Các hàm thông dụng – hàm alert()

ü alert ( “Nội dung thông báo”) : hiển thị

hộp thoại thông báo có 1 nút OK.

Hàm prompt

ü prompt (“Thông báo”, Giá_trị_mặc_định) : hiển thị hộp thoại với câu thông báo và 2 nút OK, Cancel và một textfield cho phép người dùng nhập vào 1 giá trị.

ü Nếu người dùng nhấn OK, hàm prompt() sẽ trả về chuỗi được nhập, ngược lại giá_trị_mặc_địch sẽ trả về

Hàm

Hàm confirm()

ü confirm(“Thông báo”) : là hàm dùng để xác

nhận lại thông tin, hiển thị câu thông báo với 2 nút OK, Cancel.

ü confirm() trả về giá trị true nếu OK được nhấn

và false nếu Cancel được nhấn

Hàm confirm() – ví dụ

Hàm document.write()

ü Hàm document.write(“Chuỗi”) : dùng để

ghi 1 chuỗi ra trang HTML

ü document.writeln(“Chuỗi”) : ghi chuỗi ra và kết thúc bằng ký tự xuống dòng. Hàm này nên đi kèm với thẻ

 để giữ lại

kí tự xuống dòng
ü Ví dụ :
– document.write(“Hello world”);
– document.writeln(“Hello world”);
Hàm eval()
ü Hàm eval(“Chuỗi”) : Chuyển đổi giá trị
chuỗi thành giá trị số
ü Ví dụ
Hàm parseInt()
ü parseInt(“Chuỗi”,[radix]) : hàm đổi chuỗi ra số
nguyên với cơ số là tham số radix.
ü Nếu Chuỗi gồm các kí số rồi đến kí tự (123abc)
thì các kí tự sẽ bị bỏ qua (trả về 123)
ü Nếu Chuỗi bắt đầu không phải kí số thì parseInt
sẽ trả về NaN (Not a Number)
Hàm parseFloat()
ü parseFloat (“Chuỗi”) : hàm đổi chuỗi ra số thực
ü Nếu Chuỗi gồm các kí số rồi đến kí tự (123abc)
thì các kí tự sẽ bị bỏ qua (trả về 123)
ü Nếu Chuỗi bắt đầu không phải kí số thì parseFloat
sẽ trả về NaN (Not a Number)
Hàm isNaN()
ü isNaN(“Chuỗi”) : hàm kiểm tra xem 1
chuỗi có phải là số không ? Nếu là số trả 
về false, ngược lại true
Event
ü Sử dụng javascript ta có thể tạo các trang web động
ü Event là các sự kiện phát sinh khi người dùng tương tác với
các element trong trang web
ü Mỗi element có 1 số các sự kiện riêng có thể kích hoạt
javascript
ü Một số các ví dụ :
– 1 cú click chuột
– 1 trang web hay 1 hình ảnh đang được nạp
– Di chuyển chuột lên trên 1 element
– Chọn 1 ô text field trong HTML
– Gởi dữ liệu trong form HTML
– Nhấn phím
Event – Cấu trúc phân cấp
Ví dụ event
ü Một số sự kiện tiêu biểu
onBlur
Xảy ra khi control mất focus
onClick
Xảy ra khi người dùng kích vào các thành phần hay
liên kết của form.
onChange
Xảy ra khi giá trị của thành phần được chọn thay đổi
onFocus
Xảy ra khi thành phần của form được focus.
onLoad
Xảy ra trang Web được tải.
onMouseOver Xảy ra khi di chuyển chuột lên trên control
onSelect
Xảy ra khi người sử dụng lựa chọn một trường nhập dữ
liệu trên form.
onSubmit
onUnLoad
Xảy ra khi người dùng chuyển dữ liệu về server (bấm
vào nút submit).
Xảy ra khi người dùng đóng trang
Các sự kiện của một vài đối tượng
Đối tượng
Chương trình xử lý sự kiện có sẵn
Selection list
Text
onBlur, onChange, onFocus
onBlur, onChange, onFocus, onSelect
Textarea
onBlur, onChange, onFocus, onSelect
Button
Checkbox
Radio button
Hypertext link
onClick
onClick
onClick
onClick, onMouseOver, onMouseOut
Clickable Imagemap area
onMouseOver, onMouseOut
Reset button
Submit button
Document
Window
onClick
onClick
onLoad, onUnload, onError
onLoad, onUnload, onBlur, onFocus
Framesets
Form
Image
onBlur, onFocus
onSubmit, onReset
onLoad, onError, onAbort
Ví dụ event
 
  
 

onUnload="alert('Goodbye! ');">



Ví dụ event






onchange="alert('Sự kiện ONCHANGE');"
onkeypress="alert('Sự kiện KEYPRESS');"/>