Category Archives: TIK & Informatika

CSS… still

Apa itu CSS silakan dibaca di tulisan pertama di sini.

Masih ingat perbedaan HTMl dan CSS, bukan?
HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik pada sebuah web.
CSS merupakan bahasa penanda yang digunakan untuk memberikan konteng gaya penampilan yang bagus pada sebuah web.

Contoh:
dalam HTML paragraf direpresentasikan dengan p .
CSS menentukan ukuran teks, warna teks, spasi dan berbagai gaya tampilan dari paragraf tersebut.

catatan:
Pada HTML model lama menggabungkan unsur di atas, namun sejak muncul HTML versi baru tidak lagi. Keduanya dipisahkan. Walau untuk beberapa elemen hal tersebut bisa dideskripsi ulang (bisa digunakan).

Dalam HTML kalian mengenal 3 unsur:
1. Elemen, contoh: p, a, h1, dll
2. Tag, sebuah elemen direpresentasikan oleh tag dengan simbolnya “<”
3. Atribut, berupa informasi tambahan untuk elemen.
Setiap elemen memiliki atribut yang berbeda, meskipun terdapat juga atribut standar yang dapat digunakan oleh semua elemen.

Jika di pertemuan pertama sudah dijelaskan mengenai bentuk penulisan CSS. Maka pada pertemuan ini kalian akan berlatih mengggunakan sintak penulisan yang umumnya digunakan, yaitu memisahkan skrip CSS dan HTML. Dan untuk menghubungkan keduanya maka hanya perlu menambahkan rujukan pada laman CSS nya saja.

Jadi, di sini diperlukan 2 dokumen dengan ekstensi penyimpanan yang berbeda, yaitu CSS dan HTML. Program yang digunakan cukup text editor semisal Notepad atau Gedit atau text editor.

Latihan pertama, membuat template sederhana
1. Save: lat1.css
2. Save: latihan1.html

CSS1

lat1css

Jangan lupa, file CSS ditandai dengan kurung kurawa {
file HTML ditandai dengan tag

Latihan 2: membuat tampilan table
table-css

Latihan 3: membuat navigation bar
navbar-css

Selamat mencoba 🙂

Untuk referensi skrip CSS yang lebih lengkap dapat dilihat di sini.

Tugas Upload HTML Kelas XI MIA 2

1. RUHUL SELSI
2. EvaNabila
3. Syahvira kanza
4. Jasmine alam nabilah
5. Flora Ananda Rizky
6. Hieronimus Adiyog

7. Amelia Nasyahta P
8. Bilqis Nabilah
9. akhmad khudzaifi
10. Raihan Muammar R
11. Nabilah Hana
12. dear siska
13. Sonya Nabila M
14. Muhammad Herdiansyah
15. Gabriel Hutabarat
16. Raihana Abida
17. Farah Muthia Miladyah
18. Rafli Iman Firdaus
19. Amelia Nasyahta P
20. aisyah ardine
21. Muhammad Jehan Mahsan
22. Evan Nathanel
23. Raihana Abida
24. Nattaya S
25. Vania Seren

Done

25. Pinastika H
26. Evelyn Clarissa

Yang namanya belum tercantum di sini segera kirimkan tugasmu

Cascading Style Sheets

Kelas: XI
Materi: Pembuatan Web
Pertemuan: 1

HTML dan CSS bukan merupakan bahasa pemrograman namun keduanya merupakan dasar dari pembuatan web. HTML sering diistilahkan sebagai bahasa pemformatan.

Cascading Style Sheet (CSS) menurut Wikipedia merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

CSS serupa penggunaan styles dalam aplikasi pengolah kata seperti MS Word yang dapat mengatur beberapa style, seperti heading, subbab, bodytext, footer, dan lainnya agar dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Penulisan CSS

css

Ada 3 metode penulisan CSS
1. Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Caranya dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag tersebut dan tidak akan mempengaruhi tag HTML lainnya.

<!DOCtype html>

<html>

<body>

<h1 style=”color:blue”>Hai</h1>

</body>

</html>

 

2. Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

<!DOCtype html>

<html>

<head>

<style>

body {

background-color:#ccffdd;

margin-left:0.5in;

}

p {

color:red;

text-align:center;

}

</style>

</head>

<body>

<p>Hello</p>

<p>Ini paragraf CSS loh 🙂 </p>

</body>

</html>

 

Sifat CSS
1. Internal
Skrip dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
2. Eksternal
Skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Setelahnya cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.

Id Selector
Id selector digunakan untuk menyatakan elemen HTML yang unik. Misalnya, kamu ingin membedakan atribut yang ada pada satu paragraf dengan paragraf lain.
Contoh:

<!DOCtype HTML>

<hml>

<head>

<style>

#para1 {

text-align:center;

color: blue;

font-size: 18px;

}

