BÀI GIẢNG - THIẾT KẾ WEB ( combo full slides 9 bài )

Mục tiêu

SHEETS

Mục tiêu

quá trình thiết kế, xây dựng và triển khai một ứng dụng web trong kinh

doanh

cơ bản về lập trình web phía máy

khách (client) như:

 HTML

Tài liệu tham khảo

dụng tất cả các ngôn ngữ cho thiết kế

và lập trình web

Bài 1: Các khái niệm cơ

bảnKhái niệm cơ bản về mạng và

Internet

• Biết cách khai thác và tìm kiếm

thông tin trên mạng một cách hiệu quả

Nội dung

• Giới thiệu lịch sử

• Các khái niệm căn bản

• Khai thác tài nguyên trên Internet

Nội dung

• Giới thiệu lịch sử

• Các khái niệm căn bản

• Khai thác tài nguyên trên Internet

Internet – Mạng máy tính

Internet – Mạng thông tin

Lịch sử

• Mạng Internet xuất phát từ mạng ARPANET của Mỹ (1969) – mạng giữa các trường ĐH

• 1989 -Tim BernersLee phát minh ra giao

thức World Wide Web, sau đó tạo ra ngôn ngữ Hypertext Markup Language –HTML

• 1990–Tim viết trình duyệt (Web Browser)

và Web server đầu tiên (info.cern.ch)

• Từ năm 1993 internet phát triển rất nhanh

Nội dung

• Giới thiệu lịch sử

• Các khái niệm căn bản

• Khai thác tài nguyên trên Internet

Mạng máy tính

• Mạng máy tính là một hệ thống gồm

từ hai máy trở lên, những máy tính

này được kết nối với nhau nhằm mục đích trao đổi thông tin và dữ liệu

• Máy chủ - Máy khách:

– Trong mạng máy tính, máy tính được sử dụng cho những máy tính khác truy cập đến gọi là máy chủ (server).

– Các máy tính truy cập vào máy chủ

được gọi là máy khách (client).

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

là server

– Có thể khai thác dịch vụ của chính nó.

Giao thức mạng (Protocol)

• Bộ giao thức mạng là một hệ thống các quy định chung giúp xác định quá trình truyền dữ liệu giữa các máy tính, nhờ đó mà dữ liệu truyền nhận được chính xác

• Giao thức có vai trò xác định quá trình liên lạc trong mạng và quan trọng hơn cả là định nghĩa “hình dáng” của một đơn vị dữ liệu và

Giao thức mạng (Protocol)

(tt)

• Dữ liệu được truyền đi từ ứng dụng trên máy này, qua phần cứng về mạng của máy, tới bộ phận trung gian và đến nơi nhận, thông qua phần cứng của máy tính đích và chuyển tới ứng dụng

• TCP/IP và các giao thức liên quan tạo ra một

hệ thống hoàn chỉnh quản lý quá trình dữ

• FTP thường được dùng để tải trang web từ người thiết kế đến các máy chủ.

• Phần mềm thường dùng: FileZilla, WinSCP,…

người truy cập web xem

• Là một giao thức dùng để chuyển các file từ một kho web vào một trình duyệt để người dùng xem được trang web đó trên mạng

internet.

Địa chỉ IP (Internet Protocol Address)

• Địa chỉ IP là một con số 32-bit dùng

để xác định đối tượng nhận và gửi

thông tin, dữ liệu trên mạng

• Mỗi một thiết bị trong mạng đều có địa chỉ IP riêng

• Địa chỉ IP có dạng là 4 con số (mỗi số

là 8 bit), 4 số này được viết cách

nhau bởi dấu “.”

• Hiện nay đang triển khai IPv6

Địa chỉ IP (tt) (Internet Protocol Address)

• IPv4: a.b.c.d (0<a,b,c,d<255)

– VD: địa chỉ website của ĐH Kinh tế -

Luật ĐHQG TP HCM là:

www.uel.edu.vn tương ứng IP là 115.78.187.189

– Muốn biết được địa chỉ IP của các

website ta làm như sau:

