Bài Giảng Thiết Kế Web

Microsoft PowerPoint Phan1 ppt THIẾT KẾ WEB Mục tiêu môn học • Cung cấp các kiến thức cơ bản về thiết kế web như là HTML, CSS, JavaScript cũng như một số công cụ thiết kế web phổ biến như Dreamwaver,[.]

THIẾT KẾ WEB

Mục tiêu môn học

• Cung cấp các kiến thức cơ bản về thiết kế web như là HTML, CSS, JavaScript cũng như một số công cụ thiết kế web phổ biến như Dreamwaver, Photoshop, Flash…

• Các thành phần cơ bản của một trang web.

• Các bước xây dựng một trang web tĩnh.

• Xây dựng và triển khai một trang web tĩnh.

Nội dung môn học

PHẦN 1

CÁC KIẾN THỨC

CƠ BẢN

MỤC TIÊU

môi trường Web.

dạng cách trình bày của trang web).

cách xử lý sự kiện và thao tác trên các đối tượng HTML của ngôn ngữ JavaScript.

Mô hình 3 lớp trong thiết kế web

1 Lớp nội dung/cấu trúc (Content/Structure

Layer)

Là lớp cung cấp nội dung (thông tin) cho người

truy cập Nội dung bao gồm các văn bản, hình

ảnh, các liên kết… Nội dung này sẽ được tổ

chức theo cấu trúc của một ngôn ngữ đánh dấu

siêu văn bản như HTML, XHTML…

2 Lớp trình bày/kiểu mẫu (Presentation/Style Layer)

Là lớp quy định các trình bày nội dung của trang web Lớp này sẽ định nghĩa các định dạng hay các kiểu mẫu cho các thành phần trong trang web Các định nghĩa này thường sẽ được lưu trữ trong 1 tập tin riêng theo cú pháp của chuẩn định dạng CSS.

3 Lớp hành vi (Behavior Layer)

Là lớp cho phép thực hiện một số hành vi/thao tác trên các thành phần của trang web thông qua ngôn ngữ script (JavaScript, VbScript).

Mô hình 3 lớp trong thiết kế web

• Một số lợi ích của mô hình

– Chia sẻ tài nguyên (Share resources)

Dùng chung các tập tin CSS hay JavaScript cho toàn bộ các trang trong website Khi thay đổi trên các tập tin này, toàn bộ site sẽ

được thay đổi

– Tốc độ tải nhanh hơn (Faster downloads)

Khi người sử dụng truy cập vào trang web, các tập tin CSS và

JavaScript chỉ được tải ở lần truy cập đầu tiên, nó sẽ được trình duyệt web lưu lại (cached) cho những lần truy cập sau

– Làm việc nhóm (Multi-person teams)

Thuận tiện trong việc phân chia công việc Các thành viên trong nhóm sẽ được phân công việc theo từng lớp của mô hình và công việc ở các lớp có thể được làm song song với nhau

Các khái niệm và thuật ngữ cơ bản

(Tham khảo www.w3schools.com/site/site_glossary.asp)

tính sử dụng Internet để trao đổi các tài liệu web.

• Protocol (Giao thức): Là tập hợp các qui tắc được thống nhất giữa hai máy tính nhằm thực hiện trao đổi dữ liệu được chính xác.

• Một số giao thức thông dụng: TCP, HTTP, FTP,

SMTP…

Các khái niệm và thuật ngữ cơ bản

• Web Page: một tài liệu (thường là một tập tin

HTML) được thiết kế để phân phối trên môi trường web.

• Web Site: là tập hợp các web page có liên quan của một công ty hay cá nhân.

• Home Page: là web page có mức cao nhất (trang chủ) của một web site.

Các khái niệm và thuật ngữ cơ bản

• IP Address (Internet Protocol Address): một con

số xác định duy nhất cho mỗi máy trên Internet

Ví dụ: 192.168.1.1…

• Domain name: Tên xác định một web site

Ví dụ: www.huflit.edu.vn

chương trình chạy trên server, chuyển tên miền

sang địa chỉ IP và ngược lại.

Các khái niệm và thuật ngữ cơ bản

• ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet (cung cấp các dịch vụ truy cập Internet và nơi lưu trữ web…).

• Web Host: Một web server cung cấp dịch vụ lưu trữ cho web site của các công ty, tổ chức hay cá nhân.

• Domain: Một web server cung cấp dịch vụ tên miền cho các công ty, tổ chức hay cá nhân.

Các khái niệm và thuật ngữ cơ bản

• URL (Uniform Resource Locator): Một địa chỉ

web, là một chuẩn để xác định các tài liệu (trang) web trên Internet.

Cổng (Port)

Thư mục (Folder)

Tập tin (File)

Biến và tham số

Tên một vị trí trong trang web

