Các Code Html Đơn Giản Cho Người Mới Bắt Đầu

 Cơ bản HTML 


Mục lục:


Phần 1: Trang trí chữ
Phần 2: Định dạng văn bản
Phần 3: Links
Phần 4: Hình ảnh
Phần 5: Viền
Phần 6: Scroll box

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#000000” src=”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>

Hy vọng với bài viết này , các bạn có thể ghi nhớ được một số các code cơ bản của ngôn ngữ HTML
Bài Viết Này Được Cung Cấp Bởi

Trả lời

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 *