Viết một trang HTML

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

HTML (HyperText Markup Language – Ngôn ngữ Đánh dấu Siêu văn bản) là một ngôn ngữ cơ bản để xây dựng các trang web. Nó được tạo ra như một ngôn ngữ soạn mã dễ dàng và linh hoạt. Gần như mọi trang web trên Internet đều được phát triển bằng một vài dạng thức của mã này (ColdFusion, XML, XSLT). HTML dễ để nắm bắt, nhưng bạn có thể liên tục học hỏi về nó trong một thời gian dài nếu bạn hứng thú với các chức năng toàn diện của nó. Để thêm màu sắc và sự sôi nổi cho trang web của bạn, bạn có thể học CSS cơ bản ngay sau khi bạn đã quen với một trang HTML cơ bản.

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

Xây dựng một Tài liệu[sửa]

  1. Mở một trình biên tập văn bản đơn giản. NotePad là một lựa chọn tốt và có thể tải về miễn phí. Bạn có thể viết HTML với phần lớn các phần mềm biên tập văn bản, nhưng các phần mềm phức tạp hơn với khả năng định dạng tự động có thể gây khó khăn trong việc tổ chức trang HTML của bạn.[1]
    • Không nên dùng TextEdit, vì nó thường lưu tập tin ở định dạng mà trình duyệt của bạn có thể không nhận ra tập tin là HTML.
    • Bạn cũng có thể sử dụng một trình biên tập HTML trực tuyến. Các chương trình biên tập HTML chuyên dụng không được khuyến khích sử dụng cho những người mới bắt đầu.[2]
  2. Lưu một tập tin ở dạng trang web. Chọn File → Save As trong trình đơn ở trên cùng. Đổi định dạng tập tin thành “Web Page”, “.html” hay “.htm”. Lưu tập tin vào chỗ mà bạn có thể tìm nó một cách dễ dàng.
    • Không có gì khác biệt giữa ba tùy chọn này.
  3. Mở tập tin trong một trình duyệt. Kích đúp vào tập tin, và nó sẽ tự động mở ra như một trang web trống trong trình duyệt của bạn. Hoặc cách khác là bạn có thể mở một trình duyệt, như Firefox hay Internet Explorer, rồi dùng File → Open File để chọn tài liệu.
    • Trang web này không trực tuyến. Nó chỉ có thể xem được trên máy tính của bạn.
  4. Làm mới trang web và xem các thay đổi đã được lưu lại. Gõ đoạn sau vào tài liệu trống của bạn: <strong>Xin chào</strong>. Lưu tài liệu lại. Làm mới trang web trống trong trình duyệt, và bạn sẽ thấy từ “Xin chào” được in đậm xuất hiện ở trên cùng của trang. Bất cứ khi nào bạn muốn kiểm tra HTML mới của bạn trong suốt bài hướng dẫn này, lưu tài liệu .htm lại, rồi làm mới cửa sổ trình duyệt của bạn để xem cách HTML được biên dịch.
    • Nếu bạn thấy các từ "<strong>" và "</strong>'' xuất hiện trong trình duyệt của bạn, thì tập tin đã không được biên dịch chính xác theo HTML. Hãy thử một chương trình biên tập văn bản khác hoặc một trình duyệt khác.
  5. Tìm hiểu các thẻ. Các lệnh HTML được viết theo các “thẻ” cho trình duyệt biết cách biên dịch và hiển thị trang web của bạn. Chúng luôn được viết bên trong các dấu móc đơn <như thế này>, và không được hiển thị trên trang web như bạn đã sử dụng chúng ở ví dụ trên rồi:
    • <strong> là một “thẻ bắt đầu” hay “thẻ mở”. Bất cứ thứ gì được viết sau thẻ này sẽ được định nghĩa là “chữ in đậm” (được in đậm trên một trang web).
    • </strong> là một “thẻ kết thúc” hay “thẻ đóng”, mà bạn có thể phân biệt bằng biểu tượng dấu /. Nó biểu thị kết thúc của đoạn văn bản in đậm. Hầu hết các thẻ (không phải tất cả) cần một thẻ kết thúc để hoạt động, vậy nên hãy nhớ thêm nó vào.
  6. Xây dựng tài liệu của bạn. Xóa mọi thứ trong tài liệu HTML của bạn. Bắt đầu lại với đoạn văn bản sau, chính xác như được viết (trừ các dấu gạch đầu dòng). Mã HTML này cho trình duyệt biết kiểu của HTML mà bạn đang dùng, và rằng tất cả HTML của bạn sẽ được đặt bên trong các thẻ <html> và </html>.[3]
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • </html>
  7. Thêm các thẻ head (phần đầu) và body (phần thân). Các tài liệu HTML được chia thành hai phần. Phần “đầu” dành cho thông tin đặc biệt, như tiêu đề của trang. Phần “thân” chứa nội dung chính của trang. Thêm cả hai phần này vào tài liệu của bạn, và nhớ là bao gồm các thẻ kết thúc. Văn bản được thêm mới có dạng in đậm:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • </head>
    • <body>
    • </body>
    • </html>
  8. Đặt tiêu đề cho trang của bạn. Phần lớn các thẻ trong phần đầu là không quan trọng để học với người mới bắt đầu. Dù vậy thẻ tiêu đề lại dễ sử dụng, và sẽ xác định cái gì sẽ hiển thị như là tên của cửa sổ trình duyệt hoặc trên thẻ trình duyệt. Đặt các thẻ bắt đầu và kết thúc của tiêu đề bên trong các thẻ head, và viết bất kỳ tiêu đề nào mà bạn thích giữa các thẻ đó:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>Trang HTML đầu tiên của tôi.</title>
    • </head>
    • <body>
    • </body>
    • </html>

