Select Page

Thẻ HTML cơ bản trong bài đăng

Thẻ HTML cơ bản trong bài đăng

Bài đăng Thẻ HTML cơ bản nằm trong loạt bài hướng dẫn người mới xây dựng nội dung trên blog.

Hầu hết các nền tảng viết blog hiện nay đều được trang bị các công cụ định dạng rất tốt giúp bài đăng của bạn giống trong trí tưởng tượng của mình. Cho dù bạn lựa chọn nền tảng nào thì công cụ soạn thảo vẫn đã đầy đủ chức năng cần thiết.

Những ngày đầu viết blog của tôi, tôi viết trên nền tảng Blogger.Com và bị giới hạn vài quyền định dạng cơ bản- từ đó tôi muốn mình phải biết những thứ cơ bản để định dạng văn bản thuần túy theo ngôn ngữ lập trình. Tuy đây thuộc thế giới của CNTT nhưng bạn có thể ghi nhớ và áp dụng chúng trong một vài trường hợp nhất định- chỉnh sửa bài viết theo code( đây là trường hợp thường gặp của tôi trong WordPress khi mà chế độ soạn thảo đơn thuần không phát huy tác dụng).

Thẻ HTML cơ bản là gì?

Thật khó để miêu tả nó khi tôi không phải là dân lập trình, nhưng tôi sẽ kể cho bạn nghe đơn giản nhất có thể- HTML là một ngôn ngữ trong thiết kế website hay blog, thẻ HTML là một phần cấu thành nên siêu ngôn ngữ đóNếu bạn có một khái niệm hoàn chỉnh hơn bạn có thể tham khảo bài đăng này từ Wikipedia.

Viết blog trên nền tảng được thiết lập trên ngôn ngữ lập trình và chắc chắn một điều đơn giản- bạn sẽ gặp thẻ HTML cơ bản khi định dạng văn bản theo mong muốn. Tôi thích đụng đến những thẻ nằm trong <></>, vì chúng dường như cho tôi một chút sức mạnh gì đó trong bài đăng của tôi. Cấu trúc này là một mở đầu và kết thúc, <>– mở đầu, </>– kết thúc, phía bên trong bạn có thể thêm tùy chỉnh như <b>in đậm</b> hoặc <i>in nghiêng</i>.

Dưới đây là các tùy chỉnh cơ bản giúp bạn có thể chỉnh sửa theo ý muốn của mình trước khi xuất bản bài đăng. Tùy thuộc vào nền tảng CSS bạn đang sử dụng, một số thẻ HTML cơ bản có thể không xuất hiện trên các blog khác nhau.

Thẻ định dạng văn bản

Thẻ định dạng cơ bản
 
