tản mạn về HTML code cho VAS forum....

greenspun.com : LUSENET : Vietnamese American Society : One Thread

Bài này dành riêng cho những người còn mù mờ về HTML code. Nếu có gì sai sót thì đó chỉ vì sự ngu dốt cũa tác gĩa. Xin các bạn niệm tình tha thứ. Tác gĩa chỉ mới học lõm cũa thiên hạ về HTML được...vài tháng

Như đã hưá với các bạn tôi sẽ viết về HTML code cho Forum này. Vì trình độ cũa mình mới lõm bõm dăm ba chử nên không dám đi sâu vào chi tiết. Những gì tôi sợ không phải vì "lộ cái dốt" cũa mình mà sợ rằng những người "Ham Học Hỏi" học cái sai cũa mình.

Chỉ cách đây vài tháng , khi tôi COPY/PASTE từ 1 website khác vào forum này, những tưởng "what you see, what you get". Nhưng không phải như thế. Sau khi click "Submit" và mở thread ra xem lại thì ôi thôi , những giòng chử dồn lại 1 cục, không xuông hàng, không đầu hàng làm người đọc nhức con mắt. Ðó là vì sao ??. Các bạn khi compose bài post không chịu bỏ HTML code <BR> cho xuống hàng mổi đoạn (paragraph). Và những đoạn cần phải Bold Font để nhấn mạnh đoạn đó.

Ðể post 1 bài coi cho được thì các bạn cần nên biết những căn bản sau đây; nên nhớ khi mở 1 HTML code thì phải “Close” HTML đó , nếu không những người trả lời sau đó sẽ bị ảnh hưởng vì bạn quên không đóng Code.

Xuống hàng ở mổi đoạn (para): bằng cách đánh vào <BR> ở cuối đoạn đó. 1 cho 1 hàng và 2 cho 2 hàng . Một <BR> sẽ thay thế một “ENTER” key trên keyboard. Hay sử dụng <P> ....</P> ở bắt đầu và cuối Para

Bold những đoạn cần nhân mạnh: bằng cáck <B> và đóng code khi không bold nữa </B>.

Post a web link:

Mở web link đó bằng internet browser , dời mouse đến Address box , left click sẽ highlighting address đó . Right click bạn sẽ thấy Options Menu ->bấm Copy . Một chuổi những hoạt động này sẽ copy a string of characters vào trong buffer cũa PC, và nằm đó chờ bạn PASTE.

Bạn copy exactly đoạn dưới đây rồi PASTE vào VAS forum Editor:

<a href="Right click , bấm PASTE : sẽ copy những gì bạn đã copy ở Address box">Viết Title cũa web link HERE </a>

Thí dụ: Bạn muốn link VAS forum. Copy đoạn sau đây nè:

<a href="http://www.greenspun.com/bboard/q-and-a.tcl?topic=Vietnamese%20American%20Society">Diễn Ðàn cũa Người Việt Yêu Tự Do Dân Chủ </a>

Nên nhớ <BR> để cho đẹp mắt nếu cần xuống hàng.

Sau khi bạn “Submit” sẽ có outcome:

Diễn Ðàn cũa Người Việt Yêu Tự Do Dân Chủ...

Post an Image:

1/. Hình nằm bên trái:

<p align="justify"> <table background="COPY/PASTE web image HERE " width=xxxpx height= yyypx" align="left" border="0" > <tr><td > </td > </tr > </table> <p align="justify"> Ðánh text ở đây………….

Thí dụ: <p align="justify"> <table background=" http://www.dongdu.org/images/uploads/lamduyen.gif " width=150px height= 113px" align="left" border="0" > <tr><td > </td > </tr > </table> <p align="justify"> Em bé này l àm duyên trông xinh đẹp qúa……

Thì OutCome sẽ là:

Em bé này l àm duyên trông xinh đẹp qúa……………

Những điểm cần nhớ khi post Image:

1/. Nếu image cũa bạn nằm trong Hard Disk cũa PC. Bạn nên đăng ký (register) 1 free account cũa các web host cho bạn upload images. Môi account ít nhất cũng được 5 MB tha hồ cho bạn upload. Một web host là: Image hosting & Online photo albums

2/. Nếu image trong URL . Copy/paste address cũa Image đó vào trong TABLE trên. Ðể biết width=xxx và height=yyy ???. Bạn có thể biết được bằng cách bấm mouse vào address box cũa web browser, right click->Properties->Dimensions. Trong Dimensions bạn sẽ thấy xxx x yyy pixels.

3/. Trong TABLE ở trên bạn thấy 1 Attribute : align=”left”. Nếu bạn muốn outcome cũa image là left/right/center.

Make a Table :

….Còn Tiếp…..

-- Kẻ Sĩ Bắc Hà (ke_si_bac_ha@yahoo.com), October 17, 2004

Answers

Mịe mấy cái code này khó nhớ quá .. đóng góp cho bà con cái free host..dùng để upload hình thả cửa ..
fuckin@fuckingall.com), October 17, 2004.

