Tujuan Pembelajaran :

1. Siswa dapat memahami dan mengimplementasikan instalasi Git

2. Siswa dapat memahami dan mengimplementasikan penggunaan Version Control Git

3. Siswa dapat memahahami Git, GitHub dan GitLab

4. Siswa dapat memahami perintah-perintah dasar kode HTML

5. Siswa dapat mengimplementasikan penulisan kode dengan HTML

Materi Pembelajaran :

BAGIAN. 1

VERSION CONTROL GIT

• Definisi Version Control System

• Macam-macam GIT

• Pengenalan GIT

1. Kecepatan
2. Rancangan yang sederhana
3. Dukungan yang kuat untuk pengembangan non-linier (ribuan cabang paralel)
4. Benar-benar tersebar
5. Mampu menangani proyek besar seperti Linux secara efisien (kecepatan dan ukuran data)

1. Sangat mudah dalam penggunaannya.
2. Ada checkpoint sendiri ketika adanya perubahan yang terjadi pada sebuah kode.
3. Dapat menyimpan seluruh versi source code.
4. Bisa berkontribusi dalam berbagai proyek yang sifatnya open-source.
5. Bisa memahami cara mendeploy sebuah aplikasi modern
6. Bisa memahami cara untuk berkolaborasi sebuah atau beberapa proyek.

• Instalasi di Linux

• Installasi di MacOS

• Perintah Dasar GIT

1. GitLab hosts proyek software (private) Anda secara gratis.
2. GitLab Adalah platform untuk mengelola Git repositories.
3. GitLab menawarkan private repositories dan free public, pelacakan masalah, dan wiki.
4. GitLab adalah user friendly web interface layer di atas Git, yang meningkatkan kecepatan bekerja dengan Git.
5. GitLab menyediakan sistem Continuous Integration (CI) untuk mengelola proyek dan menyediakan user interface bersama dengan fitur-fitur lain dari GitLab.

Catatan :

Ada tiga hal penting yang perlu kamu pahami dari halaman repository di atas:

1. Repository

Merupakan sebuah folder pusat yang berfungsi untuk menyimpan source code. Owner dapat membatasi hak akses repository pada anggota tim pengembang yang lain. Hanya anggota tim yang kamu beri izin yang dapat membaca, menulis dan menghapus file di repository. Pengaturan akses perizinan ini terdapat pada Collaborator. 

2. Collaborator

Merupakan user lain yang kamu beri akses untuk memodifikasi isi dari repository. 

3. Checkbox Initialize this repository with a README 

Dapat kamu centang atau tidak, karena hanya berpengaruh pada pembuatan berkas README.

Perhatikan gambar di bawah ini:

Catatan:

Link ini merupakan link untuk mengambil, mengubah, maupun menghapus berkas pada repository. Hak akses user tergantung dengan pengaturan Collaborator. Owner memiliki hak akses penuh terhadap repository. Jadi, sebagai owner kamu bebas memodifikasi repository milikmu.

Catatan:

1. Bagi kamu pengguna Windows, langsung saja klik kanan pada area folder kosong. Selanjutnya, pilih dan klik Git Bash Here.

2. Bagi kamu pengguna LInux maupun MacOS, silahkan menyesuaikan dengan terminal masing-masing.

3. Apabila kamu cloning dari repository orang lain mungkin kamu bisa mengambil berkasnya. Akan tetapi, kamu tidak bisa menambahkan, mengubah maupun menghapus berkas. Hali ini karena kamu belum diberi akses pada collaborator repository.

Catatan:

Pastikan hanya mengunggah berkas yang berkaitan dengan pengembangan perangkat lunak.

Catatan:

Git Add, Git Commit & Git Push Origin Master

1. Tanda “ . “ berarti menambahkan apapun yang baru pada folder tersebut. Atau menambahkan apapun yang telah diubah dari berkas sebelumnya. Kamu bisa menambahkan berkas tertentu saja dengan cara git add index.html.

2. git commit –m merupakan perintah untuk memberikan pesan terhadap berkas yang diunggah. Kamu dapat mengganti pesan di dalam simbol ‘petik dua (“…..”) dengan pesan yang lain.

3. Perintah master merupakan nama cabang utama dalam repository milikmu. Istilah kerennya adalah branch. Kamu bisa melihat cabang utama pada akhir dari direktori. Perhatikan saja tanda warna kuning pada halaman terminal.

4. Apabila kamu disuruh untuk login lagi setiap kali akses maka ikuti saja sesuai perintah. Namun apabila kamu mulai merasa terganggu, silahkan coba tips ini. Cari tutorial cara menggunakan ssh dalam GitHub. Pelajari dan praktekkan.

Perhatikan gambar di bawah ini:

Catatan:

Apabila berkas yang kamu unggah sudah sesuai, berarti kamu telah berhasil menambahkan berkas.

• Cara Menggunakan Stash dan Pull pada Git

Catatan:

1. Hal di atas merupakan dasar penggunaan git stash dan git pull. Akan tetapi, dalam praktik nyata akan berbeda. Biasanya, collaborator harus menggunakan lebih sedikit kombinasi dengan perintah dan kondisi.

2. Bagi kamu yang baru belajar tentang Git, sebaiknya kamu banyak praktik. Coba pakai git stash dan git pull pada project skala kecil. Misal: 1-3 orang. Lakukan berulang-ulang sampai paham.

• Cara Membuat Branch pada Git

Catatan :

1. Nama x_features ini bisa kamu ganti dengan nama branch apapun. Bebas sesuai keinginan kamu.

2. Fungsi dari git checkout adalah untuk memindahkan fokus branch. Kamu bisa lihat sebelum menggunakan git checkout berada pada master branch. Dan setelah menggunakan git checkout,

3. Kamu bisa pindah branch yang lain. Apabila kamu ingin balik ke branch master, kamu bisa pakai git checkout master.

Catatan:

Kamu masih ingat dengan perintah git push origin master? Kata master ini ditujukan untuk master branch. Ada kasus menarik saat kamu ingin mengunggah berkas repository ke branch lain. Kamu harus menulis perintah git push origin master diikuti dengan nama branch yang diinginkan. Sebelum ini, kamu harus pindah dulu ke branch tersebut menggunakan git checkout.

BAGIAN. 2

PENGENALAN HTML

• Sejarah HTML

HTML pertama kali diciptakan pada tahun 1980 oleh IBM dengan mengembangkan sebuah bahasa pemrograman yang saat itu diberi nama GML atau Generalized Markup Language. Pada tahun 1986 GML berganti nama menjadi SGML atau Standar Generalized Markup Language. Kemudian berganti nama lagi pada tahun 1989, waktu itu oleh Tim BernesLee dari CERN diberi nama HTML. Sejak awal tahun 1990-an, HTML atau Hypertext Markup Language telah menjadi teknologi utama untuk web. HTML pertama kali muncul di internet dalam bentuk teks, seperti halnya sebuah file.txt biasa.

• Definisi HTML 

HTML atau Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. HTML pertama kali dibuat oleh Tim Berners-Lee yang merupakan fisikawan di lembaga penelitian CERN, Swiss. Berners-Lee mempunyai ide atau pemikiran mengenai sistem hypertext berbasis internet sekitar tahun 1991. Secara umum, fungsi HTML adalah untuk mengolah serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Selain itu HTML juga disebut sebuah bahasa formatting yang digunakan untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website(Web Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML disimpan dengan ekstensi .html (dot html). dan dapat dieksekusi atau diakses menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah dijelaskan, HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut disebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website tentu developer akan sangat disibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.

• Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat dilakukan dengan HTML adalah sebagai berikut :  

- Membungkus element-element tertentu sesuai kebutuhan.

- Membuat heading atau format judul.

- Membuat Tabel. 

- Membuat List. 

- Membuat Paragraf. 

- Membuat Form. 

- Membuat Tombol. 

- Membuat huruf tebal. 

- Membuat huruf miring. 

- Menampilkan gambar.

- Menampilkan video, dsb.

Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya, dengan HTML5 memungkinkan kita untuk membuat streaming video tanpa bantuan adobe flash. Jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar dari pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html harus menggunakan web browser dan file html disimpan dengan ekstensi .html (dot html).

• Teks Editor dan Web Browser

Text editor adalah suatu software yang memungkinkan seseorang untuk membuka, melihat, dan mengedit file plain text atau teks biasa. Contoh :

1. Notepad++

2. Sublime Text

3. Visual Code Studio

4. Komodo Edit

5. Atom

Web browser adalah suatu perangkat lunak atau software yang digunakan Untuk mencari informasi atau mengakses situs-situs yang ada di internet. Contoh :

1. Google Chrome

2. Mozilla Firefox

3. Safari

Untuk pembelajaran ini kita akan menggunakan teks editor VSCode (link download) dan web browser Google Chrome (link download)

• Struktur Dasar HTML

Dokumen HTML harus memiliki struktur dasar yang terdiri dari 4 bagian utama yaitu: tag DOCTYPE, tag html, tag head, dan tag body. Keempat bagian tersebut adalah syarat minimal yang menjadi standar pada struktur global dokumen HTML dari W3C.

• Penjelasan Sturktur Dasar HTML

1. DOCTYPE atau DTD

DOCTYPE yang merupakan singkatan dari Document Type Declaration dan juga dikenal sebagai DTD adalah deklarasi dokumen yang digunakan untuk menginfokan tipe dokumen dan versi HTML yang digunakan kepada aplikasi web browser. Penulisan DOCTYPE harus berada pada awal dokumen.

Sesuai pada contoh diatas, penulisan DTD atau DOCTYPE ini berada diawal yaitu sebelum tag <html>. Pada versi HTML sebelumnya, penulisan DTD ini lebih panjang dengan menyebutkan URL dan mode halaman yang digunakan namun hal tersebut tidak berlaku untuk HTML5. Pada HTML5 penulisan lebih disederhanakan menjadi <!DOCTYPE html>.

2. Tag <html>

Tag html digunakan untuk menginformasikan pada aplikasi web browser bahwa tipe dokomen tersebut adalah HTML. Tag html juga menjadi wadah untuk semua elemen HTML. Jadi, semua elemen harus berada di dalam tag tersebut kecuali DOCTYPE karena DOCTYPE bukan termasuk elemen melainkan deklarasi dokumen.

Tag html merupakan tag yang membutuhkan penutup tag. Jadi kita harus menutup tag tersebut di akhir dokumen seperti contoh diatas <html> pada baris ke 2 dan diakhiri dengan </html> pada baris ke 9 (akhir dokumen).

3. Tag <head>

Tag head merupakan tag yang berisi informasi tentang halaman yang tidak ditampilkan di halaman web browser. Misalnya: source css, js atau lainnya yang berasal dari luar, informasi meta, title, dan lainnya. Namun, khusus untuk tag <title> akan ditampilkan di title bar pada web browser. Tag <title> adalah tag yang berada di dalam head HTML yang berfungsi untuk menampilkan judul halaman web pada title bar web browser.

Untuk penulisan tag head juga membutuhkan penutup tag. Contoh pada kode di atas, tag <head> dibuka pada baris ke 3 dan ditutup dengan tag penutup </head> pada baris ke 5.

4. Tag <body>

Tag body merupakan tag yang berisi elemen-elemen yang ditampilkan di halaman web. Misalnya teks yang berupa paragraph <p>, heading <h1> hingga <h6>, menampilkan gambar <img />, membuat tabel <table>, dan lainnya. Di dalam tag body inilah konten visual dari halaman web ditempatkan.

Penulisan tag body juga perlu penutup tag. Pada contoh di atas, tag <body> dimulai pada baris ke 6 dan ditutup </body> pada baris ke 8.

• Cara Membuat File HTML

1. Buka Visual Code Studio

2. Pilih File > open folder

3. Buatlah folder baru dan beri nama folder tersebut lalu buka folder tersebut

4. Setelah kembali ke halaman utama VScode, buatlah file index.html

5. Ketik html, lalu pilih html:5 maka otomatis kode struktur html muncul.

6. Untuk melihat hasil output silahkan pilih Go Live di bawah bagian Visual Studio Code.

7. Jika tidak ditemukan Go Live pada bagian bawah, silahkan download dan instal di bagian extension. Pilih seperti di pencarian paling atas.

8. Jika Go Live sudah terinstal, silahkan pilih Go Live untuk menjalankan perintah running, maka akan otomatis dialihkan ke halaman web untuk melihat hasil output kode.

• Tag, Elemen dan Atribut

Suatu Dokumen HTML terdiri dari beberapa elemen yang saling berkaitan satu sama lain. Tiap-tiap elemen diapit oleh tanda lebih kecil (<) dan tanda lebih besar (>). 

Elemen HTML atau Tag <html>  berfungsi sebagai Tag pembuka dan Tag penutup suatu dokumen HTML. Semua Elemen lainnya, Tag atau kode HTML akan ditulis dan dicantumkan di dalam Elemen HTML. 

Elemen Head atau kepala dari dokumen HTML merupakan Header dari dokumen HTML. Element ini terletak diantara Tag <html>  dan Tag </html>. Elemen ini dibuka dengan Tag <head> dan ditutup dengan Tag </head>.

Elemen Title merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Elemen ini terletak diantara Tag <head> dan Tag </head> . Element ini dibuka dengan Tag <title> dan ditutup dengan Tag </title>. 

Elemen Body merupakan Elemen yang nantinya akan menampilkan isi dari dokumen HTML. Elemen ini terletak dibawah Tag </head> dan diapit diantara Tag <html>  dan Tag </html>. Elemen ini dibuka dengan Tag<body> dan ditutup dengan Tag </body>.

3. Atribut HTML merupakan bagian dari Elemen HTML. Atribut bisa digunakan sebagai informasi tambahan pada suatu Tag HTML, informasi tersebut bisa berupa perintah untuk mengatur background, size, dsb. Contoh :

Pada contoh diatas terdapat atribut href dengan nilai sebuah link yang berada didalam Tag<a> , atribut href tersebut berfungsi untuk mengarahkan link ke alamat tujuan sesuai dengan url yang tercantum.

4. Seperti dalam bahasa pemrograman yang lainnya, HTML juga memiliki komentar yang dapat digunakan untuk menjelaskan bagian-bagian dari isi web dokumen. Penulisan komentar dalam HTML sebagai berikut. 

Suatu komentar pada HTML ditandai dengan tanda <!--  sebagai pembuka dan tanda --> sebagai penutupnya.

• Macam-macam Tag

Tag Paragraf pada dokumen HTML adalah Tag yang berfungsi untuk membuat paragraf pada dokumen HTML. Penulisan Tag tersebut dalam HTML menggunakan Tag <p>. Berikut penulisan Tag<p> pada dokumen HTML.

Saat Tag tersebut digunakan, Tag tersebut akan menambahkan sebuah baris kosong di atas dan di bawah teks yang kita tulis di dalam Tag. Baris-baris kosong tersebut berfungsi untuk memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya.

Untuk membuat heading pada Dokumen Html yang nantinya akan ditampilkan pada Web Browser, HTML menyediakan Elemen Heading yang dimulai dari Tag <h1> sampai Tag <h6> pada umumnya, font dasar yang digunakan pada web browser adalah Times New Roman dengan ukuran 16px. Tiap-tiap elemen heading pada Html mempunyai font dan ukuran standar yang semuanya ditentukan dari font dasar yang digunakan pada browser.

Teks pada Html yang akan ditampilkan pada Web Browser dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap maksud dan tujuan dari teks tersebut. format tersebut bisa berupa Teks Tebal, Teks Penting, Teks Miring, dsb. berikut Tabel berisi 11 Tag khusus.

• Macam-macam Atribut

Berikut merupakan contoh atribut yang sering digunakan.

Selain materi di atas, silahkan teman - teman wajib juga mempelajari referensi berikut untuk lebih paham mengenai HTML.

• https://www.w3schools.com/html/

• https://www.freecodecamp.org/news/html-basics-for-beginners/

• https://puntadewa.my.id/html/

• https://www.learn-html.org/

Selain materi di atas, silahkan teman-teman wajib juga mempelajari referensi berikut untuk lebih paham mengenai Version Control GIT.

• https://www.tutorialspoint.com/gitlab/index.htm

• https://www.petanikode.com/git-remote/

• https://www.niagahoster.co.id/blog/github-adalah/#Pengertian_GitHub

• https://vatih.com/bisnis/cara-menggunakan-git/

• https://www.petanikode.com/tutorial/git/

• https://www.niagahoster.co.id/blog/git-tutorial-dasar/#Cara_Install_Git_di_Windows