Kamis, 21 Maret 2019

Kode html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
width: 400px;
height:80px;
margin:10px;
text-align:center;
line-height:80px;
font-size:20px;
float:left;

}
body {
background-color:PaleGreen;
}
.satu{background-color:BanchedAlmond;}
.dua{background-color:#777799;}
.tiga{background-color:rgb(153,102,153);}
</style>
</head>
<body>
<div class="satu"><a href="Verdun.html">Battle of Verdun</a></div>
<div class="dua"><a href="a.html">Brushilov Offensive</a></div>
<div class="tiga"><a href="https://www.blogger.com/blogger.g?

blogID=3845675348090230939#allposts/postNum=0">Blogger</a></div>

</body>
</html>


di Tidak ada komentar:

Image background in Html

<html >
<head>
    <title><!-- Insert your title here --></title>
</head>
<body>
    <img src="gambarku.jpg" alt="gambar" class="bg" />
</body>
</html>
dan untuk code CSSnya seperti ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
     margin: 0;
     padding: 0;
     text-align: center;
}
.bg {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 1;
     float: left;
     left: 0;
}
Terlihat bahwa gambar akan diubah ke ukuran menyesuaikan halaman dengan nilai Width: 100% dan Height:100%.
Selanjutnya saya akan meletakkan text diatas gambar tadi, disini saya akan menambahkan beberapa text di HTMLnya :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html >
<head>
    <title><!-- Insert your title here --></title>
</head>
<body>
    <img src="gambarku.jpg" alt="gambar" class="bg" />
    <!-- tambahan content -->
    <div class="content">
        <p>I am currently working on finding a way to better work around moving meta boxes into
        the right hand column. Currently doing so will still give it the behavior of being a
        tabbed content area until you reload the edit page. IE: It will still show / hide the
        content and the tab will still appear in the menu as well. Any suggestions on the logic /
        behavior would be greatly appreciated as I am somewhat stumped at this point.</p>
         
        <p>This simple plugin is designed primarily for sites that are using WordPress as a
        content management system, however it can be extremely useful for both. If you are
        using a more complex WordPress install and theme you are likely to end up with a long
        list of dialog boxes on the edit pages to manage the different elements of your site.
        This can be a usability problem for two reasons, one being that a client may not know
        they have control over an element because it will be hidden way down the page.
        Additionally you can get to a point where you have to scroll way down and up to make changes and then publish the site.</p>
    </div>
</body>
</html>
Disitu saya menambahkan DIV baru yaitu class=content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
     margin: 0;
     padding: 0;
     text-align: center;
}
.bg {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 1;
     float: left;
     left: 0;
}
.content {
     width: 80%;
     height: auto;
     margin: 0 auto;
     position: relative;
     z-index: 5;
     background: #fff;
     padding: 30px;
     text-align: left;
}
di Tidak ada komentar:
Langganan: Komentar (Atom)

Tugas PKN HAM Ignatius Arviant DNP

 HAM itu sangat penting karena hak manusia yang sangat penting karena manusia mempunyai hak kesetaraan, kebebasan, dan lain-lain. Contohnya ...