Tự học html

Tự học những thẻ html cơ bản

Categories

Tổng số lượt truy cập

loading...

Monday, August 26, 2013

CSS Background

  8:06 AM    Người

Background-color:

Background-color xác định màu nền cho thành phần.
Ví dụ:

Đoạn văn bản sử dụng CSS Background-color

Heading 3 sử dụng CSS Background-color

Background-image:

Sử dụng một image làm background cho thành phần, giá trị background-image được xác định bằng url(link).
Ví dụ:

Đoạn văn bản sử dụng CSS background-image

Thuộc tính background-repeat

Đoạn văn bản sửa dụng background-image lặp lại theo hàng ngang:

Đoạn văn bản
sử dụng background-repeat: repeat-x
trong trường hợp này sẽ lặp lại
theo hàng ngang

Đoạn văn bản sửa dụng background-image lặp lại theo hàng dọc:

Đoạn văn bản
sử dụng
background-repeat: repeat-y
trong
trường
hợp
này
sẽ
lặp
lại
theo
hàng
dọc

Đoạn văn bản sử dụng background-image lặp lại đều cả background:

Đoạn văn bản
sử dụng
background-repeat: repeat
trong
trường
hợp
này
sẽ
lặp
lại
đều

Đoạn văn bản sử dụng background-image không lặp lại:

Đoạn văn bản
sử dụng
background-repeat: no-repeat
trong
trường
hợp
này
sẽ
không
lặp
lại

Thuộc tính background-posittion: xác định vị trí của ảnh làm background

Ví dụ:

Đoạn văn bản
sử dụng
background-position: leff center trong trường hợp này image sẽ canh lề trái
và nằm giữa đoạn văn bản

  

  No Comments

Sunday, August 25, 2013

Class và ID

  8:12 AM    Người

Class và ID CSS dùng để định dạng một thành phần HTML nào đó, nhưng nếu trong một trang web thành phần HTML đó sẽ có những định dạng khác nhau thì sẽ như thế nào trên trình duyệt.
Ví dụ:
Định dạng cho H1{color:blue; font-size: 12px}
như vậy tất cả các H1 đều có chữ màu blue và cỡ chữ 12. Nhưng trong một số đoạn lại muốn H1 có màu red và yellow.
Class và ID dùng để giải quyết vấn đề này.
Cách sử dụng Class
Đặt tên Class: ".{:}
Ví dụ:
.Vidu{color:green; font-size:25px}
Thẻ Heading 1 không sử dụng Class

Thẻ Heading 1 (không sử dụng class)

Thẻ Heading 1 sử dụng Class (<h1 class="vidu"> Thẻ Heading 1 sử dụng class <h1>)

Thẻ Heading 1 sử dụng class
Cách sử dụng ID
Đặt tên ID: "<#Tên ID>{:}
Ví dụ:
#ViduID{color:red; font-size:25px}
Thẻ Heading 1 sử dụng ID(<h1 id="viduID"> Thẻ Heading 1 sử dụng ID <h1>)

Thẻ Heading 1 sử dụng ID

Khác nhau giữa Class và ID
  • ID là duy nhất, còn Class có nhiều
  • Có thể sử dụng nhiều class cho một thành phần, còn ID thì chỉ có dùng 1

  

  1 Comment

Box model trong CSS

  4:38 AM    Người

Box model trong CSS

Các nội dung của Box-model

Mô hình Box - model

Box - model (Mô hình hộp) là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML, tất cả các thành phần đều tồn tại một hộp bao quanh nó

Boxmodel
Các thành phần của Boxmodel gồm:
  1. Margin:Canh lề của Box so với các thành phần còn lại
  2. Border:Đường viền của Box
  3. Padding:Vùng đệm từ nội dung của Box ra đến đường viền
Mặc định các giá trị Margin, Border, Padding đều bằng 0, chỉ thay đổi khi có sự điều chỉnh.

Margin

Margin tạo ra khoảng cách giữa các Box-model với nhau, có 4 thành phần của margin tương ứng với 4 cạnh của Box:
  1. Margin-top
  2. Margin-right
  3. Margin-bottom
  4. Margin-left
