+ Viết các câu lệnh JavaScript và nhúng vào trang web + Sử dụng được các đối tượng nhập xuất Promt, document.write. + Truy xuất thuộc tính của các phần tử HTML bằng câu lệnh JavaScript. + Viết lệnh xử lý một số sự kiện đơn giản.
Nội dung:
Bài 1: Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write, trong đó tên có màu đậm, tuổi được gạch chân.
Giải mẫu: <HTML> <HEAD> </HEAD> <BODY> <script language = "JavaScript"> var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi Ten = prompt("Bạn hãy nhập vào tên ", ""); Tuoi = prompt("Bạn hãy nhập vào Tuổi : ", 20); document.write("Chào bạn : <B> " + Ten + "</B>"); document.write("<BR>"); // Xuống dòng document.write("Tuổi của bạn là : <U> " + Tuoi + "</U>"); </script> </BODY> </HTML>
Bài tập 2: Tạo một nút nhấn (button) có name là welcome, value là " Welcome ". Một textbox có tên là msg, value = "Welcome to".
Hướng dẫn : Sử dụng phương thức (hàm) write của đối tượng document để tạo. Giải mẫu: <HTML> <HEAD> </HEAD> <BODY> <script language = "JavaScript"> document.write("Tao Button va Text bang Script<BR>"); document.write("<BR>"); document.write("<input type=button name=welcome value = 'Welcome' "); document.write("onclick = 'alert ('Welcome to JavaScript');' > "); document.write("<input type = text name = msg value = 'Welcome to'>"); </script> </BODY> </HTML>
Bài tập 3: Tạo một nút như trong ví dụ 2 và thêm chức năng sau: Khi người dùng click vào nút welcome thì hiển thị thông báo "Welcome to JavaScript !"
Hướng dẫn: Dùng thẻ để tạo nút nhấn và thêm thuộc tính onClick = "<Câu lệnh JavaScript>;" (Trong đó <Câu lệnh JavaScript> có thể là một lệnh JavaScript bất kỳ, ví dụ lệnh document.write, alert, prompt hoặc lệnh gọi hàm v.v...) Giải mẫu: <HTML> <HEAD> </HEAD> <BODY> <input type=button name= welcome value="Welcome" onclick="alert('Welcome to JavaScript');"> </BODY> </HTML> Lưu ý quan trọng: Trong JavaScript, một hằng xâu được bao bởi cặp nháy đơn hoặc nháy kép, ví dụ các xâu: 'nháy đơn', "nháy kép" là những xâu hợp lệ, tuy nhiên bạn viết : 'abc" hay "xyz' là những xâu không hợp lệ. Trong trường hợp bạn muốn in chính bản thân dấu nháy đơn hoặc nháy kép ra màn hình thì bạn đặt trước nó một ký tự \, ví dụ bạn có thể in ra màn hình dòng chữ : Women's day ra màn hình bằng hai hàm alert và document theo các cách sau đây : alert("Women's day"), document.write('Women\'s day'); alert("Women\"s day"); alert('Women"s day'); v.v...
Bài tập 4: Lấy (đọc) giá trị của một phần tử HTML. Tạo 2 phần tử như trong ví dụ 2 bằng thẻ HTML, khi người dùng click chuột vào nút Welcome thì hiển thị nội dung chứa trong text có tên là msg.
Hướng dẫn: Để lấy giá trị của một phần tử HTML, bạn viết <Tên phần tử>.value Ví dụ: msg.value cho ta giá trị của text tên là msg. Giải mẫu: <HTML> <HEAD> </HEAD> <BODY>
<input type = button name = welcome value = "Welcome" onclick = "alert(msg.value)"> <input type = text name = msg value = "Welcome to JavaScript" size = 30>
</BODY> </HTML>
Bài tập 5: Khai báo hàm trong JavaScript và cách liên kết nút nhấn với một hàm. Tạo 2 phần tử như ví dụ 2, khi người dùng nhấn nút thì gọi một hàm có tên là HienThi, hàm hiển thị có chức năng hiển thị nội dung trong text có tên là msg ở trên.
Hướng dẫn: Trong thẻ tạo button, bạn đặt thuộc tính onClick = "<Tên hàm>", trong trường hợp này bạn đặt OnClick = "HienThi()". Điều này có nghĩa là khi người sử dụng Click chuột (OnClick = Click chuột) thì trình duyệt hãy gọi hàm HienThi(). Cũng giống như trong ngôn ngữ C, Một hàm bắt buộc phải có cặp ngoặc đơn, cho dù có tham số hay không. Ví dụ khi gọi hàm HienThi thì bạn phải viết là HienThi(). Giải mẫu: <HTML> <HEAD> <Script Language = "JavaScript"> function HienThi() // Khai báo một hàm tên là HienThi { alert(msg.value); // Lấy nội dung trong text box và hiển thị alert("Bạn hãy nhập vào ô text và thử lại !"); } </Script> </HEAD>
<BODY> <input type = button name = welcome value = "Welcome" onclick = "HienThi()"> <input type = text name = msg value = "Welcome to JavaScript" size = 30> </BODY>
</HTML>
Lưu ý: Trong C, để khai báo một hàm thường bạn viết, ví dụ: int HienThi() v...v.. Tuy nhiên, với JavaScript có hơi khác tí chút, thay vào đó bạn viết function HienThi() Còn các câu lệnh khác bạn viết tương tự như ngôn ngữ C đã học. Các hàm khi khai báo trong JavaScript bắt buộc phải đặt trong thẻ <Script> ..... </Script>.
Không phải lúc nào chúng ta
cũng có thể sử dụng trình soạn thảo tích hợp kiểu như Frontpage hay Dreamweaver
để thiết kế giao diện trong ứng dụng web , đặc biệt là khi giao diện này có liên quan đến yếu tố lập
trình, khi đó người lập trình phải tạo các phần tử HTML hoàn toàn thủ công
(Code chứ không dùng kéo thả).
Do vậy, việc hiểu rõ cú pháp để tạo các phần tử
HTML là vô cùng quan trọng.
HTML, CSS, JS, Ajax
1. Cú pháp chung:
- <Tên_Loại_Phần_Tử <Thuộc tính 1> = “Giá trị” <Thuộc Tính> =
“Giá trị”… >
- <Tên_Loại_Phần_Tử Style = “Thuộc_tính: giá_trị; thuộc_tính : giá trị ;….;
>
- Kết hợp cả hai cách.
Tên loại phần tử HTML Thuộc tính
Button Name
Text VALUE
File MAXLENGTH
Hidden ReadOnly
Select Disable
TextArea Cols, Rows
CheckBox Multiple
TYPE
Phần “giá trị” có thể đặt trong cặp ngoặc kép hoặc cặp ngoặc đơn hoặc không cần
!!
Nếu đặt thuộc tính theo cách 2, thì có thể tham chiếu bảng sau (gọi là theo cú
pháp CSS)
2. Tạo một số phần tử cơ bản
a. Tạo nút nhấn
<Input name="KiemTra" TYPE="button" VALUE="Kiểm tra
dữ liệu">
<Input TYPE="Submit" VALUE="Đăng nhập"> b. Tạo ô nhập
<Input name="HoVaTen" TYPE="text" VALUE="Nguyễn Văn
A" size="20" MAXLENGTH="30">
<Input name="Khoa" TYPE="text" VALUE="Khoa Công nghệ
thông tin" size="40" MAXLENGTH="50"
readonly="true">
<Input name="Truong" TYPE="text" VALUE="Trường Đại
học sư phạm kỹ thuật Hưng Yên" size="40"
MAXLENGTH="50" Disabled="true">
d. Tạo ô nhập Password
<Input name="MatKhau" type="password"
value="123456" size="10" maxlength="20">
e. Tạo listbox
<select name="MonHoc" size="5" >
<option>Visual Basic</option>
<option>Lập trình .NET</option>
<option>Lập trình ASP</option>
</select>
f. Tạo ComboBox (chỉ cần bỏ thuộc tính size)
<select name="Mon" size = 1 onChange="Call
DocGiaTriListBox">
<option value = "Visual Basic">Visual Basic</option>
<option value = "DOT_NET">Lập trình .NET</option>
<option value = "ASP">Lập trình ASP</option>
</select>
g. Tạo hộp kiểm
<Input name="chkVB" type="checkbox" value="Visual
Basic" checked> Visual Basic
<Input name="chkASP" type="checkbox" value="ASP
"> Active Server Pages
CSS là chữ viết tắt của cụm từ tiếng
anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu
vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file
này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất
định của tài liệu HTML như màu sắc, font chữ, . . ..
CSS- THẾ MẠNH CỦA CSS
- Tách
riêng phần định dạng ra khỏi nội dung trang web.
- CSS
giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất. Nó
giúp bạn tiết kiệm công sức rất nhiều trong việc thiết kế giao diện.
- Do được
tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn, giúp bạn
thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html cũng
được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều
lần (cache), do đó giúp trang web được load nhanh hơn.
Cách
khai báo CSS trong tài liệu HTML.
Chúng ta
có 3 cách để khai báo CSS trong tài liệu HTML là CSS cục bộ, CSS nội tuyến và CSS
ngoại tuyến:
1. CSS cục bộ
Viết mã
CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc tính style, CSS cục bộ chỉ
có tác dụng trong thẻ HTML được khai báo.
Ví dụ
1
<p style="font-size:
16pt; color: blue">Đoạn văn bạn sẽ bị ảnh hưởng khi khai báo CSS cục
bộ.</p>
2. CSS nội tuyến
CSS nội
tuyến là phần mã CSS được khai báo trong cặp thẻ <style> và đặt trong
phần <head> của tài liệu HTML.
Khi sử dụng CSS nội tuyến nó sẽ có tác dụng lên file html được khai báo nhưng
không ảnh hưởng đến các file khác trong cùng một website.
1
<style>
2
h1,h2,h3
{font-size: 14px;}
3
p
{color:blue;}
4
</style>
3. CSS ngoại tuyến
Đây là
cách khai báo CSS được sử dụng nhiều nhất trong thực tế. và cách khai báo này
mới tận dụng được hết thế mạnh mà CSS mang lại, tách biệt hoàn toàn khỏi tài
liệu HTML, người thiết kế chỉ cần viết một file CSS duy nhất mà sử dụng nhiều
lần trong ứng dụng của họ.
Nó có phạm vi ảnh hưởng toàn bộ đến toàn bộ website chứ không chỉ một file
.html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của một thành
phần nào đó trong website thì chỉ cần chỉnh sửa file CSS này thay vì phải chỉnh
sửa tất cả các file .html trong ứng dụng. Đến đây chúng ta thấy được sự cần thiết
và hiệu quả mà CSS đem lại.
Để khai báo css ngoại tuyến, ta chỉ cần tạo một file style.css
chẳng hạn, sau đó chèn đoạn code sau trong phần <head></head> của
trang web.
CSS cục
bộ » CSS nội tuyến » CSS ngoại tuyến » CSS mặc định của trình duyệt.
Để hiểu
hơn về thự tự ưu tiên của CSS ta xét ví dụ sau:
Giả sử
trong tài liệu HTML ta có mã HTML như sau
1
<p>Nội
dung sẽ được hiển thị theo khai báo của CSS</p>
Và khai
báo CSS như sau
CSS cục
bộ
1
<p style="color="red">...</p>
CSS nội
tuyến có mã như sau
1
p{
color: green }
CSS ngoại
tuyến như sau
1
p{
color: black }
Thì lúc
này đoạn văn bản được hiện thị với màu đỏ. Bởi vì ta thấy thành phần
được khai
báo CSS cục bộ lên sẽ được ưu tiên hơn CSS nội tuyến và CSS ngoại tuyến.
Tương tự
như thế, khi ở ví dụ trên nếu ta không khai báo CSS cục bộ thì đoạn văn bản sẽ
được hiện thị là màu xanh. Bởi vì CSS nội tuyến được ưu tiên hơn, tiếp theo nếu
CSS nội tuyến không được khai báo thì CSS ngoại tuyến mới có tác dụng.
Thẻ
HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn.
Những
thẻ HTML thường có một cặp giống như <b> và </b>
Thẻ
thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc.
Dòng
chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung.
Những
thẻ HTML không phân biệt in hoa và viết thường, ví dụ dạng <b> và
<B> đều như nhau,
Thành phần HTML
Nhớ lại ví dụ ở trên của chúng ta về HTML
<html>
<head>
<title>HTML</title>
</head>
<body> www.html.edu.vn/ and
www.niit.vn <b>Photoshop and web
design resources </b>
</body>
</html>
<b>Photoshop and web design resources </b>
Thành phần của HTML bắt đầu với thẻ: <b>
Nội dung của nó là: Photoshop and web design resources Thành phần của HTML kết thúc với thẻ: </b>
Mục đích của thẻ <b> là để xác định một thành phần của HTML phải được thể
hiện dưới dạng in đậm
Đây cũng là một thành phần của HTML:
<body> www.html.edu.vnand www.php.niit.vn. <b>Photoshop and
web design resources </b>
</body>
Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết
thúc </body>. Mục đích của thẻ <body> là xác định thành phần của
HTML bao gồm nội dung của tài liệu.
Các thuộc tính của thẻ HTML
Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung
cấp thông tin về thành phần HTML của trang web. Tag này xác định thành phần
thân của trang HTML: <body>. Với một thuộc tính thêm vào là bgcolor, bạn
có thể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như
sau: <body bgcolor="red"> hoặc <body
bgcolor="#E6E6E6"> (#E6E6E6 là giá trị hex của màu)
Thẻ này sẽ xác định dạng bảng HTML:<table> với một thuộc tính
đường viền (border), bạn có thể báo cho trình duyệt biết rằng bảng sẽ không có
đường viền: <table border="0">
Thuộc tính luôn luôn đi kèm một cặp như name/value:
name="value" (tên="giá trị")
thuộc tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML.
Dấu ngoặc kép, "red" hoặc 'red' Giá trị
thuộc tính nên được đặt trong dấu trích dẫn " và ". Kiểu ngoặc kép
như vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng.
Ví dụ trong một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thuộc tính đã
mang dấu ngoặc kép rồi, thì việc sử dụng ngoặc đơn là cần thiết. Ví du
name='ban"tay"den'
Cơ bản về các thẻ HTML
Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và
xuống dòng.
Headings
Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác
định heading lớn nhất. <h6> xác định heading nhỏ nhất
<h1>Đây là heading</h1>
<h2>Đây là heading</h2>
<h3>Đây là heading</h3>
<h4>Đây là heading</h4>
<h5>Đây là heading</h5>
<h6>Đây là heading</h6>
HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.
Đoạn văn - paragraphs
Paragraphs được định dạng bởi thẻ <p>.
<p>Đây là đoạn văn</p>
<p>Đây là một đoạn văn khác</p>
HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.
Line Breaks - xuống dòng
Thẻ <br> được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn
bắt đầu một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn
viết nó.
<p>Đây <br> là một đo<br>ạn văn với thẻ xuống
hàng</p>
Thẻ <br> là một thẻ trống, nó không cần thẻ đóng dạng </br>
Lời chú thích trong HTML Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML.
Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích
để giải thích về code của bạn, để sau này bạn có phải quay lại chỉnh sửa gì thì
cũng dễ nhớ hơn.
<!-- Chú thích ở trong này -->
Bạn cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần ở dấu
lớn hơn.
Những thẻ HTML cơ bản
Tag
Mô Tả
<html>
Xác định một văn bản dạng HTML
<body>
Xác định phần thân của tài liệu
<h1> to <h6>
Xác định header từ 1 đến 6
<p>
Xác định một đoạn văn
<br>
Chèn một dòng trắng
<hr>
Xác định một đường thẳng
<!-->
Xác định vùng chú thích
Định dạng chữ bằng HTML
HTML có thể dùng để định dạng văn bản như ta làm với Word như đậm, nghiêng
hoặcgạch chân
Các ký tự
đặc biệt trong HTML
Một vài ký tự tương tự như dấu nhỏ hơn <, có một ý nghĩa đặc biệt trong
HTML, và do đó không thể được sử dụng như là chữ được. Do vậy để hiển thị được
dấu nhỏ hơn < trong HTML chúng ta phải sử dụng những ký tự đặc biệt. Bởi vì
dấu < xác định điểm bắt đầu của một thẻ HTML. Nên nếu bạn muốn trình duyệt
hiển thị ký tự đó bạn phải thêm và code của nó những ký tự đặc biệt.
Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và
một dãy số và cuối cùng là dấu chấm phẩy ;
Để hiển thị được dấu nhỏ hơn trong HTML bạn phải viết là < hoặc
<
Cái hay của việc sử dụng tên thay vì sử dụng số là vì tên của nó thì dễ nhớ hơn
nhiều. Nhưng cái dở lại là không phải trình duyệt nào cũng hỗ trợ những tên mới
này, trong khi đó hầu hết các trình duyệt đều có thể nhận ra nó ở dạng số.
Bạn nên chú ý rằng ký tự đặc biệt phân biệt chữ hoa và chữ thường. Ví dụ sau
đây sẽ giúp bạn thực nghiệm với những ký tự đặc biệt. Lưu ý bạn rằng những ký
tự này chỉ có trong trình duyệt Internet Explorer.
Non-breaking space
Ký tự được dùng nhiều nhất trong HTML có lẽ là nbsp (non-breaking space)
Thường thì HTML cắt bớt khoảng trống trong chữ của bạn. Ví dụ nếu bạn viết 10
chỗ trống trong text của bạn thì HTML sẽ loại bỏ 9 trong số đó. Để thêm khoảng
trống vào chữ của bạn, bạn phải sử dụng ký tự đặc biệt là
Liên kết HTML HTML sử
dụng siêu liên kết để liên kết những tài liệu khác nhau trên trang web.
Thẻ Anchor và thuộc tính Href
HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệu
khác.
Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet, chúng
có thể là một trang HTML, một tấm hình, một file nhạc, một bộ phim .v.v.
Cú pháp để tạo một thẻ anchor
<a href="url">Chữ bạn muốn ở
đây</a>
Thẻ <a> được sử dụng để tạo một điểm neo và liên kết bắt đầu từ
đó, thuộc tính href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và
chữ ở xuất hiện ở giữa hai tag < và > sẽ được hiển thị dưới dạng siêu
liên kết.
Điểm neo sau xác định liên kết đến diễn đàn của vietphotoshop.com
<a href="http://www.niit.vn/forum">Mời
bạn vào diễn đàn của NIIT</a>
Dòng code ở trên sẽ xuất hiện như sau trong trình duyệt.
Mời bạn vào diễn đàn của HV NIIT
Thuộc tính đích đến:
Với thuộc tính đích đến, bạn có thể xác định liên kết đến tài liệu khác sẽ được
mở ra ở đâu. Dòng code dưới đây sẽ mở tài liệu được liên kết trong một cửa sổ
trình duyệt mới.
<a href="http://www.niit.vn/forum"target="_blank">Mời
bạn vào diễn đàn của NIIT</a>
Thẻ anchor và thuộc tính tên
Thuộc tính tên được sử dụng để tạo một điểm neo đã được đặt tên. Khi sử dụng
điểm neo đã được đặt tên trước chúng ta có thể tạo ra những đường liên kết mà
người đọc có thể nhảy trực tiếp đến một phần cụ thể nào đó trên trang web, thay
vì họ phải kéo xuống dưới để tìm thông tin. Một dạng như là bookmark vậy!
Dưới đây là cú pháp của điểm neo được đặt tên trước:
<a name="Tên">Chữ bạn muốn hiển
thị ở đây</a>
Thuộc tính tên được sử dụng để tạo điểm neo. Tên của điểm neo có thể là
bất cứ thứ gì bạn muốn.
Dòng code sau xác định điểm neo được đặt tên trước.
<a name="Photoshop Tutorial">Tất
cả tutorial ở đây</a>
Bạn có thể nhận ra rằng thẻ anchor được đặt tên trước được hiển thị
không có gì đặc biệt. Để trực tiếp liên kết phần Photoshop Tutorial, bạn chỉ
phải thêm dấu # và tên của điểm neo và cuối cùng của một URL. Xem ví dụ sau
<a href="http://www.niit.vn/#tutorials">Quay
lại trang tutorials</a>
Một đường liên kết đến phần Quay lại trang tutorials TỪ trang
"html_chuong_3.htm" sẽ như sau:
<a href="#tutorials">Quay lại
trang tutorials</a>
Mẹo giúp bạn
Luôn luôn thêm một đường dẫn mỗi khi bạn muốn dẫn đến một thư mục con. Nếu bạn
để đường liên kết như sau:
href="http://www.html.edu.vn/html"
thì bạn sẽ tạo ra 2 lệnh HTTP cho server, bởi vì server sẽ thêm một đường dẫn
vào địa chỉ và tạo ra một lệnh mới như sau:
href="http://www.php.niit.vn/html/"
Điểm neo được đặt tên thường được sử dụng để tạo Mục Lục tại trang đầu tiên của
một tài liệu nhiều trang. Môi chương trong tài liệu đó được cho một điểm neo,
và liên kết đến mỗi một điểm neo này sẽ được đặt ở trên cùng của tài liệu.
Nếu trình duyệt không tìm được điểm neo được chỉ ra từ trước, nó sẽ quay lên
phần trên cùng của tài liệu.
HTML Frames
Với frame bạn có thể hiển thị nhiều trang web trên cùng một cửa sổ trình duyệt.
Mỗi một tài liệu HTML được gọi là một frame, và mỗi frame đều độc lập với những
frame khác.
Những nhược điểm khi sử dụng frame:
Người làm web phải theo dõi nhiều tài liệu HTML
Khó có thể in ấn toàn bộ trang web.
Thẻ frameset
Thẻ <frameset> xác định bạn sẽ chia cửa sổ trình duyệt thành những frame
như thế nào. Môi một frame xác định một tập hợp các hàng hoặc cột. Giá trị của
hàng hoặc cột chỉ ra diện tích của màn hình mà frame đó sẽ chiếm.
Thẻ Frame
Thẻ <frame> xác định tài liệu HTML nào sẽ được chèn vào mỗi frame.
Ở ví dụ dưới đây bạn có một frameset với hai cột. Cột thứ nhất được thiết lập
là chiếm 25% độ rộng của cửa sổ trình duyệt. Cột thứ hai được thiết lập sẽ
chiếm 75% độ rộng của cửa sổ trình duyệt. Tài liệu html tên là
"frame_a.htm" được chèn vào cột thứ nhất, và "frame_b.htm"
được chèn vào cột thứ hai.
Mẹo nhỏ giúp bạn
Nếu frame của bạn có đường viền thì người dùng có thể định lại kích thước bằng
cách kéo nó. Để tránh việc này bạn có thể thêm noresize="noresize"
vào thẻ <frame>
Thêm thẻ <noframes> cho trình duyệt không hỗ trợ frame.
Thẻ frame
Tag
Mô Tả
<frameset>
Kiểu a set of frames
<frame>
Kiểu a sub window (a frame)
<noframes>
Kiểu a noframe section for browsers that do
not handle frames
<iframe>
Kiểu an inline sub window (frame)
Bảng HTML
Với HTML bạn cũng có thể tạo bẳng cho trang web của mình.
Bảng
Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều hàng
với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ
<td>. Cbữ td là chữ viết tắt của "table data", là nội dung của
cột dữ liệu. Một cột dữ liệu có thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn,
form và bảng v.v.
Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt
row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2
Bảng và thuộc tính đường biên
Nếu bạn không thiết lập thuộc tính đường biên cho bảng thì bảng của bạn sẽ được
hiển thị mà không có đường biên. Đôi khi nó có thể hữu dụng nhưng thường thì
bạn muốn bảng của bạn có đường biên.
Để hiển thị đường biên của một bảng, bạn phải sử dụng thuộc tính đường biên.
Danh sách HTML
HTML hỗ trợ những dạng danh sách theo thứ tự, không theo thứ tự và định nghĩa.
Ví dụ
Danh sách không theo thứ tự
Danh sách theo thứ tự
Danh sách không theo thứ tự
Danh sách không theo thứ tự là một danh sách các mục. Danh sách của các mục sẽ
được đánh dấu bởi những bullet (dạng như gạch đầu dòng nhưng là một vòng tròn
màu đen).
Danh sách không theo thứ tự bắt đầu với thẻ <ul>. Mỗi một mục được bắt
đầu với một thẻ <li>.
Ở giữa những mục trên bạn có thể chèn thêm chữ vào như là xuống hàng,
hình ảnh, đường liên kết thậm chí là một danh sách khác.
Danh sách theo thứ tự
Danh sách theo thứ tự cũng là một dạng danh sách của các mục. Nhưng những mục
trong đó được đánh dấu bởi số. Một danh sách theo thứ tự bắt đầu với thẻ
<ol>. Mỗi mục được bắt đầu với thẻ <li>.
Ở giữa những mục trên bạn có thể chèn thêm chữ vào như là xuống hàng,
hình ảnh, đường liên kết thậm chí là một danh sách khác.
HTML form và trường nhập liệu.
HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của người dùng.
Form
Một form là một vùng mà nó bao gồm những thành phần của form. Thành phần của
form là những thành phần cho phép người dùng có thể điền thông tin như là
trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào một form.
Một form được xác định bởi thẻ <form>
<form>
<input>
<input>
</form>
Nhập liệu
Thẻ form được sử dụng nhiều nhất là thẻ <input>. Loại dữ liệu nhập vào sẽ
được xác định bởi thuộc tính của nó. Những trường nhập liệu được sử dụng nhiều
nhất được giải thích ở dưới đây.
Text field
Text field được sử dụng khi bạn muốn người dùng đánh chữ, số v.v.. vào một
form.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
Nó sẽ xuất hiện như sau trong trình duyệt
First name:
Last name:
Bạn chú ý rằng bản thân của form thì bị ẩn đi. Hơn nữa trên hầu hết các trình
duyệt trường text được mặc định là 20 ký tự.
Nút radio
Nút radio được sử dụng khi bạn muốn người dùng chọn một trong những lựa chọn
bạn đưa ra.
Hộp kiểm
Hộp kiểm được sử dụng khi bạn muốn người chọn có thể chọn nhiều lựa chọn hơn.
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
Nó sẽ như sau trong trình duyệt
I have a bike
I have a car
Thuộc tính hoạt động cùa form và nút Submit.
Khi người dùng nhấp chuột vào nút "submit", nội dung của form đó sẽ
được gửi đến một tệp tin khác. Thuộct ính hoạt động của form xác định tên của
file mà nó sẽ gửi nội dung đến. Tệp tin đó được xác định trong thuộc tính hoạt
động của form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được.
Khi bạn gõ tên bạn vào trường chữ ở trên và nhấp vào nút Submit, bạn sẽ gửi
thông tin đó vào một trang gọi là "html_form_action.asp". Trang đó sẽ
chỉ cho bạn thấy dữ liệu nhận được.
Hình ảnh trong HTML
Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.
Ví dụ
Chèn hỉnh ảnh
Cách cho hiển thị một tấm hình trên trang web. Chèn hình ảnh từ những vị trí khác
Cách hiện một hoặc nhiều tấm hình từ một thư mục khác hoặc từ một server khác
trên trang web của bạn.
Thẻ Image và thuộc tính src
Trong HTML, hình ảnh được xác định bởi thẻ <img>. Để hiển thị một hình
trên trang web, bạn cần phải sử dụng thuộc tính src. Src là chữ viết tắt của
source. Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà bạn muốn hiển
thị trên trang web.
Cú pháp để xác định một tấm hình
<img src="url">
Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên
là "boat.gif" được đặt ở thư mục images trên www.php.niit.vn có địa chỉ URL là: http://www.php.niit.vn/images/boat.gif
Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài
liệu. Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển
thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.
Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình đó
không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía
trị của thuộc tính alt là một dòng chữ như sau:
<img src="boat.gif" alt="Big
Boat">
Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà
trình duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ
thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc tính
"alt" vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và
giúp những người lướt web mà không dùng hình ảnh.
Tạo image map
Cách tạo một image map, với những vùng có thể click được. Mỗi một vùng của hình
là một đường liên kết.
Biến tấm hình thành image map
Cách biến một tấm hình thành một image map. Bạn sẽ thấy nếu bạn di chuyển con
chuột lên trên tấm hình, góc phần tư sẽ xuất hiện trên thanh trạng thái.
Dòng code trên cùng thiết lập hình nền thành màu đen.
Background
Thuộc tính background thiết lập một tấm hình làm hình nền. Giá trị của thuộc
tính này là địa chỉ URL của tấm hình bạn muốn sử dụng. Nếu một tấm hình nhở hơn
so với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên đến khi nào nó che phủ
hết cửa sổ trình duyệt.
