Membuat Web Dasar dengan HTML & CSS

Assalamualaikum Wr Wb

Pada malam minggu ini gaada kegiatan coba untuk share tutorial 'membuat web dengan HTML & css'

Baik langsung saja:
1. Jalankan Xampp Kalian

2. Buat folder baru pada direktori "xampp/htdocs/". misal, saya akan membuat folder belajarweb dan buat file baru dengan nama index.html

3. lihat kerangka awal html ini, didalam tag <body> nanti akan diisi dengan komponen/ struktur web dan css.

4. Buat struktur tampilan web didalam tag <body> dengan html.

4. Maka, hasil kode kita sebagai berikut:

5. Simpan dan jalankan di browser.

6. Hasilnya cuma tulisan saja, untuk itu kita perlu css untuk memberikan style/gaya pada halaman web. Untuk mencoba kita akan memberikan style pada tag <header> dan <body>

dan kodenya sebagai berikut

dan hasilnya, Background header berubah menjadi merah dan tingginya juga berbeda dari sebelumnya

7. Dan ini kode lengkap css, letakkan kode ini didalam tag <style> yang berada didalam tag <body>

8. Ini hasil akhirnya, warna background tidak sesuai dengan desain kita di artikel sebelumnya, kalian bisa mengubahnya di css tepatnya di property "background"

9. Berikut kode lengkap html dan css-nya

<html>

<head>

<title>Belajar Web HTML</title>

</head>

<body>

<header>header</header>

<nav>nav</nav>

<main>

<section>

<article>

Article

</article>

</section>

<aside>

aside

</aside>

</main>

<footer>

footer

</footer>

<style type="text/css">

body{

position: relative;

margin: 0;

}

header{

height: 75px;

background: red;

}

nav{

background: blue;

}

main{

background: orange;

margin: 0;

padding: 0;

width: 100%;

}

aside{

padding: 0;

margin:0;

width: 15%;

margin-left: 85%;

height: 600px;

background: yellow;

}

section {

float: left;

padding: 10px;

height: 600px;

width: 85%;

background: pink;

}

article{

margin: 5px;

padding: 10px;

background: green;

}

footer{

position:absolute;

bottom:0;

width:100%;

height:60px; /* tinggi dari footer */

background:#6cf;

}

</style>

</body>

</html>

Sekian Tutorial Ini. mungkin bakal dilanjutin Dengan PHP

Membuat Web Dasar dengan HTML & CSS

0 Response to "Membuat Web Dasar dengan HTML & CSS"

Post a Comment