Nên mua dầu dừa nguyên chất ở đâu tại Hà Nội?

Dầu Dừa nguyên chất là một trong những sản phẩm làm đẹp rất tốt với chị em phụ nữ, và được nhiều bạn gái quan tâm tìm mua. Hiện trên thị trường có nhiều nơi bán dầu dừa, nhưng vì đây là sản phẩm thoa trực tiếp lên da nên chất lượng luôn là yêu cầu được đặt nên hàng đầu.
Muốn có dầu dừa chất lượng cao cần:

• Chọn loại dừa tốt: Dừa thích hợp để làm dầu dừa là dừa xiêm Bến Tre 
• Chế biến đúng cách: Gọt vỏ, xay nhuyễn, ngâm nước nóng... 
• Đun đủ độ: Đun nước cốt dừa cạn dần cho đến khi xuất hiện dầu dừa, phải chọn đúng thời điểm để lấy dầu 

Dầu dừa sau khi làm xong, đợi một chút cho lắng hẳn lớp bồng con dừa rồi lấy phần dầu dừa sạch ở trên cho vào lọ thủy tinh đóng kín nắp.

Bản thân dầu dừa có chất kháng khuẩn tự nhiên nên nếu là dầu dừa nguyên chất (không pha trộn) sẽ không cần chất bảo quản mà vẫn giữ được chất lượng sản phẩm được rất lâu.