Start  Run  gõ vào CMD  gõ Ping www.uel.edu.vn và gõ enter.

– Địa chỉ: 127.0.0.1 (localhost) là địa chỉ

Địa chỉ IP (tt) (Internet Protocol Address)

• IPv6

– 128bits

– Dạng: 8 nhóm số hexa

• 2001:0db8:85a3:0000:0000:8a2e:0370:7334

Tên miền (Domain name)

• Có thể được xem như là tên giao dịch của công ty hay tổ chức trên

Internet

• Tên miền được gắn với 1 địa chỉ IP

• Do ở dạng văn bản nên tên miền

thân thiện và dễ sử dụng

• Việc đưa ra tên miền giúp cho việc

Tên miền (Domain name)

Tên miền (Domain name)

(tt)

– Một số tên miền cấp 1 dùng chung là:

• com: công ty thương mại (commercial)

• edu: các trường học, các tổ chức giáo dục.

• net: các mạng (network)

• int: các tổ chức quốc tế(international

organizaions)

• org: các tổ chức khác (other organizations)

– Để sở hữu một tên miền chúng ta phải hợp đồng và trả chi phí hàng năm Nếu hết hạn sở hữu nhưng chúng ta không

• URL-Uniform Resource Locator

• URL là định danh duy nhất cho các

tài nguyên Internet

• Cú pháp chung của URL:

protocol://host_name[:port_num][/path][/

file_name]

Trang web, web site

• Trang web (Web page):

– Là một trang nội dung hiển thị các thông tin, dữ liệu dưới dạng văn bản, âm thanh, hình ảnh,

– Một trang web có thể được viết bằng nhiều ngôn

ngữ khác nhau: php, asp, aspx… nhưng kết quả khi trả về máy khách (client) là ngôn ngữ HTML

(Hypertext Markup Language-Ngôn ngữ liên kết

siêu văn bản)

• Web site:

World Wide Web (WWW)

• WWW là tập hợp các web site trên

Web browser

• Web Browser:

– Phần mềm chạy trên máy khách (client) dùng để hiển thị trang web và giúp khai thác dịch vụ web

– Một số Web browser:

Phân loại trang web

• Dựa vào công nghệ phát triển, có 2 loại:

– Web tĩnh:

• Dễ phát triển

• Tương tác với người duyệt web yếu

• Sử dụng ngôn ngữ HTML để thiết kế

• Người làm web tĩnh thường dùng các công

cụ trực quan để tạo ra trang web như FrontPage.

• Không nhận thông tin phản hồi từ người dùng.

Phân loại trang web (tt)

– Web động:

• Khó phát triển hơn

• Tương tác với người duyệt web mạnh

• Sử dụng nhiều ngôn ngữ khác nhau để lập trình

• Thường phải viết nhiều mã lệnh

• Nhận thông tin phản hồi từ người dùng.

Một số thuật ngữ quan trọng

khác

• IAP (Internet Access Provider): Nhà

cung cấp đường truyền Internet

• ISP (Internet Service Provider): Nhà

cung cấp dịch vụ Internet Một số ISP hiện nay ở Việt Nam: VDC, FPT,

SaigonNet, NetNam, Viettel,

Nội dung

• Giới thiệu lịch sử

• Các khái niệm căn bản

• Khai thác tài nguyên trên Internet

Khai thác tài nguyên trên

Khai thác tài nguyên trên

Khai thác tài nguyên trên

Một số công cụ khai thác tài

nguyên Internet

• Dowload Website Offline

– Cho phép download website về và truy cập offline

Một số công cụ khai thác tài

Engine cùng lúc, và loại bỏ kết quả

trùng

Tổng quan về thiết kế

web

Mục tiêu

• Hiểu được quy trình các bước thiết

lập một website, một số phương

pháp thiết kế và xây dựng một

website hiệu quả

• Hiểu những khái niệm liên quan đến việc mua tên miền, thuê chỗ hosting website

• Hiểu được qui trình triển khai và đưa website vào hoạt động

Các bước thiết lập Website

