Hoclaptrinh.net. Theme images by Storman. Powered by Blogger.

Instagram posts

About us

12/28/15

[HTML] Bài 15: Cách tạo bảng với thẻ table trong HTML (tag table)

- No comments
Trong nội dung bài này, các bạn sẽ tìm hiểu về bảng, cách khai báo, sử dụng bảng và các thẻ bên của bảng. Việc áp dụng đa dạng các thuộc tính của thẻ table tạo ra sự linh hoạt trong thiết kế bố cục của website.

 15.1. Bảng
Bảng thường được sử dụng để tạo các văn bản nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau rất tiện lợi trong thiết kế và trình bày trang web.
Cú pháp:
Cách khai báo bảng trong HTML
Hình 15.1. Cấu trúc thẻ table
Trong đó:
- Thẻ <table>...</table>: khai báo bắt đầu một bảng;
- Thẻ <tr>..</tr>: khai báo một dòng của bảng;
- Thẻ <td>..</td>: khai báo một ô của bảng;
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
    <title>http://hoclaptrinh24.blogspot.com/</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
 <table style="width:100%" border="1">
  <tr>
    <td>Hàng 1, Cột 1</td>
    <td>Hàng 1, Cột 2</td>
    <td>Hàng 1, Cột 3</td>
  </tr>
  <tr>
   <td>Hàng 2, Cột 1</td>
    <td>Hàng 2, Cột 2</td>
    <td>Hàng 2, Cột 3</td>
  </tr>
  <tr>
    <td>Hàng 3, Cột 1</td>
    <td>Hàng 3, Cột 2</td>
    <td>Hàng 3, Cột 3</td>
  </tr>
</table>
</body>

</html>
Kết quả:
Sử dụng thẻ table trong HTML
Hình 15.2. Ví dụ bảng với 3 hàng, 3 cột
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
    <title>http://www.kythuatlaptrinh.xyz/</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
 <table style="width:50%" border="1">
  <tr>
    <td>Hàng 1, Cột 1</td>    
  </tr>
  <tr>
    <td>Hàng 2, Cột 1</td>    
  </tr>
  <tr>
    <td>Hàng 3, Cột 1</td>    
  </tr>
</table>
</body>

</html>
Kết quả:
Ví dụ thẻ table trong htmlHình 15.3. Ví dụ bảng với 3 hàng, 1 cột

15.2. Một số thuộc tính của bảng
15.2.1. Thuộc tính Border




10/30/15

[HTML] Bài 14: Sử dụng CSS trong HTML (Cascading Style Sheets)

- No comments
Trong những bài trước, các bạn đã được thực hành một số thẻ HTML căn bản và ứng dụng chúng trong xây dựng trang web. Việc viết lại, sử dụng lại nhiều lần một thẻ nào đó làm ta mất thời gian soạn thảo và không tạo ra sự nhất quán giữa các thẻ đó. Để khắc phục tình trạng đó, người ta sử dụng CSS (Cascading Style Sheets). CSS là bảng định kiểu cho phép định dạng một số tính chất, thuộc tính thông dụng cho tất cả các đối tượng trên trang.
Lợi ích của sử dụng CSS
- Tiết kiệm thời gian viết mã.
- Khi thay đổi định dạng các thẻ HTML, chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó.
- Có thể kết hợp dùng CSS và JavaScript để tạo các hiệu ứng đặc biệt trên trang web.
Bất lợi của CSS
- Không phải 100% trình duyệt đều chấp nhận CSS hoàn toàn.

 14.1. Phân loại theo cách sử dụng CSS
CSS được sử dụng trên các trang HTML theo 3 cách:
- Inline Style: sử dụng thuộc tính Style trực tiếp trong các thẻ HTML
- Internal Style: khai báo trong cặp thẻ <style></style> đặt ở trong phần <head> của trang HTML
- External Style: sử dụng các file bên ngoài chứa các khai báo thẻ HTML sử dụng chung.

 14.2. Cú pháp CSS
Kiểu CSS được định nghĩa theo cú pháp
Tên thẻ {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;....., thuộc tính n: giá trị n }
Ví dụ: h1 {color:blue}   <!-- thẻ h1 có thuộc tính color bằng blue-->

