Latihan Halaman Web 2-a

Google Indonesia = www.google.co.id
Yahoo Indonesia = www.yahoo.co.id
Facebook = www.facebook.com

Twitter = www.twitter.com

Membuat Marquee

Change text between marquee tags
Alternate marquee behavior Up marquee direction Down marquee direction <<< Opposite Direction Marquees>>>

Hasil Uji Latihan Web 1

Isi halaman web ada disini.
Nama : Hananda Auditasari
Kelas : XII AP 1

Ini Tulisan Judul Paling Besar

Judul ini lebih kecil dari di atas

Ini lebih kecil lagi

Tambah kecil saja

Apa cukup kecil?

Belum, ini yang paling kecil

Belajar Bullet dan Numbering

• Ini bullet berbentuk bulat

• Sedangkan ini berbentuk kotak

3. Ini nomor 3
4. Ini nomor 4
7. Ini nomor 7
8. Ini nomor 8

• Yang ini menggunakan bullet circle
• Tapi yang ini square
• Yang ini tetap circle

Sharing Online Pada Google Drive

7. Sharing Online Pada Google Drive 
    Berbagi (sharing) dokumen.
Dokumen yang sudah dibuat di Google Drive dapat di-share, sehingga memungkinkan               banyak orang dapat menggunakan secara bersamaan, bekerja pada dokumen yang sama meski tidakberada pada satu tempat. Pengguna bebas memilih kepada siapa saja dokumen tersebut akan di-share.

Website FORUM

6. Website Forum
    Website Forum dapat diartikan sebagai kumpulan hal yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video, atau gabungan dari semuanya baik yang bersifat statis maupun dinamis yang membentuk rangkaian bangunan yang saling terkait dimana masing-masing di hubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap jarang berubah dan isi informasinya hanya searah.

Adapun beberapa contoh diantaranya :

1. Facebook

 

Facebook Adalah Sebuah Website Yang bertemakan social networking (Pencari Teman di Dunia Maya).

Facebook merupakan situs web jaringan sosial yang diluncurkan pada 4 Februari 2004 dan didirikan oleh Mark Zuckerberg.

Jejaring sosial ini digunakan sebagai komunikasi jarak jauh.

2. Twitter

 

Twitter berfokus pada layaan blogging mikro (microblogging) dan RSS untuk pesebaran informasi. Ia sering disebut-sebut sebagai “SMS-nya internet”

Twitter dibangun oleh Jack Dorsey, Noah Glass, Evan Williams, dan Biz Stone pada 15 Juli 2006.

3. LinkedIn

 
Situs jejaring sosial ini fokus pada relasi profesional. Situs ini dibangun oleh Reid Hoffman, dkk di tahun 2003. Sebagai situs yang bermain di bidang profesionalitas, kita bisa juga mencari relasi atau bahkan pekerjaan pada LinkedIn.

4. Myspace

 
MySpace adalah situs jaringan sosial populer yang menawarkan jaringan antar teman, profil pribadi, blog, grup, foto, musik dan video untuk remaja dan dewasa di seluruh dunia.

5. Google+

 
Google+ bisa dibilang merupakan jejaring sosial paling anyar. Google+ banyak digemari orang karena fitur barunya Circle dan Hangout yang memudahkan orang mengatur komunikasi dan berinteraksi dengan video.

6. deviantART

 
Suatu situs jejaring sosial yang bergelut dalam bidang seni, terutama dalam seni gambar. DeviantArt meluncur pada 7 Agustus 2000  oleh Angelo Sotira,dkk.

7. Cafemom

 

Dikhususkan untuk ibu-ibu atau wanita yang sesaat lagi menjadi ibu. Memang situs ini dibatasi untuk pengguna minimal 16 tahun dan wanita.

Prinsip situs ini adalah bebas pria (ketahun akun cowok akan langsung dihapus). Situs ini menyedian tempat bagi para ibu untuk saling bertanya dan bertukar informasi.

CafeMom dibuat oleh  Andrew Shue dan Michael Sanchez pada tahun 2006.

8. Ning

 

Situs jejaring yang unik, Pengguna dapat membuat “jejaring sosial”-nya sendiri disini. Tampilan, rasa, dan bahkan set fitur setiap jejaring sosial (seperti foto atau likes) dapat diatur sendiri oleh pengguna. Bahkan persyaratan untuk mendaftar jejaring sosial yang dibuat juga bisa diatur.

Ning dibangun bersama oleh  Marc Andreessen dan Gina Bianchini.

9. Badoo

 

Situs jejaring sosial Badoo berfokus pada perkencanan. Situs ini dibangun oleh enterpreneur Andrey Andreev pada tahun 2006.