• Xác định yêu cầu của website

• Mua tên miền

• Thuê chỗ hosting

• Thiết kế website

• Đưa vào hoạt động

• Duy trì thông tin, bảo trì website

Các bước thiết lập Website

• Xác định yêu cầu của website

• Mua tên miền

• Thuê chỗ hosting

• Thiết kế website

• Đưa vào hoạt động

• Duy trì thông tin, bảo trì website

Xác định yêu cầu của

website

• Mục tiêu, yêu cầu của website

• Đối tượng mà website phục vụ

• Chủ đề của website

Mục tiêu yêu cầu của

website

• Đề ra mục tiêu khái quát, ngắn gọn,

rõ ràng của website cần thiết kế

• Là công cụ để đánh giá sự thành bại của website

• Mục tiêu phải dài hạn, bao trùm toàn

bộ kế hoạch phát triển

Thiết kế web tốt = thích hợp cho tất cả các loại độc giả có trình độ và nhu cầu

khác nhau

Chủ đề website– Diễn đàn thảo

luận

Chủ đề website - Tin tức

online

Chủ đề website – Mua bán trực

tuyến

Chủ đề website – Đào tạo trực

tuyến

Các bước thiết lập Website

• Xác định yêu cầu của website

• Mua tên miền

• Thuê chỗ hosting

• Thiết kế website

• Đưa vào hoạt động

• Duy trì thông tin, bảo trì website

Mua tên miền

• Tên miền = tên website

– Tên ngắn

– Gợi nhớ

– Dễ đọc

– Không gây nhầm lẫn

– Thể hiện được tên công ty hoặc nhãn

hiệu của công ty

thegioididong.com

Mua tên miền (2)

Mua tên miền (3)

Mua tên miền (4) –

www.pavietnam.vn

Các bước thiết lập Website

• Xác định yêu cầu của website

• Mua tên miền

• Thuê chỗ hosting

• Thiết kế website

• Đưa vào hoạt động

• Duy trì thông tin, bảo trì website

Các bước thiết lập Website

• Xác định yêu cầu của website

• Mua tên miền

• Thuê chỗ hosting

• Thiết kế website

• Đưa vào hoạt động

• Duy trì thông tin, bảo trì website

Phân loại trang web

• Dựa vào công nghệ phát triển, có 2 loại:

– Web tĩnh:

• Dễ phát triển

• Tương tác với người duyệt web yếu

• Sử dụng ngôn ngữ HTML để thiết kế

• Người làm web tĩnh thường dùng các công

cụ trực quan để tạo ra trang web như

Phân loại trang web (2)

• Web động:

– Khó phát triển hơn

– Tương tác với người duyệt web mạnh

– Sử dụng nhiều ngôn ngữ khác nhau để lập trình

– Thường phải viết nhiều mã lệnh

– Nhận thông tin phản hồi từ người dùng

Các bước cơ bản phát triển

website

• Cũng giống như phân tích và thiết kế

hệ thống thông tin, các bước cơ bản cho việc phát triển một website bao gồm:

– Đặc tả

– Phân tích

– Thiết kế

Các bước cơ bản phát triển website

Các bước cơ bản phát triển

website (3)

• Thiết kế

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

– Giao diện

– Web tĩnh hay web động

– Thiết kế cơ sở dữ liệu CSDL?

– Nội dung từng trang

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

• Xây dựng

Các bước cơ bản phát triển website

(4)

• Kiểm thử

– Kiểm tra trên nhiều trình duyệt

– Kiểm tra trên nhiều cấu hình mạng

– Kiểm tra tốc độ

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

– Kiểm tra bảo mật

– ……

Thiết kế giao diện website

Header

Menu Content

Logo

Xác định kiểu chữ, màu sắc

• Font chữ sẽ phụ thuộc vào:

– Đặt điểm thông tin

Cấu trúc website (sitemap)

Cấu trúc website (2)

• Dùng để tổ chức các khối thông tin

phức hợp

• Là hệ thống được dùng thông dụng nhất