Nếu ở Hà Nội, bạn có thể mua Dầu Dừa Út Em (xem thêm: http://utemshop.com/2014/02/mua-dau-dua-nguyen-chat-o-dau-tai-ha-noi/).

Dầu Dừa Út Em (liên hệ: 0968.458.405) được chế biến theo cách thủ công, đảm bảo sạch sẽ chất lượng, hoàn toàn nguyên chất, không pha trộn , không chất bảo quản...

Vốn là người đặc biệt quan tâm tới các sản phẩm thiên nhiên tốt, tôi thường xuyên gặp gỡ Út để tìm hiểu thêm về các sản phẩm của cô. Út cho biết, mọi sản phẩm bán ra đều là hàng do chính tay cô và chị gái chế biến, mong muốn của Út là làm sao để sản phẩm tốt tới được đông đảo người dùng Hà Nội hơn nữa.

"Em muốn cung cấp các sản phẩm làm đẹp có nguồn gốc thiên nhiên ra thị trường Hà Nội, trước mắt em tập trung vào dầu dừa và cám gạo. Khách hàng hướng tới chủ yếu của em là các chị em ở Hà Nội thật sự yêu thích các sản phẩm hoàn toàn nguyên chất - Út cho biết."

Út nấu dầu dừa

Cũng như tôi và nhiều khách hàng đã mua dầu dừa của Út đều có những đánh giá rất tốt. Bài viết này cũng là lời cảm ơn của tôi dành cho Út vì định hướng đúng đắn của cô về kinh doanh. (Xem thêm: Phản hồi của khách hàng)



Và còn rất nhiều phản hồi tích cực khác nữa...

Dầu dừa được Út bán với giá 110K/100ml - 195K/200ml, ngoài ra còn có son dưỡng dầu dừa 35K/thỏi - một cái giá không quá rẻ cũng không quá đắt trên thị trường. Út cho hay:

Tuy làm dầu dừa rất mất công, nhưng em chỉ để giá vậy thôi, vì em muốn nhiều người biết tới sản phẩm của mình hơn nữa, và giá mềm nhưng em có nhiều khách nên cũng có công rồi.

Để tìm hiểu thêm về sản phẩm của Út các bạn xem thêm tại utemshop.com

Hãy liên hệ với Út qua số điện thoại: 0968.458.405
Free Ship 12 quận tại Hà Nội
Website: utemshop.com
Fanpage: www.facebook.com/utemthuong.net

Thuộc tính opacity trong CSS3

Opacity là thuộc tính mới trong CSS và thuộc phiên bản mới nhất của CSS3, nó quy định độ trong suốt của hình ảnh hoặc nền màu nào đó. Nếu từng biết Photoshop bạn chắc không lạ opacity. Bằng CSS3 chúng ta không cần dùng phần mềm chỉnh sửa ảnh nào nữa, các thành phần sẽ được điều chỉnh độ trong suốt tùy ý. Cùng Blog Mạng Lưới Toàn Cầu thử ngay và luôn nhé!

Hãy nhìn vào bức ảnh đầu bài, thực tế nó nét hơn nhưng được làm trong suốt chỉ còn 60% so với bức gốc, dưới đây chính là bức gốc:

Đoạn code để thực hiện trong suốt cho ảnh là:

img
{
opacity:0.6;
filter:alpha(opacity=60); /* Cho IE8 và các phiên bản cũ hơn */
}

Ngoài ra chúng ta cũng có thể làm trong suốt nền màu như thế này:

Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu

Theo đó, bạn có một ảnh làm background, thẻ div làm nền với màu xám, và chữ bên trên, để nền div không làm che background ảnh tôi làm nó trong suốt ở mức độ nào đó (nếu để trong suốt hoàn toàn - tương đương với bỏ nền thì chữ sẽ khó đọc).

Code mẫu:

<div style="background: url('images/bg.jpg'); height: 200px; padding: 50px; width: 300px;">
<div style="background-color: #cccccc; color: blue; filter: alpha(opacity=60); opacity: 0.6; padding: 15px; text-align: justify; width: 250px;">
<b>Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu.</b>
</div>
</div>

Nguồn ảnh minh họa: www.freeimages.co.uk

Thuộc tính text-shadow trong CSS3

Đổ bóng cho chữ không còn là độc quyền của Photoshop nữa, giờ chúng ta có thể làm điều đó mà chỉ cần dùng code. CSS3 thực sự là làn gió mát, nó đem lại các hiệu ứng không hề mới nhưng được thực hiện theo cách đơn giản và dễ dàng hơn nhiều.

Hãy nhìn dòng chữ dưới đây:

Tôi Đổ Bóng Cho Đoạn Văn Bản Này

Bạn có thể thấy nó được đổ bóng với màu xanh. Code mẫu:

text-shadow: 4px 5px 6px blue;

Giải thích code:

• Giá trị đầu tiên 4px là khoảng cách dịch từ bên trái sang theo phương nằm ngang
• Giá trị thứ hai 5px là khoảng cách dịch từ trên xuống theo hướng thẳng đứng
• Giá trị thứ ba 6px là độ mờ (blur) của bóng
• Cuối cùng là màu sắc của bóng
• Bạn có thể để giá trị âm nếu muốn cho chiều ngang và đứng, dĩ nhiên nó sẽ ngược lại giá trị dương. Nếu để âm cho giá trị blur bạn sẽ không còn thấy bóng nữa!

Như vậy cú pháp của đổ bóng cho văn bản là:

text-shadow: lệch-ngang  lệch-đứng  độ-mờ  màu-sắc;

Nếu không có giá trị thứ ba, tức là không có độ mờ, chúng ta sẽ thấy như có 2 văn bản sinh đôi được đặt cạnh nhau:

Văn Bản Này Không Có Giá Trị Blur

Trông rất khó coi, trừ khi bạn giảm giá trị dịch chuyển xuống 1px - 2px theo cả 2 chiều...

Nếu muốn đổ bóng cho hộp, bạn dùng thuộc tính box-shadow.

Code bo tròn ảnh với CSS3

Sử dụng CSS3 bạn sẽ thấy bo tròn ảnh rất dễ dàng, không cần phải dùng Photoshop nữa, chỉ với 3 dòng code bức ảnh đã được bo và chạy tốt trên tất cả các trình duyệt phổ biến, cụ thể thì với IE9+, Firefox 4+, Chrome, Safari 5+ và Opera là OK.

Code mẫu như sau, giả sử bạn có bức ảnh với mã như thế này trong HTML:

<img src="images/cap-doi-hoan-canh.jpg">

Muốn bo tròn tuyệt đối, bạn sẽ CSS ảnh đó như này:

img {
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

Kết quả bạn sẽ thấy giống bức ảnh minh họa đầu bài. Các tiền tố -moz và -webkit là để tương thích với các trình duyệt khác nhau. Chú ý là ảnh của bạn phải là hình vuông nhé.

Nếu muốn bo tròn góc nhỏ hơn bạn có thể để 5%, 10%, 20%...Hoặc bất kỳ giá trị nào mà bạn cảm thấy vừa mắt, bức hình dưới đây có border-radius là 15%

Để giá trị là % bạn không phải lo kích thước bức ảnh là bao nhiêu, dù lớn hay bé nó sẽ được bo cùng tỷ lệ, nếu để là px thì với bức ảnh lớn góc bo trông sẽ nhỏ hơn góc bo của bức ảnh bé...Cuối cùng đây là bức hình gốc khi chưa được bo tròn:

P/S: Bức ảnh chụp Admin và bạn gái :)

Sau khi bo xong ảnh, bỗng dưng tôi muốn bo luôn chữ, ý tưởng vẫn thế, sẽ cho chữ ở chính giữa đường tròn, sau khi mày mò một lúc thì đây là kết quả:

Tôi Sẽ Bo Tròn Tuyệt Đối Đoạn Văn Bản Này, Bạn Xem Như Này Đã Ưng Mắt Chưa

Đoạn code mẫu đây:

<div style="background: #dddddd; border-radius: 50%; border: 2px solid #a1a1a1; height: 300px; margin: 20px; padding: 10px; text-align: center; width: 300px;">
<h2 style="font-size: 22px; margin-top: 33%;">Tôi Sẽ Bo Tròn Tuyệt Đối Đoạn Văn Bản Này, Bạn Xem Như Này Đã Ưng Mắt Chưa</h2>
</div>

Tôi đặt đoạn văn bản trong thẻ h2 và cho vào thẻ div. Ở thẻ div, tôi quy định cụ thể chiều cao và chiều rộng bằng lệnh height: 300px; width: 300px; Vì mục đích của chúng ta là làm hình tròn cho nên tôi để chiều cao bằng chiều rộng.

2 thuộc tính background: #dddddd; border: 2px solid #a1a1a1; sẽ làm div có màu xám và đường viền 2px nét liền. Để padding: 10px làm chữ không bị chạm vào cạnh của div

Để chữ căn chính giữa theo chiều ngang ta quy định text-align: center; Cuối cùng là cho div thành hình tròn bằng thuộc tính border-radius: 50%; 

Để chữ ra giữa theo chiều dọc, ta điều chỉnh lề cho thẻ h2 bằng cách để lề trên margin-top: 33%; Giá trị này còn tùy thuộc vào kích cỡ của chữ, nhưng sẽ không bao giờ lớn hơn 50%.

Tiện ích Bài viết liên quan cho Blogspot

Blogspot có nhiều ưu điểm, ví dụ như giao diện viết bài đơn giản, thân thiện, hosting thoái mái, chịu tải lớn giúp chủ trang không lo lắng khi lượng người dùng tăng đột biến. Nhưng yếu điểm của Blogspot là nó không có nhiều widget hỗ trợ giống như các CMS khác.
Thực tế Blogspot chỉ có khoảng 20 tiện ích mà người dùng cảm thấy thực sự có ích:

Còn lại phần đa đều phải tự tìm trên mạng, chẳng hạn tiện ích bình luận gần đây hay bài viết mới nhất đều phải tự tìm. Và lần này cũng vậy, tiện ích bài viết liên quan - điều rất quan trọng để giữ chân độc giả lâu hơn cũng không được Blogspot cho vào kho tiện ích mặc định.

Một điều chắc chắn không phải Google không làm được, nhưng lý do gì mà họ không bổ sung các widget cơ bản đó vào thì tôi vẫn chưa rõ.

Quay lại vấn đề trọng tâm. Tại sao chúng ta cần tạo tự động các bài viết liên quan? Điều này nói cho cùng là cần thiết cho các trang web có số lượng bài viết lớn. Bởi vì khi đó, một bài viết thường liên quan đến vài bài khác, và mỗi lần viết bài mới bạn phải mất rất nhiều công sức cập nhật mối liên kết qua lại giữa chúng với nhau.

Tuy nhiên ở khía cạnh khác, tạo các mối nối bằng tay giữa các bài tạo ra sự liên kết mạnh mẽ hơn, vì bạn biết rõ nhất với bài viết A thì bài viết C là liên quan nhất chứ không phải bài B, trong khi đó hệ thống tự động có thể đưa ra bài B cho độc giả.

Do vậy để cân bằng bạn nên kết hợp cả hai, vẫn có những liên kết bằng tay ngay trong bài và một hệ thống auto các bài liên quan ở cuối.

Và bây giờ sẽ là đoạn code để làm điều đó. Nếu bạn có kinh nghiệm với Blogspot thì mới nên làm nhé, mới dùng mà chiến cái này luôn là hơi bị nhức đầu đấy! Backup lại Template của bạn phòng khi lỗi nhé.

Vào mẫu chọn chỉnh sửa HTML

Tìm thẻ đóng </head> 

Và paste đoạn code dưới đây vào trước thẻ </head>:

<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts {

float:center;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

margin-right:5px;

color:black;

background-color:#CCC;

text-align:center;

}

#related-posts a:hover{

background-color:#2AA4CF;

color:#FFF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4udKhlC23pd4S1HAyGeV_3lz2CDURZu4_wyPta2hix0PdkVke-ou25_O9hFDBBfO1WEoH8pPi9aSYQv2zrYqePu8VtNalG0YXdd9A9sRAYZA7JLEiBotD2t5mzWJMgH0GK7Skk9reuQ/s1600/no-image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Bài Viết Liên Quan&quot;;

</script>

<script src='https://googledrive.com/host/0BxKUKf8tfKupSnQ0Znd2Tm5xT1E' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Nếu muốn thay đổi số lượng bài viết liên quan thì điều chỉnh giá trị: var maxresults=5; thường để 3 cho đến 5.

Tìm đến dòng <div class='post-footer'>

Rồi paste đoạn code dưới đây vào sau dòng đó:

<!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Cuối cùng nhấn Save để lưu tempalte. Chú ý là nhiều template thì bạn phải paste vào sau: <div class='post-footer-line post-footer-line-1'> chứ không phải <div class='post-footer'> thì nó mới hiện bài viết liên quan. Bạn cứ thử lần lượt, cái nào OK thì dùng.

Bài viết lấy code mẫu từ trang: http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html

Nếu quá chán với code, bạn có thể dùng http://www.linkwithin.com/ nó cũng tạo bài viết liên quan rất đẹp mắt thông qua chỉ vài click thôi chứ không nhức đầu như trên đâu, yếu điểm là trang web chậm đi đôi chút.

Code đơn giản Zoom ảnh bằng CSS3

Zoom ảnh có nhiều cách, trong đó chủ yếu dựa vào CSS3 hoặc Jquery và đôi khi là cả hai. Nếu xài Jquery bạn có các hiệu ứng zoom rất đẹp (thí dụ như Cloud Zoom), xài CSS3 thì hiệu ứng tuy không bằng nhưng bù lại code rất đơn giản - miễn phí và không đòi hỏi tải thư viện khá nặng có thể làm chậm đi tốc độ lướt web.

Chúng ta sẽ áp dụng 2 thuộc tính của CSS3:

• transform: scale(x,y)  -  theo đó x, y là các giá trị ta muốn phóng lên theo trục x và y, thường thì ta để x = y để bức ảnh được phóng to mà vẫn giữ nguyên tỉ lệ. Chẳng hạn transform: scale(2,2) sẽ làm bức ảnh phóng to lên 2 lần
• transition: all 1s ease  -  theo đó chúng ta sẽ làm bức ảnh được phóng to dần dần trong khoảng thời gian 1s chứ không bụp một cái to lên luôn (hơn Thánh Gióng!)

Và giờ là code mẫu:

img {

transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;

}

img:hover {
transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
}

Đoạn code trên có nghĩa là mọi hiệu ứng chuyển đổi sẽ diễn ra trong vòng 1s, hiệu ứng sẽ xảy ra khi hover qua ảnh và làm bức hình tăng kích thước lên 1.5 lần. Các tiền tố -webkit, -moz, -o, -ms là để phù hợp với các trình duyệt khác nhau.

Kết quả: các bạn cứ hover (di chuột qua) bức hình cô gái đầu bài thì biết :)

