Adelwin Nugroho Liandy

A. PENDAHULUAN

Pengertian

Di dalam javascript, event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element), dll.

Latar belakang masalah

Di karenakan belum mengerti event pada Jquery dan cara menggunakannya.

B. MAKSUD DAN TUJUAN

Memahami dan mempraktikkan Event pada Jquery dan tujuannya adalah dapat menjalankan Efek efek yang ada pada Event Jquery.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Pengertian Jquery

- Cara menggunakannya

D. TARGET DAN HASIL YANG DIHARAPAKAN

Dapat mengerti dan memahami serta dapat mempraktikkan langsung event event pada Jquery.

E. METODE PELAKSANAAN

- Membaca referensi

- Mempraktikkannya

F. ALAT DAN BAHAN

- Laptop

- Text editor

- Koneksi internet

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

Disini saya akan mencontohkan semisal mau membuat pesan alert() ketika sebuah paragraf di klik, dengan javascript ini bisa dilakukan dengan kode program seperti berikut :

<!DOCTYPE html>
<html>
<head>
<title>AdelwinNL</title>
</head>
<body>
<p id="paragraf" onclick="alert('Halaman ini akan memunculkan popup')">
</p>
</body>
</html>

atribut onclick dalam tag <p> diatas adalah sebuah event. Ketika di klik, akan tampil pesan popup: 'Halaman ini akan memunculkan popup'. Hasil ini didapat dengan fungsi alert()Javascript.

Selain onclick, didalam Javascript juga banyak event-event yang lain, seperti ondblclick, onmouseover, onmouseout, dll.

Penulisan seperti sangat praktis namun tidak "rapi". Bagaimana cara memisahkannya?

Didalam javascript, ini bisa di lakukan menggunakan fungsi addEventListener(). Hasil yang sama bisa dihasilkan dengan kode program berikut :

<!DOCTYPE html>
<html>
<head>
<title>Belajar Jquery AdelwinNL</title>
<meta charset="UTF-8">
<script type="text/javascript" src=
"jquery.js"></script>
<script>
window.onload = funciton()
{
document.getElementById("paragraf").
addEventListener("click", function(){alert ('Halaman ini akan memunculkan popup')}
}
</script>
</head>
<body>
<p id="paragraf">
Klik disini
</p>
</body>
</html>

Sekarang, didalam bagian <body> tidak ada kode Javascript apapun. Event click saya tambahkan dengan fungsi addEventListener(). Nah itu ketika anda menggunakan javascript disini saya akan bandingkan dengan kode jquery apakah nanti kalian akan bisa memilih manakan yang lebih simple!!.

<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#paragraf').click(function() {
alert('Halaman ini akan memunculkan popup');
});
});
</script>
</head>
<body>
<p id="paragraf">
Silahkan klik saya
</p>
</body>
</html>

Perhatikan bagaimana Jquery memudahkan penulisan event ini, sangat sederhana kan?!!. Format penyulisannya adalah :

$("jQuery_Selector").jQuery_Event(function() { ...isi event disini... })

Selain event click, masih banyak lagi event event yang di sediakan dari jquery tersendiri, kalian bisa cek event event nya di website resminnya langsung yaitu di : https://jquery.com

Disini saya akan mencontohkan beberapa event javascript yang dibuat dengan Jquery :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery</title>
<style>
#paragraf {
width:600px;
height:80px;
background-color:tomato;
line-height:80px;
text-align:center;
font-size:30px;
}
</style>
<script src="adelwin-wesite/jquery/jquery.js"></script>
<script>
$( document ).ready(function() {

$( "#paragraf" ).click(function() {
$( "#paragraf" ).css( "color", "green" );
});

$( "#paragraf" ).mouseover(function() {
$( "#paragraf" ).css( "background-color", "yellow" );
});

$( "#paragraf" ).mouseout(function() {
$( "#paragraf" ).css( "background-color", "blue" );
});

$( "#paragraf" ).dblclick(function() {
$( "#paragraf" ).css( "border", "solid 2px black" );
});

});
</script>
</head>
<body>
<center>
<p id="paragraf">
Mempelajari Jquery Event
</center>
</p>
</body>
</html>

Maka hasilnya akan seperti ini :

jika kalian mengarahkan mouse/crosor kalian ke elementnya maka akan berubah warna menjadi kuning, dan ketika anda meninggalkan mouse dari situ nanti akan berubah warna menjadi biru.

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

Penulisan kodenya salah saat membuat sebuah mouseout, hingga ketika crushor Saya ketika di keluar dari element tetep seperti biasa ngga bisa menjadi biru

Solusi :

Dengan menambahkan ";" setelah kurung penutup

J. KESIMPULAN YANG DIDAPAT

Dengan event ini kalian bisa memberi efek efek animasi yang sudah di sediakan oleh pihak jquery dari mulai hide(), click(), fadeit(), css() dan lain sebagainya, untuk event selengkapnya kalian bisa cari di website resminya langsung yaitu https://jquery.com

