HTML Coding - Lập trình Html

gửi bởi **Franky** » T.Bảy 28 Tháng 3, 2009 2:07 pm

Có pac' nào quan tâm đến lập trình web không nhỉ.
Em muốn lập một chủ đề để bà con khpt trao đổi kinh nghiệm về vấn đề này, từ HTML, Java script đến PHP, MySql.
Em cũng chưa được học qua về mấy món này mà chỉ được đọc qua mấy tut và một quyển sách hướng dẫn thui.
Thôi thì viết một bài về HTML để cả các pac' còn chưa dại dột dâm đầu vào cái mớ bòng bong này cũng tham gia cho vui vẻ.
Biết chưa giỏi giang gì nhưng phải viết, phải nói ra thì mới tiến bộ được chứ nhỉ.
À mà em có 1 câu hỏi trước là không biết các phiên bản PHP khác nhau thì các hàm của nó khác nhau như thế nào và hàm của PHP sau có dùng trong PHP trước đc không nhỉ.

Đầu tiên ta đi từ các khái niệm cơ bản về WEB đã nhé:

Trong thực tế ứng dụng web tồn tại dưới hai dạng là trang web tĩnh và trang web động. Vậy trang web tĩnh là gì, trang web động là gì? Đó là trang web dưới dạng một “văn bản” như words chẳng hạn mà ta được nhìn thầy ở trên mạng, nó được viết bằng HTML mà không kết nối với cơ sở dữ liệu và được viết bằng Client Script tạm dịch là kịch bản trên trình khách. Ngược lại trang web động là trang web được kết nối với cơ sở dữ liệu và được viết bằng Sever Script tạm dịc là kịch bản trên trình chủ( ngôn ngữ được sử lý ở phía sever). Điều này có nghĩa là mỗi khi trang web động được truy cập đến thì nội dung trang web được lấy ra từ một cơ sở dữ liệu chứ không phải là nó tồn tại chỉ dưới một dạng văn bản. Và cơ sở dữ liệu đó có thể được liên tục làm tươi như trang diễn đàn gtvt.com.vn nhà ta, các bài viết được lấy ra từ cơ sở dữ liệu và có thể được cập nhật bất kỳ lúc nào. Tuy nhiên các pac' cũng cần phải phân biệt giữa một trang web tĩnh có các hiệu ứng động với một trang web động. Các hiệu ứng có thể hiểu là sự thay đổi một cách sinh động giao diện trang web như thông báo ngày giờ bằng javascript, hiệu ứng với con chuột bằng javascript, hiệu ứng ảnh động, các hoạt hình, hiệu ứng tuyết rơi và các đoạn movie bằng flash. Đó vẫn chỉ là trang web tĩnh mà thôi.

Nói cách khác, cho dù đó là trang web tĩnh hay động, nếu các pac' muốn người dùng sử dụng chúng để trình bày dữ liệu trên trình duyệt web ( IE- Internet Explorer hay NC – Netscape) các pac' cần phải thông qua các thẻ HTML hay thông qua ngôn ngữ siêu văn bản HTML.

Để xây dựng một ứng dụng web hoàn chỉnh, các pac' cần phải kết hợp cả Client Script (HTML, Javascript) và Sever Script (PHP, ASP, JSP…) với một loại cơ sở dữ liệu nào đó như SQL sever, MS Access, MysQL, Oracle,… Ở đây em sử dụng MySQL.

OK vậy là xong mấy cái khái niệm cơ bản, pac' nào hỏi thì cứ hỏi nhé, em biết đến đâu thì em sẽ trả lời. Bây giờ là làm quen với HTML, đó là cái cơ bản và khá quan trong trong các ngôn ngữ lập trình web, nhất là PHP vì nếu không có HTML thì PHP không thể giải quyết được các vấn đề về trình bầy trang web. Tuy nhiên các các pac' cũng không mất nhiều thời gian vì cái thằng HTML này đâu vì nó rất đơn giản, nó là một dạng của “trình bày văn bản” thôi.

