Hướng dẫn /t html - / t html

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học HTML/HTML5
• Cách tạo và hiển thị một file HTML

Cách tạo file HTML

Trước tiên ta tạo một file index.txt đơn giản bằng notepad trong Window với nội dung sau:index.txt đơn giản bằng notepad trong Window với nội dung sau:

Hello

Sau đó "Save As" lại file với định dạng mới là .html

Ngoài cách tạo đơn giản trên, chúng ta cũng có thể tạo file HTML trực tiếp thông qua một số ứng dụng như: notepad++, Dreamweaver, ...

Cách hiển thị file HTML

Với cách trên ta đã tạo xong file index.html, để xem nội dung file này ta có thể double click vào file là có thể xem được, nội dung khi file khi chạy trên trình duyệt sẽ hiển thị như sau:index.html, để xem nội dung file này ta có thể double click vào file là có thể xem được, nội dung khi file khi chạy trên trình duyệt sẽ hiển thị như sau:

1] Giới thiệu công cụ soạn thảo mã HTML

- Ngày nay có rất nhiều công cụ hiện đại hỗ trợ việc soạn thảo mã HTML, ví dụ như: Adobe Dreamweaver, CoffeeCup, TextWrangler, Sublime Text, . . . . Tuy nhiên, các công cụ này thường tương đối phức tạp, chúng chỉ thích hợp với những người đã thông thạo về lập trình web, còn đối với những người mới học HTML giống như chúng ta thì tốt nhất là nên dùng các công cụ soạn thảo thuần văn bản, một mặt nó sẽ giúp ta rèn luyện kỹ năng gõ mã lệnh, mặt khác chúng ta có thể ghi nhớ được tên của từng loại thẻ.

- Mà nói đến trình soạn thảo thuần văn bản thì tôi xin giới thiệu đến các bạn một công cụ có sẵn trên máy tính cài hệ điều hành Windows, đó chính là Notepad [tùy vào phiên bản mà cách mở sẽ khác nhau, nhưng nếu các bạn đang dùng Windows 7 thì các bạn có thể mở bằng cách vào Start rồi gõ từ khóa Notepad]

2] Cách tạo một tập tin HTML

- Để tạo một tập tin HTML thì chúng ta thực hiện lần lượt các bước như sau:

- Bước 1: Mở trình soạn thảo thuần văn bản Notepad lên.

- Bước 2: Nhập những nội dung mà các bạn muốn chúng được hiển thị trên trang web.

- Bước 3: Lưu tập tin.

1. Bấm vào nút File rồi chọn Save As.File rồi chọn Save As.
2. Chọn thư mục muốn lưu tập tin.
3. Đặt tên cho tập tin.
4. Chỗ Encoding chọn UTF-8.UTF-8.
5. Cuối cùng, bấm nút Save để lưu lại.Save để lưu lại.

3] Cách chạy [thực thi] một tập tin HTML

- Thực ra thì cách chạy một tập tin HTML khá là đơn giản, chúng ta có thể di chuyển thẳng đến thư mục chứa tập tin, sau đó nhấp chuột phải vào nó rồi chọn một trình duyệt để mở.

- Hoặc nhấp vào thanh địa chỉ của trình duyệt rồi bấm tổ hợp hợp phím Ctrl + O

- Sau đó, chọn tập tin HTML mà mình muốn mở rồi bấm "Open"

- Nếu trình duyệt hiển thị giống như hình bên dưới thì tức là các bạn đã làm thành công.

Tải về bản PDF

Tải về bản PDF

Đây là bài viết hướng dẫn cách tạo một trang web đơn giản với HTML [ngôn ngữ đánh dấu siêu văn bản]. HTML là một trong những thành phần cốt lõi của mạng lưới toàn cầu World Wide Web và tạo nên cấu trúc của các trang web. Sau khi tạo trang web, bạn có thể lưu nó dưới dạng văn bản HTML và xem trên trình duyệt web. Việc tạo trang HTML được thực hiện bằng cách sử dụng chương trình soạn thảo văn bản cơ bản trên máy tính Windows và Mac.

1. 1

   Mở chương trình soạn thảo văn bản. Bạn có thể dùng Notepad hoặc Notepad++ trên máy tính sử dụng hệ điều hành Windows, TextEdit trên hệ điều hành macOS và Text trên hệ điều hành ChromeOS: Bạn có thể dùng Notepad hoặc Notepad++ trên máy tính sử dụng hệ điều hành Windows, TextEdit trên hệ điều hành macOS và Text trên hệ điều hành ChromeOS:

2. 2

   Nhập và ấn ↵ Enter. Thao tác này cho trình duyệt web biết đây là văn bản HTML.[1]↵ Enter. Thao tác này cho trình duyệt web biết đây là văn bản HTML.[1]

3. 3

   Nhập và ấn ↵ Enter. Đây là thẻ mở đầu mã HTML. ↵ Enter. Đây là thẻ mở đầu mã HTML.

4. 4

   Nhập và ấn ↵ Enter. Thẻ này mở phần mở đầu của HTML - phần thông tin mở đầu HTML thường không hiển thị trên trang web. Thông tin này có thể bao gồm tiêu đề, siêu dữ liệu, các trang phong cách CSS và ngôn ngữ kịch bản khác. [2]↵ Enter. Thẻ này mở phần mở đầu của HTML - phần thông tin mở đầu HTML thường không hiển thị trên trang web. Thông tin này có thể bao gồm tiêu đề, siêu dữ liệu, các trang phong cách CSS và ngôn ngữ kịch bản khác. [2]

5. 5

   Nhập . Đây là thẻ thêm tiêu đề vào trang. Đây là thẻ thêm tiêu đề vào trang.

6. 6

   Nhập tiêu đề cho trang. Bạn có thể đặt tiêu đề bất kỳ cho trang web của mình. Bạn có thể đặt tiêu đề bất kỳ cho trang web của mình.

7. 7

   Nhập và ấn ↵ Enter. Đây là thẻ đóng thẻ tiêu đề. ↵ Enter. Đây là thẻ đóng thẻ tiêu đề.

8. 8

   Nhập và ấn ↵ Enter. Đây là thẻ đóng phần mở đầu. Mã HTML của bạn sẽ trông giống như sau: ↵ Enter. Đây là thẻ đóng phần mở đầu. Mã HTML của bạn sẽ trông giống như sau:

   
   
   
   Trang web của tôi
   
   

   Quảng cáo

1. 1

   Lời khuyên Đây là thẻ mở phần thân của văn bản HTML. Mọi thứ được nhập trong phần thân HTML đều hiển thị trên trang web.

2. 2

   Các thẻ phải luôn được đóng với nội dung giống hệt phần mở đầu của thẻ. Ví dụ, thẻ được đóng bằng cách nhập . Đây là thẻ thêm đề mục vào văn bản HTML. Đề mục là dòng chữ to in đậm thường hiển thị ở phần đầu của văn bản HTML.

3. 3

   Bạn có thể thêm dòng chữ chạy vào trang web bằng cách sử dụng thẻ , nhưng một số trình duyệt có thể không nhận diện được thẻ này. Bạn có thể nhập tiêu đề trang hoặc lời chào.

4. 4

   Nhiều người sử dụng Notepad++ để viết và biên dịch mã.↵ Enter. Đây là thẻ đóng đề mục.

   • Nếu muốn đặt ảnh ở giữa trang, bạn có thể nhập

     Chào mừng bạn đến với trang web của tôi!
     Tôi là Nam!
     Hi vọng bạn sẽ thích trang web này!
     

     0 sau tên của ảnh trong thẻ img [ví dụ:

     Chào mừng bạn đến với trang web của tôi!
     Tôi là Nam!
     Hi vọng bạn sẽ thích trang web này!
     

     1].

     Chào mừng bạn đến với trang web của tôi!
     Tôi là Nam!
     Hi vọng bạn sẽ thích trang web này!
     

   • Cảnh báo

5. 5

   Tốt nhất bạn nên lưu hình ảnh trên Imgur hoặc trang tương tự nếu muốn thêm ảnh vào trang web của mình. Đăng ảnh của người khác có thể là hành động vi phạm bản quyền. Đây là thẻ mở đoạn văn bản. Đoạn văn bản được dùng để hiển thị nội dung với cỡ chữ thường.

6. 6

   Về bài wikiHow này Bạn có thể nhập phần mô tả trang web hoặc bất kỳ nội dung nào mà bạn muốn chia sẻ.

