Disneyland 1972 Love the old s
SaoNet.Hexat.Com
SAONET.HEXAT.COM
HOMEChatForum
05/02/26
Clip Shock
Chat - Kết bạn
Cách trang trí chữ, bố cục một trang web

Trong trang trước, chúng ta đã đề cập đến cách định hướng một object trong document bằng cặp TAG: <center></center> Những gì nằm giữa cặp TAG này đều được Browser đưa vào giữa của window. Nếu bạn không định hướng thì browser sẽ tự động theo thứ tự từ trái sang phải. Nhưng đừng vội thử với <left></left> hay <right></right> vì hai cặp TAG này không tồn tại ;-)

Muốn có một trang mà tranh ở bên phải còn chữ ở bên trái bạn phải dùng đến TABLE. Cái đó sẽ được nhắc đến trong phần sau. Bạn có thể dùng cặp TAG <p></p> để tạo ra từng khổ của bài viết. Thực ra đây chỉ là một TAG đơn. Phần </p> ở đằng sau có thể bỏ đi cũng được. Tuy vậy đa phần các Webeditor vẫn đặt nó ở cuối một khổ. Bạn có thể định hướng khổ chữ về phía phải, trái hay vào trung tâm. Ai đã từng sử dụng Word đều biết đến điều đó, mỗi cái là không phải dùng đến TAG thôi. Bạn cũng có thể áp dụng TAG này cho bất kỳ một object nào khác như picture, video... 

Code:
<p align="left"> Toàn bộ khổ chữ này sẽ hướng về phía trái </p>
<p align="center"> Toàn bộ khổ chữ này sẽ hướng vào trung tâm </p>
<p align="right"> Toàn bộ khổ chữ này sẽ hướng về bên phải </p>
<p align="right"><img src="h.clinton.gif" border="0"></p>Cũng có thể viết như sau (không có </p>):

Code:
<p align="left"> Toàn bộ khổ chữ này sẽ hướng về phía trái
<p align="center"> Toàn bộ khổ chữ này sẽ hướng vào trung tâm
<p align="right"> Toàn bộ khổ chữ này sẽ hướng về bên phải
<p align="right"><img src="h.clinton.gif" border="0">Tốt nhất bạn hãy [xem ví dụ]

Và sau đây là các khả năng trang trí chữ, có thể sẽ còn nhiều thủ thuật khác nữa nhưng cho một trang bình thường như của chúng ta thì có thể gọi là tạm đủ:

Code:
* <b>Dòng chữ này đậm </b>

* <strong> Dòng này cũng đậm</strong>

* <i>Dòng chữ này nghiêng</i>

* <big>Dòng chữ này to hơn</big>

* <b><i><u><big> Dòng này vừa to, vừa nghiêng, vừa đậm, vừa gạch chân </big></u></i></b>

* <small>Dòng chữ này bé hơn</small>

* <u>Dòng này lại gạch chân</u>

* Nếu cửa hàng bạn giảm giá từ
<strike> € 20000 </strike> xuống € 15000
* Tổng bình phương hai cạnh góc vuông bằng bình phương cạnh huyền:
a
<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> (a2+b2=c2)
* Công thức hóa học của nước là: H
<sub>2</sub>O (H2O)
* <em> Nếu bạn muốn nhấn mạnh điều gì </em>

* Machine code:
<code>100 Basic <br> 150 if....<br>then...<br>go to</code>
* Tên phím của Keyboard:
<kbd>Enter; Del; Contrl...</kbd>
* Ðưa ví dụ vào bài:
<samp>Sample</samp>
* Tên các Variables trong lĩnh vực Programming:
<var>window.open("mywindow.html");</var>
* Các trích dẫn từ những câu nói của ai đó:
<cite>Học, học nữa học mãi - Lê nin</cite>
* Chỉ dành cho Netscape Browser: Chữ nhấp nháy
<blink>Look at me now, i am blinking</blink>
* Chỉ dành cho Internet explorer: Chữ chạy
o <marquee border="0" behavior="slide" width="239" height="17" align="middle" scrolldelay="600" scrollamount="50">
Look at me now, i am scrolling

</marquee>
o <marquee border="0" behavior="alternate" width="239" height="17" align="middle" bgcolor="#ffff00">
Look at me now, i am scrolling

</marquee>
o <marquee border="0" width="239" height="17" align="middle">
Look at me now, i am scrolling

