Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Wednesday, December 11, 2013

Danh sách các thẻ trong HTML

Bạn muốn có danh sách ngắn gọn các thẻ trong HTML? Bạn muốn xem lại bất cứ khi nào mình muốn? Thế thì bạn đã đến đúng nơi! Trong bài viết này Blog Mạng Lưới Toàn Cầu sẽ cung cấp cho bạn thông tin đơn giản nhưng đầy đủ về các thẻ HTML.

Tài Liệu HTML chuẩn

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề bài viết</title>
</head>

<body>
Nội dung bài viết...
</body>

</html>

Các thẻ cơ bản

<h1>Thẻ quan trọng nhất, có kích thước lớn nhất</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Thẻ quan trọng kém nhất, có kích thước nhỏ nhất</h6>

<p>Dùng cho văn bản</p>
<br> (Dùng để ngắt dòng)
<hr> (Tạo đường kẻ ngang)
<!-- Để lại chú thích trong HTML -->

Các thẻ dùng để định dạng

<b>Bôi đậm văn bản</b>
<i>Chữ in nghiêng</i>
<u>gạch chân văn bản</u>
<strong>Văn bản quan trọng</strong>
<em>Nhấn mạnh văn bản</em>
<code>Mã máy tính</code>
<small>Chữ nhỏ hơn</small>

<abbr> (giải thích chữ viết tắt)
<address> (địa chỉ liên hệ)
<blockquote> (dẫn nguồn trích dẫn)
<sub> (dùng để tạo chỉ số dưới)
<sup> (dùng để tạo chỉ số trên)

Liên kết

Liên kết dạng văn bản: <a href="http://www.mangluoitoancau.com/">Blog Mạng Lưới Toàn Cầu</a>
Liên kết dạng hình ảnh: <a href="http://www.mangluoitoancau.com/"><img src="URL nguồn ảnh" alt="Văn bản thay thế"></a>
Liên kết tới email: <a href="mailto:mangluoitoancau.com@gmail.com">Gửi email đến Blog Mạng Lưới Toàn Cầu</a>

Ảnh

<img src="URL nguồn ảnh" alt="Văn bản thay thế" height="100" width="100" title="mô tả ảnh khi hover qua">

Định dạng style và section

<style type="text/css">
a {color:red;}
h2 {color:blue; font-size:18px;}
</style>

<div>Định vị một khu vực Block trong tài liệu HTML</div>

<span>Định vị khu vực inline trong tài liệu HTML</span>

Danh sách không có thứ tự

<ul>
<li>Nội dung</li>
<li>Nội dung</li>
</ul>

Danh sách có thứ tự

<ol>
<li>Nội dung thứ nhất</li>
<li>Nội dung thứ hai</li>
</ol>

Bảng - table

<table border="1">
<tr>
<th>Tiêu đề cột</th>
<th>Tiêu đề cột</th>
</tr>
<tr>
<td>nội dung</td>
<td>nội dung</td>
</tr>
</table>

Iframe

<iframe src="http://www.mangluoitoancau.com"></iframe>

Thẻ Form

<form action="xyly.php" method="post/get">

<input type="email" name="email" size="50" maxlength="50" required>
<input type="password" required>
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Gửi">
<input type="reset" value="Xóa">
<input type="hidden">
<select>
<option>Bánh Mỳ Trứng</option>
<option selected="selected">Bánh Mỳ Thịt</option>
<option>Bánh Mỳ Trộn</option>
</select>

<textarea name="binhluan" rows="50" cols="40"></textarea>

</form>

Entities - Các ký tự không thể gõ trực tiếp từ bàn phím

&#169; đại diện cho ©
&#8482; đại diện cho ™
&#163; đại diện cho £
Posted by at No comments:
Labels:

Sunday, December 8, 2013

Các thuộc tính trong HTML

Các thuộc tính trong HTML cung cấp thông tin bổ sung cho các thẻ. Nội dung của nó rất quan trọng, tuy nhiên sẽ không có ý nghĩa nhiều lắm nếu bạn chưa có tí kinh nghiệm nào với HTML và CSS.

Đặc điểm

  • Các thẻ HTML có thể chứa một hoặc nhiều thuộc tính
  • Các thuộc tính cung cấp thông tin bổ sung cho các thẻ
  • Các thuộc tính luôn nằm trong các thẻ mở (chứ không phải thẻ đóng nhé)
  • Các thuộc tính thường xuất hiện dưới dạng cặp tên/giá trị kiểu như: tên="giá trị"

Ví dụ

<a href="http://www.mangluoitoancau.com">Blog Mạng Lưới Toàn Cầu</a>

Trong ví dụ trên, href chính là một thuộc tính và http://www.mangluoitoancau.com là giá trị của thuộc tính href.

Luôn sử dụng dấu nháy cho giá trị

  • Giá trị của thuộc tính phải được đặt trong dấu nháy kép (đóng và mở), điều đó có nghĩa là bạn không được phép viết kiểu này: <a href=http://www.mangluoitoancau.com>Blog Mạng Lưới Toàn Cầu</a>
  • Bạn có thể đặt trong dấu nháy đơn nếu muốn nhưng dấu nháy kép là cách dùng phổ biến hơn, điều đó có nghĩa kiểu viết sau được chấp nhận: <a href='http://www.mangluoitoancau.com'>Blog Mạng Lưới Toàn Cầu</a>
  • Đôi khi (nhưng rất hiếm thôi) các giá trị bao gồm dấu nháy kép, khi đó bạn buộc phải sử dụng dấu nháy đơn cho giá trị, ví dụ: name='Ngày "Bát Giới" Trở Về'

Sử dụng chữ thường cho các thuộc tính

HTML chấp nhận cả chữ thường và HOA cho tên và giá trị của thuộc tính, dù vậy World Wide Web Consortium (W3C) - tổ chức quốc tế về tiêu chuẩn web khuyến cáo chúng ta nên sử dụng chữ thường mà thôi.

Trong XHTML (phiên bản nghiêm ngặt hơn của HTML) việc viết chữ in thường là điều bắt buộc.

Các thuộc tính phổ biến

  • Một số thuộc tính là hết sức phổ biến, nó có thể được sử dụng trong bất cứ thẻ nào của HTML. Nhóm thuộc tính quyền lực này có tên tiếng Anh là HTML Global Attributes - mà tôi cũng chưa biết phải dịch sao cho chuẩn.
  • Vài ví dụ về các HTML Global Attributes là các thuộc tính như: class, id, style, title
Posted by at No comments:
Labels:

Thursday, December 5, 2013

Thẻ title trong HTML

Thẻ title dùng để tạo tiêu đề cho bài viết, đây là thẻ cơ bản vào bậc nhất trong HTML và nó có ý nghĩa đặc biệt quan trọng khi SEO.
Code mẫu:

<html>

<head>
<title>Tiêu đề bài viết</title>
</head>

<body>
Nội dung bài viết
</body>

</html>

Ứng dụng

  • Cung cấp tiêu đề trên toolbar của trình duyệt
Tiêu đề bài viết hiện trên thanh toolbar
  • Hiển thị tiêu đề cho trang khi được thêm vào danh sách ưa thích của trình duyệt