10. Pinterest

       

Pinterest adalah jejaring sosial yang bertindak seperti papan pengumuman online (online pin board).Di papan pengumuman ini, kita mengepin artikel dan foto menarik yang kita suka dari berbagai belahan web.

Papan pengumuman ini, disebut pinboard, bisa ditemakan dengan kategori tertentu agar mudah ditata dan diperhatikan oleh pengguna lain.

Pengertian Google Drive, Google Docs dan Google Maps

3. Pengertian Google Drive

Google Drive adalah layanan berbasis komputasi awan itu dapat digunakan untuk membuat, membagi, mengolaborasikan dan menyimpan data hingga 1 terabite (TB). 

4. Pengertian Google Docs

Google Docs adalah salah satu aplikasi yang dikembangkan Google untuk kebutuhan file server. Khususnya aplikasi office. Mulai dari pengolah kata (word processor), pengolah lembar kerja (spreadsheet) dan presentasi (presentation). Google Docs bukan hanya menyimpan saja, namun juga bisa digunakan untuk untuk mengolah (menyimpan, membuat, meng-edit) program-program aplikasi perkantoran (seperti Microsoft Office jika di Windows, atau Open Office) secara online. Semuanya dalam satu aplikasi. Tapi perlu memiliki aplikasi office.
Begitu dahsyatnya Google Docs, hingga beberapa kalangan menyebut Google Docs adalah pembunuh aplikasi office (Microsoft Office, Open Office, Neo Office dan sebagainya).

5. Pengertian Google Maps
Google Maps adalah layanan gratis yang diberikan oleh Google dan sangat popular. Google Maps adalah suatu peta dunia yang dapat kita gunakan untuk melihat suatu daerah. Dengan kata lain, Google Maps merupakan suatu peta yang dapat dilihat dengan menggunakan suatubrowser. Kita dapat menambahkan fitur Google Maps dalam web yang telah kita buat atau pada blog kita yang berbayar maupun gratis sekalipun dengan Google Maps API. Google Maps API adalah suatu library yang berbentuk JavaScript.

Upload dan Download

2. Pengertian  Upload dan Download

Pengertian Upload
Upload atau unggah adalah proses mengirim data dari komputer pribadi ke suatu sistem seperti server web, FTP server, server mail atau sistem serupa lainnya yang kemudian akan dipublikasikan di internet baik secara pribadi maupun umum.

Pengertian Download
Download atau unduh merupakan proses menyalin file dari suatu sistem seperti server web, FTP server, server mail atau sistem serupa lainnya yang kemudian akan tersimpan di komputer pribadi.

Secara sederhana Upload itu proses meng copy file dari komputer pribadi ke jaringan internetsedangkan Download kebalikanya yakni proses meng copy file dari jaringan internet ke komputer pribadi.

Cara Membuat Email Gmail

1. Cara Membuat Email Gmail 

• Buka http://gmail.com
• Klik Create An Account di bawah form login.

• Anda akan masuk ke halaman pengisian data, silahkan isi formulir pendaftaran sesuai data pribadi anda..

1. Nama : Isi dengan nama depan dan nama belakang anda.
2. Pilih nama pengguna anda : Isikan alamat email yang anda inginkan (nama email harus belum digunakan orang lain).
3. Buat sandi : Isi dengan password yang anda ingikan.
4. Konfirmasi sandi anda : Masukkan ulang password anda.
5. Tanggal lahir : Silahkan isi dengan tanggal lahir anda.
6. Gender : Pilih jenis kelamin anda.
7. Ponsel : Isikan dengan nomor telepon anda.
8. Alamat email anda saat ini : Masukkan alamat email lain (masukkan jika ada). Bisa anda kosongi.
9. Lokasi : Isi dengan lokasi negara tempat anda tinggal.
10. Centang dua persyaratan dari google tersebut...
11. Klik tombol LANGKAH BERIKUTNYA.

• Setelah anda mengisi formulir pendaftaran, anda akan dibawa ke halaman verifikasi akun, klik Lanjutkan..

• Anda akan diberi kode verifikasi yang dikirim oleh google secara otomatis ke nomor telepon yang anda isikan tadi. Kemudian masukkan angka verifikasi ke dalam kotak yang tersedia. Jika sudah, silahkan klik Verifikasi.

• Anda akan dibawa ke halaman Profil, langkah selanjutnya adalah menambahkan foto profil. Jika anda sudah punya silahkan ditambahkan dengan mengklik "Menambahkan Foto Profil". Jika sudah, klik saja Langkah berikutnya..

• Jika semua langkah diatas sudah anda lakukan dengan benar, akan ada ucapan sambutan dari Google. Klik Lanjutkan ke Gmail.

