Buzz
Bạn đang bước vào hành trình sáng tạo với HTML. Cùng khám phá cách tạo ra trang web độc đáo với chữ, đường dẫn và hình ảnh.
Các Bước
Chuẩn Bị Trước Khi Bắt Đầu
Mở chương trình chỉnh sửa văn bản cơ bản và bắt đầu cuộc phiêu lưu sáng tạo của bạn.Hệ Điều Hành WindowsBắt Đầu
notepadChương Trình Chỉnh Sửa Văn Bản WindowsHệ Điều Hành MacTìm Kiếm Spotlight
văn bảnsoạn thảoSoạn Thảo Văn Bản
Khám phá thẻ HTML. Khi viết HTML, yếu tố trang được định nghĩa bởi thẻ mở (<>) và thẻ đóng (</>), với nội dung nằm giữa chúng.
- Ví dụ, một đoạn văn bản được tạo bằng cách sử dụng thẻ mở đoạn (<p>), nhập nội dung, sau đó nhập thẻ đóng đoạn </p>.
- Mỗi dòng mã nên được nhập trên dòng mới, bạn ấn ↵ Enter sau mỗi dòng mã.
Đánh Giá Định Dạng HTML Cơ Bản. Để tạo văn bản HTML, bạn sẽ bắt đầu với thẻ 'document type' (<!DOCTYPE html>), thẻ HTML (<html>), và thẻ BODY (<body>). Và bạn sẽ kết thúc với thẻ đóng BODY và thẻ đóng HTML. Ví dụ:
<!DOCTYPE html><html><body></body></html>
Khám phá việc học CSS. Đây là một ngôn ngữ bổ trợ cho HTML, chuyên về việc định dạng trang (như màu sắc, căn giữa chữ, v.v.) và các yếu tố hình ảnh khác của trang web.
Tạo Trang Văn Bản
Thiết Lập Văn Bản. Thêm mã HTML mở đầu cho văn bản:
<!DOCTYPE html><html><body>
Tạo Tiêu Đề Cho 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>
Thê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ỳ 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 sử dụng sau đề mục đầu tiên (ví dụ: đề mục thứ hai sẽ có mã
<h2></h2>).
Tạo đoạn văn bản. Nhập <p>Nội dung</p> và ấn ↵ Enter; hãy thay thế 'Nội dung' bằng nội dung cần thêm.
- Bạn có thể sử dụng thẻ
<p></p>cho mỗi dòng văn bản.
Lặp lại quy trình tạo đề mục và đoạn văn bản. Thêm nhiều đề mục và đoạn văn bản theo sở thích của bạn.
Thêm ngắt dòng cho trang. Nhập <br>Nội dung</br> và ấn ↵ Enter. Thao tác này tạo hiệu ứng ngắt dòng giữa các đoạn văn bản nếu bạn muốn phân chia nội dung.
Định dạng nội dung của đoạn văn bản. Sử dụng thêm các thẻ trong
<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. Sử dụng để thêm ghi chú vào trang web.
Đóng thẻ BODY và HTML của văn bản. Sau khi thêm nội dung, nhập </body> và ấn ↵ Enter, sau đó nhập </html> để kết thúc văn bản. Bây giờ nội dung trang của bạn gần như đã hoàn thiện, bạn có thể thêm các yếu tố khác như liên kết, đầu dòng và hình ảnh.
Thêm liên kết
Xác định vị trí muốn thêm liên kết vào trang. Ví dụ, nếu bạn muốn chèn liên kết vào giữa đoạn văn bản, hãy chọn từ hoặc câu mà bạn muốn liên kết.
Sao chép đường link của trang web. Truy cập trang web bạn muốn liên kết, sau đó tô chọn địa chỉ trong thanh địa chỉ ở phía trên cửa sổ và ấn Ctrl+C (Windows) hoặc ⌘ Command+C (Mac).
Nhập thẻ mở liên kết. Gõ <a href=> trước từ hoặc câu bạn muốn thêm liên kết.
Dán đường link của trang web. Nhấp vào giữa
href= và >, sau đó ấn Ctrl+V (Windows) hoặc ⌘ Command+V (Mac). Đường dẫn sẽ hiển thị giữa href= và >.
- Ví dụ, nếu liên kết đến YouTube, bạn sẽ có
<a href=https://www.youtube.com/>ở đây.
Đóng thẻ đường dẫn. Ngay sau nội dung bạn muốn làm đường dẫn, nhập </a>. Ví dụ, với dòng 'Theo dõi tôi trên Twitter' đã được liên kết với Twitter và chọn để làm đường dẫn cho 'trên Twitter', mã của bạn sẽ trông như sau:
<a href=https://www.twitter.com/>trên Twitter</a>
Thêm thẻ ID. Thêm thẻ ID để liên kết một phần nội dung với một phần khác trên cùng trang. Thực hiện như sau:
- Thay thế thẻ
<p>bằng <p id=nội dung> - Chọn nội dung bạn muốn làm đường dẫn.
- Nhập <a href=#nội dung> trước nội dung. Chắc chắn rằng 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.
Thêm dấu gạch đầu dòng
Chọn vị trí muốn thêm dấu gạch đầu dòng. Dấu gạch đầu dòng thích hợp để liệt kê thông tin hoặc tạo bước theo thứ tự. Sau khi xác định vị trí dưới đoạn văn bản cần thêm dấu gạch đầu dòng, tiếp tục theo các bước sau đây.
Thêm hiệu ứng ngắt trang. Nhập <br> trước vị trí bạn muốn thêm danh sách gạch đầu dòng và ấn ↵ Enter.
Tạ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.
Thêm nhiều gạch đầu dòng khác. Sử dụng thẻ
<li></li> cho mỗi dòng nội dung để tạo định dạng gạch đầu dòng.
Tạ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 trong thẻ
<ul></ul>sẽ không có gạch đầu dòng phía trước.
Đóng thẻ ngắt trang. Nếu bạn đã sử dụng thẻ ngắt trang trước đó, nhập </br> và ấn ↵ Enter. Danh sách gạch đầu dòng sẽ hiển thị độc lập trên trang.
Chèn hình ảnh
Chọn vị trí để thêm hình ảnh. Hình ảnh sẽ xuất hiện ở vị trí bạn chọn khi nhập mã hình ảnh.
Tạo thẻ hình ảnh. Để làm điều này, nhập
<img nhưng không ấn ↵ Enter. Vì thẻ 'hình ảnh' là một thẻ hoàn chỉnh, độc lập và không cần thêm thẻ đóng.
Thêm thẻ 'nguồn'. Nhập src= sau thẻ
<img, đảm bảo thêm khoảng trắng giữa 'img' và 'src'.
Điền địa chỉ của ảnh. Sao chép đường dẫn của ảnh bạn muốn thêm và dán ngay bên phải thẻ nguồn.
Thêm thẻ 'kiểu'. Nhập style=, sau đó nhập width:px;height:px.
Nhập kích thước cho ảnh. Điền chiều rộng ảnh theo pixel sau 'width:' và chiều cao theo pixel sau 'height:'.
Nhập thông tin mô tả thay thế. Đây là nội dung xuất hiện khi ảnh không thể hiển thị. Để làm điều này, nhập alt= và mô tả của bạn.
Đóng thẻ hình ảnh. Đặt dấu ngoặc > sau ký tự cuối cùng trong mô tả thay thế.
Xem lại mã hình ảnh. Phần mã sẽ trông như sau:
<img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
Lưu văn bản trên Windows
Mở Tệp (File). Lựa chọn nằm ở góc trái cửa sổ Notepad. Một trình đơn sẽ xuất hiện ngay lập tức.
Mở Lưu thành… (Save As…). Lựa chọn gần phía trên trong trình đơn Tệp.
Chọn thư mục để lưu. Nhấp vào một thư mục bên trái cửa sổ (như Desktop).
Đặt tên cho tập tin HTML. Nhập tên muốn có kèm theo đuôi .html vào ô 'Tên tập tin'.
- Ví dụ: nếu bạn muốn tên là 'meow', hãy nhập meow.html ở đây.
Mở danh sách 'Lưu theo định dạng' (Save as type). Danh sách này sẽ xuất hiện ngay lập tức.
Chọn Tất cả tập tin trong danh sách lựa chọn.
Chọn Lưu (Save). Thao tác này nằm ở góc phải dưới cửa sổ. Đây là cách lưu tập tin dưới dạng trang HTML.
- Bạn cũng có thể mở tập tin trang HTML bằng cách kéo và thả vào cửa sổ trình duyệt.
Lưu văn bản trên Mac
Chọn TextEdit. Đây là lựa chọn ở góc trái trên màn hình. Một danh sách sẽ hiện ra ngay lập tức.
Chọn Preferences… (Tùy chọn). Lựa chọn này nằm gần phía trên danh sách hiện tại. Cửa sổ Preferences sẽ hiện ra ngay.
Nhấp vào mục Mở và Lưu ở đầu trang.
Bỏ chọn ô 'Thêm đuôi '.txt' vào tập tin văn bản thuần túy'. Lựa chọn này nằm dưới tiêu đề 'Khi Lưu Tập Tin'.
Đóng cửa sổ Preferences. Nhấp vào nút đỏ ở góc trái trên cùng để hoàn tất.
Nhấp vào Định dạng (Format). Lựa chọn này nằm ở phía trên cùng của màn hình.
Nhấp vào Tạo Văn Bản Thuần Túy trong trình đơn đang mở.
Mở Tệp ở góc trái màn hình.
Nhấp vào Lưu. Chọn ở góc trên cùng bên phải của trình đơn.
Đặt tên cho tập tin HTML. Thay đổi tên tại phần 'Lưu thành' và thêm đuôi .html.
- Ví dụ: với tên 'my_website', nhập my_website.html.
Nhấp vào Lưu. Văn bản HTML sẽ được lưu trong thư mục 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 kéo thả vào cửa sổ trình duyệt.
Trick
- Hãy sử dụng công cụ chỉnh sửa mã chuyên nghiệp như Notepad++ để tạo và chỉnh sửa HTML một cách thuận tiện và hiệu quả hơn so với Notepad hoặc TextEdit thông thường.
Chú ý
- Luôn luôn kiểm tra mã nguồn trước khi tải lên trang web.
