Hướng dẫn HTML để viết nội dung & tối ưu onpage

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

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.


[w] www.dgm.vn

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


[w] www.dgm.vn

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


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

<HEAD>

1. Thẻ <title>…</title>
• Tiêu đề của trang web.
• Tối đa 70 kí tự
• Tiêu chuẩn SEO: Cao


[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


[w] www.dgm.vn

<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


[w] www.dgm.vn

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”

[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


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”


[w] www.dgm.vn


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”


[w] www.dgm.vn


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>


[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.

[w] www.dgm.vn

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.


[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>
<tr>
</tr>
<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.

[w] www.dgm.vn

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


Kiểm tra mật độ từ khóa dựa trên nội dung trên trang

[w] www.dgm.vn

HỎI ĐÁP

BẠN ĐẶT CÂU HỎI

TÔI SẼ...

GOOGLE !


[w] www.dgm.vn

SEE YOU SOON


[w] www.dgm.vn

Hướng dẫn HTML để viết nội dung & tối ưu onpage

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Hướng dẫn HTML để viết nội dung & tối ưu onpage