K. REFERENSI

- Jquery.com

A. PENDAHULUAN

Pengertian

Selector adalah bagian penting pada perintah Jquery. Selector adalah perintah untuk mencari atau memilih elemen HTML. Dari hasil perintah selector kita akan mendapatkan akses kepada elemen HTML tersebut. Kita juga dapat melakukan suatu aksi kepada elemen HTML tersebut.

Latar belakang masalah

Belum mengerti apa itu selector pada Jqeury, Fungsi, serta cara kerjanya.

B. MAKSUD DAN TUJUAN

Memahami dan mempraktikkan selector pada Jquery dan tujuannya yaitu bisa mengatur elemen HTML dengan menggunakan Jquery.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Pengertian Selector jquery

- Selector Tag

- Selector id

- Selector class

D. TARGET DAN HASIL YANG DIHARAPKAN

- Dapat memahami dan mempraktikkan Selector pada jquery

E. METODE PELAKSANAAN

- Mencari referensi

- Membaca dan memahami,

- Mempraktikkannya

F. ALAT DAN BAHAN

- Laptop

- Koneksi internet

- Text Editor

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

Selector dapat memilih elemen HTML berdasarkan atribut name, id, class, tipe elemen atau nama tag tersebut, nilai dari atribut dan lain sebagainya. Perintah selector dimulai dengan penulisan $().

- Selector Tag :

selector tag mencari elemen HTML berdasarkan jenis atau nama tag. Contoh di bawah ini mencari semua tag p (elemen paragraf).

$("p")

Contoh dibawah ini memperlihatkan ketika suatu tombol di klik maka semua tag p akan hilang.

$(document).ready(function() {
$("button").click(function() {
$("p").hide();
)};
});

jalankan perintah di atas

- Selector ID

selector id mencari elemen HTML berdasarkan nilai atribut id. Contoh di bawah ini mencari tag dengan atribut id bernilai test.

$("#test")

Karena nilai atribut id adalah unik untuk setiap elemen atau tag maka selector id hanya akan dapat mencari satu elemen saja.

Contoh dibawah ini memperlihatkan ketika suatu tombol dengan atribut id bernilai test akan hilang,

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
})

Jalankan contoh

- Selector Class

selector class mencari elemen HTML berdasarkan nilai atribut class. Contoh di bawah ini mencari tag dengan atribut class bernilai test.

$(".test")

contoh dibawah ini memperlihatkan ketika suatu tombol di klik maka tag dengan atribut class bernilai test akan hilang.

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

Jalankan contoh

I. KESIMPULAN YANG DIDAPAT

Dengan adanya selector ini dalam jquey yaitu berfungsi sebagai pemanggilan element html yang akan di atur/dirubah.

J. REFERENSI

- https://nextgen.co.id/

A. PENDAHULUAN

Pengertian

Jquery adalah sebuah library framework javascript. jadi singkat ceritanya Jquery merupakan pemgembangan dari javascript yang sengaja di buat untuk memudahkan kita untuk mendevelop sebuah website dan ingin membuat efek-efek dan keperluan penggunaan javascript lainnya di dalam pengembangan sebuah website.

Latar belakang masalah

Belum ngerti apa itu jquery fungsi dan cara kerjanya.

B. MAKSUD DAN TUJUAN

Mengetahui Jquery, kelebihan, cara menggunakannya dan tujuannya yaitu agar lebih mudah dan simple untuk penulisannya.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Pengertian Jquery

- Kelebihan Jquery

- Cara menggunakan Jquery

- Menggunakan Jquery secara offline

- Menggunakan Jquery secara online

D. TARGET DAN HASIL YANG DIHARAPKAN

Dapat mengerti dan memahami Jquery, fungsi, dan cara menggunakannya.

E. METODE PELAKSANAAN

- Membaca referensi

F. ALAT DAN BAHAN

- Laptop

- Koneksi internet

G. TARGET WAKTU

08.00 -16.00

H. TAHAPAN PELAKSANAAN

Kelebihan Jquery

- Lebih mudah di mengerti

- Lebih mudah di gunakan

- Ringan.

- Penulisan syntax yang lebih pendek tetapi sudah memiliki kebergunaan yang besar.

- Free

- Bisa di kembangkan untuk membuat plugin-plugin web lain.

- Cara menggunakan Jquery

Ada dua cara untuk menggunakan Jquery, adapun cara yang bisa di gunakan adalah :

- Menggunakan Jquery secara offline (internal).

Menggunakan jquery secara offline maksudnya adalah dengan cara mendownload file jquery dan kemudian menghubungkan file html atau php dengan file jquery.

- Menguhubungkan Jquery secara online (eksternal).

menggunakan jquery secara online maksudnya adalah menggunakan jquery dengan cara menghubungkan file HTML atau PHP dengan link online langsung dari Jquery

- Cara menghubungkan Jquery kedalam file HTML.

langkah pertama kalian bisa dowbload terlebih dahulu filenya di website resminya yaitu https://jquery.com