Ví dụ:
3 đoạn paragraph này sử dụng margin mặc định

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Điều chỉnh Margin-top:35px và margin-bottom:33px cho đoạn văn bản số 2

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Border

Border xác định các đường viền trong một Box-model, các thuộc tính của một Border gồm:
  1. Border-style: Kiểu đường viền
  2. Border-color: Màu sắc của đường viền
  3. Border-width: Độ dày của đường viền
Một số border-style:
  • Kiểu Solid
  • Kiểu Dashed
  • Kiểu Dotted
  • Kiểu Double

Padding

Padding xác định khoảng cách từ nội dung đến đường viền (Border), tương tự như margin, padding có thuộc tính tương ứng với 4 border của box
  1. Padding-top
  2. Padding-right
  3. padding-bottom
  4. Padding-left
Ví dụ: 3 đoạn paragraph này sử dụng padding mặc định

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Điều chỉnh padding-top:10px và padding-bottom:5px cho đoạn văn bản số 2

Đoạn văn bản số 1

Đoạn văn bản số 2

Đoạn văn bản số 3

Một số cách viết tắt cho các thuộc tính của Box - model

Các thuộc tính của Margin, Border, Padding áp dụng cho 4 cạnh của một box, do đó, thay vì khai báo thuộc tính cho từng cạnh ta có thể khai báo theo trình tự và trình duyệt tự hiểu các giá trị của mỗi cạnh:

Margin: Thay vì Style="margin-top: 2px; margin-right:3px; margin-bottom:4px; margin-left:5px;", có thể viết ngắn gọn lại thành Style="margin: 2px 3px 4px 5px"

Border Thay vì viết Style="border-width:2px; border-style:solid; border-color:green" có thể viết ngắn gọn lại thành: Style="border: 2px solid green". Thứ tự để viết tắt cho Border là border-width; border-style; border-color.

Padding:Cách viết tắt của Padding tương tự với Margin, có thể viết ngắn gọn thành: Style="padding: 2px 3px 4px 5px"

  

  No Comments

Tuesday, August 20, 2013

Iframe Tag

  7:48 AM    Người

Iframe dùng để hiện thị một trang web trong một trang web

Ví dụ:

Dùng width và height để giới hạn khu vực hiển thị trang web

Ví dụ
width=600px height=500px

Mặc định thì có border bao quanh, muốn bỏ thì set frameborder=0

Ví dụ:

Trên cùng một frame có thể hiển thị theo các trang web khác nhau bằng cách đặt tên cho name cho frame và target của link:

Ví dụ:

   /

  No Comments

Monday, August 19, 2013

Form tag

  9:31 AM    Người

Form được sử dụng để gửi thông tin mà người dùng điền vào đến server. Form được tạo bởi form.
Thành phần quan trọng trong form là input. Input tạo ra các khu vực để người dùng nhập hoặc lựa chọn dữ liệu. Một số dạng input cơ bản:
Text field
Chọn input type=text để hiển thị trường nhập text
Ví dụ:
First name:
Last name:
Password field
Chọn input type=password để hiển thị trường nhập password. Trường này mặc định bắt buộc phải nhập dữ liệu vào.
Ví dụ:
Password:
Check box
Chọn input type=checkbox để hiển thị các check box, có thể chọn một hoặc nhiều checkbox
Ví dụ:
Tôi đang sở hữu 1 chiếc xe máy
Tôi không có chiếc xe máy nào hết
Radio button
Tương tự như check box, nhưng người dùng chỉ được chọn một lựa chọn
Ví dụ: Giới tính
Nam Nữ
Submit
Tạo nút submit Drop-list
Dùng select để tạo các drop-list và option để tạo các giá trị của nó
Ví dụ:
Chọn Nhãn hiệu điện thoại bạn đang sử dụng: Vùng nhập text
Dùng textarea để tạo vùng nhập text, rows và cols để xác định kích thước của textarea

   /

  No Comments

Sunday, August 18, 2013

HTML List

  1:29 AM    Người

