Giáo trình thiết kế website (nghề thiết kế đồ hoạ cao đẳng)

TUYÊN BỐ BẢN QUYỀNTài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phépdùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.Mọi mục đích kh

UỶ BAN NHÂN DÂN TỈNH ĐỒNG THÁP TRƯỜNG CAO ĐẲNG NGHỀ ĐỒNG THÁP

GIÁO TRÌNH

(Ban hành kèm theo Quyết định Số: /QĐ-CĐCĐ-ĐT ngày tháng năm 2017

của Hiệu trưởng Trường Cao đẳng nghề Đồng Tháp)

Đồng Tháp, năm 2017

TUYÊN BỐ BẢN QUYỀNTài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phépdùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.

Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếulành mạnh sẽ bị nghiêm cấm

Bài 1: Tổng quan về WWW – Ngôn ngữ HTML

**)0(**

1 Lịch sử về WWW

World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một khônggian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nốivới mạng Internet Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chínhthuật ngữ Internet Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet,chẳng hạn như dịch vụ thư điện tử Web được phát minh và đưa vào sử dụng vào khoảngnăm 1990, 1991 bởi viện sĩViện Hàn lâm AnhTim Berners-Lee và Robert Cailliau (Bỉ) tạiCERN, Geneva, Switzerland

Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản(hypertext), đặt tại các máy tính trong mạng Internet Người dùng phải sử dụng mộtchương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản Chươngtrình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử dụng yêu cầu(thông tin trong ô địa chỉ được gọi là URL (Uniform Resource Locator)), rồi sau đóchương trình sẽ tự động gửi thông tin đến máy chủ chứa trang web (web server) và hiểnthị trên trình duyệt của người xem Người dùng có thể theo các liên kết siêu văn bản(hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồitheo máy chủ trong một quá trình tương tác Hoạt động truy tìm theo các siêu liên kếtthường được gọi là duyệt Web

2 Nhập môn Ngôn ngữ HTML:

2.1 Giới thiệu ngôn ngữ HTML:

Sau những lóng ngóng với vài trang Web trong cuộc du lịch Internet, có thể bạnnghĩ rằng phải có gói phần mềm tinh vi để thu được tất cả những hiệu ứng trang trí đầyquyến rũ này Mặc dù có một số công cụ dành cho những người say mê HTML thực sự,nhưng bạn có thể dùng một trình soạn thảo văn bản bất kỳ như Notepad của Windows đểtạo ra những trang Web hấp dẫn

Sự thật là hầu hết các trang đều không có gì khác ngoài văn bản được gia cố thêmbằng một phần tử HTML xếp đặt đúng quy cách Để hiểu được cách hoạt động của chúng,bạn phải xem xét từng từ trong cụm từ Ngôn ngữ đánh dấu siêu văn bản và xem chúng có

ý nghĩa gì:

Siêu văn bản (HyperText) Như bạn đã biết, liên kết siêu văn bản là một từ hay mộtcâu trong trang Web dùng để chỉ đến trang Web khác Khi nhấn chuột lên một trong cácliên kết này, trình duyệt của bạn (như Netscape Navigator hoặc Internet Explorer) sẽ đưabạn tức khắc đến trang Web kia mà không cần hỏi han gì Vì những liên kết siêu văn bảnnày thật sự là tính năng đặc trưng của World Wide Web, các trang Web thường được biếtnhư là những tài liệu siêu văn bản Cho nên HTML có từ siêu văn bản trong tên của nó, vìbạn dùng nó để tạo nên các tài liệu siêu văn bản này

Đánh dấu (Markup) Có từ điển định nghĩa markup là các chỉ dẫn chi tiết về kiểudáng được ghi trên bản viết tay để xếp chữ in Trong lĩnh vực này, chúng ta có thể viết lại

định nghĩa như sau: các lệnh chi tiết về kiểu dáng được đánh vào tài liệu văn bản để đưalên WWW Đó là HTML theo một định nghĩa tóm tắt Nó gồm một vài mã đơn giản đểtạo ra văn bản nét đậm hoặc nghiêng và các bảng liệt kê dấu chấm đầu dòng, các hình đồhoạ chèn thêm vào, cùng với sự xác định các mối liên kết siêu văn bản Bạn đánh các mãnày vào những chỗ thích hợp trong tài liệu văn bản gốc, trình duyệt Web sẽ thực hiện việcdịch chúng.

Ngôn ngữ (Language) Đây có thể là từ dễ nhầm lẫn nhất trong cụm từ này Nhiềungười diễn giải HTML nhƣ là một ngôn ngữ lập trình HTML không có gì liên quan đếnviệc lập trình máy tính cả HTML gọi là ngôn ngữ chỉ vì nó gồm các tập hợp nhỏ cácnhóm hai đến ba chữ và các từ mà bạn dùng để quy định kiểu dáng như nét đậm hoặcnghiêng

2.2 Cú pháp cơ bản một thẻ trong ngôn ngữ HTML

Bây giờ chúng ta cùng đi sâu vào các khái niệm đằng sau HTML, và xem xét một

số ví dụ mẫu Để bắt đầu, tất cả công việc phải làm là khởi động trình soạn thảo văn bảnyêu thích của bạn và bảo đảm đã có một tài liệu rỗng được hiển thị

Trình xử lý văn bản của bạn phải có khả năng lưu tập tin ở dạng văn bản Notepadlàm việc này một cách tự động; còn các trình xử lý văn bản khác, như Word vàWordPerfect, thì có tuỳ chọn văn bản trong hộp thoại Save As Hãy tham khảo tài liệuthuyết minh của trình xử lý văn bản Đồng thời bạn phải lưu các trang với đuôi mở rộngHTM hoặc HTML, như trong Homepage.htm chẳng hạn

Tạo lập trang Web là một vấn đề đơn giản, chỉ cần đánh văn bản của bạn vào rồichèn thêm các ký hiệu đánh dấu, gọi là thẻ có dạng như sau:

<TAG>văn bản chịu tác động</TAG>

Phần thẻ là một mã (thường chỉ có một hoặc hai chữ) xác định hiệu ứng mà bạnyêu cầu Ví dụ, cho thẻ nét đậm là <B> Cho nên nếu bạn muốn câu ACME CoyoteSuppplies xuất hiện theo kiểu chữ đậm (bold), bạn phải đưa dòng sau đây vào tài liệu củamình:

<B>ACME Coyote Supplies</B>

Thẻ đầu tiên báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theobằng phông chữ đậm, liên tục cho đến thẻ <B> Dấu gạch chéo (/) xác định đó là thẻ kếtthúc, và báo cho trình duyệt ngưng hiệu ứng đó HTML có nhiều thẻ dùng cho nhiều hiệuứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn bản (paragraph), tiêu đề, tên trang,liệt kê, liên kết, và nhiều thứ nữa

2.3 Cấu trúc tổng thể một trang HTML

Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa hoặc rất cần thiết,nhưng tất cả đều có cùng một cấu trúc cơ sở, nên đa số các trình duyệt đang chạy trên hầuhết các kiểu máy tính đều có thể hiển thị thành công hầu hết các trang Web

Các tập tin HTML luôn bắt đầu bằng thẻ <HTML> Thẻ này không làm gì khácngoài nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu có chứa các

mã HTML Tương tự, dòng cuối trong tài liệu của bạn luôn luôn là thẻ </HTML>, tươngđương như Hết

Chi tiết kế tiếp trong catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu

và thân Phần đầu giống như lời giới thiệu cho trang Các trình duyệt Web dùng phần đầunày để thu nhặt các loại thông tin khác nhau về trang Để xác định phần đầu, bạn đưa

thêm thẻ <HEAD> và thẻ </HEAD> vào ngay sau thẻ <HTML> Mặc dù bạn có thể đặtmột số chi tiết bên trong phạm vi phần đầu này, nhưng phổ biến nhất là tên trang Nếu có

ai đó xem trang này trong browser, thì tên trang sẽ xuất hiện trong dải tên của cửa sổbrowser Để xác định tên trang, bạn đặt đoạn văn bản tên đó giữa các thẻ <TITLE> và

</TITLE> Ví dụ nếu bạn muốn tên trang của mình là My Home Sweet Home Page, bạnđưa nó vào như sau:

<TITLE>My Home Sweet Home Page</TITLE>

Phần thân là nơi bạn nhập vào các văn bản sẽ xuất hiện trên trang Web lẫn các thẻkhác quy định dáng vẻ của trang Để xác định phần thân, bạn đặt các thẻ <BODY> và

</BODY> sau phần đầu (dưới </HEAD>)

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

Như đã trình bày ở trên, bạn bổ sung văn bản của trang Web bằng cách đánh

nó vào giữa các thẻ <BODY> và </BODY> Tuy nhiên, cần nhớ rằng không thể bắt đầu một đoạn văn (chương, mục) mới mà chỉ ấn phím Enter Bạn phải dùng thẻ

để báo cho browser biết rằng bạn muốn chuyển vào một đoạn văn mới:

Giống như các chương sách, nội dung của nhiều trang Web được chia thành các đoạn Đểgiúp phân cách các đoạn này và làm cho dễ đọc hơn, bạn có thể sử dụng tiêu đề Lýtưởng nhất, các tiêu đề này phải có tác dụng như là những đề mục nhỏ, thể hiện ý tưởngtóm tắt về đoạn văn đó Để làm cho các đề mục này nổi bật, HTML có 6 loại thẻ tiêu đề

để hiển thị văn bản theo phông chữ đậm với nhiều cỡ chữ khác nhau, từ ứng với phônglớn nhất đến ứng với phông nhỏ nhất

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

4.1 Bảng biểu

Bảng trong HTML được xác định bằng thẻ <table>

Một bảng được chia ra nhiều dòng ( với thẻ <tr> ) mỗi dòng được chia ra nhiều cột( với thẻ <td> ) td viết tắt của "table data" , và chứa nội dung của một dữ liệu Một thẻ

<td> có thể chứa text, liên kết,ảnh , danh sách , form , bảng khác

*Thuộc tính border

Nếu bạn không sử dụng thuộc tính border , thì bảng hiển thị sẽ không có viền Thỉnhthoảng điều này rất hữu ích nhưng hầu như chúng ta muốn bảng có viền

Để hiển thị một bảng có viền ta thêm thuộc tính border

Giá trị của thuộc tính được đo bằng pixels là độ dày của viền bạn thử giá trị của nó là10,20,50 để thấy sự khác biệt

*Tiêu đề của bảng

Thông tin tiêu đề trong một bảng được xác định bằng thẻ <th>

Trình duyệt tự động hiển thị text trong phần tử <th> có in đậm

4.2 Trang khung frame

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ànhnhiề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 d 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ênphải hiển thị tài liệu tương ứng

Dòng 1, Cột 1 Dòng 1, Cột 2

Dòng 2, Cột 1 Dòng 2, Cột 2

5 Multimedia trên trang Web

5.1 Nghe nhạc, âm thanh : <audio>

Trong những tình huống đặc biệt, muốn làm cho trang web của mình sinh động hơn, ví dụnhư ngoài việc cung cấp thông tin ở dạng ngôn ngữ, website của còn có cả âm thanh nữa

Ở trường hợp này, có thể ứng dụng âm thanh cho nhiều mục đích khác nhau:

+ Giải trí: nghe nhạc, đọc truyện,…

+ Học tập: hướng dẫn bằng audio, luyện kỹ năng listening trong tiếng anh,…

Bài 2: Thiết Kế Web Tĩnh

1 Tổng quan:

=**=

Website tĩnh được thiết kế bằng kỹ thuật HTML (Hypertext Mark-up Language) Chỉ đápứng được việc giới thiệu thông tin cho người dùng xem, cao nhất là sử dụng một Formtrực tuyến (Online Form) để thu nhận ý kiến của ngườii xem và gửi về e-mail định danhtrước

Website tĩnh có thể được trang bị các kỹ thuật như Java Script, Flash Macromedia hayAnimation Gif, giúp cho giao diện của các trang web thêm sống động và hấp dẫn.Website động (Dynamic Web Pages) thường được thiết kế bằng kỹ thuật ASP (ActiveServer Pages) chạy Windows hay PHP (PHP Hypertext Preprocessor) với Linux) Động ởđây xin đừng hiểu là hình ảnh sống động hoặc có thể thay đổi hình ảnh như một đoạn hoạthình (animation) Ở đây động là có thể giúp người xem tương tác với website Websiteđộng cần phải có cơ sở dữ liệu và tùy theo mục đích của website, nó có thể có các thành

3 Shopping Cart: Thành phần giúp cho việc mua bán trên mạng (online trading) đượcthực hiện thông qua giả định việc chọn và bỏ món hàng đã chọn vào giỏ mua hàng Cácthông số liên quan đến món hàng sẽ được cập nhật vào tài khoản của người Mua, giúp choviệc xác định công nợ và thanh toán Tham khảo www.vnplas.com

4 Online Payment: Thành phần giúp cho việc buôn bán trên mạng được khả thi: Tiềnđược trao cho Bên Bán và hàng sẽ được chuyển cho Bên Mua Tham khảowww.vnplas.com

5 Forum: Diễn đàn trực tuyến: Một khu vực hạn chế giúp cho các đối tượng dùng siteliên hệ trực tiếp với nhau trong thời gian thực (Real Time) Khác với liên lạc bằng e-mail

có một khoảng thời gian chậm trễ (Delay) do người gửi mail và người nhận mail khôngtrực tuyến cùng thời điểm Tham khảo http://www.vnplas.com/forum

Do tính năng vượt trội so với website tĩnh, website động có thể dùng vào các mụcđích:

1 Kinh doanh Thẻ Hội Viên (Membership): Chủ website có thể thu phí Hội Viên vàcấp cho Hội viên một account để truy cập vào khu vực hạn chế Chỉ có Hội Viên mớiđựơc vào khu vực này và sử dụng những thông tin trong đó Tham khảowww.camnangthuky.com

2 Thương mại Điện Tử (E-Commerce): hay còn gọi là Bán hàng qua mạng Sông Mây

có thể cung cấp các giải pháp khác nhau tùy thuộc vào đối tượng người mua bằng các

hình thức: C.O.D, thẻ tín dụng và VASC Payment.

3 Quản lý từ xa (Remote Management): Bằng việc phân quyền đối với các khu vựchạn chế cho từng người dùng, website có thể trở thành một công cụ quản lý doanh nghiệp

lý tưởng, đặc biệt đối với các công ty đa quốc gia có các chi nhánh và văn phòng đại diện

ở rải rác khắp nơi trên thế giới, hoặc đơn giản hơn, cho các công ty có nhiều chi nhánh,

4 Công cụ cho nguời quản lý web: với website động, việc cập nhật thông tin chowebsite không còn là vấn đề của các nhà chuyên nghiệp Người quản lý website (SiteAdmin) có thể tự cập nhật website mà không cần có những kiến thức chuyên sâu về thiết

kế web Việc dễ dàng này giúp cho website luôn luôn được chăm sóc và trở nên hiệu quảhơn hẳn so với webiste tĩnh, vốn đòi hỏi người quản lý site có một trình độ kỹ thuật nàođó

5 Diễn đàn trực tuyến: với web động, diễn đàn tạo cho website một dáng vẻ chuyênnghiệp và tạo cho khách hàng niềm tin tưởng vào công ty của Quý Vị Tuy nhiên việcquản lý diễn đàn phải được coi trọng, tránh bị lạm dụng vào những mục đích phi pháp

2 Trang và văn bản trên trang (HTML):

2.1 Cấu trúc trang web tĩnh:

b/ Thẻ <HEAD>: Phần đầu của trang web

c/ Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong <HEADER>

d/ Thẻ <BODY>: Chứa nội dung trang web

<BODY [BACKGROUND=url BGCOLOR=color …]>

Nội dung trang web

<I>…</I> Dạng chữ nghiêng <I>Hello world !</I>

<U>…</U> Dạng chữ gạch chân <U>Hello world !</U>

<S>…</S> Dạng chữ gạch giữa <S>Hello world!</S>

<Font color=RGB Định dạng font chữ: <Font color=“Blue”face=tên font Size=“N”> Color: chỉ định màu face=“Arial”>Hello world

</Font> Size: kích thước

<Sup>…</Sup> Tạo chỉ số trên X<Sup>2</Sup>  X2

<Sub>…</Sub> Tạo chỉ số dưới H<Sub>2</Sub>O  H2O

<p align=“Left”>

Hello world !

</p>

<HR Align=“…” Color = Tạo đường gạch ngang <HR Color=“Red”

SIZE = “…” Size: độ dày (tính bằng pixel)

WIDTH = “…” /> Width: độ dài (tính bằng pixel)

<h1>, <h2>, <h3>, <h4>, Tiêu đề (Heading)

<h5>, <h6>

<hr> Đường kẻ ngang(align, width,

size)

<ol><li type=”a,B,1,I ”> Danh sách có thứ tự <ol><li> mot </li>

<li> hai </li> </ol>

<ul type=”disc”><li> mot

</li><li>hai </li> </ul>

<dl>

<dt> mot </dt>

<ul type=”disc, circle,

square”><li > Danh sách không có thứ tự

<dl>

<dt> Danh sách tự định nghĩa

<dd> <dd> hai </dd> </dl>

g/ Các thuộc tính quan trọng của thẻ <P></P>(đoạn):

 Align:

 Left: Canh trái

 Center: Canh giữa

 Right: Canh phải

 justify: Canh đều

 Style:

 Margin-top: Canh lề trên của đoạn

 Margin-left: Canh lề trái của đoạn

 Margin-right: Canh lề phải của đoạn

 Margin-bottom: Canh lề dưới của đoạn

 Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr” hoặc từ phải sangtrái “rtl”)

 Scr: là đường dẫn của file ảnh

 Height: Chỉ định chiều cao của ảnh Nếu không chỉ định thì sẽ lấy chiều cao hiệntại của ảnh

 Width: chỉ định độ rộng của ảnh Nếu không chỉ định thì sẽ lấy chiều rộng hiện tạicủa ảnh

 Border: chỉ định độ dày của khung bao quanh ảnh

 Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh

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