langkah kedua anda klik bagian page download, dan setelah itu anda klik bagian : Download the compressed, production jQuery 3.6.0

pada jquery yang saat ini saya pakai terbarunya yaitu versi 3.6.0,

setelah itu kalian copy semua code yang didalamnya, dan kalian bisa membuat folder yang nantinya akan di gunakan jquerynya. setelah membuat folder kalian bisa membuat file berformat .js untuk file yang saya buat kali ini saya namakan jquery.js, dan ketika sudah kalian open file jquery.js nya dan code yang kalian copy tadi paste di situ.

ketika sudah di paste, kalian tinggal save filenya.

untuk cara menghubugkan jquerynya ke dalam file html, bisa menggunakan syntax berikut :

<script type="text/javascript" src="lokasi file jquery anda"></script>

- Cara menghubungkan jquery kedalam file HTML secara online.

Anda bisa menghubungkan langsung secara online dengan cara seperti berikut :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

J. KESIMPULAN YANG DIDAPAT

jquery ini sangat simple penulisannya di banding dengan javascript sendiri, dan banyak yang sudah menggunakannya di kalangan programmer.

K. REFERENSI

- https://jquery.com

A. PENDAHULUAN

Pengertian

Di hari ini saya melanjutkan template yang kemaren, saya menambahkan section lagi yaitu mengenai Hobi saya. di bagian ini nantinya modelnya saya akan menambahkan gambar sesuai dengan hobi saya, dan untuk tata letaknya saya buat sebaris.

Latar belakang masalah

Di karenakan template yang berada di Part 1 masih sedikit kontennya, maka saya menambahkan lagi yaitu mengenai Hobi saya.

B. MAKSUD DAN TUJUAN

Maksud dari kegiatan ini adalah menambahkan konten template yang saya buat kemaren dengan menambahkan konten Hobi Saya dan tujuan dari kegiatan ini adalah agar nantinya saya dapat mengerti bagaimana untuk membuat website dengan baik.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Menambahkan konten lagi kedalam template kemaren

- Membuat template menggunakan text editor

D. TARGET DAN HASIL YANG DIHARAPKAN

Agar konten template yang saya buat pada part 1 bisa tambah rame lagi.

E. METODE PELAKSANAAN

- Menambahkan konten dengan menggunakan komponen bahasa HTML & CSS

F. ALAT DAN BAHAN

- Laptop

- Text Editor

- Koneksi internet

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

- Pertama saya menambahkan section lagi di bawah pengalaman programming.

- Saya menambahkan garis pada navigasinya pada css dengan menggunakan z-index dan border-bottom.

- Setelah saya menambahkan garis pada navigasinya saya lanjut menambahkan konten lagi yaitu mengenai Hobi Saya pada bagian Bawahnya.

Ini codingan HTML nya yang saya tambahkan mengenai Hobi Saya :

<section id="hobi">
<div class="tengah">
<div class="kolom">
<h2 class="hobiku">Hobi Saya</h2>
<p>Kegiatan yang saya senangi di luar dunia maya adalah :</p>
</div>

<div class="tutorial-list">
<div class="kotak-list">
<img src="https://img.freepik.com/free-vector/young-man-sitting-armchair-reading-book_74855-6151.jpg?t=st=1658642982~exp=1658643582~hmac=185ce54c079ad8890cb7d932a46c012e68b7ed1b8d4af0db76bc16cba23f85f3&w=740">
<p>Membaca Buku</p>
</div>
<div class="kotak-list">
<img src="https://img.freepik.com/free-vector/flat-football-players-collection_52683-65665.jpg?t=st=1658642996~exp=1658643596~hmac=9de0a58129e7a6808607281df5423ac6a1add3d55c2fcf8b2d816b21d81eb68f&w=740" width="300"/>
<p>Bermain Bola</p>
</div>
<div class="kotak-list">
<img src="https://img.freepik.com/premium-vector/man-dancing-listening-music_23-2148538028.jpg?w=740"/>
<p>Mendengarkan Musik</p>
</div>
</div>
</section>

Ini adalah codingan CSSnya :

section#hobi {
float: left;
margin-right: 30px;

}

.tutorial-list {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
}

.kotak-list {
width: 20%;
margin: 0 auto;
}

.kotak-list img {
width: 100%;
height: 80%;
display: inline-flex;
}

.kotak-list p {
font-family: 'comic sans ms';
font-weight: 800;
font-size: 25px;
text-align: center;
color: #355764;
}

footer {
background-color: tomato;
text-align: center;
color: white;
font-family: 'comic sans ms';
height: 20px;
margin-top: 800px;
width: 100%;
}

Hasilnya codingan yang saya tambahakan di atas akan menjadi seperti ini :

Jika kalian ingin melihat hasilnya lebih lanjut kalian bisa cek di sini :

https://adelwinnugroho.github.io/template-03

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

Ada kesalahan ketika ketika membuat display(tata letak) nya menjadi sebaris sejajar, malah saling berdempetan

