| |||
Trong bài viết này vietSEO sẽ cùng các bạn tìm hiểu và phân tích ảnh hưởng của từ khóa trong địa chỉ URL Website của bạn.Google nói gì về từ khóa trong URLMatt Cutts, một kỹ sư về chất lượng tìm kiếm của Google vừa đăng tài một video trong đó có đề cập tới vị trí của từ khóa trong URL. Matt Cutts khẳng định rằng từ khóa trong URL ít nhiều có lợi.Matt Cutts cũng khuyên các Webmaster không nên lo lắng quá nhiều về thứ tự của từ khóa trong địa chỉ URL và khuyên không nên đặt quá nhiều từ khóa và trong cùng một địa chỉ URL. Lời khuyên của Yahoo về từ khóa trong URLMột trong những bằng sáng chế mới được đăng ký gần đây (ngày 26 tháng 3 2009) của Yahoo có nhắc đến kỹ thuật phân tích địa chỉ URL. Trong đó, Yahoo phân tích cách thức mà máy tìm kiếm sẽ trích lọc thông tin, từ khóa từ địa chỉ URL của các trang.Máy tìm kiếm sẽ phân tích rất nhiều thành phần khác nhau của Website để hiểu được nội dung của trang đó. Hầu hết từ khóa đều được tách lọc từ nội dung của trang, tuy nhiên máy tìm kiếm cũng có thể phân tích URL của Website để tìm ra các từ khóa liên quan. Bằng sáng chế của Yahoo cũng phân tích chi tiết kỹ thuật tách lọc từ khóa từ địa chỉ URL. Đây là một dẫn chứng quan trọng chứng tỏ Yahoo cũng xem xét đến từ khóa trong đường dẫn URL. Tư duy của vietSEO cấu trúc tài nguyênMặc dù Web đã tiến rất xa với các công nghệ và yêu cầu, thói quen của người dùng, nhưng vietSEO tin rằng kiến trúc kinh điển của Web vẫn có chỗ đứng quan trọng trong xa lộ thông tin Internet.Nhìn về bản chất thì những tài nguyên Web hay tài nguyên trong máy tính của bạn cũng y hệt nhau. Sự khác biệt theo mình thấy có chăng là định dạng và khả năng chia sẻ hay cách tổ chức dữ liệu theo nhu cầu của người dùng (có thể phức tạp hơn thế, nhưng ít ra đó là góc nhìn của cá nhân mình). Lấy một ví dụ đơn giản, như bài viết này, khi nằm trong máy tính của mình, nó sẽ có tên “tu-khoa-trong-url.txt” và nằm trong thư mục con “cau-truc” và thuộc thư mục mẹ “tin-hoc” nằm trong “my documents” trong ổ “C:” của mình. Cách sắp xếp khoa học bao giờ cũng giúp người dùng hiểu được nội dung và cấu trúc của dữ liệu. Thế nhưng dữ liệu đã tiến xa như đã nói vì nó cần được dễ dàng thao tác, sử lý và chia sẻ. Có rất nhiều giải pháp, ví dụ bạn có thể cải thiện khả năng truy cập, chia sẻ bằng các xuất bản dưới dạng Web tĩnh HTML với cấu trúc thư mục tương tự, chỉ khác về giao thức. Hoặc có thể tổ chức dưới dạng cơ sở dữ liệu v.v. Nhưng dù hình thức nào, thì thành phần URL cũng được chia ra thành các phần như sau :
http://www.vietseo.net/structure/tu-khoa-url-thu-hang-may-tim-kiem/
http://www.vietseo.net/?s=seoBạn có tìm thấy sự tương đồng với cách sắp xếp tài nguyên trong máy tính của bạn không ? Nếu suy nghĩ kỹ một tý, các bạn sẽ hiểu hàm ý của mình trong việc so sánh này.Vì thế, máy tìm kiếm sẽ tách lọc thông tin theo hướng nói trên thành các thành phần khách nhau. Các từ khóa sẽ được dùng để xếp loại trang cho các lệnh tìm kiếm hoặc để hiểu được nội dung của trang. Và trong khi đánh chỉ số, một số thành phần sẽ được cho vào danh sách phân tích như trên, trong khi một số khác sẽ bị dán nhãn đen và không được tính đến. Theo vietSEO thì tôi phải làm gì với URL ?Qua các dẫn chứng, phân tích và kinh nghiệm bản thân, thì máy tìm kiếm ít nhiều có tính đến URL dù Web đã phát triển lên một mức cao hơn nhưng các hình thức tổ chức hoàn toàn tương tự theo nghĩa rộng. Nếu bạn là người cầu toàn và muốn tận dụng triệt để mọi yếu tố và không gặp trở ngại về kỹ thuật, thì hãy tối ưu hóa URL theo hướng mà máy tìm kiếm dễ dàng phân tích và đánh chỉ số nhất; đó chính là cách thức cổ điển nhất; vì kỹ thuật phân tích của máy tìm kiếm luôn tiến chậm và đi sau so với công nghệ.Bạn sẽ hỏi ngay là tối ưu hóa cụ thể như thế nào ? Câu trả lời khá đơn giản; cứ hình dung là không tồn tại đường truyền internet, và bạn phải tổ chức dữ liệu trong máy tính thay vì trên server. Nếu bạn sắp xếp khoa học chính xác (tránh spam từ khóa trong URL quá dài) thì bạn sẽ :
Chúc các bạn thành công Theo Vietseo |
Thứ Bảy
Từ khóa trong URL cải thiện thứ hạng trên máy tìm kiếm
10 lí do khiến bạn nên sử dụng CSS
| |
|
Căn bản về HTML - Các thẻ tạo bảng
| |||
Các bảng trong HTML được định nghĩa như sau: Định nghĩa 1 bảng bởi cặp thẻ <table></table> Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>. Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td> Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau: <table> <tr> <td>Ô thứ nhất</td> <td>Ô thứ 2</td> <td>Ô thứ 3</td> </tr> </table> Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô: <table> <tr> <td>Ô thứ nhất dòng 1</td> <td>Ô thứ 2 dòng 1</td> <td>Ô thứ 3 dòng 1</td> </tr> <tr> <td>Ô thứ nhất dòng 2</td> <td>Ô thứ 2 dòng 2</td> <td>Ô thứ 3 dòng 2</td> </tr> </table> Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng khác, bảng sẽ bị "vỡ kế hoạch". Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau. Thuộc tính colspan sẽ chỉ định số lượng các ô được gộp vào nhau trên một hàng. Chẳng hạn: <table> <tr> <td colspan = "2" >Chập ô thứ nhất và ô thứ 2 của dòng 1</td> <td>Ô thứ 3 dòng 1</td> </tr> <tr> <td>Ô thứ nhất dòng 2</td> <td>Ô thứ 2 dòng 2</td> <td>Ô thứ 3 dòng 2</td> </tr> </table> Một số thuộc tính có liên quan: Thẻ Table: - border: Xác định độ dày của khung bao quanh bảng - bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo. - cellspacing: Xác định khoảng cách giữa các ô trong bảng. - width: Xác định độ rộng của bảng - background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng - bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX). Thẻ <td> - width: Độ rộng của ô - height: Chiều cao của ô - colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng) - rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột). - background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô - bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX). Ví dụ: Đoạn HTML sau đây trình diễn phần đầu của trang web phpvn.org: Code: <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="catbg" height="32"> <span style="font-family: Verdana, sans-serif; font-size: 140%; ">PHP Vietnam Programmers</span> </td> <td align="right" class="catbg"> <img src="http://www.phpvn.org/Themes/default/images/smflogo.gif" style="margin: 2px;" alt="" /> </td> </tr> </table> <table width="100%" cellpadding="0" cellspacing="0" border="0" > <tr> <td class="titlebg2" height="32"> <span style="font-size: 130%;"> Hello <b>Admin</b></span> </td> <td class="titlebg2" height="32" align="right"> <span class="smalltext">January 27, 2007, 06:25:29 PM</span> <a href="#" onclick="shrinkHeader(!current_header); return false;"><img id="upshrink" src="http://www.phpvn.org/Themes/default/images/upshrink.gif" alt="*" title="Shrink or expand the header." align="bottom" style="margin: 0 1ex;" /></a> </td> </tr> <tr id="upshrinkHeader"> <td valign="top" colspan="2"> <table width="100%" class="bordercolor" cellpadding="8" cellspacing="1" border="0" style="margin-top: 1px;"> <tr> <td colspan="2" width="100%" valign="top" class="windowbg2"><span class="middletext"> <a href="http://www.phpvn.org/index.php?action=unread">Show unread posts since last visit.</a> <br /> <a href="http://www.phpvn.org/index.php?action=unreadreplies">Show new replies to your posts.</a><br /> Total time logged in: 20 hours and 1 minutes.<br /> </span> </td> </tr> </table> </td> </tr> </table> Theo ddtkw (ngothaithuan) |
Cách dùng CSS
| |||
| - Khi trình duyệt web đọc trang web của bạn nó sẽ định dạng trang web theo cách CSS đã qui định cho nó. - Theo như bài đầu tiên đã đề cập, chúng ta có tất cả 3 loại CSS dó đó chúng ta cũng sẽ có 3 cách để chèn CSS vào trang web của mình. Với External Style ( Sử dụng file CSS được định nghĩa thành 1 file riêng) Sử dụng External Style là một cách lý tưởng khi ta cần phải định dạng nhiều trang web theo một mẫu thống nhất. Với External Style chúng ta có thể thay đổi dáng vẻ của một trang web chỉ với việc thay đổi duy nhất 1 file. Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>, với thuộc tính href sẽ trỏ đến file .CSS bên ngoài. Ví dụ: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Nếu một trang web có đoạn mã trên thì khi hiển thị trang web trình duyệt sẽ đọc các style được định nghĩa trong file mystyle.css và định dạng văn bản theo nó. Nếu tên file của bạn không phải là mystyle.css thì bạn chỉ cần đổi tên của file thành tên file của bạn. Một file CSS có thể được viết ra từ bất kì trình soạn thảo văn bản nào. Trong file CSS chỉ chứa các định dạng, không bao gồm các thẻ HTML. Một tệp CSS nên ghi với phần mở rộng là .CSS Ví dụ dưới đây thể hiện toàn bộ nội dung của một file CSS. hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Với Internal Style (Định nghĩa các style sheet ngay trong trang web) Trong trường hợp mỗi trang web của bạn sử dụng các định dạng khác nhau, bạn hãy dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet bạn sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>. Ví dụ: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> Trình duyệt sẽ đọc đoạn mã này và định dạng trang web theo nó. Chú ý: - Thông thường trình duyệt sẽ bỏ qua đoạn mã mà nó không thể hiểu nổi. Điều đó có nghĩa là với các trình duyệt cũ chúng sẽ bỏ qua thẻ <STYLE>. Tuy nhiên nó không bỏ qua nội dung bên trong thẻ này. Điều đó có nghĩa là phần thông tin định nghĩa style của bạn sẽ bị "phơi" hết lên trang web. Do đó để giải quyết vấn đề này bạn hãy sử dụng chú thích của HTML để bao quanh các mã định nghĩa CSS. Đoạn mã trên được sửa lại thành như sau: <head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head> Với Inline Style (style được qui định ngay trong mỗi thẻ HTML) Khi sử dụng Inline Style Sheet là bạn đã đánh mất đi những tác dụng to lớn của CSS với việc trộn lẫn mã định dạng với nội dung trang. Bạn chỉ nên sử dụng phương pháp này trong một số trường hợp rất đặc biệt mà cách định dạng thẻ chỉ áp dụng duy nhất 1 lần trong 1 trang web. Sử dụng phương pháp này bạn đưa ngay những mã định dạng vào thẻ HTML cần thiết. Các mã định dạng này có thể bao gồm mọi thứ có thể dùng trong Internal Style Sheet và External Style Sheet. Đoạn mã dưới đây sẽ thay đổi màu sắc và lề của một đoạn trong trang web. <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> Sử dụng nhiều Style Sheet Nếu cùng một thẻ được định nghĩa ở nhiều nơi thì thẻ này sẽ kế thừa tất cả các thuộc tính đã được định nghĩa ở tất cả các vị trí. Nếu như các thuộc tính định nghĩa xung đột nhau chúng sẽ được lấy theo thứ tự ưu tiên đã đề cập đến ở bài 1. Ví dụ: Một file style sheet ngoài được định nghĩa thẻ <H3> như sau: h3 { color: red; text-align: left; font-size: 8pt } Sau đó một trang web sử dụng file CSS ở trên trong nó lại có phần định nghĩa cho thẻ <H3> như sau: h3 { text-align: right; font-size: 20pt } Và kết quả thẻ <H3> sẽ được định nghĩa là kết hợp của 2 định nghĩa trên và là: color: red; text-align: right; font-size: 20pt Theo ddtkw |
Vị trí đặt CSS
| |||
Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML Nội tuyến (kiểu thuộc tính)Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp. Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này. Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau: <html>2.<head>3.<title>Ví dụ</title>4.</head>5.<body style=”background-color=#FFF;”>6.<p style=”color:green”>^_^ Welcome To My Blog ^_^</p>7.</body>8.</html>Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để tiện cho công tác bảo trì, sửa chữa ấy mà). Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau: 01.<html>02.<head>03.<title>Ví dụ</title>04.<style type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>”>05.body { background-color:#FFF }06.p { color:#00FF00 }07.</style>08.</head>09.<body>10.<p>^_^ Welcome To My Blog ^_^</p>11.</body>12.</html>Lưu ý: Thẻ style nên đặt trong thẻ head. Đối với những trình duyệt cũ, không thể nhận ra thẻ <style>. Theo mặc định, thì khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS: body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt. Để tránh tình trạng này, bạn nên đưa vào thêm dấu <!– ở trước và –> ở sau khối code CSS. Như ví dụ trên sẽ viết lại là: 1.<style type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>”>2.<!-- body { background-color:#FFF }3.p { color:#00FF00 } -->4.</style>Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng được trình bày theo kiểu này.  Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau: Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau: <html>02.<head>03.<title>Ví dụ</title>04.<link rel=”stylesheet” type=”text/<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” href=”style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b>” />05.</head>06.<body>07.<p>^_^ Welcome To My Blog ^_^</p>08.</body>09.</html>10.Sau đó hãy tạo một file style.<b style="color: white; background-color: rgb(0, 170, 0);">css</b> với nội dung:11.body {12.background-color:#FFF13.}14.p {15.color:#00FF0016.}Hãy đặt 2 tập tin này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả. Lưu ý: Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng Việt. Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một tập tin CSS vào CSS hiện hành. Cú pháp: @import url(link) |
Âm nhạc, phim ảnh trong trang web
| |||
Có rất nhiều dạng audio (*.au, *.wav, *.mid....) và video (*.mpeg, *.avi...). Nhưng có lẽ chỉ có dạng midi (*.mid) là cỡ nhỏ nhất. Một bản nhạc 5 phút chiếm khoảng 30KB trong khi đó 5 phút dưới dạng wav lên tới 5MB. Ðể đưa chúng vào một trang web, bạn cần viết dòng html-code sau: CODE <embed src="music.mid" autostart="true" loop="true"> Trong đó "music.mid" là tên của file nhạc, autostart="true" chạy bản nhạc tự động, loop="true" tự động quay lại đầu bản nhạc khi và chạy tiếp, nếu bạn chỉ muốn bản nhạc chạy một số lần nhất định lần rồi dừng, hãy thay "true" bằng "1", "2"... Riêng Internet Explorer còn cho phép bạn tạo nhạc nền với tag đơn <bgsound> Dòng code sẽ được viết như sau: CODE <bgsound src="music.mid" loop="infinite"> loop="infinite" cho phép browser chạy bản nhạc không ngừng. Ngoài ra còn một cách đưa video vào trang web (chỉ dùng cho Internet Explorer) như một bức ảnh: CODE <img dynsrc="beany.mpg"> Nếu đã từng sử dụng RealPlayer chắc bạn sẽ hỏi, làm thế nào để nó tự động chạy một bài hát dưới dạng *.rm Ðiều đó không phức tạp lắm nhưng đòi hỏi người đến thăm trang web của bạn phải có RealPlayer cài trong máy, đó lại là điều ít xảy ra. Như vậy bạn phải tạo một link để người đọc có thể download phần mềm này từ RealNetwork server. Sau đây là dòng code bạn cần để đưa RealPlayer vào một trang web: CODE <embed src="finally.rm" type="audio/x-pn-realaudio-plugin" console="Clip1" controls="ControlPanel" height="30" width="400" autostart="true"><br> <embed type="audio/x-pn-realaudio-plugin" console="Clip1" controls="StatusField" height="30" width="400" autostart="true"><br> <embed type="audio/x-pn-realaudio-plugin" console="Clip1" controls="PositionField" height="30" width="400" autostart="true"><br> Có một điều bạn cần chú ý là tất cả các files nhạc, video... đều phải được upload cùng với trang web và cùng nằm trong một địa chỉ như trang web. Nếu sử dụng một file của trang web khác, bạn phải đưa địa chỉ đầy đủ của file đó vào html-code. Ví dụ: CODE <embed src="http://www.tridung.de/audio/music.mid" autostart="true" loop="true"> Theo thekok |
Tập hợp mã nguồn Html/JavaScript cơ bản cho Blogger
| |||||||||||||||
| Trong loạt bài viết “Những thủ thuật hay cho các Blogger” ở phần 1 này tôi sẽ chia sẽ với các bạn những đoạn mã nguồn HTML/JavaScript chọn lọc; mà nếu làm chủ tốt “nó” Blog của bạn sẽ vô cùng hiện đại và chuyên nghiệp. Bài viết được minh họa trên dịch vụ Blogspot của Google, các dịch vụ Blog khác cũng được tiến hành tương tự. 1. Cách nhúng HTML trên BlogSpot: o Hiện nay hầu hết tất cả các dịch vụ tạo Blog như BlogSpot, MSN, YahooPlus, Violet… đều hỗ trợ người quản trị cho phép nhúng vào các đối tượngHTML/JavaScipt để thực hiện các tùy biến cao cấp trên Blog. o Đăng ký tài khoản và tiến hành các bước thiết kế cơ bản cho Blog tại địa chỉ http://www.blogger.com (bạn có thể đăng nhập bằng tài khoản Gmail sẵn có ở đây). Đăng nhập vào quyền quản trị tài khoản > Chọn Layout > Page Elements: trên bố cục của Blog nhấp nút Add a page elements (hay Add a Gadget) ở cột bên phải để bắt đầu lựa chọn đưa vào các đối tượng nhúng (lưu ý: mặc định bố cục của BlogSpot có 2 nút Add a Gadget cho phép thêm đối tượng vào cột bên trái và phần Footer bên dưới; thông thường đối tượng nhúng sẽ ưu tiên vào cột trái). o Trong cửa sổ Add a Gadget nhấp chọn nút HTML/JavaScript để nhúng vào mã nguồn, xem hình 1.  Hình 1 o Trên hộp thoại Configure HTML/JavaScript kế tiếp: đặt tên cho đối tượng vào khung Title và mã nguồn vào khung Content, xem hình 2.  Hình 2 o Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau này nếu muốn bỏ đi đối tượng đã nhúng nhấp chọn nút Remove) 2. Nhúng một hộp văn bản cuộn vào Blog: o Thường vị trí của đoạn văn bản cuộn này nên đặt ở vùng Header hay Footer trên giao diện Blog. o Nhúng đoạn mã nguồn sau vào chức năng Configure HTML/JavaScript của Blog:
o Trong đó: Color (màu chữ), Bgcolor (màu nền hộp văn bản), direction (chiều di chuyển), đối với giá trị các màu sắc nếu không nắm được mã nhị phân tương ứng bạn có thể điền tên màu bằng tiếng anh. 3. Nhúng ngày tháng năm bằng tiếng việt: o Đoạn mã HTML sau sẽ hiển thị nội dung ngày tháng năm bằng tiếng việt trên Blog.
 Hình 3 4. Nhúng bảng dự báo thời tiết vào Blog: o Đoạn mã HTML sau cho phép nhúng vào dự báo thời tiết của 5 thành phố lớn (Hà Nội, TP Hồ Chí Minh, Huế, Cà Mau, Nha Trang) trên cả nước theo 3 tiêu chuần quốc tế: nhiệt độ, thời gian và ẩm độ theo nguồn của trang web dự báo thời tiết nổi tiếng quốc tế http://banners.wunderground.com/, xem hình 4.  Hình 4
