Selasa, 10 Januari 2023

Belajar CSS

1. Buat File index.html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>latihan2 CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <img src="img/logo.png" width="200px" alt="">
    <ul>
        <li> <a href="">home</a></li>
        <li> <a href="">about</a></li>
        <li> <a href="">contact</a></li>
    </ul>
  </nav>

  <main>
    <h1>Artikel</h1>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
  </main>

  <footer>
    <h5>Penutup</h5>
  </footer>

</body>
</html>
2. buat file css style.css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
nav{
    display: flex;
    background-color: aqua;
    justify-content: space-between;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

body{
    margin: 0px;
    background-image: url(./img/bg.jpg);
}

ul{
    font-size: 20px;
    list-style-type: none;
}

li{
    display: inline;
    margin-right: 20px;
}

a{
    text-decoration: none;
    /* color: white; */
}

main{
    margin: 5% 25% 8%;
    padding: 20px;
    background-color: gray;

}
h1{
    text-align: center;
}

article{
    margin-top: 10px;
    border-bottom: 2px solid black;

}

footer{
    background-color: aqua;
    padding: 10px;
}

h5{
    text-align: center;
}
- Tidak ada komentar:

Rabu, 11 Mei 2022

Belajar HTML

HTML ?

HTML adalah adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.HTML sebenarnya bukanlah bahasa pemrograman, artinya HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis.   Referensi

Berikut contoh script sederhana dari HTML.

Buat Foldernya dengan nama bebas apa saja dan didalam folder tersebut buat file dengan nama index.html. Untuk directory bisa dimana saja.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <img src="./img/img.png" width="100" >
    <h1>Struktur Dasar HTML | Belajar Bareng</h1>
    <hr width=100% align=center size=2% color=”yellow”>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteursint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
        mollit anim id est laborum. </p>
    <h3>Identitas:</h3>
    <ul>
        <li><b>Nama         : Mohamad Bagoes</b></li>
        <li><b>Text Editor  : Visual Code Studio</b></li>
        <li><b>Akun Gitlab  : @bagusapril</b></li>
    </ul>

</div>
</body>

</html>


hasil:



- Tidak ada komentar:

Sabtu, 23 April 2022

Programming Addict: Git Tutorial

Programming Addict: Git Tutorial:   Apa itu Git ? Git adalah sebuah  Version Control System  yaitu sistem yang mengelola perubahan dari sebuah dokumen, program komputer, webs...
- Tidak ada komentar:

Selasa, 19 April 2022

Git Tutorial


 Apa itu Git ?

Git adalah sebuah Version Control System yaitu sistem yang mengelola perubahan dari sebuah dokumen, program komputer, website dan kumpulan informasi lain. Selain itu, Git memungkinkan para pengembang perangkat lunak dari berbagai belahan dunia mengerjakan banyak projek bersama-sama tanpa mengharuskan bertatap muka.

Git akan disimpan dalam sebuah folder atau directory project yang biasa di sebut Repository


Setup Git

Setelah menginstall git dalam PC/Laptop kita, hal yang di lakukan pertama atau selanjutnya adalah setup Konfigurasi dari git config email dan username seperti di bawah ini :

  • git config --global user.name "username anda"
  • git config --global user.email "email anda"

Git config ini bertujuan sebagai username yang akan digunakan untuk indetitas dari sebuah commit, Jika sudah melakukan setup, anda dapat melihat hasil config ini dengan perintah :

git config -l

- Tidak ada komentar:

Sabtu, 26 Desember 2020

Fundamental Javascript (Part 2: Javascript Output)

 Bagaimana cara menampilkan Output dalam javascript?


Ada 4 cara untuk menampilkan Output dalam JavaScript.


1. Menggunakan inner.html;

<!DOCTYPE html>
<html>
<head>
	<title>Bagus April</title>
</head>
<body>

	<h1>Fundamental Javascript (Part 2: Javascript Output)</h1>
	<p id="tutor"></p>
	<script >
		document.getElementById("tutor").innerHTML = "<p> Aku suka Javascript </p>";
	</script>

</body>
</html>









Baca selengkapnya »
- Tidak ada komentar:

Kamis, 17 Desember 2020

Fundamental Javascript (Part 1: Javascript Installation and Initialization)

 Apa itu JavaScript?

    JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome, Mozilla Firefox, Opera Mini dan sebagainya. 

    JavaScript pertama kali dikembangkan pada pertengahan dekade 90’an. Meskipun memiliki nama yang hampir serupa, JavaScript berbeda dengan bahasa pemrograman Java. Untuk penulisannya, JavaScript dapat disisipkan di dalam dokumen HTML ataupun dijadikan dokumen tersendiri yang kemudian diasosiasikan dengan dokumen lain yang dituju. JavaScript mengimplementasikan fitur yang dirancang untuk mengendalikan bagaimana sebuah halaman web berinteraksi dengan penggunanya. 

(Pahlevi ,Omar., Mulyani ,Astriana., Khoir, Miftahul.  (Jurnal PROSISKO Vol. 5 No. 1 Maret 2018))


Apa saja yang dibutuhkan untuk belajar JavaScript?

- Web Browser ( Google Chrome, Firefox, dll)

- Teks Editor ( Notepad++, Sublime Text, dll)


Membuat program JavaScript pertama

- Buat folder baru , untuk nama foldernya bebas saja.












- Buka Text Editor, kemudian buat file baru bernama index.html dan main.js,
   isi kode seperti berikut:

















Hasilnya:





- 






- Tidak ada komentar:

Minggu, 14 Juni 2020

MENGHITUNG 2 BILANGAN DENGAN PYHTON v2.7

SOURCE CODE :



PENJELASAN :
  1. Baris ke 2 : Menginput bilangan pertama bertipe int yang didapat dari user.
  2. Baris ke 3 : Menginput bilangan kedua bertipe int yang didapat dari user.
  3. Baris ke 6 : Menjumlahkan nilai bilangan pertama dan kedua yang didapat dari perhitungan bilangan tersebut dan hasilnya akan dimasukan ke variable jumlah.
  4. Baris ke 9 : Menampilkan nilai dari variable jumlah.

Run :



- Tidak ada komentar:
Langganan: Postingan (Atom)

Belajar CSS

1. Buat File index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3...