Solusi :

Saya menambahkan margin-right: 30px;

pada bagian section hobi.

J. KESIMPULAN YANG DIDAPAT

Ketika ingin mengubah posisi konten menjadi sejajar/sebaris, maka kita harus menambahkan margin agar kontennya nanti tidak terjadi tabrakan atau saling berdempetan.

K. REFERENSI

A. PENDAHULUAN

Pengertian

Di hari ini saya membuat halaman layout dengan menggunakan CSS, layout ini sangatlah penting untuk membuat sebuah website, bahkan rata rata sekarang website sudah pasti ada layoutnya.

Latar belakang masalah

Pentingnya Layout ini untuk membuat struktur sebuah halaman website, maka dari itu saya mempelajari layout ini untuk bisa membuat website sesuai dengan struktur yang sudah di rencanakan.

B. MAKSUD DAN TUJUAN

Maksud dari kegiatan ini adalah mempelajari dan mempraktikkan CSS Layout, dan tujuan dari kegiatan ini adalah sebagai untuk nantinya ketika membuat website bisa menggunaka Layout yang saya pelajari ini.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Membuat struktur dengan menggunakan HTML Senmatik dan CSS

D. TARGET DAN HASIL YANG DIHARAPKAN

Dapat mengerti dan memahami untuk pembuatan Layouting pada HTML Senmatic dan CSS.

E. METODE PELAKSANAAN

- Mencari referensi

- Mempraktikkannya

F. ALAT DAN BAHAN

- Laptop

- Sublime Text

- Koneksi internet

G. TARGET WAKTU

09.30 - 16.00

H. TAHAPAN PELAKSANAAN

- Pertama saya mencari referensi di internet mengenai dengan kata kunci "Membuat Layout dengan menggunakan CSS"

- Setelah itu Saya cari referensi yang nyaman, dan ketika sudah menemukan saya langsung meniru cara pembuatan layoutingnya.

- Saya buka software Sublime Text dan memulai mempraktikkannya, dari mulai membuat komponen HTML nya dan setelah itu CSS nya.

Untuk contoh Layout pada website itu seperti ini :

ini adalah kode yang saya praktikkan untuk membuat layouting tadi :

<!DOCTYPE html>
<html lang="en">

<head>
<title>Template CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
background-color: darkred;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 20%;
height: 300px;
/* only for demonstration, should be removed */
background: darkblue;
text-decoration: none;
padding: 20px;
}

/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
margin: 2px;
}

nav ul li {
margin: 10px;
}

nav a
{
color: white;
text-decoration: none;
}