Định dạng Văn bản[sửa]

  1. Thêm văn bản vào phần thân của bạn. Đối với phần này, chúng ta sẽ chỉ làm việc với các thẻ body. Các văn bản khác sẽ vẫn nằm trong tài liệu của bạn, nhưng chúng ta sẽ tiết kiệm chỗ bằng cách không lặp đi lặp lại nó trong hướng dẫn này. Viết bất kỳ thứ gì bạn muốn giữa các thẻ <body> và </body>, và nó sẽ xuất hiện như là nội dung đầu tiên trên trang của bạn. Ví dụ:
    • <body>
    • Tôi làm theo hướng dẫn wikiHow để viết một trang HTML.
    • </body>
  2. Thêm các đề mục cho văn bản. Hãy tổ chức trang của bạn với các thẻ đề mục, là những thẻ chỉ dẫn cho trình duyệt hiển thị văn bản nằm giữa chúng ở cỡ chữ lớn hơn. Các thẻ này còn được sử dụng bởi các chương trình tìm kiếm tự động và các công cụ khác để xác định xem trang web của bạn là về cái gì và cách tổ chức trang. <h1> </h1> là đề mục lớn nhất, và bạn có thể tạo các đề mục nhỏ hơn cho tới <h6> </h6>. Hãy thử chúng trên trang của bạn:
    • <body>
    • <h1>Chào mừng đến với trang của tôi.</h1>
    • Tôi làm theo hướng dẫn wikiHow để viết một trang HTML.
    • <h3>Mục tiêu hôm nay của tôi:</h3>
    • <h5>Các mục tiêu đã hoàn thành:</h5>
    • Học cách sử dụng các đề mục.
    • <h5>Các mục tiêu chưa hoàn thành:</h5>
    • Học thêm các thẻ định dạng văn bản.
    • </body>
  3. Học thêm các thẻ định dạng văn bản. Bạn đã thấy thẻ “strong” (in đậm chữ) rồi, nhưng còn rất nhiều cách khác để định dạng văn bản của bạn. Hãy thử những thẻ này, hoặc với nhiều thẻ một lúc đối với cùng một chuỗi văn bản. Hãy luôn nhớ là thêm các thẻ kết thúc vào phía sau!
    • <strong>Văn bản quan trọng, được hiển thị in đậm trong trình duyệt. </strong>
    • <em>Văn bản nhấn mạnh, được hiển thị in nghiêng trong trình duyệt.</em>
    • <small>Văn bản nhỏ hơn bình thường một chút. Văn bản này sẽ tự động chỉnh cỡ nếu dùng trong một đề mục.[4] </small>
    • <del>Văn bản không còn thích hợp, được hiển thị với một đường gạch ngang thân chữ. </del>
    • <ins>Văn bản được chèn vào sau so với các văn bản khác, được hiển thị với đường gạch chân. </ins>
  4. Sắp xếp văn bản trên trang của bạn. Bạn có thể để ý rằng nhấn phím “enter” (xuống dòng) không đủ để cho văn bản hiển thị trên một dòng khác. Các thẻ này có thể giúp bạn tạo các đoạn văn và ngắt dòng, hoặc sắp xếp văn bản của bạn theo các cách khác:
    • <p> Viết tắt của "paragraph," (đoạn văn) thẻ này sẽ giữ toàn bộ văn bản nằm giữa các thẻ này trong một đoạn văn, và ngăn cách nó với văn bản bên trên và phía dưới nó. </p>
    • <br> Thẻ này sẽ tạo ra ngắt dòng. Đừng thêm thẻ kết thúc cho nó, vì nó không can thiệp vào bất cứ nội dung nào khác. Sử dụng thẻ này trong các bài thơ hay các dòng địa chỉ, chứ không phải để phân chia các đoạn văn.[5]
    • <pre>Nếu bạn cần hiển thị văn bản một cách rất chính xác, thẻ này sẽ thiết lập văn bản bên trong nó theo một phông chữ có độ rộng cố định (mỗi chữ cái có cùng một độ rộng), và cho phép bạn tạo các khoảng trống và ngắt dòng như bạn muốn cho việc soạn thảo thông thường thay vì phải dùng các thẻ.[6]</pre>
    • <blockquote>Thẻ này định nghĩa kiểu văn bản được trích dẫn lại từ một nguồn.</blockquote> Bạn có thể mô tả về nguồn sau đó với <cite>thẻ cite</cite>.
  5. Thêm văn bản chú thích không nhìn thấy được. Các thẻ chú thích không được hiển thị trên trang web. Chúng cho phép bạn tự ghi chú vào trong tài liệu HTML mà không ảnh hưởng tới nội dung. <!--- Viết chú thích của bạn bên trong thẻ. ---> Đừng thêm thẻ kết thúc.
    • Các thẻ mà đi một mình không kèm theo thẻ kết thúc được gọi là "các thẻ trống."
  6. Kết hợp chúng với nhau. Cách tốt nhất để ghi nhớ các thẻ này là dùng chúng trên trang web của bạn. Sau đây là một ví dụ sử dụng các thẻ ở các bước mà bạn đã học cho tới giờ. Hãy thử dự đoán xem chúng sẽ hiển thị ra sao trong trình duyệt, rồi sao chép chúng sang tài liệu của bạn và tìm hiểu.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>Trang HTML đầu tiên của tôi.</title>
    • </head>
    • <body>
    • <h1>Chào mừng tới trang web của tôi.</h1>
    • Hy vọng bạn sẽ thích trang này!<p><strong>Tôi làm nó chỉ để dành cho bạn.</strong>
    • <h2>Phần 1: Tôi đã khám phá HTML như thế nào</h2>
    • <!---Ghi chú: nhớ rằng "h1" là đề mục lớn hơn "h2"--->
    • Tôi đã học HTML được trong <del>một</del> <ins>hai</ins>giờ đồng hồ, nên giờ tôi là chuyên gia rồi.
    • </body>
    • </html>