Tiêu đề bài viết hiện lên trong danh sách ưa thích (còn gọi là dấu trang)
  • Cung cấp tiêu đề cho các bài viết trong kết quả trả về của các cỗ máy tìm kiếm (thí dụ: Google, Bing...)
Tiêu đề hiện trên kết quả trả về của Google

Trình duyệt hỗ trợ

Được hỗ trợ bởi tất cả các trình duyệt phổ biến gồm Chrome, FireFox, Opera, Safari và IE

Các chú ý

  • Mỗi một trang HTML chỉ được phép chứa duy nhất một phần tử title mà thôi
  • Nếu không có thẻ <title> nào trong trang HTML thì trang HTML đó sẽ được xác định là không hợp lệ
Tôi tạo một trang HTML không có thẻ title rồi sử dụng http://validator.w3.org để check lỗi, và đây là kết quả:

Thông báo lỗi khi thiếu thẻ title

Thông báo nói với chúng ta rằng, thẻ head bị thiếu thẻ title và bạn cần bổ sung nó.
Posted by at No comments:
Labels:

Thursday, November 14, 2013

Thẻ form trong HTML

Thẻ form là một trong những thẻ quan trọng nhất trong HTML, giữ vai trò tương tác giữa người dùng và trang web. Các thao tác trao đổi nội dung như đăng nhập, đăng ký, bình luận đều thông qua form và các thành phần khác liên quan.

Code mẫu

<form action="#" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Kết quả:

Họ tên:
Quê quán:

Trình duyệt hỗ trợ

Thẻ form được tất cả các trình duyệt thông dụng hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

Các thành phần trong form

Các thuộc tính

2 thuộc tính quan trọng hàng đầu trong form là action và method

Thuộc tính action

<form action="xuly.php" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Thuộc tính action dùng để xác định địa chỉ trang web mà những dữ liệu được nhập vào được gửi đến và xử lý, tùy vào ngôn ngữ lập trình web mà bạn có thể thấy đuôi file là php hoặc asp - Đoạn code ở form trên có nghĩa là thông tin về họ tên và quê quán được gửi tới file xuly.php

Thuộc tính method

<form action="xuly.php" method="post">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Thuộc tính method dùng để xác định cách thức dữ liệu được đẩy lên. Có 2 giá trị cho method:
  • get: dữ liệu sẽ được đưa lên và nhìn thấy được qua URL (và bạn sẽ thấy cặp tên=giá trị được gắn vào địa chỉ web), vì URL có chiều dài tối đa khoảng 3000 ký tự nên phương thức này không dành để gửi dữ liệu lớn. Ngoài ra vì dữ liệu đầu vào hiện trên URL nên phương thức này cũng không thích hợp với dữ liệu nhạy cảm - thí dụ như password. Tất nhiên ở phía ngược lại nó hợp với dữ liệu không nhạy cảm, chẳng hạn như các truy vấn tìm kiếm.
  • post: không giới hạn dung lượng dữ liệu, thích hợp với dữ liệu nhạy cảm, password chắc chắn phải dùng phương thức post.

Xử lý form

Posted by at No comments:
Labels: , ,

Thẻ textarea trong HTML

Thẻ textarea chuyên dụng trong Form, dùng để nhập văn bản. Thẻ input kiểu text cũng để nhập văn bản, nhưng thường là đoạn ngắn còn textarea được dùng để nhập cả đoạn văn bản dài.

Code mẫu:

<textarea rows="5" cols="40" placeholder="Gõ nội dung thông điệp vào đây">
</textarea>

Kết quả:

Trình duyệt hỗ trợ

Thẻ textarea được tất cả các trình duyệt phổ thông hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

Đặc điểm

  • Không giới hạn số ký tự nhập vào.
  • Kích thước của textarea được thay đổi thông qua thuộc tính rows và cols, nhưng cách tốt hơn để tác động đến kích thước là thông qua thuộc tính width và height trong CSS.

Các thuộc tính

#1. autofocus: khi vào trang thì con trỏ tập trung ngay lập tức tại textarea

Code:

<textarea rows="5" cols="40" autofocus>
</textarea>

Kết quả (nhấn phím F5 rồi kéo xuống đây - bạn sẽ thấy con trỏ chuột nhấp nháy trong ô textarea):



#2. cols - quy định chiều rộng tính theo số ký tự, rows - quy định số dòng

Code:

<textarea rows="5" cols="40">
</textarea>

Kết quả:



#3. disabled: vô hiệu hóa textarea

Code:

<textarea rows="5" cols="40" disabled>
</textarea>

Kết quả (bạn không thể gõ chữ vào texarea được nữa - vì nó đã bị vô hiệu hóa):



#4. form: quy định form mà textarea thuộc về.

Code:

<form action="#" id="yform">
Name: <input type="text" name="yname">
<input type="submit" value="Gửi">
</form>

<textarea name="comment" form="yform">Gõ vào đây...</textarea>

Kết quả (bạn có thể thấy textarea nằm ngoài thẻ form, nhưng nhờ thuộc tính form, trình duyệt vẫn biết rằng nó thuộc về form có id là yform):

Name:


#5. maxlength: số ký tự tối đa được phép nhập

Code:

<textarea rows="5" cols="40" maxlength="40">
</textarea>

Kết quả (bạn không thể nhập hơn 40 ký tự):



#6. name: tên của textarea - nó sẽ được dùng để định danh cho trường và là thông tin được gửi đi xử lý kèm văn bản được nhập.

Code:

<form action="xuly.php">
<textarea name="comment" rows="5" cols="40">Để lại bình luận của bạn.</textarea><br>
<input type="submit" value="Gửi">
</form>
Kết quả:


#7. placeholder: thông tin hướng dẫn, thường có màu xám và biến mất khi người dùng bắt đầu nhập dữ liệu



Code:

<textarea cols="40" placeholder="Văn bản màu xám này chính là placeholder" rows="5">
</textarea>

#8. readonly: quy định chỉ đọc văn bản trên textarea mà không cho nhập dữ liệu

Code:

<textarea rows="5" cols="40" readonly>
Bạn chỉ đọc được đoạn văn bản này mà không sửa hay thay đổi gì.
</textarea>

Kết quả:



#9. required: yêu cầu phải nhập văn bản mới được submit

Code:

<form action="#">
<textarea rows="5" cols="40" required>
</textarea><br >
<input type="submit" value="Submit">
</form>

Kết quả (bạn để trống textarea rồi nhấn Submit xem điều gì xẩy ra):