article {
float: left;
padding: 20px;
width: 80%;
background-color: #f1f1f1;
height: 300px;
/* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}

/* Style the footer */
footer {
background-color: darkred;
padding: 50px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {

nav,
article {
width: 100%;
height: auto;
}
}
</style>
</head>

<body>

<header>
<h2>Belajar Loyouting</h2>
</header>

<section>
<nav>
<ul>
<li><a href="#">Tentang Saya</a></li>
<li><a href="#">Pengalaman</a></li>
<li><a href="#">Hobi</a></li>
</ul>
</nav>

<article>
<h1>Tentang Saya</h1>
<p>Saya Adelwin Nugroho Liandy bisa di panggil Adelwin/win saya adalah siswa Smk Roudlotul Mubtadiin Balekambang. Saya seorang yang kreatif dan suka mencari alternatif solusi dari berbagai macam persoalan
</p>
<h1>Pengalaman</h1>
<p>
Pengalaman saya di BLC TELKOM KLATEN salah satunya yaitu mengikuti training Cisco, dan alhamdulillah saya lulus dan mendapatkan sertifikat internasional
</p>
<h1>Hobi</h1>
<p>
Hobi saya adalah Membaca buku, Mengetik, Bermain bola
</p>
</article>
</section>

<footer>
<p>Copyraight 2022 By AdelwinNL </p>
</footer>

</body>

</html>

Hasil dari kodingan di atas :

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

J. KESIMPULAN YANG DIDAPAT

Layout ini dalam bahasa indonesia yaitu tata letak, ketika membuat sebuah halaman website maka akan di rencanakan terlebih dahulu layoutnya untuk menggambarkan tata letak halaman websitenya seperti apa nantinya yang akan di buat.

K. REFERENSI

- https://www.webhozz.com/blog/belajar-web-design-membuat-layout-dengan-html-css/

A. PENDAHULUAN

Pengertian

Hari ini saya setelah membahas simiotika, lanjut dengan pekerjaan masing masing. Pada hari ini saya melanjutkan CSSnya pada bagian materi CSS Table, CSS Display, CSS max-width, CSS Position, CSS z-index.

Latar belakang masalah

Di karenakan saya ingin menguasai CSS, maka dari itu saya mempelajari dan mempraktikkan langkah-langkah yang ada di w3schools untuk menguasai CSS.

B. MAKSUD DAN TUJUAN

Agar memiliki Skills CSS dan tujuannya adalah Ketika sedang membuat halaman web menggunakan HTML, maka CSS inilah yang saya gunakan untuk mempercantik dan mengatur halaman HTMLnya.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

CSS Table, CSS Display, CSS max-width, CSS Position, CSS z-index.

D. TARGET DAN HASIL YANG DIDAPAT

Mengetahui dan memahami CSS Table, CSS Display, CSS max-width, CSS Position, CSS z-index.

E. METODE PELAKSANAAN

- Membaca Referensi

- Mempraktikkan

- Mengerjakan Try it Your Self

F. ALAT DAN BAHAN

- Laptop

- Koneksi intenet

- Sublime text

G. TARGET WAKTU

7 Jam

H. TAHAPAN PELAKSANAAN

- CSS Table

Table pada HTML ini juga dapat di perbaiki dipercantik dengan menggunakan CSS, kalian bisa menambahkan warna latar belakangnya, mengubah ukuran, dan memposisikannya dengan menggunakan CSS.

Contoh :

<--HTMLNYA-->

<body>

<h1>Mempercatik Table menggunakan CSS</h1>

<table id="table-css">
<tr>
<th>Nama</th>
<th>Bidang</th>
<th>Hobi</th>
</tr>
<tr>
<td>Adelwin</td>
<td>Programmer</td>
<td>Membaca Buku</td>
</tr>
<tr>
<td>Adib</td>
<td>Digital Marketing</td>
<td>Bermain Bola</td>
</tr>
<tr>
<td>Valen</td>
<td>Multimedia</td>
<td>Mendengarkan Musik</td>
</tr>
</table>

</body>

<--CSSNYA-->

<style>
#table-css {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#table-css td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}

#table-css tr:nth-child(even){background-color: #f2f2f2;}

#table-css tr:hover {background-color: #ddd;}

#table-css th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
</style>

Dan hasil dari codingan di atas akan menjadi seperti ini:

- CSS Display

Pengertian display jika disebuah toko, display itu artinya tata letak yang berfungsi untuk menarik perhatian pengunjung atau pembeli.

Dan ketika kalau konteks nya di CSS akan sama dengan properti display CSS mungkin sama saja yaitu untuk mengatur tata letak sebuah website.

1. Display inline

Pengertian Displau inline sendiri adalah, Mengalir kesamping, yang artinnya adalah semua konten yang diberikan display inline akan mengalir kesamping, jadi gini maksudnya.

"Jika terdapat sebuah box yang berukuran tidak terlalu lebat atau tidak memenuhi layar dan disamping layar tersebut masih ada tempat yang kosong, maka ia akan mengisi terlebih dahulu bagian kosong tersebut. Dan jika sudah full maka baru akan mengisi kebawahnya."

Pada beberapa tag HTML bawaan yang memiliki display inline contohnya, tag link, span, image, dll.

Contoh display inline:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
.header {
text-align: center;
margin: 10px auto;
}
#box1 {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline;
text-align: center;
color: white;
background: #2343F3;
}
#box2 {
margin: 20px;
padding: 10px;
display: inline;
text-align: center;
color: white;
background: #FF0000;
}
#box3 {
margin: 20px;
padding: 10px;
display: inline;
text-align: center;
color: white;
background: #000000;
}
</style>
</head>
<body>
<div class="header">
<h1>Display CSS</h1>
</div>
<fieldset>
<legend><h2>1. Display Inline</h2></legend>
<div>
<div id="box1"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
<div id="box2"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" height="100"></div>
<div id="box3"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" height="100"></div>
</div>
</fieldset>
</body>
</html>

ini adalah potret hasil codingan di atas :

Jika diperhatikan pada box1 kita menggunakan width dan height, pada box2 dan box3 kita tidak menggunakan width dan height.

Dan coba perhatikan, kenapa hasilnya sama? karena pada display inline width dan height tidak berpengaruh. kecuali pada img.

2. Display block

Jika inline block tadi adalah mengalir kesamping, maka display block ini adalah mengalir kebawah. Nah jadi seperti ini, sebuah konten atau di ibaratkan sebuah box yang akan mengalir kebawah, alias tidak mengalir kesamping, langsung kebawah walaupun masih ada tempat kosing di bagian samping/halaman tersebut.

Contoh display block, yaitu heading (h1), paragraf(p), <li>, <div> dan itulah beberapa contoh display block.

<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
.header {
text-align: center;
margin: 10px auto;
}
#box1 {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
display: block;
text-align: center;
color: white;
background: #2343F3;
}
#box2 {
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
display: block;
text-align: center;
color: white;
background: #FF0000;
}
#box3 {
width: 150px;
height: 100px;
margin: 20px;
padding: 10px;
display: block;
text-align: center;
color: white;
background: #000000;
}
</style>
</head>
<body>
<div class="header">
<h1>Display CSS</h1>
</div>
<fieldset>
<legend><h2>1. Display Block</h2></legend>
<div>
<div id="box1"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
<div id="box2"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
<div id="box3"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
</div>
</fieldset>
</body>
</html>