Cách dùng Cloud Zoom Jquery để Phóng to Ảnh

Hiệu ứng Zoom vào chi tiết ảnh hay dùng với các trang web bán hàng. Khi đó, chúng ta có hình ảnh sản phẩm ở kích cỡ vừa phải, nhưng rõ ràng người dùng muốn mua thường thích nhìn kỹ càng hơn, lúc đó khi họ di chuột vào bức ảnh, hiệu ứng giống như kính lúp soi vào sẽ xuất hiện, cho phép thấy kích thước lớn.

Trường hợp chỉ cần phóng to đơn giản bạn dùng CSS3 để Zoom ảnh là đủ rồi. Tuy nhiên nếu muốn hiệu ứng đẹp hơn chúng ta cần xài Jquery. Plugin Cloud Zoom là ứng viên tốt đáp ứng các yêu cầu, nó tương thích với hầu hết các trình duyệt phổ biến bao gồm Chrome, FireFox, Opera, Safari, IE6+, nó cũng làm việc tốt với đa dạng các phiên bản của Jquery - phủ rộng từ version 1.4.3 cho đến 1.10.2 hay ngay cả 2.0.3

Cloud Zoom có 2 phiên bản:

• Trial - miễn phí: Không giới hạn thời gian dùng thử - nhưng bạn chỉ được phép dùng cho các trang web phi thương mại, và trên ảnh sẽ có dấu ấn riêng nói rằng bạn đang dùng phiên bản miễn phí (kiểu như watermark)
• Trả phí: Giá vào khoảng 25 Đô - Bạn được dùng trên bất cứ trang web nào - mất tiền mà :) Và được loại bỏ hoàn toàn watermark.

Bạn vào liên kết này để tải Cloud Zoom và xem demo luôn, nhớ chọn bản trial rồi tải về. Cấu trúc mã của nó khá đơn giản, sau đây mình sẽ giải thích:

Chèn code vào trước thẻ đóng head

Code mẫu như thế này:

<head>

        <!-- Cho jQuery vào-->

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

        <!-- Cho Cloud Zoom CSS vào -->

        <link rel="stylesheet" type="text/css" href="cloudzoom.css" />

        <!-- Cho Cloud Zoom script vào -->

        <script type="text/javascript" src="cloudzoom.js"></script>

        <!-- Gọi hàm -->

        <script type="text/javascript">

            CloudZoom.quickStart();

        </script>    

 </head>

1. Chèn Jquery vào bằng đoạn code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> ở đây đang dùng phiên bản 1.8.1 - bạn có thể dùng phiên bản khác nếu muốn. Nếu thích xài thư viện trên Google thì lấy đoạn code này: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
2. Cho CSS của Cloud Zoom vào bằng đoạn code:  <link rel="stylesheet" type="text/css" href="cloudzoom.css" /> dĩ nhiên đoạn CSS này bạn phải cho lên host của bạn rồi
3. Cho script Cloud Zoom vào: Đây là phần chính - chính đoạn mã ở đây thực thi phóng to ảnh, bạn cũng phải up file Javascript này lên host trước, code chèn vào HTML: <script type="text/javascript" src="cloudzoom.js"></script> 
4. Lời gọi hàm: <script type="text/javascript" CloudZoom.quickStart() </script>
5. Ngoài lề một chút, có thể có bạn muốn hỏi, tại sao ở bước 1 không up Jquery lên host mà lại lấy link từ Google hoặc jquery.com - câu trả lời là để nó giảm tải host cho bạn thôi. Bạn tự up lên host thì cũng không sao cả.

Chèn Code ở phần Body 

<img class = "cloudzoom" src = "images/small/image1.jpg" data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />

Bạn sẽ phải chuẩn bị 2 bức ảnh:

• Bức ảnh nhỏ: cho vào thư mục small bên trong thư mục images. Bức ảnh nhỏ chính là bức cần Zoom - phóng to. Đường dẫn của ảnh nhỏ được cho vào sau src
• Bức ảnh lớn: cho vào thư mục large bên trong thư mục images. Bức ảnh lớn thì giống y bức nhỏ chỉ khác là nó có kích thước to hơn thôi - ảnh lớn sẽ được lấy ra khi bạn zoom vào ảnh nhỏ. Đường dẫn của ảnh lớn được cho vào sau zoomImage
• Nhớ đầy đủ các dấu má như " và ', vì thiếu thì không lên được.

P/S: Ngoài Cloud Zoom bạn có thể thích Jet Zoom cả 2 đều dùng để phóng to ảnh (cùng hãng sản xuất luôn) nhưng hiệu ứng có khác nhau đôi chút.

8 thuộc tính văn bản trong CSS

Với đa số trang web, văn bản là thành phần quan trọng hàng đầu. Việc tác động tới cách trình bày của văn bản thông qua CSS là cách thức phổ biến để tạo ra hiệu ứng thẩm mỹ cũng như ấn tượng với người đọc.

Hôm nay Blog Mạng Lưới Toàn Cầu sẽ giới thiệu với bạn 8 thuộc tính như thế. Danh sách các thuộc tính văn bản trong CSS mà chúng ta sẽ xem xét trong bài này bao gồm:

• text-indent
• letter-spacing
• word-spacing
• text-decoration
• text-align
• line-height
• text-transform
• vertical-align

Giờ chúng ta sẽ bắt đầu đi vào các thuộc tính cụ thể...

Thuộc tính text-indent

Nếu muốn lùi đầu dòng như thế này, bạn phải dùng đến text-indent, bạn đã thấy chữ "Nếu" đã được thụt vào so với các dòng còn lại. Đoạn code mẫu khá đơn giản p {text-indent: 30px;} Ngoài px thì các đơn vị đo lường khác như in, cm, em, % cũng được chấp nhận.

Đoạn này là thí dụ cho text-indent sử dụng đơn vị %, với giá trị cụ thể là 50%. Chữ bị thụt vào đến một nửa chiều dài của dòng. Code mẫu: p {text-indent: 50%;}

Thuộc tính letter-spacing

Thuộc tính này dùng để điều chỉnh khoảng cách giữa các chữ cái. Thông thường bạn sẽ không đả động đến letter-spacing để điều chỉnh cả đoạn văn bản. Bởi vì font chữ đã có giá trị letter-spacing tối ưu cho mắt người đọc. Quái! Nếu đã vậy thì sinh ra thuộc tính này làm gì? Câu trả lời là không phải lúc nào bạn cũng cần văn bản hiện lên theo cách thông thường. Bạn muốn chúng ấn tượng, đặc biệt hay áp dụng cho các tiêu đề hoặc đoạn ngắn. Thí dụ đoạn dưới đây:

Bình thường: Ngày 20 - 10 năm nay Anh sẽ tặng gì cho Em đây?

Giãn ra:Ngày 20 - 10 năm nay Anh sẽ tặng gì cho Em đây?

Thu hẹp: Ngày 20 - 10 năm nay Anh sẽ tặng gì cho Em đây?

