Sunday, March 27, 2016

CODE BẢN HTML By Star Hoàng

 Cơ bản HTML 


Mục lục:


Phần 1: Trang trí chữ

In đậm = 
<b>In đậm</b>
Nghiêng = 
<i>Nghiêng</i>
Gạch dưới = 
<u>Gạch dưới</u>
Gạch ngang chữ = 
<s>Gạch ngang chữ</s>
Chữ Sub Script = Chữ 
<sub>Sub Script</sub>
Chữ Super Script = Chữ 
<sup>Sub Script</sup>
Để kết hợp 2 kiểu trang trí, bạn nhập như sau:
Ví dụ: In đậm + gạch dưới = 
<b><u>Text</u></b>

Có nhiều kiểu các bạn cứ thử rồi sẽ thấy kết quả nhé!!
-----------------------------------------

 Thay đổi màu chữ:

<font color="
#mã màu">Text</font>
hoặc 
<font color="tên màu">Text</font>
Ví dụ: 
<font color="red">Text</font>
Mã màu bạn có thể lấy bằng cách sử dụng Photoshop.
-----------------------------------------
Thay đổi kích thước chữ:

<font size="kích thước bạn muốn">Text</font>
Ví dụ: 
<font size="7">Text</font>
Có 7 kích thước để bạn lựa chọn
1 2 3 4 5 6 7
-----------------------------------------

Thay đổi font chữ:

<font face="tên font">Text</font>

Một vài font phổ biến: Arial, Arial black, Book Antiqua, Century Gothic, Courier new, Garamound, Georgia, Impact, Lucida Console, Monotype Corsiva, Small Fonts, Tahoma, Times New Roman, Trebuchet Ms, Verdana

Ví dụ: 
<font face="Impact">Text</font>
-----------------------------------------

 Làm nền cho chữ:
<font style="background-color: #mã màu">Text</font>
Ví dụ: <font style="background-color: #c4c4c4">Text</font>
Để làm cho nền chữ linh hoạt hơn khi xuống dòng, bạn thêm
 "display:block" vào mã.
Ví dụ: <font style="background-color: #c4c4c4; display:block">Text</font> 
----------------------------------------------------------------------------------------------------
Phần 2: Định dạng văn bản

 Để hình ảnh hoặc dòng chữ của bạn bắt đầu ở 1 dòng mới, dùng lệnh <br>

 Căn giữa: <center> Văn bản </center>

 Căn lề phải: <p align="right"> Văn bản </p>

 Căn lề trái: <p align="left"> Văn bản </p>

 Chữ chạy chạy: <marquee> Văn bản </marquee>
                             <marquee> <img src="Link hình ảnh"> </marquee>
 Tạo một danh sách, ví dụ:

                 + Google
                 + Facebook
                 + Twiter
                 + Yahoo!!
            <ul><li>+ Google
                    <li>+ Facebook
                    <li>+ Twiter
                    <li>+ Yahoo!!
            </ul>

----------------------------------------------------------------------------------------------------
Phần 3: Links

 Tạo 1 đường link: <a href=" URL link của bạn"> Văn bản </a>

 Để mở link ở trang khác: <a href=" URL link của bạn " target="_blank">Văn bản </a>

 Tạo 1 đường link "email me":  

<a href="mailto:Emailyour@mail.com">E-mail Me</a>

----------------------------------------------------------------------------------------------------
Phần 4: Hình ảnh

Trước tiên bạn phải up hình bạn muốn share trên blog ở 1 host nào đó (như xuanliemblog ) và lấy link.

   Show hình: <img src="link hình">

   Để hình thành đường dẫn: <a href="đường link"><img src="link hình" border=0></a>

   Chữ bao bọc hình:
              <img src="link hình" align="left"> = hình nằm bên trái chữ
              <img src="link hình" align="right"> = chữ nằm bên trái hình

----------------------------------------------------------------------------------------------------
Phần 5: Viền

 Để tạo viền xung quanh 1 ảnh, bạn làm như sau:
<img style="border-style: solidborder-width1pxborder-color#000000src="URL hình ảnh">

- Chỗ màu đỏ, bạn có thể thay bằng: solid , dotted , dashed , double, groove. Đây là kiểu dáng của đường viền của bạn.

- Chỗ màu cam, bạn có thể thay bằng: 2px3pxv.v... Đây chính là độ dày hay mỏng của đường viền.

- Chỗ màu xanh, bạn có thể thay bằng mã màu bạn thích. Lấy mã màu tại đây.

----------------------------------------------------------------------------------------------------
Phần 6: Scroll box

Scroll box tức là tạo ra 1 cái hộp có thanh kéo lên kéo xuống ý! Scroll box giúp site của bạn vừa đẹp vừa gọn lại vừa pro.

<div style="
height: 200px; *chiều cao*
width: 100px; *chiều rộng*
overflow: auto; *cho phép kéo trượt*
border-color: #mã màu;
borderã màu;
scrollbar-face-color: 
#mã màu;
scrollbar-highlight-color: 
#mã màu;
scrollbar-darkshadow-color: 
#mã màu;
scrollbar-3dlight-color:
#mã màu;
scrollbar-shadow-color: 
#mã màu;">
Nội dung của bạn ở đây nhé. </div> 

Nếu bạn dùng Firefox thì các phần scrollbar-x-y không cần thiết, cứ để mặc định.

Đây là minh họa cho scroll box.

Code = <div style="width: 200px; height: 100px; overflow: auto; border-color: #000000; border-style: solid; border-width: 1px;">Nội dung của bạn </div>

Chúc các bạn vui vẻ =)))
Previous Post
Next Post

0 nhận xét: