Tạo một trang web đơn giản với HTML

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

Ngày nay, bạn có thể tạo một website (trang mạng) mà không cần biết gì về HTML, tuy nhiên, dù sử dụng trình chỉnh sửa trang web nào thì bạn vẫn có thể gặp phải những vấn đề không tránh khỏi và cần một chút kiến thức về HTML để khắc phục điều đó. Có rất nhiều trang web thích hợp để bạn có thể tìm hiểu về HTML, nhưng bài viết này sẽ hướng dẫn bạn đôi điều cơ bản để tạo một website bằng cách sử dụng HTML. Với những hướng dẫn cơ bản này, bạn sẽ sớm tạo được một trang web từ đầu - dù không chuyên nghiệp!

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

Sử dụng HTML[sửa]

  1. Hiểu HTML là gì. HTML (Hyper Text Markup Language) là ngôn ngữ mã hóa tạo nên các trang web, nó như bộ khung của mọi trang web tồn tại. Để biết “khung xương” này trông ra sao, mở Internet Explorer lên, điều hướng đến bất kỳ trang web nào, nhấp chuột phải vào trang web và chọn "View Source" (Xem Nguồn). Bạn sẽ thấy một trang mã, đây chính là HTML. Trình duyệt sẽ nhận biết mã này và chuyển thể nó thành một trang web thân thiện với chúng ta.
  2. Tạo trang web đầu tay của mình đơn giản hết mức có thể. Nếu không, bạn sẽ sớm bị choáng ngợp bởi những cú pháp và ngôn ngữ lập trình.
    • Điều quan trọng cần nhớ là bạn phải viết nội dung của mình giữa thẻ HTML mở và đóng. Đây là một thẻ mở: <___> . Còn đây là một thẻ đóng: </___> . Cuối cùng, phần ___ sẽ được thay bằng mã.
  3. Đi đến "Start" > "Programs" (Chương trình) > "Accessories" (Phụ kiện) > "Notepad". Sẽ dễ hơn nữa nếu bạn sử dụng Notepad++ vì khi bạn chọn ngôn ngữ HTML, tất cả những gì bạn viết sẽ tự động được hiển thị theo màu sắc khác nhau – điều này giúp bạn dễ dàng sửa các lỗi có thể.
  4. Cho trình duyệt biết loại ngôn ngữ mà bạn đang sử dụng. Ở dòng đầu tiên, soạn <!DOCTYPE>, thẻ này luôn phải là thẻ đầu tiên trong mã của bạn. Tiếp đến dòng thứ hai, thêm <html>. Đây cũng là thẻ thứ hai bạn cần viết để cho máy tính biết là bạn đang bắt đầu tạo một trang web. Trang của bạn cũng cần được đóng lại, vì thế, ở cuối tài liệu bạn viết: </html>. Thẻ này sẽ kết thúc trang web.
  5. Thêm đề mục cho trang như hình minh họa.
  6. Đặt cho trang web một tiêu đề. Tiêu đề rất quan trọng vì nó cho người dùng biết rằng trang của bạn nói về điều gì. Ngoài ra, khi người dùng đánh dấu trang của bạn, tiêu đề ấy sẽ là những gì hiện thị trong danh sách trang đánh dấu của họ. Mã HTML của tiêu đề là <title>. Đóng mã lại ở cuối tiêu đề bằng cách soạn </title>. Tiêu đề sẽ hiển thị trên tab chứ không hiển thị trên trang web thực.
  7. Tiến đến phần thân của trang. Gõ thẻ <body> để mở thân bài. Sau đó, đóng thân bài lại bằng thẻ </body>. Thông tin chủ yếu của trang web sẽ nằm giữa thẻ <body> và </body>.
    • Để tạo màu nền cho trang web, bạn có thể thêm phong cách vào phần thân bài. Để thêm màu nền, nhập thẻ <body style="background-color:silver">. Bạn có thể thử một màu khác (bằng tiếng Anh, thay cho “silver” – bạc) hay thậm chí sử dụng số hex (các số hay chuỗi số dưới dạng hệ đếm thập lục phân). Những từ trong dấu ngoặc kép chính là "thuộc tính" và chúng phải luôn được bao quanh bởi dấu ngoặc kép!
  8. Viết một vài đoạn văn bản giữa thẻ thân bài.
    • Để làm cho văn bản xuống dòng (giống như khi nhấn phím "Enter" trên bàn phím), soạn <br><br>
    • Bạn muốn thêm mã “marquee”, hay còn được biết như một lệnh làm cho chữ di chuyển dọc trên màn hình? Chỉ cần soạn <marquee>VĂN BẢN</marquee>.
  9. Thêm một số hình ảnh. Nếu bạn muốn thêm hình ảnh từ Internet vào trang web của mình, sử dụng mã HTML hình ảnh <img src="URL"> . Thẻ đóng là dấu chấm: . Tuy nhiên, với hình ảnh thì thẻ đóng là không bắt buộc.
  10. Kiểm tra để đảm bảo toàn bộ mã của bạn đã được đóng. Trang web của bạn sẽ trông gần giống như sau:

    <0062r>

    <title>Trang web của tôi</title>
    <body bgcolor="yellow">
    Tôi yêu wikiHow vì
    <marquee>đây là trang web tốt nhất trên thế giới!</marquee>
    <img src="http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>



  11. Lưu thành quả của bạn. Chọn tác vụ "save as" (lưu dưới dạng), đặt tên tệp với phần mở rộng là .html (ví dụ: "wikihow.html") và chọn "all files" (tất cả tập tin) hay "text" (văn bản) bên dưới loại tệp. Nếu thiếu một trong hai thao tác trên, trang web của bạn sẽ không thể thực thi. Sau đó, đi đến nơi mà bạn đã lưu tệp, nhấp đúp vào tệp, lúc này trình duyệt mặc định sẽ mở trang web của riêng bạn lên ngay.

