Sự Khởi Đầu Mới: 09/11/12

Thứ Ba, 11 tháng 9, 2012

Thêm tiện ích "Recent comments" cho Blogspot

Hiện nay Blogger đã có chức năng này rồi, nhưng với code này ta sẽ chỉnh sữa được nhiều hơn cho ưng ý và phù hợp với blog. Đặc biệt là cập nhật thay đổi nhanh hơn so với tiện ích của Blogger.

Thủ thuật blog: Thêm tiện ích "Recent comments" cho Blogspot

Giới thiệu: Hiện nay Blogger đã có chức năng này rồi, nhưng với code này ta sẽ chỉnh sữa được nhiều hơn cho ưng ý và phù hợp với blog. Đặc biệt là cập nhật thay đổi nhanh hơn so với tiện ích của Blogger.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng ]]></b:skin>

- Chèn dưới nó đoạn code CSS sau:

Có thể tùy chỉnh thêm các class trong đoạn code trên như đường viền, màu nền,...
Và chỉnh canh lề, màu chữ, kích cỡ, font,... cho phù hợp với blog bạn.

Bước 2: Save template. (Lưu mẫu)

Bước 3: Thêm widget

Design (Thiết kế) > Page Elements (Chỉnh sữa trang) > Add a Gadget (Thêm tiện ích)

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5; // Số comment hiển thị trong tiện ích
var showcommentdate = true; // Không muốn hiển thị ngày comment thì thay True thành False
var showposttitle = true; // Không muốn hiển thị tiêu đề bài viết thì thay True thành False
var numchars = 100; // Số từ tóm tắt nội dung comment
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('');
if (showcommentdate == true)
document.write('<div class="recommment-author">
<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> said...</div>
');
document.write('<div class="date-commment">
 On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ', ' + cdyear + ' ');
if (showposttitle == true) document.write(' on ' + posttitle);
document.write('</div>
');
if (comment.length < numchars) {
document.write('<div class="re-sumpost">');
document.write(comment);
document.write('</div>
');}
else
{
document.write('<div class="re-sumpost">
');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '... <a href="' + alturl + '"> Đọc tiếp... </a>');
document.write('</div>
');}
document.write('');
}
document.write('');
}
</script>
<script src="http://hahuyhoanglong.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

Thay địa chỉ http://hahuyhoanglong.blogspot.com thành địa chỉ web của bạn.

Bước 4: Save. (Lưu)

THE END.

PHẦN IV: TẠO BẢNG

Phần này cung cấp các hướng dẫn về cách tạo các bảng cho các tài liệu web của bạn.bạn có thể nghĩ nó là một các bảng đơn giản như :

Đây là một TABLE

A Đạo	Trúc Linh	Đại Nguyên
Thưởng	Tường	Huy

Bạn có thế quan tâm đến cách tạo trang web của bạn nhìn hấp dẫn bằng cách sử dụng các thẻ<TABLE>!để minh họa , sau là một trang tương tự có nền màu xámva bảng có các BORDER.

Tất cả có 3 thẻ :

<TABLE>

Thẻ chính.Được sử dụng để cho trình duyệt biết"đây là một bảng "cùng một số thuộc tính như kích thước,chiều rộng đường viền và một số thứ khác.

<TR>

Table Rowxác định hàng ngang của <TD>(table data)của các cell

<TD>

Ấn định khối cá biệt hoặc cell(ô)bằng một hàng của bạn.

Bảng(table)được thiết lập bằng các hàng (row)để tạo thành các ô(cell)


<--This---	----is----	-----a----	---Table--	----Row-->
			cell
	cell			cell

Đó là các bảng trong một bảng tóm tắt.bây giờ bạn sẳn sàng tạo một số bảng . Để biết cách tạo các tài liệu chất lượng , bạn cần có thời gian tìm hiểu về các thẻ .Nếu ạn chỉ dựa vào các "table wizard",bạn sẽ rất bị giới hạn và kết quả cuối cùng không thể đáp ứng nhu cầu của bạn.

BÀI 1 : BỐ CỤC BẢNG

Bạn có thể mở ngay Notepad thực ghiện.Chép và dán mã nguồn sau để bắt đầu:

<HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY>

</BODY>
</HTML>

Lưu nó là table1.html trong thư liệu nào đó .Tiếp tục và tạo cho nó một thư liệu riêng vì chúng ta cũng đưa một số thứ khác vào đó .Khởi động trình duyệt của bạn. sử dụng nó để mở table1.html ,để chạy trình duyệtvà Notepad cùng vời nhau.Bằng cách này có thể tạo các trang của mình và hầu như thấy ngay kết quả những gì bạn đã thực hiện. Bạn cần có 'Wizard' 9 megabyte.

Gõ nhập các thẻ về bảng của bạn.Các thẻ này có nghĩa là "Bắt đầu một bảng " và" Kết thúc một bảng "

<HTML> <HEAD> <TITLE>Joe's a swell guy</TITLE> </HEAD> <BODY>

</BODY>
</HTML>
Mỗi bảng cần ít nhất một hàng:

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
và đương nhiên mỗi hàng phải có ít nhất một cell dữ liệu bảng:

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

Để cho mọi thứ được gọn gàng , chỉ viết những gì trong các thẻ bảng . Bỏ đầu mục, thân và tiêu đề,vân vân trong tài liệu của bạn

<TABLE> <TR> <TD></TD> </TR> </TABLE>

Giờ bạn cần đưa điều gì đó vào trong ô .Còn Ed? chúng ta đưa Ed vào trong ô <TD>:

<TABLE> <TR> <TD>Ed</TD> </TR> </TABLE>

bây giờ bạn có một bảng html có đủ chức năng .Mở nó bằng trình duyệt kiểm tra lại.Nếu bạn thực hiện tất cả chính xác bảng của bạn sẽ trình bày như sau

Ed

một cách đơn giản hnư thế thôi!

BÀI 2 : ĐỊNH DẠNG BẢNG

Những ì chúng ta có đuợc là

<TABLE> <TR> <TD>Ed</TD> </TR> </TABLE>

Cung cấp cho chúng ta là

Trước hết để tạo cho nó nhìn giống một bảng bằng cách tạo cho nó một đường viền.mỗi lần thay đổi và muốn cho nó được trình bày như thế nào, bạn có thể ấn nút reload trên trình duyệt của mình .nếu trình duyệt đó không có nút reload,tìm một trình duyệt khác.

<TABLE BORDER=1> <TR> <TD>Ed</TD> </TR> </TABLE>

Kích thước của đường viền bao nhiêu:

<TABLE BORDER=5> <TR> <TD>Ed</TD> </TR> </TABLE>

Đường viền HUGE bao nhiêu?

<TABLE BORDER=25> <TR> <TD>Ed</TD> </TR> </TABLE>

Không có đường viền:

<TABLE BORDER=0> <TR> <TD>Ed</TD> </TR> </TABLE>

Như bạn thấy mặc định là không có đường viền.

chúng ta hãy dùng đường viền phổ biến nhất hiện nay:

<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

khi kích thước không được ấn định bảng sẽ lớn tối đa có thể

<TABLE BORDER=3> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

Tuy nhiên ấn định kích thước bảng khá đơn giản:

<TABLE BORDER=3 WIDTH=100%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

Khi có chiều rộng 75%

<TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE>

Ed, Rick and Tom

Bây giờ chúng ta bỏ các bạn của Ed:

<TABLE BORDER=3 WIDTH=75%> <TR> <TD>Ed</TD> </TR> </TABLE>

Chúng ta giảm kích thước bảng xuống còn 50%cửa sổ của trình duyệt:

<TABLE BORDER=3 WIDTH=50%> <TR> <TD>Ed</TD> </TR> </TABLE>

Giờ chúng ta ấn định chiều rộng là 50 thay vì 50%:

<TABLE BORDER=3 WIDTH=50> <TR> <TD>Ed</TD> </TR> </TABLE>

Bây giờ là 100:

<TABLE BORDER=3 WIDTH=100> <TR> <TD>Ed</TD> </TR> </TABLE>

như bạn thấy có 2 cách ấn định chiều rộng của bảng. Mỗi kiểu đáp ứng cách sử dụng của nó .Bây giờ kiểu sử dụng không còn quan trọng .

chúng ta có thể thay đổi chiều cao :

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

chúng ta có thể điều khiển nơi ô mà dữ liệu sẽ xuất hiện:

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=CENTER>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=RIGHT>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT>Ed</TD> </TR> </TABLE>

Như bạn thấy, giá trị mặc định là ALIGN=LEFT. Có thể bạn đã biết rồi, default value là giá trị trình duyệt thừa nhân nếu như bạn không khai báo giá trị khác.

Chúng ta có thể điều khiển nơi dữ liệusẽ xuất hiện theo chiều dọc trong một ô.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=TOP>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD> </TR> </TABLE>

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD> </TR> </TABLE>

Mặc định là ở giữa.

Cũng có thể sử dụng các ảnh và điều tác nó trong một ô dữ liệu của bảng . Trong thư liệu có tài liệu nàybạn sẽ thấy một ảnh nhỏ có tên ed.gif.Chép nó vào thư liệu mà bạn đang làm việc (ảnh mà nơi bạn đưa vào tables1.html).Thay thẻ Ed bằng IMG:

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></TD> </TR> </TABLE>

Bây giờ cung cấp các thuộc tíh bằng các thẻ ảnh của bạn.

BÀI 3 : HIỆU CHỈNH BẢNG

Chúng ta trở lại bảng Ed đơn thuần ban đầu.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD> </TR> </TABLE>

Để được sáng sủa và đơn giản, chúng ta bỏ các thuộc tính cân chỉnh .Chúng ta biết những gì sẽ xảy ra vì chúng ta biết các giá trị mặc định như thế nào.TAG cho trình duyệt biết phải thực hiện điều gì.ATTRIBUTE ở vào bên trong TAG và cho trình duyệt biết cách thực hiện đó :

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

Bây giờ chúng ta tạo ra một bảng lớn hơn:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

fuzz là một thuật ngữ chỉ bảng lớn và phức tạp chỉ thích hợp đối với tài liệu html cao cấp.

Tom là bạn của Ed ,anh ta muốn có một ô riêng :

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> <TD>Tom</TD> </TR> </TABLE>

Tom

khi không có các chỉ lệnh nào được cung cấp cho trình duyệt, mỗi ô có thể(nhưng không phải luôn luôn)có kíoch thước khác nhau .Tuy nhiên, tốt hơn cần ấn định kích thước của từng ô .cần phải tính tóan chính xác nếu không người xem sẽ thấy hòan tòan khác với những gì mà bạn muốn họ thấy

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=150>Ed</TD> <TD WIDTH=150>Tom</TD> </TR> </TABLE>

Tom

Các thuộc tíng Width này cũng có thể được biểu thị bằng phần trăm:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=50%>Ed</TD> <TD WIDTH=50%>Tom</TD> </TR> </TABLE>

Tom

chúng ta tạo chop Ed một ô lớn vì anh ta ở đây từ đầu.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=80%>Ed</TD> <TD WIDTH=20%>Tom</TD> </TR> </TABLE>

Tom

Giờ Rich ở phía sau và đương nhiên anh ta cũng muốn có một ô riêng .chúng ta cần xác định của hàng chúng ta sẽ tạo cho anh ta. Giả sử bằng cặp thẻ 20%. Chắc chắn cũng điều chỉnh kích thước của Ed:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR> </TABLE>

Tom

Rick

Có ba tay yahoo băng qua phố để xem những gì xãy ra và họ muốn có mặt trong bảng của các bạn.Chúng ta cho họ một hàng riêng

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

các thuộc tính Width ở hàng thứ nhất chuyển sang hàng thứ hai

Nếu Mo bị bỏ xót, chúng ta vẫn có một bảng hòan chỉnh , nó chỉ khuyết mất một tên:

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly

Chúng ta đưa Mo trở lại và xóa tất cả các thuộc tính ngọai trừ boder:

<TABLE BORDER=3>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Tiếp theo là hai thuộc tính được gọi là CELLPADDING và CELLSPACING. cả hai đuợc sử dụng để làm nổi bậttrong thẻ <TABLE>.CELLPADING là khỏang trống giữa các đường viền của ô và nội dung của ô đó .

<TABLE BORDER=3 CELLPADDING=12>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Giá trị mặc định đối với thuộc tính này bằng 1 .Không ấn định thuộc tính đó bằng không để tránh văn bản trong ô sát với đường viền(Tuy nhiên, bạn có thể ấn định bằng 0 nếu muốn)

nếu chúng ta thay CELLPADING bằng CELLSPACING , chúng ta sẽ có một kết quả hơi khác

<TABLE BORDER=3 CELLSPACING=12>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Giá trị mặ định đối với CELLSPACING là 2

Đương nhiên , chúng ta có thể kết hợp các thuộc tính này:

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

BÀI 4 : MÀU NỀN VÀ XỬ LÝ BẢNG

Lọai bỏ các thuộc tính CELLPADDING và CELLSPACING để trở lại bảng đơn giản trước đây:

<TABLE BORDER=3>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Một đặc trưng cool của các trình duyệt mới hơn là khả năng ấn định các màu nền cho một ô bảng, hàng hoặc cả bảng . Bạn sử dụng BGCOLOR giống như bạn thực hiện thẻ <BODY>

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

<TABLE BORDER=3> <TR BGCOLOR="#FF9999"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR BGCOLOR="#99CCCC"> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

<TABLE BORDER=3> <TR BGCOLOR="#FFCCFF"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD BGCOLOR="#FF0000">Larry</TD> <TD>Curly</TD> <TD BGCOLOR="#3366FF">Mo</TD> </TR> </TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Biểu đồ sau được sử dụng để chọn các màu nền:

BÀI 5 : TẠO DANH SÁCH

Chúng ta thử thực hiệnmột vài thứ để xem những gì xãy ra .

Sau đây là một danh sách không có thứ tự

Apples
Flour
Sugar
Cinnamon

Công thức làm bánh táo trên đã đầy đủ thành phần cần thiết rồi, nhưng giả sử chúng ta muốn đưa nó vào một bảng như sau:

Apples
Flour
Sugar
Cinnamon

Bởi vì chúng ta muốn nó ở bên một ảnh táo

Apples
Flour
Sugar
Cinnamon

Chúng ta có thể sử dụng một bảng để thực hiện điều đó !

Khi tìm hiểu hoặc thiết lập một bảng , luôn luôn dễ hơn khi có các đường viền

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Chúng ta thực hiện từng bước , nó khá đơn giản !

Bắt đầu với Ed

<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

Thay Ed bằng danh sách không có thứ tự :

<TABLE BORDER=3> <TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Nhớ là không có các chỉ lệnh khác, bảng sẽ tự tạo kích thước đủ lớn để chứa dữ liệu.Vì vậy trong trường hợp này , không cần đến thuộc tính kích thước.

Kế tiếp chúng ta sẽ mở rộng bảng có đủ kích thước của cửa sổ trình duyệt:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Giờ chúng ta cần tạo một ô thứ hai ..Chúng ta muốn ô bên trái nhỏ hơn ô bên phải:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Bây giờ là lúc thuận tiện để chép appepie.gif vào thư liệu họat động của bạn

Đưa ảnh vào ô thứ nhất:

<TABLE BORDER=3 WIDTH=100%> <TR>
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

Giờ chỉ còn căn ảnh bánh táo về bên phải ô và bỏ thuộc tính đường viền:

<TABLE BORDER=0 WIDTH=100%> <TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie

Apples
Flour
Sugar
Cinnamon

BÀI 6 : LỒNG BẢNG

Chúng ta có thể sử dụng một bảng ở trong một bảng không ?
Chúng ta thực hiện.Bắt đầu bảng Ed thật nhỏ .
<TABLE BORDER=3> <TR> <TD>Ed</TD> </TR> </TABLE>

Tạo một bảng lớn hơn
<TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>Ed</TD> </TR> </TABLE>

Thay Ed bằng một bảng Ed thật nhỏ :
<TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

Bảng của chúng ta có thể căn giữa rất dễ:
<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

sau đây là trường hợp bảng có thể giải quyết một vấn để thường gặp .Nghĩa là bạn có ý tưởng về ảnh động gif .Nhưng ảnh bạn muốn sử dụng khá lớn .Vì bạn biết ảnh động gif về cơ bản là một lọat các ảnh gif được hiển thị nối tiếp, bạn thấy sợ về kích thước ảnh này và người xem sẽ khôn thấy hấp dẫn với ảnh (700K) của bạn .không những như thế mà còn vì còn kích thước của nó trình duyệt của họ sẽ hiển thị nó rất mệt . bạn cần cắt bớt bnó và hiển thị bằng một bảng .
<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

<CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD>
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>

Sau đây là một bảng tương tự có CELLSPACING
Chỉ một phần của ảnh (đôi mắt) là hình ảnh động

Sau đây là HTML cho bảng đó(Không nhất thiết phải sử dụng chủ hoa):

<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0> <CAPTION ALIGN=top><FONT SIZE=6><STRONG><EM>Netscape vs. Microsoft?</EM></STRONG></FONT></CAPTION>
<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>
<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>
<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>
</TABLE>
Sau đây là bố cục :

dragon4.gif

dragon3.gif

dragon5.gif

anidrag.gif

dragon2.gif

BÀI 2 : CHIA KHUNG

Thẻ <Frameset>chia trang thành các cửa sổ .Nó xác định cách chia chúng , do đó chúng ta sử dụng <frameset> để chia .chúng ta có thể chia trang thành nhiều phần. Chỉ cần ấn định trang cho mỗi phần ,nếu không trình duyệt sẽ bị lầm lẫn.

Hướng Dẫn học HTML Bài 1

PHẦN I

BÀI 1 : CÁC TAG (THẺ)

Những gì bạn cho trình duyệt biết là bắt đầu một tài liệu HTML (<HTML)và kết thúc tài liệu HTML(</HTML).Bây giờ chúng ta thực hiện:
Mọi tài liệu HTML cần một cặp tag HEAD,điều duy nhất chúng ta phải quan tâm đến các tag HEAD bây giờ là các tag TITLE (tiêu đề trang WEB)
Nội dung sẽ ở trong các thẻ BODY

Bây giờ lưu nó, khong phải là một tài liệu văn bản, mà là một tài liệu html (đuôi tên file.html).

Khi bạn thực hiện xong trang web đầu tiên của mình ,bạn có thể tải lên(upload) máy chủ của cả thế giớico thể xem trang web của bạn

Chú ý :hai điểm quantrọng trước khi bạn tiếp tục vào bài hai.Một là những gì bạn đã thực hiệnlà một tài liệu sườn HTML.Đây là những thông tin cần thiết tối thiểu cho một tài liệu web và tất cả những tài liệu webcó thành phần căn bản này.Hai là tiêu đề của tài liệu xuất hiện ở trên cùng của cửa sổ trình duyệt.

BÀI 2: HỌAT ĐỘNG CỦA TRÌNH DUYỆT

Trình duyệt không nhận ra định dạng .Trừ khi cho nó biết bằng định dạng khác, nó chỉ hiển thị các kí tự theo một dòng thông thường .Nếu bạn muốn bắt đầu từ một dòng mới bạn phải bắt đầu

Hey!What's
going
on
here??

<BR> chỉ bắt đầu một dòng mới.Tương tự với <br> là <P>.Nó không hòa tòan giống nhau,nhung nó ngắt dòng ,sau đó bỏ một dòng

//souce and from

Một vấn đề khác về các thẻ ngắt dòng : bạn không thể sử dụng chúng nhiều lần.Nói cách khác,ấn định <P><P><P> sẽ không tạo được 3 dòng trống .Trình duyệt sẽ không nhận biếthơn một khỏang trống . Sử dụng mã khỏang trống vào trình duyệt có phần tiện lợi hơn -> 

Thử như sau:

// soucecode and from

Dấu "&" có nghĩa là chúng ta bắt đầumột kí tự đặc biệt, dấu ";" có nghĩa là kết thúc một kí tự đặc biệt và chữ ở giữa là sắp xếp nó sử dụng .Có sáu kí tự đặc biệt bên dưới(lưu ý các ký tự đặc biệt này luôn luôn là chử thường):

 (không có khỏang trống ngắt
<(<kí hiệu nhỏ hơn)

>(> kí hiệu lớn hơn)

&(& dấu và)

"("dấu trích dẫn)

(-dấu gạch nối)

Trình duyệt sẽ hiển thị văn bảncủa bạn bằng dòng bình thường trừ khi bạn ấn định nó bằng cáchkhác như ngắt dòng ,vân vân.Nó sẽ làm giảm các vùng trống còn một khỏang trống .Nếu bạn muốn có nhiều khỏang trống ,bạn phải sử dụng mã khỏang trống ( ).Sau là các thông tin chọn lọc mà chúng ta chưa đề cập đến:Nếu bạn Return(hoặc enter),trình duyệt đó sẽ diễn dịch bằng một khỏang trống trừ khi có một khỏang trống ở đó rối

Something really cool

Bạn có thể căn giữa một từ hoặc cả trang của bạn.<CENTER> sẽ căn giữa mọi thứ

Bạn cò thể biết cách tạo nhiều dòng trống thật đơn giản.Tạo khỏang trống bằng ơột ngắt dòng cho mỗi dòng trống bạn muốn có

code

<BODY BGCOLOR="#FFFFFF">
Something really<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
cool
</BODY>

Something really

cool

Bây giờ chúng ta đưa các ảnh vào trang web.Chúng ta thực hiện như sau:

Bạn ấn định ảnh bằng thẻ<IMG>(ảnh)

</BODY>

BÀI 3 : HỌAT ĐỘNG CỦA LIÊN KẾT

Nó thật đơn giản,chúng ta sẽ tạo liên kết với Yahoo.Bắt đầu như sau:

Go to Yahoo!

</BODY>

Go to Yahoo!

Sau đó bổ sung cặp thẻ anchor.

_________________________

<BODY BGCOLOR="#FFFFFF">
Go to <A>Yahoo!</A>
</BODY>
_________________________

Go to Yahoo

Bổ sung URL để bạn được tiến hành .URL viết tắt của Universal Resouce Locator(dấu định dạng tài nguyên đồng nhất). Đó là cụm từ rất rộng mà người sử dụng máy tính phải quan tâm.URL chỉ là một địa chỉ
_______________________________________

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>
________________________________________

Go to Yahoo!

Một liên kết điện thư(email) họat động bằng cách tương tự .Chúng chỉ sử dụng một địa chỉ emailthay cho một địa chỉ trang
____________________

<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="mailto:huy@int.com.vn">Mail!</A>
</BODY>
___________________

Send me Mail!

Chúng ta co thể tạo một ảnh liên kết nếu muốn.Sử dụng thí dụ'Go to Ích Nam' ở trên,thay thế thẻ <IMG> bằng từ Ích Nam!
___________________

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.int.com.vn"><IMG SRC="H1.jpg" WIDTH=82 HEIGHT=68></A>
</BODY>

___________________

Go to

BÀI 4 : ĐỘ PHÂN GIẢI

Chúng ta đã đề cậpvề điều tác văn bản,font, các ảnh,các liên kết.Đó là kỉ năng căn bản và bây giờ chúng ta đề cập đến độ phân giải màn hình có độ phân giải 800 x 600 và một số sử dụng 1024 x 768

Rất cần thiết kiểm tra trang chủ của bạn ở độ phân giải khác nhau .Thận trọng khi điều chỉnh thủ công có thể rơi vào độ phân giải khác nhau.Bây giờ chúng ta khảo sát về hai công cụ định dạng có thể sử dụng .Thứ nhất là <BLOCKQUOTE>.Về cơ bản nó kéo lề của bạn ở cả hai bên

_______________________________________________

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

</BLOCKQUOTE>

</BODY>

_________________________________________________

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Một công cụ rất hữu dụng khác là LIST.Các danh sách theo thứ tự và không theo thứ tự

Danh sách theo thứ tự	Danh sách không theo thứ tự
1. Trần Minh Đạo	* Lã tiến Huy
2. Lã tiến Huy	* Trương Phú Tường
3. Nguyễn Văn Thưởng	* Nguyễn Văn Thưởng
4. Trương Phú Tường	* Trần Minh Đạo

------------//-------------

Giờ bạn đã biết tất cả các thẻ căn bản cần để tạo một trang Web.Còn thẻ nào khác không?còn,còn nhiềunhưng nó đã cung cấp cho bạn khỏang 70% các công cụ cần thiết để thiết kế trang web.Sau hki ban đã tìm hiểu qua các thẻ chính này,bạn có thể tìm hiểu một số hướng dẫn nâng cao hơn: Table, Form, và Frames. Chúng sẽ cung cấp cho bạn 27% về những gì bạn cần biết.Còn 3% chắc các bạn không có dịp sử dụng hoặc các thẻ ấy dùng để sao chép các thẻ khác - nghĩa là thực hiện cùng chức năng tương tự.Hoặc các thẻ được sử dụng giới hạnvà cá biệt,bạn có thể bổ sung chúng sau

Khi tạo trang web của mình ,bạn sẽ cần tải chúng lên máy chủ Server là máy tính chạy chương trình Server để phân phối tài liệu cho bất kỳ ai yêu cầu chúng .Nếu bạn có kết nối Internet qua công ty hay nhà trường ,hỏi người điều hành hệ thống của bạncách để có được không gian trên Server ấy cho các trang của bạn..Nếu sử dụng Server cho nhà cung cấp dịch vụ Internet,hỏi họ về cách để có không gian cho các trang của bạn.Nếu bạn đang sử dụng AOL hoặc Compuserve,vân vân ,họ có thể có cách gửi các trang của bạn theo phương pháp của họ. Chỉ cần lưu ý về cách chuyển giao các file,chương trình tốt nhất để sử dụng là Cute FTP. Ưu điểm của chương trình này tạo cho chuyển giao các file giữa các máy tính thuận tiện như di chuyển chúng trên máy tính của bạn.

Cảm ơn các bạn đã theo dõi blog hahuyhoanglong!

Linh	Hoa	Kim
		Yen

Thứ Ba, 11 tháng 9, 2012

Thêm tiện ích "Recent comments" cho Blogspot

PHẦN IV: TẠO BẢNG

PHẦN III: FORM

BÀI 2 : CHIA KHUNG

Hướng Dẫn học HTML Bài 1