p {

font-size:12px;

color: red;

}

</style>

<head>

<body>

<p id=”para1″>The CryptoClub Project is developing classroom and web-based material to teach cryptography and related mathematics, as well as material to support leaders of these activities.</p>

<p>Paragraf ini biasa saja :)</p>

</body>

</html>

Kriptografi

Jeda setelah UTS dan sebelum memulai materi baru ada baiknya mencairkan suasana terlebih dahulu dengan … bercerita 🙂

Kalau kamu menyukai buku-buku detektif Sapta Siaga, Lima Sekawan, dan lain-lain maka kamu pasti tak asing dengan pesan rahasia tinta tak terlihat. Untuk membaca pesan tersebut kamu harus memanaskan kertas dengan memegangnya dekat dengan bola lampu. Ada apa di kertas kosong itu ya? Jawabannya ada di keajaiban jus lemon yang kamu gunakan sebagai tinta untuk menorehkan pesan di atas kertas.

Kode atau pesan rahasia disebut juga dengan Sandi, yaitu tulisan yang berisi kata, lambang, atau tanda-tanda khas yang memiliki arti tertentu. Sandi bertujuan untuk mempersingkat sebuah pesan dan menjaga kerahasiaan data (informasi).

Nah, teknik penyandian dengan jus lemon di atas termasuk ke dalam sistem penyandian Steganografi. Steganografi meliputi sistem-sistem yang secara katawiyah menyembunyikan berita, seperti di dalam gumpalan lilin, dengan tanda-tanda tertentu, di dalam teks berita lain, “dihilangkan” dengan tinta rahasia dan lain sebagainya. Steganografi terbagi menjadi 3 jenis:
Linguistis : Semagram, Open Code.
Tehnologis : Secret (invisible) inks, Micro-photography.
Concealments.

Teknik penyandian lainnya adalah sistem kriptografik. Sistem Kriptografik sendiri meliputi sistem-sistem yang mengolah tata tulisan dalam berita sehingga menjadi tata tulisan yang berlainan dan tidak bermakna (incoherent). Sistem ini dibedakan menjadi 2:
Cipher : Transposisi dan Substitusi.
Code : Placode (Plain Code) dan Encicode (Enciphered Code).

Sejarah Kriptologi
Istilah kriptologi berasal dari bahasa latin yang terdiri dari kriptos yang berarti tersembunyi (rahasia) dan logos yang berarti ilmu. Jadi, Kriptologi adalah ilmu atau seni yang mempelajari semua aspek tulisan rahasia.
Tulisan rahasia sejak dahulu sudah digunakan, terutama dikalangan pemerintah, militer, bisnis dan lembaga-lembaga yang menjaga kerahasiaan pesan mereka. Dewasa ini, teknik enkripsi digunakan untuk melindungi data (informasi) yang berada di komputer.

Menurut sejarahnya, tulisan rahasia atau sandi ini sudah digunakan oleh raja-raja jaman dahulu untuk mengirimkan pesan kepada sekutu-sekutunya. Demikian juga yang dilakukan oleh George Washington kepada para tentaranya.

Saat ini lembaga dan organisasi-organisasi banyak menggunakan teknik penyandian untuk melindungi dokumen-dokumen berharga mereka. Berkembangnya teknologi, maka teknik penyandian ini diperlukan juga untuk melindungi data-data para penggguna komputer.