Lời khuyên[sửa]

  • Một trong những ứng dụng viết HTML tốt là Espresso: nó đơn giản hóa việc viết mã bằng cách cung cấp nhiều lối tắt khác nhau và bạn có thể xem thử trang web của mình bằng tính năng "Preview" (xem trước) mà không cần phải luôn thay đổi các thẻ từ .html thành .txt!  !
  • Để tạo những trang web nâng cao hơn, sử dụng một trình chỉnh sửa web, chẳng hạn như Microsoft Expression Web.
  • Bạn cũng có thể dùng thử Adobe Dreamweaver. Khi mã bạn viết có vấn đề, nó sẽ cho bạn biết vấn đề hiện có và hướng dẫn cách khắc phục.
  • Bạn có thể tìm hiểu thêm về vấn đề này trên mạng. Tìm trên Google để tham khảo thêm những hướng dẫn về mã HTML.
  • Bài viết này chỉ hướng dẫn bạn cách tạo một trang web. Tham khảo thêm những bài viết wikiHow liên quan khác bên dưới để có thêm thông tin về cách công khai trang web của bạn.
  • Thẻ đóng không thể được sử dụng một cách tùy tiện. Thẻ "cuối cùng" "được mở" sẽ là thẻ "đầu tiên" được "đóng." Ví dụ: <tag1><tag2> nội dung </tag2></tag1>
  • Đây là một ví dụ về vị trí không đúng của các thẻ <tag1> <tag2> câu lệnh </tag1></tag2>
  • Nhiều người còn có thể thiết kế trang web “động”. Hãy luyện tập các kỹ năng của bạn và bạn sẽ sớm làm được như họ!
  • Nếu trang web của bạn không hoạt động, sao chép và dán đoạn mã HTML trong bài viết và lưu như hướng dẫn, sau đó xem thử trang. Làm tương tự với những đoạn mã có sẵn như một cách để bạn luyện tập.
  • Khi bạn mở một thẻ, bạn phải đóng nó lại trừ khi đó là loại thẻ đặc biệt không cần đóng (chẳng hạn như <img> hay <hr>). Tuy nhiên, nếu nghi ngờ, bạn cứ đóng tất cả thẻ.

Cảnh báo[sửa]

  • Đảm bảo rằng bạn nhập đuôi ".html" hay ".htm" một cách thủ công vào cuối tên tệp và chọn "all files" hoặc "txt" bên dưới loại tệp. Trang web sẽ không hoạt động nếu bạn bỏ qua một trong hai thao tác này.
  • Thẻ <marquee> không phải là một thẻ html chính thống được phân phối bởi W3C (World Wide Web Consortium – công ty lập ra các chuẩn cho Internet), vì thế, nó sẽ không thể hoạt động trên tất cả trình duyệt. Thẻ này được tạo ra và hỗ trợ lần đầu bởi Internet Explorer, hiện nay nó vẫn nhận được sự hỗ trợ kế thừa từ một số trình duyệt khác.
  • Chắc rằng bạn lưu trữ hình ảnh của riêng mình ở nơi khác để không phải sử dụng băng thông của máy chủ lưu trữ hiện tại. Bạn có thể lưu trữ hình ảnh của mình lên các trang web như Photobucket, Flickr hay ImageShack.
  • Thuộc tính "bgcolor" đã lỗi thời. Cách đúng để thay đổi màu nền của các thành phần là sử dụng ngôn ngữ CSS.

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

  • Một chương trình soạn thảo văn bản, chẳng hạn như Notepad (trên Windows) hay Textedit (trên Mac).
  • Một trình duyệt, chẳng hạn như Mozilla Firefox hay Safari.
  • Máy tính kết nối internet.
  • Trình quản lý tệp, chẳng hạn như Windows Explorer (tùy chọn)
  • Trang web lưu trữ hình ảnh, chẳng hạn như Photobucket hay Flickr