</marquee>Khi cần một dòng kẻ ngang qua trang web như dưới, bạn có thể dùng tag <hr> để "kẻ":


<hr> có thể mang những giá trị sau: "noshade" (không có bóng), width="x" (trong đó width là chiều rộng và x có thể là % ví dụ width="80%" hoặc pixel ví dụ width="600"), color="blue" (màu của dòng kẻ), size="1" (độ đậm của dòng kẻ). Dòng trên được viết như sau: <hr noshade color="#0000FF" width="80%" size="1"><div><a href="http://mup5.com">Mobile Upload</a> - <a href="http://store.mup5.com">Free Game Mobile</a></div><div class="page"><a href="/"><b>Trang chủ</b></a></div><div class="hdr">₪ On :1 | 1 | 65</div><div class="table"><div class="rmenu"> Gửi cho bạn bè <br>Link:<textarea cols="4" rows="1">http://saonet.hexat.com/wap/bo-cuc-trang.html</textarea>[<a href="sms:? body=http://saonet.hexat.com">GỬI SMS</a>]</a> </div></div><div class="list2"><a href="http://www.facebook.com/share.php?u=http://saonet.hexat.com/wap/bo-cuc-trang.html"> <img src="http://xtgem.com/images/facebook.png" > Facebook</a><a href="http://twitter.com/share?url=http://saonet.hexat.com/wap/bo-cuc-trang.html"> <img src="http://xtgem.com/images/twitter.png" > Twitter </a></div><div class="list1" align="center">© Powered by <a href="http://xtgem.com"><b>XtGem</b></a><br/>© Copy right<a href="http://saonet.hexat.com"> <b>SaoNet.Hexat.Com</b></a></div><!-- Start Backlink Code --><a href="http://www.backlinksthai.com" target="_blank"><img src="http://www.backlinksthai.com/images/backlink.gif" alt="AllNewsSite Link Exchange" border="0" width="80" height="15"/></a><!-- End Backlink Code --><!-- Start Google Backlinks Code --><a target="_blank" title="Free Automatic Google Backlinks - SEO" href="http://google-backlinks.eu/"><img border="0" width="80" alt="Free Automatic Google Backlinks - SEO" src="http://google-backlinks.eu/google-backlinks.png" height="15" /></a><!-- End Google Backlinks Code --><!-- Start Backlink Code --><a target="_blank" href="http://go7s.com/backlink" title="Free Auto Backlinks Go7s.com"><img border="0" width="100" alt="Free Auto Backlinks From Go7s.com" src="http://go7s.com/backlink/backlink.png" height="15" /></a><!-- End Backlink Code --><a title="Vietnam Backlinks" href="http://www.backlinks.vn/" target="_blank"><img src="http://www.backlinks.vn/ads/backlinks.png" alt="Vietnam Backlinks" width="80" height="15" border="0" /></a><div class="quote"><!--Tags-->Tags: <a onclick="_gaq.push(['_trackEvent', 'Outgoing', '', '']);" href="http://SaoNet.hexat.com/wap/bo-cuc-trang.html">SaoNet.hexat.com/wap/bo-cuc-trang.html</a></div><divclass="quote"><!--refer-->SEO: Bạn đến từ : <!--Done--><br /><a href="http://www.gbotvisit.com/p-1gbs-fa471158aafb3a9c0799ff8f1f261a0f.html" alt="Google bot last visit powered by Gbotvisit" target="_blank"><img src="http://www.gbotvisit.com/services/gblv/gblv.php?s=fa471158aafb3a9c0799ff8f1f261a0f" border="0" title="Google bot last visit powered by Gbotvisit" /></a><noscript><a href="http://www.gbotvisit.com" alt="Google bot last visit powered by Gbotvisit">Google bot last visit powered by Gbotvisit</a></noscript> <style type="text/css"> #xt_auth_container { position: static; display: inline; display: inline-block; text-align: right; margin: 3px 0; padding: 0; width: 100%; height: auto; border: none; } .xt_auth_view { position: static; display: inline; display: inline-block; text-align: right; margin: 0; padding: 0; width: auto; height auto; border: none; } .xt_auth_action { text-align: left; position: static; display: inline; zoom: 1; display: inline-block; vertical-align: top; margin: 0 5px 0 0; padding: 0 5px; height: 20px; width: auto; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background-color: #2e2e2e; background-color: rgba(0,0,0,0.4); !background-color: #2e2e2e; font: 600 12px/20px "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif; text-decoration: none; -webkit-text-shadow: 1px 1px 0 rgba(0,0,0,0.08); -moz-text-shadow: 1px 1px 0 rgba(0,0,0,0.08); -o-text-shadow: 1px 1px 0 rgba(0,0,0,0.08); text-shadow: 1px 1px 0 rgba(0,0,0,0.08); color: #fff; -webkit-user-select: none; } .xt_auth_action > * { vertical-align: top; } .xt_auth_action:hover { background-color: #1f1f1f; background-color: rgba(0,0,0,0.6); } .xt_auth_action:link, .xt_auth_action:visited, .xt_auth_action:active, .xt_auth_action:hover { text-decoration: none; color: #fff; } .xt_auth_icon, .xt_auth_avatar { position: static; display: inline; display: inline-block; width: 13px; height: 13px; margin: 3px 1px 0 0; padding: 0; vertical-align: top; border: 0; } .xt_auth_icon { background-image: url(http://xtgem.com/images/authbar/auth_sprite_v2.png); margin-right: 0; } .xt_auth_icon_enchanted .xt_auth_icon { background-size: 103px; /* margin: 4px 2px 0 0; */ } /* join & subscribe */ .xt_auth_join .xt_auth_icon, .xt_auth_subscribe .xt_auth_icon { background-position: -92px 13px; } /* inbox */ .xt_auth_inbox .xt_auth_icon { background-position: -78px 13px; } /* rate */ .xt_auth_rate .xt_auth_icon { background-position: 0 14px; } /* unrate */ .xt_auth_unrate .xt_auth_icon { background-position: -13px 14px; } /* star */ .xt_auth_star .xt_auth_icon { background-position: -26px 13px; } /* unstar */ .xt_auth_unstar .xt_auth_icon { background-position: -39px 13px; } /* repost */ .xt_auth_repost .xt_auth_icon { background-position: -52px 12px; margin-top: 4px; } /* reposted */ .xt_auth_reposted .xt_auth_icon { background-position: -65px 12px; margin-top: 4px; } /* join & subscribe */ .xt_auth_icon_enchanted .xt_auth_join .xt_auth_icon, .xt_auth_icon_enchanted .xt_auth_subscribe .xt_auth_icon { background-position: 11px 0.5px; width: 12px; } /* inbox */ .xt_auth_icon_enchanted .xt_auth_inbox .xt_auth_icon { background-position: 25px 1px; } /* rate */ .xt_auth_icon_enchanted .xt_auth_rate .xt_auth_icon { background-position: 0 0; } /* unrate */ .xt_auth_icon_enchanted .xt_auth_unrate .xt_auth_icon { background-position: -13px 0; } /* star */ .xt_auth_icon_enchanted .xt_auth_star .xt_auth_icon { background-position: 77px 0; } /* unstar */ .xt_auth_icon_enchanted .xt_auth_unstar .xt_auth_icon { background-position: 64px 0; } /* repost */ .xt_auth_icon_enchanted .xt_auth_repost .xt_auth_icon { background-position: 51px 1px; margin: 3px 0 0 0; } /* reposted */ .xt_auth_icon_enchanted .xt_auth_reposted .xt_auth_icon { background-position: 39px 1px; margin: 3px 0 0 0; } /* hidding */ .xt_auth_unstar, .xt_auth_unsubscribe, .xt_auth_unrate { display: none; } .xt_auth_action_star_active .xt_auth_unstar, .xt_auth_action_rate_active .xt_auth_unrate, .xt_auth_action_subscribe_active .xt_auth_unsubscribe { display: inline-block; } .xt_auth_action_star_active .xt_auth_star, .xt_auth_action_rate_active .xt_auth_rate, .xt_auth_action_subscribe_active .xt_auth_subscribe { display: none; } #xt_auth_container { position: fixed; } html { padding-top: 20px; } #xt_auth_container { top: 0; left: 0; } #xt_auth_container, .xt_auth_view, .xt_auth_icon, .xt_auth_avatar { max-height: none !important; max-width: none !important; min-width: none !important; min-width: none !important; opacity: 1 !important; text-indent: 0 !important; visibility:visible !important; } </style><div id='xt_auth_container'><div class='xt_auth_view xt_auth_not_logged'><a href='https://xtgem.com/auth/login?redir=VjFkUmJIQmpja1JIZW0xU1MyRlVRVWRWTVZwUk1FZEVVR0UxY2twTE5YSkxlbEJ4VFdGWlVFeFVORXROTVZsSlZGTnlkZz09&s=VjFkVmJuVkpWVXBHVldWV1N6QkhXVWhLTVhOUlZFSTk%3D&is_a=0&is_f=0&via=New+authbar' target='_parent' class='xt_auth_action xt_auth_login'>Log in</a></div></div> <script type="text/javascript"> (function () { var doc = document; var body = doc.body; var xhr_done_auth = true; doc.addEventListener ? window.addEventListener( 'load', init, false ) : window.attachEvent( 'onload', init ); function init () { doc = document; body = doc.body; var el_auth = doc.getElementById( 'xt_auth_container' ); doc.addEventListener ? el_auth.addEventListener( 'click', hook_xhr_action, false ) : el_auth.attachEvent( 'onclick', hook_xhr_action ); if ( 'backgroundSize' in doc.body.style ) { if ( window.devicePixelRatio && window.devicePixelRatio > 1 ) { el_auth.className += ' xt_auth_icon_enchanted'; } } } // bind xhr links function hook_xhr_action ( e ) { var e = e || window.event; var target = e.target || e.srcElement; target = target.className == 'xt_auth_icon' ? target.parentNode : target; if ( target.getAttribute( 'data-xhr' ) ) { var url = target.href; url = url + (url.indexOf( '?' ) == -1 ? '?via_ajax=1' : '&via_ajax=1'); load_data({ url: url, xhr_done: xhr_done_auth, callback: handle_xhr_response }); (e.preventDefault) ? e.preventDefault() : e.returnValue = false; return false; } } function handle_xhr_response ( xhr ) { function handle_error ( xhr ) { window.location.href = window.location.href; } function handle_success ( xhr ) { var wrapper = document.getElementById( 'xt_auth_container' ); var tmp_class = wrapper.className; var current_action = xhr.response.split( ';' )[1]; var actions = { bookmark: 'xt_auth_action_star_active', vote: 'xt_auth_action_rate_active', subscribe: 'xt_auth_action_subscribe_active' }; for ( key in actions ) { if ( !actions.hasOwnProperty( key ) ) continue; if ( current_action.indexOf( key ) == -1 ) continue; wrapper.className = current_action.indexOf( 'un' ) == -1 ? tmp_class + ' ' + actions[key] : tmp_class.replace( (' ' + actions[key]), '' ); } } xhr.response = xhr.response ? xhr.response : xhr.responseText; (xhr.status != 200 || xhr.response.indexOf( 'ERR;') != -1 ) ? handle_error(xhr) : handle_success(xhr); } //load_data( { url: url, method: method, data: data, async: async, xhr_done: xhr_done, callback: callback }); function load_data( settings ) { var async = settings.async ? !!settings.async : true, url = settings.url ? settings.url.toString() : false, method = settings.method ? settings.method.toUpperCase() : 'GET', callback = settings.callback ? settings.callback : false, data = settings.data ? settings.data.toString() : '', xhr_done = settings.xhr_done ? settings.xhr_done : null, xhr; // xhr in progress or url not provided -> exit if ( !( (xhr_done == true || xhr_done == null) && url ) ) return; if ( typeof XMLHttpRequest !== 'undefined' ) { xhr = new XMLHttpRequest(); } else { try { xhr = new XMLHttpRequest("MSXML2.XmlHttp.5.0") || new XMLHttpRequest("MSXML2.XmlHttp.4.0") || new XMLHttpRequest("MSXML2.XmlHttp.3.0") || new XMLHttpRequest("MSXML2.XmlHttp.2.0") || new XMLHttpRequest("Microsoft.XmlHttp"); } catch ( e ) {} } // if xhr object does not supported or url not given, exit xhr.onreadystatechange = function () { if ( xhr.readyState != 4 ) return; if ( xhr_done != null ) xhr_done = true; callback ? callback( xhr ) : null; } xhr.open( method, url, async ); if ( method === 'POST' ) { xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" ); xhr.send( data ); } else { xhr.send( null ); } if ( xhr_done != null ) xhr_done = false; }; })(); </script></body> </html>