Cùng một nội dung, cùng font và kích cỡ chữ nhưng bạn đã thấy sự khác biệt rất lớn phải không, dòng dưới rõ ràng là gây chú ý hơn, bởi vì nó không phải là cái quen mắt. Dĩ nhiên không chỉ giãn ra, bạn còn có thể thu hẹp khoảng cách nếu muốn bằng cách sử dụng giá trị âm cho letter-spacing.

Code mẫu:

h2 {letter-spacing: 5px;}

Thuộc tính word-spacing

Nếu letter-spacing dùng để điều chỉnh khoảng cách giữa các ký tự thì word-spacing dùng để điều chỉnh khoảng cách giữa các từ. Vẫn thế, nếu để giá trị dương, các từ sẽ giãn ra, còn nếu để giá trị âm, các từ sẽ co lại gần nhau hơn, ví dụ:

Bình thường: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu!

Giãn ra: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu!

Thu hẹp: Tặng gì thì tùy tấm lòng Anh thôi, Em không câu nệ đâu!

Code mẫu:

p {word-spacing: 5px;}

Thuộc tính text-decoration

Nếu hay dùng thẻ a thì bạn cũng không lạ gì thuộc tính này - đặc biệt là giá trị underline. Text-decoration chuyên dùng để trang trí cho văn bản. Nói trang trí có vẻ nguy hiểm, thực tế, nó chỉ tạo ra các hiệu ứng thẩm mỹ đơn giản sau:

• Hiệu ứng gạch chân chữ, code mẫu: text-decoration: underline
• Hiệu ứng gạch ngang chữ, code mẫu: text-decoration: line-through
• Hiệu ứng gạch trên đầu chữ, code mẫu: text-decoration: overline

Gạch đầu chữ có lẽ ít dùng, gạch chân chữ hay dùng nhất, gạch ngang chữ thường dùng với ý định ám chỉ văn bản đó không chính xác nhưng không muốn xóa đi mà để người xem nhìn thấy để tránh. Riêng với gạch chân văn bản ngoài cách dùng CSS, bạn có thể đánh dấu văn bản đó bằng cặp thẻ <u> và </u> trong HTML, nó cũng cho kết quả tương tự. Sử dụng thuộc tính border-top và border-bottom cũng là ý tưởng hay để thay thế overline và underline trong một số trường hợp, vì nó cho phép chúng ta điều chỉnh khoảng cách với văn bản linh hoạt hơn.

Thuộc tính text-align

Cái này dùng để căn lề văn bản. Chắc bạn cũng không quá lạ lẫm với chúng, nếu từng xài Office rồi thì còn quen thuộc ấy chứ. Có 4 giá trị của thuộc tính text-align, bao gồm:

• left: văn bản được căn trái, theo mặc định thì mọi văn bản được căn trái.
• right: văn bản được căn phải.
• center: văn bản được căn chính giữa...chú thích trong các bức ảnh, văn bản ở phần footer và đôi khi là thẻ tiêu đề của bài viết hay được căn giữa cho vừa mắt. Người ta cũng thường căn giữa bức ảnh bằng mẹo cho nó vào thẻ div và để style cho div đó là text-align: center
• justify: văn bản được căn đều, thông thường văn bản được căn trái thì phải bên phải sẽ thụt thò, điều này thì cũng không ảnh hưởng gì, bình thường chúng ta vẫn đọc như thế thôi. Tuy nhiên nếu không muốn vậy, bạn cần dùng thuộc tính justify để cả 2 bên trái phải thẳng tắp. Nó hay được dùng khi chia cột trong các tạp chí. 

Ví dụ:

Căn trái text-align: left

Căn phải text-align: right

Căn giữa text-align: center

Để thấy được ý nghĩa của thẻ justify tôi cần đoạn văn bản dài ít nhất 3 dòng, và đây chính là đoạn văn bản ấy, tôi đang cố nghĩ ra nhiều từ để viết cho nó dài ra, cho nên có thể bạn đọc thấy nó hơi lăng nhăng. Nhưng đừng quan trọng hóa. Bạn chỉ cần nhớ trong đầu là đoạn này được căn bằng text-align: justify.

Code mẫu:

p {text-align: justify}

P/S: Để 2 bên lề đều thẳng, khoảng cách chữ của từng dòng sẽ được tăng lên hay giảm đi chút ít, do vậy bạn không nên dùng thuộc tính này cho các cột có chiều rộng quá nhỏ mà văn bản lại dài, vì lúc ấy lề thì thẳng thật nhưng trông nó rất ngộ!

Thuộc tính line-height

Thuộc tính này dùng để điều chỉnh chiều cao dòng. Nói chính xác hơn line-height điều chỉnh khoảng cách giữa hai đường cơ sở của các dòng liên tiếp nhau. Những giá trị mà bạn có thể gán cho thuộc tính line-height bao gồm:

• Số thuần túy, thí dụ: 1 hoặc 2 hoặc 3...bạn có thể để số thập phân nếu muốn, chẳng hạn 1.4 - giá trị này có nghĩa là chiều cao dòng gấp 1.4 kích thước font. Kích thước mặc định mà các trình duyệt áp dụng cho line-height rơi vào khoảng giá trị là 1.2
• %, chẳng hạn 100%, 200% hay 150% - giá trị này có nghĩa là chiều cao dòng gấp 1.5 kích thước font
• Đơn vị độ dài như px, pt, in, cm...Chúng ta nên hạn chế cách này vì trong trường hợp người dùng phóng to hay thu nhỏ font thì khoảng cách sẽ bị thu hẹp hoặc giãn ra bất thường.

Dưới đây là một số ví dụ, áp dụng cho các đoạn văn bản Lorem - nên bạn không cần phải hiểu ý nghĩa của chúng:

p {line-height: 1.4}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel sem eget urna laoreet laoreet. Morbi at urna convallis enim pretium porttitor at sit amet dolor. Integer dolor nisl, blandit ut urna sit amet, sagittis rutrum elit. Nullam a lacinia ipsum. Integer eget consequat odio. In commodo nibh magna, vitae posuere purus eleifend sed. 

p {line-height: 2}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel sem eget urna laoreet laoreet. Morbi at urna convallis enim pretium porttitor at sit amet dolor. Integer dolor nisl, blandit ut urna sit amet, sagittis rutrum elit. Nullam a lacinia ipsum. Integer eget consequat odio. In commodo nibh magna, vitae posuere purus eleifend sed. 

p {line-height: 100%}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel sem eget urna laoreet laoreet. Morbi at urna convallis enim pretium porttitor at sit amet dolor. Integer dolor nisl, blandit ut urna sit amet, sagittis rutrum elit. Nullam a lacinia ipsum. Integer eget consequat odio. In commodo nibh magna, vitae posuere purus eleifend sed. 

Thuộc tính text-transform

Dùng để biến đổi từ chữ thường sang chữ TOÀN HOA hoặc Hoa Đầu Dòng và ngược lại. Có 3 giá trị:

• uppercase: biến đoạn bất kỳ thành chữ "toàn là hoa như thế này" - code mẫu - <span style="text-transform: uppercase;">toàn là hoa như thế này</span>
• lowercase:  biến đoạn bất kỳ thành chữ "TUYỀN LÀ CHỮ THƯỜNG NHƯ THẾ NÀY" - code mẫu - <span style="text-transform: lowercase;">TUYỀN LÀ CHỮ THƯỜNG THẾ NÀY</span>
• capitalize: biến đoạn bất kỳ thành chữ "hoa đầu từ như thế này" - code mẫu - <span style="text-transform: capitalize;">hoa đầu từ như thế này"</span>

Nói chung thì không phải font nào thuộc tính này nó cũng chuyển đổi tốt và đẹp cho nên trước khi muốn chuyển bạn nên kiểm tra trước. Nhưng bạn yên tâm các font phổ thông thì hầu như OK cả.

