Hướng dẫn HTML để viết nội dung & tối ưu onpage
description
Transcript of Hướng dẫn HTML để viết nội dung & tối ưu onpage
HTML THỰC HÀNH
[w] www.dgm.vnGiảng viên: Võ Minh Huy
Hướng dẫn HTML để viết nội dungVà tối ưu onpage
[w] www.dgm.vn
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
MỤC LỤC
Cấu trúc trang HTML
Định dạng văn bản
Liên kết
Hình ảnh
Bảng biểu
Tiêu chuẩn khi viết bài
Thực hành
1
2
3
4
5
6
[w] www.dgm.vnGiảng viên: Võ Minh Huy
7
[w] www.dgm.vn
CẤU TRÚC TRANG HTML
<head>…</head>
<body><p>lorem isbum</p><a href=…>anchor</a><div…>
…</div><img src=… /></body>
• Chứa các khai báo ban• Khai báo tiêu đề, mô tả, tác giả,…• Các đoạn mã javascript
• Chứa nội dung hiển thị lên trình duyệt
Ghi chú: Với Firefox, Chrome, nhấn Ctrl+U để xem mã nguồn HTML của 1 trang web.
Giảng viên: Võ Minh Huy
Ví dụ: http://dgm.edu.vn/html-dgm.html
[w] www.dgm.vn
<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
<HEAD>
2. Thẻ <meta name="description" content=“…” />• Mô tả nội dung trang web.• Tối đa 156 kí tự• Tiêu chuẩn SEO: Cao
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
<BODY>
Những nhóm thẻ HTML cơ bản để định dạng nội dung
1. Thuộc tính style2. Định dạng văn bản3. Liên kết4. Hình ảnh5. Bảng biểu
Giảng viên: Võ Minh Huy
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
[w] www.dgm.vn
ĐỊ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
ĐỊNH DẠNG VĂN BẢN
3. Canh tráistyle=“text-align: left”
4. Canh giữastyle=“text-align: center”
5. Canh phảistyle=“text-align: right”
6. Canh đềustyle=“text-align: justify”
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
ĐỊNH DẠNG VĂN BẢN
7. Gạch dướistyle=“decoration: underline”
8. Gạch ngangstyle=“decoration: line-through” (line-through)
9. Gạch trênstyle=“decoration: overline”
10. Bình thườngstyle=“decoration: none”
Giảng viên: Võ Minh Huy
[w] www.dgm.vn
ĐỊ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
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
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
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>
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.
Giảng viên: Võ Minh Huy [w] www.dgm.vn
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% Kiểm tra mật độ từ khóa dựa trên nội dung trên trang
12 Có internal link sang sản phẩm liên quan
TIÊU CHUẨN KHI VIẾT BÀI
Giảng viên: Võ Minh Huy [w] www.dgm.vn
BẠN ĐẶT CÂU HỎI
TÔI SẼ...
GOOGLE !
HỎI ĐÁP
[w] www.dgm.vnGiảng viên: Võ Minh Huy
SEE YOU SOON
[w] www.dgm.vnGiảng viên: Võ Minh Huy