Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Hướng dẫn HTML để viết nội dung & tối ưu onpage
1. HTML THỰC HÀNH
Hướng dẫn HTML để viết nội dung
Và tối ưu onpage
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
2. CẤU TRÚC TRANG HTML
GHI CHÚ
Buổi học sẽ hướng dẫn các bạn cách dùng HTML để viết nội
dung & tối ưu onpage, không phải để Thiết kế webiste.
Nội dung được rút gọn tối đa, chỉ hướng dẫn những kiến thức
cơ bản đủ để bạn viết nội dung tốt mà không cần nhớ nhiều.
Những bạn đã biết HTML & CSS không cần tham gia buổi
hướng dẫn này.
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
3. MỤC LỤC
1
Cấu trúc trang HTML
2
Định dạng văn bản
3
Liên kết
4
Hình ảnh
5
Bảng biểu
6
Tiêu chuẩn khi viết bài
7
Thực hành
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
4. CẤU TRÚC TRANG HTML
<head>
…
</head>
• Chứa các khai báo ban
• Khai báo tiêu đề, mô tả, tác giả,…
• Các đoạn mã javascript
<body>
<p>lorem isbum</p>
<a href=…>anchor</a>
<div…>
…
</div>
<img src=… />
</body>
• Chứa nội dung hiển thị lên trình duyệt
Giảng viên: Võ Minh Huy
Ghi chú: Với Firefox, Chrome, nhấn Ctrl+U
để xem mã nguồn HTML của 1 trang web.
Ví dụ: http://dgm.edu.vn/html-dgm.html
[w] www.dgm.vn
5. <HEAD>
1. Thẻ <title>…</title>
• Tiêu đề của trang web.
• Tối đa 70 kí tự
• Tiêu chuẩn SEO: Cao
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
7. <BODY>
Những nhóm thẻ HTML cơ bản để định dạng nội dung
1.
2.
3.
4.
5.
Thuộc tính style
Định dạng văn bản
Liên kết
Hình ảnh
Bảng biểu
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
8. THUỘC TÍNH STYLE
Style là một thuộc tính dùng để định dạng hiển thị của các thẻ.
• Đoạn văn bản in nghiêng:
<p style=“text-style:italic”>Văn bản in nghiêng</p>
• Hình ảnh thụt vô trái 20px:
<img src=“http://example.com/image.jpg” style=“margin-left:
20px” />
Thông thường, các định dạng sẽ được khai báo trong 1 file CSS
để dễ quản lý, dễ sử dụng.
Tham khảo tất cả những định dạng CSS cho thuộc tính style tại
địa chỉ: http://www.w3schools.com/css/. Khi Google thì gõ đại
loại như “CSS chữ in nghiêng”
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
9. ĐỊNH DẠNG VĂN BẢN
1. In đậm
Sử dụng thẻ <strong>…</strong>
style=“font-weight: bold”
Bình thường: style=“font-weight: none”
2. In nghiêng
Sử dung thẻ <em>…</em>
style=“font-style:italic”
Bình thường: style=“font-style:normal”
[w] www.dgm.vn
10. ĐỊNH DẠNG VĂN BẢN
3. Canh trái
style=“text-align: left”
4. Canh giữa
style=“text-align: center”
5. Canh phải
style=“text-align: right”
6. Canh đều
style=“text-align: justify”
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
11. ĐỊNH DẠNG VĂN BẢN
7. Gạch dưới
style=“decoration: underline”
8. Gạch ngang
style=“decoration: line-through” (line-through)
9. Gạch trên
style=“decoration: overline”
10. Bình thường
style=“decoration: none”
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
12. ĐỊNH DẠNG VĂN BẢN
12. Kích thước chữ
style=“font-size: 12px”
style=“font-size: 8px”
13. Heading
<h1>Tiêu đề bài viết</h1>
<h2>Chuyên mục</h2>
<h3>Chuyên mục con</h3>
…
<h6>Nội dung nhỏ</h6>
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
13. LIÊN KẾT
<a href=“http://www.dgm.vn” target=“_blank”
rel=“nofollow”>DGM Việt Nam</a>
href=“http://www.dgm.vn”: Liên kết đến đường link
http://www.dgm.vn
target=“_blank”: Mở website ở 1 tab/cửa sổ web khác
rel=“nofollow”: đặt thuộc tính nofollow cho đường dẫn
DGM Việt Nam: anchor text, nội dung xuất hiện trên website
Ghi chú:
Có thể kết hợp với thuộc tính style để định dạng cho anchor text:
in đậm, in nghiêng, gạch dưới, kích thước chữ,…
Ví dụ hiển thi:
Học SEO tại DGM Việt Nam có chất lượng tốt.
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
14. HÌNH ẢNH
<img src=“http://example.com/image.jpg” alt=“Mô tả hình
ảnh” width=“200” height=“150” />
src=“http://example.com/image.jpg”: đường dẫn đến hình.
alt=“…”: mô tả hình ảnh, giúp Googlebot hiểu được hình.
width: chiều ngang
height: chiều ngang
Ghi chú:
Có thể kết hợp với thuộc tính style để canh trái, phải cho hình.
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
15. BẢNG BIỂU
<table border=“1”>
<tbody>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
<td>Nội dung 1</td>
<td>Nội dung 2</td>
<tr>
</tr>
<td>Nội dung 3</td>
<td>Nội dung 4</td>
<tr>
</tr>
</tbody>
</table>
Giảng viên: Võ Minh Huy
Tiêu đề 1
Tiều đề 2
Nội dung 1
Nội dung 2
Nội dung 3
Nội dung 4
Có thể kết hợp với style hoặc CSS để
định dạng cho bảng biểu
Trong các nội dung có thể chèn hình
ảnh, liên kết với định dạng như các
slide trước.
[w] www.dgm.vn
16. TIÊU CHUẨN KHI VIẾT BÀI
1
Từ khóa nằm trong title
Tiêu đề giới hạn 70 ký tự
2
Từ khóa nằm trong description
Description giớn hạn 160 ký tự
3
Từ khóa nằm trong URL
Chứa từ khóa chính
4
Từ khóa nằm trong thẻ H1
<h1>Từ khóa...</h1>
5
Từ khóa nằm trong thẻ H2-H6
<h2>Từ khóa...<h2>
6
Từ khóa được in đậm
<strong>từ khóa</strong>
7
Từ khóa được in nghiêng
<i>từ khóa</i>
8
Từ khóa nằm trong tên ảnh
Tên ảnh có định dạng "tu-khoa.jpg" (không dấu)
9
Từ khóa nằm trong thẻ mô tả ảnh
ALT="Tu khoa" (không dấu)
10
Từ khóa nằm trong đoạn văn đầu tiên
11
Mật độ từ khóa 2-5%
12
Có internal link sang sản phẩm liên quan
Giảng viên: Võ Minh Huy
Kiểm tra mật độ từ khóa dựa trên nội dung trên trang
[w] www.dgm.vn
17. HỎI ĐÁP
BẠN ĐẶT CÂU HỎI
TÔI SẼ...
GOOGLE !
Giảng viên: Võ Minh Huy
[w] www.dgm.vn