ini adalah potret hasil codingan di atas :

3. Display inline-block

Untuk terakhir adalah Displau inline-block, yaitu gabungan dari inline dan block, maka hasil yang akan ditampilkan adalah mengalir dan seperti block.

<html>
<head>
<meta charset="UTF-8">
<title>Inline-block</title>
<style>
.header {
text-align: center;
margin: 10px auto;
}
#box1 {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
background: #2343F3;
}
#box2 {
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
background: #FF0000;
}
#box3 {
width: 150px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
background: #000000;
}
</style>
</head>
<body>
<div class="header">
<h1>Display CSS</h1>
</div>
<fieldset>
<legend><h2>1. Display Inline-Block</h2></legend>
<div>
<div id="box1"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
<div id="box2"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
<div id="box3"><img src="https://adelwinnugroho.github.io/assets/img/profile.jpg" width="100" weight="100"></div>
</div>
</fieldset>
</body>
</html>

Hasilnya akan seperti ini:

- CSS max-width

Properti max-width digunakan untuk mengatur lebar maksimum elemen.

Hal ini mencegah nilai properti lebar dari menjadi lebih besar dari max-width.

Catatan : Nilai dari max-width menimpa properti lebar.

untuk syntaks nya seperti ini,

max-width: none|length|initial|inherit;

contoh :

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class="ex1">elemen ini menggunakan lebar: 500px;</div>
<br>

<div class="ex2">elemen ini menggunakan lebar-maksimum: 500px;</div>

<p><strong>Tips:</strong> Coba kalian geser browser kalian, nanti max-width ini akan menyesuaikannya</p>

</body>
</html>

Hasil :

Bedannya ketika kalian bandingkan antara width biasa dengan max-width, max-width ini ketika browsernya dikecilkan/digeser maka akan menyuaikan dengan ukurannya.

- CSS Position

Properti position menentukan jenis metode penentuan yang digunakan untuk suatu elemen (statis, relatif, tetap, absolute, atau lengket)

ini beberapa properti-properti untuk memposisikan dengan menggunakan CSS

- static
- relative
- fixed
- absolute
- sticky

Elemen kemudian diposisikan menggunakan properti atas, bawah, kiri dan kanan. Namun, properti ini tidak akan berfungsi kecuali jika position properti disetel terlebih dahulu. Mereka juga berbeda tergantung pada nilai posisi.

- Static

Position digunakan untuk mengatur element menjadi statis secara default. Element akan mengikuti posisi normal secara default. Belajar css mengenal position CSS

contoh penggunaan position static:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS-Position</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.Kotak{
background-color: blue;
position: static;
color: white;
}
</style>
</head>
<body>
<div class="Kotak">Biru</div>
</body>
</html>

Hasil :

- Relative

Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS-Position</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.Kotak{
background-color: blue;
position: relative;
color: white;
}
</style>
</head>
<body>
<div class="Kotak">Biru</div>
</body>
</html>

Hasilnya :

- Fixed

Sebuah element HTML yang di atur dengan position fixed akan memiliki sifat tetap. Tanpa ada perubahan bahka jika halaman website di scroll. Berlaku pengaturan left, bottom, top dan right pada position fixed.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS-Position</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.Kotak{
background-color: blue;
position: fixed;
color: white;
}
</style>
</head>
<body>
<div class="Kotak">Biru</div>
</body>
</html>

Hasil :

- Absolute

Element HTML yang menggunakan position absolute akan tertimpa dengan elemen lain. Position adalah salah satu properti position CSS yang sangat berguna. Salah satunya adalah untuk membuat menu dropdown dengan HTML dan CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS-Position</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.Kotak{
background-color: blue;
position: fixed;
color: white;
}

.Kotak2 {
background-color: green;
position: absolute;
color: white;
}
</style>
</head>
<body>
<div class="Kotak">Biru</div>
<div class="Kotak2">Hijau</div>
</body>
</html>

Hasil :

Kalian bisa melihat bahwa kotak yang berwarna biru menghilang karena tertimpa dengan kotak berwarna hijau.

- CSS z-index

Beberapa hal yang dalam pendukung pembuatan sebuah website selain position CSS, Tata Letak CSS, Display dan lain lain, yaitu menggunakan z-index salah satunya.

Jika kalian sebelumnya sudah menggunakan position absolute atau fixed yang sudah kita pelajari kemaren, nah hasilnya pasti akan berada di atas elemen yang tidak menggunakan postion tersebut kan, Nah disini kita menggunakan z-index untuk mengaturnya.

z-index ini berfungsi untuk mengatur tahta di dalam CSS.

Jika kalian pernah menggunakan Adobe photoshop, nah disitu kan ada layer layer gitu, jadi bisa dibilang z-index itu adalah layer disebuah webste.