Teknik baru enkrpsi (penyandian) banyak bermunculan dan ada kalanya sangat rumit. Namun demikian beberapa keterampilan dasar penyandian masih perlu untuk kamu ketahui dan pelajari. Beberapa diantaranya adalah:

1. Kode Morse.
2. Navajo Code Talkers in WWII
3. ENIGMa in WWII (Ingat film The Imitation Game? 🙂 )
4. Secret Code Breakers Through History

Berlatih memecahkan kode, silakan ke sini:
1. Break the Code.
2. Crypto Club dan ini.

Referensi:
1. http://www.lemsaneg.go.id/?page_id=139
2. http://infokriptografi.blogspot.com/2009/03/kriptologi-ilmu-persandian.html
3. https://www.cerias.purdue.edu/education/k-12/teaching_resources/lessons_presentations/cryptology.html

Tugas Upload File HTML XI MIA 1

1. Karinka Anisariandina (18)
2. Nareswarie Ayuanindhita (25)
3. Nur Kusuma Asih (28)
4. Chaerunnisa citra (11)
5. Andy Faisal (7)
6. Natalia Christiani
7. Prayoga Byantara (30)
8. Prasetio A.N. (29)
9. muhamad galih reka anindityo absen20
10. Mona Natasha (19)
11. Rayi Adila (33)
12. Hadlina Rahmadinni
13. Almas N. Syukri (4)
14. Rakhma Oetari(32)
15. Agung Budiyanto (03)
16. naufal yudha prawira (27)
17. Adelia Safaira
18. Roudhotul Sofa Nurauliya
19. Nadya Nazla
20. Glenn Arthur Sena
21. Iednita Cahyadahrena (17)
22. Muhammad Haris Fadhilah (23)
23. Arma Oktaviani
24. Abednego
25. M. Irsyad H
26. Andi Aqil
27. M. Caesario
28. Arieftia W
29. Gabrielle Khaledea Salimi
30. Felicia I.
31. Rafikadwisthiya
32. Ardini Ridhanila
33. Senopati Yudhistira
34. Theresia Rosaria

Done
Yang namanya belum tercantum di sini segera kirimkan tugasmu

Tugas Upload File HTML XI MIA 4

1. Aryo Hastungkoro Harimurti Mukarta |07
2. Ainani Tajrian
3. Alma Tiarani
4. M. Wahyu Rhozy
5. DYAH LIFTYAWATI
6. Mochamad Ilham Irwinansyah
7. AnnisaHanifa
8. Muhammad Yudha Galang F
9. Lukman Hakim,
10. Mauludi Afina Mirza
11. Mochamad Ilham Irwinansyah
12. AnnisaHanifa
13. Putriyanni
14. Nabila

—-
14. Natasya Elly
15. M. Tri Aprilian
16. Rahmarini Firdausy
17. ANDARU WIRATAMA
18. Angie Irmajulianna (5)
19. Azmi Rafi (09)
20. Rafidah Fauziah

29. Muhammad Thohari
30. Hermon
31. Assad
32.

Done

Yang namanya belum tercantum di sini segera kirimkan tugasmu

Tugas Upload File HTML XI MIA 3

Materi: Melakukan proses uploading latihan HTML ke freewebhosting.

Free web hosting yang digunakan adalah: http://000webhost.com dan http://hostinger.com
Siswa boleh menggunakan free webhost lainnya.

Kelas: XI MIA 3
1.Teuku Augibran G
2. Ilona anaisela
3. Ika Fitri A (19)
4. Evania Dewi R
5. jevika ??
6. Fijar ??
7. LARASATI RAHMA SYA’BANNISA
8. Fathur Fadhila
9. Nadhifa Azhari Izdihar
10. Faisal mirza
11. Andini Quentinnisa
12. Farhan Nurahman (13)
13. Ryan Naufal P
14. Faiz Hadiyan Firza (18) XI MIA 3 http://fhf9418.hol.es
15. Carlo Julio C
16. Allya Safitri [2]
17. Prista setya pramesti
18. Indira Nur Aniisa
19. syakira khairunnisa
20. Fitrati F
21. Mufidah N
22. syalzabila imaningtyas
23. Virgiawan Putra
24. stefani esther
25. syalzabila imaningtyas
26. Ryan Naufal
27. Ananda Desya
28. Fildzah Zhafarina