3.1 Bảng biểu:

*Tạo bảng:

<TABLE align = “…” background = “url” bgcolor = “RGB” border =

“…” cellpadding = “…” width = “…” height=“…" >

Trong đó:

 Align: lề của bảng: “left” hoặc “right”

 Background: chỉ định file ảnh nền của bảng

 Bgcolor: màu nền của bảng

 Border: đường viền bảng (tính bằng pixel)

 Cellpadding: khoảng cách từ các cạnh của ô tới nội dung của ô (tính bằng pixel)

 Width, Height : độ rộng, cao của bảng (tính theo % hoặc tính bằng pixel)

* Thêm dòng vào bảng:

<TR align = “…” background = “url” bgcolor = “RGB” valign= “…” > … </TR>Trong đó:

Align: lề của các ô trong dòng: “left”, “right” hoặc “center”

Background: đường dẫn file ảnh nền của dòng

Bgcolor: màu nền của dòng

Valign: lề theo chiều dọc của văn bản trong các ô trên dòng: “top”, “bottom”, “middle”.Chú ý:

Thẻ <Tr> phải nằm trong thẻ <Table></Table>

* Thêm ô vào bảng:

<TD align=“…” background = “url“ bgcolor = “RGB” rowspan = “N” colspan =

“M” valign = “…” > … </TD>

