Google Indonesia = www.google.co.id
Yahoo Indonesia = www.yahoo.co.id
Facebook = www.facebook.com
Facebook = www.facebook.com
Selasa, 25 Agustus 2015
Jumat, 21 Agustus 2015
Hasil Uji Latihan Web 1
Nama : Elisabeth Dwi Astuti
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
- Ini nomor 3
- Ini nomor 4
- Ini nomor 7
- Ini nomor 8
- Yang ini menggunakan bullet circle
- Tapi yang ini square
- Yang ini tetap circle
Bagaimana cara / langkah-langkah membuat email pada Google Mail (Gmail) ?
Langkah paling awal, siapkan koneksi internet,
bukan browser, saya sarankan untuk menggunakan browser Chrome, karena lebih
enak dan cepat menurut saya. Tapi jika belum download, pakai dulu seadanya.
bisa pake Internet Explorer atau Mozila Firefox
b. Masukan alamatnya urulnya http://mail.google.com/
atau http://gmail.com . Sehingga tampil gambar seperti di bawah ini.
Kemudian pilih tombol [create an account] atau Buat Akun yang
berada di pojok kanan atas
c.
Lalu masukan identitas kamu pada formulir pendaftaran, untuk langkah-langkah
pengisian sangat mudah sekali, tidak jauh berbeda dengan cara pengisian pada
layanan email di Yahoo.com. Perhatikan contoh pengisiannya di bawah ini.
d.
Pendaftara pada akun gmail lebih ketat dari akun yahoo, sehingga kamu harus
melakukan verifikasi nomor ponsel. Caranya tinggal masukkan nomor ponsel kamu
pada Kolom nomor telepon seperti gambar di bawah ini.
e.
Setelah masukkan nomor ponsel, silahkan cek kotak sms yang ada di ponsel kamu.
kamu akan mendapatkan sms kode verifikasi dari google seperti gambar di bawah
ini.
f.
Masukkan kode dalam sms tersebut ke dalam kotak kode verifikasi yang telah
ditampilkan seperti gambar di bawah ini. Kemudian klik tombol Verifikasi
g.
Jika kode verifikasi yang kamu masukkan benar, kamu akan di bawa ke halaman
selanjutnya, seperti gambar di bawah ini. Di halaman ini Kamu boleh mengupload
Foto profil, atau langsung klik pada tombol langkah berikutnya.
h.
Setelah melewati tahap di atas, kamu telah berhasil membuat email. Untuk
langkah berikutnya, silahkan klik tombol Lanjut Ke Gmail
i.
Nah, seperti inilah tampilan antar muka Dashboard Gmail kamu. Di dalam
sini kamu bisa menulis email, mengirim email, menerima email, dan juga membaca
email. Selain itu kamu juga bisa chating langsung dengan teman kamu yang
juga pengguna gmail.
Elisabeth Dwi Astuti
XII AP 1 / 14
Apakah yang disebut sharing online pada Google Drive ?
Sharing Online adalah
suatu fasilitas yang digunakan untuk membagi suatu file, perangkat dan
koneksi internet untuk digunakan secara bersama-sama dengan tujuan untuk
menghemat biaya dan perangkat.
Elisabeth Dwi Astuti
XII AP 1 / 14
Elisabeth Dwi Astuti
XII AP 1 / 14
Apakah yang disebut dengan Forum dan berilah 3 contoh dan berilah keterangan singkat mengenai forum tersebut !
Forum diartikan
sebagai tempat untuk berinteraksi bagi para anggotanya dimana dengan
adanya kategori pembahasan di tiap-tiap forum bisa mempermudah para
anggota dalam mencari sebuah informasi.
Contoh : Facebook, Twitter, Email, Kaskus.
Elisabeth Dwi Astuti
XII AP 1 / 14
Apakah yang disebut Google Maps ?
Google Maps adalah sebuah jasa peta globe virtual gratis dan online disediakan oleh Google dapat ditemukan di http://maps.google.com. Ia menawarkan peta yang dapat diseret dan gambar satelit untuk seluruh dunia dan baru-baru ini, Bulan, dan juga menawarkan perencana rute dan pencari letak bisnis di Amerika Serikat, Kanada, Jepang, Hong Kong, Cina, UK, Irlandia (hanya pusat kota) dan beberapa bagian Eropa. Google Maps masih berada dalam tahap beta.
Elisabeth Dwi Astuti
XII AP 1 / 14
Elisabeth Dwi Astuti
XII AP 1 / 14
Apakah yang disebut Google Docs ?
Pengertian Google Docs
Google Docs merupakan salah satu aplikasi yang
dikembangkan Google untuk kebutuhan manajemen dokumen. 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 dokumen
perkantoran seperti layaknya Microsoft Office pada Windows atau Open Office pada Linux dengan secara online. Semuanya dalam satu paket dan tidak
perlu menginstal di komputer. Karena sangat tangguh dan dasyat maka sering
disebut aplikasi pembunuh Microsoft Office, Open Office, dan Neo Office.
Fitur penyimpanan di ‘udara’ seperti ini
memang bukanlah yang perdana. Beberapa layanan penyimpanan online lain yang tak
kalah menariknya juga sudah lama tersedia, seperti DropBox (Google), Box.Net,
Live Mesh (Microsoft) dan SkyDrive (Microsoft).
Tampilannya berbasis Web, dengan aplikasi
ini anda dapat membuat dokumen baru, seperti doc, xls, dan bisa juga file odt,
ods, rtf, csv, ppt, dan html.
Tentu ini jauh lebih komplit karena file berektensi odt itu hanya hdimiliki oleh open
office. Fitur yang tidak dimiliki oleh aplikasi lain adalah fitur
kolaborasi, fitur ini bisa langsung anda gunakan degan memberi cek di depan
nama file, lalu klik tombol share di atasnya. Sebuah boks akan menawarkan
berbagai pilihan akan muncul, tersedia opsi "as collaborator" yang
akan membuka akses baca tulis dokumen utuk orang-orang terpilih, sementara
fungsi as viewer hanya akan memberikan akses baca saja. Tampilannya mirip
dengan MS. Office 2003, sehingga akan dengan mudah menjalankannya.
Elisabeth Dwi Astuti
XII AP 1 / 14
Apakah yang disebut Google Drive ?
Google Drive adalah layanan penyimpanan daring milik Google yang diluncurkan pada 24 April 2012. [1][2] Layanan ini merupakan ekstensi dari Google Docs dan akan mengganti URL docs.google.com dengan drive.google.com setelah diaktifkan. Google Drive memberikan layanan penyimpanan gratis sebesar 15 GB dan dapat ditambahkan dengan pembayaran tertentu. [3] Dengan fitur unggulan yang sama seperti Dropbox,
yaitu sinkronisasi data melalui folder khusus di dalam desktop atau
lebih dikenal dengan Desktop Sync Clients. GDrive memberikan kapasitas
gratis sebesar 5 GB dan tentunya fitur-fitur yang terintegrasi dengan
layanan Google lainnya seperti: Gmail, G+ dan Google Search. Fitur yang
bisa digaris bawahi dari GDrive adalah API’s untuk para Developer.
Hingga kini GDrive telah terhubung dengan puluhan aplikasi pihak ketiga[4]
Elisabeth Dwi Astuti
XII AP 1 / 14
Elisabeth Dwi Astuti
XII AP 1 / 14
yang disebut upload dan download
- upload
adalah pemasukan suatu data dari PC (komputer), HP ke suatu alamat web,
yang natinya berfungsi sebagi penyimpan data atau pengiriman data ke
alamat yang dituju.
- download adalah pengambilan atau mengeluarkan data yang sudah tersimpan di alamat web ke PC, HP untuk menjadi data tersebut tersimpan di PC atau di HP kita.
Elisabeth Dwi Astuti
XII AP 1 / 14
- download adalah pengambilan atau mengeluarkan data yang sudah tersimpan di alamat web ke PC, HP untuk menjadi data tersebut tersimpan di PC atau di HP kita.
Elisabeth Dwi Astuti
XII AP 1 / 14
Jumat, 14 Agustus 2015
Template
Struktur dari Template BlogspotSebelum merancang template, kita harus tahu tentang struktur atau bagian-bagian dari template. Setiap template tidak harus memiliki struktur yang sama. Namun dengan mengetahui struktur dasarnya, diharapkan dapat dengan mudah mendapatkan ide untuk merancang template dan mungkin dapat mengubah dengan struktur yang berbeda sesuai selera kita. Beberapa bagian dari struktur template, yang jelas ada pada umumnya terdiri dari:
header, footer, dan bagian posting. Untuk lebih jelasnya struktur dari template yang lebih kompleks dapat dilihat pada gambar dibawah: Struktur dari template Bagian dari struktur template tersebut, dapat dijelaskan sebagai berikut: 1. Body: blok paling luar adalah Body dari template (pada dasarnya merupakan seluruh layar dari komputer). 2. Outer-wrapper: bagian ini adalah yang melingkupi template (bagian dari batas luar template). Secara umum, wrapperdigunakan untuk menempatkan blok-blok yang lebih kecil yang ada didalamnya. Blok yang paling umum didalam Outer-wrapper adalah Header, Content, and Footer.
3. Header: blok ini adalah bagian paling atas dari blok. Didalam Header dapat juga memiliki sub-blok, misalnya: Header Judul blok, Deskripsi blog, dan lain-lain seperti banner Adsense, menu bar, dll. Diluar header atau untuk membungkus semua sub-blok di dalam header biasanya dinamakan Header-wrapper. 4. Content: dibawah Header adalah Content-wrapper - Pada dasarnya merupakan bagian
dari blok yang paling penting. Secara umum bagian wrapper ini didalamnya terdiri dari blok Sidebar (bisa 1,2 atau lebih sidebar) dan blok Main (yang berisi hasil posting artikel,
komentar, atau beberapa ads). 5. Footer: adalah bagian bawah dari template. Seperti di Header, dibutuhkan juga Footer-
wrapper yang berisi bagian-bagian dari footer. 6. Main: Main-wrapper adalah bagian luar dari blok Main yang didalamnya terdapat
Content-wrapper. Didalam Main-wrapper terdapat blok Post, blok Comment, Date
Header, dan bagian lain yang dapat dibuat dari opsi Add Page Element. 
7. Sidebar: adalah bagian yang dapat berisi semua widget dan biasanya terletak dibagian samping, seperti: About Me, Labels, Archive, Text, HTML, Adsense, etc. Didalam
standard template dari Blogger, biasanya ditemukan 1 sidebar, jika terdapat 1 sidebar maka template terdiri dari 2 kolom, yaitu Main dan Sidebar. Tetapi jumlah sidebar dapat
ditambahkan dengan mudah. Yang paling umum adalah memiliki 2 sidebar atau berarti template memiliki 3 kolom. Dengan mengikuti seri tutorial ini diharapkan, nantinya kita dapat mengerti struktur dari template dan dengan mudah menambah atau memindah sidebar kekiri atau kanan. 8. Blog Post: blok ini berisi bagian yan paling penting, seperti Posts Titles (judul artikel),
Post (artikel), Post Author (Penulis artikel), Labels (label), etc.
Struktur dari template blogger, jika dilihat secara hierarki, mulai dari bagian yang paling besar ke bagian yang paling kecil, dapat ditampilkan sebagai berikut:
• Bodyo Outer-wrapper Header-wrapper Blog Title Blog Description Other widgets Content-wrapper Sidebar-wrapper (1,2,3...) Main-wrapper Date Header Posts Post Title Post Content (or called Post Body) Post Footer (Author, Labels, etc) Comments Feed Link Other widgets (mostly ad units) Footer-wrapper Footer text (disclaimer, copyrights, etc) Other widgetsSetelah memahami struktur diatas, akan lebih mudah untuk memahami struktur kode dari templatenya Blogger. Belajar struktur kode dari template sebenarnya tidak belajar tentang HTML atau CSS, tetapi lebih terhadap bagaimana kode tersebut disusun dan terorganisir.
Dengan memahami struktur dari template, walaupun punya pengetahuan yang minim terhadap pemrograman web, kita dapat mengubah template atau mendesain sesuai dengan selera.
Abal Abul
1. Lihat Blog / View Blog : Untuk melihat tampilan Blog
sobat di Browser. apabila sobat klik maka akan membuka alamat blog sobat
di tab baru pada Browser Sobat.
2. Entri Baru / New Post: Untuk membuat Postingan atau Artikel Baru pada Blog Sobat untuk di plubikasikan.
3. Ikhtisar / Overview : Tampilan Statistik blog Terbaru, untuk memantau pengunjung blog kita.
4. Pos / Posts : Untuk melihat Postingan yang sudah di publikasikan ataupun yang masih dalam daftar atau belum di publikasikan, melalui menu ini sobat dapat mengedit postingan-postingan lama ataupun baru.
5. Laman / Pages : Seperti halnya Post. disini untuk membuat ataupun mengedit serta melihat Laman atau Halaman yang akan maupun sudah kita Buat.
6. Komentar / Comments : Untuk melihat Komentar dari pengunjung yang masuk di blog kita, dimenu ini ada 3 sub menu yaitu :
8. Statistik / Stats : Melihat Riwayat Blog kita sepanjang waktu dari awal blog di buat sampai saat ini, ada 4 submenu di Statistik ini:
10. Tata Letak atau Layouts : Melihat serta mengedit tata letak Blog kita, disini kita bisa manmbahkan Widget pada blog kita maupun memindah posisi widget pada Blog kita.
11. Template : Untuk mengatur Template kita , membackup maupun restore template kita, mengubah sesuaikan tampilan template blog, serta mengaktifkan maupun menonaktifkan tampilan mobile template blog. dan Mengedit HTML template kita.
12. Setelan / Setting : Untuk mengatur blog Kita, disini ada beberapa sub menu
2. Entri Baru / New Post: Untuk membuat Postingan atau Artikel Baru pada Blog Sobat untuk di plubikasikan.
3. Ikhtisar / Overview : Tampilan Statistik blog Terbaru, untuk memantau pengunjung blog kita.
4. Pos / Posts : Untuk melihat Postingan yang sudah di publikasikan ataupun yang masih dalam daftar atau belum di publikasikan, melalui menu ini sobat dapat mengedit postingan-postingan lama ataupun baru.
5. Laman / Pages : Seperti halnya Post. disini untuk membuat ataupun mengedit serta melihat Laman atau Halaman yang akan maupun sudah kita Buat.
6. Komentar / Comments : Untuk melihat Komentar dari pengunjung yang masuk di blog kita, dimenu ini ada 3 sub menu yaitu :
- Publised : Komentar yang sudah di Publikasikan
- Awaiting Moderation / menunggu moderasi : melihat Komentar yang antri menunggu di publikasikan
- Spam : Melihat Komentar Spam yang tidak berguna
8. Statistik / Stats : Melihat Riwayat Blog kita sepanjang waktu dari awal blog di buat sampai saat ini, ada 4 submenu di Statistik ini:
- Ikhtisar/Overviews : Tampilan awal statistik terbaru blog kita
- Post : Statistik setiap judul postingan kita, kita bisa mengetahui sudah berapa banyak yang melihat setiap judul postingan kita atau jumlah Page views masing-masing Judul.
- Sumber lalu lintas / traffic Source : Melihat Dari situs mana pengunjung blog kita datang.
- Audience / pemirsa : Melihat dari negara mana yang mengunjungi situs kita serta menggunakan Browser apa dan juga Operating Sistem apa yang digunakan buat mengunjungi Blog kita
10. Tata Letak atau Layouts : Melihat serta mengedit tata letak Blog kita, disini kita bisa manmbahkan Widget pada blog kita maupun memindah posisi widget pada Blog kita.
11. Template : Untuk mengatur Template kita , membackup maupun restore template kita, mengubah sesuaikan tampilan template blog, serta mengaktifkan maupun menonaktifkan tampilan mobile template blog. dan Mengedit HTML template kita.
12. Setelan / Setting : Untuk mengatur blog Kita, disini ada beberapa sub menu
- Basic : mengatur Judul Blog, Deskripsi, privasi blog, Pengelola Blog , serta pembaca Blog kita.
- post dan Comments : mengatur jumlah Post yang akan kita tampilkan di laman utama, mensetting komentar yang masuk. dll
- Mobile and Email : mengatur email admin dan notifikasi
- Language and Formating : mengatur bahasa dan juga Format Waktu meliputi tanggal dan jam.
- Search Preference : mengatur meta tag blog kita, custom page dan redirect serta Indexing dan Crawl blog kita dengan custom robots.
- Other : tools tambahan untuk export atau import blog kita dan juga mengatur Url Open ID serta Konten dewasa dll.
Elisabeth Dwi Astuti
XII AP 1 / 14
Pengertian Template
Template atau Theme
merupakan dokumen atau file yang berisikan model-model tambahan yang
akan muncul pada saat proses pembuatan dokumen lain. Sedangkan Website
merupakan situs atau halaman di Internet yang menyediakan informasi dan
tertanam pada World Wide Web (www).
Dari pengertian 2 kata diatas, Pengertian Template Website itu adalah sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.
Template
merupakan salah satu identitas anda. Kita tidak dapat memilih Template
yang mengikuti taste kita sendiri, apabila web yang anda tujukan untuk
visitor dengan kalangan tertentu. Akan tetapi pemilihan template bebas
dapat anda lakukan secara sepihak apabila itu tidak diperuntukan untuk
moneytise bahkan mungkin dikhususkan untuk anda sendiri.
Elisabeth Dwi Astuti
XII AP 1 / 14
Pengertian dan Perintah Javascript
pengertian dan perintah dasar javascript
JavaScript adalah sekumpulan perintah khusus yang digunakan untuk membuat sebuah halaman web yang
lebih responsif dan interaktif. JavaScript merupakan bahasa script yang
dicantumkan pada sebuah halaman web dan dijalankan pada penjelajah web
(web browser). JavaScript terutama terkenal karena penggunaannya di
halaman web yang memberikan kemampuan tambahan pada HTML dengan
mengizinkan pengeksekusian perintah di sisi user (penjelajah web), bukan
di sisi server web.
JavaScript bergantung kepada penjelajah web yang memanggil halaman web yang berisi script-script dari JavaScript yang terselip di dalam dokumen HTML. Script JavaScript yang dimasukkan di dalam file HTML harus dimasukkan di antara tag <script> dan</script>. JavaScript tidak memerlukan kompilator atau program khusus untuk menjalankannya karena JavaScript sendiri sudah termasuk di dalam penjelajah web tersebut.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan (embedded). Script ini dapat membuka halaman pop up, melakukan validasi pada form sebelum data dikirimkan ke server, mengubah kursor ketika melewati objek tertentu, berkomunikasi dengan server, dan banyak yang lainnya.
Ada beberapa hal yang harus diperhatikan dalam penggunaan JavaScript, diantaranya JavaScript bersifat "case sensitive", yang artinya JavaScript membedakan huruf besar dan huruf kecil. Hal ini sama dengan bahasa pemrograman C++ dimana huruf "A" tidak sama dengan huruf "a". Sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua).
Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Perbedaan mendasar antara keduanya adalah bahwa pemrograman Java dapat berjalan pada mesin virtual (video game, tablet) dan penjelajah web (Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer) sedangkan JavaScript hanya dapat berjalan pada penjelajah web saja. Java merupakan bahasa pemrograman berorientasi objek murni sedangkan JavaScript digunakan secara prosedural. Java dikembangkan oleh Sun Microsystem sedangkan JavaScript dikembangkan oleh Netscape Inc.
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>
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>
Elisabeth Dwi Astuti
XII AP 1 / 14
Pengertian dan Perintah CSS
pengertian css dan perintahnya
CSS adalah kepanjangan dari Cassading Style Sheet. Kode CSS ini hampir terdapat di seluruh bagian template blog anda. Adapun fungsi dari CSS adalah untuk mempercantik sebuah halaman web, termasuk blog. CSS dapat bekerja secara maksimal jika tidak ada kesalahan dalam mengedit atau menambahkan kode CSS kedalam template blog Anda. Jika tedapat kesalahan, baik dalam menambahkan atau mengedit tampilan blog, maka dapat dipastikan blog anda akan menjadi berantakan. Sebenarnya, untuk menjadikan blog anda indah dan cantik, Anda tidak perlu mendalami pengetahuan kode CSS karena kode CSS ini akan bekerja maksimal dengan sistem kode yang disebut mark up language, seperti kode HTML, XHTML, dan XML. Namun, mempelajari dasar-dasar kode CSS dapat membantu Anda dalam mengedit template blog sehingga terlihat cantik dan menarik. Pengetahuan dasar tentang kode CSS akan membantu Anda nantinya, dalam mempelajari dan mempraktikkan bab-bab selanjutnya. Kode CSS tidak jauh berbeda dengan kode HTML. Perintah dasar dari kode CSS hampir sama dengan kode HTML yang diawali dengan kode pembuka dan kode penutup. Jika tidak, template tidak dapat di-parse atau disimpan pada halaman blog anda. ciri dari kode CSS adalah dapat ditambahkan atau digunakan langsung untuk mengedit dari template blog anda. Kode-kode CSS biasanya meliputi warna dan aksesori yang ada di halaman blog Anda. Misalnya, jika anda ingin menuliskan tulisan "blog pertamaku" dengan warna merah, maka kode yang membuat warna merah itulah yang disebut dengan CSS. Sebagai contoh, jika saya menuliskan kode warna merah dengan kalimat ""membuat blog pertamaku" pada posting, maka kodenya adalah sebagai berikut: membuat blog pertamaku pada kode diatas, terdapat yang dipertebal, yaitu color:rgb(255, 0, 0); font-weight: bold; kode inilah yang dinamakan dengan kode CSS. Adapun fungsi dari kode tersebut adalah untuk mempertebal dan memberikan warna merah pada kalimat "membuat blog pertamaku". kode warna merah dapat juga diwakilkan dengan cara menuliskan tanda# dan kode warna. Misal, jika warna yang akan digunakan adalah warna putih, maka kode CSS untuk warna putih adalah sebagai berikut, #FFFFFF. Untuk warna hitam, kodenya adalah #000000, dan seterusnya. Biasanya, di dalam template blog, kode CSS diawali dengan kode {dan kode penutup} yang biasa disebut container code CSS karena diantara kode tersebut terdapat kombinasi kode CSS. Contoh kode CSS yang ada di template blogger pada menu Main (tempat posting)) adalah sebagai berikut:
#main {
margin: 0 0 10px;
width: 480px;
float:right;
padding:0 9px 12px 9px;
border:1px
dotted #900;
color:#ffffff; }
#main {
margin: 0 0 10px;
width: 480px;
float:right;
padding:0 9px 12px 9px;
border:1px
dotted #900;
color:#ffffff; }
Keterangan:
Border : garis yang ada di sekeliling sidebar atau main
Color : warna
Dotted : garis titik-titik pada border
Float : letak penempatan, baik di kanan atau di kiri
Margin : jarak batas dari main atau sidebar
Padding : jarak tepi isi sidebar atau main
Px : ukuran pixel
Width : lebar dari area sidebar atau main.
Kalau kemarin membahas "Mengenal Bahasa Pemrograman CSS", sekarang saya akan membahas sedikit cara memanggil CSS dalam HTML. Mungkin tutorial kali ini tidak sebaik yang Anda kira, jadi saya sebagai penulis, minta maaf sebelumnya...hehehehehe...
Pada dasarnya untuk memanggil file CSS ini ada 3 cara:
1. Membuat File CSS terpisah dengan HTML
2. Menyisipkan perintah CSS diantara <head></head>
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML.
1. Membuat File CSS terpisah dengan HTML.
Untuk membuat file CSS terpisah dengan HTML, Anda bisa membuat file dengan format .CSS dan setelah itu memanggil file Anda dalam HTML. Sebagai contoh, saya akan membuat file yang akan saya beri namastyle.css,seperti ini:
h1{color:white; letter-spacing:-1px; margin:0; text-align:left; font:42px verdana;}
h2{font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px; font: 22px verdana;}
img{border: 0px;}
blockquote {background-color: #666; color: white; font-style: italic; text-align: left; width: 300px; margin: 10px auto;}
code {color: #444;font: verdana, monospace;background-color: #f4f4f4;font-size: 1.2em;}
Dan untuk perintah pemanggilnya di HTML begini:
<link href="style.css" rel="stylesheet" type="text/css">
Dengan membuat demikian, maka file-file Anda akan simple, dan mudah kalau dilakukan pengeditan ulang.
2.Menyisipkan perintah CSS diantara <head></head>
Untuk bagian ini akan banyak Anda temui pada template-template blogger, seperti ini contoh perintahnya
<style>a:hover {
text-decoration: none;
color: blue;
font-size: 16px;}
</style>
Keuntungan bagian ini, Anda tidak perlu membuat 2 file, cukup 1 file dalam HTML, tetapi kelemahannya, jika file CSS Anda terlalu panjang dan Anda ingin mengadakan pengeditan, maka siap-siap saja pusing melihat perintah yang bertaburan...hehehehe
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML
Yang saya maksudkan pada bagian ini adalah perintah CSS nanti akan langsung dimasukkan dalam perintah HTML, sebagai contoh adalah demikian, saya memakai contoh jika saya mau memberikan style pada perintah HTML <blocknote>, seperti ini;
<blockquote style="font-color: white; font-size:12px;">Ini Adalah perintah <code><blocquote>...</blockquote></code></blockquote>
Mungkin sampai disini dulu, Anda bisa mencoba-coba sendiri pada file HTML Anda, seperti pembahasan kemarin tentang Penerapan HTML.
Pada dasarnya untuk memanggil file CSS ini ada 3 cara:
1. Membuat File CSS terpisah dengan HTML
2. Menyisipkan perintah CSS diantara <head></head>
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML.
1. Membuat File CSS terpisah dengan HTML.
Untuk membuat file CSS terpisah dengan HTML, Anda bisa membuat file dengan format .CSS dan setelah itu memanggil file Anda dalam HTML. Sebagai contoh, saya akan membuat file yang akan saya beri namastyle.css,seperti ini:
h1{color:white; letter-spacing:-1px; margin:0; text-align:left; font:42px verdana;}
h2{font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px; font: 22px verdana;}
img{border: 0px;}
blockquote {background-color: #666; color: white; font-style: italic; text-align: left; width: 300px; margin: 10px auto;}
code {color: #444;font: verdana, monospace;background-color: #f4f4f4;font-size: 1.2em;}
Dan untuk perintah pemanggilnya di HTML begini:
<link href="style.css" rel="stylesheet" type="text/css">
Dengan membuat demikian, maka file-file Anda akan simple, dan mudah kalau dilakukan pengeditan ulang.
2.Menyisipkan perintah CSS diantara <head></head>
Untuk bagian ini akan banyak Anda temui pada template-template blogger, seperti ini contoh perintahnya
<style>a:hover {
text-decoration: none;
color: blue;
font-size: 16px;}
</style>
Keuntungan bagian ini, Anda tidak perlu membuat 2 file, cukup 1 file dalam HTML, tetapi kelemahannya, jika file CSS Anda terlalu panjang dan Anda ingin mengadakan pengeditan, maka siap-siap saja pusing melihat perintah yang bertaburan...hehehehe
3. Menyisipkan perintah CSS ke dalam perintah-perintah HTML
Yang saya maksudkan pada bagian ini adalah perintah CSS nanti akan langsung dimasukkan dalam perintah HTML, sebagai contoh adalah demikian, saya memakai contoh jika saya mau memberikan style pada perintah HTML <blocknote>, seperti ini;
<blockquote style="font-color: white; font-size:12px;">Ini Adalah perintah <code><blocquote>...</blockquote></code></blockquote>
Mungkin sampai disini dulu, Anda bisa mencoba-coba sendiri pada file HTML Anda, seperti pembahasan kemarin tentang Penerapan HTML.
Pada bab-bab sebelumnya saya telah mebahas mengenai "Mengenal Bahasa Pemrograman CSS" dan "Beberapa Cara Memanggil CSS ke dalam HTML". Kali ini sedikit mengulas dari kedua bab tersebut, dan lebih di spesifikkan kedalam penggunaan perintah background. Sebenarnya kalau kita bahas satu-persatu bakalan banyak banget mulai dari perintah background, behavior, border, bottom, caption-side, clear, clip, color, content, dll. Semoga saja saya bisa mengulas semuanya di blog ini.
Sebenarnya perintah background ini terdiri dari perintah-perintah sebagai berikut:
1. Background
Perintah ini pada dasarnya adalah keseluruhan perintah yang memungkinkan didalamnya akan berisi perintah-perintah background-color, background-image, background-attachment, background-repeat, dan background-position. Sebagai contoh adalah sebagai berikut:
contoh{ background: background: red url(image.gif) no-repeat fixed left top;}
2. Background-color
Perintah ini berfungsi untuk memberikan warna pada latar belakang. Sebagai contoh:contoh{background-color:red;}
3. Background-image
Perintah ini akan memberikan tampilan gambar yang diambil dari URL. Sebagai contoh:
contoh{background-image: url(image.jpg);}
4. Background-attachment
Perintah ini akan mengatur apakah tampilan background-image mengikuti dokumen(scroll) atau dokumen yang mengikuti background-image(fixed). Sebagai Contoh:
contoh{background-attachment: fixed;}
5. Background-repeat
Perintah ini akan mengatur apakah perintah background-image diulang atau tidak, kalau diulang maka di ulang ke arah mana. Perintah ini terdiri dari 4 jenis:
Sebenarnya perintah background ini terdiri dari perintah-perintah sebagai berikut:
1. Background
Perintah ini pada dasarnya adalah keseluruhan perintah yang memungkinkan didalamnya akan berisi perintah-perintah background-color, background-image, background-attachment, background-repeat, dan background-position. Sebagai contoh adalah sebagai berikut:
contoh{ background: background: red url(image.gif) no-repeat fixed left top;}
2. Background-color
Perintah ini berfungsi untuk memberikan warna pada latar belakang. Sebagai contoh:contoh{background-color:red;}
3. Background-image
Perintah ini akan memberikan tampilan gambar yang diambil dari URL. Sebagai contoh:
contoh{background-image: url(image.jpg);}
4. Background-attachment
Perintah ini akan mengatur apakah tampilan background-image mengikuti dokumen(scroll) atau dokumen yang mengikuti background-image(fixed). Sebagai Contoh:
contoh{background-attachment: fixed;}
5. Background-repeat
Perintah ini akan mengatur apakah perintah background-image diulang atau tidak, kalau diulang maka di ulang ke arah mana. Perintah ini terdiri dari 4 jenis:
x = dengan perintah ini, maka background akan diulang kearah sumbu x.
y = dengan perintah ini, maka background akan diulang kearah sumbu y.
no-repeat = dengan perintah ini, maka background tidak akan diulang.
Sebagai contoh adalah sebagai berikut:
contoh{ background-repeat: repeat-x;}
,
contoh{ background-repeat: repeat-y;}
atau
contoh{ background-repeat: no-repeat;}
6. Background-position
Perintah ini akan mengatur posisi dari background-image yang akan menyebabkan gambar diulang dalam kedua arah (x dan y) sepanjang ditentukan sumbu. Sebagai contoh:
contoh{ background-position: x y;} » contoh{ background-position: right bottom;}
Semoga pembahasan saya kali ini bisa menambah wawasan Anda mengenai CSS, kritik, saran, dan dukungan tetap diperlukan demi kemajuan blog ini. Sampai jumpa lagi pada pembahasan selanjutnya
contoh{ background-repeat: repeat-x;}
,
contoh{ background-repeat: repeat-y;}
atau
contoh{ background-repeat: no-repeat;}
6. Background-position
Perintah ini akan mengatur posisi dari background-image yang akan menyebabkan gambar diulang dalam kedua arah (x dan y) sepanjang ditentukan sumbu. Sebagai contoh:
contoh{ background-position: x y;} » contoh{ background-position: right bottom;}
Semoga pembahasan saya kali ini bisa menambah wawasan Anda mengenai CSS, kritik, saran, dan dukungan tetap diperlukan demi kemajuan blog ini. Sampai jumpa lagi pada pembahasan selanjutnya
Elisabeth Dwi Astuti
XII AP 1 / 14
Pengertian CSS
Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Elisabeth Dwi Astuti
XII AP 1 / 14
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Elisabeth Dwi Astuti
XII AP 1 / 14
HTML
HTML (HyperText Mark up Language) merupakan
suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu
naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa
pemrograman karena sifatnya yang hanya memberikan tanda (marking up)
pada suatu naskah teks dan bukan sebagai program.
Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunnya HTML nya adalah sebagai berikut:
Hypertext
Link
hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata
atau frase untuk mengikuti link ini maka web browser akan memindahkan
tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada
pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi
suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen
yang akan ditampilkan pada World Wide Web.
Language
Meski
HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa instruksi yang dapat digunakan untuk
mengubah-ubah format suatu naskah atau dokumen.
Pada
awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized
Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan
melalui media Internet, maka HTML relatif lebih sederhana daripada SGML
yang lebih ditekankan pada format dokumen yang berorientasi pada
aplikasi.
Adapun Perintah - Perintah Dasar dari HTML adalah sebagai berikut:
1. <H1> sampai <H6> <H1> </H1>font ukuran besar
<H2> </H2>
.... ....
<H6> </H6>font semakin kecil
2. <HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
3. <I>
Fungsi : membuat teks miring
4. <B>
Fungsi : membuat teks tebal
5. <U>
Fungsi : membuat teks bergaris bawah
6. <CENTER>
Fungsi : membuat text ke tengah layar
7. <ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kanan
atau
<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>
Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>
8. <BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir
baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
9. <!->
Fungsi : membuat komentar
Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
10. <P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
11. <DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
12. <BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>
13. <FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
14. <FACE>
Fungsi : mengubah jenis font
15. <SUP>
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1stin the world
16. <SUB>
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H2O (Disebut Air) dan
C2127No (Disebut Methadon)
17. <UL> atau Unorder List
Fungsi : membuat bullet
18. <LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
<LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
19. <IMGSRC>
Fungsi : memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER="5">
"5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
20. <BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">
Link dengan sorot
Berikut adalah contoh program bagaimana membuat link hanya dengan
sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name="description"Content=" ">
<META Name="keywords"Content=" ">
<META Name="generator"Content="Cute HTML">
</HEAD>
<BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080">
<Center>
<A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):">
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>
Link dengan tombol
Berikut adalah contoh program link dengan tombol
Sintak :
<Input type="button"Value="Nama Tombol"
On Click="parent.location="Link anda disini" >
Contoh
Buatlah link dengan nama
tentang_kami.html
produk_kami.html
cara_memesan.html
< HTML >
< HEAD >
< TITLE > </TITLE>
< META name="description"Content=" ">
< META name="keywords"Content=" ">
< META name="generator"Content="Cute HTML">
< /HEAD >
< BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" >
< Center >
< h1 > PT.OCTA >
< Input Type="button"value="Tentang Kami"
on click="parent.location="c:/website/tentang_kami.html'" >
< Input Type="button"value="Produk Kami"
on click="parent.location="c:/gambar/produk_kami.html'" >
< Input Type="button"value="cara memesan"
on click="parent.location="c:/gambar/cara_memesan.html'" >
< /Center >
< /Body >
< /HTML >
Kolom
< tr > adalah perintah untuk membuat kolom pada notepad
Berikut adalah contoh perintah cara membuat kolom pada notepad
< html >
< head >
< title > Belajar membuat kolom < /title >
< /head >
< H3 Align="Center" > DAFTAR MAHASISWA < H3 >
< table border="3" border color="red"
< tr >
< td > No
< td > Nama
< td > Alamat
< td > No. Phone
< td > Gambar
< /tr >
< tr >
< td > 1
< td > Octa
< td > Padang Bulan
< td > 8214773
< td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr >
Hasilnya menjadi
Membuat Frame
-Framecols : membagi layar dalam bentuk kolom
-FrameRows : membagi layar dengan bentuk baris
-Frame Src : menampilkan file dalam frame
Bentuknya
(Frame cols="30%,*")
(Frame Src="Nama.file Name="Teks")
(Frame Rows="40%,*")
(Frame Src="Nama.file"Nama="teks")
(Frame Src="Nama.file"Nama="Teks)
(/Frameset)
Contoh Program Frame
< Html >
< Head >
< Title >Melink dengan sorot < /Title >
< /Head >
< Frameset cols="30%,*" >
< Frame Src="Nama file"Nama="Teks" >
< Frame Rows="40%%,*" >
< Frame Src="Gambar File’Nama="Gambar" >
< Frame Src="Nama File"Nama="Teks >
< /Frameset >
Contoh HTML :
struktur dasar bahasa HTML.
<html>
<head>
<title> tempat menulis judul halaman web </html>
<head>
<body>
tempat untuk menulis isi dari halaman web
</body>
</html>
kita coba latihan,,
langkah pertama
buka lah satu program aplikasi pengolah kata seperti notepad atau wordpad ataupun aplikasi pengolah kata lainnya.
langkah kedua
tuliskan tag html di bawah ini pada aplikasi pengolah kata:
<html>
<head>
<title>
LATIHAN 1 HTML OLEH ALIM di INDONESI4KU.WORDPRESS.COM
</title>
</head>
<body>
<br>
<p>HTML adalah bahasa standar yang digunakan untuk membuat halaman web.<br>
salah satu tutorial atau contoh latihannya dapat kita lihat di situs<br>
Indonesi4ku.wordpress.com.
</body>
</html>
langkah ketiga
simpanlah file tadi dengan ekstensi atau tipe file “.html”. contoh: latihan1.html
langkah keempat
bukalah file yang sudah kita simpan tadi, dengan cara mengklik dua kali pada nama filenya.
Elisabeth Dwi Astuti
XII AP 1 / 14
Langganan:
Postingan (Atom)