Các khái niệm và thuật ngữ cơ bản

• Cổng (Port): là một con số xác định kênh nhập/xuất được sử dụng bởi một ứng dụng Internet.

• Một máy server có thể cung cấp nhiều dịch vụ, do đó cần có cơ chế để phân biệt các dịch vụ này giúp

client khai thác đúng dịch vụ cần thiết

• Hai dịch vụ khác nhau phải được chạy trên những cổng khác nhau.

• Vd: web server thường dùng cổng 80, ftp server

thường dùng cổng 21, smtp server thường dùng

cổng 25…

Các khái niệm và thuật ngữ cơ bản

truy cập và hiển thị nội dung trang web

• Một số web browser thông dụng: Internet Explorer, FireFox, Opera, Netscape…

• Web server: một máy tính phân phối dịch vụ và

thông tin cho máy tính khác.

• Một số web server thông dụng: IIS (Internet

Information Services), Apache, Tomcat…

Mô hình Client/Server

dịch vụ để cho các máy tính khác có thể khai thác và truy 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ụ: Web server, File server, Mail server…

các tài nguyên trên máy chủ

• Việc kết nối của client với server và việc khai thác dịch vụ của server tạo nên mô hình Client/Server

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

Các khái niệm và thuật ngữ cơ bản

Xử lý yêu cầu với web tĩnh

Gởi yêu cầu tới server

Tìm trang web yêu cầu

(Response)

Xử lý yêu cầu với web động

Web Server User

(Response)

BÀI 1

NGÔN NGỮ HTML

Hoàng Đăng Quang

Khoa Công nghệ thông tin

ĐH Ngoại Ngữ - Tin học Tp.HCM

NGÔN NGỮ HTML

• Giới thiệu ngôn ngữ HTML

• Cấu trúc tổng quát của một trang HTML

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

• HTML: HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản.

• Do Tim Berner-Lee phát minh (1989) và trở thành ngôn ngữ chuẩn để tạo các trang Web.

• HTML dùng các thẻ (tags) để định dạng dữ liệu

• Tạo bảng/khung cho trang Web

Tim Berner-Lee

Cấu trúc tổng quát của trang HTML

Kết quả thể hiện trên web broswer

– Thẻ tạo siêu liên kết (hyperlink): <a>

– Thẻ định dạng danh sách: <ul>, <ol>, <li>

– Thẻ chèn hình ảnh: <img>

Các thành phần cơ bản

• Thẻ (tag): là một tập các ký hiệu được định

nghĩa trong HTML có ý nghĩa đặc biệt Thẻ bắt

đầu bằng ký hiệu ‘<’ và kết thức bởi ký hiệu ‘>’

– Thẻ mở: <tên thẻ>

– Thẻ đóng: </tên thẻ>

• Phần tử (element) có thể bao gồm thẻ mở, thẻ đóng và nôi dung bên trong cặp thẻ mở, đóng

Các thành phần cơ bản

• Có 2 loại phần tử (element) trong HTML

– Phần tử chứa nội dung: bao gồm thẻ mở và thẻ đóng

• Ví dụ: <p>Nội dung </p>

– Phần tử rỗng: bao gồm 1 thẻ

• Ví dụ: <br> (có thể viết là </br> hay <br/>)

Các thành phần cơ bản

đi kèm Thuộc tính được nhập vào ngay trước dấu ngoặc đóng ‘>’của thẻ mở Có thể sử dụng nhiều thuộc tính trong một thẻ Thuộc tính này kế tiếp thuộc tính khác, phân cách nhau bởi khoảng trắng

• Các giá trị của thuộc tính có thể được đặt trong cặp dấu nháy kép (“”), nháy đơn (‘’) hay có thể không có Nếu giá trị là một chuỗi ký

tự có khoảng trắng bên trong, bắt buộc phải dùng cặp dấu nháy kép (“”) hay nháy đơn (‘’) để bao chuỗi lại

– Ví dụ: <table border=“1” cellpadding=“5”>

Các thẻ định dạng văn bản

<strike> Đoạn văn bản bị gạch ngang chữ </strike>

Định dạng chữ in gạch ngang chữ

<strike>

<u> Đoạn văn bản in gạch dưới

</u>

Định dạng chữ in gạch dưới

<u>

<i> Đoạn văn bản in nghiêng </i>

Định dạng chữ in nghiêng

<i> hay <em>

<b> Đoạn văn bản in đậm </b>

Định dạng chữ in đậm

<b>

<p align= “justify” > Đoạn văn bản này được canh đều 2 biên trái phải </p>

Định dạng một đoạn văn bản

<font face= “fontname”

size= “fontsize”

color= “color”>

Ví dụ

Ý nghĩa Thẻ + Thuộc tính