Có thể bạn hỏi text-transform này có ích lợi gì - áp dụng trong trường hợp nào? Câu trả lời là:

• Thí dụ trường nhập họ tên trong Form, bạn muốn người dùng khi nhập tên họ phải là Nguyễn Đức Anh chứ không phải là chữ thường nguyễn đức anh.
• Bạn muốn đổi kiểu chữ tiêu đề cho hàng loạt bài viết sang dạng nào đó, giờ mà thay đổi bằng tay cho từng tiêu đề thì rất mệt, bạn chỉ cần dùng text-transform để thay đổi hàng loạt.
• Và còn rất nhiều trường hợp khác mà hiện...mình chưa nghĩ ra!

Giờ thì ví dụ luôn, giờ bạn thử gõ vào trường họ tên dưới đây xem sao, dù gõ kiểu gì nó cũng ra TOÀN IN HOA hết:

Họ Tên:

Thuộc tính vertical-align

Dùng để điều chỉnh khoảng cách của văn bản so với đường cơ sở, các giá trị:

• baseline: theo mặc định vertical-align là baseline
• sub: Hãy nhìn vào chữ vertical-align, nó đang được để là sub - bạn có thể dùng cái này để thay thế tag sub trong HTML
• super: Còn trường hợp này vertical-align được để là super - bạn có thể dùng cái này để thay thế tag sup trong HTML
• middle: Bây giờ vertical-align đang được để ở chính giữa đường cơ sở
• Hoặc giá trị số bất kỳ, dương hoặc âm, ví dụ như 15px, -10px: Tôi đang để chữ vertical-align lên 15px so với đường cơ sở.

Code mẫu:

Tôi đang để chữ <span style="vertical-align: 15px;">vertical-align</span> lên 15px so với đường cơ sở.

Tạo Form đăng ký bằng Javascript và thẻ input

Họ:
Tên:
Email:
Số Điện Thoại:
Số Lượng Mua:
Ngày Nhận Hàng:
Thanh Toán:	Chuyển Khoản Trực Tiếp Khi Giao Hàng

Làm form bằng HTML và chỉnh sửa lại giao diện cho đẹp với CSS không khó, bạn chỉ cần nhớ mấy cái input type là OK. Vấn đề nằm ở Validate, tức là chuẩn hóa dữ liệu nhập vào và một số yêu cầu khác nữa. HTML5 làm form cũng rất tốt, nhưng có hạn chế là chưa được hỗ trợ rộng rãi và thống nhất giữa các trình duyệt, do vậy chúng ta vẫn phải cậy nhờ khá nhiều vào Javascript. Về sau bạn sẽ biết ngoài việc bắt lỗi dữ liệu tại máy khách thì chúng ta còn phải kiểm tra dữ liệu một lần nữa tại Server cho chắc ăn bằng một ngôn ngữ lập trình web kiểu như PHP hoặc ASP.Net...Nhưng đấy là về sau! Hiện tại chúng ta chỉ quan tâm tới Javascript thôi nhé.

Có vẻ chém gió hơi nhiều, giờ sẽ vào đề ngay. Chẳng hạn tôi có Form như đầu bài. Chúng ta phải bắt lỗi trong các trường hợp sau:

• Người dùng không nhập dữ liệu
• Người dùng không nhập đúng chuẩn email dạng aaa@bbb.ccc
• Người dùng nhập chữ vào Số điện thoại hoặc nhập hơn 11 số
• Người dùng nhập chữ vào Số lượng mua, hoặc con số nhỏ hơn hoặc bằng 0, hoặc lớn hơn hoặc bằng 100
• Ngày nhận hàng không hợp chuẩn
• Người dùng không chọn bất cứ hình thức thanh toán nào

Thực tế là tôi đã viết code Javascript cho Form trên rồi, giờ bạn nhấn nút Đăng Ký Mua là biết liền, và thử xem nó có bắt lỗi đúng như yêu cầu không. Code mẫu:

<script type="text/javascript">
// JavaScript Document
    function validateForm() {
        //Họ phải được điền
        var ho = document.forms["myForm"]["ho"].value;
        if (ho == "") {
            alert("Họ không được để trống");
            return false;
        }
        //Tên phải được điền
        var ten = document.forms["myForm"]["ten"].value;
        if (ten == "") {
            alert("Tên không được để trống");
            return false;
        }
        //Email phải được điền chính xác
        var email=document.forms["myForm"]["email"].value;
        var aCong=email.indexOf("@");
        var dauCham = email.lastIndexOf(".");
        if (email == "") {
            alert("Email không được để trống");
            return false;
        }
        else if ((aCong<1) || (dauCham<aCong+2) || (dauCham+2>email.length)) {
              alert("Email bạn điền không chính xác");
              return false;
          }
          //Nhập số điện thoại
          var dienThoai = document.forms["myForm"]["dienThoai"].value;
          var kiemTraDT = isNaN(dienThoai);
          if (dienThoai == "") {
              alert("Điện thoại không được để trống");
              return false;
          }
          if (kiemTraDT == true) {
              alert("Điện thoại phải để ở định dạng số");
              return false;
          }
          //Nhập số lượng muốn mua
          var soLuong = document.forms["myForm"]["soLuong"].value;
          var kiemTraSL = isNaN(soLuong);
          if ((soLuong == "") || (soLuong <= 0)) {
              alert("Số lượng không được để trống và phải lớn hơn 0");
              return false;
          }
          if (soLuong > 100) {
              alert("Số lượng mua không được lớn hơn 100");
              return false;
          }
          if (kiemTraSL == true) {
              alert("Số lượng mua phải để ở định dạng số");
              return false;
          }
          //Chọn ngày nhận hàng
   var nm = document.forms["myForm"]["ngaymua"].value;
   if (nm == "") {
    alert("Ngày không được để trống");
    return false;
    }
    //Chọn kiểu thanh toán
          var ck = document.getElementById("ck");
          var tt = document.getElementById("tt");
    if ((ck.checked == false) && (tt.checked == false)) {
     alert("Bạn phải chọn một kiểu thanh toán");
     return false;
     }
}
</script>

<br />
<form action="#" method="post" name="myForm" onsubmit="return validateForm()">
<table bgcolor="#DDDDDD" id="formdangky" style="width: 450px;">
<tbody>
<tr>
    <td class="tenhang" width="118">Họ:</td>
    <td width="320"><input name="ho" type="text" /></td>
  </tr>
<tr>
    <td class="tenhang">Tên:</td>
    <td><input name="ten" type="text" /></td>
  </tr>
<tr>
    <td class="tenhang">Email:</td>
    <td><input name="email" type="text" /></td>
  </tr>
<tr>
    <td class="tenhang">Số Điện Thoại:</td>
    <td><input maxlength="11/" name="dienThoai" type="text" /></td>
  </tr>
<tr>
    <td class="tenhang">Số Lượng Mua:</td>
    <td><input name="soLuong" type="text" /></td>
  </tr>
<tr>
    <td class="tenhang">Ngày Nhận Hàng:</td>
    <td><input id="datepicker" name="ngaymua" type="text" /></td>
  </tr>
<tr>
    <td class="tenhang">Thanh Toán:</td>
    <td><input id="ck" name="thanhToan" type="radio" value="chuyenKhoan" /> Chuyển Khoản
        <input id="tt" name="thanhToan" type="radio" value="trucTiep" /> Trực Tiếp Khi Giao Hàng
    </td>
  </tr>
<tr>
    <td><input name="Submit" type="submit" value="Đăng Ký Mua" /></td>
    <td><input name="Reset" type="reset" value="Xóa" /></td>
  </tr>
</tbody></table>
</form>

Bây giờ tôi sẽ giải thích code.