#10. wrap
    Posted by at 1 comment:
    Labels: ,

    Wednesday, November 13, 2013

    Thuộc tính value trong thẻ input

    Thuộc tính value là thuộc tính quan trọng trong thẻ input, chức năng của nó còn tùy thuộc vào loại thẻ input type cụ thể.

    Code mẫu

    <form action="#">
    <label>Nam:<input type="radio" name="gioi" value="nam"></label><br />
    <label>Nữ:<input type="radio" name="gioi" value="nu"></label><br />
    <input type="submit" value="Gửi">
    </form>

    Kết quả:



    Trình duyệt hỗ trợ

    Thuộc tính value được tất cả các trình duyệt phổ thông hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

    Cách dùng

    Như đã nói ở phần đầu tùy loại input mà thuộc tính value có tác dụng khác nhau:

    A. Trong các nút reset và submit thì value có tác dụng hiển thị đoạn text trên nút nhấn. Ví dụ:


    Code:

    <form>
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
    </form>

    B. Cho input kiểu text, password và hidden thì value xác định giá trị ban đầu của trường. Ví dụ:



    Code:

    <label>Họ tên: <input type="text" value="Nguyễn Đức Anh" /></label>

    C. Cho input kiểu checkbox, radio và image thì value xác định giá trị của các trường đó, và sẽ là thông tin được gửi đi khi submit. Ví dụ:






    Code:

    <label>Xe máy<input name="phuongtien" type="checkbox" value="xemay" /></label><br />
    <label>Xe bus<input name="phuongtien" type="checkbox" value="xebus" /></label><br />
    <label>Xe đạp<input name="phuongtien" type="checkbox" value="xedap" /></label><br />
    <label>Đi bộ<input name="phuongtien" type="checkbox" value="dibo" /></label>

    Các input type kiểu text, password hay hidden có thể không cần thuộc tính value vẫn OK, nhưng input kiểu checkbox và radio, thuộc tính value là bắt buộc, vì nếu không có thì nó sẽ gửi giá trị rỗng khi submit.

    Thông tin cuối cùng, thuộc tính value không được phép sử dụng với <input type="file">
    Posted by at No comments:
    Labels: ,

    Thẻ fieldset trong HTML

    Thẻ fieldset là thẻ chuyên dùng cho Form, nó có tác dụng nhóm các thành phần liên quan đến nhau trong Form.

    Code mẫu

    <form action="#">
    <fieldset>
    <legend>Thông tin cá nhân</legend>
    <label>Họ và tên: <input type="text" name="hoten"></label><br>
    <label>Quê quán<input type="text" name="quequan"></label>
    </fieldset>
    </form>

    Kết quả:

    Thông tin cá nhân

    Đặc điểm

    • Thẻ fieldset được hỗ trợ bởi tất cả các trình duyệt thông dụng, trong đó có Chrome, FireFox, Opera, Safari và IE.
    • Thẻ fieldset tạo đường viền màu xám xung quanh các thành phần mà nó nhóm lại.
    • Thẻ legend luôn đi kèm với fieldset, dùng để tạo tiêu đề cho nó. Trong thí dụ ở trên, đó chính là đoạn Thông tin cá nhân nằm trong legend. 

    Các thuộc tính mới

    • name: đặt tên cho fieldset
    • disabled: vô hiệu hóa fieldset
    • form: giúp bạn không cần lồng fieldset vào trong thẻ form nhưng vẫn chỉ định được nó thuộc về form nào.
    Posted by at No comments:
    Labels: ,

    Tuesday, November 12, 2013

    Thuộc tính placeholder của thẻ input

    Thuộc tính placeholder là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của placeholder là cung cấp thêm thông tin cho người dùng, giúp họ biết cần nhập dữ liệu gì.
    Code mẫu:

    <form action="#">
    <label>Họ tên:<input type="text" name="hoten" placeholder="Điền đầy đủ họ tên"></label>
    <label>Quê quán:<input type="text" name="quequan" placeholder="Quê trong Chứng Minh Thư"></label>
    <input type="submit" value="Gửi">
    </form>

    Kết quả:




    Khi người dùng bắt đầu nhập liệu, thông tin gợi ý sẽ biến mất.

    Trình duyệt hỗ trợ

    Được hầu hết các trình duyệt hỗ trợ trong đó có: Internet Explorer 10, Firefox, Opera, Chrome và Safari. Chú ý là IE 9 và các phiên bản sớm hơn không được hỗ trợ.

    Những thẻ input type dùng placeholder

    Gồm các input type sau: text, search, url, tel, email và password.
    Posted by at No comments:
    Labels: , ,

    Thuộc tính required của thẻ input

    Thuộc tính required là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của required là buộc người dùng phải nhập dữ liệu thì mới gửi được (submit). Dĩ nhiên thao tác này đỡ cho chúng ta khá nhiều code JavaScript.
    Code mẫu:

    <form action="#">
       <label>Họ tên:<input type="text"  name="hoten" required></label>
       <input type="submit" value="Gửi">
    </form>

    Kết quả:


    Giờ bạn không điền gì vào trường Họ tên, rồi nhấn nút Gửi thử xem, bạn sẽ nhận được thông báo kiểu như "Vui lòng điền vào trường này"

    Trình duyệt hỗ trợ

    Thuộc tính required được Internet Explorer 10, Firefox, Opera và Chrome hỗ trợ, đáng tiếc hiện Safari chưa đưa tính năng này vào. Nhưng tôi nghĩ sớm muộn gì Safari cũng cập nhật, vì những thuộc tính mới của input rất hữu ích với người thiết kế và người dùng.

    Những thẻ input type dùng requried

    Các input sau đây dùng thuộc tính requried: text, checkbox, radio, email, password, search, url, tel, date pickers, number,  file.

    Cách dùng

    Required là thuộc tính kiểu boolean, nghĩa là nó chỉ nhận 2 giá trị có hoặc không có. Nếu không có requried trong thẻ input nghĩa là không yêu cầu phải nhập đủ dữ liệu, ngược lại nếu có thì phải nhập đủ mới được Submit.

    Có sự khác biệt giữa XHTML và HTML. Vì XHTML không cho phép rút gọn thuộc tính cho nên với XHTML chúng ta phải viết đầy đủ như sau: <input required="required" />
    Posted by at No comments:
    Labels: , ,

    Cách dùng thẻ abbr trong HTML

    Thẻ abbr dùng để chú thích từ viết tắt giúp cho máy tìm kiếm, công cụ dịch thuật, công cụ kiểm tra chính tả hiểu nội dung web tốt hơn.
    Code mẫu:

     <abbr title="Unidentified Flying Object">UFO</abbr> còn gọi là Vật thể bay không xác định.

    Kết quả:

    UFO còn gọi là Vật thể bay không xác định.

    Thông tin được đưa vào thuộc tính title của thẻ abbr sẽ được sử dụng để biết từ đầy đủ của từ viết tắt. Khi bạn di chuột qua từ viết tắt, thông tin từ title cũng hiện ra.

    Bonus

    Nếu bạn muốn tìm nghĩa của các từ viết tắt mà mình chưa biết thì hãy vô trang web: http://www.acronymfinder.com/ nó chứa hơn 4 triệu từ viết tắt trong CSDL.
    Posted by at No comments:
    Labels:

    Monday, November 11, 2013

    Cách dùng thẻ label trong HTML

    Thẻ label dùng để định nghĩa nhãn cho các thẻ input trong HTML. Tác dụng của label là làm cho thao tác nhập liệu trở nên dễ dàng hơn.
    Code mẫu:

    <label for="hoten">Họ tên:</label><input type="text" name="hoten" id="hoten">

    Kết quả:


    Giờ bạn có thể nhấn vào chữ Họ tên để vào ô nhập liệu, hay nói cách khác, thẻ label làm tăng diện tích click chuột bắt đầu thao tác nhập. Nếu không có thẻ label, khi click vào chữ Họ tên sẽ không có điều gì xảy ra, giống như ví dụ dưới đây:

    Họ tên:

    Cú pháp của thẻ label

    Thẻ label yêu cầu thuộc tính for phải được điền giá trị, và giá trị trong thuộc tính id của input phải giống với giá trị trong thuộc tính for của label. Làm như thế để label biết được nó được dùng cho input nào.

    Mẹo

    Nếu bạn cho rằng cách dùng for và id lằng nhằng, thì bạn có thể không cần dùng nó mà vẫn cho kết quả tương tự, nhưng khi ấy bạn phải cho thẻ input nằm trong label, code mẫu:

    <label>Họ tên:<input type="text" name="hoten"></label>

    Kết quả:


    Các ví dụ khác

    Label  cho thẻ radio button




    Code mẫu:

    <form action="#">
    <label for="nam">Nam</label><input id="nam" name="gioi" type="radio" value="Nam" /
    <br />
    <label for="nu">Nữ</label><input id="nu" name="gioi" type="radio" value="Nữ" />
    <br />
    <input type="submit" value="Gửi" />
    </form>
    Posted by at No comments:
    Labels: ,

    Sunday, November 10, 2013

    9 thẻ input thường dùng trong HTML

    Các thẻ input type chuyên dụng trong các form, dùng để nhập liệu, kiểu như: đăng ký, đăng nhập, liên hệ, gửi file...Hôm nay chúng ta sẽ xem xét các thẻ input phổ biến nhất.

    Các input đều giống nhau về cấu trúc, chỉ khác nhau về type. Chính type này quyết định kiểu của input. Có đến hơn 20 type khác nhau. Một số type input chỉ được hỗ trợ trong HTML5. Các type giới thiệu trong ngày hôm nay được tất cả các trình duyệt thông dụng hỗ trợ.

    Nhập text

    Ví dụ:

    Họ tên:

    Code mẫu:

    Họ tên: <input name="hoten" type="text" />

    Giá trị của thuộc tính name sẽ được dùng để lấy giá trị input, cả PHP và JavaScript đều căn cứ vào name để biết giá trị nằm trong input.

    Nhập password

    Ví dụ:

    Mật khẩu:

    Code mẫu:

    <input name="psw" type="password" />

    Vì là nhập password nên khi bạn gõ vào trường này nó sẽ hiện ra các dấu hoa thị *, để người khác không nhìn thấy mật khẩu.

    File đính kèm

    Ví dụ:

    Chọn ảnh của bạn:

    Code mẫu:

    <input type="file" name="anh">

    Button reset

    Tác dụng của nút nhấn reset là xóa các dữ liệu mà bạn nhập không đúng, giả dụ nhập tên và quê quán vào 2 trường dưới đây, rối nhấn reset xem điều gì xảy ra:

    Họ tên:
    Quê quán:
    Code mẫu:

    <form action="#">
    Họ tên: <input type="text" name="hoten"><br />
    Quê quán: <input type="text" name="que"><br />
    <input type="reset" value="Reset">
    </form>

    Button submit

    Tác dụng của nút nhấn submit là gửi dữ liệu, khi bạn nhập đầy đủ các trường, và nhấn submit thì dữ liệu từ các trường bạn nhập sẽ được gửi đến đâu đó để xử lý tiếp. Có thể nó sẽ được Validate bằng JavaScript để chuẩn hóa, sau đó gửi lên Server để ghi thông tin vào cơ sở dữ liệu bằng PHP (hoặc ngôn ngữ lập trình web khác).

    Ví dụ:
    Tên đăng nhập:
    Mật khẩu:

    Code mẫu:

    <form action="#">
    Tên đăng nhập: <input name="user" type="text" /><br />
    Mật khẩu: <input name="pass" type="text" /><br />
    <input type="submit" value="Submit" />
    </form>

    Ẩn input

    Họ tên:
    Code mẫu:

    <form action="#">
    Họ tên: <input type="text" name="hoten"><br>
    <input type="hidden" name="quocgia" value="Việt Nam">
    <input type="submit" value="Submit">
    </form>

    Bạn có thể thấy input có name là quocgia bị ẩn không hiện trong form. Tuy bị ẩn nhưng nếu chúng ta Submit nó giá trị "Việt Nam" vẫn được gửi đi.

    Radio button

    Dùng để chọn chỉ 1 trong nhiều lựa chọn, ví dụ:

    Nam
    Nữ
    Khác

    Code mẫu:

    <form action="#">
    <input name="gioitinh" type="radio" value="Nam" />Nam<br />
    <input name="gioitinh" type="radio" value="Nữ" />Nữ<br />
    <input name="gioitinh" type="radio" value="Khác" />Khác
    </form>

    Checkbox

    Dùng để chọn nhiều lựa chọn cùng lúc, có thể 1 hoặc nhiều, ví dụ:

    Bóng đá
    Bơi lội
    Điền kinh
    Cầu lông
    Võ thuật

    Code mẫu:

    <form action="#">
    <input name="thethao" type="checkbox" value="Bóng đá" />Bóng đá<br />
    <input name="thethao" type="checkbox" value="Bơi lội" />Bơi lội<br />
    <input name="thethao" type="checkbox" value="Điền kinh" />Điền kinh<br />
    <input name="thethao" type="checkbox" value="Cầu lông" />Cầu lông<br />
    <input name="thethao" type="checkbox" value="Võ thuật" />Võ thuật
    </form>

    Thông tin đầy đủ hơn về Checkbox và Radio button bạn có thể đọc để tham khảo thêm.

    Email

    Type cuối cùng tôi đề cập là email, sở dĩ như vậy vì type này chỉ được hỗ trợ trong HTML5 - tuy nhiên nói là vậy thôi, chứ chúng ta cũng không phải lo gì cả, vì input email đã được support tốt bới các trình duyệt. Code mẫu:

    <form action="#">
    Email: <input name="email" type="email" />
    <input type="submit">
    </form>

    Kết quả:

    Email:
    Nó validate email cho chúng ta rồi, nên bạn không cần viết JavaScript - trừ khi bạn muốn chuẩn hóa dữ liệu nhập vào cao hơn nữa.
    Posted by at No comments:
    Labels: , ,

    Saturday, November 9, 2013

    Thực hành thuộc tính word-spacing trong CSS

    word-spacing: 1em

    Trong bài viết trước đây về 8 thuộc tính văn bản trong CSS tôi có đề cập đến word-spacing. Tuy nhiên bài đó chỉ là cái nhìn tổng quát. Hôm nay chúng ta sẽ đi vào chi tiết và các ví dụ cụ thể.

    Thuộc tính word-spacing được dùng để điều khiển khoảng cách chữ với nhau.

    Code mẫu

    p
    {
    word-spacing:20px;
    }

    Kết quả:

    Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

    Đặc điểm

    • Giá trị mặc định: normal - giá trị này sẽ để khoảng cách chữ theo mặc định của font.
    • Tính kế thừa: có kế thừa - tính kế thừa làm cho các thẻ con cháu tự động có cùng thuộc tính với thẻ cha. Nghĩa là thẻ cha có thuộc tính word-spacing như thế nào thì các thẻ con cháu cũng có thuộc tính word-spacing như thế.
    • Phiên bản CSS: word-spacing thuộc về phiên bản CSS1
    • Cú pháp trong JavaScript, thí dụ: object.style.wordSpacing="7px"
    • Hỗ trợ trình duyệt: được hỗ trợ bởi hầu hết các trình duyệt lớn gồm: FireFox, Google Chrome, Opera, Safari, IE.

    Các giá trị

    • normal: khoảng cách mặc định
    • độ dài: ngoài px các đơn vị pt, cm, em đều OK cả, các giá trị âm cũng được chấp thuận.

    Thực hành

    p {word-spacing: 5px;}
    Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

    p {word-spacing: 15px;}
    Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

    p {word-spacing: -5px;}Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

    p {word-spacing: 1em;}
    Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

    p {word-spacing: 0.5em;}
    Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

    p {word-spacing: 1cm;}
    Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.
    Posted by at No comments:
    Labels:

    Cách dùng thẻ sup và sub trong HTML


    Nếu hay phải viết các công thức toán học, hóa học, bạn sẽ cần dùng thường xuyên hai thẻ sup và sub. Nó được dùng để tạo chỉ số trên và chỉ số dưới.

    Thẻ sub

    Thí dụ công thức hóa học 2H2 + O2 = 2H2O, nếu không áp dụng chỉ số dưới sub thì trông sẽ như đoạn vừa gõ, để sửa lại, ta dùng đoạn code sau:

    2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O

    Kết quả:

    2H2 + O2 = 2H2O

    Thẻ sup

    Thí dụ phương trình bậc 2: ax2 + bx + c = 0

    Đáng ra số 2 phải ở bên trên biến x. Để sửa lại dòng trên, ta dùng đoạn code sau:

    ax<sup>2</sup> + bx + c = 0

    Kết quả:

    ax2 + bx + c = 0

    Ngoài ra thẻ sup cũng hay được dùng để tạo các chú thích, chẳng hạn:

    Trăm năm trong cõi người ta
    Chữ tài chữ mệnh khéo là ghét nhau[1]

    [1]: Trích trong tác phẩm Truyện Kiều của Nguyễn Du.

    Bên cạnh cách dùng thẻ sub và sup, bạn có thể dùng thuộc tính vertical-align, nó cũng cho kết quả tương tự, nhưng bạn sẽ chủ động hơn trong việc điều chỉnh CSS.
    Posted by at No comments:
    Labels:

    Friday, November 8, 2013

    Thực hành với thẻ select và option trong HTML

    Select và Option

    Thẻ select dùng để lựa chọn, ở khía cạnh nào đó nó giống với radio button, nhưng điểm khác biệt là select có kiểu dáng dạng drop-down menu (xổ xuống).
    Code mẫu:

    <select>
       <option value="0">Chọn giá nhà bạn muốn mua</option>
       <option value="34">Từ 300 triệu đến 400 triệu</option>
       <option value="46">Từ 401 triệu đến 600 triệu</option>
       <option value="68">Từ 601 triệu đến 800 triệu</option>
       <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
    </select>

    Kết quả:

    Thuộc tính name

    Đây là thành phần không thể thiếu của các thẻ nằm trong form, trong đó phải kể đến các thẻ input, textarea. Thẻ select cũng vậy, thuộc tính name cho phép JavaScript và các ngôn ngữ lập trình web như PHP lấy được dữ liệu mà người dùng nhập sau khi họ nhấn nút submit. Code mẫu:

    <select name="gianha">
       <option value="0">Chọn giá nhà bạn muốn mua</option>
       <option value="34">Từ 300 triệu đến 400 triệu</option>
       <option value="46">Từ 401 triệu đến 600 triệu</option>
       <option value="68">Từ 601 triệu đến 800 triệu</option>
       <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
    </select>

    Thuộc tính disabled

    Dùng để làm cả danh sách thả xuống hoặc một lựa chọn nào đó không khả dụng, ví dụ:



    Code mẫu:

    <select disabled name="gianha">
       <option value="0">Chọn giá nhà bạn muốn mua</option>
       <option value="34">Từ 300 triệu đến 400 triệu</option>
       <option value="46">Từ 401 triệu đến 600 triệu</option>
       <option value="68">Từ 601 triệu đến 800 triệu</option>
       <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
    </select>

    Giờ giả dụ các nhà có giá từ 300 - 400 triệu đã hết, bạn sẽ ngăn không cho người dùng chọn giá đó, các nhà có giá khác vẫn select được:



    <select name="gianha">
       <option value="0">Chọn giá nhà bạn muốn mua</option>
       <option disabled value="34">Từ 300 triệu đến 400 triệu</option>
       <option value="46">Từ 401 triệu đến 600 triệu</option>
       <option value="68">Từ 601 triệu đến 800 triệu</option>
       <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
    </select>

    Thuộc tính size

    Với size, bạn sẽ quy định xem có bao nhiêu lựa chọn được hiển thị ra ngoài. Như ở trên có 4 giá nhà, và hiển thị ra ngoài ngay cái nhìn đầu tiên chỉ là 1 (khi đã nhấn vào rồi thì sẽ hiện hết). Giờ nếu bạn có 9 lựa chọn và muốn hiển thị ra ngoài 4 lựa chọn. Ví dụ:



    Code mẫu:

    <select name="gianha" size="4">
       <option value="0">Chọn giá nhà bạn muốn mua</option>
       <option value="34">Từ 300 triệu đến 400 triệu</option>
       <option value="46">Từ 401 triệu đến 600 triệu</option>
       <option value="68">Từ 601 triệu đến 800 triệu</option>
       <option value="812">Từ 801 triệu đến 1.2 tỷ</option>
       <option value="812">Từ 1.2 tỷ đến 1.5 tỷ</option>
       <option value="812">Từ 1.5 tỷ triệu đến 2 tỷ</option>
       <option value="812">Từ 2 tỷ triệu đến 3 tỷ</option>
       <option value="812">Từ 3 tỷ triệu đến 5 tỷ</option>
    </select>

    Có một số chú ý:
    • Khi bạn sử dụng size lớn hơn 1, theo mặc định có ít nhất 4 lựa chọn sẽ hiện ra, tức là nếu bạn chọn size là 2, 3 hoặc 4 thì đều ra 4 lựa chọn hết. Từ 4 trở lên thì mới chính xác hoàn toàn, giả dụ để 5 thì có 5 lựa chọn, để 7 thì có 7 lựa chọn.
    • Nếu size lớn hơn 1 nhưng nhỏ hơn số khả năng lựa chọn thì sẽ xuất hiện thanh cuộn dọc để bạn kéo lên kéo xuống.

    Thuộc tính multiple

    Với multiple, bạn sẽ cho phép người dùng có nhiều lựa chọn cùng lúc thay vì chỉ một lựa chọn như mặc định:



    Giữ phím Ctrl và tick nhiều cái, với giả định là bạn có thể mua nhà từ giá thấp nhất đến gần cao nhất :)

    Code mẫu:

    <select multiple name="gianha">
       <option value="0">Chọn giá nhà bạn muốn mua</option>
       <option value="34">Từ 300 triệu đến 400 triệu</option>
       <option value="46">Từ 401 triệu đến 600 triệu</option>
       <option value="68">Từ 601 triệu đến 800 triệu</option>
       <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
    </select>

    Rõ ràng multiple làm cho select giống với checkbox hơn. Tuy nhiên cũng dễ thấy checkbox thì chuyên nghiệp hơn trong việc thiết kế ứng dụng đa lựa chọn.

    Nhóm các lựa chọn liên quan bằng optgroup

    Nếu bạn có một danh sách khá dài các chọn lựa, bạn có thể muốn nhóm các chọn lựa lại với nhau để người dùng dễ dàng quan sát và thao tác. Khi ấy bạn nên dùng thẻ optgroup. Code mẫu:

    <select name="gianha">
    <optgroup label="Dưới 500 triệu">
    <option value="499">499 triệu - 60m2</option>
    <option value="350">350 triệu - 40m2</option>
    <option value="250">250 triệu - 25m2</option>
    </optgroup>

     <optgroup label="Trên 500 triệu">
    <option value="700">700 triệu - 85m2</option>
    <option value="900">350 triệu - 100m2</option>
    <option value="1200">1.2 tỷ - 150m2</option>
    </optgroup>
    </select>

    Kết quả:



    Bạn có thể thấy các nhà có giá dưới 500 triệu được nhóm lại dưới nhãn được bôi đậm. Thẻ optgroup có 2 thuộc tính, ngoài thuộc tính label bạn đã thấy trong code ở trên, nó còn thuộc tính disabled dùng để vô hiệu hóa một nhóm lựa chọn, giả dụ, tất cả các nhà có giá dưới 500 triệu đã được bán hết, ta sẽ không cho người dùng có chọn lựa này, code mẫu:

    <select name="gianha">
    <optgroup label="Dưới 500 triệu" disabled>
    <option value="499">499 triệu - 60m2</option>
    <option value="350">350 triệu - 40m2</option>
    <option value="250">250 triệu - 25m2</option>
    </optgroup>
    <optgroup label="Trên 500 triệu">    <option value="700">700 triệu - 85m2</option>
    <option value="900">350 triệu - 100m2</option>
    <option value="1200">1.2 tỷ - 150m2</option>
    </optgroup>
    </select>

    Kết quả:



    Như vậy là cả nhóm dưới 500 triệu đã không thể chọn lựa được.
    Posted by at No comments:
    Labels: ,

    Thẻ radio button và checkbox trong HTML

    Thực ra chúng đều thuộc về nhóm thẻ input nhưng có thuộc tính type là radio button và checkbox. Nhóm thẻ input là không thể thiếu khi muốn làm Form nhập liệu và chúng thường xuyên kết hợp với Javascript để validate. Bên cạnh 5 type rất hay dùng gồm: text, password, submit, reset và email thì 2 type chuyên dụng để tạo các lựa chọn là Radio button và Checkbox bạn cũng cần nắm rõ.

    Radio button

    Type này được dùng để chọn một trong nhiều lựa chọn, chẳng hạn chọn giới tính, chọn quốc gia đang sinh sống. Code mẫu:

    <form>
    <input name="gioitinh" type="radio" value="Nam" />Nam<br />
    <input name="gioitinh" type="radio" value="Nữ" />Nữ<br />
    <input name="gioitinh" type="radio" value="Khác" />Khác
    </form>

    Kết quả:

    Nam
    Nữ
    Khác

    Nếu bạn không để name có cùng tên thì bạn sẽ chọn được 2 cái cùng lúc, do vậy cần lưu ý name khi dùng radio.

    Checkbox

    Radio buttons dùng để chọn chỉ một cái trong nhiều lựa chọn còn checkbox thì ngược lại, nó cho phép bạn không chọn lựa cái nào hoặc chọn nhiều cái (từ một cho đến tất cả), code mẫu:

    <form>
    <input type="checkbox" name="thethao" value="Bóng đá">Bóng đá<br>
    <input type="checkbox" name="thethao" value="Bơi lội">Bơi lội<br>
    <input type="checkbox" name="thethao" value="Điền kinh">Điền kinh<br>
    <input type="checkbox" name="thethao" value="Cầu lông">Cầu lông<br>
    <input type = "checkbox" name= "thethao" value="Võ thuật">Võ thuật
    </form>

    Kết quả:

    Bóng đá
    Bơi lội
    Điền kinh
    Cầu lông
    Võ thuật

    Thuộc tính checked

    Đây là thuộc tính được dùng để đánh dấu trước một lựa chọn nào đó, chẳng hạn một Form nhập liệu yêu cầu bạn nhập Quốc gia đang sinh sống, nhưng nó cũng xác định được địa chỉ IP của bạn xuất phát từ Việt Nam nên đã tick sẵn vào đây từ trước cho bạn. Điều này giúp bạn giảm thiểu các thao tác phải nhập. Ví dụ:

    Việt Nam
    Trung Quốc
    Nhật Bản
    Hàn Quốc

    Code mẫu:

    <form>
    <input checked="checked" name="gioitinh" type="radio" value="VN" />Việt Nam<br />
    <input name="gioitinh" type="radio" value="TQ" />Trung Quốc<br />
    <input name="gioitinh" type="radio" value="NB" />Nhật Bản<br />
    <input name="gioitinh" type="radio" value="HQ" />Hàn Quốc
    </form>
    Posted by at No comments:
    Labels: , ,

    Saturday, November 2, 2013

    Cách dùng thẻ blockquote trong HTML

    Trích dẫn - blockquote

    Thẻ blockquote dùng để trích dẫn nội dung từ nguồn khác. Câu hỏi đầu tiên, nếu bạn không sử dụng blockquote khi trích dẫn thì có sao không? Câu trả lời là nếu bạn làm thế, bạn vẫn có thể giúp người đọc hiểu là bạn lấy tin từ nguồn khác nhưng trình duyệt và các công cụ tìm kiếm không biết là bạn trích dẫn.

    Câu hỏi số hai, trích dẫn khác copy như thế nào?

    Trả lời: trích dẫn bao giờ cùng chỉ lấy một đoạn thông tin nhỏ, cùng lắm là vài chục dòng, ngược lại copy là sao chép toàn bộ nội dung. Ngoài ra, điều quan trọng hơn - khi sử dụng blockquote là bạn đã chủ động và công khai để người cũng như máy biết rằng bạn đang lấy thông tin từ nơi khác trích dẫn vào trang web, còn copy thì cố tình dấu nhẹm nguồn gốc của nội dung.

    Code mẫu của blockquote:

    <blockquote cite="http://ten-trang-web/index.html">
    Nội dung cần trích dẫn
    </blockquote>

    Theo đó:
    • Ở giữa cặp thẻ blockquote bạn để nội dung cần trích dẫn.
    • Ở thẻ mở, bạn sử dụng thuộc tính cite để dẫn nguồn địa chỉ trang web chứa nội dung gốc. Và nó phải là URL nhé, không được phép là tên cuốn sách hay tên tác giả.
    Ví dụ cụ thể như tôi trích dẫn một đoạn thông tin định nghĩa Wiki nghĩa là gì từ trang bách khoa toàn thư mở Wikipedia tiếng Việt:
    Wiki, hay "wiki wiki" theo ngôn ngữ Hawaii có nghĩa là nhanh. Wiki là yếu tố cơ bản của các trang web cho phép người xem sửa đổi, lưu trữ, thêm xóa nội dung, được Ward Cunningham phát triển vào những năm 90 của thế kỉ 20. Wiki cho phép tạo ra vô số các liên kết và tính đơn giản này giúp wiki trở thành công cụ rất hữu ích cho vấn đề đồng tác giả. Wikipedia là chữ viết tắt của wiki và "encyclopedia", trong tiếng Anh có nghĩa là bách khoa toàn thư.

    Viết tắt 

    Thay vì sử dụng thẻ blockquote khá dài, bạn có thể viết tắt thành thẻ q, nó cũng cho kết quả tương tự, code mẫu:

    <q cite="http://ten-trang-web/index.html">
    Nội dung cần trích dẫn
    </q>
    Posted by at No comments:
    Labels:

    Friday, October 18, 2013

    Cách dùng thẻ input để làm Form trong HTML5

    Email:

    Làm Form trong HTML5 đơn giản hơn nhiều HTML thường, lý do nằm ở chỗ bạn không cần dùng Javascript để Validate (bắt lỗi dữ liệu) các trường nữa. Tất nhiên điều này không tuyệt đối, một số cái vẫn phải dùng Javascript, nhưng gì thì gì, chơi với HTML5, code mà bạn phải gõ sẽ ít hơn nhiều lần. Hiện trình duyệt Google Chrome hỗ trợ tốt nhất các thẻ input mới, do vậy tôi khuyên bạn nên dùng anh bạn này để xem các ví dụ trong bài viết.

    Tôi sẽ bắt đầu luôn với thẻ input mà bạn thường xuyên phải bắt lỗi, đó là email. Nếu HTML thường bạn sẽ phải viết code JS khá dài thì với HTML5, bạn chỉ cần ghi: <input type="email">. Giờ bạn thử gõ một đoạn không phải email chuẩn rồi nhấn Gửi xem điều gì xẩy ra. Thẻ email được hỗ trợ tốt trên đa số trình duyệt, ngoại trừ Safari.

    Email:
    Đoạn code mẫu cho form trên là:

    <form action="#">
    Email: <input name="email" type="email" />
     <input type="submit" />
    </form>

    Bạn cũng còn nhớ, một yêu cầu khác mà chúng ta thường phải làm với Form, đó là không cho phép người dùng bỏ trống dữ liệu. Code JS cho điều này rất đơn giản, nhưng HTML5 còn đơn giản hơn! Bạn chỉ cần thêm thuộc tính required vào, cụ thể: <input type="email" required>

    Email:
    Bạn để trống và nhấn nút Gửi (submit) xem sao.

    Như vậy, HTML5 không chỉ thêm các thẻ mới, nó còn thêm các thuộc tính mới nữa mà required ở trên là ví dụ.

    Thuộc tính mới tiếp theo cũng rất hay dùng đó là placeholder, đây là đoạn văn bản trong thẻ input để nhắc người dùng nên nhập cái gì, ví dụ dòng chữ nhạt màu "Bạn nhập họ tên vào đây" được tạo bằng placeholder:

    Họ tên:
    Code mẫu:

    <form action="#">
    Họ tên: <input name="name" placeholder="Bạn nhập họ tên vào đây" required="" type="text" />
    <input type="submit" />
    </form>

    Sau đây là các kiểu input mới khác trong HTML5...

    Thẻ color - chọn màu

    Chọn màu cho bạn:
    Code mẫu:

    <form action="#">
      Chọn màu cho bạn: <input type="color" name="mausac"><br>
      <input type="submit">
    </form>

    Hiện chỉ có Chrome và Opera hỗ trợ thẻ màu.

    Thẻ number - số má

    Nhập giá trị từ 1 đến 10:
    Code mẫu:

    <form action="#">
      Nhập giá trị từ 1 đến 10: <input type="number" name="quantity" min="1" max="10">
      <input type="submit">
    </form>

    Với thẻ number bạn buộc phải nhập số, thẻ number bổ sung thêm các thuộc tính giá trị nhỏ nhất min, giá trị lớn nhất max. Ngoài ra còn cả thuộc tính step - bước nhảy. Hiện thẻ number chưa được hỗ trợ trên FireFox.

    Thẻ day - ngày tháng năm

    Ngày sinh:
    Code mẫu:

    <form action="#">
      Ngày sinh: <input type="date" name="ngaysinh">
      <input type="submit">
    </form>

    Thẻ day sẽ giúp bạn nhanh chóng lấy ngày tháng năm cụ thể và dĩ nhiên bạn cũng không cần code để validate nữa, vì với thẻ này người dùng chỉ có thể nhập ngày tháng năm vào mà thôi.

    Thẻ URL - thêm địa chỉ website

    Địa chỉ web:
    Code mẫu:

    <form action="#">
      Địa chỉ web: <input type="url" name="page"><br>
      <input type="submit">
    </form>

    Thẻ này đa số các trình duyệt hỗ trợ, chỉ Safari là chưa. Yêu cầu nhập địa chỉ trang web phải có cả http://
    Posted by at No comments:
    Labels: , , , ,

    Code nhúng video trong HTML5


    HTML5 cho phép chúng ta nhúng video vào trang web rồi xem trực tiếp trên trình duyệt mà không cần phải sử dụng plugin của bên thứ ba như Adobe Flash Player. Hôm nay Blog Mạng Lưới Toàn Cầu sẽ cùng bạn xem code nhúng này cụ thể như thế nào.

    Code mẫu:

    <video width="640" height="480" controls posster="images/poster.png">

    <source src="mangluoitoancau.mp4" type="video/mp4">

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

    Trình duyệt của bạn không hỗ trợ thẻ video

    </video>

    Giải thích code:
    • Để nhúng video chúng ta bắt đầu bằng thẻ mở <video> và kết thúc bằng thẻ đóng </video>
    • width và height quy định chiều rộng và chiều cao của video
    • controls làm xuất hiện nút Play (bật video), Pause (tạm dừng), tùy chọn toàn màn hình và nút điều khiển âm thanh.
    • Nguồn video đặt trong thẻ source, với đường dẫn cụ thể được quy định trong thuộc tính src, trình duyệt dựa vào thuộc tính type để biết định dạng của video.
    • Có 3 định dạng video được các trình duyệt hỗ trợ là: mp4, ogg và webm. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ cả 3, có trình duyệt chỉ hỗ trợ 1 định dạng duy nhất.
    • Dòng cuối cùng sẽ xuất hiện trong trường hợp trình duyệt không hỗ trợ thẻ video, thí dụ IE8. Hầu hết các trình duyệt phổ biến gồm: Google Chrome, FireFox, Opera, Safari và IE9+ đều có hỗ trợ thẻ video
    • Thuộc tính poster dùng để làm ảnh nền cho video, thí dụ video ở đầu bài sử dụng poster là bức ảnh dưới đây:
    Poster cho video

    Các định dạng video được hỗ trợ trên trình duyệt:

    Trình duyệtMP4WebMOgg
    Internet ExplorerCóKhôngKhông
    ChromeCóCóCó
    FirefoxCó (FireFox 21+)CóCó
    SafariCóKhôngKhông
    OperaKhôngCóCó
    Ngoài ra chúng ta có thể sử dụng Javascript để điều khiển bật, tắt, thay đổi kích thước video như ví dụ dưới đây:

    Tùy chọn movie


    Theo đó:
    • Trước tiên video được gán một id cụ thể, trong ví dụ này là myvideo
    • Video sẽ được lấy bằng lệnh document.getElemnetById("myvideo")
    • Sau đó video này sẽ được điều khiển thông qua các lệnh video.pause(), video.play(), video.width="xyz" , với xyz là giá trị cụ thể nào đó. Các lệnh này được lồng trong các hàm.
    • Các button tương ứng khi được nhấn sẽ gọi các hàm này lên bằng lệnh onclick, ví dụ: <button onclick="play();">Chạy</button> sẽ gọi hàm play() và chạy video này.
    Code cụ thể:
    <div>
    <button onclick="playPause();">Play/Pause</button>
    <button onclick="size250();">250</button>
    <button onclick="size400();">400</button>
    <button onclick="size550();">550</button>
    </div>
    <video id="myvideo" width="250">
          <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></source>
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"></source>
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"></source>
    </video>
    <script type="text/javascript">
    var video = document.getElementById("myvideo");
    function playPause()
    { 
    if (video.paused) 
    video.play(); 
    else 
    video.pause(); 
    } 

    function size250()
    {video.width = 250;} 

    function size400()
    {video.width = 400;}

    function size550()
    {video.width = 550;} 
    </script>
    Posted by at No comments:
    Labels: , , ,

    Thursday, September 5, 2013

    Tổng hợp hơn 100 HTML Entities phổ biến

    HTML Entities

    Nếu bạn muốn sử dụng ký hiệu > hoặc < trong trang HTML bạn phải sử dụng HTML Entities, cụ thể dấu < cần được viết là &#60; trong mã HTML, câu hỏi đầu tiên bạn đặt ra: tại sao lại phải rắc rối thế?

    Câu trả lời là, nếu bạn sử dụng dấu < thì trình duyệt có thể nhầm đấy là thẻ mở trong HTML, để tránh nhầm lẫn bạn phải sử dụng ký tự thay thế &#60;

    Ngoài ra có rất nhiều biểu tượng bạn không thể gõ trực tiếp được từ bàn phím, ví dụ như biểu tượng trái tim.

    Trong bài viết này tôi sẽ liệt kê các HTML Entities phổ biến:

    Biểu tượngThực thể TênThực thể Số
    –&ndash;&#8211;
    —&mdash;&#8212;
    †&dagger;&#8224;
    ‡&Dagger;&#8225;
    •&bull;&#8226;
    …&hellip;&#8230;
    ‰&permil;&#8240;
    ′&prime;&#8242;
    ″&Prime;&#8243;
    ‹&lsaquo;&#8249;
    ›&rsaquo;&#8249;
    ‾&oline;&#8254;
    €&euro;&#8364;
    ™&trade;&#8482;
    ←&larr;&#8592;
    ↑&uarr;&#8593;
    →&rarr;&#8594;
    ↓&darr;&#8595;
    ↔&harr;&#8596;
    ↵&crarr;&#8629;
    ⌈&lceil;&#8968;
    ⌉&rceil;&#8969;
    ⌊&lfloor;&#8970;
    ⌋&rfloor;&#8971;
    ◊&loz;&#9674;
    ♠&spades;&#9824;
    ♣&clubs;&#9827;
    ♥&hearts;&#9829;
    ♦&diams;&#9830;


    Biểu tượng Thực thể tên Thực thể số
    &nbsp;&#160;
    ¡&iexcl;&#161;
    ¢&cent;&#162;
    £&pound;&#163;
    ¤&curren;&#164;
    ¥&yen;&#165;
    ¦&brvbar;&#166;
    §&sect;&#167;
    ¨&uml;&#168;
    ©&copy;&#169;
    ª&ordf;&#170;
    «&laquo;&#171;
    ¬&not;&#172;
    ­&shy;&#173;
    ®&reg;&#174;
    ¯&macr;&#175;
    °&deg;&#176;
    ±&plusmn;&#177;
    ²&sup2;&#178;
    ³&sup3;&#179;
    ´&acute;&#180;
    µ&micro;&#181;
    &para;&#182;
    ¸&cedil;&#184;
    ¹&cedil;&#185;
    º&ordm;&#186;
    »&raquo;&#187;
    ¿&iquest;&#191;
    ×&times;&#215;
    ÷&divide;&#247;


    Biểu tượng Thực thể tên Thực thể số
    ∀&forall;&#8704;
    ∂&part;&#8706;
    ∃&exist;&#8707;
    ∅&empty;&#8709;
    ∇&nabla;&#8711;
    ∈&isin;&#8712;
    ∉&notin;&#8713;
    ∋&ni;&#8715;
    ∏&prod;&#8719;
    ∑&sum;&#8721;
    −&minus;&#8722;
    ∗&lowast;&#8727;
    √&radic;&#8730;
    ∝&prop;&#8733;
    ∞&infin;&#8734;
    ∠&ang;&#8736;
    ∧&and;&#8743;
    ∨&or;&#8744;
    ∩&cap;&#8745;
    ∪&cup;&#8746;
    ∫&int;&#8747;
    ∴&there4;&#8756;
    ∼&sim;&#8764;
    ≅&cong;&#8773;
    ≈&asymp;&#8776;
    ≠&ne;&#8800;
    ≡&equiv;&#8801;
    ≤&le;&#8804;
    ≥&ge;&#8805;
    ⊂&sub;&#8834;
    ⊃&sup;&#8835;
    ⊄&nsub;&#8836;
    ⊆&sube;&#8838;
    ⊇&supe;&#8839;
    ⊕&oplus;&#8853;
    ⊗&otimes;&#8855;
    ⊥&perp;&#8869;
    ⋅&sdot;&#8901;

    Bạn có thể thấy HTML Entities bao gồm cả thực thể số và chữ, chẳng hạn biểu tượng bản quyền © có kiểu viết dạng chữ là &copy; còn kiểu viết dạng số là &#169; Cả hai đều tương đương nhau, kiểu chữ thì dễ nhớ hơn nhưng kiểu số lại được các trình duyệt web hỗ trợ nhiều hơn.

    Cần lưu ý là các HTML Entities bắt đầu bằng dấu & và kết thúc bằng dấu ; còn ở giữa sẽ là tên hoặc số.
    Posted by at No comments:
    Labels:
    Subscribe to: Posts (Atom)