Trong đó:

Align: lề của ô: “left”, “right” hoặc “center”

Background: đường dẫn file ảnh nền của dòng

Bgcolor: màu nền của ô

Valign: lề theo chiều dọc của văn bản trong các ô trên dòng: “top”, “bottom”, “middle”.Rowspan: số ô trải dài trên N dòng

Colspan: Số ô trải rộng trên M cột

Trung 123 456 78 123 456 77Hai ô được gộp làm một ô theo cột

3.2 Trang khung (Frame)

3.2.1 Frame

Một tài liệu HTML chuẩn có thẻ <HEAD> và thẻ <BODY> Một tài liệu HTML sử dụngkhung thì có thẻ <HEAD> và thẻ <FRAMESET> Thẻ <FRAMESET> xác định cáchtrình bày trong cửa sổ người dùng Ta không thể sử dụng thẻ <BODY> và thẻ

<FRAMESET> cùng với nhau Trình duyệt chỉ nhận thẻ đầu tiên xuất hiện trong tài liệu

và bỏ qua thẻ sau Nghĩa là, nếu bạn sử dụng thẻ <BODY>, thì thẻ <FRAMESET> sau đó

sẽ bị bỏ qua và ngược lại

hoặc cols = “n1, n2, … nk”: Quy định có k dòng (hoặc cột), độ rộng dòng(cột) thứ i là ni nilà số, có thể thay bằng *: phần còn lại

– frameborder = yes hoặc no

– framespacing = “n”: Khoảng cách giữa 2 khung

 Tạo 1 khung có nội dung là 1 trang web nào đó: <frame>

– Thuộc tính:

• src=“Địa chỉ chứa nội dung”

• name=“tên khung”

• noresize: Không được thay đổi kích thước

• Scrolling: Thuộc tính này xác định kiểu cuộn cho cửa sổ khung