Các thành phần của một list

  1. Loại danh sách
    • Đánh số thứ tự (order list) thể hiện bằng ol
    • Không đánh số thứ tự (unorder list) thể hiện bằng ul
  2. Mỗi dòng trong danh sách(iterm), thể hiện bằng li
  3. Mô tả cho danh sách (description), thể hiện bằng dl
    • Xác định iterm cần mô tả bằng dt
    • Mô tả cho iterm bằng dd

Danh sách đánh số thứ tự

Ví dụ:

Các loại trái cây gồm:
  1. Quả cam
  2. Quả chuối

Mô tả list

Quả cam
Quả cam, hình tròn, da màu xanh, khi chín màu vàng
Quả chuối
Quả chuối cũng có màu vàng khi chín

Mặc định sẽ đánh số thứ tự từ 1 đến n, có thể thay đổi kiểu đánh số bằng type. Type = "A","a","I","i".

Mặc định Type A Type a Type I Type i
  1. Quả cam
  2. Quả chuối
  1. Quả cam
  2. Quả chuối
  1. Quả cam
  2. Quả chuối
  1. Quả cam
  2. Quả chuối
  1. Quả cam
  2. Quả chuối

Danh sách Không đánh số thứ tự

Ví dụ:

Các loại trái cây gồm:
  • Quả cam
  • Quả chuối

Mô tả list

Quả cam
Quả cam, hình tròn, da màu xanh, khi chín màu vàng
Quả chuối
Quả chuối cũng có màu vàng khi chín

Mặc định sẽ hiển thị bullet hình tròn đen, có thể thay đổi kiểu đánh số bằng Style=list-style-type. List-style-type = cicrle, square.

Mặc định Cicrle Square
  • Quả cam
  • Quả chuối
  • Quả cam
  • Quả chuối
  • Quả cam
  • Quả chuối

   /

  No Comments

Saturday, August 17, 2013

Table Tag - P4 - Một số thuộc tính khác của Table

  11:01 AM    Người

Các thuộc tính trong bài này:

Độ rộng của Table

Độ rộng của table được xác định bằng width, mặc định thì width đúng bằng độ rộng của ký tự bên trong nó, tuy nhiên bạn có thể chỉnh cho phù hợp với bố cục

Ví dụ:

Table rộng 100% của trang
Độ trộng của ô 1 Độ rộng của ô 2

Table rộng 50% trang (Canh giữa)
Độ rộng của ô 1 Độ rộng của ô 2

Độ cao của Table

Độ cao của table được xác định bằng height, mặc định thì height đúng bằng độ rộng của ký tự bên trong nó, tuy nhiên bạn có thể chỉnh cho phù hợp với bố cục

Ví dụ:

Mặc định
Độ trộng của ô 1 Độ rộng của ô 2

Table cao 50px
Độ rộng của ô 1 Độ rộng của ô 2
Lên đầu trang

Cellpadding

Padding là phần nằm giữa nội dung hiện thị và đường viền (border), chúng tạo khoảng trống với đường viền giúp nội dung dễ nhìn hơn. Có thể quy định padding lớn nhỏ bằng Cellpadding="...px"

Ví dụ:

Padding mặc định
Độ rộng của ô 1 Độ rộng của ô 2

Padding = 10px
Độ rộng của ô 1 Độ rộng của ô 2
Lên đầu trang

Cellspacing

Cellspacing là khoảng cách giữa các ô(cell) trong một bảng, thay đổi cellspace mặc định bằng Cellspacing="...px"

Ví dụ:

Cellspacing mặc định
Độ rộng của ô 1 Độ rộng của ô 2

Cellspacing=10px
Độ rộng của ô 1 Độ rộng của ô 2
Lên đầu trang

Align

Align xác định vị trí của tabe so với đoạn text bao quanh chúng, có thể thay đổi kiểu canh lề bằng Align="left/right/center"

Ví dụ:

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Mặc định không sử dụng canh lề
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Canh lề trái
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Canh lề phải
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Canh giữa
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn

Lên đầu trang

Hspace và Vspace

Hspace và Vspace là khoảng cách từ table đến các đoạn text xung quanh như mô tả dưới đây:


Ví dụ

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Mặc định
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Chỉnh Hspace=20px
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn

Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Chỉnh Vspace=20px
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn



Thuộc tính align được sử dụng để điều chỉnh vị trí của table so với đoạn text bao quanh nó,
Chỉnh cả Hspace và Vspace=20px
Độ rộng của ô 1 Độ rộng của ô 2
nhằm mục đích giúp cho việc trình bày thuận lợi và đẹp hơn




Lên đầu trang

   /

  No Comments

Friday, August 16, 2013

Table Tag - P3 - Merge ô trong Table

  9:47 AM    Người

Trong excel, chúng ta có thể merge 2 hay nhiều ô lại thành một ô để phục vụ cho yêu cầu trình bày. Trên HTML cũng vậy:
  • Để merge 2 hay nhiều dòng, dùng rowspan
  • Để merge 2 hay nhiều cột, dùng colspan
Rowspan
Câu lệnh:
><table border="3">
<tr>
<td>Họ tên</td>
<td>Nguyễn Văn A</td>
</tr>
<tr>
<td rowspan=2>Địa chỉ</td>
<td>Công ty</td>
</tr>
<tr>
<td>Nhà riêng</td>
</tr>
</table> 
Kết quả:
Họ tên Nguyễn Văn A
Địa chỉ Công ty
Nhà riêng
Colspan
Câu lệnh:
<table border="3">
<tr>
<td colspan=2> Nguyễn Văn A</td>
</tr>
<tr>
<td>Địa chỉ</td>
<td>Số điện thoại</td>
</tr>
</table>
Kết quả:
Nguyễn Văn A
Địa chỉ Số điện thoại

   /

  No Comments

Thursday, August 15, 2013

Table Tag - P2 - Màu sắc trong table

  10:36 AM    Người

Có 2 thành phần trong Table có thể tùy chỉnh màu sắc:
  • Border
  • Background
Quay trở lại ví dụ cũ trong bài trước
  • Màu sắc của Border được thể hiện bằng bordercolor
Câu lệnh:
<table border=3 bordercolor="pink">
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
</tr>
<tr>
<td>Ô số 3</td>
<td>Ô số 4</td>
</tr>
</table>
Kết quả:
Ô số 1 Ô số 2
Ô số 3 Ô số 4
  • Màu sắc của Background được thể hiện bằng bgcolor (Màu đơn)/ Background (Hình ảnh)
Background màu đơn
Câu lệnh:
<table border=3 bgcolor="pink">
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
</tr>
<tr>
<td>Ô số 3</td>
<td>Ô số 4</td>
</tr>
</table>
Kết quả:
Ô số 1 Ô số 2
Ô số 3 Ô số 4
Background là một hình ảnh
Giả sử là hình ảnh này:
Vì hình nền màu xanh nên sẽ chuyển màu chữ sang màu trắng để dễ xem
Câu lệnh:
<table><font color="white"><table border=3 Background="http://www.htmlcodetutorial.com/tables/deepsea.gif">
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
</tr>
<tr>
<td>Ô số 3</td>
<td>Ô số 4</td>
</tr></font>
</table>
Kết quả:
Ô số 1 Ô số 2
Ô số 3 Ô số 4

  2 Comments

Wednesday, August 14, 2013

Table Tag - P1

  8:14 AM    Người

Tạo bảng trên HTML bằng lệnh table
Các thành phần của table gồm:

  • Dòng (Row): Một bảng được chia thành nhiều dòng
  • Ô (Cell): Mỗi dòng có nhiều ô
  • Đường viền (Border): Mặc định border là trắng

Câu lệnh:
<table border=1>
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
</tr>
<tr>
<td>Ô số 3</td>
<td>Ô số 4</td>
</tr>
</table>
Kết quả:
Ô số 1 Ô số 2
Ô số 3 Ô số 4
Bảng này không có tiêu đề, để điền tiêu đề cho bảng, dùng caption
<table><caption> </caption> </table>
Bổ sung tiêu đề vào bảng
<table border=1>
<caption>Bảng ví dụ</caption>
<tr>
<td>Ô số 1</td>
<td>Ô số 2</td>
</tr>
<tr>
<td>Ô số 3</td>
<td>Ô số 4</td>
</tr>
</table>
Kết quả:
Bảng ví dụ
Ô số 1 Ô số 2
Ô số 3 Ô số 4

   /

  No Comments