Thẻ mở Form:

<form name="myForm" action="#" onsubmit="return validateForm()" method="post">

2 cái action="#" và method="post" được dùng cho việc gửi dữ liệu lên máy chủ server nên hiện bạn không cần phải quan tâm, chúng ta chỉ cần để ý đến tên của Form ở thuộc tính name="myForm" và nơi xử lý dữ liệu qua onsubmit="return validateForm()"

validateForm() chính là tên hàm mà trong đó ta xây dựng code Javascript để bắt lỗi. Ta để onsubmit có nghĩa là, khi người dùng nhấn nút submit thì dữ liệu được chuyển đến hàm validateForm()

Thẻ input

Một thẻ input mẫu trong bài trên có dạng như này: <input name="ten" type="text" />

Tôi sử dụng type là text, 6 trường đầu tiên tôi sử dụng type này, trường Thanh toán là type radio, nút Đăng Ký Mua là type submit, nút Xóa là type reset.

Điều quan trọng trong thẻ input chính là name của nó. Chính thông qua name của Form và của Input mà Javascript lấy được dữ liệu nhập vào.

Lấy dữ liệu từ input

Đoạn code mẫu để lấy dữ liệu từ thẻ input: var ten = document.forms["myForm"]["ten"].value;

Như đoạn code trên có nghĩa là bạn lấy giá trị của thẻ input có tên là "ten" trong Form có tên là "myForm" và gán giá trị lấy được này vào biến var ten

Tương tự cho email: var email=document.forms["myForm"]["email"].value;

Không được bỏ trống dữ liệu

var ten = document.forms["myForm"]["ten"].value;
if (ten == "") {
alert("Tên không được để trống");
return false;
}

Theo đó, sau khi lấy được dữ liệu từ thẻ input và gán vào biên ten, chương trình dùng hàm if để kiểm tra ten có rỗng hay không - if(ten==""). Nếu thỏa mãn điều kiện rỗng sẽ có hộp thông báo "Tên không được để trống" và ta dùng hàm alert để điều khiển tác vụ này, cuối cùng return false.

Kiểm tra dữ liệu nhập vào có phải là số không

var dienThoai = document.forms["myForm"]["dienThoai"].value;
var kiemTraDT = isNaN(dienThoai);
if (kiemTraDT == true) {
alert("Điện thoại phải để ở định dạng số");
return false;
}

Hàm dùng để kiểm tra số đó là isNaN - viết tắt của is Not a Number. Nếu isNaN trả về giá trị TRUE nghĩa là đó không phải là một số.

Kiểm tra Email hợp chuẩn

Có lẽ với đa số mọi người thì đây là code phức tạp nhất (với mình cũng thế). Địa chỉ email chính xác phải thỏa mãn điều kiện sau:

• Phải có ký tự @
• Trước @ phải có ít nhất 1 ký tự
• Phải có ít nhất 1 dấu chấm trong email
• Phải có ít nhất 1 ký tự đứng giữa @ và dấu chấm
• Dấu chấm không được đứng ở vị trí cuối cùng

var email=document.forms["myForm"]["email"].value;
var aCong=email.indexOf("@");
var dauCham = email.lastIndexOf(".");

if (email == "") {
alert("Email không được để trống");
return false;
}

else if ((aCong<1) || (dauCham<aCong+2) || (dauCham+2>email.length)) {
alert("Email bạn điền không chính xác");
return false;
}

Chúng ta cần chú ý đến lệnh indexOf, nó sẽ xác định số ký tự đứng trước nó tính từ trái sang. Ví dụ, email ab@xy.com có giá trị email.indexOf("@") là 2 vì có 2 ký tự là a và b đứng trước @

email.indexOf(".") có giá trị là 5 vì có 5 ký tự đứng trước dấu . là a, b, @, x, y

Nếu không có ký tự cần tìm trong chuỗi, hàm indexOf sẽ trả về -1.

Đến đây bạn tự hỏi email.lastIndexOf(".") có ý nghĩa gì. Hết sức chú ý chữ last. Lệnh này cũng là xác định số ký tự đứng trước dấu chấm nhưng là dấu chấm cuối cùng. Chẳng hạn email xyz.com@gmail.com, thế thì dấu chấm cuối cùng là dấu chấm sau chữ gmail chứ không phải sau chữ xyz. Giờ chúng ta cùng tìm hiểu ý nghĩa code.

var aCong=email.indexOf("@");

if (aCong<1)

Chỉ có 2 trường hợp xảy ra khi aCong<1:

• Không có @ trong địa chỉ email, lúc này email.indexOf("@") = -1
• aCong = 0, nghĩa là không có ký tự nào đứng trước @, hay email nhập vào có dạng @klm.com - tức là không hợp chuẩn
• Vậy là với câu lệnh trên ta đã ép dữ liệu phải có @, và trước @ phải có ký tự

Sau @ phải có ít nhất 1 ký tự sau đó mới đến dấu chấm do đó, email hợp chuẩn thì số ký tự đứng trước dấu chấm luôn lớn hơn số ký tự đứng trước @ ít nhất 2 đơn vị - tức là dauCham >= aCong + 2, ngược lại điều này thì email đó không hợp lệ, nói cách khác là: dauCham < aCong + 2

Lệnh trên chúng ta đã ép phải tồn tại dấu chấm trong email, ngoài ra nó cũng buộc giữa dấu chấm cuối cùng và email phải có ít nhất 1 ký tự.

Tiếp đến ta xem xét câu lệnh ngăn không cho dấu chấm là ký tự cuối cùng trong email.

var dauCham = email.lastIndexOf(".");

dauCham+2>email.length

• email.length xác định số ký tự của email
• Sau dấu chấm cuối cùng phải có ít nhất 1 ký tự do vậy nếu dauCham + 2 > email.length nghĩa là email đó không hợp chuẩn.

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://

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:

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

Trình duyệt	MP4	WebM	Ogg
Internet Explorer	Có	Không	Không
Chrome	Có	Có	Có
Firefox	Có (FireFox 21+)	Có	Có
Safari	Có	Không	Không
Opera	Không	Có	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>

Slideshow đơn giản với code Javascript thuần

Slideshow là yếu tố trợ giúp thẩm mỹ rất tốt cho trang web, hôm nay tôi sẽ giới thiệu với bạn code Javascript để làm Slideshow dạng đơn giản kiểu next, back. Code khá ngắn và cũng không phức tạp lắm.

Đầu tiên bạn phải chuẩn bị vài bức ảnh, bao nhiêu cái tùy bạn, trong ví dụ này tôi lấy 4 bức JPG. Tiếp theo chúng ta cho 4 anh bạn này vào thư mục images, nhớ kiếm cả 2 ảnh next và back để cho vào luôn nếu muốn đẹp còn không để 2 cái button thô thô như mình ở trên cũng được, cuối cùng tạo thư mục js để chứa file Javascript. Copy đoạn code sau cho vào file có tên slideshow.js trong thư mục js:

var anhAr = []; 

var imgIndex = 0; 

function loadAnh() { 

for (var i = 0; i < 4; i++) { 

anhAr[i] = new Image(); 

anhAr[i].src = "images"+"/"+"ss"+i+".jpg"; } } 

function next() {

if (imgIndex == 3) {

 imgIndex = -1; } 

if (imgIndex < 3) { 

imgIndex++; document.getElementById("ss").src = anhAr[imgIndex].src; } }

function back() {

if (imgIndex == 0) { 

imgIndex = 4; } 

if (imgIndex > 0) { 

imgIndex--; 
document.getElementById("ss").src = anhAr[imgIndex].src; } }

Ở trang HTML tại thẻ mở body ta gọi hàm loadAnh bằng đoạn code sau: <body onload = "loadAnh();">  Dĩ nhiên trước đó bạn phải liên kết với file slideshow.js bằng cách thêm đoạn code dưới đây vào trước thẻ đóng head: <script type="text/javascript" src="js/slideshow.js"></script>

