Công Nghệ

Viết một trang HTML Tainghetrothinh

Posted on by congnghe

Đây là bài đăng chỉ dẫn cách tạo trang web bằng HTML. Một vài yếu tố tạo nên trang web là chữ, đường dẫn và hình ảnh.

những bước

Phương pháp số 1 Chuẩn bị trước khi viết

1Mở chương trình chỉnh sửa văn bản cơ bản. Trên máy tính Windows, chương trình chỉnh sửa văn bản cơ bản mặc định là Notepad; còn người dùng Mac có thể dùng chương trình TextEdit: Windows – Nhấp vào Start{“smallUrl”:”https:\/\/www.TaiNgheTroThinh.com\/images_en\/0\/07\/Windowsstart.png”,”bigUrl”:”https:\/\/www.TaiNgheTroThinh.com\/images\/thumb\/0\/07\/Windowsstart.png\/30px-Windowsstart.png”,”smallWidth”:460,”smallHeight”:460,”bigWidth”:30,”bigHeight”:30,”licensing”:”<div class=\”mw-parser-output\”><\/div>”}, nhập notepad, và nhấp Notepad.Mac – Nhấp vào Spotlight{“smallUrl”:”https:\/\/www.TaiNgheTroThinh.com\/images_en\/e\/ea\/Macspotlight.png”,”bigUrl”:”https:\/\/www.TaiNgheTroThinh.com\/images\/thumb\/e\/ea\/Macspotlight.png\/30px-Macspotlight.png”,”smallWidth”:460,”smallHeight”:460,”bigWidth”:30,”bigHeight”:30,”licensing”:”<div class=\”mw-parser-output\”><\/div>”}, nhập textedit và nhấp vào TextEdit trong kết quả tìm kiếm.2Tìm hiểu thẻ HTML. Khi viết trong HTML, những yếu tố khác của trang được xác định bằng thẻ mở (<>) và thẻ đóng (</>), với phần nội dung của yếu tố được đặt trong những thẻ. Ví dụ, một đoạn văn bản được tạo bằng cách nhập thẻ mở đoạn (<p>), nhập nội dung mà bạn muốn dùng, rồi nhập thẻ đóng đoạn </p>.Mỗi dòng mã phải được nhập trên dòng riêng, nên bạn sẽ ấn ↵ Enter sau khi nhập mỗi dòng mã.3Xem lại định dạng HTML cơ bản. Để tạo văn bản HTML bất kỳ, bạn sẽ mở đầu văn bản với thẻ “document type” (loại văn bản) (<!DOCTYPE html>), thẻ HTML (<html>), và thẻ BODY (thân) (<body>). Bạn cũng sẽ kết thúc văn bản bằng thẻ đóng BODY và thẻ đóng HTML. Ví dụ: <!DOCTYPE html><html><body></body></html>4Cân nhắc học CSS. Đây là loại ngôn ngữ bổ trợ cho HTML; chuyên về định dạng trang (chẳng hạn như màu sắc, căn giữa cho chữ, v.v.) và những yếu tố hình ảnh khác của trang web

Phương pháp số 2 Tạo trang văn bản

1Thiết lập văn bản. Thêm mã HTML mở đầu của văn bản: <!DOCTYPE html><html><body>2Tạo tiêu đề của trang web. Phần này còn được gọi là “head” (phần mở đầu) và nội dung tại đây sẽ hiển thị trên thẻ của trình duyệt. Hãy thêm đoạn mã sau vào văn bản để tạo tiêu đề, và nhớ thay “Tiêu đề của bạn” bằng nội dung mà bạn thích: <head><title>Tiêu đề của bạn</title></head>3Thêm đề mục. Nhập <h1>Nội dung</h1> và ấn ↵ Enter. Bạn có thể thêm nội dung bất kỳ vào giữa thẻ <h1> và </h1>. Bạn có thể bố trí nhiều đề mục trên trang. Hãy tăng số thứ tự cho mỗi đề mục mà bạn dùng sau đề mục đầu tiên (ví dụ: đề mục thứ hai sẽ có mã <h2></h2>).4Tạo đoạn văn bản. Nhập <p>Nội dung</p> và ấn ↵ Enter; đừng quên thay “Nội dung” bằng nội dung của đoạn cần tạo. Bạn có thể đặt mỗi dòng văn bản trên dòng mới bằng cách nhập lại thẻ <p></p> cho mỗi dòng văn bản.5Lặp lại quy trình tạo đề mục và đoạn văn bản. Bạn có thể thêm nhiều đề mục và đoạn văn bản vào trang web theo ý thích. 6Thêm ngắt dòng cho trang. Nhập <br>Nội dung</br> và ấn ↵ Enter. Thao tác này sẽ tạo hiệu ứng ngắt dòng giữa những đoạn văn bản nếu bạn muốn phân cách những phần nội dung. 7Định dạng nội dung của đoạn văn bản. Bạn có thể dùng thêm nhiều thẻ khác bên trong thẻ <p></p> (ví dụ: <p><em></em></p>) để tạo định dạng: <em>nội dung</em> – Tạo chữ in nghiêng.<strong>nội dung</strong> – Tạo chữ in đậm.<ins>nội dung</ins> – Tạo chữ được gạch dưới.<del>nội dung</del> – Tạo chữ được gạch ngang.<small>nội dung</small> – Tạo chữ nhỏ.<!—nội dung—> – Tạo chữ ẩn. Được dùng cho việc thêm ghi chú vào trang web.8Đóng thẻ BODY và HTML của văn bản. Sau khi thêm nội dung, bạn sẽ nhập </body> và ấn ↵ Enter, rồi nhập </html> để đóng văn bản. Bây giờ phần nội dung của trang gần như đã hoàn thiện, bạn có thể thêm những yếu tố khác như đường dẫn, gạch đầu dòng và hình ảnh

