HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản), và là loại mã hay ngôn ngữ được dùng để tạo nên những trang web. Có thể hơi nản lòng một chút nếu bạn chưa từng viết mã bao giờ trước đây, nhưng tất cả những gì bạn cần để thử làm là một chương trình biên tập văn bản đơn giản và một trình duyệt internet. Bạn thậm chí có thể nhận ra vài HTML được dùng để thay đổi kiểu chữ trên những diễn đàn trực tuyến, trong những hồ sơ trực tuyến được tùy biến, hoặc trong những bài đăng của TaiNgheTroThinh. HTML là một công cụ hữu ích cho bất cứ ai dùng internet, việc học những thứ căn bản về HTML có thể mất ít thời gian hơn là bạn nghĩ.
những bước
Phần 1Phần 1 Tìm hiểu HTML Cơ bản
1Mở một tài liệu HTML. Hầu hết những chương trình biên tập văn bản, bao gồm Notepad hay Microsoft Word (dành cho hệ điều hành Windows) và TextEdit (dành cho hệ điều hành Mac), đều có thể được dùng để viết tài liệu HTML. Mở một tài liệu mới và dùng File → Save As trong trình đơn trên cùng để lưu nó dưới dạng “Web Page”, (Trang Web) hoặc để thay đổi phần mở rộng của tập tin thành “.html” hoặc “.htm” thay vì “.doc”, “.rtf”, hoặc bất cứ phần mở rộng nào khác. Bạn có thể sẽ thấy một cảnh báo rằng tài liệu của bạn sẽ bị thay đổi thành “plain text” (văn bản thuần túy) thay vì “rich text” (văn bản giàu tính chất), hoặc là thông báo kiểu định dạng và hình ảnh đặc biệt sẽ không được lưu một cách thích hợp. Điều này là bình thường, những tài liệu HTML không cần dùng những tùy chọn đó.Không có gì khác biệt giữa những tập tin .html và .htm. Cả hai đều hoạt động được.2Xem tài liệu của bạn bằng một trình duyệt internet. Lưu tài liệu trống của bạn lại, rồi tìm biểu tượng tài liệu này trên máy tính của bạn và nhấp đúp để mở nó. Nó sẽ mở ra như một trang trống trong trình duyệt. Nếu không bạn hãy kéo biểu tượng của tập tin đó vào thanh địa chỉ URL trên trình duyệt. Khi bạn biên tập tài liệu HTML của bạn trong bài chỉ dẫn này, bạn có thể liên tục kiểm tra lại và xem trang web của bạn thay đổi thế nào. Lưu ý rằng việc này không thực sự tạo ra một trang web trực tuyến. Người khác sẽ không thể truy cập tới nó, và bạn cũng không cần một kết nối internet nào để kiểm tra cả. Chỉ cần dùng một trình duyệt để “đọc” tài liệu HTML của bạn như thể nó là một trang web.3Tìm hiểu những thẻ đánh dấu. những thẻ đánh dấu không thể hiện ra trên một trang web như văn bản bình thường. Thay vào đó, chúng sẽ cho trình duyệt web biết cách hiển thị trang và những nội dung của nó. “Start tag” (Thẻ bắt đầu) chứa những chỉ dẫn. Ví dụ, nó có thể chỉ cho trình duyệt biết hiển thị văn bản theo kiểu bold (in đậm). Bạn cũng cần môt “end tag” (Thẻ kết thúc) để cho trình duyệt biết những chỉ dẫn được áp dụng vào đâu: trong ví dụ này, tất cả văn bản nằm giữa thẻ bắt đầu và thẻ kết thúc sẽ được in đậm. Thẻ kết thúc cũng được viết bên trong dấu ngoặc nhọn, nhưng được bắt đầu bằng một dấu gạch chéo sau dấu ngoặc đầu tiên. Viết những thẻ bắt đầu ở giữa những dấu ngoặc nhọn: <thẻ bắt đầu đặt ở đây>Viết những thẻ kết thúc ở giữa những dấu ngoặc nhọn, nhưng đặt một dấu gạch chéo ngay sau dấu ngoặc đầu tiên: </ thẻ kết thúc đặt ở đây>)Tiếp tục đọc để biết cách viết những thẻ đánh dấu chức năng. Ở bước này, những gì bạn cần nhớ là định dạng cơ bản mà chúng được viết bên trong: < > và </ >Nếu bạn dùng những chỉ dẫn HTML khác, bạn có thể thấy những thẻ còn được gọi là “elements” (những thành phần) và văn bản giữa những thẻ bắt đầu và kết thúc là “element content.” (nội dung thành phần)4Hãy viết thẻ <html> đầu tiên của bạn. Mỗi tài liệu html đều bắt đầu với một thẻ <html> và kết thúc với một thẻ </html>. Nó cho trình duyệt biết rằng mọi thứ giữa những thẻ này là văn bản HTML. Thêm những thẻ này vào tài liệu của bạn: Viết <html> ở đầu tài liệu của bạn.Nhấn enter hoặc return vài lần để tạo vài khoảng trống, rồi viết </html>Hãy nhớ viết mọi thứ khác trong chỉ dẫn này ở giữa hai thẻ này.5Thêm phần <head> cho tài liệu của bạn. Ở giữa những thẻ <html> và </html>, viết một thẻ bắt đầu <head> và một thẻ kết thúc </head>. Lưu ý tạo khoảng trống để viết giữa chúng. Bản thân mọi thứ nằm giữa những thẻ head này sẽ không thực sự hiển thị trên trang web. Hãy thử làm bước sau đây và xem xem nó hiển thị ở đâu: Giữa những thẻ <head> và </head>, viết <title> và </title>Giữa những thẻ <title> và </title>, viết Phương pháp Học HTML – TaiNgheTroThinh.Lưu tài liệu lại rồi mở nó trong một trình duyệt (hoặc lưu tài liệu, rồi làm mới trang trình duyệt đã được mở sẵn). Bạn có thấy những gì bạn viết nằm ở trên cùng của trình duyệt, bên trên thanh địa chỉ hay không?6Tạo một phần <body>. Mọi thứ còn lại trong tài liệu khởi đầu này đều nằm trong phần body (phần thân), chính là những thứ hiển thị trên trang web. Sau thẻ kết thúc </head>, nhưng trước thẻ </html>, hãy viết <body> và </body>. Trong phần còn lại của bài chỉ dẫn này, mọi thứ bạn viết sẽ nằm giữa những thẻ body (phần thân) này. Đến lúc này bạn sẽ có một tài liệu trông giống như sau (bỏ qua những dấu gạch đầu dòng): <html><head><title>Cách học HTML – TaiNgheTroThinh</title></head><body></body></html>7Thêm văn bản theo những kiểu khác nhau. Giờ đã đến lúc để viết vài thứ mà bạn có thể nhìn thấy thực sự trong trình duyệt của bạn! Mọi thứ bạn viết bên trong những thẻ body (thân) sẽ hiển thị trên trình duyệt của bạn sau khi bạn lưu tài liệu HTML lại và làm mới trang trình duyệt. Tuy nhiên Đừng viết bất cứ thứ gì có những biểu tượng < hoặc >, vì trình duyệt của bạn sẽ cố dịch nó thành một chỉ dẫn HTML thay vì là văn bản bình thường. Hãy thử viết Xin chào thế giới! (hoặc bất cứ điều gì bạn thích), rồi thêm những thẻ mới này xung quanh nó để xem chuyện gì xảy ra mỗi lần thực hiện: <em>Xin chào thế giới!</em> sẽ hiển thị là “văn bản in nghiêng:” Xin chào thế giới!<strong>Xin chào thế giới!</strong&
gt; sẽ hiển thị là “văn bản in đậm:” Xin chào thế giới!<s>Xin chào thế giới!</s> sẽ hiển thị với một gạch ngang: Xin chào thế giới!<sup>Xin chào thế giới!</sup> sẽ hiển thị như là chữ viết bên trên: Xin chào thế giới!<sub>Xin chào thế giới!</sub> sẽ hiển thị như là chữ viết bên dưới: Xin chào thế giới!Thử kết hợp như sau: Chữ <em><strong>Xin chào thế giới!</strong></em> trông thế nào?8Chia văn bản của bạn ra thành những đoạn. Nếu bạn thử viết vài dòng văn bản trong tài liệu HTML của bạn, bạn có thể để ý là những đoạn ngắt dòng không hiển thị trên trình duyệt. Bạn phải viết thêm mã cho thao tác này: <p>Đây là đoạn văn bản tách biệt.</p>Câu này được theo sau bởi một ngắt dòng.<br>trước khi câu này bắt đầu.Đây là thẻ đầu tiên bạn thấy mà không cần một thẻ kết thúc! Chúng được gọi là “empty tags” (những thẻ trống).Tạo đề mục để hiển thị tên của những mục:<h1>văn bản đề mục</h1>: đề mục lớn nhất<h2>văn bản đề mục</h2> (đề mục mức số 2)<h3>văn bản đề mục</h3> (đề mục mức số 3)<h4>văn bản đề mục</h4> (đề mục mức số 4)<h5>văn bản đề mục</h5> (đề mục nhỏ nhất)9Học cách tạo những danh sách. Có nhiều cách khác nhau để viết những danh sách lên trang web. Hãy thử những kiểu mã sau và xem kiểu nào bạn thích. Lưu ý rằng một cặp thẻ sẽ bao trọn một danh sách (chẳng hạn những thẻ <ul> và </ul> cho “những danh sách không có thứ tự”), trong khi những mục đơn lẻ trong danh sách được bao bởi một cặp thẻ khác, chẳng hạn <li>và</li>. dùng mã này để tạo những danh sách có gạch đầu dòng:<ul><li>Một mục</li><li>Một mục khác</li><li>Một mục khác</li></ul>Hoặc dùng mã này để tạo những danh sách đánh số thứ tự:<ol><li>Mục 1</li><li>Mục 2</li><li>Mục 3</li></ol>Hoặc dùng mã này để tạo một danh sách định nghĩa những thuật ngữ:<dl><dt>Cà phê</dt><dd>- Thức uống nóng</dd><dt>Leite</dt><dd>- Thức uống lạnh</dd></dl>10Làm đẹp cho trang của bạn với những dấu ngắt dòng, những đường kẻ ngang, và những bức ảnh. Giờ là lúc thử thêm những thứ khác ngoài văn bản vào trang của bạn. Hãy thử những thẻ sau, hoặc nhấn vào những liên kết để có thêm thông tin. Bạn sẽ cần đến một dịch vụ đặt ảnh trực tuyến để có một URL để liên kết tới thẻ ảnh: Thêm một dòng trong HTML: <br> hoặc <hr>Thêm ảnh: <img src=”URL_ảnh_của_bạn”>11Liên kết tới những vị trí khác trên trang. Bạn còn có thể dùng mã này để liên kết tới những trang khác và những trang web. Nhưng lúc này, vì bạn còn chưa có một trang web, nên chúng ta sẽ tập trung vào những “anchor” (những văn bản có chứa liên kết) hay là những nơi cụ thể trên trang mà bạn có thể liên kết tới: Tạo một anchor với thẻ <a> tại vị trí trên trang mà bạn muốn liên kết tới. Đặt cho nó một cái tên phân biệt và dễ nhớ:<a name=”Lời khuyên”>Đây là văn bản bao quanh bằng anchor.</a>dùng <href> để liên kết tới những anchor đó hoặc tới trang web khác:<a href=”URL của trang web, hoặc tên của anchor bên trong trang này”>Viết đoạn văn bản hoặc hình ảnh được hiển thị như liên kết ở đây.</a>Để liên kết tới một anchor trên một trang web khác, thêm dấu # vào sau URL, theo sau là tên của anchor. Ví dụ, http://www.TaiNgheTroThinh.com/Learn-HTML#Lờikhuyên sẽ liên kết tới mục Lời khuyên của trang này
Phần 2Phần 2 Tìm hiểu thêm về HTML nâng cao
1Tìm hiểu về những thuộc tính. những thuộc tính được đặt bên trong bản thân những thẻ sẽ tạo thêm sự biến đổi đối với “nội dung thành phần” nằm giữa thẻ bắt đầu và kết thúc. Chúng không bao giờ đứng một mình. Chúng được viết dưới dạng name=”value”, trong đó name là tên của thuộc tính (ví dụ “color” – màu sắc), và value (giá trị) mô tả cụ thể giá trị của “color” (ví dụ “red” – màu đỏ). Thực sự thì bạn đã nhìn thấy những thông số trước đó, nếu bạn đã thực hiện chỉ dẫn trong mục HTML cơ bản ở trên. những thẻ <img> dùng thuộc tính src, những anchor dùng thuộc tính name, và những liên kết dùng thuộc tính href. Bạn đã thấy chúng tuân theo định dạng ___=”___” chưa?2Thử nghiệm với những bảng trong HTML. Việc tạo bảng biểu, đòi hỏi dùng nhiều thẻ khác nhau. Hãy thử nghịch qua những thẻ này, hoặc học chi tiết hơn về những bảng của HTML. Bắt đầu với những thẻ bảng xung quanh toàn bộ bảng:<table></table>những thẻ hàng bao quanh nội dung mỗi hàng: <tr>những đề mục cột trong hàng đầu tiên: <th>những ô trong những hàng tiếp theo: <td>Đây là một ví dụ về cách chúng kết hợp với nhau:<table><tr><th>Cột 1: Tháng</th><th>Cột 2: Tiền tiết kiệm được</th></tr><tr><td>Tháng Một</td><td>$100</td></tr></table>3Học những thẻ head (phần đầu) hỗn hợp. Bạn đã học về thẻ <head>, thẻ này xuất hiện ở phần đầu của mỗi tài liệu. Bên cạnh thẻ <title>, nó còn có thể bao gồm những kiểu thẻ sau: những thẻ Meta, được dùng để cung cấp metadata (siêu dữ liệu) về một trang web. Dữ liệu này có thể được dùng bởi những công cụ tìm kiếm khi robot (những chương trình tự động) xới tung internet để định vị và liệt kê những trang web. Để làm cho trang web của bạn dễ được công cụ tìm kiếm nhìn thấy hơn, hãy dùng một hoặc nhiều hơn những thẻ bắt đầu <meta> (không cần thiết có thẻ kết thúc), mỗi thẻ với chính xác là một thuộc tính tên và một thuộc tính nội dung, ví dụ: <meta name=”description” content=”viết một mô tả ở đây”>; hoặc <meta name=”keywords” content=”viết một danh sách những từ khóa, cách nhau bằng một dấu phẩy”>những thẻ <link> được dùng để kết hợp những tập tin khác với trang web. Nó thường được dùng để liên kết tới những tầng định dạng CSS được tạo ra bằng một kiểu viết mã khác nhằm biến đổi trang HTML của bạn bằng cách thêm màu sắc, căn chỉnh văn bản, và nhiều thứ khác.những thẻ <script> được dùng để liên kết trang web tới những tập tin JavaScript là loại tập tin tạo ra sự tương tác với người dùng và có thể khiến trang web thay đổi khi người dùng tương tác với nó.4Hãy thử nghịch với HTML tìm thấy trên nhữn
g trang web. Một cách hay để mở rộng kiến thức của bạn là nhìn vào mã nguồn HTML của những trang web. Bạn có thể làm việc này bằng cách nhấn chuột phải vào trang web bất kỳ rồi chọn “View Source” (Xem Mã nguồn), “View Page Source” (Xem Mã nguồn Trang), hoặc một tùy chọn tương tự, hoặc vào mục View (Hiển thị) trong trình đơn ở trên cùng của trình duyệt. Hãy thử tìm hiểu thêm xem mỗi thẻ HTML mà bạn chưa quen có chức năng gì, hoặc tìm kiếm nó trên mạng để có câu trả lời. Trong khi không thể biên tập những trang web của người khác, bạn có thể sao chép HTML mà bạn tìm thấy về làm tài liệu của riêng mình, rồi nghịch thử chúng để xem những tùy chọn khác nhau có chức năng gì. Lưu ý là nếu không có tập tin định dạng CSS mà trang web liên kết tới, bạn có thể không thấy được mọi màu sắc hoặc định dạng trên trang.5Tìm hiểu thêm về thiết kế web nâng cao từ những chỉ dẫn toàn diện. Có nhiều nguồn phong phú trên mạng internet mà bạn có thể dùng để học thêm về nhiều thẻ HTML khác, chẳng hạn W3Schools hoặc Codecademy. Bạn cũng có thể tìm những cuốn sách chỉ dẫn HTML, nhưng hãy chắc chắn là bạn dùng sách phát hành trong một hai năm gần đây, bởi thường hay có sự cập nhật và thay đổi. Tốt hơn nữa là học CSS để kiểm soát được nhiều hơn giao diện và hình thức trang web của bạn. Khi đã rành về CSS, bước tiếp theo đối với những chuyên gia thiết kế web thường là Javascript
Lời khuyên
Bạn có thể thích tìm một trang web đơn giản trên mạng internet, và nghịch với mã của nó. Hãy thử dịch chuyển một vài văn bản, thay đổi kiểu chữ, thay thế ảnh, hoặc bất cứ thứ gì bạn thích!Bạn có thể kiếm một quyển sổ tay và viết lại tất cả những mã, để nếu bạn cần nhớ đến chúng, bạn chỉ việc mở sổ tay ra và xem. Bạn cũng có thể in trang này ra như một tài liệu tham khảo hữu ích.XML và RSS ngày càng trở nên phổ biến trên những trang web ngày nay. Mã của chúng có thể khó đọc và hiểu đối với người quan sát, đặc biệt là khi xem trên một tập tin mã nguồn HTML, nhưng chúng lại tạo ra những hiệu quả riêng đối với những trang web đó.Khi viết mã, hãy đảm bảo là bạn viết chúng một cách gọn gàng, để bạn và người khác có thể hiểu nó. Hãy dùng để ghi nhận những nhận xét dạng HTML, là những nhận xét không hiển thị lên trang web mà chỉ hiển thị trong phần mã.Notepad++ là một chương trình tuyệt vời, miễn phí hoạt động giống như một chương trình notepad bình thường, nhưng bạn có thể lưu và kiểm tra mã của bạn trực tiếp trên một trình duyệt. (Nó còn cho phép hầu hết mọi ngôn ngữ viết mã HTML, CSS, python, Javascript,…)Bản thân những thẻ đánh dấu trong HTML không phân biệt chữ hoa chữ thường, nhưng việc dùng toàn bộ chữ thường (như ở trong trang này) được khuyên dùng nhằm mục đích tiêu chuẩn hóa và để tương thích với (ngôn ngữ viết) XHTML.
Cảnh báo
một vài thẻ đã không được tán thành trong những năm gần đây và được thay thế bằng những lựa chọn khác để tạo những hiệu ứng như nhau, và thậm chí bổ sung thêm những hiệu ứng khác nhau, nếu bạn muốn.Nếu bạn hứng thú với việc làm cho những trang của bạn hợp lệ, hãy tới trang web W3 và học HTML hợp lệ! những tiêu chuẩn HTML thay đổi theo thời gian, và một vài thẻ được thay thế bằng những thẻ khác có thể làm việc tốt hơn trên những trình duyệt hiện đại.
Những thứ Bạn cần
Một chương trình biên tập văn bản, ví dụ như Notepad (dành cho hệ điều hành Windows), hoặc TextEdit (dành cho hệ điều hành Mac)Một cuốn sổ chép tay (không bắt buộc)Một chương trình biên tập HTML như Notepad++ (dành cho hệ điều hành Windows) hoặc TextWrangler (dành cho hệ điều hành Mac) (không bắt buộc)
