HTML là một trong những thành phần cốt lõi của World Wide Web, tạo nên cấu trúc của các trang web. Khi bạn đã tạo trang web của mình, bạn có thể lưu dưới dạng tài liệu HTML và xem trong trình duyệt web của bạn.
Có thể tạo một trang HTML bằng cách sử dụng các trình soạn thảo văn bản cơ bản được tìm thấy trên cả máy tính Windows và Mac.
Sau đây T-marketing sẽ hướng dẫn bạn cách tạo website với HTML đơn giản nhất (ngôn ngữ đánh dấu siêu văn bản).
Thêm nội dung vào thẻ Head trong HTML
1.Mở trình soạn thảo văn bản
Trên máy tính chạy hệ điều hành Windows, bạn sẽ thường sử dụng Notepad hoặc Notepad++, người dùng macOS sẽ sử dụng TextEdit và người dùng ChromeOS sẽ sử dụng Text:
- Windows – Open Start
, nhập notepad hoặc notepad++ và nhấp vào Notepad hoặc Notepad++ ở đầu cửa sổ. - macOS – Nhấp vào Spotlight
, nhập textedit và bấm vào TextEdit ở đầu kết quả. - ChromeOS – Mở trình duyệt, sau đó nhấp vào Văn bản. (Biểu tượng cho biết Code Pad).
2. Nhập <! DOCTYPE html> và nhấn Enter. Điều này cho trình duyệt web biết đây là tài liệu HTML
3. Nhập <html> và nhấn Enter. Thẻ mở này cho mã HTML.
4. Nhập <head> và nhấn Enter. Đây là thẻ mở đầu HTML. Thông tin phần đầu HTML thường không được hiển thị trên trang web.
Thông tin này có thể bao gồm tiêu đề, dữ liệu meta, sheet kiểu CSS và các ngôn ngữ lập trình khác.
5. Nhập <title>. Đây là thẻ để thêm tiêu đề vào trang của bạn.
6. Nhập tiêu đề cho trang web của bạn. Đây có thể là bất kỳ tiêu đề nào bạn muốn đặt tên cho trang web của mình.
7. Nhập </title> và nhấn Enter. Đây là thẻ để đóng thẻ tiêu đề của bạn.
8. Nhập </head> và nhấn Enter. Đây là thẻ để đóng head. Mã HTML của bạn sẽ trông giống như thế này
Thêm nội dung vào thẻ Body và Text trong file HTML
1. Nhập <body> bên dưới thẻ “Head” đã đóng. Thẻ này mở phần body của tài liệu HTML. Mọi thứ trong phần body HTML đều hiển thị trên trang web.
2. Nhập <h1>. Đây là thẻ để thêm tiêu đề vào tài liệu HTML. Tiêu đề là văn bản in đậm thường nằm ở đầu tài liệu HTML của bạn.
3. Nhập tiêu đề cho trang của bạn. Đây có thể là tiêu đề trang của bạn hoặc một lời chào.
4. Nhập </h1> sau văn bản tiêu đề và nhấn Enter. Thẻ này đóng tiêu đề của bạn.
- Thêm các tiêu đề bổ sung khi bạn tiếp tục. Có sáu tiêu đề khác nhau mà bạn có thể tạo bằng cách sử dụng các thẻ <h1> </h1> đến <h6> </h6> . Chúng tạo ra các tiêu đề có kích thước khác nhau. Ví dụ: để tạo liên tiếp ba tiêu đề có kích thước khác nhau, bạn có thể viết như sau:
- Các tiêu đề thể hiện mức độ ưu tiên hoặc tầm quan trọng của văn bản. Nhưng không cần thiết phải sử dụng tiêu đề cao hơn nếu bạn muốn sử dụng bất kỳ tiêu đề thấp hơn nào. Bạn có thể trực tiếp sử dụng H3, ngay cả khi không có H1 trong bài đăng của bạn.
5. Loại <p>. Đây là thẻ để mở một đoạn văn. Đoạn văn bản sử dụng để hiển thị văn bản có kích thước bình thường.
6. Nhập một số văn bản. Đây có thể là mô tả cho trang web của bạn hoặc bất kỳ thông tin nào khác mà bạn muốn chia sẻ.
7. Nhập </p> sau văn bản và nhấn Enter. Đây là thẻ để đóng văn bản đoạn của bạn. Sau đây là một ví dụ về đoạn văn bản trong HTML:
- Bạn có thể thêm nhiều dòng đoạn liên tiếp để tạo một chuỗi các đoạn văn dưới một tiêu đề.
- Bạn có thể thay đổi màu của bất kỳ văn bản nào bằng cách đóng khung văn bản bằng các thẻ <font color = “color”> và </font> .
Nhập màu ưa thích của bạn vào phần “màu” (bạn sẽ giữ nguyên các dấu ngoặc kép). Bạn có thể biến bất kỳ văn bản nào (ví dụ: tiêu đề) thành một màu khác với bộ thẻ. Ví dụ: để chuyển văn bản của một đoạn văn thành màu xanh lam, bạn sẽ viết đoạn mã sau:
<p> <font color = “blue”> Cá voi là những sinh vật hùng vĩ. </font> </p> - Bạn có thể thêm chữ in đậm, chữ in nghiêng và các văn bản khác các định dạng sử dụng HTML. Sau đây là các ví dụ về cách bạn có thể định dạng văn bản bằng thẻ HTML
- Nếu bạn sử dụng in đậm và nghiêng để nhấn mạnh, hãy sử dụng các phần <strong> và <em> thay vì <b> và <i>. Điều này giúp trang web của bạn dễ hiểu hơn khi sử dụng các công nghệ như screen reader hoặc chế độ đọc trong một số trình duyệt.
Thêm các Element vào file HTML
1. Thêm ảnh vào trang của bạn. Bạn có thể thêm hình ảnh vào HTML của mình bằng các bước sau:
- Nhập <img src = để mở thẻ hình ảnh của bạn.
- Sao chép và dán URL hình ảnh sau dấu “=” trong dấu ngoặc kép.
- Nhập > sau url hình ảnh để đóng thẻ hình ảnh của bạn.
Ví dụ: nếu URL của hình ảnh là “http://www.mypicture.com/lake”, bạn sẽ viết như sau:
2. Liên kết đến một trang khác. Bạn có thể thêm liên kết vào HTML của mình bằng các bước sau:
- Nhập <a href = để mở thẻ liên kết của bạn.
- Sao chép và dán URL sau dấu ngoặc kép “=”.
- Nhập > sau URL để đóng phần liên kết của HTML.
- Nhập tên cho liên kết sau dấu ngoặc đóng.
- Nhập </a> sau tên liên kết để đóng liên kết HTML. Sau đây là một ví dụ về liên kết đến Facebook.
3. Thêm dấu ngắt dòng vào HTML của bạn. Bạn có thể thêm dấu ngắt dòng bằng cách nhập <br> vào HTML của mình. Điều này tạo ra một đường ngang có thể được sử dụng để phân chia các phần khác nhau trên trang của bạn.
Tùy chỉnh màu sắc
1. Kiểm tra danh sách tên và mã màu HTML chính thức.
World Wide Web Consortium (W3C) quản lý danh sách màu chính thức mà bạn sẽ tìm thấy tại www.w3.org/wiki/CSS/Properties/color/keywords.
Mỗi màu có tên chính thức, mã thập lục phân gồm 6 chữ số và giá trị thập phân.
Bạn có thể sử dụng bất kỳ giá trị nào trong số những giá trị này để thêm màu cho các phần tử của trang web của mình. Đối với ví dụ này, chúng tôi sẽ sử dụng tên màu chính thức.
2. Đặt màu nền trong thẻ <body> . Bạn sẽ thực hiện việc này bằng cách thêm style vào thẻ. Giả sử bạn muốn tạo màu nền cho toàn bộ trang là màu oải hương:
- <body style = “background-color: lavender;”>
3. Đặt màu văn bản cho bất kỳ thẻ nào. Bạn cũng có thể sử dụng style để chỉ định màu mà bạn muốn tất cả văn bản trong một thẻ cụ thể. Ví dụ: giả sử bạn muốn tạo văn bản trong một trong các <p> thẻ midnightblue:
- <p style = “color: midblue;”>
- Việc thay đổi màu sẽ chỉ ảnh hưởng đến văn bản trong thẻ <p> . Nếu bạn bắt đầu một thẻ <p> sau đó cũng phải là midnightblue, bạn cũng cần đặt thuộc tính style ở đó.
4. Đặt màu nền cho tiêu đề hoặc đoạn văn. Tương tự như cách bạn đặt màu nền cho thẻ body, bạn cũng có thể đặt màu nền cho các thẻ khác. Giả sử bạn muốn tạo màu nền của một <p> lightgrey và màu nền của tiêu đề kiểu H1 là lightskyblue, bạn sẽ sử dụng:
- <p style = “background-color: lightgrey;”>
- <h1 style = “background-color: lightskyblue;”>
Kết thúc file HTML
1. Loại </body> để đóng phần thân. Sau khi bạn đã hoàn tất việc thêm tất cả văn bản, hình ảnh và các phần tử khác vào phần body của tài liệu HTML, hãy thêm thẻ này vào cuối tài liệu HTML để đóng phần nội dung HTML của bạn.
2.Nhập </html> để đóng tài liệu HTML của bạn. Thẻ này nằm bên dưới thẻ để đóng nội dung HTML của bạn ở cuối tài liệu HTML. Điều này cho trình duyệt web biết rằng không còn mã HTML nào nữa sau thẻ này. Toàn bộ tài liệu HTML của bạn sẽ trông giống như sau:
Lưu và mở trang web của bạn
1. Chuyển đổi tài liệu của bạn thành văn bản thuần túy (chỉ dành cho người dùng Mac).
Nhấp vào Format ở đầu màn hình, sau đó nhấp vào Make Plain Text trong menu kết quả.
- Bước này không cần thiết và cũng không thể thực hiện được trên Windows.
2. Nhấp vào File. Nó nằm trong thanh menu ở đầu màn hình.
3. Nhấp vào Save as. Nó nằm trong menu thả xuống bên dưới “File”.
- Ngoài ra, bạn có thể nhấn Ctrl+S (Windows) hoặc ⌘ Command+S (Mac).
4. Nhập tên cho tài liệu HTML của bạn. Nhập bất cứ thứ gì bạn muốn đặt tên cho tài liệu của mình vào hộp văn bản “File name” (Windows) hoặc “Name” (Mac).
5. Thay đổi loại tệp của tài liệu. Bạn sẽ cần thay đổi tài liệu từ tệp văn bản thành tệp HTML. Sử dụng các bước sau để thay đổi loại tệp:
- Windows – Nhấp vào hộp “Save as type”, nhấp vào All Files, sau đó nhập .html vào cuối tên tệp.
- MacOS – Thay thế .txt ở cuối tên tệp bằng .html .
- ChromeOS – Nhấp vào nút “Save as”. Đặt tên tệp bằng .html ở cuối.
6.Nhấp vào Save. Ở cuối cửa sổ. Làm như vậy sẽ tạo ra một tệp HTML.
- Các tệp HTML thường mở bằng trình duyệt web mặc định của bạn.
7. Đóng trình soạn thảo văn bản của bạn.
Tại thời điểm này, bạn đã sẵn sàng mở tệp HTML của mình trong trình duyệt để có thể xem trang web của mình.
8. Mở tài liệu HTML bằng trình duyệt của bạn.
Trong hầu hết các trường hợp, bạn sẽ có thể nhấp đúp vào tài liệu HTML để thực hiện việc này. Nếu việc bấm đúp vào tài liệu dẫn đến lỗi, hãy làm như sau:
- Windows – Bấm chuột phải vào tài liệu, chọn Open with và bấm vào trình duyệt ưa thích của bạn.
- Mac – Nhấp vào tài liệu một lần, nhấp vào File, chọn Open with và nhấp vào trình duyệt ưa thích của bạn.
9. Chỉnh sửa tài liệu HTML nếu cần.
Bạn có thể nhận thấy lỗi trong trang HTML của mình. Để thay đổi nó, bạn có thể chỉnh sửa văn bản của tài liệu HTML:
- Trên Windows, bạn có thể nhấp chuột phải vào tài liệu và nhấp vào Edit trong trình đơn thả xuống kết quả (nếu bạn đã cài đặt Notepad ++, sẽ hiển thị Edit with Notepad ++ thay thế).
- Trên Mac, bạn nhấp vào tài liệu để chọn nó, nhấp vào File, chọn Open with và nhấp vào TextEdit. Bạn cũng có thể kéo tài liệu vào TextEdit.
- Trên Chromebook, đóng ứng dụng Văn bản, mở File, tìm tệp của bạn rồi nhấp vào tệp đó.
Lời kết
Như vậy T-marketing vừa chia sẻ bạn các thao tác tạo một website đơn giản với HTML. Hy vọng bạn đã có những bài học bổ ích và có thể tự xây dựng một website thành công cho mình!
Nguồn bài viết: wikihow.com