14.3. Inline Style
Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng cách sử dụng thuộc tính style bên trong thẻ muốn định dạng
Cú pháp:
<Tên thẻ Style="thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;....">
      Nội dung văn bản muốn định dạng
</Tên thẻ>
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
    <title>http://hoclaptrinh24.blogspot.com/</title>
</head>
<body>
<h1 style="color:red">Dong tieu de nay co mau do voi kich thuoc cua the H1</h1>
</body>

</html>
Kết quả:
Ví dụ về Inline style trong định kiểu CSS
Hình 14.1. Sử dụng inline style trong CSS

 14.4. Internal Style
Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản, bảng mẫu sẽ được định nghĩa ở phần đầu trang và sử dụng cho cả trang HTML. Với kiểu Internal Style này sẽ tạo sự thuận lợi trong định nghĩa kiểu trên một trang, nhưng sẽ gây ra khó khăn trong việc sử dụng chung thẻ có cùng kiểu trên nhiều trang.
Cú pháp:
<head>
     <style>
     Tên thẻ 1 {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;...}     
     Tên thẻ 2 {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;...}
     .........
    Tên thẻ n {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;...}
    </style>
</head>
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
    <title>http://hoclaptrinh24.blogspot.com/</title>
<style>
body {background-color:lightgrey}
h1   {color:maroon}
h2   {color: chartreuse; font-family: Arial}
p    {color:blueviolet}
</style>
</head>
<body>
<h1>Day la tieu de h1</h1>
<h2>Day la tieu de h2</h2>
<p>Day la doan van ban</p>
</body>
</html>
Kết quả:
hoclaptrinh24.blogspot.com - sử dụng css - internal style
Hình 14.2. Sử dụng internal style trong CSS

 14.5. External Style
Là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML. Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một Website.
Cách tạo:
B1. Tạo một tập tin văn bản mới
B2. Nhập tên các thẻ muốn định dạng thuộc tính theo mẫu:Tên thẻ 1 {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;...}     
Tên thẻ 2 {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;...}
 .........
Tên thẻ n {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2;...}

B3. Lưu tập tin với định dạng Text Only và có phần đuôi mở rộng .css

Cách dùng:
Trong phần đầu của trang HTML cần sử dụng các thẻ css đã định nghĩa sẵn, gọi thẻ <link> và nhập các thuộc tính như sau
<head>
<link rel=stylesheet type=”text/css” href=”tên tập tin.css”>
</head>
 Ví dụ 3:
Tạo tập tin style1.css và gõ nội dung sau:
h1 {
    color: brown;
    font-family: arial;
    font-size:200%;

 }
p  {
    color: darkorchid;
    font-family: tahoma;
    font-size:170%;
}
Trong trang index.html, tạo một trang đơn giản có nội dung sau
<!DOCTYPE html>
<html>
<head>
    <title>http://hoclaptrinh24.blogspot.com/</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>Day la tieu de h1</h1>
<p>Day la doan van</p>
</body>

</html>
Kết quả:
Khai báo style.css
Hình 14.3. Khai báo tập tin style1.css chứa các thẻ html

Sử dụng external css

Hình 14.4. Sử dụng thẻ css - external css

Tóm tắt nội dung bài học
- Sử dụng thuộc tính style trong các thẻ HTML
- Sử dụng phần tử Style để định nghĩa tập tin Internal CSS
- Sử dụng thẻ <link> để liên kết tới file css tạo sẵn
- Sử dụng thẻ <style> và <link> đặt trong thẻ <head> để định kiểu CSS

9/1/15

[HTML] Bài 13: Thẻ siêu liên kết (hyperlinks)

- No comments
Các liên kết trong HTML được gọi là siêu liên kết (hyperlinks). Một siêu liên kết có thể là văn bản hoặc hình ảnh, khi người dùng click vào sẽ chuyển sang một trang HTML hoặc đoạn văn bản khác.
13.1. Thẻ <a>: Định nghĩa một đường liên kết
Cú pháp:
            <a href="url">Nhãn liên kết</a>