o Lưu ý: tại trang chủ http://banners.wunderground.com/ mỗi một thành phố hay tỉnh của Việt nam có một mã số ảnh riêng, bạn có thể tham khảo ở đây để chèn vào cho phù hợp với đối tượng mà mình muốn hiển thị (Ví dụ: Huế có mã ảnh tỉnh là 48852.gif) 5. Chèn quảng cáo cố định ở hai bên giao diện Blog: o Với đoạn mã này bạn có thể chèn vào các LOGO quảng cáo cho các đối tượng khác nhau ở hai bên cố định của giao diện Blog bằng cách sử dụng liên kết LINK.
o Chú ý: Các link liên kết tới hình ảnh tương ứng phải có thực (tốt nhất bạn nên tự Upload cố định lên Host hay trực tiếp trên Blog), không nên liên kết tới LOGO của trang khác vì rất dễ xảy ra tình trạng chết LINK. Những đoạn Code màu xanh là liên kết tới các hình ảnh đại diện cho đối tượng mà bạn muốn nhúng vào Blog, với đoạn Code này bạn có thể tùy biến thêm vào hay xóa đi các đối tượng một cách thoải mái, xem hình 5.  Hình 5 o Ví dụ: Đối tượng báo giáo dục thời đại trong đoạn Code trên gồm các lệnh:
o Trong đoạn Code trên đối tượng VIOLYMPIC có Logo nhúng vào là một File Flash SWF, khi đó ta phải thay đổi mã lệnh nhúng lại cho phù hợp là:
6. Lịch âm dương trên Blog: o Là người việt nam chắc chắn Blog của bạn sẽ chuyên nghiệp và mang cá tính hơn với một cuốn lịch âm dương hiển thị để khách viếng thăm tiện việc tra cứu, xem hình 6.  Hình 6 o Mã nguồn nhúng vào Blog:
7. Tạo ComboBox trên Blog: o Việc nhúng một ComboBox để liên kết nhanh tới các đối tượng khác nhau sẽ giúp bạn tiết kiệm được thời gian thiết kế và không gian hiển thị trên giao diện Blog, xem hình 7  Hình 7 o Mã nguồn:
o Với đoạn Code này bạn cũng có thể Edit lại một cách thật dễ dàng. 8. Nhúng từ điển Anh - Việt vào Blog: o Với đoạn mã nguồn sau Blog của bạn sẽ được trang bị một quyển từ điển ANH - Việt hết sức chuyên nghiệp. o Từ điển Anh Việt hiển thị trên Blog, xem hình 8.  Hình 8 9. Tự tạo hộp tìm kiếm thông tin trên Blog: o Mặc dù bạn có thể dễ dàng thêm vào Blog Gadget tìm kiếm của Google, tuy nhiên nếu tự tay thiết kế được một công cụ riêng về tìm kiếm thì điều đó sẽ thú vị hơn nhiều, xem hình 9.  Hình 9 o Mã nguồn: 10. Nhúng bảng tỷ giá vàng vào Blog: o Mã nguồn: o Hiển thị xem hình 10.  Hình 10 11. Nhúng bảng tỷ giá ngoại tệ cho Blog: o Mã nguồn: o Hiển thị xem hình 11.  Hình 11 12. Nhúng lịch xem truyền hình Việt Nam vào Blog: o Mã nguồn:
o Hiển thị xem hình 12.  Hình 12 13. Nhúng cảnh đẹp Việt Nam vào Blog: o Hãy để cho khách viếng thăm cùng đi một tour du lịch Việt Nam cùng với Blog của bạn bằng mã nguồn sau.
o Hiển thị xem hình 13.  Hình 13 14. Tổng kết: Kết thúc phần 1 với 14 đoạn Code khác nhau dựa trên nền tảng nhúng HTML/JavaScript Blog của bạn đã trở nên đặc sắc và chuyên nghiệp hơn hẳn, hẹn gặp lại ở các các phần tiếp theo của loạt bài. Bài viết được tổng hợp từ nhiều nguồn thông tin Online (và kinh nghiệm phân tích của cá nhân) như http://thuthuatblogs.blogspot.com/,http://www.thuthuatblog.com/, http://www.quantrimang.com/, http://mangvn.org/, http://manguon.com/, http://www.vietstock.com.vn/,http://www.skydoor.net/, http://bongda.com.vn/. Xem hiển thị chi tiết các đoạn Code đã test tại http://trandaiminhtri.blogspot.com/, mọi thắc mắc xin gởi vềtrandaiminhtri2002@yahoo.com.Theo xahoithongtin |
Làm sao chèn CSS vào trang Web
| |||
Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ được định dạng theo các thuộc tính đã được khai báo trong phần CSS. Có ba cách cho phép chúng ta chèn định dạng CSS vào trong Website. 1. CSS được khai báo trong file riêng.Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng .css là một ý tưởng được dùng khi một file CSS sẽ được áp dụng cho nhiều trang khác nhau. Bạn có thể thay đổi cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file CSS sẽ được chèn vào văn bản HTML thông qua thẻ <link>...</link>. Ta có cú pháp như sau: <html>
<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css"
medial="all" />
</head>
<body>
</body>
</html>Trình duyệt sẽ đọc toàn bộ các định dạng được quy định trong file mystyle.css và định dạng cho văn bản HTML. File CSS có thể được soạn thảo bằng một số trình duyệt khác nhau. Trong file không được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là .css. Giả sử chúng trong file mystyle.css ở trên chứa đoạn mã sau: hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}Không bao giờ sử dụng khoảng trắng trong nhãn, giả sử rằng nếu bạn dùng margin-left: 20 px; thay cho margin-left: 20px; thì IE6 sẽ hiểu còn các trình duyệt như Firefox, Opera sẽ không hiểu 2. Chèn CSS trong tài liệu HTMLChèn thẳng CSs trong tài liệu được áp dụng trong trường hợp những định dạng CSS này chỉ giành riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp thì đoạn mã của bạn phải đặt trong thẻ <style> và đặt trong phần <head>. <head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>Có một số trình duyệt cũ sẽ không hiểu thẻ <style>, nó sẽ bỏ qua thẻ này. Tuy nhiên thì nội dung trong thẻ <style> vẫn hiển thị ra trang HTML. Vì vậy mà chúng ta sẽ phải dùng định dạng chú thích trong HTML để chứa phần nội dung của thẻ <style>. <head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>3. Chèn trực tiếp vào thẻ của HTML(inline style)Inline style được sử dụng nhiều trong trường hợp một thẻ HTML nào đó cần có style riêng cho nó. Inline style được áp dụng cho chính thẻ HTML đó, cách này sẽ có độ ưu tiên lớn nhất so với hai cách trên. Dưới đây là một ví dụ mà chúng ta dùng Inline style <p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>4. Nhiều StylesheetTrong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau: h1, h2, h3 {
margin-left: 10px;
font-size: 150%;
...
}Giống đoạn mã trên thì cả ba thẻ h1, h2, h3 đều có cùng 3 thuộc tính như trên. Theo cssyeah |
Đăng ký:
Bài đăng (Atom)