7. 7

   Trang này đã được đọc 96.071 lần.↵ Enter. Đây là thẻ đóng đoạn văn bản. Sau đây là ví dụ của đoạn văn bản trong HTML:

   Đây là đoạn nội dung của tôi.
   

   • Bài viết này đã giúp ích cho bạn?
   • Tải về bản PDF
   • Bạn có thể thêm kiểu chữ in đậm, in nghiêng và định dạng văn bản khác bằng cách sử dụng HTML. Sau đây là ví dụ về cách bạn thêm định dạng văn bản bằng thẻ HTML:[3]

     Chữ in đậm
     Chữ in nghiêng
     Chữ gạch dưới
     Chỉ số dưới
     Chỉ số trên
     

   • Nếu bạn sử dụng kiểu chữ in đậm và in nghiêng để nhấn mạnh thay vì chỉ tạo kiểu, hãy dùng thẻ và thay cho và . Thao tác này làm cho trang web trở nên dễ hiểu hơn khi bạn sử dụng các công nghệ như chương trình đọc màn hình [4] hoặc chế độ đọc có trên một số trình duyệt[5].

   Quảng cáo

1. 1

   Thêm hình ảnh vào trang. Bạn có thể thêm hình ảnh vào HTML bằng các bước sau: Bạn có thể thêm hình ảnh vào HTML bằng các bước sau:

   • Nhập
   • Sao chép và dán đường dẫn ảnh vào dấu ngoặc kép ngay sau dấu "=".
   • Nhập > sau đường dẫn của ảnh để đóng thẻ ảnh. Ví dụ, nếu đường dẫn của ảnh là "//www.mypicture.com/lake", bạn sẽ viết mã sau:

2. 2

   Liên kết với trang khác. Sau đây là các bước thêm liên kết vào HTML: Sau đây là các bước thêm liên kết vào HTML:

   • Nhập
   • Sao chép và dán đường dẫn ảnh vào dấu ngoặc kép ngay sau dấu "=".
   • Nhập > sau đường dẫn của ảnh để đóng thẻ ảnh. Ví dụ, nếu đường dẫn của ảnh là "//www.mypicture.com/lake", bạn sẽ viết mã sau:
   • Liên kết với trang khác. Sau đây là các bước thêm liên kết vào HTML:
   • Sao chép và dán đường dẫn URL vào dấu ngoặc kép ngay sau dấu "=".

     Facebook.
     

3. 3

   Nhập > sau đường dẫn URL để đóng thẻ đường dẫn trong HTML. Bạn có thể thêm đường kẻ ngang bằng cách nhập
   vào HTML. Thao tác này tạo đường kẻ ngang được dùng để phân cách các phần của trang.

   Quảng cáo

1. 1

   Thêm hình ảnh vào trang. Bạn có thể thêm hình ảnh vào HTML bằng các bước sau: Tổ chức World Wide Web Consortium [gọi tắt là W3C] quản lý danh sách màu chính thức và bạn có thể xem tại //www.w3.org/wiki/CSS/Properties/color/keywords. Mỗi màu có tên chính thức với mã thập lục phân 6 chữ số, và một giá trị thập phân. Bạn có thể dùng giá trị bất kỳ để thêm màu cho các thành phần của trang web. Với ví dụ này, chúng ta sẽ sử dụng tên màu chính thức.

2. 2

   Nhập Bạn sẽ thực hiện việc này bằng cách thêm style vào thẻ. Giả sử như bạn muốn trang có màu nền lavender, hãy nhập như sau:

   • Sao chép và dán đường dẫn ảnh vào dấu ngoặc kép ngay sau dấu "=".

3. 3

   Nhập > sau đường dẫn của ảnh để đóng thẻ ảnh. Ví dụ, nếu đường dẫn của ảnh là "//www.mypicture.com/lake", bạn sẽ viết mã sau: Bạn có thể dùng style để chỉ định màu muốn tạo cho toàn bộ chữ trong một thẻ nào đó. Ví dụ, bạn muốn chữ trong thẻ

   có màu midnightblue:

   • Liên kết với trang khác. Sau đây là các bước thêm liên kết vào HTML:
   • Sao chép và dán đường dẫn URL vào dấu ngoặc kép ngay sau dấu "=".

4. 4

   Nhập > sau đường dẫn URL để đóng thẻ đường dẫn trong HTML. Bạn có thể tạo màu nền cho các thẻ khác tương tự như cách bạn tạo màu nền cho thẻ trong phần thân của trang. Ví dụ, nếu bạn muốn thẻ

   có màu lightgrey, và tạo màu lightskyblue cho đề mục H1, hãy nhập mã sau:

   • Liên kết với trang khác. Sau đây là các bước thêm liên kết vào HTML:
   • Liên kết với trang khác. Sau đây là các bước thêm liên kết vào HTML:

   Quảng cáo