<html>
<head>
<meta charset="UTF-8" />
<title>z-index</title>
<style>
div {
text-align: center;
}
#box1 {
position: absolute;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 10px;
background: #00ffab;
z-index: -10;
}
#box11 {
position: absolute;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 200px;
background: #00ffab;
z-index: -10;
}
#box2 {
position: absolute;
width: 100px;
height: 100px;
top: 120px;
left: 30px;
background: #00aeff;
z-index: 1;
}
#box22 {
position: absolute;
width: 100px;
height: 100px;
top: 120px;
left: 195px;
background: #00aeff;
z-index: 1;
}
</style>
</head>
<body>
<div>
<p>
Latihan Belajar CSS z-index
</p>
</div>
<div>
<p id="box1">Kotak pertama1</p>
<p id="box2">Kotak kedua2</p>
</div>
<div>
<p id="box11">Kotak pertama1</p>
<p id="box22">Kotak pertama2</p>
</div>
<div>
<p id="box11">kotak pertama1</p>
<p id="box22">kotak kedua2</p>
</div>
</body>
</html>

Hasil :

Penjelasan singkat :

Pada kotak pertama dan kotak kedua itu berbeda pada bagian z-indexnya, kenapa? Jika nilai z-index pada kotak pertama:kedua, maka kotak pertama akan berada diatas kotak kedua dan sebaliknya.

I. REFERENSI

- w3schools

A. PENDAHULUAN

Pengertian

Di hari ini saya kegiatannya adalah melanjutkan CSS saya, yaitu bagaimana cara untuk menambahkan ikon, dan mempercantik tampilan list dan link dengan menggunakan CSS.

Latar belakang masalah

Di karenakan saya ingin menguasai CSS maka dari itu saya mempelajari langkah-langkahnya dari w3schools.

B. MAKSUD DAN TUJUAN

Maksud dari kegiatan ini adalah Menambahkan ikon pada halaman web dan mempercantik tampilan list serta link, dan tujuan dari kegiatan ini adalah dapat menambahkan ikon pada web serta mempercantik tampilan link dan list.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Menambahkan ikon

- Mempercantik list

- Mempercanti link

D. TARGET DAN HASIL YANG DIHARAPKAN

Bisa menambahkan ikon dan mempercantik tampilan link dan list pada halaman website.

E. METODE PELAKSANAAN

- Membaca referensi

- Ngoding

F. ALAT DAN BAHAN

- Laptop

- Koneksi intenet

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

- Cara menambahkan ikon pada CSS

Kalian login terlebih dahulu di https://fontawesome.com

ketika sudah login anda akan menambahkan untuk nantinya ditambahkan di halaman HTML anda :

<script src="https://kit.fontawesome.com/cd7445c9dd.js" crossorigin="anonymous"></script>

Nahh kalian bisa mencari ikon yang anda butuhkan di web tersebut, untuk cara memanggilnya kalian bisa klik ikon yang anda pilih, dan nanti akan ada code HTMLnya, kalian bisa salin code tersebut untuk memanggil ikonnya.

<i class="format ikonnya"></i>

contoh : ikon whatsapp

<i class="fa-brands fa-whatsapp"></i>

nanti akan muncul seperti ini :

- Memvariasi link dengan CSS

link pada halaman html pun bisa untuk dipercantik menggunakan CSS. sebagai contoh ini adalah hyperlink biasa tanpa menggunakan CSS

contoh

Dan kalian ketika menambahkan code css seperti ini :

a {
background-color: tomato;
}

maka akan ada warna latar belakangnya seperti gambar di bawah ini :

Agar bisa berubah warna ketika di klik kalian bisa menambahkan kode seperti ini:

a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: green;
color: white;
}

maka hasilnya akan seperti ini, kalian bisa mengarahkan crushor kalian ke hyperlinknya maka latar belakang warnanya yang tadinya putih akan menjadi hijau :

- CSS list

List ini ketika akan keren ketika di percantik menggunakan CSS, contohnya ini adalah biasa :

ini adalah potret list html saja menggunakan CSS

Jika kalian ingin mempercantik list tersebut dengan CSS, ikuti code saya ini :

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>

<h1>Mempercantik list dengan CSS</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Hasil codingan di atas akan seperti ini :

I. REFERENSI

- w3schools

A. PENDAHULUAN

Pengertian

Visi merupakan wawasan, pandangan, dan gambaran kedepan yang ingin diwujudkan. Dan misi adalah tahapan taha untuk meraih visi tersebut, misi ini yang mewujudkan yang tadinya tidak ada menjadi ada.

Latar belakang masalah

Di karenakan dalam keadaan/kondisi apapun, tidak tahu visi dan misinya ngapain.

B. MAKSUD DAN TUJUAN

Maksud dari kegiatan ini adalah membahas tentang visi dikarenakan belum mengerti visi dan misinya kedepan mau ngapain dan tujuan dari kegiatan ini adalah Agar bisa membangun visi dan misinya kedepan.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Visi

- Misi

D. TARGET DAN HASIL YANG DIHARAPKAN

Dapat membangun visi dan misi dan bisa menjalankan misinya untuk meraih visi tersebut.