Phương pháp số 3 Chèn đường dẫn

1Xác định vị trí mà bạn muốn chèn đường dẫn vào trang. Ví dụ, nếu muốn chèn đường dẫn vào giữa đoạn văn bản trên trang, bạn sẽ tìm đến đoạn văn bản đó và chọn từ hoặc câu muốn dùng để chèn đường dẫn. 2Sao chép đường dẫn của trang web. Truy cập trang web mà bạn muốn liên kết, rồi tô chọn địa chỉ trong thanh ở gần phía trên cửa sổ và ấn Ctrl+C (Windows) hoặc ⌘ Command+C (Mac). 3Nhập thẻ mở đường dẫn. Nhập <a href=> vào khoảng trống ngay phía trước từ hoặc câu mà bạn muốn chèn đường dẫn. 4Dán đường dẫn của trang web. Nhấp vào giữa href= và >, rồi ấn Ctrl+V (Windows) hoặc ⌘ Command+V (Mac). Bạn sẽ thấy đường dẫn hiển thị bên phải dòng href=. Ví dụ, nếu chọn liên kết với YouTube, bạn sẽ thấy <a href=https://www.youtube.com/> tại đây.5Thêm thẻ đóng đường dẫn. Sau phần nội dung mà bạn muốn dùng làm đường dẫn, hãy nhập </a>. Ví dụ, tại dòng “Follow me on Twitter” (Hãy theo dõi tôi trên Twitter) mà bạn đã liên kết với Twitter và chọn chèn đường dẫn vào “on Twitter”, mã của bạn sẽ trông giống như sau: <a href=https://www.twitter.com/>on Twitter</a>6Thêm thẻ ID. Thẻ ID cho phép bạn liên kết một phần của nội dung với phần khác trong đoạn văn bản khác trên cùng trang. Hãy thực hiện như sau: Thay thẻ <p> bằng <p id=nội dung>Chọn nội dung mà bạn muốn chèn đường dẫn.Nhập <a href=#nội dung> trước nội dung. Đảm bảo nội dung sau dấu “#” giống với nội dung sau “id=”.Nhập </a> sau khi nhập nội dung

Phương pháp số 4 Thêm gạch đầu dòng

1Chọn vị trí mà bạn muốn thêm gạch đầu dòng. Gạch đầu dòng thích hợp nhất với việc liệt kê thông tin hoặc tạo những bước theo thứ tự. Sau khi bạn xác định vị trí bên dưới đoạn văn bản cần thêm gạch đầu dòng, hãy tiếp tục những bước sau đây. 2Thêm hiệu ứng ngắt trang.
 Nhập <br> ở phía trên vị trí mà bạn muốn thêm danh sách gạch đầu dòng và ấn ↵ Enter. 3Tạo gạch đầu dòng đầu tiên. Nhập <li>nội dung</li> và ấn ↵ Enter, đừng quên thay “nội dung” bằng nội dung của gạch đầu dòng. 4Thêm nhiều gạch đầu dòng khác. Khi bạn dùng thẻ <li></li> cho những dòng nội dung, nội dung trong những thẻ sẽ có định dạng gạch đầu dòng. 5Tạo gạch đầu dòng phụ. Nhập <ul>nội dung</ul> và ấn ↵ Enter. Nội dung sẽ được thụt vào bên dưới gạch đầu dòng trước đó. Nội dung được đặt trong thẻ <ul></ul> sẽ không có gạch đầu dòng phía trước.6Đóng thẻ ngắt trang. Nếu trước đó bạn đã dùng thẻ ngắt trang, hãy nhập </br> và ấn ↵ Enter. Danh sách gạch đầu dòng sẽ hiển thị độc lập trên trang

Phương pháp 5 Thêm hình ảnh