Trong đó:
- href: thuộc tính đường dẫn, url là địa chỉ liên kết muốn chuyển tới.
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="http://minhhienict.blogspot.com/">Trang học lập trình miễn phí</a></p>
</body>

</html>
Kết quả:
13.2. Liên kết nội bộ: Liên kết sang một trang cùng địa chỉ web hiện tại. Liên kết không có dạng http://
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="link_basic.html">Trang chủ</a></p>
</body>

</html>
Kết quả:
13.3. Tạo một đánh dấu (bookmark): Mục đích để tạo liên kết tới một vị trí xác định trên trang web hoặc trang khác cùng một website. 
Cú pháp:
            <a name="tên bookmark">Nhãn liên kết</a>Nội dung
            <a href="#tên bookmark">Nhãn của văn bản liên kết</a>
Ví dụ 3:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<A href = "#Internet">Giới thiệu về Internet</A><br>
<A href = "#HTML">Giới thiệu về HTML</A><br>

 <A name = "Internet">Giới thiệu về Internet</A><br>
Internet là một mạng của các mạng. Nghĩa là, các mạng máy tính được liên kết với các mạng khác, nối các nước và ngày nay là toàn cầu. Giao thức truyền thông là TCP/IP cung cấp liên kết với tất cả các máy tính trên thế giới.<br>
<A name = "HTML">Giới thiệu về HTML</A><br>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dụng để tạo và nhận ra tài liệu. Mặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML), ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML. SGML là một phương pháp trình bày các ngôn ngữ định dạng tài liệu. HTML là ngôn ngữ đánh dấu được sử dụng để tạo tài liệu HTML. Các hướng dẫn chỉ rõ một trang web nên được hiển thị như thế nào trong trình duyệt
</body>

</html>
Kết quả:
tạo bookmark trong siêu liên kết
Ví dụ 4:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>

 <p><a href="#C4">Chuyển tới chương 4</a></p>

 <h2>Chương 1</h2>
<p>Giới thiệu chung</p>

 <h2>Chương 2</h2>
<p>Bộ xử lý trung tâm</p>

 <h2>Chương 3</h2>
<p>Hệ thống nhớ</p>

 <h2 id="C4">Chương 4</h2>
<p>Tập lệnh và các chế độ địa chỉ</p>

 <h2>Chương 5</h2>
<p>Hệ thống vào ra</p>

 <h2>Chương 6</h2>
<p>Màn hình</p>

 <h2>Chương 7</h2>
<p>Bàn phím</p>

 <h2>Chương 8</h2>
<p>Ổ đĩa</p>

 <h2>Chương 9</h2>
<p>Thiết bị ghép nối và truyền thông</p>

 </body>

</html>
Kết quả:

 13.4. Màu của liên kết
Mặc định, một liên kết sẽ xuất hiện như sau:
- Liên kết chưa được click sẽ có gạch dưới màu xanh lam
- Liên kết đã được click sẽ có gạch dưới màu tím
- Liên kết kích hoạt có gạch dưới màu đỏ
Ví dụ 5:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>
<p>Bạn có thể thay đổi màu mặc định của liên kết</p>

 <a href="link_internal2.html" target="_blank">Đề cương chi tiết</a> 
</body>

</html>
Kết quả:
Màu của liên kết
13.5. Thuộc tính target của thẻ a: Xác định vị trí mở văn bản liên kết
Cú pháp:
            <a href="url" target="value">Nhãn liên kết</a>
Ví dụ 6:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<a href="http://minhhienict.blogspot.com/" target="_blank">Trang blog lập trình</a> 
</body>

</html>
Các giá trị của thuộc tính target:
- _blank: mở liên kết trong một cửa sổ mới hoặc tab mới.
- _self: mở liên kết trong khung hiện tại (mặc định).
- _parent: mở liên kết trong một khung cha.
- _top: mở liên kết trong một khung kín màn hình.
Kết quả:
13.6. Tạo liên kết bằng ảnh
Cú pháp:
           <a href="url"><img src="url" alt="text" width="value" height="value"></a>