Các thẻ định dạng văn bản

Ví dụ

Ý nghĩa Thẻ

<p> Dòng 1<br>Dòng 2 </p>

Æ Dòng 1 Dòng 2

Kết thúc dòng hiện tại và chuyển sang dòng mới

bỏ qua ký tự khoảng trắng, tab và xuống dòng)

<pre>

<h1> Tiêu đề 1 </h1>

Định dạng tiêu đề từ kích thước 1 đến 6 (tiêu đề 1 có kích thước lớn nhất)

<h1>, …, <h6>

H ₂ O Æ H2O Định dạng chỉ số dưới

<sub>

ax ² Æ ax 2 Định dạng chỉ số trên

<sup>

Thẻ tạo siêu liên kết (hyperlink)

• Siêu liên kết (hyperlink): là một con trỏ trỏ đến một tài liệu khác, vị trí của tài liệu được xác định thông qua một URL, tài liệu là một tập tin bất kỳ hay là địa chỉ của một trang

web khác

• Thông thường hyperlink trỏ đến một trang web khác hay có thể trỏ đến một vị trí xác định ngay trong trang web chứa hyperlink.

Thẻ tạo siêu liên kết (hyperlink)

• Các thuộc tính của thẻ <a>

Chuỗi “message” sẽ được hiển thị khi di chuyển chuột trên liên kết.

title = “message”

Quy định thứ tự tab cho liên kết.

Đặt tên cho vị trí đặt thẻ Thuộc tính này được

sử dụng khi cần liên kết đến một vị trí trong cùng trang hiện tại.

Quy định cách mở tài liệu do URL trỏ tới

“_blank” mở ở cửa số (của trình duyệt) mới,

“_self” mở ở cửa sổ hiện tại.

tagert= “_blank” |

“_self”

URL là địa chỉ một tài liệu, hay có thể có dạng

“#<LocationName>” khi liên kết đến một vị trí xác định trong trang web hiện tại

Ý nghĩa Thuộc tính

Thẻ tạo siêu liên kết (hyperlink)

• Ví dụ 1: Tạo liên kết đến trang web trường ĐH Ngoại ngữ - Tin Học tại địa chỉ www.huflit.edu.vn, khi click vào link sẽ mở trang web ở cửa sổ (trình duyệt) mới

<a href =“www.huflit.edu.vn” target= “_blank” > HUFLIT </a>

• Ví dụ 2: Tạo liên kến đến một vị trí cùng trang với trang hiện tại.

<a href= “#Phan1” > Phần 1: Các kiến thức cơ bản </a><br>

<a href= “#Phan2 ” > Phần 2: Các công cụ thiết kế web </a>

<li> Item 1 </li>

<li> Item 2 </li>

<li> Item 1 </li>

<li> Item 2 </li>

Thẻ chèn hình ảnh

• Các thuộc tính của thẻ <img>

Canh lề ảnh theo văn bản xung quanh

alt= “description”

URL đến tập tin ảnh

src= “URL”

Ý nghĩa Thuộc tính

– Giá trị URL của thuộc tính src có thể dùng địa chỉ tương đối

(không có phần tên miền, chỉ xác định tên thư mục và tên tập tin, nếu ảnh nằm trong site chứa trang web) hay địa chỉ tuyệt đối

(URL đầy đủ đến tập tin ảnh)

Thẻ chèn hình ảnh

Ví dụ:

• Dùng địa chỉ tương đối

– Thư mục images nằm cùng vị trí với thư mục của trang web:

<img src= “images/mypic.jpg” >

(hay <img src=“./images/mypic.jpg”>)

– Thư mục images nằm bên ngoài thư mục hiện tại 1 cấp:

Một số ký tự đặc biệt

&#39;

&apos;

apostrophe '

&#34;

&quot;

quotation mark

Entity Number

Entity Name Description

Entity Name Description

Result

Column II Column I

Kết quả trên Web Broswer (không có đường biên bao quanh)

Canh lề theo phương ngang

align= “center” | “justify”

Canh lề theo phương ngang

<td valign= "middle" > Row 1, Col 2 </td>

<td valign= "bottom" > Row 1, Col 3 </td>

</tr>

<tr align= "center" valign= "middle" >

<td background= "texture.bmp" > Row 2, Col 1 </td>

<td bgcolor= "#FFCC00" colspan= "2" > Row 2, Col 2 </td>

</tr>

</table>

Chia khung (Frame)

• Khung (frame) là thành phần cơ bản của Web

• Một trang Web có thể được chia thành nhiều khung, mỗi khung sẽ chứa một trang Web riêng

• Thẻ <frameset> định nghĩa cách tổ chức của các frame.

• Thẻ <frame> định nghĩa chi tiết từng frame

Chia frame