Một trang web được trình bầy luôn được bắt đầu bằng một thẻ ( cái ký hiệu đặc biệt để thông báo các “lệnh với máy”- theo em hiểu là zậy ví dụ như <html></html> hay <b></b> hay <br>… dần dần các các pac' sẽ quen với khái niệm này giống như mới học sẽ chưa hiểu hết được căn bậc hai là cái quái gì 4.gif). À quay lại, thẻ bắt đầu một trang web là thẻ <HTML> và kết thúc bằng thẻ </HTML>. Ví dụ cụ thể: các pac' bật bất kỳ trang web nào lên và chọn View trên thpac' công cụ và chọn Source. Khi đó các pac' sẽ thấy trang web được mở đầu và kết thúc bởi hai thẻ trên. Bên trong hai thẻ đó là toàn bộ nội dung trang web. Tương tự như vậy, hầu như tất cả các thẻ khác đều được đánh dấu bằng một bộ hai thẻ: thẻ bắt đầu và thẻ kết thúc. Thẻ kết thúc có nội dung tương tự như thẻ bắt đầu nhưng có dấu gạch chéo: “/”

HTML không quy định chữ hoa và chữ thường, có nghĩa là các pac' đánh <HTML> hay <html> cũng rứa mà thui.

OK, bây giờ lướt qua cấu trúc trang web một chút:

<html>
<head>
<title>Trang ví dụ</title><!—Tiêu đề-->
<meta …>
<link ….></link><!—Liên kết đến file khác như file định dạng văn bản .css-->
<script…..></script><!—chỗ đặt Java script-->
</head>
<body><!—tất cả thông thin trong này đều xuất hiện trên trang web-->

Nội dung trang web sẽ được hiển thị ở đây

</body>
</html>

Các thẻ HTML thông dụng: (Các pac' thử các ví dụ sau bằng cách copy toàn bộ rồi dán vào Note Pad và save dưới dạng file .html thì sẽ thấy hiệu ứng ngay

Đầu đề trong một trang văn bản HTML thẻ <H1>, <H2>, <H3>…..

<HTML>
<HEAD>
<TITLE>Tựa đề thí dụ</TITLE>
<HEAD>
<BODY BGCOLOR="#FFFFFF">

<H1>Đây là đầu đề 1</H1>
<H2>Đây là đầu đề 2</H2>
<H3>Đây là đầu đề 3</H3>
<H4>Đây là đầu đề 4</H4>
<H5>Đây là đầu đề 5</H5>
<H6>Đây là đầu đề 6</H6>

</BODY>
</HTML>

Xuống dòng và chia đoạn trong trang HTML

Khi các pac' đánh máy một văn bản trong một chương trình soạn thảo văn bản nào đó, các pac' có thể chỉ cần bấm phím Return để kết thúc một dòng hay một đoạn văn, nhưng các pac' sẽ cần phải làm nhiều thao tác hơn khi các pac' muốn phân định riêng các đoạn văn khác nhau trong một trang Web. Browser tự động bỏ qua các mã xuống dòng bình thường. Vì vậy các pac' phải viết thêm thẻ <P> để phân đoạn hay viết thẻ <BR> tại vị trí cụ thể mà các pac' muốn xuống dòng.

Ví dụ:

<HTML>
<HEAD>
<TITLE>Tựa đề thí dụ</TITLE>
<HEAD>
<BODY>

Cộng hoà xã hội chủ nghĩa Việt namĐộc lập - Tự do - Hạnh phúc Đơn xin phúc tra
Cộng hoà xã hội chủ nghĩa Việt nam<BR>Độc lập - Tự do - Hạnh phúc<P>Đơn xin phúc tra

</BODY>
</HTML>

Và cũng có thể kết hợp cả tag (thẻ) <CENTER> Đơn xin phúc tra</CENTER> để đưa nó vào giữa.

Đường kẻ ngang <HR>

Đường kẻ ngang chủ yếu được dùng để phân định một trang Web thành những phần có tính logic và dễ nhìn. Có không nhiều khả năng đồ hoạ trong ngôn ngữ HTML, bởi vậy đường kẻ ngang là một công cụ rất có ích

Ví dụ:

<HTML>
<HEAD>
<TITLE>Tựa đề thí dụ</TITLE>
<HEAD>
<BODY>

HR1
<HR>
HR2
<HR SIZE=10>
HR3
<HR NOSHADE>
HR4
<HR WIDTH=40>
HR5
<HR COLOR="FF0000">

Chú ý: Có thể tổ hợp các tùy chọn trên với nhau

Ví dụ (từ đây em chỉ post nội dung các đoạn mã, các pac' dán chúng vào trong thẻ <BODY>….</BODY> là được.

<OL>

<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3

</OL>
<HR>
<UL>

<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3

</UL>
<HR>
<MENU>

<LI>Yếu tố 1
<LI>Yếu tố 2
<LI>Yếu tố 3

</MENU>

(còn nữa hỷ...)

Kiểu chữ

Các thẻ kiểu chữ trong ngôn ngữ HTML cho phép các pac' điều khiển được vẻ bề ngoài của bản thân các ký tự - chẳng hạn chúng ta có thể định dạng một từ là đậm hoặc nghiêng. Các định dạng này có thể áp dụng từ phạm vi một đoạn hay toàn bộ văn bản cho tới từng ký tự đơn lẻ.

Ví dụ:

<b>đậm</b>
<u>gạch dưới</u>
<i>nghiêng</i>
<strong>nhấn mạnh</strong>
<cite>trích dẫn</cite>
<code>code</code>

Thay đổi về font: <FONT>…</FONT> và các thuộc tính như size: kích cỡ, color: mầu sắc

Ví dụ:
Một con <FONT SIZE=6 COLOR="#FF0000" >vịt</FONT> xòe ra hai cái <FONT SIZE=1 COLOR="#C0C0C0" >cánh </FONT>
Thẻ ảnh: các pac' dùng thẻ này để chèn ảnh vào trang web:
<IMG SRC="dia_chi_file_pac'.gif " WIDTH=510 HEIGHT=1>

Thẻ liên kết:
Các trang web được liên kết với nhau bằng các đường dẫn từ trang này tới trang khác. Các pac' có thể xem trang chủ của trang giao thông này bằng cách click vào liên kết “Giao thông vận tải” ở trên và nó sẽ đưa các pac' ra trang chủ, vậy làm nó thế nào?

Đi đến <A HREF="Địa chỉ trang đích">Dòng hướng dẫn</A> thôi.
Ngoài ra cũng có thể đặt một file ảnh làm một cái đường dẫn được:
<A HREF="Địa chỉ của file ảnh trên mạng"><IMG SRC="dia_chi_file_pac'.gif" WIDTH=82 HEIGHT=68></A>

Các thẻ dành cho FORM Các trường được định nghĩa để thu nhận các thông tin và gửi cho máy chủ 4.gif

Thẻ Input
dạng text

<input type=”text” name=”txtuser” value=”Chi_e">

dạng password

<input type=”password” name=”txtpassword”>

Thẻ textarea

<textarea rows="7" name="S1" cols="32"></textarea>

Nút đồng ý

<input type="submit" value="Submit" name="B1">

Ví dụ:

<html>

<head>

<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>

</head>

<body>

<form method="POST" action="guinhac.php">

<p>Gửi nhạc lên</p>
<p>Tên bài hát: <input type="text" name="T1" size="20"></p>
<p>Lời bài hát</p>
<p><textarea rows="7" name="S1" cols="32"></textarea></p>
<p><input type="checkbox" name="C1" value="ON">nhạc việt nam   <input type="checkbox" name="C2" value="ON">Nhạc
quốc tế   <input type="checkbox" name="C3" value="ON">Nhạc không
lời</p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>

</form>

</body>

</html>

Thẻ định dạng bảng:
Khi các pac' muốn thiết kế bảng dữ liệu trên trang web các pac' cần phải khai báo thẻ <TABLE> rồi đến các thẻ hàng <TR> và thẻ cột <TD>[indent]Ví dụ:[indent]<html>
<head>
<title>

Trao đổi về PHP và MySQL

</title>
<meta ...>
<link ...></link>
<script ...> </script>
</head>
<body>[indent]<TABLE BORDER CELLSPACING=1 CELLPADDING=7 WIDTH=468>

<TR>

<TD WIDTH="18%" VALIGN="TOP" ROWSPAN=2>MÃ</TD>
<TD WIDTH="37%" VALIGN="TOP" ROWSPAN=2>
<P ALIGN="JUSTIFY">TÊN ĐẦY ĐỦ</TD>
<TD WIDTH="45%" VALIGN="TOP" COLSPAN=2>GIÁ TRỊ HÀNG</TD>
</TR>
<TR>

<TD WIDTH="22%" VALIGN="TOP">HOA NGƯỜI YÊU</TD>
<TD WIDTH="23%" VALIGN="TOP">SÁCH LẬU</TD>
</TR>

<TR><TD WIDTH="18%" VALIGN="TOP">A0001</TD>
<TD WIDTH="37%" VALIGN="TOP">
<P ALIGN="JUSTIFY">Nguyen Van A</TD>
<TD WIDTH="22%" VALIGN="TOP">54545454</TD>
<TD WIDTH="23%" VALIGN="TOP">89898</TD>

</TR>
<TR>

<TD WIDTH="18%" VALIGN="TOP">B0002</TD>
<TD WIDTH="37%" VALIGN="TOP">
<P ALIGN="JUSTIFY">Tran Van B</TD>
<TD WIDTH="22%" VALIGN="TOP">65656556</TD>
<TD WIDTH="23%" VALIGN="TOP">98984</TD>

</TR>
<TR>

<TD WIDTH="18%" VALIGN="TOP">C0004</TD>
<TD WIDTH="37%" VALIGN="TOP">
<P ALIGN="JUSTIFY">Pham Van H</TD>
<TD WIDTH="22%" VALIGN="TOP">87878787</TD>
<TD WIDTH="23%" VALIGN="TOP">54541</TD>

</TR>

</TABLE>

</body>
<html>

Và giới thiệu qua về các hiệu ứng (phụ thui)
Ví dụ:

<html>
<head>
<title>Hiệu ứng</title>
</HEAD>
<BODY>

<MARQUEE DIRECTION=RIGHT SCROLLDELAY=2 SCROLLAMOUNT=1 WIDTH=100% >
<font face="arial" size="1" color=#ff33ff>
<BR>Chi_e – Ghost_casper – Yellow_rose – nhattan1985 - nhimcon </marquee><br>
<MARQUEE DIRECTION=UP SCROLLDELAY=2 SCROLLAMOUNT=1 WIDTH=100%
STYLE="filter:wave(add=5, phase=1, freq=5, strength=20);"><font face="arial" size="1" color=#ff33ff>
<BR> Chi_e
<BR> Ghost_casper
<BR> Yellow_rose
<BR> nhattan1985
<BR> nhimcon </marquee>

</BODY></HTML>

Vậy là khá nhiều về HTML, chắc chắn là chưa hết các lệnh của nó đâu, nếu pac' nào nhớ được lệnh nào nữa thì bổ xung thêm nhé

2 Franky :
admin, vmtinh

gửi bởi **khoa.trinh** » T.Sáu 05 Tháng 2, 2010 2:21 pm

hay mà sao ngưng roài bạn ko tiếp tục đi nhỉ :(

gửi bởi **vmtinh** » T.Sáu 23 Tháng 7, 2010 3:25 pm

Bạn viết nữa đi. viết sâu hơn một chút
Hoặc có thể thì làm luôn trang demo. Cảm ơn. yociexp103

HTML Coding - Lập trình Html

HTML Coding - Lập trình Html

Re: HTML Coding - Lập trình Html

Re: HTML Coding - Lập trình Html

Đang trực tuyến