• Border: Độ dày của đường viền khung

• Frameborder: Xác định viền của khung (ẩn/hiện đường viền khung)

• Marginwidth: Xác định khoảng cách giữa nội dung trong khung với

lề trái và lề phải của khung Giá trị phải lớn hơn một

• Marginheight: Xác định khoảng cách giữa nội dung trong khung với

lề trên và lề dưới của khung Giá trị phải lớn hơn một

4 Multimedia trên trang Web

4.1 Âm thanh nền: <BGSOUND scr = “…” loop = “…”>

– Thuộc tính:

• src=“địa chỉ file âm thanh” (*.mid, *.wav, …)

• loop= số lần lặp lại bài nhạc Nếu loop= -1 hoặc “infinite” thì sẽ lặpđến khi chuyển sang trang mới web

4.2 Video

<html><body>

<video width="320" height="240" controls>

<source src="ten file.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg"> </video>

</body></html>

4.3 audio

<EMBED src = “…” autostart = “…” loop = “N” />

Các thuộc tính:

 Scr: là đường dẫn của file bài hát/phim

 Autostart: nếu là true tự động thực hiện bài hát

 Loop: số lần lặp lại bài nhạc Nếu loop = true hoặc “infinite” thì sẽ lặp đến khichuyển sang trang mới web

Hay

<html><body>

<audio controlsmuted hay autoplay hay loop hay preload="none" >

<source src="horse.ogg" type="audio/ogg">

<source src="ten file.mp3" type="audio/mpeg">

<html><body><embed src="ten file.swf"></body></html>

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

<MARQUEE direction = “…” behavior =“…” height = “…” width

= “…” scrollamount =“N” scrolldelay = “M”>Text </MARQUEE>Trong đó:

 Direction: hướng chuyển động của dòng chữ “Text” ( right, up, down)

 Behavior: hình thức chuyển động: scroll, alternate, slide

 Height, Width: chiều cao và chiều rộng

 Scrollamount, Scrolldelay: chỉ định tốc chuyền động

Ví dụ 7: <marquee direction=”up”> chữ chạy </marquee >

 Các điều khiển từ số 2 đến số 5 được định nghĩa nhờ thẻ <input> và thuộc tínhtype sẽ xác định là điều khiển nào sẽ được tạo ra



6.1 Form

 Sử dụng để chứa mọi đối tượng khác

 Không nhìn thấy khi trang web được hiển thị

 Quy định một số thuộc tính quan trọng như method, action

 Thẻ tạo form:

<form>…</form>

 Các thuộc tính:

– name=“tên_form”: Không quan trọng lắm

– action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu nằmtrong cùng 1 web

– method=“phương thức gửi dữ liệu” Chỉ có 2 giá trị:

• GET (mặc định)

• POST

6.2 Hộp nhập văn bản 1 dòng (Oneline Textbox)

 Sử dụng để nhập các văn bản ngắn (trên 1 dòng) hoặc mật khẩu

– checked: nếu có thì nút này mặc định được chọn

6.4 Option Button (Radio Button)

 Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra

 Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này

 Sử dụng để NSD ra lệnh thực hiện công việc

 Trên web có 3 loại nút:

– submit: Tự động ra lệnh gửi dữ liệu

– reset: đưa mọi dữ liệu về trạng thái mặc định

– normal: người lập trình tự xử lý

value=“tiêu đề nút”

6.6 Combo Box (Drop-down menu)

 Bao gồm một danh sách có nhiều phần tử Tại một thời điểm chỉ có 1 phần tử đượcchọn

 NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tênbên phải hộp danh sách

– multiple: cho phép lựa chọn nhiều phần tử cùng lúc

 Thẻ <option>…</option> tương tự của combo box

6.8 Hộp nhập văn bản nhiều dòng (TextArea)

 Cho phép nhập văn bản dài trên nhiều dòng

– cols=“số cột”

rows tính theo số dòng văn bản, cols tính theo số ký tự chuẩn trên dòng.

7 Liên kết

7.1 Tạo liên kết đến trang web khác:

<A href = “url” target = “…”>Text </A>

Trong đó:

Url: là đường dẫn/địa chỉ của của trang web chuyển đến

Target có thể là các giá trị sau:

“_new” hoặc “_blank”: trình duyệt sẽ phải mở trang web đích trong một cửa sổ mới

"_top", "_parent", "_self“: dùng cho những trang web có chứa frame

Text: là đoạn văn bản hiển thị để người dùng click vào

7.2 Tạo liên kết đến E-mail:

<A href = "mailto:Địa chỉ E-mail“ >Text</A>

7.3 Tạo liên kết bên trong (liên kết nội) của trang web:

Là liên kết đến từng đoạn văn bản trong trang web

<A href = “#Tên của đoạn”>Text</A>

Trong đó: Chỉ mục/tên của đoạn được tạo như sau:

<A name = “Tên đoạn”>Text</A>

Được đặt ở đầu đoạn

Ví dụ8 : liên kết nội từ a sang b, từ b sang a

Bài 3: Thiết kế web động

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

1.1 IIS và cài đặt IIS

IIS là viết tắt của từ Internet Information Services

Microsoft Internet Information Services (các dịch vụ cung cấp thông tin Internet) là cácdịch vụ dành cho máy chủ chạy trên nền Hệ điều hànhWindow nhằm cung cấp và phântán các thông tin lên mạng, nó bao gồm nhiều dịch vụ khác nhau như Web Server, FTPServer,…

Nó có thể được sử dụng để xuất bản nội dung của các trang Web lênInternet/Intranet bằng việc sử dụng “Phương thức chuyển giao siêu văn bản“ - HypertextTransport Protocol (HTTP)

Như vậy, sau khi bạn thiết kế xong các trang Web của mình, nếu bạn muốn đưachúng lên mạng để mọi người có thể truy cập và xem chúng thì bạn phải nhờ đến một

Nếu không thì trang Web của bạn chỉ có thể được xem trên chính máy của bạn hoặcthông qua việc chia sẻ tệp (file sharing) như các tệp bất kỳ trong mạng nội bộ mà thôi.IIS có thể làm được gì?

Nhiệm vụ của IIS là tiếp nhận yêu cầu của máy trạm và đáp ứng lại yêu cầu đó bằngcách gửi về máy trạm những thông tin mà máy trạm yêu cầu.Bạn có thể sử dụng IIS để: · Xuất bản một Website của bạn trên Internet · Tạo các giaodịch thương mại điện tử trên Internet (hiện các catalog và nhận được các đơn đặt hàng từnguời tiêu dùng) · Chia sẻ file dữ liệu thông qua giao thức FTP · Cho phép người ở xa

có thể truy xuất database của bạn (gọi là Database remote access).Và rất nhiều khả năngkhác …

IIS hoạt động như thế nào?

IIS sử dụng các giao thức mạng phổ biến là HTTP và FTP (File Transfer Protocol)

và một số giao thức khác như SMTP, POP3,… để tiếp nhận yêu cầu và truyền tải thông

