Wap Tai Game - goc nho lap trinh mobile, huong dan lap trinh html, hoc css nhanh nhat, nang cap xtgem dam bao, huong dan them code, nhieu code hay, lap trinh mobile nhanh nhat, ban wap xtgem gia re - Mở đầu - HTML là gì

Thông Báo!

Wap 4rum da bi hacker tan cong roi Mở đầu - HTML là gì, cấu tạo một trang web dưới dạng HTML, màu chữ, màu nền...
Ðể viết HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là một ASCII Editor. Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ. Tên của file này bắt buộc phải có tận cùng là .htm hoặc .html Ví dụ: start.htm. Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

Cấu trúc cơ bản

Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Nhờ có cặp TAG này mà Browser biắt được đó là HTML - document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và </body>. Trong một document html, chú thích được dùng như sau:



Như vậy một trang web viết bằng html sẽ có cấu trúc như sau:

Code:
<html>
<body>

</body>
</html>Một trang trống, không có nội dung với nền màu da cam sẽ được viết như sau:

<html>
<body bgcolor="orange">

</body>
</html>

[Xem ví dụ]

Tất nhiên, một Homepage còn có nội dung (lời viết và hình ảnh):

Code:
<html>
<body bgcolor="beige">
<font face="Arial" size="2" color="black">
Chào bạn, đây là dòng chữ viết bằng font Arial, màu đen, cỡ 2
</font><br><br>
<font face="Verdana" size="3" color="navy">
Còn đây là dòng chữ viết bằng font Verdana, màu xanh nước biển, cỡ 3
</font><br><br>
<font face="Bodoni" size="4" color="red">
Dòng này lại là font Bodoni, màu đỏ, cỡ 4 </font><br>
</body>
</html>face thể hiện cho mẫu chữ, size thể hiện cho cỡ chữ (số càng lớn thì chữ càng to) và color thể hiện cho màu sắc của chữ, #000000 là màu đen, #FF0000 là màu đỏ, #FFFF00 là màu vàng.

TAG <br> cho phép bạn chuyển sang dòng mới. Bạn có thể dùng nhiều <br> như bạn muốn. Cứ mỗi lần có <br> là một lần xuống dòng. Bạn có thạ dùng mouse phải gõ vào nền của một trang web nào đó rồi chọn source code để tham khảo xem nó được viết như thế nào. Ðấy là cách tốt nhất để khám phá ra những điều "bí mật" của các website đẹp.

Như vậy là bạn đã có thể viết được một trang web đơn giản rồi đó. Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân. Tiêu đề luôn được viết to. Bạn có thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề.

Code:
<html>
<body bgcolor="#000080">
<center>
<font face="Verdana, Tahoma, Arial" color="#ffffff">
<h1>Tiêu đề của trang web</h1><br>
<h2>Welcome to my Homepage!</h2><br>
<h3>Tiêu đề của trang web</h3><br>
<h4>Tiêu đề của trang web</h4><br>
<h5>Tiêu đề của trang web</h5><br>
<h6>Tiêu đề của trang web</h6><br>
</font>
</center>
</body>
</html>
<h1></h1> là to nhất và <h6></h6> là nhỏ nhất. Tiêu đề luôn nằm ở trung tâm của trang, vì vậy ta phải dùng thêm một cặp TAG nữa : <center></center> Tất cả những gì nằm giữa cặp TAG này đều được định hướng vào phía giữa của trang.

Trong ví dụ này, nền của trang là xanh nước biển (#000080) chữ màu trắng.

Bổ sung:

Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp tag <head></head>. Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là <title></title> Giữa <title> và </title> là tên của trang web được browser trình bày phía trên cùng của menubar. Như vậy một trang web với "đầu" sẽ có cấu trúc như sau:

Code:
<html>
<head>
<title>Trang web dau tien cua toi</title>
</head>
<body>
Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn.
</body>
</html>
Trong "head" ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine... Cái đó sẽ được đề cập đến trong một mục riêng

Cách đưa tranh ảnh vào một trang web
Trong trang trước, chúng ta đã đề cập đến cách trình bày chữ trong trang web. Ðể làm cho trang web sinh động hơn, hấp dẫn hơn, bạn có thể đưa thêm tranh ảnh vào. Có những trang web liên quan đến số liệu, đồ thị và đồ thị cũng là một dạng ảnh (images). Sau đây là cách đưa một bức ảnh vào trong trang web.

* Ảnh cho vào trang web nên save dưới dạng .GIF hoặc .JPG
* Không nên to quá, đây không nói đến kích thước (cm) mà nói đến kính cỡ file (số KB).
* Khi scan, bạn hãy chọn 72 dpi (dots per inch) bởi vì đa phần các màn hình máy tính làm việc với độ phân giải này.
* Khi upload trang web, nhớ upload cả ảnh.
* Tên của các file nên sử dụng chữ thường, không nên sử dụng chữ hoa. Ví dụ: myphoto.jpg chứ không Myphoto.jpg.

Sau đây là HTML Code để đưa hình ảnh vào trang web:

Code:
<html>
<body bgcolor="#ffffff">
<center>
<img src="myphoto.jpg" width="200" height="400" border="0" alt="Here is my first photo">
</center>
</body>
</html>Bạn thấy không, điều đó rất đơn giản. Chỉ riêng <img src="myphoto.jpg"> đã đủ để đưa một bức ảnh vào trang web. img là image và src là source. Tất cả những cái đi đằng sau chỉ để trình bày bức ảnh đó đẹp hơn thôi. width là chiều rộng của bức ảnh mà bạn muốn, nó không phụ thuộc vào kích thước gốc của bức ảnh. height là chiều cao. Tất cả đều đo bằng pixel. border="0" báo cho Browser biết là ảnh này sẽ được trình bày không có khung. alt có ích khi ảnh chưa hoặc không được nạp (nhiều người surf không ảnh để đỡ tốn thời gian) Khi đó người xem biết được mình sẽ được xem cái gì.

Hôm nay : 1
Tổng cộng : 18

©Copyright by MrThuPro

Chia sẻ bài viết:

Facebook

Twitter

Link:

http://tienichhy.xtgem.com/</div><div class="quote">Tags: <a href="http://tienichhy.xtgem.com//laptrinhmobile/modauvehtml.html">tienichhy.xtgem.com/avatar/army/hach
trang/wap/hack/game/pro/nhat/hien/nay/hach/game/online/game/offline/game/hot/game/new/admin/la/mrthupro/wap/web/giao/dien/dep/code/new/hot/pro/hay/tai/game/o/day/dam/bao/ko/co/kich/hoat/chuc/online/vui/ve/<xt:urltype="path" /></a><div class="list1">Chia sẻ bài viết: <br/><a href="http://www.facebook.com/share.php?u=http://tienichhy.xtgem.com"><img src="http://xtgem.com/images/facebook.png" >Facebook</a><a href="http://twitter.com/share?url=http://tienichhy.xtgem.com"><img src="http://xtgem.com/images/twitter.png" > Twitter </a><div class="menu"><div class="b">
Link:<textarea cols="12" rows="1">http://tienichhy.xtgem.com/            <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=VjFkUmJIQmpja1JKU2psTlNWUlJSa3A2WVVOSFNrNVRTRlJaVmtwaE5YVk1NV1Z5Um1FMWMwc3hRMDVMVlV0WFZFbDJNVmxJVG1Wd2JrcGtXVXhPWWxwNWJEVkZVRDA5&s=VjFkVmJuVkpWVU5IVkV0TlRWQnBTRWw2TVZkR01IZFVSMHR5UFE9PQ%3D%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>