1Chọn vị trí thêm hình ảnh. Hình ảnh sẽ hiển thị tại vị trí mà bạn chọn nhập mã hình ảnh. 2Tạo thẻ hình ảnh. Để thực hiện việc này, bạn sẽ nhập <img nhưng không ấn ↵ Enter. Vì thẻ “image” (hình ảnh) là thẻ hoàn chỉnh độc lập và không cần thêm thẻ đóng. 3Thêm thẻ “source” (nguồn). Nhập src= sau thẻ <img, bạn nhớ thêm khoảng trắng giữa “img” và “src”. 4Nhập địa chỉ của ảnh. Sao chép đường dẫn của ảnh mà bạn muốn thêm, rồi dán bên phải thẻ nguồn. 5Thêm thẻ “style” (kiểu). Nhập style=, rồi nhập width:px;height:px. 6Nhập kích thước của ảnh. Nhập chiều rộng của ảnh theo đơn vị pixel vào sau “width:”, rồi nhập chiều cao của ảnh theo đơn vị pixel vào sau “height:”. 7Nhập thông tin mô tả thay thế. Đây là nội dung xuất hiện khi ảnh gặp lỗi hiển thị. Để thực hiện việc này, bạn cần nhập alt= và nhập mô tả. 8Đóng thẻ hình ảnh. Đặt dấu ngoặc > sau ký tự cuối cùng trong phần mô tả thay thế. 9Xem lại mã hình ảnh. Phần mã sẽ trông giống như sau: <img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>

Phương pháp 6 Lưu văn bản trên Windows

1Nhấp vào File (Tệp). Đây là lựa chọn ở phía trên góc trái cửa sổ Notepad. Màn hình liền hiển thị một trình đơn. 2Nhấp vào Save As… (Lưu thành…). Đây là lựa chọn ở gần phía trên trình đơn File đang hiển thị. 3Chọn thư mục lưu. Bạn chỉ cần nhấp vào một thư mục ở bên trái cửa sổ (chẳng hạn như Desktop). 4Đặt tên cho tập tin HTML. Bạn có thể nhập tên bất kỳ cho tập tin cùng với đuôi .html vào trường “File name” (Tên tập tin). Ví dụ: với tập tin có tên “meow”, bạn sẽ nhập meow.html tại đây.5Nhấp vào khung lựa chọn “Save as type” (Lưu theo định dạng). Một danh sách lựa chọn liền hiển thị tại đây. 6Nhấp vào All Files (Tất cả tập tin) trong danh sách lựa chọn.7Nhấp vào Save (Lưu). Bạn sẽ thấy lựa chọn này ở bên dưới góc phải cửa sổ. Đây là thao tác lưu tập tin dưới dạng trang HTML. Bạn có thể mở tập tin trang HTML trong hầu hết trình duyệt bằng cách nhấp và kéo tập tin vào cửa sổ trình duyệt

Phương pháp 7 Lưu văn bản trên Mac

1Nhấp vào TextEdit. Đó là lựa chọn ở phía trên góc trái màn hình. Một danh sách lựa chọn liền hiển thị tại đây. 2Nhấp vào Preferences… (Tùy chọn). Lựa chọn này ở gần phía trên danh sách đang hiển thị. Cửa sổ Preferences sẽ xuất hiện ngay. 3Nhấp vào thẻ Open and Save (Mở và Lưu) ở đầu trang.4Bỏ chọn ô “Add “.txt” extension to plain text files” (Thêm đuôi “.txt” vào tập tin văn bản thuần túy). Đây là lựa chọn bên dưới tiêu đề “When Saving a File” (Khi lưu tập tin). 5Đóng cửa sổ Preferences. Nhấp vào vòng tròn đỏ ở phía trên góc trái cửa sổ để thực hiện việc này. 6Nhấp vào Format (Định dạng). Lựa chọn này ở phía trên màn hình. 7Nhấp vào Make Plain Text (Tạo văn bản thuần túy) trong trình đơn đang hiển thị.8Nhấp vào File (Tệp). Đây là lựa chọn ở phía trên góc trái màn hình. 9Nhấp vào Save (Lưu). Lựa chọn này ở gần phía trên trình đơn đang hiển thị. 10Đặt tên cho tập tin HTML. Thay tên tại trường “Save As” (Lưu thành) bằng tên mà bạn thích và theo sau đó là đuôi .html. Ví dụ, với văn bản có tên “my_website”, bạn sẽ nhập my_website.html tại đây.11Nhấp vào Save (Lưu). Văn bản HTML sẽ được lưu trong thư mục lưu mặc định (chẳng hạn như Desktop). Bạn có thể mở tập tin trang HTML trong hầu hết trình duyệt bằng cách nhấp và kéo tập tin vào cửa sổ trình duyệt

Lời khuyên

dùng chương trình chỉnh sửa mã chuyên biệt như Notepad++ sẽ giúp cho việc nhập HTML trở nên dễ dàng hơn và thuận tiện hơn so với khi dùng Notepad hoặc TextEdit.

Cảnh báo

Luôn kiểm tra lại mã trước khi tải lên trang web.

congnghe