Một trong những dịch vụ phổ biến nhất của IIS mà chúng ta quan tâm trong giáo trìnhnày là dịch vụ WWW (World Wide Web), nói tắt là dịch vụ Web.Dịch vụ Web sử dụng giao thức HTTP để tiếp nhận yêu cầu (Requests) của trình duyệtWeb (Web browser) dưới dạng một địa chỉ URL (Uniform Resource Locator) của mộttrang Web và IIS phản hồi lại các yêu cầu bằng cách gửi về cho Web browser nội dungcủa trang Web tương ứng

Ở phần tiếp sẽ là hướng dẫn cách cách cài đặt IIS trên Windows XP

Hiện có nhiều bản IIS, xong nói chung cách cài đặt khá giống nhau, tuy nhiên việccập nhật bản mới nhất để có những tính năng mới và an toàn hơn

Ok ! Bắt đầu tiến hành thôi.

Chuẩn bị:

1 đĩa CD Win XP (đĩa cài win đó) Hoặc nếu ko có CD thì có thể download IIS trêntrang chủ Microsoft là http://www.microsoft.com/ hoặc tìm trên google với từ khóa

“download IIS”

Kiểm tra xem máy đã cài IIS chưa bằng cách vào Control Pannel xem hình

Nó sẽ hiện ra cửa sổ Control Panel -> Administrative Tools và tìm xem mụcInternetServices Managercó tồn tại hay không

Nếu máy của bạn đã cài đặt IIS thì trong này bạn sẽ thấy xuất hiện muc IIS

Hoặc bạn có thể kiểm tra cách khác bằng cách

Và nhấn NEXT để tiền hành cài đặt.

Mở IIS ra, nếu thấy ra màn hình như này nghĩa là IIS đã cài và chạy ngon lành

Nếu chưa thành công thì tiến hành gỡ bỏ IIS và tiến hành cài đặt lại

Có thể trong quá trình cài đặt bạn Remove ra nhưng IIS vẫn còn chạy vì thế trước

- Vào Start->Programs->Administrative tools->services

- Tìm đến dòng IIS-> click chuột phải chọn chế độ Stop

- Khởi động lại máy

- Cài đặt IIS

Phần tiếp theo sẽ là hướng dẫn Config (cấu hình) IIS

Sau khi đã hoàn thành việc cài đặt IIS, vào Control panel, Administrative tool, khởiđộng Interner Services Manager:

1 Click chuột phải vào tên máy chủ (gốc của cây được đánh dấu bởi dấu hoa thị),chọn New, Website, cửa sổ Website Creation Wizard hiện ra, chọn Next

2 Đánh vào phần mô tả của Website của bạn và chọn Next (Ví dụ: dyndns)

3 Trong trường IP address chọn All Unssigned

4 Trong trường port chọn port 80 hoặc port khác nếu bạn sử dụng port thay thế(hoặc nếu ISP của bạn khóa port 80)

5 Trong trường Header gõ vào tên miền (ví dụ: dyndns.vnnic.net.vn) và chọnNext

6 Chọn vào Browser và trỏ tới thư mục nơi lưu trữ các file của Website cho tênmiền (domain) trên (ví dụ: C:\Document and

Setting\Administrator\Mydocument\Website\Dyndns) Đảm bảo chắc chắn rằng hộpthoại “Allow anonymous access to website” đã được chọn nếu bạn muốn tất cả ngườidùng đều nhìn thấy website của bạn Chọn Next

7 Có thể cấu hình thêm một số tuỳ chọn khác tuỳ theo yêu cầu của bạn:

8 Chọn Finish để kết thúc quá trình thiết lập Website

Bạn có thể lặp lại các bước này để thiết lập các Website khác.Bây giờ tên Website đã xuất hiện trong danh sách server

- Để kiểm tra xem click chuột phải lên tên Website và chọn vào Browse hoặc bật cửa sổInternet Explore (IE) lên và đánh tên miền của bạn vào trường URL (ví dụ:dyndns.vnnic.net.vn)

Bạn có thể lặp lại chu trình trên để thiết lập nhiều Website mà bạn muốn bằng IIS

Nếu bạn không nhìn thấy Website của mình hoặc chỉ nhìn thấy cửa sổ login bạn sẽ phảicấu hình lại cho chính xác quyền truy cập vào Website của mình hoặc file index mà bạn

1 Click chuột phải vào tên Website nằm trong danh sách server mà bạn mới thiết lập vàchọn Property từ menu đó

2 Chọn vào tad Directory Security và chọn vào mục Edit “Anonymous Access …”

3 Đảm bảo chắc chắn rằng Anonymous Access property được chọn và click chuột vào

1 Click chuột phải vào tên Website nằm trong danh sách server của bạn mà bạnmới thiết lập và chọn Property từ menu đó

2 Click vào Document tab

3 Click Add và đánh vào tên file index của bạn rồi ấn OK (ví dụ: Website dyndns ởtrên có file index dạng index.htm)

4 Ấn tiếp OK để kết thúc.

Bây giờ thử mở Browse và gõ vào trường URL tên miền của bạn, nếu cấu hìnhchính xác Website sẽ chạy

Lặp lại chu trình trên để cấu hình cho tất cả các Website sử dụng IIS

1.2 Frame work và cài đặt

.NET Framework là một nền tảng lập trình và cũng là một nền tảng thực thi ứng dụngchủ yếu trên hệ điều hành Microsoft Windows được phát triển bởi Microsoft Các chươngtrình được viết trên nền.NET Framework sẽ được triển khai trong môi trường phần mềm(ngược lại với môi trường phần cứng) được biết đến với tên Common Language Runtime(CLR) Môi trường phần mềm này là một máy ảo trong đó cung cấp các dịch vụ như anninh phần mềm (security), quản lý bộ nhớ (memory management), và các xử lý lỗi ngoại

Phi

ên bản phiên bảnSố hiệu phát hànhNgày Visual Studio Được phát hành kèm theo1.0 1.0.3705.0 2 năm 200213 tháng Studio.NETVisual Media Center EditionsWindows XP Tablet and[1]1.1 73 1.1.4322.5 4 năm 200324 tháng Studio.NET 2003Visual Windows Server 20032.0 42 2.0.50727. 11 năm 20057 tháng 2005Visual Studio Windows Server 2003 R23.0 0 3.0.4506.3 11 năm 20066 tháng Server 2008Windows Vista, Windows3.5 8 3.5.21022. 11 năm 200719 tháng 2008Visual Studio Server 2008 R2Windows 7, Windows4.0 1 4.0.30319. 4 năm 201012 tháng 2010Visual Studio

4.5 4.5.50709 8 năm 201215 tháng 2012Visual Studio Server 2012Windows 8, Windows

1 3 Tổng quan về ASP.net

Giới thiệu về Asp.net

Từ khoảng cuối thập niên 90, ASP (Active Server Page) đã được nhiều lập trình viênlựa chọn để xây dựng và phát triển ứng dụng web động trên máy chủ sử dụng hệ điềuhành Windows ASP đã thể hiện được những ưu điểm của mình với mô hình lập trình thủtục đơn giản, sử dụng hiệu quả các đối tượng COM: ADO (ActiveX Data Object) - xử lý

dữ liệu, FSO (File System Object) - làm việc với hệ thống tập tin…, đồng thời, ASP cũng