Sunday, August 11, 2013

Chèn hình ảnh - Images Tag - P3

  8:32 AM    Người

Thuộc tính Align
Trong một số trường hợp, phải sử dung align để hiển thị hình ảnh cho đẹp hơn khi nằm chung với các đoạn text:
Mình có một emotion dễ thương như thế này: Emotion dễ thương
Chế độ hiển thị mặc định có vẻ như làm bức ảnh ở phía trên so với dòng text. Align với các thuộc tính của nó cho phép điều chỉnh vị trí:
  • Bottom: Đoạn text ở phía dưới ảnh (mặc định)
  • Middle: Đoạn text ngang hàng với text
  • Top: Đoạn text ở phía trên ảnh
<img src="Link" align="Đoạn text title="Đoạn text khi rê chuột đến ảnh" Align="Bottom/Middle/ Top">
Sử dụng emotion ở trên cho các trường hợp:
Bottom: Chế độ mặc định giống với trường hợp trên: Emotion

Middle: Text và hình ảnh ngang hàng:Emotion

Top: Ngược lại với thuộc tính Bottom: Emotion
Tạo liên kết bằng hình ảnh
HTML cho phép các tag lồng vào nhau, do đó, có thể thiết kế để khi người dùng click vào hình ảnh thì chuyển sang một trang khác.
Chèn liên kết cho emotion trên:
<a href="http://tuhochtml.blogspot.com/" target="_blank" title="Liên kết từ hình ảnh"><img src="http://www.dethiielts.com/wp-content/uploads/2013/04/emotion_f083-20111115085503-00005.png" alt=Emotion dễ thương" title="Emotion dễ thương" align="middle" width=25px>
Kết quả Emotion

   /

  No Comments

Chèn hình ảnh - Images Tag - P2

  2:33 AM    Người

Trog bài trước chúng ta đã biết cách chèn hình ảnh trên HTML. Trong bài này sẽ giúp làm những hình ảnh đó đẹp và phù hợp với bố cục của cả trang.
Kích thước của ảnh
Dùng width (chiều rộng) và height (chiều cao) để tùy chỉnh lại kích thước của ảnh
Câu lệnh:
<img src="link" alt="Đoạn text" weight="...px" height="...px">
Bạn thấy tấm ảnh này trong bài trước, có vẻ hơi nhỏ:

Thay đổi width để làm bức ảnh lớn lên
Câu lệnh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjfsmqUVM_ayvjRt5_9a9tUETByG_e-ymk08rBxQsDNBzL2MUc5J7yKE4Q2k3DTJFJjWXqQI1-xv1g5cvSTjWoWfH69UnJeydQHFGap2CBhaZD3naxQScYmZiliGoi0YuA41bYXiRmlM/w431-h585-no/awesome-baby-0.jpg" alt="Baby dễ thương" width="200" />
Kết quả:
Có thể điều chỉnh height nếu cần thiết
Câu lệnh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjfsmqUVM_ayvjRt5_9a9tUETByG_e-ymk08rBxQsDNBzL2MUc5J7yKE4Q2k3DTJFJjWXqQI1-xv1g5cvSTjWoWfH69UnJeydQHFGap2CBhaZD3naxQScYmZiliGoi0YuA41bYXiRmlM/w431-h585-no/awesome-baby-0.jpg" alt="Baby dễ thương" height="300" />
Kết quả:

   /

  2 Comments

Saturday, August 10, 2013

Chèn hình ảnh - Images tag - P1

  10:20 PM    Người

Chèn hình ảnh vào bằng câu lệnh:
<img src="url" alt="Đoạn text">
  • Url: Địa chỉ của ảnh
  • Alt: Đoạn text hiển thị trong trường hợp trình duyệt không thể load ảnh