MOI BAN BAM VAO LINK !... Ban Nao Can Hoc Cac thu thi vao day day du chi tiec cho ban

-- hochiMinh Dam Tac (Chan Pheo...Dan viet..Congsan@Ngu nhu heo..Com), October 17, 2004.

Thanks a bunch KSBH I will copy this

-- (ChoNhayBÃ nDọC@dlls.net), October 17, 2004.

..."MOI BAN BAM VAO LINK !... Ban Nao Can Hoc Cac thu thi vao day day du chi tiec cho ban ...HoChiMinhDamTac..."....
Sở dĩ tôi viết bài này vì trong Forum này, có nhiều HTML tags đếch WORKING.

-- Kẻ Sĩ Bắc Hà (ke_si_bac_ha@yahoo.com), October 17, 2004.

MOI BAN BAM VAO LINK !...Unicode cho chữ Việt

-- Ho chi Minh (vietnamcongsans nuoi Heo nhieu qua'' @yahoo.com), October 17, 2004.

Trước khi post vào forum, các bạn nên chạy thử trước ở máy mình (tạo ra một text file với cái đuôi HTM, ví dụ như TEST.HTM). Nếu nó chạy vừa ý rồi thì cut & paste vào forum. Nếu không sẽ khổ cho các VAS lắm.

Nên nhớ là các HTML tags phải theo recommendation của W3C (World Wide Web). Info có thể tìm thấy ở http://www.w3.org/

Muốn biết thêm HTML 4.01 specs (mới nhất) có thể tìm thấy ở đây: http://www.w3.org/TR/html4/

Các bạn có gì thắc mắc, cứ post câu hỏi ở đây tôi sẽ cố gắng tìm cách giúp (nên nhớ là tôi còn kém tiếng Việt, nhất là những từ ngử vi tính :-))

-- _Đỉnh Ngu Trí Tệ CS (NgàyTànCS@KhátMáu.hn.vn), October 17, 2004.

Cũng muốn nói thêm bài viết của KSBH cũng hay, nó là kinh nghiệm của chính mình và ứng dụng xác thực vào forum này. Keep up the good work. :-))

-- _Đỉnh Ngu Trí Tệ CS (NgàyTànCS@KhátMáu.hn.vn), October 17, 2004.

Một trong những phương pháp học mau lẹ nhất, không chán (get bored) và đầy thích thú là Learn by Examples hoặc là học lóm cũa thiên hạ.

Trong HTML học lóm thiên hạ băng cách nào. Các bạn xem nè, tôi đánh cá với các bạn rằng bất kỳ 1 HTML programmer nào cũng học bằng cách này vừa dễ hiểu vừa thích thú. Nếu các bạn thấy 1 web nào hay hoặc trong VAS này ai post 1 cái gì hay mà bạn muốn ăn cắp nghề thì làm như thế này nè...

Trên Tools bar cũa web browser , bấm “View->Source”. Bạn sẽ thấy 1 notepad hiện ra với source code cũa trang web bạn đang xem. Bạn ăn cắp nghề cũa thiên hạ bằng cách này đó. Nghiên cứu code cũa họ rồi nhìn kỷ outcome trên web. Nhưng muốn hiểu được code cũa họ viết bạn nên có kiến thức căn bản về language parser. Ðối với Java scripts thì bạn cũng nên có kiến thức về passing parameters. Cũng dễ hiểu thôi không khó lắm đâu các bạn.

Bây giờ , tôi xin giới thiệu về những nét căn bản khi viết TABLE trong forum từ đơn giản cho đến…hơi phức tạp.

1/. Sắp xếp những Items trong vòng TABLE:

Một HTML Table gồm có Rows, Cols và Cells. Bạn có thể đặt hầu như tất cả mọi thứ bạn muốn trong vòng 1 Cell trong Table.

<TABLE>: Bắt đầu lập 1 Table
<TR> : Xác định 1 hàng (Row) mới trong Table
<TD> : Xác định 1 single Cell trong vòng (within)Table
Dưới đây là code cho 1 Table có 6 cell đơn giản:

<TABLE> <TR> <TD> Cell A1 </TD> <TD>Cell B1</TD> </TR> <TR> <TD>Cell A2</TD> <TD>Cell B2</TD> </TR> <TR> <TD>Cell A3</TD> <TD>Cell B3</TD> </TR> <TABLE>

Kết qủa là a Table có 3 Rows và 2 Columns; text trong vòng <TD> và </TD> xuất hiện trong mổi Cell. By default, Table không có Border. Bạn phải chứng tỏ lines(in pixels) với BORDER attribute cho <TABLE> tag

<TABLE BORDER=”1” > sẽ có outcome border cũa Table là 1 pixel rộng.

Outcome cũa code trên sẽ là...

a/. Không có BORDER:

Cell A1 Cell B1

Cell A2 Cell B2

Cell A3 Cell B3

b/. Có BORDER =”1”:

Cell A1 Cell B1

Cell A2 Cell B2

Cell A3 Cell B3

Bây giờ các bạn tìm hiểu về những Attribute căn bản của TABLE tags: (Attribute Information:)