Ví dụ 7:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<a href="link_basic.html">
  <img src="1.jpg" alt="Hướng dẫn học HTML" width="210" height="116" style="width:42px;height:42px;border:0">
</a> 
</body>

</html>
Kết quả:

[HTML] Bài 12: Thẻ ghi chú (comment)

- No comments
Trong bài này, các bạn sẽ được hướng dẫn cách sử dụng thẻ ghi chú (comment) trong viết mã HTML. Việc ghi chú khi viết mã, sẽ tạo thuận lợi cho người lập trình trong việc chỉnh, sửa, dò mã lỗi.
tạo thẻ ghi chú (comment)
Thẻ ghi chú: Tạo ghi chú công việc.
Cú pháp:
            <!--nội dung ghi chú -->
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<!-- Đây là ghi chú -->
<p>Đoạn văn bản.</p>
<!-- Đoạn văn bản ghi chú nằm đây -->
</body>
</html>
Sử dụng ghi chú trong viết mã nguồn rất thuận tiện cho việc rà soát lỗi, bằng cách đóng (khoanh vùng) đoạn mã lỗi lại để xử lý thay vì xóa đoạn mã đó đi.
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<!-- Hình ảnh bên dưới sẽ không hiển thị lên
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
</body>
</html>

8/31/15

[HTML] Bài 11: Thẻ định dạng mã máy tính (Computer Code)

- No comments
Bài này, các bạn sẽ tìm hiểu một số thẻ định dạng mã máy tính như: các kí tự nhập, các mẫu xuất văn bản, mã ngôn ngữ lập trình, biến, biểu thức toán học, vật lý.
11.1. Thẻ <kbd>: Định dạng các phần từ đầu vào từ bàn phím
Cú pháp:
             <kbd>Nội dung cần nhập vào</>
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Thẻ kbd biểu diễn kí tự nhập vào từ bàn phím:</p>
<p><kbd>File | Open...</kbd></p>
</body>

</html>
Kết quả:
11.2. Thẻ <samp>: Định dạng mẫu ký tự xuất ra từ máy tính
Cú pháp:
             <samp>Thông tin cần xuất ra</samp>
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Thông tin phiên bản nhân Linux</p>
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
</body>
</html>
Kết quả:
11.3. Thẻ <code>: Định nghĩa mã lập trình
Cú pháp:
            <code>Mã lập trình</code>
Ví dụ 3.1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Thông tin cầu thủ</p>
<code>
var person = {firstName:"Beckham", lastName:"David", age:37}
</code>
</body>

</html>
Kết quả:
Thẻ code không chứa đoạn mã bao gồm ký tự trắng và xuống dòng. Để khắc phục, các bạn sử dụng thêm cặp thẻ <pre> bao quanh.
Ví dụ 3.2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Thông tin cầu thủ</p>
<code>
<pre>
var person = {
    firstName:"Beckham",
    lastName:"David",
    age:37,
    eyeColor:"Black"
}
</pre>
</code>
</body>

</html>
Kết quả:
11.4. Thẻ <var>: Định nghĩa biến toán học
Cú pháp:
             <var>Biến cần định nghĩa</var>
Ví dụ 4:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Công thức Einstein:</p>
<p><var>E</var> = <var>m</var> <var>c</var><sup>2</sup></p>
</body>

</html>
Kết quả:

[HTML] Bài 10: Thẻ trích dẫn(Quotations)

- No comments
Việc sử dụng thẻ trích dẫn trong các bài viết HTML không quá thường xuyên, nhưng hiểu và biết cách vận dụng thích hợp, sẽ mang lại hiệu quả cao cho trang web trong việc nhấn mạnh, tạo sự nổi bật trong cách trình bày văn bản. Trong bài 10, các bạn sẽ được tìm hiểu và sử dụng các thẻ trích dẫn này qua các ví dụ sinh động.
10.1. Thẻ <q>: Mô tả đoạn trích dẫn ngắn
Cú pháp:
             <q>Nội dung cần trích dẫn</q>
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><h2>Tình yêu là: <q> một cuộc cách mạng giải phóng chủ nghĩa độc thân.</q></h2></p>
</body>