Thêm các Liên kết và Hình ảnh[sửa]

  1. Tìm hiểu về các thuộc tính (attribute). Các thẻ có thể có thêm thông tin bổ sung viết bên trong chúng, được gọi là các thuộc tính. Các thuộc tính này thể hiện bằng các từ thêm vào bên trong chính các thẻ, dưới dạng tên thuộc tính="giá trị cụ thể". Ví dụ, bất kỳ thẻ HTML nào cũng có thể có thuộc tính tiêu đề:
    • <p title="Giới thiệu">Đoạn văn giới thiệu để ở đây.</p> đặt tiêu đề cho đoạn văn là "Giới thiệu," sẽ xuất hiện khi bạn rê chuột lên trên đoạn văn trong trang web.
  2. Liên kết tới trang web khác. Sử dụng thẻ <a> </a> để tạo một siêu liên kết tới một trang web bất kỳ nào khác. Chèn đường dẫn URL của trang web đó để liên kết tới thông qua thuộc tính href. Sau đây là một ví dụ liên kết tới trang web mà bạn đang đọc:
    • <a href="http://www.wikihow.com/Write-an-HTML-Page">Khách ghé thăm trang web của bạn có thể nhấn vào văn bản này để theo đường dẫn liên kết.</a>
  3. Thêm thuộc tính id cho thẻ. Một thuộc tính khác mà bất kỳ thẻ HTML nào cũng có thể sử dụng là yếu tố “id”. Trong bất kỳ thẻ nào, hãy viết id="vidu" hoặc sử dụng bất kỳ tên nào mà không chứa các khoảng trống.[7] Nó không tạo ra hiệu ứng nhìn thấy được nào cả, nhưng chúng ta sẽ sử dụng nó trong bước tiếp theo.
    • Ví dụ, thêm đoạn sau vào tài liệu của bạn: <p id="vidu">Đoạn văn này được dùng làm ví dụ để mô tả cách thuộc tính id hoạt động.</p>
  4. Liên kết tới một yếu tố có id nhất định. Giờ chúng ta có thể sử dụng thẻ siêu liên kết, <a> </a>, để liên kết tới một vị trí khác trên cùng một trang. Thay vì một URL, chúng ta sẽ sử dụng biểu tượng #, theo sau là giá trị id mà chúng ta muốn liên kết tới. Ví dụ, <a href="#vidu">Văn bản này sẽ liên tới đoạn văn với id là "vidu."</a>
    • Mọi giá trị HTML đều không phân biệt dạng chữ hoa/thường.[7] "#VIDU" và "#vidu" sẽ đều liên kết tới một vị trí.
    • Nếu trang của bạn đủ ngắn để hiển thị toàn bộ trang cùng lúc, bạn có thể sẽ không nhận thấy bất kỳ điều gì xảy ra khi nhấn vào liên kết trong trình duyệt. Thay đổi kích cỡ cửa sổ cho tới khi thanh cuộn xuất hiện, rồi thử lại lần nữa.
  5. Thêm ảnh. Thẻ <img> là một thẻ trống, nghĩa là không cần thẻ kết thúc. Tất cả thông tin trình duyệt cần để hiển thị ảnh sẽ được thêm vào bằng các thuộc tính.[8] Đây là một ví dụ để hiển thị biểu trưng của wikiHow, với mô tả cho mỗi thuộc tính ở phía sau:
    • <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="Biểu trưng wikiHow">
    • Thuộc tính src=" " cho trình duyệt biết vị trí bức ảnh. (Lưu ý việc đăng ảnh từ trang của người khác được coi là không đúng mực – và bức ảnh sẽ biến mất khi trang đó không còn hoạt động.)
    • Thuộc tính style=" " có thể làm được nhiều thứ, nhưng quan trọng nhất là nó được dùng để thiết lập độ rộng và độ cao của bức ảnh tính theo điểm ảnh. (Bạn cũng có thể dùng các thuộc tính riêng rẽ width=" " và height=" " để thay thế, nhưng điều này có thể dẫn tới các vấn đề thay đổi cỡ ảnh kỳ quặc nếu bạn sử dụng CSS.[9])
    • Thuộc tính alt=" " là một mô tả ngắn gọn cho bức ảnh mà người dùng sẽ thấy nếu ảnh tải không thành công. Đây được coi là một yêu cầu, vì nó được sử dụng cho các bộ đọc màn hình dành cho khách ghé thăm trang web mà bị mù.[9]