1/. ALIGN={LEFT, CENTER, RIGHT}
Ex: <TABLE ALIGN=CENTER>
2/. BACKGROUND=”URL”
Ex: <TABLE BACKGROUND=” http://www.dongdu.org/images/uploads/lamduyen.gif” >
3/. BGCOLOR=”#RRGGBB” or “Peach”
4/. BORDER=”n”
5/.BORDERCOLOR=”RRGGBB or “…”
6/.BORDERCOLORDARK=”…”
7/. BORDERCOLORLIGHT=”…”
8/. CELLPADDING=”n”
Specifies the space (in pixel) between the borders of Table cells and the borders of adjacent cells.
9/. COLSPAN="n"
Specifies that a Table cell occupy one Col more than the default of one. This is useful when you have a cat name that applies to more than one Col of data.
10/. NOWRAP:
Disables the default word-wrapping within a cell table Ex: <TD NOWRAP>The contents of this cell will not wrap at all</TD>
11/. ROWSPAN="n"
Specifies that a Table cell occupy more rows than the default of 1. This is usefull when several rows of INF are related to one Cat.
12/. <TH>
Contains table cell headings. The TH tas are identical to TD tags except that text inside TH is usually emphasized with BOLDFACE font and CENTERED within the cell

....And more....

Now Learn BY Examples

<TABLE BORDER="1"> <CAPTION>A test table with merged cells</CAPTION> <TR><TH ROWSPAN="2"><TH COLSPAN="2">Average <TH ROWSPAN="2">other<BR>category<TH>Misc <TR><TH>height<TH>weight <TR><TH ALIGN="LEFT">males<TD>1.9<TD>0.003 <TR><TH ALIGN="LEFT" ROWSPAN="2">females<TD>1.7<TD>0.002 </TABLE>

This could appear as follows, in a text browser:

A test table with merged cells
Average other
category Misc
height weight
males 1.9 0.003
females 1.7 0.002

...Còn Tiếp....

-- Kẻ Sĩ Bắc Hà (ke_si_bac_ha@yahoo.com), October 17, 2004.

A test table with merged cells
	Average	other category	Misc
height	weight
males	1.9	0.003
females	1.7	0.002

CELLPADDING
CELLPADDING="10"
<TABLE BORDER="7" CELLPADDING="10">
<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments --- ></TH>
<TH><table background="http://www.dongdu.org/images/uploads/lamduyen.gif&qu ot; width=150px height=113px><tr><td> </td></tr></table> ;</TH>
</TR>
<TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments --- ></TD>
<TD><table background="http://www.datviet.com/forums/attachment.php? attachmentid=4387&stc=1" width=105px height=101px><tr><td> </td></tr></table></TD>
</TR>
</TABLE>
This is a TD cell
 
This is a TH cell
Text aligned top Image in TH cell with default alignments --->

Text aligned bottom Image in TD cell with default alignments --->
-- Kẻ Sĩ Bắc Hà (ke_si_bac_ha@yahoo.com), October 17, 2004.

1x1 TABLE WITHIN A 3x3 TABLE

<TABLE BORDER="7" CELLSPACING="10">
<TR>
<TH><table background="http://www.datviet.com/forums/image.php? u=21360&dateline=1093882892" width=39px height=50px><tr><td> </td></tr></table> </TH>
<TD><PRE> </PRE></TD>
<TH><table background="http://www.datviet.com/forums/image.php? u=21360&dateline=1093882892" width=39px height=50px><tr><td> </td></tr></table></TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD>
     <TABLE BORDER="7" CELLSPACING="5">
     <CAPTION ALIGN="BOTTOM">
     Công Chúa Ngủ Trong Rừng
     </CAPTION>
     <TR>
     <TD><table background="http://phanchautrinhdanang.com/BAIVO2004/Aotrang04.j pg" width=504px height=361px><tr><td> </td></tr></table></TD>
     </TR>
     </TABLE>
</TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD ALIGN=:LEFT"><B>Bold Text in a TD cell</B></TD>
<TD><BR></TD>
<TD><I>Italic Text in a TD cell</I></TD>
</TR>
</TABLE>
   
   
Công Chúa Ngủ Trong Rừng
   
Bold Text in a TD cell
Italic Text in a TD cell
-- Kẻ Sĩ Bắc Hà (ke_si_bac_ha@yahoo.com), October 17, 2004.

Em xin chào các Bác . Hoan hô các bác trong Forum . Xin hoan hô .

-- NguyễnLậtĐổĐộcTài , đang sống trong chế độ cộng sản nhơ bẩn và bạo tàn ở Việt nam . (độctàicộngsảnsẻchết@mộtngàygần.đây), October 17, 2004.

Ban Nao Can Hoc Cac thu thi vao day day du chi tiec cho ban OPEN va in ra doc !

-- Ho Chi minh Dam tac (Lời kêu cứu khẩn cấp@vietnamcongsans.com), October 18, 2004.

-- (tosu_cs@yahoo.com), October 18, 2004.

Moderation questions? read the FAQ