Phần tới bạn sẽ tạo khu vực chứa slideshow trong html, nó sẽ có kiểu như này:

<div id="showanh">
      <input type="image" src="images/back.png" height="80" width="80" value="back" onclick="back();" />
      <img id="ss" src="images/ss0.jpg" />
      <input type="image" src="images/next.png" height="80" width="80" value="next" onclick="next();"/>
</div> <!-- showanh -->

Để onclick="back();" và onlick="next();" nhằm mục đích khi click vào các nút back và next, nó sẽ gọi các hàm tương ứng. Một chú ý nhỏ, 4 bức ảnh được đặt tên theo thứ tự từ ss0, ss1, ss2 và cuối cùng là ss3. Tại sao lại đặt tên như vậy thì dưới đây tôi sẽ nói sau. Giờ tới phần giải thích code Javascript.

Mảng anhAr và Hàm loadAnh

var anhAr = [];// Khởi tạo mảng anhAr

var imgIndex = 0; // Khởi tạo biến imgIndex với giá trị là 0 

function loadAnh() { 

for (var i = 0; i < 4; i++) { 

anhAr[i] = new Image(); 

anhAr[i].src = "images"+"/"+"ss"+i+".jpg"; } }

Hàm loadAnh - function loadAnh() có mục đích đưa 4 bức ảnh vào mảng anhAr, để làm điều này, ta dùng hàm for chạy từ 0 cho đến nhỏ hơn 4 (tức là 3) với bước nhảy là 1 (i++). Bạn còn nhớ tên ảnh từ ss0 đến ss3 không? Ý nghĩa tên bức ảnh là để tiện dùng trong hàm này.

anhAr[i] = new Image() dùng để khởi tạo phần tử mảng có kiểu là Ảnh (Image).

anhAr[i].src = "images"+"/"+"ss"+i+".jpg" dùng để lấy đường dẫn cho ảnh, nhìn vào đây bạn có thể thấy, ảnh nằm trong thư mục images, với tên là ssi (i từ 0 cho đến 3) và định dạng là .jpg

Vậy cả hàm loadAnh() ở trên sẽ lưu 4 bức ảnh vào mảng anhAr, ghi nhớ cả đường dẫn của những bức ảnh này nữa.

Hàm next

function next() { 

if (imgIndex == 3) { 

imgIndex = -1; } 

if (imgIndex < 3) { 

imgIndex++; 

document.getElementById("ss").src = anhAr[imgIndex].src; } }

Để nhanh chóng hiểu hàm next tôi sẽ giải thích đoạn code trọng tâm của nó là đoạn:

if (imgIndex < 3) 

{ imgIndex++; 

document.getElementById("ss").src = anhAr[imgIndex].src; }

Ở đây bạn thấy khi hàm next được gọi, nó sẽ kiểm tra giá trị của imgIndex. Bạn còn nhớ giá trị khởi tạo của imgIndex ta để là 0, và đây là giá trị của imgIndex khi ta bật trang lần đầu.

Vì 0 nhỏ hơn 3, thỏa mãn điều kiện nên, imgIndex được chỉ thị tăng lên 1 đơn vị (imgIndex++), sau đó src của id có tên là ss sẽ được thay thế bằng src của anhAr[1]

id có tên ss trong html chính là thẻ <img id="ss" src="images/ss0.jpg" /> hay nói cách khác, bằng việc nhấn nút next, đoạn code trên sẽ thay đổi thành: <img id="ss" src="images/ss1.jpg" /> Tức là bức ảnh ss0.jpg sẽ được thay thế bằng ss1.jpg

Điều gì xẩy ra khi imgIndex = 3, đây là lúc thích hợp để giải thích đoạn code đầu tiên của nút next:

if (imgIndex == 3) { imgIndex = -1; }

Điều này có nghĩa là nếu đến bức ảnh cuối cùng, hãy gán imgIndex = -1, sau đó vì -1 nhỏ hơn 3 nên imgIndex lại tăng lên 1, tức là về 0. Nói cách khác, ta sẽ được đưa về bức ảnh đầu tiên tức là ss0.jpg. Vậy mục đích của đoạn code trên giúp ta có thể next vô tận, nếu không có nó, đến thời điểm img = 3, bạn không thể next được nữa.

Về phần code back, nó cũng hoàn toàn tương tự, điểm khác biệt duy nhất là nó trái ngược với next mà thôi, mọi giải thích vẫn nguyên như cũ.

Làm SlideShow trong Blogspot

Nghe hấp dẫn đúng không, mình thử làm ngay và luôn nhé, vì dùng blogspot, cho nên đường dẫn ảnh không được đẹp như trên, nhưng không sao, chúng ta chỉ cần thay đổi code một chút là được, cụ thể chúng ta phải gán từng phần tử của mảng với địa chỉ cụ thể của ảnh như dưới đây:

var anhAr = [];
var imgIndex = 0;
anhAr[0] = new Image();
anhAr[0].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQU3BOhO4mo_fx2j_ds8tsfZHxtLbnk2L9ZsAKddIWVHqssThvfl904lD5y0bXMcrb3YmRCJ_boN6NZOj__mIsJwu7_gRDHY2JIFw51Dle3is_gRFspZNp-_Fh79nFteydKySUMh0DQ/s1600/stock-photo-mist.jpg";

anhAr[1] = new Image();
anhAr[1].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0hLJ-as6AhuhKgF1QeG_xxrfmVR4hDUcSs2iVyPEFmBCfs56UhdbcBB14bvusR8yZ7jwIDG7ht7J_IkpPx5D4XWpKdr_iso6WQJufTEnWXpQm1mf4f6tLJb3AO_yTtzsuCZkkGsof0A/s1600/stock-photo-lanka.jpg";

anhAr[2] = new Image();
anhAr[2].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCl-Zyz3eRdmv7rN5dYAfqEVlQ2lg5iblyFac-ThVO2Cl9lv3FPVVVQZSgGoW1Z_CSXWO483dAYrTnwDdyAlhKCXVr1UQPPSLD0z6ZgmAbl0kKLntmGfKqwQX6fcqub5GSyuKREcn7w/s1600/stock-photo-human-hand.jpg";

anhAr[3] = new Image();
anhAr[3].src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCjVjALGuaDByqcpUPnw38bpfJcmKVNSAe7xAyDREqUKEmHKgYpu9aNB5cKoj9jnHDIFv9juWNjKGlQLPkkXySCY1WsvQ2NxACLt1oHpBX42SFRaLT0ahDF8SbsoYgiqwHlNAWtBZJg/s1600/stock-casting.jpg";

Những phần code còn lại thì giống nguyên, không cần thay đổi gì cả.

Sử dụng máy tính bỏ túi của Google

Google không đơn thuần chỉ là công cụ tìm kiếm, nó còn chứa nhiều điều thú vị mà bạn chưa biết. Đây là bài viết đầu tiên trong loạt bài khám phá Google, nhằm giúp chúng ta sử dụng thành thục công cụ online cực mạnh này. Và hôm nay chúng ta bắt đầu với máy tính bỏ túi.

Vào Google Việt Nam gõ bất cứ phép tính nào, chẳng hạn 17/3 nhé, Google sẽ tính kết quả cho bạn như trên hình minh họa bài viết. Giờ chúng ta tự hỏi, chiếc máy tính bỏ túi này của Google làm được những gì? Tôi sẽ trình bày ngay và luôn về khả năng của nó.

#1. Cộng - Trừ - Nhân - Chia

Không có gì phải nói nhiều về những phép tính này, 4 nút cơ bản ở ngay góc bên tay phải:

#2. Ngoặc đơn và Phần trăm