Tìm hiểu thêm Thêm và Đưa Trang Web của Bạn lên Mạng[sửa]

  1. Xác nhận HTML của bạn. Việc xác nhận HTML nhằm rà soát các lỗi trong mã của bạn. Nếu trang web của bạn không hiển thị đúng, việc xác nhận có thể giúp bạn tìm được lỗi gây nên vấn đề. Nó còn có thể chỉ cho bạn biết thêm về HTML qua việc xác định mã trông ổn khi hiển thị nhưng nó không còn được khuyên dùng vì những cập nhật mới trong tiêu chuẩn HTML. Sử dụng HTML không hợp lệ không khiến trang web của bạn trở nên vô dụng, nhưng có thể gây ra những vấn đề hoặc hiển thị không ổn định trên các trình duyệt khác nhau.
    • Hãy thử một dịch vụ xác nhận trực tuyến miễn phí từ W3C hoặc tìm kiếm một công cụ xác nhận HTML 5 khác trên mạng.
  2. Học thêm các thẻ và thuộc tính. Còn rất nhiều thẻ và thuộc tính HTML khác, và nhiều nơi để học chúng:
    • Hãy thử w3schools và HTML Dog để xem thêm nhiều bài hướng dẫn và các danh sách đầy đủ về các thẻ.
    • Tìm một trang web mà bạn thích hình thức của nó, rồi sử dụng chức năng “Xem mã nguồn trang” (View Page Source)của trình duyệt để tự xem lấy mã HTML. Sao chép nó vào tài liệu của bạn rồi nghiên cứu cách làm việc của nó.
    • Đọc các bài viết khác và tìm hiểu về cách tạo các bảng trong HTML, sử dụng các meta tag (thẻ miêu tả) để tăng khả năng được tìm thấy qua các công cụ tìm kiếm, hoặc sử dụng div (division – dùng để quy dịnh một vùng trên trang web) và span (span - dùng để quy định kiểu của phần tử text) để giúp tạo kiểu qua CSS.
  3. Đưa trang web của bạn lên mạng. Chọn một dịch vụ để đặt trang web của bạn, rồi bạn có thể tải lên bao nhiêu trang HTML tùy thích tới tên miền web cá nhân của bạn. Để làm điều này, bạn sẽ cần sử dụng phần mềm tải lên theo kiểu FTP, nhưng nhiều dịch vụ cho thuê đặt web cung cấp luôn cả dịch vụ này.
    • Khi liên kết tới các trang hoặc ảnh ở ngay trên trang của bạn, bạn sẽ cần sử dụng địa chỉ đầy đủ. Ví dụ, nếu tên miền của bạn là www.chuyengiahtmlsieudang.com, thì <a href="/nhatky/thuhai.html">văn bản nằm trong các thẻ này</a> sẽ liên kết tới địa chỉ "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
  4. Thêm kiểu với CSS. Nếu trang HTML của bạn nhìn đơn điệu một chút, hãy thử học CSS cơ bản để thêm màu sắc, các phông chữ khác nhau, và kiểm soát tốt hơn vị trí đặt các yếu tố. Liên kết một “stylesheet” (tầng định dạng) CSS tới trang HTML sẽ cho phép bạn tạo ra những thay đổi mạnh mẽ một cách nhanh chóng, tự động điều chỉnh kiểu của toàn bộ văn bản bên trong một thẻ nhất định. Bạn có thể nghịch một chút với tầng định dạng cơ bản ở đây, hoặc tìm tòi thêm với hướng dẫn chi tiết hơn ở Hướng dẫn về CSS của HTML Dog.
  5. Thêm JavaScript vào trang web của bạn. JavaScript là một ngôn ngữ lập trình dùng để thêm nhiều chức năng vào các trang HTML của bạn. Các lệnh JavaScript được chèn vào giữa các thẻ bắt đầu và kết thúc <script> </script>, và có thể dùng để thêm các nút bấm tương tác, tính toán các bài toán, và nhiều hơn nữa. Hãy tìm hiểu thêm ở các ví dụ của w3c.

