Thứ Sáu, 21 tháng 6, 2013

Sự Kiện Trong HTML

Sự kiện trong HTML là gì?

 

Sự kiện là một tính năng của các tài liệu HTML (hiện diện trong ngôn ngữ lập trình khác nữa) cho phép tác giả để thêm các tương tác giữa các trang web và đó là du khách, bằng cách thực hiện các chương trình phía khách hàng khi khách truy cập (hoặc chương trình khác) thực hiện một hành động. Ví dụ, tác giả có thể làm cho một đoạn thay đổi màu sắc của văn bản của nó khi người dùng đặt con trỏ chuột lên nó.



Cũng như các thuộc tính, các sự kiện có thể dễ dàng xác định trong thẻ bắt đầu của một nguyên tố, với các định dạng tương tự:
<tag_name event_name="code">

Nội dung của sự kiện này là các mã được thực thi, và phải được tạo ra bằng cách sử dụng ngôn ngữ cleint-bên (ví dụ, JavaScript) phải được hỗ trợ bởi trình duyệt. Trong ví dụ tiếp theo, chúng ta định nghĩa một đoạn thay đổi màu sắc của văn bản của nó thành màu đỏ khi con chuột đi qua, và sang màu đen khi nó đi xa.


<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'"> Đây là một văn bản thay đổi màu sắc. Thử nó! </ P>

Danh sách các sự kiện trong HTML


Dưới đây là danh sách của tất cả các sự kiện có sẵn cho các tiêu chuẩn XHTML 1.0 HTML 4.01.

    Onload: Các sự kiện onload được kích hoạt khi tác nhân người dùng kết thúc tải một cửa sổ hoặc tất cả các khung trong một khung. Sự kiện này không bao gồm các yếu tố cơ thể HTML và các yếu tố framset HTML .

    Onunload: Sự kiện onunload được phát sinh khi tác nhân người dùng loại bỏ một tài liệu từ một cửa sổ hoặc khung. Sự kiện này không bao gồm các yếu tố cơ thể HTML và các yếu tố framset HTML .

    Onclick: Các sự kiện onclick xảy ra khi mouse click trên phần tử.

    Ondblclick: Sự kiện ondblclick được thực hiện khi các nút thiết bị trỏ đang nhấp đúp trên phần tử.

    OnMouseDown: Các onMouseDown được kích hoạt khi nút chuột được nhấn trên phần tử.

    Onmouseup: Sự kiện onmouseup là bắn khi nút thiết bị chỉ được phát hành trên phần tử.

    Onmouseover: Sự kiện onmouseover xảy ra khi chuột được di chuyển trên phần tử.

    Onmousemove: Sự kiện onmousemove được thực hiện khi thiết bị chỉ được di chuyển trong khi nó là trên phần tử.

    Onmouseout: Sự kiện onmouseout được kích hoạt khi chuột được di chuyển ra khỏi các phần tử.

    OnFocus: Sự kiện onFocus là bắn khi một phần tử nhận được tập trung, hoặc bởi các thiết bị trỏ hoặc tabbing chuyển hướng. Thuộc tính này không bao gồm các yếu tố có thể được sự tập trung.

    Onblur: Sự kiện onblur xảy ra khi các yếu tố mất tập trung, hoặc bởi các thiết bị trỏ hoặc tabbing chuyển hướng. Thuộc tính này không bao gồm các yếu tố có thể được sự tập trung: HTML là một yếu tố , yếu tố khu vực HTML , yếu tố nhãn HTML , yếu tố đầu vào HTML , HTML chọn yếu tố , yếu tố vùng văn bản HTML , và yếu tố nút HTML .

    OnKeyPress: Sự kiện OnKeyPress được thực hiện khi một phím được nhấn và phát hành trong khi nguyên tố này được tập trung. Thuộc tính này không bao gồm các yếu tố có thể được sự tập trung: HTML là một yếu tố , yếu tố khu vực HTML , yếu tố nhãn HTML , yếu tố đầu vào HTML , HTML chọn yếu tố , yếu tố vùng văn bản HTML , và yếu tố nút HTML .

    Onkeydown: Các sự kiện onkeydown được kích hoạt khi một phím được nhấn xuống trong khi các yếu tố tập trung.

    Onkeyup: Các sự kiện onkeyup là bắn khi một phím được phát hành trong khi nguyên tố này được tập trung.

    Onsubmit: Các sự kiện onsubmit xảy ra khi biểu mẫu được gửi. Thuộc tính này không bao gồm các yếu tố có thể được sự tập trung. Sự kiện này không bao gồm các yếu tố hình thức HTML .

    Onreset: Sự kiện onreset được thực hiện khi các hình thức được thiết lập lại. Sự kiện này không bao gồm các yếu tố hình thức HTML .

    Onselect: Sự kiện onselect được kích hoạt khi người dùng lựa chọn một số văn bản trong lĩnh vực văn bản. Sự kiện này không bao gồm các yếu tố đầu vào HTML và các vùng văn bản phần tử HTML .

    Onchange: Các sự kiện onchange là bắn khi một lỗ kiểm soát tập trung đầu vào và giá trị của nó đã được thay đổi kể từ khi đạt được trọng tâm. Sự kiện này không bao gồm các yếu tố đầu vào HTML , các phần tử HTML chọn và các vùng văn bản phần tử HTML .