• Các thuộc tính của thẻ <frameset>

Định nghĩa số lượng và kích thước các frame theo cột

Bật/tắt đường biên của frame

Định nghĩa số lượng và kích thước các frame theo dòng Giá trị của thuộc tính rows

có dạng một chuỗi các chiều cao của các dòng, mỗi dòng cách nhau bằng dấu phẩy

Chia frame

• Các thuộc tính của thẻ <frame>

Không cho phép thay đối kích thước frame

Bật/tắt thanh cuộn (scrollbar)

Quy định tên của frame, có thể được dùng trong thuộc tính tagert của thẻ <a> để xác định frame sẽ hiển thị trang web

25%

= 100 pixels

“*” =

100 pixels

<frame src= "mainFrame.htm“ name= "mainFrame" />

<frame src= "rightFrame.htm" name= "rightFrame" />

Tạo Form

• Form dùng để nhận thông tin từ người sử dụng hay phản hồi thông tin về người sử dụng Người sử

dụng có thể có các yêu cầu:

– Gõ vào câu trả lời, ý kiến.

– Chọn câu trả lời từ danh sách.

– Chọn câu trả lời từ một hoặc một số tùy chọn.

• Dữ liệu có thể sẽ được xử lý tại client-site

(JavaScript) hay có thể sẽ được xử lý tại server-site (ASP, PHP, JSP…) sau đó có thể trả kết quả về

cho người sử dụng

Tạo Form

• Ví dụ: form đăng nhập và form đăng ký

Tạo Form

• Các thuộc tính của thẻ <form>

Quy định định cách định dạng dữ liệu trước khi gởi Nếu không xác định rõ, enctype mặc định sẽ

method= “get” | “post”

Tên của form

Tạo Form

• Phương thức HTTP (HTTP methods)

– Phương thức “get” : Dữ liệu sẽ được gởi kèm theo URL được quy định trong thuộc tính action Có dạng như sau:

URL ? name1= value1 & name2= value2…

– Phương thức “post” : Dữ liệu sẽ được chứa trong phần thân (body) của post request.

• Chú ý

– Nếu các giá trị được gởi chứa các ký tự non-ASCII hay

vượt quá 100 ký tự, không nên sử dụng phương thức

“get”

– Một số web broswer không thể bookmark lại được các

dữ liệu được gởi bằng phương thức “post”

Tạo Form

• Các thành phần trong form

Hộp chọn tập tinFileField

Chọn một hay nhiều mục trong danh sáchListBox

Chọn một mục trong danh sách được liệt kêComboBox

Chọn lựa một hay nhiều lựa chọn được liệt kêCheckBox

Hộp nhập mật khẩuPasswordBox

Chọn lựa một trong các lựa chọn được liệt kêRadioButton

Nút (submit dữ liệu hay xử lý thao tác nào đó khi người sử dụng click chuột vào nút này)

Button

Hộp nhập dữ liệu trên nhiều dòngTextArea

Hộp nhập dữ liệu trên một dòngTextBox

Ý nghĩa Thành phần

Tạo Form

• Ví dụ 1: TextBox

<form action= "form_action.asp“ method= "get" >

First name: <input type= "text" name= "fname"

<textarea rows= "2" cols= "20" >

The cat was playing in the garden Suddenly a dog

showed up

</textarea>

Kết quả trên trình duyệt

Mã HTML

Tạo Form

Username: <input type= "text" name= "user" > <br />

Password: <input type= "password"

name= "password" /> <br />

<input type= "reset" value= “Reset" />

<input type= "submit" value= "Submit" />

Kết quả trên trình duyệt

Mã HTML

• Ví dụ 3: TextBox, PasswordBox, ResetButton, SubmitButton

<form action= “#" method= "post" name= “MyForm" >

<input name= "MyFile" type= "file" size= "20" >

</form>

Kết quả trên trình duyệt

Mã HTML

• Ví dụ 4: FileField

Tạo Form

• Ví dụ 5: RadioButton

Male: <input type= "radio" checked= "checked"

name= "Sex" value= "male“ />

I have an airplane: <input type= "checkbox"

name= "vehicle" value= "Airplane" >

Kết quả trên trình duyệt

Mã HTML

Tạo Form

• Ví dụ 7: ComboBox

<select name= "cars" >

<option value= "volvo" > Volvo </option>

<option value= "saab" > Saab </option>

<option value= "fiat" selected= "selected" > Fiat </option>

<option value= "audi" > Audi </option>

</select>

Kết quả trên trình duyệt

Mã HTML

• Ví dụ 8: ListBox

<select size= "3" multiple= "multiple" >

<option> Entry A </option>

<option selected= "selected" > Entry B </option>

<option> Entry C </option>

</select>

Kết quả trên trình duyệt

Mã HTML