• Gần với mô hình tổ chức thế giới thực

• Dễ hình dung tổ chức website

 Cái nhìn tổng quan từ trang chủ

Thiết kế giao diện website

• Hướng đến người sử dụng

• Có định hướng rõ ràng

• Không có trang cuối cùng (dead-end)

• Tính ổn định của các trang Web

• Phản hồi và đối thoại

• Tính tương thích trên các trình duyệt khác nhau (thay thế)

– Có thể tiếp tục đi đâu?

• Các biểu tượng, hướng dẫn nên nhất quán, dễ hiểu

Không có trang cuối

• Mỗi trang có ít nhất một liên kết

Luôn tạo cho người dùng có khả năng quay lại trang chủ hoặc những trang chủ chốt của website

• Không nên có trang “dead – end”,

nghĩa là trang không có khả năng đi đến các trang khác

Tính ổn định

• Ổn định về cấu trúc và nội dung

• Về cấu trúc: các thành phần được đặt đúng chỗ

• Nội dung:

– Các mối liên kết luôn bảo đảm có đích

đến

– Nội dung phải được cập nhật cho phù

hợp với nội dung và ngữ cảnh

Phản hồi và đối thoại

• Cho phép độc giả đóng góp ý kiến và phản hồi đến độc giả một cách

Các bước thiết lập Website

• Xác định yêu cầu của website

• Mua tên miền

• Thuê chỗ hosting

• Thiết kế website

• Đưa vào hoạt động

• Duy trì thông tin, bảo trì website

Quản lý thông tin

• Website luôn phải được cập nhật

thông tin để độc giả luôn cảm nhận được cái mới

• Nếu thông tin nào mới được cập nhật nên có ký hiệu cho độc giả biết

• Ghi thời gian cập nhật

• Số người truy cập website

• Nếu website phức tạp nên có trang

Bài 3: Ngôn ngữ HTML

Mục tiêu

• Hiểu khái niệm về HTML

• Nắm được cách sử dụng và gắn kết

các thẻ (tags) HTML để xây dựng một trang web tĩnh

• Biết cách bố trí, sắp xếp hợp lý giữa các đối tượng trên trang web

Giới thiệu về HTML

• HTML = HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản – Ngôn ngữ cơ bản nhất để xây dựng

các trang web

• HTML Do Tim Berner Lee phát minh

và được W3C (World Wide Web

Consortium) đưa thành chuẩn năm

1994

• Phiên bản chính thức mới nhất: HTML 4.01

Giới thiệu về HTML

• HTML sử dụng các tập ký hiệu đánh

dấu thường được là các thẻ (tags) để

định dạng cách hiển thị dữ liệu.

• Các trình duyệt thường không báo lỗi

cú pháp cho ngôn ngữ HTML Nếu

viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định

– Microsoft Expression Web

– Notepad, Notepad ++

– Microsoft FrontPage

– Macromedia Dreamweaver

– …

Giới thiệu về HTML

• Lưu lại với tên tập tin:

vidu1.html hoặc vidu1.htm

• Mở lại bằng trình duyệt web hay

double click vào tập tin đã lưu

Giới thiệu về HTML – Ví dụ

• Ví dụ trên cho thấy, cùng một dữ liệu

là dòng văn bản “This is webpage”, nhưng khi ta sử dụng định dạng của thẻ <b> ở dòng thứ 2, kết quả hiển thị sẽ khác

Mã HTML Hiển thị trên trình duyệt

This is webpage

<b> This is webpage </b> This is webpageThis is webpage

• Thẻ mở và thẻ đóng đều được đặt trong

dấu: < thẻ mở > dữ liệu </thẻ đóng >

lớp K08406

Xin chào tất cả các bạn lớp K08406

Cấu trúc của 1 tài liệu HTML

• DOCTYPE

– Khai báo đầu tài liệu

– Chỉ dẫn biết phiên bản HTML được sử

dụng

– Khai báo (HTML5):

• <!DOCTYPE html>

Cấu trúc của 1 tài liệu HTML

• Một số cách khai báo DOCTYPE