Thứ Ba, 18 tháng 6, 2013

Mã màu trong HTML

Để tạo cho web của bạn có điểm nhấn thì bạn cần phải quan tâm đến mã màu trong HTML


Mã màu HTML có sáu giá trị hex (ví dụ: # AADDBB). Những sáu chữ đại diện cho 2 cho màu đỏ, 2 cho màu xanh lá cây và 2 cho màu xanh. Và cũng có thể, giá trị bắt đầu từ 00 đến ff (tối thiểu đến tối đa). Bây giờ, nếu chúng ta muốn tạo ra bất kỳ màu sắc, chúng ta có thể chỉ là giả định rằng những gì số lượng màu sắc chúng ta cần? Ví dụ để tạo ra màu đỏ, chúng ta không cần màu xanh lá cây hoặc màu xanh, chứ không phải chúng ta cần giá trị tối đa chỉ có màu đỏ.

Vì vậy, màu đỏ = ff0000, tương tự, nếu chúng ta cần màu vàng, chúng tôi loại bỏ màu đỏ và thêm số tiền bằng nhau của màu xanh và màu xanh lá cây. Tương tự là trường hợp của mã màu khác. Nếu bạn hiểu được thực tế này, chúng ta có thể tạo ra bất kỳ mã màu, như chúng tôi mong muốn bằng cách thay đổi parameres chứ không phải học những mã thuộc lòng. Và nó là cách tốt nhất để làm việc với mã màu HTML. Trừ khi bạn sử dụng phần mềm đặc biệt cho


 Một số giá trị màu trong HTML


Học HTML, HTML
Mã màu HTML

Học HTML, HTML
Màu HTML

Học HTML, HTML
Học HTML

Học HTML, HTML
HTML

Học HTML, HTML
HTML

Học HTML, HTML
Học HTML

Học HTML, HTML
HTML

Học HTML, HTML
Mã màu HTML

Học HTML, HTML
HTML

Thứ Ba, 11 tháng 6, 2013

Bài 13: Bài Tập thực hành Nội dung động- Định vị động

 Hôm nay chúng ta sẽ cùng nhau nghiên cứu một số bài tập về Nội dung động trong HTML

HTML, học HTML
HTML, CSS

Bài  1:  Thay đổi thuộc tính innerText

Yêu cầu: Tạo một dòng chữ "I am having fun" thành "This is great fun" khi người dùng click chuột.
Hướng dẫn: Bạn có thể dùng bất kỳ thẻ gì (thẻ H, thẻ P v.v...) để tạo dòng chữ ở trên. Do đầu bài yêu cầu là chỉ thay đổi dòng văn bản, do vậy chúng ta sẽ thay đổi thuộc tính innerText, dòng lệnh này sẽ đặt trong sự kiện onClick.


Minh hoạ :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
       <h2 id="ID1" onClick="document.all.ID1.innerText='This is great fun'">I am having func</h2>
</body>
</html>

Bài  2: Thay đổi thuộc tính innerHTML


Yêu cầu: Tạo một dòng chữ "Click here". Khi người dùng click chuột vào thì dòng chữ đó biến thành nút có nhãn là "Having fun"


Hướng dẫn:
•    Bạn có thể sử dụng bất kỳ thẻ nào để hiển thị dòng chữ "Click here"
•    Trong sự kiện click chuột (onMouseMove) bạn viết lệnh thay nội dung trong thẻ bằng nội dung mới (Nội dung này là thẻ tạo nút).


Minh hoạ:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
        <h2 id="ID1" onClick="document.all.ID1.innerHTML='<input type=button value = OK>'">
        Click here
       </h2>
</body>
</html>

Bài 3: Thay thế thuộc tính outerText.


Yêu cầu: Tạo một nút có nhãn là "Open". Khi người dùng click vào nút này thì mở trang http://www.echip.com.vn, trong một cửa sổ mới và dòng nút đó sẽ thay bằng dòng chữ "Trang này đã mở".
Hướng dẫn:
•    Để mở một trang web trong một cửa sổ mới, bạn viết: window.open("Địa chỉ URL của trang cần mở", "_Blank")
•    Thay thế nút bằng một dòng chữ thông qua thay đổi thuộc tính outerText của nút.


Minh hoạ:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT language="JavaScript">
    function ThayDoi()
    {
        window.open("http://www.echip.com.vn","_blank");
        document.all.Nut1.outerText='"Trang này đã thăm";
    }
</SCRIPT>
<body>
    <INPUT id="Nut1" type="button" value="Open" onClick="ThayDoi();">
</body>
</html>

Bài  4: Thay đổi thuộc tính outerHTML

Yêu cầu: Tạo một dòng chữ "Click here" có màu xanh, kích cỡ H1. Khi người dùng click vào dòng chữ này thì thay bằng một liên kết đến trang http://www.niit.vn
Hướng dẫn: Do ở đây khi người dùng click vào dòng chữ thì thay thế bằng một liên kết nên thuộc tính cần thay đổi sẽ là outerHTML. Câu lệnh thay đổi sẽ được đặt trong sự kiện Click chuột.


Minh hoạ:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT language="JavaScript">
      function ChenLienKet()  
      {
            document.all.LienKet.outerHTML='<A HREF = "http://www.niit.vn">Trang NIIT</A>' ;
      }
</SCRIPT>
<body>
    <h1 id="LienKet" style="color:blue" onClick="ChenLienKet()">Click Here</h1>
</body>
</html>

Bài 5: Định vị động trong IE

Yêu cầu: Tạo một nút có nhãn là "Sign Up". Khi chuột di chuyển trong nút này thì hiển thị dòng nhắc là "Đăng ký hòm thư mới" có màu nền là vàng tại vị trí của con chuột. Khi chuột di chuyển ra ngoài thì dòng nhắc ẩn đi.
Hướng dẫn: Bạn tạo ra một tầng chứa dòng chữ "Đăng ký hòm thư mới" có màu nền là vàng. Khi chuột di chuyển đến (onMouseMove) thì đặt thuộc tính visibility là 'visible' để cho hiện tầng đó và khi di chuyển chuột ra ngoài (onMouseOut) thì đặt lại thuộc tính visibility là 'hidden' để ẩn tầng. Lưu ý, vị trí của chuột được lưu trong thuộc tính event.clientX và event.clientY. Bạn sẽ gán vị trí này của chuột cho 2 thuộc tính pixelLeft và pixelTop để định vị tầng.


Minh hoạ:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT language="JavaScript">
    function HienThi()  
    {
        document.all.Tang1.style.pixelLeft = event.clientX;
        document.all.Tang1.style.pixelTop = event.clientY;
        document.all.Tang1.style.visibility = 'visible';       
    }

    function AnTang() // Ẩn Tầng Tang1
    {
        document.all.Tang1.style.visibility = 'hidden';
    }
</SCRIPT>
<BODY>
    <INPUT type="button" value="Sign Up"
        onMouseMove="HienThi();"
        onMouseOut="AnTang()">

    <DIV id= Tang1 style="position:absolute; visibility: hidden; background-color:yellow">
        Đăng ký hòm thư mới
    </DIV>
</BODY>
</html>


Kết quả khi chuột di chuyển vào trong nút

Bài  6: Nội dung trong Netscape

Yêu cầu: Tạo một tầng có tên là Tang1, một nút nhấn có nhãn là "Nạp trang Web" và một hộp text có tên là DiaChi. Khi người dùng nhập địa chỉ vào trong hộp text và nhấn nút "Nạp trang web" thì nội dung của trang đó sẽ được nạp vào tầng Tang1.

Hướng dẫn:
- Dùng thẻ LAYER để tạo tầng và đặt tên cho nó là Tang1
- Viết trong sự kiện onCLick của nút "Nạp trang web" câu lệnh nạp tài liệu vào tầng. Cú pháp nạp tài liệu vào một tầng trong Netscape như sau:
document.<Tên tầng>.src = "Địa chỉ trang cần nạp"
Trong trường hợp này sẽ là :
document.Tang1.src = document.form1.DiaChi.value

Minh hoạ:

<html>
<head>
<TITLE>Hiển thị tooltip</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <LAYER name="Tang1">
    <h1> Tầng này dùng để hiển thị trang Web bạn gõ trong hộpText !
   </LAYER>
  
   <FORM name="Form1">
        <INPUT type="text" name="DiaChi">
        <INPUT type="button" onClick="document.Tang1.src = document.form1.DiaChi.value">
   </FORM>

</body>
</html>


Mong rằng sau khi làm các bài tập trên các bạn sẽ hiểu sâu hơn về Nội dung động - Định vị động trong HTML

Thứ Hai, 10 tháng 6, 2013

Bài 12: Noi Dung Dong Va Dinh Vi Dong

Chúng ta sẽ cùng nhau tìm hiểu Nội dung động và định vị động

 

1. HTML - Đôi nét về nội dung động

  Nội dung động là khả năng cho phép thay đổi nội dung của trang web bằng các lệnh Script.

Để thay đổi nội dung của một phần tử nào đó trong IE, chúng ta có thể thay đổi một trong 4 thuộc tính của nó :
•    innerText
•    innerHTML
•    outerText
•    outerHTML
Cú pháp dùng để thay đổi giá trị của các thuộc tính như sau:
document.all.<Giá trị của thuộc tính ID>.<Tên thuộc tính> = <Giá trị mới>
Trong đó <Tên thuộc tính là một trong số 4 thuộc tính nêu trên.

2. Định vị (Thay đổi vị trí) các tầng trong IE và Netscape

Lưu ý  : Để thay đổi vị trí của một phần tử nào đó trong IE và Netscape, trớc hết bạn cần phải đặt phần tử đó trong một tầng.

a.  Thay đổi trong IE

Bạn cần thay đổi 2 thuộc tính của tầng là pixelLeft và pixelTop.
•    Thuộc tính pixelLeft qui định di chuyển sang phải / sang trái
•    Thuộc tính pixelTop qui định di chuyển lên trên / xuống dưới

Cú pháp câu lệnh để thay đổi như sau:
document.all.<Giá trị ID>.style.pixelLeft = <Vị trí cần di chuyển đến>
document.all.<Giá trị ID>.style.pixelTop = <Vị trí cần di chuyển đến>

b.  Thay đổi trong Netsape

Trong Netscape, muốn thay đổi bạn cũng chỉ việc thay đổi 2 thuộc tính là top và left, như sau:
    document.<Tên tầng>.top = <Vị trí cần di chuyển>
    document.<Tên tầng>.left = <Vị trí cần di chuyển>
Trong đó, Tên tầng chính là giá trị của thuộc tính name do bạn đặt.
Để các bạn có thể hiểu rõ hơn về nội dung này thì chúng ta sẽ thực hành với một số bài tập ở bài sau.

Các bạn có thể tham khảo nội dung của khóa học này tại  Tạo web với HTML5 & CSS3

Mọi thắc mắc bạn có thể liên hệ lại theo số:

Hotline: 
Nguyen Thuy Lam