E. METODE PELAKSANAAN

- Berdiskusi

F. ALAT DAN BAHAN

- Laptop

- Koneksi internet

G. TARGET WAKTU

08.00 - 11.00

H. TAHAPAN PELAKSANAAN

- Visi

Visi adalah wawasan, pandangan, dan gambaran kedepan yang kita ingin wujudkan. Bisa dikatakan visi menjadi tujuan masa depan suatu organisasi atau lembaga. wawasan tersbut adalah gambaran masa depan yang ingin dicapai.

- Misi

Setelah mengetahui pengertian dari visi, maka kini Anda akan di ajak mengetahui apa yang dimaksud dengan misi. Jika tadi sudah di ungkap bahwa merupakan tujuan atau arah utama. Maka bisa dikatakan misi adalah suatu proses atau tahapan yang seharusnya di lakukan dengan tujuan bisa mencapai visi tersebut.

Contoh kecil visi dan misi disuruh untuk kepasar belanja makanan :

Visi : Pergi kepasar untuk untuk belanja bahan bahan untuk dijadikan makanan nantinya.

Misi : Tersedianya bahan untuk di jadikan masakan sebagai makanannya nanti.

Dan harus mengerti maksud dan tujuannya kepasar ngapain.

Maksud : Pergi kepasar untuk membeli bahan bahan yang dibutuhkan untuk memasak.

Tujuan : Menyediakan bahan untuk di jadikan makanan.

Nah ketika sudah mengerti visi dan misi juga maksud dan tujuannya selanjutnya di perincikan lagi tahapan tahapan nya:

Seperti mensurvey terlebih dahulu bahan bahan apa yang masih kurang dan belum ada dan setelah itu di rencanakannya bahan bahan yang akan di masak nantinya, dan kendaraanya juga untuk nantinya kepasar memakai apa.

Setelah itu di organisasikan orang yang terlibat, contohnya yang kepasar siapa saja, yang memasak, dan kebersihannya siapa.

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

J. KESIMPULAN YANG DIDAPAT

Dimanapun dan si kondisi apapun kita harus mengerti visi dan misinya apa, maksud dan tujuannya ngapain. Agar mengerti wawasan dan gambaran kedepannya yang kita lakukan.

K. REFERENSI

- https://dpupr.banjarnegarakab.go.id/?page_id=358

A. PENDAHULUAN

Pengertian

Di hari ini saya masih memonitoring dari pekerjaan team, juga saya mengisi pekerjaan saya dengan membuat list link media sosial saya dengan menggunakan HTML, CSS. Saya mengoding ini ketika sedang luang waktunya.

Latar belakang masalah

Dalam memonitoring tersebut saya sambil menggunakan waktu pekerjaan saya dengan mengoding tempat dikarenakan masih ada waktu luang yang saya bisa gunakan.

B. MAKSUD DAN TUJUAN

Maksud dari kegitan ini adalah membuat link list yang saya sebagai kumpulan media sosial saya dan tujuan dari kegiatan ini adalah membuat link list yang berisi kumpulan media sosial saya sebagai pengganti waktu luang saya.

C. BATASAN DAN RUANG LINGKUP PEKERJAAN

- Memonitoring

- Ngoding HTML, CSS

D. TARGET DAN HASIL YANG DIHARAPKAN

Sukses membuat list link untuk medial sosial saya dan dapat di akses oleh siapapun.

E. METODE PELAKSANAAN

- Brefing terlebih dahulu yang di pimpin oleh Mbah Suro.

- Memulai untuk bekerja sesuai dengan bidangnnya masing masing

- Memonitoring

- Mencari referensi

- Ngoding

F. ALAT DAN BAHAN

- Laptop

- Koneksi internet

- Sublime Text

G. TARGET WAKTU

08.00 - 16.00

H. TAHAPAN PELAKSANAAN

- Untuk referensi yang saya akan buat nantinya, saya mengambil referensi di linktr.ee

- Kedua saya mengoding menggunakan software Sublime Text dan saya memulai dengan komponen HTML dulu.

- Ketiga saya membuat komponen CSS untuk mempercantik halaman tersebut.

Ini adalah potret saya ketika mengoding bagian HTMLNya

Dan ini adalah potret saya mengoding bagian CSSnya.

Tak lupa saya sambil memonitoring saya menanyakan kepada team sudah sampai mana pekerjaan dan menemukan masalah atau tidak, jika menemukan masalah di komunikasikan saja bersama agar kita bisa saling membantu.

Setelah itu saya menghosting codingan saya tadi dengan menggunakan Github, dikarenakan hosting di situ gratis. Untuk linknya kalian bisa cek disini :

https://adelwinnugroho.github.io/list-link-saya

I. KESIMPULAN YANG DIDAPAT

Saya menggunakan waktu luang pekerjaan saya untuk membuat sebuah halaman yang berisi list link media sosial saya, agar waktu luang tersebut tidak terbuang dengan sia-sia.

J. REFERENSI

- https://linktr.ee/adelwinnl