Ví dụ:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjfsmqUVM_ayvjRt5_9a9tUETByG_e-ymk08rBxQsDNBzL2MUc5J7yKE4Q2k3DTJFJjWXqQI1-xv1g5cvSTjWoWfH69UnJeydQHFGap2CBhaZD3naxQScYmZiliGoi0YuA41bYXiRmlM/w431-h585-no/awesome-baby-0.jpg" alt="Baby dễ thương">
Kết quả:
Baby dễ thương
Alt có hiểu quả khi ảnh không thể load, như trong trường hợp link ảnh gốc bị xóa đi, bạn sẽ thấy như thế này
Baby dễ thương
Mình thử sử dụng title để khi người dùng rê chuột vào sẽ hiển thị nội dung của bức ảnh
Baby dễ thương

  

  No Comments

Friday, August 9, 2013

Link Tag

  8:45 AM    Người

Tạo một link trong HTML khá đơn giản. Cú pháp thế này
 <a href='url> Link text </a>

  • Url: Tất nhiên là Url của trang mà bạn muốn Link tới
  • Link text: Đoạn text hiển thị để người dùng click vào đó mà đến link

Ví dụ: Mời bạn ghé thăm <a href="http://tuhochtml.blogspot.com/">Blog của tôi </a>
Kết quả: Mời bạn ghé thăm Blog của tôi

Thuộc tính Target
Target giúp bạn xác định rằng: Khi click vào link, sẽ mở ra trang liên kết trên một tab mới, hay thay thế trang hiện tại

Như liên kết ở ví dụ trên đây, blog sẽ thay thế bài viết bạn đang đọc.
Giờ bạn có thể cho hiển thị trên một cửa sổ mới để không làm ảnh hướng đến việc đọc bài này:
Ví dụ:
Mời bạn ghé thăm <a href="http://tuhochtml.blogspot.com/" target="_blank">Blog của tôi </a>
Kết quả:Mời bạn ghé thăm Blog của tôi
Thử click vào link để cảm nhận nhé

Thuộc tính title
Với thuộc tính này, khi người dùng rê chuột đến liên kết thì sẽ hiển thị một đoạn mô tả mà bạn gõ vào

Một liên kết đầy đủ cho ví dụ ở trên sẽ là:
Mời bạn ghé thăm <a href="http://tuhochtml.blogspot.com/" target="_blank" title="Blog tự học HTML">Blog của tôi </a>
Bạn sẽ thấy kết quả ở đây: Mời bạn ghé thăm Blog của tôi

  

  1 Comment

Wednesday, August 7, 2013

Font Tag

  8:21 AM    Người

Font tag giúp ta điều khiển được

  • Font chữ (face)
  • Cỡ chữ (Size)
  • Màu sắc (color)

Cú pháp của font: <font size="number" face="font_family" color=colorname"> </font>

Ví dụ: <font size=5px face="calibri"color="red"> Send me an angel </font>

Kết quả: Send me an angel

Màu mè với màu green:
Send me an angle

Một chút thú vị bởi lệnh bdo

Send me an angle

   /

  No Comments

Tuesday, August 6, 2013

Text Formatting Tags

  8:54 PM    Người

Như tiêu đề, chúng ta sẽ đi qua một số tag để định dạng Text trong HTML. Có thể thấy một số định dạng phổ biến

  • In đậm (Bold)
  • In nghiêng (Italic)
  • Gạch chân (Underline)
  • Cỡ chữ lớn nhỏ (Big, Small)

1. In đậm
Cú pháp: <b> </b>
Ví dụ: <b> Riêng một góc trời </b>
Kết quả: Riêng một góc trời

2. In nghiêng
Cú pháp : <i> </i>
Ví dụ: <i> Riêng một góc trời</i>
Kết quả: Riêng một góc trời

3. Gạch chân 
Cú pháp: <i> </i>
Ví dụ: <i> Riêng một góc trời</i>
Kết quả: Riêng một góc trời

4. Cỡ chữ nhỏ
Cú pháp: <small> </small>
Ví dụ: <small> Riêng một góc trời</small>
Kết quả: Riêng một góc trời

5.Cỡ chữ lớn
Cú pháp: <big> </big>
Ví dụ: <big>Riêng một góc trời </big>
Kết quả: Riêng một góc trời

   /

  No Comments

Subscribe to: Posts (Atom)