Membuat halaman web sederhana dengan HTML dan CSS lengkap dan mudah

Membuat halaman web sederhana dengan HTML dan CSS – Setelah sebelumnya telah mempelajari bahasa pemoraman dasar HTML dan CSS dan kamus dasar tag-tag HTML, mari kita memulai praktek cara membuat halaman web sederhana dengan HTML dan CSS mudah dan lengkap.

Cara membuat halaman web sederhana sangatlah mudah, dikarenakan perangkat membuat web sangat mudah ditemui di internet dan rata-rata software tersebut gratis. Dalam tutorial kali ini perangkat yang dibutuhkan antara lain:

Notepad, atau anda bisa mencoba notepad ++ atau Sublime Text yang mana dalam program ini tersedia fitur yang lebih baik ketimbang notepad bawaan windows.
Browser sebagai program penampil halaman web. Jika anda pengguna windows, biasanya browser IE(Internet Explorer) akan terinstall otomatis. Tetapi disarankan bisa menggunakan browser dari google, yaitu Chrome atau Mozila.

Jika semuanya sudah dipersiapkan langsung saja kita memulai membuat halaman wab sederhana dengan menggunakan HTML dan CSS mudah dan lengkap, dibawah ini adalah gambar website sederhana yang nanti akan kami jabarkan script-scriptnya.

Berikut scriptnya :

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>Belajar HTML with Bintanginspirasi.com</title>
        <link rel=”stylesheet” href=”css/style.css”/>
    </head>

    <body>
        <div id=”wrapper”> <!– start of wrapper –>
            <div id=”header”>
                <h1>Bintanginspirasi.com</h1>
            </div>

            <div id=”menu”>
                <ul>
                    <li><a href=”#”>Menu 1</a></li>
                    <li><a href=”#”>Menu 2</a></li>
                    <li><a href=”#”>Menu 3</a></li>
                    <li><a href=”#”>Menu 4</a></li>
                </ul>
            </div>

            <div class=”clear”></div>

            <div id=”content”>
                <div id=”content_top”>
                    <img src=”images/image1.jpg”/>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </p>
                </div>

                <div class=”clear”></div>

                <div id=”content_bottom”>
                    <div id=”content_bottom_left”>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
                    </div>

                    <div id=”content_bottom_right”>
                        <img src=”images/image2.jpg”/>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                    </div>
                </div>

                <div class=”clear”></div>

                <div id=”footer”>

                </div>
            </div>
        </div> <!– end of wrapper –>
    </body>
</html>

Copy script diatas lalu pastekan di notepad ++ atau Sublime Text sobat, dan setelah selesai, simpan dengan nama index.html. Sebelumnya buat folder terlebih dahulu lalu simpan ke dalam foldernya.
Lalu sobat jalankan file tersubut dengan meng-klik 2x file tersebut. hasilnya pasti hanya tulisan dan garis-garis yang belum tertata, seperti hati para jomlo yang belum tertata bahkan rapuh. wkwk..

Dalam hal ini belum tertata karena kita belum membuat CSS nya, seperti halnya sepasang kekasih yang saling melengkapi. HTML dan CSS bisa saling melengkapi. baik langsung saja, berikut script CSS nya :

Example

* {
margin: 0px;
padding:0px;
}

body {
background: #000;
}

.clear {
clear: both;
}

#wrapper {
    width: 1200px;
    background: #fff;
    margin: auto;
}

#header {
    height: 100px;
    padding: 5px;
    background: yellow;
}

#header h1 {
text-align: center;
line-height: 100px;
}

#menu {
height: 40px;
}

#menu ul {
list-style: none;
}

#menu ul li {
    float: left;
    width: 300px;
    text-align: center;
}

#menu ul li a {
    text-decoration: none;
    line-height: 40px;
}

#menu ul li a:hover {
    display : block;
    background : #FF8080;
    color : #fff;
}

#content {
padding: 10px;
}

#content_top {
overflow: hidden;
}

#content_top img {
    float: left;
    width: 590px;
    margin-right: 10px;
}

#content_top p {
float: left;
width: 580px;
}

#content_bottom {
margin-top: 20px;
overflow: hidden;
}

#content_bottom_left {
    float: right;
    width: 590px;
    margin-right: 10px;
}

#content_bottom_right {
float: left;
width: 580px;
}

Berikut Vidio tutorial pengertiannya :

Copy script diatas lalu pastekan di notepad ++ atau Sublime Text sobat, dan setelah selesai, simpan di dalam folder yang sama dengan file html yang sebelumnya telah dibuat, dengan nama style.css.
Lalu sobat jalankan kembali file index.html nya dengan klik 2x, coba lihat perbedaannya.
Jika sobat belum mengerti CSS bisa lihat artiket dibawah ini.

Coba sobat pahami script tersebut dan kembangkan website sederhana ini untuk latihan sobat, teruslah praktek agar cepat mengusai bahasa pemrograman dasar. Atau ingin menguasai HTML terlebih dahulu bisa kunjungi artikel di bawah ini :

Mungkin sampai disini cara membuat halaman web sederhana dengan HTML dan CSS, Terimakasih telah berkunjung di bintanginspirasi.com share jika bermanfaat

Membuat halaman web sederhana dengan HTML dan CSS lengkap dan mudah

Example

Example

1 comment

Tinggalkan Balasan Batalkan balasan

Cara Mengaplikasikan Css di Blog. Mudah dan Lengkap

Cara dan Tutorial Membuat Aplikasi Android Dengan Tools MIT App Inventor

Membuat halaman web sederhana dengan HTML dan CSS lengkap dan mudah

Example

Example

1 comment

Tinggalkan Balasan Batalkan balasan

You May Also Like