<b> in đậm </b>
<strong> nhấn mạnh </strong> **/thường in đậm/**
<i> in nghiêng </i>
<em> nhấn mạnh </em> **/thường in nghiêng/**
<big> tạo chữ có kích thước lớn hơn </big>
<small> tạo chữ có kích thước nhỏ hơn </small>
<del> tạo dấu gạch ngang giữa chữ </del>
<strike> tạo dấu gạch ngang giữa chữ </strike>
<sup> tạo chỉ số trên </sup>
<sub> tạo chỉ số dưới </sub>
<mark> tạo chữ có màu nổi bật </mark>
<pre> giữ định dạng giống phần soạn thảo code </pre>

Có một sự giống nhau giữa thẻ <b> và <strong>, <i> và <em>, <del> và <strike>. Tôi không rõ sự giống nhau này có ý nghĩa gì, nhưng tôi nghĩ sự xuất hiện có lẽ phụ thuộc vào từng phiên bản CSS khác nhau.

Thẻ liên kết

Liên kết cơ bản
 
<a href="URL"> tiêu đề liên kết </a>

Liên kết cơ bản: URL là địa chỉ mà bạn muốn liên kết còn tiêu đề liên kết là cụm từ bạn muốn liên kết.

Liên kết Email
 
<a href="mailto:EMAIL"> tiêu đề liên kết </a>

Liên kết Email: EMAIL là địa chỉ email mà bạn muốn liên kết

Thẻ HTML cơ bản về tiêu đề

Thẻ tiêu đề
 
<h1> Nhóm quan trọng </h1>
  <h2> Nhóm ít quan trọng hơn </h2>
    <h3> Nhóm ít quan trọng hơn nữa </h3> 
      <h4> ... </h4>
        <h5> ... </h5>
          <h6> Nhóm ít quan trọng nhất </h6>

Thẻ phông chữ

Kích thước phông chữ
 
<font size="X"> văn bản để thay đổi </font>

Kích thước phông chữ: Thay đổi giá trị X để có những hiệu ứng khác nhau.

Màu sắc
 
<font color="green"> đây là màu xanh </font>

Màu sắc: Giá trị ở đây có thể là:

» Tên màu – Ví dụ: Green

» Giá trị RGB – Ví dụ: rgb(0,255,0)

» Giá trị HEX – Ví dụ: #00FF00

Hoặc bạn có thể lấy giá trị màu sắc đó địa chỉ này.

Thay đổi phông chữ
 
<p font-family: Comic Sans MS;> phông chữ mới </p>

Thay đổi phông chữ: bạn có thể thay đổi nó cho đoạn văn mới tùy chọn. Để tham khảo thêm về thay đổi phông chữ, đây là bài đăng chi tiết nói về vấn đề này.

Tôi rất ít khi sử dụng thẻ phông chữ trên blog, tôi cảm thấy có rất ít nhu cầu về nó. Đơn giản vì mặc định của Theme chủ đề vốn dĩ đã đẹp, giữ trạng thái cân bằng trong một vài trường hợp bạn thay đổi thiết kế chủ đề cho blog tránh nhiễu đoạn.

Thẻ HTML cơ bản về hình ảnh

Thẻ hình ảnh cơ bản
 
 Thẻ hình ảnh cơ bản: <img src="URL"> (URL là địa chỉ hình ảnh mà bạn muốn hiển thị)
Hình ảnh có kích thước: <img src="URL" wight="200" height="300">
Căn chỉnh hình ảnh: <img src="URL" align="left/center/right"> 
Mô tả hình ảnh: <img src="URL" alt="mô tả ngắn về hình ảnh"> ( hiển thị mô tả khi trình duyệt load không được)
Hình ảnh liên kết: <a href="URL liên kết"><img src="URL"</a>
Hình ảnh có đường viền: <img src="URL" boder="X"> (giá trị càng lớn đường viền càng dày)

Một ví dụ khi tôi đặt tất cả chúng lại với nhau, tôi sẽ có một hình ảnh được liên kết có đường viền xung quanh, được đặt ở giữa văn bản, có chiều rộng là 350px và chiều cao là 500px.

Ví dụ
 
<a href="URL liên kết"><img src="URL" boder="1" align="center" wight="350" height="500" alt="mô tả về hình ảnh"></a>

Thẻ danh sách có thứ tự

Thẻ danh sách có thứ tự
 
 <ol> 
        <li> mục danh sách đầu tiên </li> 
        <li> mục danh sách thứ hai </li> 
        <li> mục danh sách thứ ba </li> 
</ ol>

Thẻ danh sách không có thứ tự

Thẻ danh sách không có thứ tự
 
<ul> 
        <li> mục danh sách đầu tiên </li> 
        <li> mục danh sách thứ hai </li> 
        <li> mục danh sách thứ ba </li> 
</ ul>

Bạn có thể tìm thấy tất cả các thẻ định dạng và học nó từ Webcoban.vn.

Hoặc bạn có thể học trực tuyến từ các địa điểm mà tôi đã đề cập trước đó trong hướng dẫn thiết kế blog phần 2loạt bài này. Những địa điểm trên biến bài đăng thẻ HTML cơ bản này rất cơ bản( đó không phải là điều tôi muốn), hãy thưởng thức nó và cho tôi một vài lời khuyên.

About The Author

Rain Nguyen

Tôi là Rain, người sáng lập và là biên tập viên của blog RN DOT COM. Tôi làm việc để xây dựng một cộng đồng vững mạnh bằng cách hướng dẫn mọi người viết blog kiếm tiền, xây dựng hệ thống kinh doanh của chính mình qua hệ thống bài viết của tôi. Nếu bạn thấy bài viết nào đó hay, hãy chia sẻ nó như một cách giúp tôi hỗ trợ những ai đang khao khát như bạn. I love all my friends!

Leave a reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Tùy chọn tìm kiếm tên miền

"