1. 1

   Sao chép và dán đường dẫn URL vào dấu ngoặc kép ngay sau dấu "=". Sau khi bạn hoàn tất việc thêm nội dung, hình ảnh và các thành phần khác vào phần thân của văn bản HTML, hãy thêm thẻ này vào cuối văn bản HTML để đóng phần thân của văn bản.

2. 2

   Nhập > sau đường dẫn URL để đóng thẻ đường dẫn trong HTML. Thẻ này cần được nhập bên dưới thẻ đóng phần thân của HTML ở cuối văn bản. Đây là cách cho trình duyệt biết không còn mã HTML sau thẻ này. Toàn bộ văn bản HTML của bạn sẽ trông giống như sau:

   
   
   
   
   wikiHow Fan Page
   
   
   
   
   Chào mừng bạn đến với trang của tôi!
   Đây là fan page của wikiHow. Hãy cứ thoải mái khám phá!
   
   Ngày quan trọng
   15/01/2019 - Sinh nhật wikiHow
   
   Liên kết
   Đây là đường dẫn đến wikiHow: wikiHow
   
   
   
   

   Quảng cáo

1. 1

   Nhập tên cho đường dẫn ngay sau dấu ngoặc đóng. Nhấp vào trình đơn Format [Định dạng] ở phía trên màn hình, rồi nhấp vào Make Plain Text [Tạo văn bản thuần túy] trong trình đơn đang hiển thị.

   • Nhập sau tên đường dẫn để đóng đường dẫn HTML.[6] Sau đây là ví dụ của đường dẫn đến Facebook:

2. 2

   Thêm đường kẻ ngang vào HTML. Bạn có thể thêm đường kẻ ngang bằng cách nhập vào HTML. Thao tác này tạo đường kẻ ngang được dùng để phân cách các phần của trang. File [Tệp]. Đây là lựa chọn trong thanh trình đơn ở phía trên màn hình.

3. 3

   Xem danh sách tên và mã màu chính thức của HTML. Tổ chức World Wide Web Consortium [gọi tắt là W3C] quản lý danh sách màu chính thức và bạn có thể xem tại //www.w3.org/wiki/CSS/Properties/color/keywords. Mỗi màu có tên chính thức với mã thập lục phân 6 chữ số, và một giá trị thập phân. Bạn có thể dùng giá trị bất kỳ để thêm màu cho các thành phần của trang web. Với ví dụ này, chúng ta sẽ sử dụng tên màu chính thức. Save as [Lưu dưới dạng]. Lựa chọn này có trong trình đơn "File" đang hiển thị.

   • Thiết lập màu nền trong thẻ . Bạn sẽ thực hiện việc này bằng cách thêm style vào thẻ. Giả sử như bạn muốn trang có màu nền lavender, hãy nhập như sau: Ctrl+S [trên Windows] hoặc ⌘ Command+S [trên Mac].

4. 4

   Sao chép và dán đường dẫn URL vào dấu ngoặc kép ngay sau dấu "=". Nhập tên bất kỳ cho văn bản vào trường "File name" [Tên tập tin] trên Windows hoặc "Name" [Tên] trên Mac.

5. 5

   Tạo màu chữ cho mọi thẻ. Bạn có thể dùng style để chỉ định màu muốn tạo cho toàn bộ chữ trong một thẻ nào đó. Ví dụ, bạn muốn chữ trong thẻ có màu midnightblue: Bạn cần chuyển tập tin văn bản thành tập tin HTML. Sau đây là các bước thay đổi định dạng tập tin:

   • Nhập tên cho đường dẫn ngay sau dấu ngoặc đóng. All Files [Tất cả tập tin], và nhập .html vào sau tên tập tin.
   • Sự thay đổi màu sắc chỉ áp dụng cho chữ trong thẻ . Nếu muốn tạo thêm thẻ ở bên dưới có màu midnightblue, bạn cũng cần thêm style vào thẻ đó.
   • Tạo màu nền cho đề mục hoặc đoạn. Bạn có thể tạo màu nền cho các thẻ khác tương tự như cách bạn tạo màu nền cho thẻ trong phần thân của trang. Ví dụ, nếu bạn muốn thẻ có màu lightgrey, và tạo màu lightskyblue cho đề mục H1, hãy nhập mã sau:

6. 6

   Nhập để đóng phần thân của trang. Sau khi bạn hoàn tất việc thêm nội dung, hình ảnh và các thành phần khác vào phần thân của văn bản HTML, hãy thêm thẻ này vào cuối văn bản HTML để đóng phần thân của văn bản. Save [Lưu]. Đây là nút ở bên dưới cửa sổ. Thao tác này sẽ tạo tập tin HTML.

   • Nhập để đóng văn bản HTML. Thẻ này cần được nhập bên dưới thẻ đóng phần thân của HTML ở cuối văn bản. Đây là cách cho trình duyệt biết không còn mã HTML sau thẻ này. Toàn bộ văn bản HTML của bạn sẽ trông giống như sau:

7. 7

   Chuyển đổi văn bản thành định dạng văn bản thuần túy [chỉ dành cho người dùng Mac]. Nhấp vào trình đơn Format [Định dạng] ở phía trên màn hình, rồi nhấp vào Make Plain Text [Tạo văn bản thuần túy] trong trình đơn đang hiển thị. Đã đến lúc mở tập tin HTML trong trình duyệt để bạn có thể xem trang web của mình.

8. 8

   Bước này không cần thiết và không thể thực hiện được trên Windows. Trong hầu hết trường hợp, bạn có thể nhấp đúp vào văn bản HTML để thực hiện việc này. Nếu việc nhấp đúp vào văn bản bị lỗi, bạn sẽ thực hiện như sau:

   • Nhấp vào File [Tệp]. Đây là lựa chọn trong thanh trình đơn ở phía trên màn hình. Open with [Mở bằng] và nhấp vào trình duyệt mà bạn muốn dùng.
   • Mac - Nhấp vào văn bản một lần, nhấp vào File, chọn Open With và nhấp vào trình duyệt mà bạn muốn dùng.File, chọn Open With và nhấp vào trình duyệt mà bạn muốn dùng.

9. 9

   Chỉnh sửa văn bản HTML nếu cần. Có thể bạn sẽ nhận thấy lỗi trên trang HTML. Để sửa lỗi, bạn cần chỉnh sửa nội dung của văn bản HTML: Có thể bạn sẽ nhận thấy lỗi trên trang HTML. Để sửa lỗi, bạn cần chỉnh sửa nội dung của văn bản HTML:

   • Trên Windows, bạn có thể nhấp phải vào văn bản và nhấp vào Edit [Chỉnh sửa] trong trình đơn đang hiển thị [nếu bạn đã cài đặt Notepad++, lựa chọn này sẽ là Edit with Notepad++ [Chỉnh sửa bằng Notepad++]].Edit [Chỉnh sửa] trong trình đơn đang hiển thị [nếu bạn đã cài đặt Notepad++, lựa chọn này sẽ là Edit with Notepad++ [Chỉnh sửa bằng Notepad++]].
   • Trên Mac, bạn sẽ nhấp chọn văn bản, rồi nhấp vào File, chọn Open With, và nhấp vào TextEdit. Bạn cũng có thể kéo văn bản vào TextEdit.File, chọn Open With, và nhấp vào TextEdit. Bạn cũng có thể kéo văn bản vào TextEdit.
   • Trên Chromebook, hãy đóng ứng dụng Text, mở Files, tìm và nhấp vào tập tin của bạn.

   Quảng cáo

Lời khuyên

• Các thẻ phải luôn được đóng với nội dung giống hệt phần mở đầu của thẻ. Ví dụ, thẻ được đóng bằng cách nhập .
• Bạn có thể thêm dòng chữ chạy vào trang web bằng cách sử dụng thẻ , nhưng một số trình duyệt có thể không nhận diện được thẻ này.
• Nhiều người sử dụng Notepad++ để viết và biên dịch mã.
• Nếu muốn đặt ảnh ở giữa trang, bạn có thể nhập

  Chào mừng bạn đến với trang web của tôi!
  Tôi là Nam!
  Hi vọng bạn sẽ thích trang web này!
  

  0 sau tên của ảnh trong thẻ img [ví dụ:

  Chào mừng bạn đến với trang web của tôi!
  Tôi là Nam!
  Hi vọng bạn sẽ thích trang web này!
  

  1].img [ví dụ:

  Chào mừng bạn đến với trang web của tôi!
  Tôi là Nam!
  Hi vọng bạn sẽ thích trang web này!
  

  1].

Cảnh báo

• Tốt nhất bạn nên lưu hình ảnh trên Imgur hoặc trang tương tự nếu muốn thêm ảnh vào trang web của mình. Đăng ảnh của người khác có thể là hành động vi phạm bản quyền.

Về bài wikiHow này

Trang này đã được đọc 96.071 lần.

Bài viết này đã giúp ích cho bạn?