29. fikri octama
30. Danika
31. Alphira
32. Jevicka
33. Daniel Kurniawan
34. Melika Bilqis
35. Safira Nadila Putri

36. FAIZ HADIYAN FIRZA
Done

Yang namanya belum tercantum di sini segera kirimkan tugasmu

Latihan HTML

Untuk berlatih HTML dan bahasa pemrograman web lainnya dapat mengunjungi situs w3scools di sini. Selain tersedia tutorial ada juga latihan berupa quiz untuk melihat pemahaman yang telah kita capai dalam setiap bahasan.

Berikut ini adalah template dari beberapa web yang dapat kamu gunakan sebagai latihan untuk membuat tampilan web.
Pada slide-slide awal tampilan web dibuat dengan menggunakan tag <table> dari pemformatan HTML.

Materi dan tutorial HTML lainnya dapat dilihat di blog ini dengan mencari kata kunci HTML pada laman ini juga.

Memasukkan Logo, Video dan Banner Animasi di Template Blogger

Tampilan web toko online mu akan lebih menarik jika disertai logo perusahaan yang kamu buat sendiri. Berikut ini adalah langkah untuk membuat logo dengan menggunakan program pengolah gambar Inkscape.

1. Tentukan ukuran kertas.
2. Buat logo.
3. Simpan dengan format gambar berupa png. Caranya, pilih menu File. Klik Export Bitmap. Ketikkan nama file. Save.
4. Login ke toko online-mu.
5. Masuk ke Dashboard. Pilih menu Entri Baru atau New Post.
6. PIlih ikon Insert Image untuk memasukkan logo buatanmu.
7. Pindahkan ke menu HTML. Akan tampak skrip kode gambarmu.
8. Salin (Copy) skrip tersebut.
9. Kembali ke menu Dashboard. Pilih Layout atau Tata Letak. Klik kotak HTML / Javascript. Jika kotak tersebut tidak ada, pilih menu Tambahkan Gadget di lokasi kamu ingin meletakkan logo. Lalu pilih HTML/Jacascript.
10. Rekatkan (Paste) skrip kode gambarmu. Save.
11. Refresh alamat web toko onlinemu. Perhatikan, logomu telah muncul di sana.

Dengan cara yang sama kamu dapat melakukan untuk memasukkan video ataupun tambahan plugin lain seperti banner animasi.

Memasukkan video youtube di web toko online.
1. Buka youtue. Pilih menu Share. Klik Embed.
2. Salin (Copy) skrip dari video tersebut.
3. Login ke web toko online. Masuk ke menu Dashboard. Pilih Layout atau Tata Letak.
4. Rekatkan (Paste) skrip tadi ke kotak HTML/Javascript.

Menempelkan banner animasi ke dalam template toko online.
1. Buat banner di program pengolah gambar. Tentukan ukuran banner mu sendiri dengan mengubah ukuran kertas.
2. Simpan dengan format gambar berupa png
3. Masuk ke URL Cincopa di sini
4. Sign up atau daftar terlebih dahulu.
5. Selanjutnya, ikuti perintah yang ada. Pilih skin untuk slide animasi. Kemudian pilih Next untuk mengupload banner. Next lagi untuk mengunggah gambar.
6. Setelah selesai, klik Finish. Pada tahap akhir, akan muncul skrip berupa embed code. Salin (Copy) skrip tadi.
7. Masuk ke menu Dashboard toko onlinemu. Pilih menu Layout. Rekatkan skrip tadi ke dalam kotak HTML/Javascript.
8. Tadaa, banner animasimu sudah tampil di web toko onlime-mu 🙂