Hướng dẫn sử dụng trình soạn thảo bài viết

Đoạn văn

Đoạn văn bình thường có sử dụng in đậm và cả in nghiêng. Ngoài ra, các từ trong câu có thể gạch dưới, ~~gạch ngang~~ hay là ^{tiêu đề trên} và _{tiêu đề dưới} sử dụng cho các ký hiệu toán học hay hoá học.
Sau đây là đoạn mã HTML để dùng trong đoạn văn:


<b>In đậm</b>


<i>In nghiêng</i>


<acronym title="Chú thích">Gạch dưới</acronym>


<strike>Gạch ngang</strike>


<sup>Tiêu đề trên</sup>


<sub>Tiêu đề dưới</sub>

Bàn phím

Ví dụ, để dán (paste) một đoạn văn bản trong hệ điều hành Macintosh, ta làm như sau:

⌘+Opt+Shift+V

Còn trong hệ điều hành Windows:

Ctrl+V

Dưới đây là mã HTML để hiển thị nút bấm trên bàn phím:


<kbd>Phím</kbd>

Đoạn mã

Để viết một đoạn văn như một đoạn mã, ta sử dụng cặp thẻ <code> và </code>.
Ví dụ:
Khi sử dụng thẻ này có thể trình bày đoạn mã Pascal
Cách sử dụng:


<code>Đoạn mã</code>

Đoạn mã xem trước

Khi muốn trình bày một đoạn mã HTML, CSS, Javascript, jQuery để người đọc có thể sao chép (copy) thì ta phải dùng thẻ <pre> kết hợp với thẻ <code>, chẳng hạn như sau:


<div class='post'>
    <div data="Your Title Here">Your Content Here</div>
    <div data="Your Title Here">Your Content Here</div>
    <div data="Your Title Here">Your Content Here</div>
  </div>


.post {
    background: #fff;
    margin: 0 0 15px;
    padding: 15px;
}


<button onclick="myFunction()">Post</button>

<script>
function myFunction() {
    document.write(5 + 6);
}
</script>


$(document).ready(function{
 jQuery.cssRule(".post", "display", "block");
});

Dưới đây là cách sử dụng:


<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
Đoạn mã HTML
</code></pre>


<pre data-codetype="CSSku" title="CSS"><code class="language-css">
Đoạn mã CSS
</code></pre>


<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">
Đoạn mã Javascript
</code></pre>


<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">
Đoạn mã jQuery
</code></pre>

Chú ý: Phần nội dung giữa hai cặp thẻ <pre> và <code> soạn thảo trước ở phần "Viết" trong Blogspot, sau khi chuyển sang phần HTML thì dấu "<" sẽ tự chuyển thành "<" và dấu ">" sẽ tự chuyển thành ">".

Trích dẫn

Để trích dẫn một câu văn hay đoạn văn như sau:

Câu văn hoặc đoạn văn cần trích dẫn

ta sử dụng thẻ sau:


<blockquote class="tr_bq">Câu văn hoặc đoạn văn cần trích dẫn</blockquote>

Thông báo

Một số bảng thông báo:

Thông báo thành công

Thông báo nhắc nhở

Thông báo cảnh báo

Thông báo lỗi

Đoạn mã sử dụng thông báo:


<div class="alert-message success">
Thông báo thành công<i class="fa fa-check-circle"></i></div>


<div class="alert-message alert">
Thông báo nhắc nhở<i class="fa fa-info-circle"></i></div>


<div class="alert-message warning">
Thông báo cảnh báo<i class="fa fa-exclamation-triangle"></i></div>


<div class="alert-message error">
Thông báo lỗi<i class="fa fa-exclamation-circle"></i></div>

Nút bấm

Mã HTML:


<ul class="button">
<li style="text-align: center;"><a class="demo" href="Đường dẫn">THỬ NGHIỆM</a></li>
</ul>


<ul class="button">
<li style="text-align: center;"><a class="download" href="Đường dẫn">TẢI VỀ</a></li>
</ul>


<ul class="button">
<li style="text-align: center;"><a class="download" href="Đường dẫn" target="_blank">TẢI VỀ</a></li>
</ul>
<br />
<br />


<a href="#">
<button>Chuyển trang</button>
</a>

Ẩn

Đoạn văn cần ẩn

Mã HTML:


<div id="flippy"><button>Ẩn</button></div>
<div id="flippanel">
Đoạn văn cần ẩn
</div>

Bảng

Tiêu đề bảng 1	Tiêu đề bảng 2	Tiêu đề bảng 3
Nội dung 1	Nội dung 2	Nội dung 3
Nội dung 1	Nội dung 2	Nội dung 3
Nội dung 1	Nội dung 2	Nội dung 3

Mã HTML


<table cellpadding="0" cellspacing="0">
   <tbody>
      <tr>
         <th>Tiêu đề bảng 1</th>
         <th>Tiêu đề bảng 2</th>
         <th>Tiêu đề bảng 3</th>
      </tr>
      <tr>
         <td>Nội dung 1</td>
         <td>Nội dung 2</td>
         <td>Nội dung 3</td>
      </tr>
      <tr>
         <td>Nội dung 1</td>
         <td>Nội dung 2</td>
         <td>Nội dung 3</td>
      </tr>
      <tr>
         <td>Nội dung 1</td>
         <td>Nội dung 2</td>
         <td>Nội dung 3</td>
      </tr>
   </tbody>
</table>

Tab

Demo:

Tab 1
Tab 2
Tab 3

Nội dung 1

Nội dung 2

Nội dung 3

HTML:


<div class="tabs">
   <ul class="tab-links">
      <li class="active"><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
   </ul>
   <div class="tab-content">
      <div class="tab active" id="tab1">
      Nội dung 1
      </div>
      <div class="tab" id="tab2">
      Nội dung 2
      </div>
      <div class="tab" id="tab3">
      Nội dung 3
      </div>
   </div>
</div>

Trình soạn thảo công thức

Chạy trình soạn thảo công thức

Blog Học Tập