hỗ trợ nhiều ngôn ngữ: VBScript, JavaScript Chính những ưu điểm đó, ASP đã được yêuthích trong một thời gian dài

Tuy nhiên, ASP vẫn còn tồn đọng một số khó khăn như Code ASP và HTML lẫn lộn,điều này làm cho quá trình viết code khó khăn, thể hiện và trình bày code không trongsáng, hạn chế khả năng sử dụng lại code Bên cạnh đó, khi triển khai cài đặt, do khôngđược biên dịch trước nên dễ bị mất source code Thêm vào đó, ASP không có hỗ trợcache, không được biên dịch trước nên phần nào hạn chế về mặt tốc độ thực hiện Quátrình xử lý Postback khó khăn, …

Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá mới mẻ với têngọi ban đầu là ASP+, tên chính thức sau này là ASP.Net Với ASP.Net, không nhữngkhông cần đòi hỏi bạn phải biết các tag HTML, thiết kế web, mà nó còn hỗ trợ mạnh lậptrình hướng đối tượng trong quá trình xây dựng và phát triển ứng dụng Web

ASP.Net là kỹ thuật lập trình và phát triển ứng dụng web ở phía Server (Server-side)dựa trên nền tảng của Microsoft Net Framework

Hầu hết, những người mới đến với lập trình web đều bắt đầu tìm hiểu những kỹ thuật

ở phía Client (Client-side) như: HTML, Java Script, CSS (Cascading Style Sheets) KhiWeb browser yêu cầu một trang web (trang web sử dụng kỹ thuật client-side), Web servertìm trang web mà Client yêu cầu, sau đó gởi về cho Client Client nhận kết quả trả về từServer và hiển thị lên màn hình

ASP.Net sử dụng kỹ thuật lập trình ở phía server thì hoàn toàn khác, mã lệnh ở phíaserver (ví dụ: mã lệnh trong trang ASP) sẽ được biên dịch và thi hành tại Web Server Saukhi được Server đọc, biên dịch và thi hành, kết quả tự động được chuyển sangHTML/JavaScript/CSS và trả về cho Client

Tất cả các xử lý lệnh ASP.Net đều được thực hiện tại Server và do đó, gọi là kỹ thuậtlập trình ở phía server

Ưu điểm của Asp.net

- ASP.Net cho phép bạn lựa chọn một trong các ngôn ngữ lập trình mà bạn yêu thích:Visual Basic.Net, J#, C#,…

- Trang ASP.Net được biên dịch trước Thay vì phải đọc và thông dịch mỗi khi trangweb được yêu cầu, ASP.Net biên dịch những trang web động thành những tập tin DLL

mà Server có thể thi hành nhanh chóng và hiệu quả Yếu tố này là một bước nhảy vọtđáng kể so với kỹ thuật thông dịch của ASP

ASP.Net hỗ trợ mạnh mẽ bộ thư viện phong phú và đa dạng của Net Framework, làmviệc với XML, Web Service, truy cập cơ sở dữ liệu qua ADO.Net, …

ASPX và ASP có thể cùng hoạt động trong 1 ứng dụng

ASP.Net sử dụng phong cách lập trình mới: Code behide Tách code riêng, giao diệnriêng -> Dễ đọc, dễ quản lý và bảo trì

Kiến trúc lập trình giống ứng dụng trên Windows

Hỗ trợ quản lý trạng thái của các control

Tự động phát sinh mã HTML cho các Server control tương ứng với từng loại Browser

Hỗ trợ nhiều cơ chế cache

Triển khai cài đặt

Không cần lock, không cần đăng ký DLL

Cho phép nhiều hình thức cấu hình ứng dụng

Hỗ trợ quản lý ứng dụng ở mức toàn cục

Global.aspx có nhiều sự kiện hơn

Quản lý session trên nhiều Server, không cần Cookies

ASP.NET là một mô hình thiết kế website thống nhất bao gồm cách dịch vụ cần thiết

để xây dựng các ứng dụng website doanh nghiệp lớn ASP.NET là một phần của NETFramework

Ở chủ đề này chúng tôi sẽ mô tả các tính năng của ASP.NET và Visual WebDeveloper, môi trường phát triển tạo ra các ứng dụng ASP.NET

Visual Web Developer:

Visual Web Developer là một môi trường phát triển đầy đủ tính năng để tạo ra cácứng dụng website ASP.NET

Các tính năng: bố trí trang web phù hợp với các trang tổng thể và sự xuất hiện trangphù hợp với các chủ đề

Chỉnh sửa mã : trình biên tập cho phép bạn viết mã cho các website động trong VisualBasic hoặc C#

Kiểm tra và gỡ rối : Máy chủ web thử nghiệm và gỡ rối giúp bạn tìm thấy lỗi trongchương trình

Triển khai : Công cụ tự động hóa các nhiệm vụ cho việc triển khai một ứng dụng webđến một máy chủ lưu trữ hoặc nhà cung câp lưu trữ

Các website dự án và ứng dụng với ASP.NET

Sử dụng Visual 2010, bạn có thể tạo ra các dự án khác nhau với ASP.NET, bao gồmcác trang web, các ứng dụng web,các dịch vụ web, và điều khiển máy chủ AJAX

Có một sự khác biệt giữa các dự án website và các dự án ứng dụng website Một sốtính năng chỉ làm việc với các dự án ứng dụng web như công cụ MVC và một số đẻ tựđộng hóa việc triển khai web Các tính năng khác như đồng bộ hóa dữ liệu, làm việc vớitrang web và các dự án ứng dụng web

ASP.NET API Reference

Cung cấp một lượng lớn các thư viện dung cho ASP.NET

Trang web và các điều khiển

Trang ASP.NET và điều khiển là một chương trình chạy trên máy chủ tự động đưa racác trang ASP.NET Các trang ASP.NET có thể được yêu cầu từ bất kỳ trình duyệt nàohoặc các thiết bị của khách hàng Theo quy định bạn có thể sử dụng cùng một website chonhiều trình duyệt.ASP.NET là công cụ thiết kế website hoàn toàn hướng đối tượng Nócũng cho phép đóng gói các chức năng giao diện người dung thông thường dễ sửdụng,kiểm soát để có thể tái sử dụng

Ngoài ra các chủ đề cũng giúp bạn xác định trang chủ để tạo ra và bố trí phù hợp cho cácwebsite trong ứng dụng của bạn Khung trang ASP.NET cũng cho phép bạn xác định mô

hình các URL sẽ được sử dụng trong website của bạn Điều này giúp tối ưu hóa công cụtìm kiếm và làm cho các URL thân thiện với người sử dụng.

Cấu hình ASP.NET

ASP.NET sử dụng một cấu hình hệ thống cho phép bạn xác định và thiết lập cấu hìnhcho máy chủ web của bạn ASP.NET thiết lập cấu hình được lưu trữ trong các tập tinXML

Hỗ trợ gỡ lỗi

ASP.NET có lợi thế gỡ lỗi trong thời gian chạy để cung cấp quá ngôn ngữ và hỗ trợ

