Key Trick Writing HTML Table Tag Tutorial Correctly

HTML is basic language that's used to create website. You may follow a very visual basic code example to get understanding how this thing works. Before going further into complex parts, it is better to know html tag and how to use it. For your information, html is static language. You can write html in Notepad and add htm extension. After that, open file via browser. In past time, web developers used html without additional program. Nowadays, you will find tons of applications that can make website easily, even without proper knowledge of html. However, having eligible skill and understand about html will be much recommended to create more attractive websites.

Starting From Html Head and Body

Tag is used to identify that what you type is html language. The first part is to determine head and body. Head is like header in word processing program. It may appear on browser or not depend on what you put with tag. You just simply type <head> as beginning then put </head>  at the end. You recognize < > and </> as tag. Therefore, html head and body can be identified from such tag. Moreover, many tags are available in HTML, for example <p> as new paragraph, <b> as bold letter, etc.
This example html script from top to bottom :

<!doctype html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blog - Space Science Website Template</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
    <div id="header">
        <div>
            <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
            <ul id="navigation">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li class="menu">
                    <a href="projects.html">Projects</a>
                    <ul class="primary">
                        <li>
                            <a href="playstation3isi.php">proj 1</a>
                        </li>
                    </ul>
                </li>
                <li class="menu selected">
                    <a href="blog.html">Blog</a>
                    <ul class="secondary">
                        <li>
                            <a href="singlepost.html">Ngmaen </a>
                            <a href="tahubulat.html">Tahu Bulat</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="body">
        <div class="header">
            <div>
                <h1>Blog</h1>
                <div class="article">
                    <ul>
                        <li>
                            <a href="singlepost.html"><img src="images/astronaut.jpg" alt=""></a>
                            <h1>SUCCESFUL REPAIR OF THE MX-1 SAT</h1>
                            <span>FEBRUARY 6, 2023</span>
                            <p>This website template has been designed by Free Website Templates for you, for free. You
                                can replace all this text with your own text.</p>
                            <a href="singlepost.html" class="more">Read More</a>
                        </li>
                        <li>
                            <a href="singlepost.html"><img src="images/satellite-dish.jpg" alt=""></a>
                            <h1>ALIEN SIGNAL DISCOVERY</h1>
                            <span>FEBRUARY 3, 2023</span>
                            <p>You can remove any link to our website from this website template, you're free to use
                                this website template without linking back to us.</p>
                            <a href="singlepost.html" class="more">Read More</a>
                        </li>
                    </ul>
                </div>
                <div class="sidebar">
                    <ul>
                        <li>
                            <h1>FEATURED POSTS</h1>
                            <a href="singlepost.html"><img src="images/moon-satellite.jpg" alt=""></a>
                            <h2>SOYUZ TMA-M</h2>
                            <span>FEBRUARY 6, 2023</span>
                        </li>
                        <li>
                            <h1>RECENT POSTS</h1>
                            <ul>
                                <li>
                                    <a href="singlepost.html"><img src="images/alien-life.jpg" alt=""></a>
                                    <h2>ALIEN LIFE</h2>
                                    <span>FEBRUARY 3, 2023</span>
                                </li>
                                <li>
                                    <a href="singlepost.html"><img src="images/galaxy.jpg" alt=""></a>
                                    <h2>THE GALAXY</h2>
                                    <span>FEBRUARY 1, 2023</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="connect">
            <div>
                <h1>FOLLOW OUR MISSIONS ON</h1>
                <div>
                    <a href="http://freewebsitetemplates.com/go/facebook/" class="facebook">facebook</a>
                    <a href="http://freewebsitetemplates.com/go/twitter/" class="twitter">twitter</a>
                    <a href="http://freewebsitetemplates.com/go/googleplus/" class="googleplus">googleplus</a>
                    <a href="http://pinterest.com/fwtemplates/" class="pinterest">pinterest</a>
                </div>
            </div>
        </div>
        <div class="footnote">
            <div>
                <p>&copy; 2023 BY SPACE PROSPECTION | ALL RIGHTS RESERVED</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

If there is head, it should be footer. As similar to head, footer in html can be visible or not according the way you put another tag on it. Normally, footer will be at the bottom of page. In website, you will see the part that describes copyright owner, contact information, sitemap, or anything that will stay the same, regardless you open another page. This is called footer. As similar to head, tag for this part is <footer> and </footer>.  As you know, footer can be modified to another part, such as left and right. However, such matter is not regular and it ruins the original function of footer.

When to Use Tables Html

Table is the essential part for html. Basic function is to put list on anything as similar to table in word or data processing program. To create table, start with tag <table> and </table> for the end. Table consists of row and column, so you need additional tags. Tag for column is <th> and <tr> for row. As usual, do not forget to close with respective tag.

There are several conditions when to use tables html. Firstly, table is good to use when website is static. To show data, you need table and be careful about layout. You should create table with its properties, particularly width and length. Combine row and column tags to create impressive table. As usual, do not forget to type closing tag.

From capability of table, you will see one potential to apply into website. Table is good to create layout. If you ask developer about when not using tables html, they will say for layout. Using table is not flexible. You need to draw table on head part, so layout for entire pages is similar. As solution, web masters combine table and CSS properties.


SHARE

About andy

I made this blog just to make about the science that I learned during the study, if there is something wrong please comment below, and do not forget to share, thank you.

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar