HTML DASAR (2)

Kegiatan ekskul pada hari Jum’at, 8 Oktober 2021.

Hallo gens, pada kesempatan kali ini kita bakal membahas dasar dari HTML, mulai dari HTML Pragraraphs, styles hingga HTML Link.

 

HTML Pragraraphs

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

  • Tag <hr>merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule).
  • Fungsi tag <br>adalah untuk membuat baris baru.
  • Tag <pre>(preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Berikut merupakan jenis-jenis Formating Tag yang dapat digunakan untuk mengatur Text:

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic text
  • <em> – Emphasized text
  • <mark> – Marked text
  • <small> – Smaller text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text

<sup> – Superscript text

HTML Comments

Komentar adalah elemen yang akan diabaikan oleh browser. Ia tidak akan ditampilkan di dalam web.

Komentar biasanya digunakan untuk memberikan informasi tambahan pada kode HTML dan kadang juga digunakan untuk menon-aktifkan beberapa kode HTML.

HTML Style

Style di HTML merupakan atribut yang berfungsi untuk menambahkan Style pada sebuah elemen HTML, seperti merubah warna, font, ukuran, dan lain-lain.

HTML Links

Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain.

Elemen ini bisa diklik.. dan nanti akan membuka halaman lain sesui alamat URL yang diberikan.

Itu saja yang dapat disampaikan pada artikel kali ini, semoga dapat membantu. Jangan lupa dicoba ya genss. Selalu semangat dan always good attitude.

Sampai jumpa di artikel selanjutnya.

HTML DASAR

Kegiatan ekskul pada hari Jum’at, 15 Oktober 2021.

Hallo gens, pada kesempatan kali ini kita bakal membahas dasar dari HTML

Apa itu HTML?

HTML atau HyperText Markup Language merupakan sebuah bahasa markah untuk membuat halaman web

  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML adalah bahasa markup standar untuk membuat halaman Web
  • HTML menggambarkan struktur halaman Web
  • HTML terdiri dari serangkaian elemen
  • Elemen HTML memberi tahu browser cara menampilkan konten
  • Elemen HTML memberi label potongan konten seperti “ini adalah judul”, “ini adalah paragraf”, “ini adalah tautan”, dll.

Elemen HTML

Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:

< tagname > Konten ada di sini… < /tagname >

Atribut HTML

memberikan informasi tambahan tentang elemen HTML.

Atribut HTML

  • Semua elemen HTML dapat memiliki atribut
  • Atribut memberikan informasi tambahan tentang elemen
  • Atribut selalu ditentukan di tag awal
  • Atribut biasanya datang dalam pasangan nama/nilai seperti: nama=”nilai”

HTML Headings

HTML Headings judul atau subjudul yang ingin Anda tampilkan di halaman web.

Itu tadi pelajaran awal dari HTML, seru kan? Sekian gens terima kasih

stay Good Attitude.

 

HTML FORM

Kegiatan ekskul pada hari Jum’at, 29 Oktober 2021 dan 5 November 2021.

Halo genss di kegiatan kali ini kita belajar tentang apa itu Form HTML dan bagaimana cara membuat form itu?

Form pada HTML digunakan untuk mengambil data informasi dari pengunjung yang mereka isi pada tabel input, yang mana data itu akan di proses menggunakan program tertentu misalnya seperti PHP. Tapi pada materi kali ini kita hanya membuat sebuah form saja tidak sampai memproses datanya. Tag yang akan digunakan pada pembuatan form HTML adalah  <form> yang didalamnya bisa berupa <input>, <textarea> , <option>, <checkbox> dan <select>. Seperti tabel yang dibawah ini:

HTML Form Atribut :

Atribut Form

HTML Form Elemen :

Elemen Form

HTML Tipe Input:

Tipe Input Form

 

Untuk lebih jelas cara membuat form dengan menggunakan HTML, perhatikan contoh berikut :


<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<table>
<tr>
<td><label for=”username“>Username</label></td>
<td><input type=”textname=”usernameplaceholder=”usernameid=”username“/></td>
<br>
</tr>
<tr>
<td><label for=”password“>Password</label></td>
<td><input type=”passwordname=”passwordplaceholder=”passwordid=”password“/></td>
<br>
</tr>
<tr>
<td><label>Jenis Kelamin </label></td>
<td><input type=”radioname=”jeniskelaminid=”pria“><label for=”pria“>Pria</label>
<input type=”radioname=”jeniskelaminid=”wanita“><label for=”wanita“>Wanita</label></td>
</tr>
<tr>
<td><label >Hobi </label></td>
<td><input type=”checkboxname=”maingameid=”maingame“><label for=”maingame“>Main Game</label>
<input type=”checkboxname=”membacaid=”membaca“><label for=”membaca“>Membaca</label></td>
</tr>
<tr>
<td colspan=”2“><textarea name=”textareaid=”textareacols=”30rows=”3placeholder=”textarea“></textarea></td>
 </tr>
<tr>
<td><label >Kota </label></td>
<td><select name=”” id=””>
<option value=”Bandung“>Bandung</option>
<option value=”Yogyakarta“>Yogyakarta</option>
<option value=”Surabaya“>Surabaya</option>
</select></td>
</tr>
<tr>
<td><button type=”submit“>Kirim</button></td>
<td><button type=”reset“>Reset</button></td>
</tr>
</table>
</fieldset>
</form>
</body>

</html>


Dan gambar di bawah ini adalah hasil dari contoh diatas:

Contoh Hasil Form HTML
Membuat Form pada HTML

Dari contoh diatas merupakan form yang sangat sederhana, biasanya form tampil dengan rapi dan indah dengan menggunakan CSS. Tapi disini saya sengaja menampilkannya murni.

Terima kasih kepada pengunjung yang telah membaca artikel ini ^_^

“We Just Need People Who have Good Attitude”

Proyek Web Design Cybertwenty gen 11

Kegiatan ekskul pada hari Jum’at tanggal 12 November 2021 dan 19 November 2021

Heyyo gens mincy kembali lagi nih untuk menginfokan kegiatan Cybertwenty, oh iya sebelum lanjut membaca, kegiatan kita lainya bisa di lihat di Instagram @cybertwenty

apa itu proyek Web Design Cybertwenty gen 11?

yaitu kegiatan membuat Web Design yang menarik, bagus, dan fungsional dari gen 11, pembuatan web design ini menggunakan HTML dan CSS.

Para peserta di beri kebebasan untuk menentukan Web Design mereka, sebelum proyek Web design ini mereka sudah diperkenalkan HTML dan CSS dengan hal itu bisa mengembangkan proyek mereka se kreatif mungkin.

Dan disini ada Kak Chilmiyah dari gen 9 yang menunjukan hasil Web Designya(perpustakaan) sebagai inspirasi untuk gen 11

Dengan isi Web perpustakaan  sebagai berikut :

  • Beranda
  • Tentang kami
  • Layanan
  • Unduh
  • Usulan buku
  • Katalog
  • dan “search” untuk mencari sesuatu

Dengan demikian para peserta lebih mudah untuk membuat Web mereka setelah mengetahui hasil Web dari kakak-kakak gen 9 dan 10.

Terima kasih gensss telah membaca artikel mincy.

We Just Need People Who have Good Attitude

Pameran CYBERTWENTY

Kegiatan Pameran Program dan Desain
“The Future of Techno Citizens”

Kegiatan ini adalah sebuah kegiatan pameran tentang program seperti : website, game dan desain seperti : animasi, cinematic. Tema berjudul “The Future of Techno Citizens” diambil dari Bahasa Inggris yang berarti Masa Depan Warga Techno. Jadi, tema tersebut menggambarkan masa depan dengan teknologi yang semakin menarik dan canggih. Pihak-pihak yang terlibat di dalam kegiatan ini antara lain Gen 9, Gen 10, dan juga Gen yang baru saja terbentuk yaitu Gen 11 karena kegiatan ini bertujuan untuk mempererat solidaritas-

antar Gen 9, Gen 10, dan Gen 11 yang baru saja terbentuk serta untuk mempromosikan eskul Cybertwenty kepada warga SMAN 20 Surabaya.Kegiatan diselenggarakan pada tanggal 12 Oktober dan 13 Oktober 2021 setelah pembelajaran tatap muka berakhir. Aula sekolah dipilih sebagai tempat kegiatan ini karena cukup memadai meskipun bagi kelas yang dibawah harus naik ke lantai 2 jika ingin mengunjungi pameran ini. Semua warga SMAN 20 Surabaya bisa datang pada kegiatan ini mulai dari siswa siswi hingga Kepala Sekolah SMAN 20 Surabaya. Pintu dibagi menjadi 2 yaitu pintu masuk berada di sebelah utara Aula dan pintu keluar berada di sebelah selatan Aula. Sebelum masuk setiap pengunjung wajib mengisi absen terlebih dahulu lalu diberi stiker dan gelang glow in the dark untuk berfoto nanti karena kegiatan ini bernuansa sedikit gelap.

Pada saat di dalam pameran, para pengunjung bisa melihat bahkan mencoba hasil-hasil karya yang dipamerkan seperti : website jadwal pelajaran, website biodata, game yang menarik, dan juga kuis yang cukup mengasah otak.  

Di tengah perjalanan para pengunjung pun disuguhkan dengan sebuah animasi tentang Protokol Kesehatan yang menarik. Siapa yang tidak tahu Netflix? Pasti semua orang tahu apa itu Netflix, nahhh… di pameran ini juga terdapat sebuah gacha yang berhadiah utama voucher Netflix gratis selama satu bulan. Selain itu juga terdapat hadiah menarik lainnya seperti : mouse, flashdisk, tripod, holder HP, dan lain-lain.

Sebelum keluar dari tempat pameran, para pengunjung juga bisa berfoto di foto corner yang sudah disediakan oleh panitia. Mengingat sekarang masih dalam keadaan pandemi, Protokol Kesehatan pun tidak lupa diterapkan seperti : bagi panitia memakai sarung tangan latex, para pengunjung bergantian 10 anak yang masuk agar tidak berkerumun, hand sanitizer tersedia di setiap meja.

RAPTOR.. apa tuh?

Kegiatan ekskul pada hari Jum’at 27 Agustus 2021

Hai Genz… Apa kabar nih? Semoga masih sehat selalu ya…

Pada kegiatan ekskul hari ini, kita belajar tentang software RAPTOR lho..

Sebelum kita membahas tentang software RAPTOR, kalian tau nggak apa yang dinamakan flowchart algoritma itu?
Flowchart atau Bahasa Indonesia-nya diagram alir adalah tabel diagram yang dialirkan secara runtut dengan penghubung tanda panah dan digunakan untuk pembelajaran algoritma. Nah.. RAPTOR atau kepanjangannya Rapid Algorithmic Prototyping Tool for Ordered Reasoning adalah perangkat lunak yang berguna untuk membuat flowchart tersebut. Adapun simbol-simbol yang ada pada samping kiri, yaitu:

1. Assignment
Simbol ini digunakan untuk mengubah nilai suatu variabel. Sisi kanan (kolom to) tugas dievaluasi, dan nilai yang dihasilkan ditempatkan dalam variabel di sisi kiri (kolom set). Sisi kanan dan kiri dipisahkan oleh sebuah tanda panah (←)

2. Call
Simbol call digunakan untuk memanggil prosedur seperti rutinitas grafik dan prosedur yang disediakan instruktur lainnya.

3. Input
Sesuai namanya, simbol ini digunakan untuk mengambil input dari user. Jika tabel input diklik akan muncul tab baru seperti berikut. Pada kolom ‘Enter Prompt Here’ biasanya dituliskan pertanyaan yang akan ditanyakan kepada user yang biasanya dihimpit oleh tanda petik dua (“”). Sedangkan, pada kolom ‘Enter Variable Here’ biasanya dituliskan dengan nama variabel yang akan dikelola pada tahap selanjutnya.

4. Output
Sesuai juga dengan namanya, simbol ini digunakan untuk me-output atau menampilkan teks ke master console. Jika tabel output diklik akan muncul tab baru yang berisikan kolom ‘Enter Output Here’ tuliskan nama variabel yang ingin ditampilkan (pastikan variabel sudah terdeklarasi sebelumnya) . Contoh tampilan master console:

5. Selection
Simbol ini digunakan untuk pengambilan keputusan. Pemrogram memasukkan dalam ekspresi yang mengevaluasi true atau false. Jika tabel selection diklik akan muncul tab baru seperti berikut. Pada kolom ’Enter Selection Condition’, tuliskan kondisi yang menentukan salah atau benarnya input.

6. Loop
Simbol ini digunakan untuk mengulang suatu program hingga suatu kondisi terpenuhi. Jika tabel loop diklik akan muncul tab baru seperti berikut. Tuliskan kondisi yang harus dipenuhi input agar program bisa berhenti.

Nah, di bawah ini adalah salahsatu contoh flowchart yang dibuat oleh Arnold Boby R.T. dari gen 9.

Java itu asik

Kegiatan eskul pada hari Jum’at tanggal 9 April 2021

Hallo Genz.. gimana kabar kalian?pasti sehat semua dan penuh semangat!Aamiin..

Kegiatan IT hari ini yaitu mempelajari tentang Java

Bagi yang belum tau apa itu java?
Java adalah bahasa pemrograman yang dapat dijalankan di berbagai komputer termasuk telepon genggam. Bahasa ini awalnya dibuat oleh James Gosling saat masih bergabung di Sun Microsystems, yang saat ini merupakan bagian dari Oracle dan dirilis tahun 1995. Bahasa ini banyak mengadopsi sintaksis yang terdapat pada C dan C++ namun dengan sintaksis model objek yang lebih sederhana serta dukungan rutin-rutin aras bawah yang minimal. Aplikasi-aplikasi berbasis java umumnya dikompilasi ke dalam p-code (bytecode) dan dapat dijalankan pada berbagai Mesin Virtual Java (JVM). Java merupakan bahasa pemrograman yang bersifat umum/non-spesifik (general purpose), dan secara khusus didesain untuk memanfaatkan dependensi implementasi seminimal mungkin.

Adapun langkah langkah untuk membuat projects baru yaitu:
1. Instal aplikasi netbeans
2. Buka aplikasinya lalu pilih new projects
3. Selanjutnya pilih file java
4. Disitu terdapat beberapa opsi lalu pilih Java Application
5. Pilih located file sesuai yang kita inginkan
6. Dan yang terakhir tulis coding yang ingin kita buat.

Perangkat di dalam komputer (Hardware, ROM, Software, dan Brainware)

Kegiatan eskul pada hari Jum’at tanggal 2 April 2021

Hai genz! Gimana kabar kalian semua? Semoga selalu sehat dan tetap semangat ya!

Jadi, kegiatan ekskul hari jumat ini, kita mempelajari tentang perangkat di dalam komputer (Hardware, ROM, Software, dan Brainware). Materi ini dibawakan oleh Mas Muhammad Andika Saputra.

Bagi kalian yang ingin tahu tentang perangkat-perangkat di dalam komputer, materi ini pas bangett buat kalian genz!
Bagi kalian yang penasaran apa saja sihh perangkat di dalam komputer itu? Simak rangkuman berikut ini genzz.

1. Hardware
Hardware adalah perangkat keras yang dapat didefinisikan sebagai peralatan di dalam komputer yang dapat dilihat secara fisik.

2. Read-Only Memory (ROM)
ROM adalah media yang hanya digunakan untuk menyimpan data secara permanen dan tidak dapat diubah-ubah lagi.

3. Software (Perangkat Lunak)
Software adalah perangkat lunak yang dapat didefinisikan sebagai peralatan di dalam komputer yang tidak dapat dilihat secara fisik.

4. Brainware
Brainware adalah seseorang yang cakap dan mampu menangani sistem komputer yang aka digunakan. Contoh : System Analyst, Programmer, Administrator, Operator.

Apatuh aplikasi flipaclip?

Kegiatan eskul pada hari Jum’at tanggal 15 Januari 2021

Halo Genz…Gimana kabar kalian pada hari jum’at ini? Masih semangat kan? Pasti masih semangat semua 😁

Kegiatan ekskul pada hari ini, Gen 8,9,10 dan yang pasti dengan pembina kita yang cantik jelita nan selalu ceria yaitu Dewi Shanti,S.KOM dengan tutor RADITYA ANANDA RISANNI gen 9

Kali ini kita mempelajari tentang aplikasi flipaclip, wah apatuh aplikasi flipaclip? Udah pada ngerti belum, kalo belum berikut penjelasan nya mengenai aplikasi flipaclip…

FlipaClip merupakan salah satu aplikasi untuk membuat animasi. Kita dapat menghidupkan kembali masa kecil kita dan mengekspresikan kreativitas atau keterampilan yang dimiliki. Menggambar kartun dengan menggunakan frame by frame yang ada.

Gimana? Seru kan materi hari ini 😁

Text-Based Game

Kegiatan eskul pada hari Jum’at tanggal 19 Maret 2021

Hai Genz! Gimana kabar kalian semua?

Semoga selalu sehat dan tetap semangat ya!
Kegiatan eskul pada hari ini tanggal 19 Maret 2021, Gen 8, 9, 10, dan Pembina kita yaitu Dewi Shanti S.KOM, dengan pengajar materi dari Gen 8 yaitu Ahmad Farid Ananta akan mempelajari tentang Text-Based Game.

Text-Based Game atau game berbasis teks (juga dikenal dengan nama IF atau Interactive Fiction) adalah game yang dimana semua interaksi terjadi melalui kata-kata di layar. Jadi game ini hanya berisi teks yang memiliki jalan cerita. Pemain bisa memilih jalan ceritanya sendiri dalam game sejenis ini.

Game ini bisa dibuat dengan notepad dan command prompt untuk memulai gamenya contohnya seperti pada gambar diatas. Bisa juga dibuat dengan bahasa pemrograman phyton walaupun sedikit rumit. Aplikasinya bernama pycharm, bisa juga menggunakan notepad ++. PowerPoint juga bisa menjadi media membuat Text-based game ini dengan memadukan hyper link pada pilihan teksnya, sedikit sentuhan animasi dan pilihan warna yang menarik.