gỡ lỗi qua máy tính Bạn có thể gỡ lỗi cả hai đối tượng quản lý và không được quản lý.Web Service Framework ASP.NET hỗ trợ các dịch vụ web XML cho phép ứng dụngtrao đổi thông tin qua bức tường lửa bằng cách sử dụng các tiêu chuẩn như HTTP vàXML Bất cứ ngôn ngữ lập trình web nào cũng có thể trao đổi thông tin và truy cập cácdịch vụ web XML

Ứng dụng web dựa trên mô hình MVC

ASP.NET MVC giúp các nhà phát triển web xây dựng ứng dụng dựa trên tiêu chuẩnđược dễ dàng duy trì bởi nó giảm sự phụ thuộc vào các class

ASP.NET sử dụng dữ liệu động

ASP.NET sử dụng dữ liệu động cho phép bạn tạo ra các ứng dụng web hướng dữ liệumột cách dễ dàng.Bạn sẽ tìm thấy rằng bạn có thể nhận được các ứng dụng chạy dễ dànghơn và với ít mã hơn so với trước đây Đồng thời bạn có thể thêm các tính năng tùy chỉnh

để các dữ liệu ASP.NET động để thích ứng với yêu cầu riêng của bạn

1.4 Tổng quan về ADO.net

Mọi ứng dụng ít nhiều đều cần lưu trữ dữ liệu Dữ liệu từ người dùng nhập vào, dữliệu được lưu trữ trong ứng dụng và dữ liệu từ các hệ thống khác, … tất cả đều là nguồnthông tin mà ứng dụng cần xử lý với chức năng chính là hỗ trợ tìm kiếm, tính toán, thống

kê và ra quyết định

Để thực hiện các chức năng xử lý dữ liệu, người lập trình cần phải có các công cụ lậptrình chuyên dụng Dữ liệu không đơn giản lưu trữ trên các file văn bản hay file nhị phânvới cấu trúc record do người lập trình định nghĩa Thay vào đó hầu hết các ứng dụng tổchức dữ liệu logic dựa trên cấu trúc cơ sở dữ liệu quan hệ và lưu trữ vật lý dựa vào các hệquản trị cơ sở dữ liệu quan hệ như Access, SQL Server, Oracle, DB2, …

Khi dữ liệu trở thành trung tâm của ứng dụng thì việc cung cấp các chức năng tớingười dùng phụ thuộc vào khả năng xử lý và thao tác với dữ liệu Vấn đề mà người thiết

kế và xây dựng ứng dụng quan tâm khi al2m việc với dữ liệu là :

• Lưu trữ dữ liệu tập trung

• Đảm bảo toàn vẹn dữ liệu

• Đảm bảo khả năng truy xuất đồng thời của nhiều người dùng trên dữ liệu

• Đảm bảo thời gian hồi đáp ngắn cho mỗi người dùng

• Bảo mật dữ liệu

• Trao đổi dữ liệu giữa các hệ thống khác nhau

Những vấn đề này được giải quyết nhờ vào khả năng của các hệ quản trị cơ sở dữ liệu(HQT CSDL) và cách phần mềm xử lý dữ liệu do hệ quản trị cơ sở dữ liệu cung cấp Vớicác database server sử dụng HQT CSDL như Oracle, SQL Server, … dữ liệu được đảmbảo lưu trữ tập trung, toàn vẹn và truy xuất đồng thời cũng như bảo mật Tuy nhiên, thờigian hồi đáp người dùng và trao đổi dữ liệu phụ thuộc hòan toàn vào các phần mềm Vớicác công cụ lập trình xử lý dữ liệu như ADO (Active Data Object), Microsoft đem lại chongười lập trình một công cụ rất tự nhiên khi thực hiện các thao tác trên dữ liệu ADOđược cải tiến liên tục trong các phiên bản hệ điều hành Windows hay Microsoft Office.Tuy nhiên với sự ra đời của NET, ADO không chỉ là thành phần Component độc lậpnhưng gắn liền với NET Framework để cung cấp các dịch vụ xử lý dữ liệu

Cấu trúc của Ado nhằm cung cấp khả năng truy xuất và xử lý dữ liệu lớn, đồng thờitrên hệ thống ứng dụng phân tán nhiều người dùng

Đặc điểm chính của ADO.NET là làm việc với dữ liệu không kết nối Dữ liệu đượclưu trữ trong bộ nhớ như một CSDL thu nhỏ gọi là DataSet, nhằm tăng tốc độ tính toán,

xứ lý tối đa và hạn chế việc sử dụng tài nguyên trên Database Server Đặc điểm quantrọng thứ hai là khả năng xử lý dữ liệu dạng chuẩn XML Dữ liệu ở dạng XML có thể traođổi giữa bất kỳ hệ thống nào nên ứng dụng của bạn sẽ có nhiều khả năng làm việc vớinhiều ứng dụng khác

Chúng ta sẽ từng bước xem xét phần tổng quan kiến trúc của ADO.NET cùng với các

kỹ thuật lập trình cơ bản

Kiến trúc ADO.NET

Kiến trúc ADO.NET

Kiến trúc ADO.NET có thể chia làm hai phần chính :

• Managed Provider Component : bao gồm các đối tượng như DataAdapter,DataReader, … giự nhiệm vụ làm việc trực tiếp với dữ liệu như database, file, …

• Content Component : bao gồm các đối tượng như DataSet, DataTable, … đại diệncho dữ liệu thực sự cần làm việc DataReader là đối tượng giúp truy cập dữ liệu nhanhchóng nhưng forward-only và read-only

DataSet có thể coi là một bản sao gọn nhẹ của CSDl trong bộ nhớ với nhiều bảng vàcác mối quan hệ

DataAdapter là đối tượng kết nối giữa DataSet và CSDL, nó bao gồm hai đối tượngConnection và Command để cung cấp dữ liệu cho DataSet cũng như cập nhật dữ liệu từDataSet xuống CSDL

Các đặc điểm của ADO.NET

ADO.NET có nhiều thay đổi so với ADO trước đây dù vẫn giữ lại kiến trúc các đốitượng độc lập với nhau và cố gắng không thay đổi cách thức các lập trình viên đã sử dụngquen thuộc với ADO ADO.NET có nhiều đặc điểm mới, nổi bật :

• Interoperability

• Scalability

• Productivity

• Performance

Interoperability – Tương tác giữa nhiều hệ thống khác nhau :

Trong các hệ thống phân tán, dữ liệu được chuyển ở dạng disconnected recordset giữaData provider và Data consumer Vì ở dạng RecordSet, cả provider và consumer cần phải

sử dụng COM để trao đổi dữ liệu dẫn đến việc khó mở rộng hệ thống vì COM không làm

việc qua Firewall và Network Address Translator (NAT).

ADO.NET giải quyết vấn đề này bằng cách thay đổi về bản chất của việc đóng gói dữliệu trước khi truyền trên mạng

• Với ADO, disconnected RecordSet được đóng gói ở dạng Network DataRepresentation (NDR) trước khi truyền trên mạng NDR vẫn là dạng đối tượng mà ở tầngApllication, data provider và data consumer phải sử dụng kỹ thuật COM để xử lý