– HTML 4.01 Strict

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

– HTML 4.01 Transitional

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Cấu trúc của 1 tài liệu HTML

Cấu trúc của 1 tài liệu HTML

Cấu trúc của 1 tài liệu HTML

Cấu trúc của 1 tài liệu HTML –

Tag

• Một thẻ (tag) thường có 3 phần:

– Tên của thẻ: dùng để nhận dạng chức

năng của thẻ

– Thuộc tính của thẻ: dùng để nhận biết

dữ liệu được hiển thị như thế nào.

– Giá trị của thuộc tính thẻ

Cấu trúc của 1 tài liệu HTML – Tag

• Khai báo thẻ

– < ten_the tên_TT1 =“ giá_trị1 ”

tên_TT2 =“ giá_trị2 ” >Noi

dung</ ten_the >

• Chú ý:

– Có thể thay đổi thứ tự, số lượng các

thuộc tính mà không gây ra lỗi cú pháp – Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau Chỉ giống nhau ở

các thẻ, thuộc tính cơ bản.

Cấu trúc của 1 tài liệu HTML –

• < meta charset =“UTF-8”>

• < meta http-equiv ="refresh" content ="30">

• < meta name ="viewport"

content ="width=device-width,

user-scalable=no">

Soạn thảo văn bản trong HTML

• Văn bản được soạn thảo như bình thường

• Dấu nhỏ hơn (<) và lớn hơn (>): &lt; &gt;

• Dấu ngoặc kép (“): &quot;

• Ký hiệu : &copy;

• …

• Ghi chú trong HTML:

– <! Ghi chú >

đề mục Kích thước của

ký tự nhỏ dần từ 1 đến 6 Sau mỗi thẻ, văn bản tự động xuống dòng

Thuộc tính:

align=“cách căn chỉnh

lề”: left, right, center, justify

Các tags trong nội dung trang

Thuộc tính:

align=“cách căn chỉnh

lề”: left, right, center, justify

Các tags trong nội dung trang

<nav> </nav> *HTML5: Khai báo một nhóm

các liên kết điều hướng

*HTML5: IE8 trở về trước không hỗ trợ

Các tags định dạng ký tự

• Chọn phông chữ và định dạng chữ:

Thẻ mở Thẻ đóng Mục đích

<b> </b> In đậm

<i> </i> In nghiêng

<u> </u> Gạch dưới

Các tags định dạng ký tự

• Chọn phông chữ và định dạng chữ:

• Cú pháp như sau:

– <font face = ??? size = ??? color = ??? … </font>

– vd: <font face = “arial” size = “4pt” color = “red”

</font>

Thẻ mở Thẻ đóng Mục đích

<font> </font> Định dạng kích thước,

màu sắc, kiểu chữ,….

Ví dụ 1:

Ví dụ 1: hiển thị trên trình

duyệt

• src: qui định tên tập tin ảnh

• height: chiều cao của ảnh

• width: chiều rộng của ảnh

• alt: qui định một chuổi ký tự thay thế cho

ảnh trong trường hợp ảnh không hiển thị ra

• align: canh chỉnh left, right, center

• title: tiêu đề hình ảnh (hiển thị khi đưa

chuột vào)

Ví dụ 2:

Ví dụ 2: hiển thị trên trình

duyệt

• Giá trị màu #RRGGBB

– RR: Màu đỏ

– GG: Màu xanh lá cây

– BB: Màu xanh nước biển

• Giá trị màu trong hệ thập lục phân

YELLOW LIGHTYELLOW WHITE

BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE AQUAMARINE

Màu sắc và bố cục nền của trang

http://www.w3schools.com/tags/ref_colornames.asp

Màu sắc và bố cục nền của

trang

• Màu nền, màu chữ được đặt tương

ứng nhờ vào các biến thuộc tính

bgcolor, text (Xem ví dụ 2)

• Ngoài ra ta có thể đặt hình nền cho

trang nhờ vào biến thuộc tính

background

– Lưu ý: chép ảnh cần dùng làm hình nền