Ở ngay phía trên cùng, các phép tính trong ngoặc đơn sẽ được ưu tiên tính toán trước. Google cũng bổ sung nút % rất hay dùng ngay bên cạnh:

#3. Các hằng số hay dùng PI và e

Toán phổ thông và đại học rất hay dùng 2 hằng số này, giá trị của PI xấp xỉ 3.14 còn của e là 2.71

#4. Các hàm Sin - Cos - Tan

Bạn có thể tính Sin - Cos - Tan theo Radian hoặc Độ, mặc định là Radian, để đổi sang Độ thì nhấn nút này:

#5. Các hàm liên quan đến lũy thừa

Bao gồm:

• Giai thừa: X! = 1 * 2 * 3 *...* X
• Ln
• Log
• Khai căn bậc hai, ví dụ căn bậc 2 của 9 là 3
• Hàm số mũ, x mũ y, ví dụ 2 mũ 3 = 8

#6 Lưu giữ kết quả của phép tính trước

Nút Ans được dùng để gọi lại kết quả của phép tính trước. Bạn cứ khám phá sẽ hiểu ngay thôi.

Tùy chỉnh chức năng Nhận xét trong Blogspot

Nhận xét thể hiện cho sự tương tác giữa độc giả và trang web của bạn, tôi luôn coi nhận xét là phần vô cùng quan trọng. Một trang web có nhiều nhận xét luôn là trang sở hữu traffic tốt. Độc giả sẽ khen nếu bài hay, góp ý nếu có thiếu sót, chia sẻ kiến thức mới...gì thì gì, điều đó tạo ra những nội dung bất ngờ và thú vị mà nhiều khi bạn không ngờ tới.

Vậy nhiệm vụ của bạn là gì?

• Khuyến khích độc giả chia sẻ nhận xét.
• Không tạo ra khó khăn khi nhận xét, chẳng hạn như yêu cầu phải đăng nhập phức tạp...

Hệ thống Nhận xét - Bình luận mặc định của Blogspot

Blogspot cung cấp cho chúng ta tùy chọn đa dạng cho phần nhận xét mặc định của nó...Ở giao diện quản lý, bạn vào phần Cài đặt > Bài đăng - Nhận xét:

Bạn chú ý đến khu vực tùy chọn của Nhận xét. Ở phần Vị trí nhận xét bạn chọn được nhúng (bình thường cái này đã được chọn là mặc định rồi)

Ở phần Ai có thể nhận xét có tới 4 tùy chọn cho bạn, nếu muốn kích thích người dùng, hãy để như trong hình, tức là Bất kỳ người nào. Với các lựa chọn còn lại, người dùng phải đăng nhập thì mới đăng nhận xét được. Nếu bạn để Người dùng có Tài khoản Google thì cũng không tệ lắm vì giờ đa số mọi người đều có Gmail...

Ở phần Kiểm duyệt nhận xét có 3 chọn lựa, nếu bạn để Bất kỳ ai cũng có thể nhận xét thì nên để Luôn luôn kiểm duyệt - chế độ này sẽ không Show ra nhận xét cho đến khi bạn đồng ý nhận xét đó không vi phạm điều gì (thí dụ chửi tục, nói linh tinh...) - chính bạn sẽ là người kiểm duyệt:

Nếu để Thỉnh thoảng thì Blogspot chỉ yêu cầu bạn kiểm duyệt với nhận xét nó nghi ngờ. Với Không bao giờ thì bất kỳ nhận xét nào của người đọc sẽ được Show ra ngay lập tức mà không thông qua bất cứ sự kiểm duyệt nào. Tùy vào nội dung Blog, nếu thấy thích hợp và tự tin, để Không bao giờ cũng là ý tưởng hay - mặc dù nó có rủi ro chút ít khi bạn gặp "trẻ trâu" hoặc spamer!.

Nếu người dùng đã đăng nhận xét, bạn vào đâu để kiểm duyệt? Rất đơn giản thôi, bạn vào phần Nhận xét ở trang quản trị, vào tiếp Đang chờ kiểm duyệt:

Nếu nhận xét OK thì click Xuất bản, nếu vi phạm nhấn Xóa, nếu là của Spamer thì click Spam.

...Nếu quá bận rộn, ít khi vào Blog, thì bạn có thể điền email vào Gửi email yêu cầu kiểm duyệt, Blogspot sẽ gửi nhận xét tới email cho bạn. Như thế bạn sẽ không bỏ lỡ nhiều nhận xét. Tất nhiên nếu bạn hay vào Blog thì không cần dùng tính năng này nữa.

Tiếp đến ở phần Hiển thị xác minh từ bạn nên để Không:

Tính năng của hiển thị xác minh từ là để chống Spam:

Xác định nhận xét được nhập vào do con người chứ không phải tự động bởi máy, nói chung đa số các blog mới làm thì ít bị spam lắm nên bạn không cần - điều này giúp người dùng thoải mái hơn, bởi vì gõ những ký tự nghiêng ngả xiêu vẹo (capcha) đâu có đơn giản.

Tuy nhiên, nếu sau này bạn thấy Blog bị spam thì chỉ cần chuyển Không thành Có, chúng ta tùy tình hình mà thay đổi chứ cũng không cứng nhắc làm gì.

Cuối cùng là Thư thông báo mẫu nhận xét, đây là đoạn văn bản bạn thêm vào ngay phía trên ô soạn thảo nhận xét, bạn có thể dùng nó để kích thích người đọc để lại bình luận...

Và đây là kết quả:

Thêm tính năng bình luận gần đây vào cột bên phải trang Blog của bạn là cách hay để thu hút khách ghé thăm

OK như vậy là bạn đã hoàn thành cấu hình Nhận xét trong Blogspot. Tiếp theo tôi sẽ giới thiệu hệ thống nhận xét khác, bạn chỉ sử dụng một trong hai hệ thống nhận xét này thôi nhé.

Hệ thống nhận xét của Google+

Từ khi Google+ ra đời, họ cho phép bạn sử dụng tính năng Nhận xét của Google+ trên Blog thay vì chức năng mặc định, cách làm như sau:

Ở bên tay trái giao diện quản lý Blog bạn nhấn vào Google+

Tiếp đến tick vào sử dụng Nhận xét của Google+ trên blog

Điểm mạnh của nhận xét Google+ là khi ai đó đặt câu hỏi, sau đó bạn trả lời thì người hỏi sẽ biết bạn vừa trả lời để rồi người hỏi sẽ vào trang web để xem.

OK, như vậy là xong, mỗi hệ thống có ưu điểm riêng, cá nhân mình từng xài hệ thống nhận xét của Blogspot nhưng hiện tại sử dụng hệ thống comment của Facebook và Google+

XEM THÊM

• Cách tạo danh sách khi viết bài trong blogspot
• Cách thêm comment facebook vào blogspot
• Cách SEO ảnh trong blogspot
• Hướng dẫn tạo bài viết mới trong blogspot
• Cách thay đổi biểu tượng mặc định của blogspot trên trình duyệt
• Cách bỏ thanh điều hướng trên cùng trong blogspot
• Cách tùy chỉnh URL bài viết trên blogspot
• Code nút lên đầu trang cho Blogspot và WordPress
• Thêm tính năng bình luận gần đây vào blogspot
• Hướng dẫn trỏ tên miền về blogspot
• Tạo nút Like Facebook và Google+ trượt dọc bài viết
• Cách tạo bài viết ngẫu nhiên cho blogspot
• Hướng dẫn tạo menu ngang cho blogspot
• Cách tạo Fanpage bán hàng trên Facebook
• Cách chèn Fanpage Facebook vào Blogspot hoặc WordPress
• Mẹo hiển thị tiêu đề bài viết trước tên của blog
• Hướng dẫn thay đổi font chữ và kích cỡ chữ cho blogspot