• Anda akan langsung dibawa ke halaman muka Gmail. Google akan langsung memberikan 4 pesan ke inbox email anda.

Sampai disini akun Gmail anda sudah jadi, silahkan anda manfaatkan fitur-fitur yang sudah disediakan oleh produk google gmail ini.

Setelah anda membuat email, jika anda tertarik dengan blog dan ingin sekali punya blog, anda bisa ikuti juga tutorial Cara membuat blog Di blogger.

Template dan Perintah

Apa sebenarnya template blog / website itu? jadi merupakan halaman yang berisi desain-desain di blog atau website beserta seluruh komponennya (misalnya: gambar, sylesheet, javascript, dsb) baik berupa file statis maupun dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.  Template bisa juga anda artikan sebagai tema blog atau tampilanblog. Seperti yang anda lihat saat ini di blog belajar blog dan seo, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template. ni contoh gambarnya: (di klik biar lebih jelas gambarnya).


Sedangkan Website merupakan situs atau halaman di Internet yang menyediakan informasi pada World Wide Web (www).

Template merupakan salah satu identitas Anda. Anda tidak bisa sembarang memilih template yang mengikuti selera Anda sendiri, apabila web yang Anda tunjukan untuk visitor dengan kalangan tertentu.

Berikut tips dalam memilih template untuk blog / website

    Tujuan atau arah website
    Pilih template yang menarik
    Template yang ringan
    SEO Friendly 

JAVASCRIPT dan Perintahnya

JavaSript dan Perintah

JavaScript adalah bahasa pemograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemograman yang pemrosesannya dilakukan olehclient. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox. Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web browser.JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped, dan berorientasi objek.


Perintah JavaScript
Perintah dasar  merupakan perintah yang digunakan sebagai operasi yang paling dasar dalam pemrograman Javascript, yaitu,
-perintah assigment
-perintah untuk menampilkan output
-perintah untuk menerima input
-operator melakukan manipulasi data

Assignment adalah proses memasukkan data ke dalam variabel, baik variabel tunggal atau variabel jamak, atau proses pengisian variabel dengan data.

contoh:
nama = 'Rudianto'
angka = 11
umur = 25
namalengkap = 'Teknik Komputer'

Perintah assignment juga dapat dilakukan sambil mendeklarasikan suatu variabel yang bisa diberi nilai awal atau yang disebut juga dengan proses inisialisasi.

contoh:
var nama = 'Rudianto'
var angka = 9
var umur = 25

Dalam Javascript, setiap variabel dapat digunakan untuk mendefinisikan lebih dari satu jenis data. Artinya suatu variabel bisa berganti isi dengan tipe data yang berbeda.
contoh:
var angka = 'sembilan'
var angka = 9

Dalam satu pernyataan assignment juga bisa diisikan data lebih dari baris, dan setiap pindah baris ditutup dengan menuliskan karakter backslash(\).
contoh:
kalimat = " Selamat datang di program studi Teknik Komputer \
Politeknik NSC Surabaya \
semoga bermanfaat"

Perintah Output

document.write(namavariabel)
document.write("Kalimat"+namavariabel)
alert("Kalimat"+namavariabel)

Contoh:

<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menampilkan output dan alert</h1>
 <script type="text/javascript" language="javascript">
  nama = "Rudianto"
  umur = 35
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)
  alert("Nama anda : "+nama+"\n"+"Umur anda : "+umur)
 </script>
</body>
</html>

Hasil Running



Perintah Input dengan prompt
namavariabel = prompt("Pesan" , nilaidefault)

dimana nilai default adalah nilai awal yang diberikan apabila pengguna tidak mengubahnya.

contoh:

<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menerima input</h1>
 <script type="text/javascript" language="javascript">
  nama = prompt("Siapa nama anda ? " , "Teknik Komputer")
  umur = prompt("Berapa umur anda ? ", 25)
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)

 </script>
</body>
</html>

Hasil running


setelah diisi akan ditampilkan

CSS dan Perintahnya

CSS dan Perintah 

Cascading Style Sheet (CSS) 

merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

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.

Terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :

• Eksternal style sheet
• Internal style sheet
• Inline style

---

Eksternal Style Sheet

Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

style.css merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh dari file style.css :

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Catatan : Ketika menuliskan value property dan unitnya, jangan menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :

margin-left:20px

---

Internal Style Sheet

Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

---

Inline Style

Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.
Contoh berikut akan menambahkan warna dan margin pada paragraf :

<p style="color:sienna;margin-left:20px">Ini adalah sebuah paragraf.</p>

Hananda Auditasari

XII AP1 / 21