Thông tin tài liệu
1
2
CHƯƠNG 0 : GIỚI THIỆU VỀ WEB
I. World Wide Web _ WWW :
WWW thừơng đựơc gọi là tắt là Web. Web là một mạng máy tính có qui mô toàn thế
giới. Tất cả các máy tính trong Web có thể truyền thông với nhau. Tất cả các máy
tính sử dụng một nghi thức chuẩn gọi HTTP.
Thông tin Web đựơc cất giữ trong những tài liệu gọi là những trang Web. Những trang
Web là những tập tin cất giữ trong những máy tính gọi là những server Web. Những
máy tính đọc những trang Web đựơc gọi những Web clients.Những Web client xem
những trang với một chương trình gọi là một trình duyệt Web hay Web browser.
Một trình duyệt tải một trang Web từ server thông qua một yêu cầu HTTP chuẩn chứa
một đòa chỉ trang URL.
Tất cả các trang Web chứa đựng những lệnh để trình bày. Trình duyệt trình bày trang
thông qua việc đọc những lệnh này. Những lệnh trình bày chung nhất đựơc gọi thẻ
HTML.
II. HTML :
HTML viết tắt của “Hyper Text Markup Language”. Một file HTML là một tập tin
văn bản chứa đựng thẻ đánh dấu. Thẻ đánh dấu nói cho trình duyệt Web làm sao để
trình bày trang. Một file HTML có thể đựơc tạo ra bằng cách sử dụng một chơng
trình soạn thảo văn bản đơn giản như notepad, textpad, …
1. Thẻ HTML :
Những thẻ HTML đựơc sử dụng để đánh dấu những phần tử HTML. Những thẻ
HTML đựơc bao bởi hai kí tự '<' Và '>'. Những thẻ HTML không phải phân biệt chữ
thường, chữ hoa
Thẻ HTML chi làm 2 nhóm chính :
. Thẻ điều khiển (thẻ rỗng) : chỉ gồm một thẻ duy nhất.
. Thẻ nội dung (phần tử HTML) : bao gồm một cặp thẻ. Thẻ đầu tiên trong
một cặp là thẻ mở , thẻ (thứ) hai là thẻ đóng. Văn bản giữa thẻ mở và thẻ đóng là nội
dung
Ví dụ :
3
<html>
<head>
<title>Title of page</title>
</head>
<body> This is my first homepage.<br><b>This text is bold</b>
</body>
</html>
2. Thuộc tính thẻ
Những thẻ có thể có những thuộc tính Những thuộc tính có thể cung cấp thêm các
thông tin về những phần tử HTML trên trang web.
Những thuộc tính luôn luôn ở dạng "tên = giá trò"
Ví dụ:
< body bgcolor ="red ">
…
</body>
Thẻ <body> đònh nghóa nội dung trang HTML .Với một thuộc tính bgcolor đựơc thêm,
chúng ta có thể nói với trình duyệt rằng nền trang cần phải đỏ.
4
CHƯƠNG 1 : HTML
I Cấu trúc tổng quát của một trang Web
II Phần Header
1. Thẻ <head>
2. Thẻ <title>
3. Thẻ <meta>
III Phần Body
1. Các thẻ hổ trợ cho đònh dạng văn bản
a. Đònh dạng cho các đoạn văn:
< b > đònh nghóa văn bản in đậm
< big > đònh nghóa văn bản in lớn
< em > đònh nghóa văn bản đựơc nhấn mạnh
< i > đònh nghóa văn bản nghiêng
< small > đònh nghóa văn bản nhỏ
< strong > đònh nghóa văn bản đậm
< sub > đònh nghóa văn bản subscripted (chỉ số )
< sup > đònh nghóa văn bản superscripted (số mũ)
< u > đònh nghóa văn bản gạch dứơi.
< h1 >-< h6 > đònh nghóa heading 1 tới heading 6
Những heading đựơc đònh nghóa từ thẻ < h1 > đến thẻ < h6 >.
< h1 > đònh nghóa heading lớn nhất.
5
< h6 > đònh nghóa heading nhỏ nhất.
HTML tự động thêm một dòng trắng trứơc và sau một heading.
< p > đònh nghóa một đoạn (paragraph)
HTML tự động thêm một dòng trắng thêm trứơc và sau một đoạn.
< address > đònh nghóa một phần tử đòa chỉ
< bdo > đònh nghóa hứơng văn bản
<bdo dir=[ltr | rtl]> nội dung </bdo>
< blockquote > đònh nghóa một trích dẫn dài
< tt > đònh nghóa văn bản điện báo
< pre > đònh nghóa văn bản đựơc tạo khuôn trứơc.
<br > dùng để xuống hàng
Thẻ < br > đựơc sử dụng khi bạn muốn kết thúc một dòng, nhưng không
muốn khởi động paragraph mới. < br > Thẻ là một thẻ rổng. Nó không
có thẻ đóng.
<! > đònh nghóa một chú thích trong mã nguồn HTML
Thẻ chú thích đựơc sử dụng để chèn một chú thích trong mã nguồn
HTML.Một chú thích sẽ đựơc bỏ qua bởi trình duyệt.
Chú ý : cần một dấu'!' chỉ sau móc mở.
b. Đường kẻ ngang :
< hr size = “ độ dày “ width = “ chiều rộng “ align = “ hướng “ [noshare ] >
chiều rộng : pixels, %
hướng : [right | left | center]
noshare : tạo bóng
c. Đònh dạng danh sách :
+ Danh sách không đánh số thứ tự
Một danh sách không thứ tự là một danh mục.
Một danh sách không thứ tự bắt đầu với thẻ < ul >
Mỗi phân tử danh sách bắt đầu với thẻ < li >.
6
Bên trong một phân tử danh sách chúng ta có thể đặt chia đoạn, xuống dòng,
những ảnh, những mối liên kết, danh sách khác ,v.v.
< UL type =”[ disc | square | circle ] ” >
< LI > item
< / UL>
Ví dụ :
< UL >
< LI > item 1
< LI > item 2
< / UL >
+ Danh sách được đánh số thứ tư
Một danh sách có thứ tự cũng là một danh mục.
Những phân tử danh sách đựơc đánh dấu với những số.
Một danh sách đựơc sắp thứ tự bắt đầu với thẻ < ol >
Mỗi phân tử danh sách bắt đầu với thẻ < li >.
Bên trong một phân tử danh sách chúng ta có thể đặt chia đoạn, xuống dòng,
những ảnh, những mối liên kết, danh sách khác ,v.v.
ï
< OL start = value type =”[ 1 | a | A | i | I ] ” >
< LI value = “ gia tri “ > item
< / UL>
Ví dụ :
< OL type = 1>
< LI > item 1
< LI > item 2
< LI value= 100> item 3
< LI > item 4
< / OL >
+ Danh sách tự đònh nghóa
Một danh sách tự đònh nghóa không phải là danh mục hàng hóa.
Danh sách này là một danh sách những phần tử và giải thích những phần tử
đó.
Một danh sách tự đònh nghóa bắt đầu với thẻ < dl > .
Mỗi phần tử bắt đầu với thẻ < dt >.
Mỗi giải thích bắt đầu với thẻ < dd >.
Bên trong một phân tử danh sách chúng ta có thể đặt chia đoạn, xuống dòng,
những ảnh, những mối liên kết, danh sách khác ,v.v.
7
< DL>
< DT > Tiêu đề
< DD > đònh nghóa
</ DL >
Ví du :
< DL >
< DT > RAM
< DD > Read Access Memory
< /DL >
d. Thực thể ký tự :
Vài kí tự có một nghóa đặc biệt bên trong HTML, như ký tự '<' đònh nghóa bắt
đầu một thẻ HTML. Nếu chúng ta muốn trình duyệt thật sự trình bày những kí tự này
chúng ta phải chèn những thực thể kí tự trong mã nguồn HTML.
Một thực thể ký tự chia ra làm 3 phần : một ký hiệu & , một tên thực thể hoặc
là '# và một số, và cuối cùng là một dấu chấm phẩy (;).
Ví dụ :
Để trình bày một dấu ít hơn trong một tài liệu HTML chúng ta phải viết : & Lt;
or <
Lợi thế việc sử dụng một tên thay vì một số là một tên dễ nhớ hơn.Sự bất lợi
là không phải là tất cả trình duyệt đều hổ trợ cho những tên thực thể mới nhất, trong
khi sự hỗ trợ cho thực thể ghi số rất tốt trong gần như tất cả các trình duyệt.
Chú y :ù những thực thể ký tự phân biệt chữ thường, chữ hoa.
Những thực thể ký tự thông thường :
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
>
greater than > >
& ampersand & &
" quotation mark " "
' apostrophe '
8
Result Description Entity Name Entity Number
¢ cent ¢ ¢
£ pound £ £
¥
Yen ¥ ¥
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
2. Hình ảnh
Trong HTML, hình ảnh đựơc đònh nghóa với thẻ < img >.Thẻ < img > là thẻ rỗng.
Cú pháp :
< img src=” tên hình “ align = “value “ alt = “chú thích” width = “ value”
height=”value” hspace =”value” vspace = ” value” >
src : URL của ảnh chúng ta muốn trình bày trên trang web
align = [ top | bottom | middle | left | right ] ( default = middle )
width / height : đònh kích thước hình ảnh
hspace / vspace : khoảng cách giữa hình và chữ ( đơn vò pixels )
alt : đựơc sử dụng để đònh nghóa một "chú thích" cho một ảnh.
+ Image Map
Image Map bắt buộc phải có height và width
< img src = “tên hình” alt = “chú thích” width = “value” height = “value”
USEMAP = “ # tên map “ >
<map name= “tên map” >
<area href = ” liên kết” alt = “chú thích“ shape= [rect | circle | polygon]
coords = “danh sách tọa độ “ >
< /map >
coords : danh sách các đối số phụ thuộc vào shape
rect : 4 đối số (left – top – right – bottom )
circle : 3 đối số ( x, y , r )
polygon : 2 * n đối số
Ví dụ:
<img src=”vietnam.gif” width = 640 height = 480 usemap =”#vietnam” >
< map name = “vietnam” >
9
< area href=”hanoi.htm” shape = rect coords=”100,100,200,200” >
< area href=”hue.htm” shape = circle coords=”300,300,20” >
< area href=”hcm.htm” shape=polygon coords=”400,400,410,410,500,420” >
< / map>
3. Siêu liên kết
HTML sử dụng thẻ < a > ( anchor) để tạo ra một mối liên kết tới tài liệu khác.
Một anchor có thể chỉ tới bất kỳ tài nguyên nào trên Web : một trang HTML, một
ảnh, một âm thanh sắp xếp, một movie, v.v.
Cú pháp 1:
<a href="url" [target=name]>nội dung</a>
href : đựơc sử dụng để hứơng vào tài liệu cần liên kết , và nội dung của thẻ
anchor sẽ đựơc trình bày nh một hyperlink.
target : đònh nghóa nơi tài liệu đựơc liên kết sẽ đựơc mở.
target =" _blank " Tải tài liệu mới trong một cửa sổ mới
target =" _self " Tải tài liệu mới trong cùng cửa sổ.
target =" _parent " Tải tài liệu mới trong cửa sổ cha (frame)
target =" _top " Tải tài liệu mới trong toàn bộ cửa sổ trình duyệt.
Cú pháp 2:
<a name="nhãn>nội dung</a>
name : đựơc sử dụng để tạo ra một anchor có tên.Khi sử dụng những anchor có
tên chúng ta có thể tạo ra những mối liên kết mà có thể nhảy trực tiếp vào trong một
đoạn đựơc chỉ rõ trong một trang
Ví dụ :
<a name="tips">Read the Useful Tips section</a>
Cần phải chú ý một có tên mà anchor không trình bày trong một cách đặc biệt.
Để liên kết tới anchor có tên, chúng ta thêm dấu '#' và tên anchor sau URL.
Ví dụ :
<a href="http://www.yahoo.com/html_links.asp#tips"> Read the Useful Tips
section</a>
Những anchor có tên thường đựơc sử dụng để tạo ra " mục lục " ở khi bắt đầu
một tài liệu lớn. Mỗi chương bên trong tài liệu đựơc gán cho một anchor có tên, và
những mối liên kết tới tất cả những anchor đựơc đặt tại đỉnh tài liệu.
Nếu một trình duyệt không thể tìm thấy một tên anchor, nó sẽ trỏ đến đỉnh tài
liệu. Không xuất hiện lỗi ở đây.
10
Chú ý : nên sử dụng đường dẫn tương đối trong các siêu liên kếtNên
+ Đường dẫn tương đối
/ : về thư mục cha
MY
FOLDER
A
H
I. htm
D. htm
E. htm
B
C
F. htm
G. htm
- Từ F.htm đến D.htm
< A href=” / A / D.htm ” > < / A >
- Từ I.htm đến F.htm
< A href=” / / C / F.htm” >
4. Table
Những bảng đựơc đònh nghóa với thẻ <table>. Một bảng đựơc chia vào trong những
hàng với thẻ <tr>, và mỗi hàng đựơc chia cắt thành các đơn vò với thẻ <td>. Một đơn
vò có thể chứa đựng những văn bản, những ảnh, những danh sách, những đoạn, những
form, thanh ngang, table khác, v.v.
Một bảng tổng quát có dạng như sau :
< TABLE >
< TR > // dòng
< TD > a < / TD >
< TD > b < / TD >
< / TR >
< TR >
< TD > c < / TD >
< TD > d < / TD >
[...]... trang chứa Form Việc này sẽ khám phá lỗi dễ dàng hơn 18 IV Frame Với frame, chúng có thể trình bày nhiều tài liệu HTML trong cùng cửa sổ trình duyệt.Mỗi tài liệu HTML đựơc gọi một khung, và mỗi khung độc lập những khung khác Mỗi tài liệu có thể cập nhật riêng biệt Những sự bất lợi việc sử dụng frame : Ngøi phát triển Web phải theo dõi nhiều tài liệu HTML hơn Khó khăn để in toàn bộ trang Frame thích hợp... trước khi trang web được trình bày some statements 21 + Đặt trong phần body : script sẽ được sử dụng để can thiệp vào cách trình bày nội dung của trang some statements + Đặt giữa header và body : tăng tính rõ ràng giữa các đoạn code trong trang HTML, script sẽ được xử lý trước khi trang được trình bày ... TD > 4.0 < / TD > Chú ý : Những cell không có nội dung nào cha đựơc trình bày tốt trong đa số các trình duyệt Những border xung quanh bộ cell rỗng bò biến mất Để tránh điều này, thêm một khoảng trắng (& nbsp;) vào các cell trống 5 Form : - Form là cơ chế cho phép nhận thông tin phản hồi từ người sử dụng - Dữ liệu sẽ được truyền đến WebServer để xử lý và gọi/ tạo ra một trang HTML trả lời Cú pháp : - Cập nhật từng vùng riêng biệt * Trình bày trang web thông thường Site Navigation ( Bannner – Logo – Button …) Section Navigation ( ảnh hường trên từng nhóm trang một ) Content ( nội dung từng trang riêng lẻ ) Tools ( Công cụ trợ giúp ) 19 *... đònh danh size = 1 : COMBOBOX > 1 : LISTBOX multiple (size > 1) cho phép lựa chọn nhiều dòng Lưu ý : + Giá trò nhập vào cho Form cần phải được làm cho có hiệu lực trên trình duyệt, bằng các đoạn mã client Script Việc kiểm tra giá trò trên trình duyệt có thời gian tác động nhanh hơn, và giảm bớt sự truyền tải trên server + Chúng ta cần phải xem xét việc kiểm tra giá trò trên server nếu dữ liệu được chèn... Language=JavaScript %> example Trong một trang web có thể có nhiều đoạn script 2 Biến : Biến là một chổ chứa mà chúng ta cần để lưu giữ thông tin Giá trò của biến có thể thay đổi trong quá trình thực thi Người ta tham khảo một biến thông qua tên của nó Javascript khai báo biến thông qua từ khoá var Biến trong Javascript... argument: array chứa các thông số của hàm Ví dụ : function hello() { document.write(“Hello”); document.write(hello argument.length); } hello(5,2,1); hello(); 11.Sự kiện và điều khiển của sự kiện Trình bày Cập nhật trình bày Javascript handle Browser User Mouse & Keyboard action Mouse & Keyboard Event * Các loại sự kiện Event onabort What it handles User thoát khỏi 1 trang đang load onblur User rời khỏi... =“nội dung” > type : xác đònh loại công cụ (checkbox, radio, button …) name : tên để xác đònh công cụ trong form value : nội dung của input 16 + Textbox : cho phép chỉ nhập một dòng văn bản Đa số các trình duyệt, độ rộng mặc đònh của trường văn bản là 20 kí tự type = “text” size= kích thước của text box (tính theo số ký tự) maxlength= số ký tự tối đa được nhập value = văn bản xuất hiện trong textbox... “number | % | * ” cols = “number | % | * ” > < frame src=“URL” name = “tên” scrolling = “yes | no | auto” noresize marginwidth = number marginheight = number > ………… rows, cols : số dòng, cột trình bày trong một frameset src : trang htm cần load trong khung scrolling : có thanh scroll bar hay không nosize : không cho phép thay đổi kích thước khung marginwidth : chiều rộng 2 cạnh trên và dưới... sẽ có cùng tên Ví dụ < input type=”radio” name=”gioitinh” value = 1 checked > Nam < input type=”radio” name=”gioitinh” value = 0 > Nu Gioi tinh : Nam Nu + Hidden : truyền ngầm các giá trò đến Web Server & Script ( dùng để xử lý ) type = “ Hidden “ + Reset button : xóa dữ liệu trong Form type = “reset” + Submit button : gửi dữ liệu từ Form lên Server type = “ Submit” c Thẻ Dùng để tạo . những trang Web đựơc gọi những Web clients.Những Web client xem
những trang với một chương trình gọi là một trình duyệt Web hay Web browser.
Một trình duyệt. WEB
I. World Wide Web _ WWW :
WWW thừơng đựơc gọi là tắt là Web. Web là một mạng máy tính có qui mô toàn thế
giới. Tất cả các máy tính trong Web
Ngày đăng: 09/03/2014, 20:20
Xem thêm: Lập trình web potx
