Học ngôn ngữ HTML

Từ VLOS
Bước tới: chuyển hướng, tìm kiếm

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 sử dụng để tạo nên các 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 sử dụng để thay đổi kiểu chữ trên các diễn đàn trực tuyến, trong các hồ sơ trực tuyến được tùy biến, hoặc trong các bài viết của wikiHow. HTML là một công cụ hữu ích cho bất cứ ai sử 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ĩ.

Các bước[sửa]

Tìm hiểu HTML Cơ bản[sửa]

  1. Mở một tài liệu HTML. Hầu hết các 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 sử 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, các tài liệu HTML không cần sử dụng các tùy chọn đó.
    • Không có gì khác biệt giữa các tập tin .html và .htm. Cả hai đều hoạt động được.[1]
  2. Xem 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 hướng 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.
  3. Tìm hiểu các thẻ đánh dấu. Các 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à các nội dung của nó. “Start tag” (Thẻ bắt đầu) chứa các 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 các 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 các thẻ bắt đầu ở giữa các dấu ngoặc nhọn: <thẻ bắt đầu đặt ở đây>
    • Viết các thẻ kết thúc ở giữa các 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 các 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 sử dụng các hướng dẫn HTML khác, bạn có thể thấy các thẻ còn được gọi là "elements" (các thành phần) và văn bản giữa các thẻ bắt đầu và kết thúc là "element content." (nội dung thành phần)
  4. Hã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 các thẻ này là văn bản HTML. Thêm các 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 hướng dẫn này ở giữa hai thẻ này.
  5. Thêm phần <head> cho tài liệu của bạn. Ở giữa các 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 các 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 các thẻ <head> và </head>, viết <title> </title>
    • Giữa các thẻ <title> và </title>, viết Cách để Học HTML - wikiHow.
    • 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?
  6. Tạ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> </body>. Trong phần còn lại của bài hướng dẫn này, mọi thứ bạn viết sẽ nằm giữa các 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 các dấu gạch đầu dòng):
    • <html>
    • <head>
    • <title>Cách học HTML - wikiHow</title>
    • </head>
    • <body>
    • </body>
    • </html>
  7. Thêm văn bản theo các 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 các 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ó các 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 các 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> 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?
  8. Chia văn bản của bạn ra thành các đ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à các đ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" (các thẻ trống).
    • Tạo đề mục để hiển thị tên của các 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)
  9. Học cách tạo các danh sách. Có nhiều cách khác nhau để viết các danh sách lên trang web. Hãy thử các 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 các thẻ <ul> và </ul> cho "các danh sách không có thứ tự"), trong khi các 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>.
    • Sử dụng mã này để tạo các 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 các 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 các 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>
  10. Làm đẹp cho trang của bạn với các dấu ngắt dòng, các đường kẻ ngang, và các 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ử các thẻ sau, hoặc nhấn vào các 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">
  11. Liên kết tới các vị trí khác trên trang. Bạn còn có thể sử dụng mã này để liên kết tới các trang khác và các 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 các “anchor” (các văn bản có chứa liên kết) hay là các 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>
    • Sử dụng <href> để liên kết tới các 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.wikihow.com/Learn-HTML#Lờikhuyên sẽ liên kết tới mục Lời khuyên của trang này.

Tìm hiểu thêm về HTML nâng cao[sửa]

  1. Tìm hiểu về các thuộc tính. Các thuộc tính được đặt bên trong bản thân các 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 các thông số trước đó, nếu bạn đã thực hiện hướng dẫn trong mục HTML cơ bản ở trên. Các thẻ <img> sử dụng thuộc tính src, các anchor sử dụng thuộc tính name, và các liên kết sử dụng thuộc tính href. Bạn đã thấy chúng tuân theo định dạng ___="___" chưa?
  2. Thử nghiệm với các bảng trong HTML. Việc tạo bảng biểu, đòi hỏi sử dụng nhiều thẻ khác nhau. Hãy thử nghịch qua các thẻ này, hoặc học chi tiết hơn về các bảng của HTML.
    • Bắt đầu với các thẻ bảng xung quanh toàn bộ bảng:<table></table>
    • Các thẻ hàng bao quanh nội dung mỗi hàng: <tr>
    • Các đề mục cột trong hàng đầu tiên: <th>
    • Các ô trong các 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>
  3. Học các 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 các kiểu thẻ sau:
    • Các thẻ Meta, được sử dụng để cung cấp metadata (siêu dữ liệu) về một trang web. Dữ liệu này có thể được sử dụng bởi các công cụ tìm kiếm khi robot (các chương trình tự động) xới tung internet để định vị và liệt kê các 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 sử dụng một hoặc nhiều hơn các 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 các từ khóa, cách nhau bằng một dấu phẩy">
    • Các thẻ <link> được sử dụng để kết hợp các tập tin khác với trang web. Nó thường được dùng để liên kết tới các 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.
    • Các thẻ <script> được dùng để liên kết trang web tới các 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ó.
  4. Hãy thử nghịch với HTML tìm thấy trên các 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 các 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 các 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 các 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.
  5. Tìm hiểu thêm về thiết kế web nâng cao từ các hướng 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 các cuốn sách hướng 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 các chuyên gia thiết kế web thường là Javascript.

Lời khuyên[sửa]

  • 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 số 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ả các 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 các 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 các 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 <!-- Thêm nhận xét vào đây --> để ghi nhận các 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 các thẻ đánh dấu trong HTML không phân biệt chữ hoa chữ thường, nhưng việc sử 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.[2]

Cảnh báo[sửa]

  • Một số 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 các hiệu ứng như nhau, và thậm chí bổ sung thêm các 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 các trang của bạn hợp lệ, hãy tới trang web W3 và học HTML hợp lệ! Các tiêu chuẩn HTML thay đổi theo thời gian, và một vài thẻ được thay thế bằng các thẻ khác có thể làm việc tốt hơn trên các trình duyệt hiện đại.

Những thứ Bạn cần[sửa]

  • 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)

Nguồn và Trích dẫn[sửa]

Liên kết đến đây