• ADO.NET thay thế NDR bằng định nghĩa mới : XML Với bản chất Text, XMLhòan toàn có thể sử dụng HTTP để trao đổi dữ liệu Hơn nữa XML document dễ dàngđược xử lý mà không cần đến kỹ thuật COM XML là chuẩn để trao đổi dữ liệu mới nhất

và đang được hỗ trợ rất rộng rãi

2 Các đối tượng trong asp.net:

2.1 Label:

Trong phần này chúng ta sẽ nói về cách sử dụng những control chính trong ASP.NET

4 Đây là những control mà bạn có thể sử dụng trong bất kỳ ứng dụng nào của ASP.NET4

Bạn sẽ tìm hiểu làm thế nào để hiển thị thông tin cho người sử dụng bằng cách sửdụng control Label và Literal Bạn sẽ tìm hiểu làm thế nào để chấp nhận người sư dụngnhập vào dữ liệu bằng cách sư dụng control TextBox, CheckBox và RadioButton Bạncũng sẽ tìm hiểu làm sao để có thể gửi thông tin đi bằng các button Vào phần cuối bạn sẽtìm hiểu làm sao để có thể group các control lại với nhau bằng cách sử dụng Panel

Control dùng để hiển thị thông tin

ASP.NET có 2 control mà bạn có thể sử dụng để hiển thị text, thông tin: Label vàLiteral Trong khi Literal thì chỉ đơn giản là hiển thị thông tin, còn Label thì ngoài việchiển thị thông tin, Label còn hỗ trợ nhiều thuộc tính để format

Sử dụng Label

Bất kể khi nào bạn muốn chỉnh sửa text, thông tin được hiển thị trên trang web, bạn

có thể sử dụng Label

Ví dụ1, Label bên dưới sẽ hiển thị thời gian hiện tại của Server

<%@ Page Language="C#" AutoEventWireup="true" control.aspx.cs" Inherits="Chapter02_label_control" %>

CodeFile="label-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Label hỗ trợ nhiều thuộc tính mà bạn có thể sử dụng để format nội dung được hiển thịtrong Label:

 BackColor: cho phép bạn thay đổi màu nền của Label

 BorderColor: cho phép bạn thay đổi màu viền nền của Label

 BorderStyle: cho phép bạn thay đổi hình dạng của đường viền xung quanhLabel Bạn có thể sử dụng các giá trị sau: NotSet, None, Dotted, Dashed, Solid,Double, Groove, Ridge, Inset và Outset

 BorderWith: cho phép bạn thay đổi kích thước của đường viền

 CssClass: cho phép bạn kết hợp, sử dụng 1 class trong CSS

 Font: cho phép bạn thay đổi font của Label

 ForeColor: cho phép bạn thay đổi màu chữ

 ToolTip: cho phép bạn thiết lập title cho label

Ví dụ 2:

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="label_mau.aspx.cs" Inherits="label_mau" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<style type="text/css">

div

{padding: 10px;

}.labelStyle{

lblA.Text = "Đây là chuỗi văn bản thường";

lblB.Text = "<B>Còn đây là chuỗi văn bản được in đậm</B>";

2.2 Text box:

TextBox là điều khiển được dùng để nhập và hiển thị dữ liệu TextBox thường được

sử dụng nhiều với các ứng dụng trên windows form

Các thuộc tính:

ode: Qui định chức năng của Textbox, có các giá trị sau:

o SingleLine: Hiển thị và nhập liệu 1 dòng văn bản

o MultiLine: Hiển thị và nhập liệu nhiều dòng văn bản

o Password: Hiển thị dấu * thay cho các ký tự có trong Textbox

ường hợp thuộc tính TextMode = MultiLine, thuộc tính Rows sẽ qui

số dòng văn bản được hiển thị

định số ký tự tối đa được nhập vào cho TextBox

định việc hiển thị của văn bản có được phép tự độngxuống dòng khi kích thước ngang của của điều khiển không đủ để hiển thị dòng nội dungvăn bản Giá trị mặc định của thuộc tính này là True - tự động xuống dòng

TextMode="SingleLine"

Runat="server" Text=" nhập liệu 1" />

<br /><br />

<asp:TextBoxid="txtPassword"

TextMode="Password"

Runat="server" Height="39px" Width="177px"/>

<br /><br />

<asp:TextBoxid="txtComments"

TextMode="MultiLine"

Runat="server" Text=" nhập liệu 3" Height="80px" Width="223px" />

ImageURL: Đường dẫn đến tập tin hình ảnh cần hiển thị.

ăn bản sẽ hiển thị khi tập tin được thiết lập trong thuộc tínhImageURL không tồn tại

<asp:Image ID="Image1" runat="server" Height="179px"

ImageUrl="~/1.png" Width="244px" ImageAlign="Left" ToolTip="hìnhđẹp 1"/><br />

</div>

</form>

</html>

2.4 Button, ImageButton, LinkButton

điều khiển Button, ImageButton, LinkButton mặc định đều là các nútSubmit Button, mỗi khi được nhấn vào sẽ PostBack về Server

điều khiển này,chúng ta gọi tên chung cho các điều khiển này là Command Button

Các thuộc tính chung của Button, ImageButton, LinkButton

CommandName Tên lệnh Được sử dụng trong sự kiện Command

điều khiển ImageButton còn có các thuộc tínhImageURL, ImageAlign và AlternateText như điều khiển Image

Ví dụ: Tạo Website Tinhtoan gồm các điều khiển: Label, Textbox, Button

protected voidbttinhtien_Click(objectsender,EventArgse){

intsoluong =int.Parse(txtsoluong.Text);

intdongia = int.Parse(txtdongia.Text);

intthanhtien = soluong * dongia;

txtthanhtien.Text = thanhtien.ToString(); }

2.5 HyperLink

Điều khiển này được sử dụng để tạo ra các liên kết siêu văn bản

Các thuộc tính:

ImageURL: Qui định hình hiển thị trên điều khiển

ăn bản sẽ được hiển thị trên điều khiển Trong trường hợp cả 2thuộc tính ImageURL và Text được thiết lập, thuộc tính ImageURL được ưu tiên, thuộctính Text sẽ được hiển thị như Tooltip

NavigateUrl: Đường dẫn cần liên kết đến

Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết

o _blank: Hiển thị trang liên kết ở một cửa sổ mới

o _self: Hiển thị trang liên kết tại chính cửa sổ chứa liên kết đó

o _parent: Hiển thị trang liên kết ở frame cha

Ví dụ: Tạo menu đươn giản

*Các thuộc tính:

này qui định điều khiển có được phép tự độngPostBack vềServer khi chỉ số của mục chọn bị thay đổi Giá trị mặc định của thuộc tínhnày là False -không tự động Postback

Đây là tập hợp chứa các mục chọn của điều khiển Ta có thể thêm vàomục chọn vào thời điểm thiết kế thông qua cửa sổ ListItem Collection Editor, hoặc thôngqua lệnh

định chiều cao của ListBox theo số dòng hiển thị

định cách thức chọn các mục trong ListBox.SelectionMode chỉ được phép thay đổi trong quá trình thiết kế, vào lúc thực thi chươngtrình, thuộc tính này chỉ đọc

o Single: Chỉ được chọn một mục có trong danh sách (mặc định)

o Multiple: Cho phép chọn nhiều lựa chọn