</html>
Kết quả:
10.2. Thẻ <blockquote>: Mô tả đoạn trích dẫn dài
Cú pháp:
             <blockquote>Nội dung cần trích dẫn</blockquote>
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><h2>Đơn côi:</h2>
<blockquote>
      Hoàng hôn xuống cho lòng em buồn thẳm </br>
      Hạnh phúc nào sao mãi vẫn xa xăm </br>
      Gió vẫn thổi vào hồn em lạnh buốt </br>
      Mưa tâm hồn làm lệ mãi tuôn rơi </br>
</blockquote>
</p>
</body>

</html>
Kết quả:
10.3. Thẻ <abbr>: Mô tả chữ viết tắt hay từ viết tắt
Cú pháp:
            <abbr title="Từ giải nghĩa">Từ viết tắt</abbr>
Ví dụ 3:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>The <abbr title="Fédération Internationale de Football Association">FIFA</abbr> was founded in 1904.</p>
</body>

</html>
Kết quả:
10.4. Thẻ <address>: Mô tả thông tin liên hệ
Cú pháp:
             <address>Từ viết tắt</address>
Ví dụ 4:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>
Style tag:
http://minhhienict.blogspot.com/2015/08/html-bai-9-inh-kieu-style.html
</p>
<address>
Written by Hien Minh.<br> 
Visit us at:<br>
http://minhhienict.blogspot.com/<br>
</address>
</body>

</html>
Kết quả:
10.5. Thẻ <cite>: Mô tả tiêu đề công việc
Cú pháp:
            <cite>Tiêu đề cần mô tả</cite>
Ví dụ 5:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>

</html>
Kết quả:

8/30/15

[HTML] Bài 9: Thẻ định kiểu (Style)

- No comments
Mỗi thẻ HTML đều có một kiểu mặc định (màu nền trắng và màu chữ đen). Để thay đổi kiểu mặc định trong các thẻ HTML này, người ta sử dụng thuộc tính style. 
Ví dụ sau đây sẽ cho ta thấy cách thay đổi màu nền mặc định từ trắng thành vàng;
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body style="background-color:yellow">     <!-- Màu nền vàng -->
<h1>Dòng tiêu đề</h1>
<p>Đoạn văn bản.</p>
</body>
</html>
Kết quả:
9.1. Thuộc tính Style
Cú pháp: style = "property: value"

 9.2. Thuộc tính màu văn bản: Định màu của văn bản sẽ được sử dụng
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<h1 style="color:blue">Đây là tiêu đề</h1>       <!-- Màu chữ xanh -->
<p style="color:red">Đây là đoạn văn.</p>        <!-- Màu chữ đỏ -->
</body>
</html>
Kết quả:
9.3. Thuộc tính Font chữ và kích cỡ chữ: Định kích thước và font chữ sẽ sử dụng cho văn bản
Cú pháp:
- style="color: value"                <!-- Màu chữ -->
- style="font-family: value"      <!-- Font chữ -->
- style="font-size: value"          <!-- Cỡ chữ -->
Ví dụ 3: Xác định font chữ
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<h1 style="font-family:verdana">Đây là tiêu đề</h1>
<p style="font-family:courier">Đây là đoạn văn.</p>
</body>
</html>
Kết quả:

 Ví dụ 4: Xác định kích cỡ chữ
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<h1 style="font-size:300%">Đây là tiêu đề</h1>
<p style="font-size:160%">Đây là đoạn văn.</p>
</body>
</html>
Kết quả:
9.4. Thuộc tính căn lề văn bản: Định vị trí hiển thị của văn bản
Ví dụ 5:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<h1 style="text-align:center">Đây là tiêu đề</h1>
<p>Đây là đoạn văn.</p>
</body>
</html>
Kết quả:

8/29/15

[HTML] Bài 8: Thẻ định dạng văn bản (Formatting)

- No comments
Định dạng văn bản (text) luôn là một vấn đề quan trọng trong bất kỳ tài liệu, văn bản nào. Để hiểu và vận dụng thành thạo các thẻ định dạng văn bản trong HTML không phải vấn đề khó khăn. Trong bài học này, các bạn sẽ tìm hiểu cách sử dụng các thẻ định dạng văn bản và cách kết hợp các thẻ với nhau để tăng hiệu quả trình bày của văn bản.

 8.1. Thẻ B: Định dạng chữ đậm
Cú pháp:
           <B>Nội dung chữ đậm</B>
Ví dụ 1:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>

<p><b>Văn bản chữ đậm</b>.</p>
</body>
</html>
Kết quả:
8.2. Thẻ Strong: Định dạng chữ đậm (giống thẻ B)
Cú pháp:
           <STRONG>Văn bản cần nhấn mạnh</STRONG>
Ví dụ 2:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>

<p><strong>Văn bản chữ đậm dùng thẻ strong</strong>.</p>
</body>
</html>
Kết quả:

8.3. Thẻ I: Định dạng chữ nghiêng
Cú pháp:
           <I>Nội dung chữ nghiêng</I>
Ví dụ 3:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><I>Văn bản chữ nghiêng</I>.</p>
</body>
</html>
Kết quả:
8.4. Thẻ EM: Định dạng chữ nghiêng (giống thẻ I)
Cú pháp:
           <EM>Văn bản được nhấn mạnh</EM>
Ví dụ 4:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><EM>Văn bản chữ nghiêng dùng thẻ EM</EM>.</p>
</body>
</html>
Kết quả:

8.5. Thẻ U: Định dạng chữ gạch chân.
Cú pháp:
           <U>Văn bản chữ gạch chân</U>
Ví dụ 5:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><U>Văn bản chữ gạch chân</U>.</p>
</body>
</html>
Kết quả:
8.6. Thẻ SMALL: Định dạng cỡ chữ nhỏ hơn chữ xung quanh.
Cú pháp:
           <SMALL>Chữ nhỏ hơn xung quanh</SMALL>
Ví dụ 6:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <SMALL>Chữ nhỏ hơn xung quanh</SMALL> Chữ bình thường.</p>
</body>
</html>
Kết quả:
 
8.7. Thẻ BIG: Định dạng cỡ chữ lớn hơn chữ xung quanh.
Cú pháp:
           <BIG>Chữ lớn hơn xung quanh</BIG>
Ví dụ 7:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <BIG>Chữ lớn hơn xung quanh</BIG> Chữ bình thường.</p>
</body>
</html>
Kết quả:
8.8. Thẻ MARK: Định dạng văn bản nổi bật (highlight).
Cú pháp:
           <MARK>Văn bản cần nhấn mạnh</MARK>
Ví dụ 8:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <MARK>Chữ cần nổi bật</MARK> Chữ bình thường.</p>
</body>
</html>
Kết quả:
 
8.9. Thẻ DEL: Định dạng văn bản bị loại bỏ (gạch ngang)
Cú pháp:
           <DEL>Văn bản cần đánh dấu loai bỏ</DEL>
Ví dụ 9:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <DEL>Chữ đánh dấu bị loại</DEL> Chữ bình thường.</p>
</body>
</html>
Kết quả:
8.10. Thẻ SUB : Định dạng văn bản nhỏ bên dưới (chỉ số dưới)
Cú pháp:
           <SUB>Văn bản cần áp dụng</SUB>
Ví dụ 10:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>H2SO4</p>
<p>H<SUB>2</SUB>SO<SUB>4</SUB></p>
</body>
</html>
Kết quả:
8.11. Thẻ SUP : Định dạng văn bản nhỏ bên trên (chỉ số trên)
Cú pháp:
           <SUP>Văn bản cần áp dụng</SUP>
Ví dụ 11:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>AX2+BX+C=0</p>
<p>AX<SUP>2</SUP>+ BX + C = 0</p>
</body>
</html>
Kết quả:

Submit
Theo dõi bài viết mới nhất

Hoàn thành biểu mẫu dưới để nhận được thông báo mới nhất từ hoclaptrinhweb.net

Bài viết mới

© Copyright 2016 Hoclaptrinh24. Designed by Bloggertheme9. Distributed by Blogger Template.