Lời khuyên[sửa]

  • Khai báo doctype (Document Type Declaration - khai báo phiên bản HTML sử dụng) được dùng trong bài hướng dẫn này là "loose HTML 4.0.1 transitional" (kiểu HTML 4.0.1 chuyển tiếp không chặt chẽ), một định dạng dễ dàng cho người mới làm quen sử dụng.[10] Hãy dùng (<!DOCTYPE html>) thay thế để trình duyệt biên dịch nó theo định dạng HTML 5 chặt chẽ, là kiểu tiêu chuẩn được khuyên dùng (dù thường ít được dùng hơn).

Cảnh báo[sửa]

  • Mục đích của HTML là giữ nội dung theo định dạng toàn thể. Nó không kiểm soát việc trình diễn trang web của bạn, chẳng hạn như màu nền và vị trí chính xác của các yếu tố. Mặc dù vẫn có những thẻ cho phép bạn làm điều này nhưng bạn nên sử dụng CSS để tạo một trang web có khả năng kiểm soát và nhất quán hơn.

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

  • Một trình biên tập văn bản đơn giản, như NotePad hay TextEdit
  • Một trình duyệt web, ví dụ như Internet Explorer hay Mozilla Firefox
  • (Tùy chọn) Một trình biên tập HTML chẳng hạn như Adobe Dreamweaver, Aptana Studio hoặc Microsoft Expression Web

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

  1. ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
  2. ↑ http://htmldog.com/guides/html/beginner/gettingstarted/
  3. ↑ http://www.w3.org/QA/Tips/Doctype
  4. ↑ Các hưỡng dẫn về HTML
  5. ↑ http://www.w3schools.com/tags/tag_br.asp
  6. ↑ http://www.w3schools.com/tags/tag_pre.asp
  7. ↑ 7,0 7,1 http://www.w3schools.com/tags/att_global_id.asp
  8. ↑ http://htmldog.com/guides/html/beginner/images/
  9. ↑ 9,0 9,1 http://www.w3schools.com/html/html_images.asp
  10. ↑ http://www.htmlbasictutor.ca/doctype-declaration.htm
  • « Mới nhất
  • ‹ Mới hơn
  • Cũ hơn ›
Lấy từ “https://tusach.thuvienkhoahoc.com/index.php?title=Viết_một_trang_HTML&oldid=143258”