 |
| Code Thông Dụng Để Viết HTML |
1. Bookmark đến vị trí nhanh trong bài viết.
<a href="url_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>
2. Chèn flash vào bài viết.
Cách 1
<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300" type="application/x-shockwave-flash" scale="" play="true" loop="true" menu="true"></embed></div>Cách 2
<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none" width="400" height="400"></embed>
LINK_FLASH là địa chỉ URL của flash mà bạn cần chèn vào bài viết
3. Viền khung nội dung vào bài viết
<div style="border: 1px solid #4F4F4F ; padding: 4px; background:#eee; width:400px;">- solid ______________
NỘI_DUNG
</div>
- dashed ----------------
- dotted ......................
Kết Quả:
NỘI_DUNG
4. Chèn nhạc vào bài viết
<object name='hat' width=300 height=45>
<embed type='application/x-mplayer2'
pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/'
controls='controlpanel' width=300 height=45 src='LINK_NHẠC'
autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>
Với:
LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3)
loop='0' // Không lặp lại
loop='1' // Lặp lại một lần
loop='-1' // Lặp lại mãi mãi
autostart="0" // Không tự play
autostart="1" // Play ngay khi web tải xong
5. Tạo button ẩn hiện nội dung
<div><div><input type="button" value="Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
</div><div><div style="display: none; border:#4F4F4F 1px solid; padding: 4px; background:# ">
NỘI_DUNG
</div></div></div>
KẾT QUẢ
6. Tạo hiệu ứng khi di chuyển chuột vào link liên kết
<a href="LINK" target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>
7. Canh Giữa, Trái, Phải cho nội dung
<div style="text-align:center;">Nội_dung</div>Với:
Center // Canh Giữa
Right // Canh Phải
Left // Canh Trái
8. In Đậm, In Nghiêng, Gạch Chân, Gạch Ngang:
<b>Nội_dung_in_đậm</b><i>Nội_dung_in_nghiêng</i><u>Nội_dung_gạch_chân</u><strike>Nội_dung_chữ_bị_gạch_ngang</strike>
9. Dấu chấm hoặc số đầu dòng:
Dấu chấm vô dòng con<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>
Đánh số đầu dòng
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>
10. Chèn Ảnh Vào Bài Viết:
Code đầy đủ:
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>
11: Chèn Link vào bài viết:
<a href="LINK" target="blank">Tên_Link</a>
12. Chèn Khung Chứa Code:
<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>
13. Thay đổi ảnh khác khi rê chuột vào:
<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>
14. Nhúng 1 trang web khác vào bài viết:
<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>
15. Cách kiểu định dạng chữ trong lệnh: text-decoration:none
none (Không định dạng)
underline (Gạch đích)
overline (Gạch trên đầu)
line-through (Gạch ngang chữ)
blink (Chớp chớp)
inherit
16. Đổ bóng bo góc:
/*Tạo bóng đổ*/
box-shadow: 8px 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px 8px #616D7E;
-moz-box-shadow: 8px 8px 8px #616D7E;
/*Tạo bóng đổ 4 cạnh*/
box-shadow: 0px 0px 8px #616D7E;
-webkit-box-shadow: 0px 0px 8px #616D7E;
-moz-box-shadow: 0px 0px 8px #616D7E;
/*Bo tròn 4 góc viền*/
border-radius:4px;
/*Bo tròn tùy chọn: top, right, bottom, left*/
border-radius:4px 4px 4px 4px;
17. Cách loại list trong lệnh: ul {list-style-type:none;}
none: Không hiển thị đánh dấu
disc: Chấm vuông
circle: Chấm tròn trắng
square: Chấm tròn đen
decimal: Kiểu số (1,2,3,4,…)
lower-alpha: Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)
upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)
18. Các lệnh lặp ảnh trong lệnh: background: url(image) repeat
repeat: lặp ảnh
repeat-y: lặp ảnh theo chiều dọc (từ trên xuống)
repeat-x: lặp ảnh theo bề ngang (từ trái qua)
no-repeat: không lặp
top: đặt ảnh trên mép cùng
top right: đặt ảnh mép trên cùng góc phải
top left: đặt ảnh mép trên cùng góc trái
bottom: đặt ảnh mép dưới cùng
bottom left: đặt ảnh mép dưới cùng góc trái
bottom right: đặt ảnh mép dưới cùng góc phải
right: đặt ảnh bên mép phải
left: đặt ảnh bên mép trái
center: đặt ảnh ở vị trí giữa
19. Các lệnh điều kiện trong HTML
19.1. Điều kiện ở trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
19.2. Điều kiện ở trang bài viết
<b:if cond='data:blog.pageType == "item"'>
...
</b:if>
19.3. Điều kiện ở trang chủ, trang nhãn
<b:if cond='data:blog.pageType == "index"'>
...
</b:if>
19.4. Điều kiện ở các trang lưu trữ
<b:if cond='data:blog.pageType == "archive"'>
...
</b:if>
19.5. Điều kiện ở các trang tĩnh
<b:if cond='data:blog.pageType == "static_page"'>
...
</b:if>
19.6. Điều kiện ở một trang riêng biệt nào đó
<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>
...
</b:if>
Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại)
Ví dụ: Điều kiện loại trừ trang bài viết
<b:if cond='data:blog.pageType != "item"'>
...
</b:if>
28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)
<!-- Lời ghi dưới mỗi bài viết -->
<b:if cond='data:blog.pageType == "item"'>
Nội_dung
</b:if>
Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..
29. Script chèn file .js vào blog
<script src='Link_File_JS' type='text/javascript'/>
30. Script chèn trực tiếp nội dung file .js vào blog
<script type='text/javascript'>
//<![CDATA[
Nội_dung_file_js
//]]>
</script>
30. Chữ nhỏ bên dưới ( dùng để viết công thức toán học )
X<sub>1</sub>X<sup>1</sup>
Kết quả
X1
X1
Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com
ConversionConversion EmoticonEmoticon