Senin, 31 Agustus 2015

Membuat Marquee

<html><head>
<title>Membuat Marquee</title></head>
<body>
<marquee>Change tezt between marquee tags</marquee>
<br>
<marquee behavior="alternate">Alternate marquee behavior</marquee>
<marquee direction="up">Up marquee direction</marquee>
<marquee direction="down">Down marquee direction</marquee>
<marquee scrollamount="5" width="4"><<</marquee>
Opposite Direction Marquees<marquee scrollamount="5" direction="right" width="40">>>&gt"</marquee>
</body>
</html>

latihan web 2

Latihan Halaman Web 2-a Google Indonesia = www.google.co.id Yahoo Indonesia = www.yahoo.co.id Facebook = www.facebook.com

mengedit html

Mengedit Paragraph - HTML

<html> <head>
   <title>Membuat paragraf</title>
   </head>
   <body>
    <h1>Membuat paragraf memakai
     tag <p> </h1>
    <p align="left">Paragraf rata kiri.
    Kalimat ini dituliskan untuk membuktikan
    bahwa tag p align="left" untuk rata kiri.
    </p>
    <p align="center">Paragraf rata tengah.
    Kalimat ini dituliskan untuk membuktikan
    bahwa tag p align="center" untuk rata tengah.
    </p>
    <p align="right">Paragraf rata kanan.
    Kalimat ini dituliskan untuk membuktikan
    bahwa tag p align="right" untuk rata kanan.
    </p>
    <p align="justify">Paragraf rata kanan
    dan rata kiri. Kalau tidak ada
    tag <br> tidak ada enter kecuali ada
    tag pengaturan teks.
    Kalimat ini dituliskan untuk membuktikan
    bahwa tag p align="justify" untuk rata kanan
    dan rata kiri.
    </p>

    </body>
</html>

tugas konten 01 09 2015

Pengertian ISP, contoh dan fungsi ISP (Internet Service Provider) – ISP adalah singkatan dari “Internet Service Provider”. Supaya kita bisa mengakses, tersambung atau terhubung ke internet, kita harus mempunyai akses yaitu dengan cara berlangganan ke penyedia jasa layanan internet (Internet Service Provider). ISP adalah perusahaan yang menawarkan sebuah jasa pelayanan kepada kita untuk bisa berhubungan atau terhubung dengan internet. Untuk bisa terhubung dengan internet, kita cukup menghubungi ISP melalui modem dan komputer/pc lalu ISP yang akan mengurus detail-detail yang diperlukan untuk terhubung dengan internet, termasuk biaya-biaya koneksi tersebut. Jadi, misalnya kita sedang mengakses beranda/homepage mancanegara, maka ISP-lah yang menanggung biaya hubungan ke mancanegara. Sedangkan kita cukup membayar pulsa lokal yang digunakan untuk menghubungi ISP tadi.

PIJI adalah singkatan dari “Penyelenggara Jasa Internet”, atau “Internet Service Provider (ISP) (dalam bahasa Inggris)” adalah perusahaan atau sebuah badan yang menyelenggarakan jasa sambungan internet dan jasa lainnya yang berkaitan atau berhubungan. Kebanyakan perusahaan-perusahaan telepon merupakan penyelenggara jasa internet. Mereka menyediakan jasa berupa hubungan ke internet, pendaftaran nama domain, hosting dan sebagainya.

ISP (Internet Service Provider) ini memiliki jaringan baik secara domestik maupun secara internasional sehingga pelanggan atau konsumen dari sambungan yang disediakan ISP dapat terhubung atau tersambung ke jaringan Internet global. Jaringan disini merupakan media transmisi yang dapat mengalirkan data-data yang dapat berupa seperti kabel (sewa kabel, modem & jalur lebar), radio maupun VSAT.

Apakah itu ISP?

Biasanya, ISP (Internet Service Provider) yaitu biaya bulanan kepada konsumen/pengguna. Hubungan tersebut biasanya dibagi menjadi ke dalam 2 (dua) kategori, yaitu modem (Dial up) dan juga jalur lebar. Hubungan dial-up saat ini banyak yang ditawarkan gratis atau dengan harga yang murah serta membutuhkan penggunaan kabel telepon biasa. Hubungan jalur lebar yang dapat berupa non-kabel, ISDN , kabel modem, DSL, atau juga satelit. Broadband dibandingkan modem memiliki kecepatan yang lebih cepat & selalu “on”, namunbiayanya lebih mahal.

Berikut ini contoh dari ISP

Inilah beberapa Contoh ISP (Internet Service Provider) yang ada di Indonesia, bisa dibaca di bawah ini:

PT. Indosat / INDOSATnet.
Asia Pasific Internet Company.
PT. EXCELCOMINDO PRATAMA.

Dan inilah fungsi ISP

Peran atau Fungsi ISP (Internet Service Provider) dalam pengaksesan jaringan internet adalah :

Menghubungkan pengguna/kunsumen ke gateway internet yang terdekat.
Sebagai sebuah media yang memberikan pelayanan jasa untuk terhubung ke internet.
Sebagai yang Menyediakan modem untuk dial-up.
Sebagai yang menghubungkan user kepada layanan informasi WWW (World Wide Web).
Memungkinkan user untuk memakai layanan surat elektronik, yang sering disebut dengan E-mail.
Memungkinkan para user untuk melakukan percakapan suara melalui jaringan internet.
Memberikan tempat untuk homepage.
Internet Service Provider (ISP) melakukan proteksi dari penyebaran virus dengan menerapkan sistem antivirus untuk penggunanya.
Fungsi ISP (Internet Service Provider) sebagai perusahaan yang menawarkan jasa pelayanan untuk berhubungan dengan jaringan internet. Untuk mengaksesnya, kita cukup menghubungi saja Internet Service Provider/ISP melalui komputer dan modem. Setelah itu ISP akan mengurus semua yang diperlukan untuk berhubungan dengan internet.
Dan Lain-lain.

tugas konten 01 09 2015

Domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet. Fungsi Domain adalah untukmempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai IP address. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya "wikipedia.org". Nama domain kadang-kadang disebut pula dengan istilah URL, atau alamat website.

Contoh : misal alamat IP server tempat file web kita disimpan adalah 77.165.90.89 sebenarnya kita bisa saja mengetikkan 77.165.90.89 langsung di browser untuk mengakses website kita, namun hal ini tentunya sangat tidak baik bagi ingatan orang khususnya ingatan pengunjung website yang mengakses website kita. Sehingga fungsi domain lebih untuk mudahkan orang mengingat sebuah nama url dibanding deretan deretan angka IP. Untuk itu diperlukan domain guna mengganti deretan angka tersebut agar menjadi deretan kata yang tentunya gampang diingat. misal:namadomain.com akan lebih mudah diingat ketimbang angka 218.719.51.617

Sebuah nama domain biasanya terdiri dari dua bagian atau lebih (secara teknis disebut label), dipisahkan dengan titik.

Label paling kanan menyatakan top-level domain - domain tingkat atas/tinggi (misalkan, alamat www.wikipedia.org memiliki top-level domain org).

Setiap label di sebelah kirinya menyatakan sebuah sub-divisi atau subdomain dari domain yang lebih tinggi. Catatan: "subdomain" menyatakan ketergantungan relatif, bukan absolut. Contoh: wikipedia.orgmerupakan subdomain dari domain org, dan id.wikipedia.org dapat membentuk subdomain dari domain wikipedia.org (pada praktiknya, id.wikipedia.org sesungguhnya mewakili sebuah nama host - lihat dibawah). Secara teori, pembagian seperti ini dapat mencapai kedalaman 127 level, dan setiap label dapat terbentuk sampai dengan 63 karakter, selama total nama domain tidak melebihi panjang 255 karakter. Tetapi secara praktik, beberapa pendaftar nama domain (domain name registry) memiliki batas yang lebih sedikit.

Terakhir, bagian paling kiri dari bagian nama domain (biasanya) menyatakan nama host. Sisa dari nama domain menyatakan cara untuk membangun jalur logis untuk informasi yang dibutuhkan; nama host adalah tujuan sebenarnya dari nama sistem yang dicari alamat IP-nya. Contoh: nama domain www.wikipedia.org memiliki nama host "www".

www.bungurnews.blogspot.com

^ ^ ^

| | |

| | |__________ Domain

| |__________________ Nama Domain

|__________________________ Subdomain

Berikut adalah nama nama domain beserta fungsinya :

gov – Digunakan Untuk Untuk Pemerintahan

edu – Digunakan Untuk Institusi pendidikan

org – Digunakan Untuk Organisasi / Kegiatan Nonprofit

mil – Digunakan Untuk Militer

com – Digunakan Untuk Organisasi Profit / Komersial

net – Digunakan Untuk Organisasi Network

name – Digunakan untuk personal / keluarga

tv – Digunakan Untuk Pertelevisian

info – Digunakan Untuk kepentingan Informasi

biz – Digunakan Untuk Kepentingan Bisnis

travel – Digunakan Untuk Pariwisata

xxx – Digunakan untuk Hiburan Dewasa (Pornografi)

dan masih banyak lagiWalaupun telah ditetapkan fungsi domain domain tersebut, namun demikian masih banyak sekali yang tidak menggunakan domain sesuai fungsinya, termasuk domain ini ahmad-prayitno.com yang seharusnya ahmad-prayitno.name atau ahmad-prayitno.info dan domain domain lain

Dari domain domain tersebut ada domain yang bersponsor seperti .aero .cat .coop .jobs .mobi .museum .pro .tel .travel ada pula domain yang tidak bersponsor seperti .biz .com .edu .gov .info .int .mil .name .net .org. Selain itu ada juga domain yang diusulkan seperti .berlin .bzh .cym .gal .geo .kid .kids .mail .nyc .post .sco .web .xxx bahkan ada juga domain yang dihapus yaitu .nato

Beberapa contoh domain domain infrastruktur yaitu .arpa .root.

Agar informasi tentang domain lebih lengkap, berikut saya lampirkan daftar domain dan negaranya

.ac – Ascension

.ad – Andorra

.ae – Uni Emirat Arab

.af – Afganistan

.ag – Antigua dan Barbuda

.ai – Anguilla

.al – Albania

.am – Armenia

.an – Antillen Belanda

.ao – Angola

.aq – Antartika

.ar – Argentina

.as – Samoa Amerika

.at – Austria

.au – Australia

.aw – Aruba

.ax – Åland

.az – Azerbaijan

.ba – Bosnia Herzegovina

.bb – Barbados

.bd – Bangladesh

.be – Belgia

.bf – Burkina Faso

.bg – Bulgaria

.bh – Bahrain

.bi – Burundi

.bj – Benin

.bm – Bermuda

.bn – Brunei Darussalam

.bo – Bolivia

.br – Brasil

.bs – Bahama

.bt – Bhutan

.bv – Pulau Bouvet

.bw – Botswana

.by – Belarus

.bz – Belize

.ca – Kanada

.cc – Pulau Cocos

.cd – Republik Demokratik Kongo (dulunya .zr – Zaire)

.cf – Republik Afrika Tengah

.cg – Republik Kongo

.ch – Swiss

.ci – Côte d’Ivoire (Pantai Gading)

.ck – Kepulauan Cook

.cl – Chili

.cm – Kamerun

.cn – Republik Rakyat Cina

.co – Kolombia

.cr – Kosta Rika

.cs – Serbia dan Montenegro

.cu – Kuba

.cv – Tanjung Verde

.cx – Pulau Natal

.cy – Siprus

.cz – Republik Ceko

.de – Jerman

.dj – Djibouti

.dk – Denmark

.dm – Dominika

.do – Republik Dominika

.dz – Aljazair (Algeria)

.ec – Ekuador

.ee – Estonia

.eg – Mesir

.eh – Sahara Barat (tidak dipakai; tidak ada DNS)

.er – Eritrea

.es – Spanyol

.et – Ethiopia

.eu – Uni Eropa (kode domain yang “dikhususkan” oleh ISO 3166-1)

.fi – Finlandia

.fj – Fiji

.fk – Kepulauan Falkland

.fm – Federasi Mikronesia

.fo – Kepulauan Faroe

.fr – Perancis

.ga – Gabon

.gb – Britania Raya (Reserved domain by IANA; deprecated – see .uk)

.gd – Grenada

.ge – Georgia

.gf – Guyana Perancis

.gg – Guernsey

.gh – Ghana

.gi – Gibraltar

.gl – Greenland

.gm – Gambia

.gn – Guinea

.gp – Guadeloupe

.gq – Guinea Khatulistiwa

.gr – Yunani

.gs – Georgia Selatan dan Kepulauan Sandwich Selatan

.gt – Guatemala

.gu – Guam

.gw – Guinea Bissau

.gy – Guyana

.hk – Hong Kong

.hm – Pulau Heard dan Kepulauan McDonald

.hn – Honduras

.hr – Kroasia

.ht – Haiti

.hu – Hongaria

.id – Indonesia

.ie – Republik Irlandia

.il – Israel

.im – Pulau Man

.in – India

.io – Teritori Samudra Hindia Britania

.iq – Irak

.ir – Iran

.is – Islandia

.it – Italia

.je – Jersey

.jm – Jamaika

.jo – Yordania

.jp – Jepang

.ke – Kenya

.kg – Kirgizstan

.kh – Kamboja

.ki – Kiribati

.km – Komoro

.kn – Saint Kitts dan Nevis

.kp – Korea Utara (tidak dipakai; tidak ada DNS)

.kr – Korea Selatan

.kw – Kuwait

.ky – Kepulauan Cayman

.kz – Kazakhstan

.la – Laos

.lb – Lebanon

.lc – Saint Lucia

.li – Liechtenstein

.lk – Sri Lanka

.lr – Liberia

.ls – Lesotho

.lt – Lituania

.lu – Luxemburg

.lv – Latvia

.ly – Libya

.ma – Maroko

.mc – Monako

.md – Moldova

.me – Montenegro

.mg – Madagaskar

.mh – Kepulauan Marshall

.mk – Republik Makedonia

.ml – Mali

.mm – Myanmar

.mn – Mongolia

.mo – Makau

.mp – Kepulauan Mariana Utara

.mq – Martinique

.mr – Mauritania

.ms – Montserrat

.mt – Malta

.mu – Mauritius

.mv – Maladewa

.mw – Malawi

.mx – Meksiko

.my – Malaysia

.mz – Mozambik

.na – Namibia

.nc – Kaledonia Baru

.ne – Niger

.nf – Pulau Norfolk

.ng – Nigeria

.ni – Nikaragua

.nl – Belanda (ccTLD terdaftar pertama)

.no – Norwegia

.np – Nepal

.nr – Nauru

.nu – Niue

.nz – Selandia Baru

.om – Oman

.pa – Panama

.pe – Peru

.pf – Polinesia Perancis

.pg – Papua Nugini

.ph – Filipina

.pk – Pakistan

.pl – Polandia

.pm – Saint-Pierre dan Miquelon

.pn – Kepulauan Pitcairn

.pr – Puerto Riko

.ps – Otoritas Nasional Palestina

.pt – Portugal

.pw – Palau

.py – Paraguay

.qa – Qatar

.re – Réunion

.ro – Rumania

.rs – Serbia

.ru – Rusia

.rw – Rwanda

.sa – Arab Saudi

.sb – Kepulauan Solomon

.sc – Seychelles

.sd – Sudan

.se – Swedia

.sg – Singapura

.sh – Saint Helena

.si – Slovenia

.sj – Svalbard dan Jan Mayen (tidak dipakai; tidak terdaftar)

.sk – Slowakia

.sl – Sierra Leone

.sm – San Marino

.sn – Senegal

.so – Somalia

.sr – Suriname

.st – Sao Tome dan Principe

.su – Uni Soviet (terdepresiasi; digantikan; kode domain “dipakai untuk pergantian” oleh ISO 3166-1)

.sv – El Salvador

.sy – Suriah

.sz – Swaziland

.tc – Kepulauan Turks dan Caicos

.td – Chad

.tf – Teritorial Perancis Selatan

.tg – Togo

.th – Thailand

.tj – Tajikistan

.tk – Tokelau

.tl – Timor Leste

.tm – Turkmenistan

.tn – Tunisia

.to – Tonga

.tp – Timor Timur (terdepresiasi – gunakan .tl; kode domain “dipakai untuk pergantian” oleh ISO 3166-1)

.tr – Turki

.tt – Trinidad dan Tobago

.tv – Tuvalu

.tw – Republik Cina (Taiwan)

.tz – Tanzania

.ua – Ukraina

.ug – Uganda

.uk – Inggris (kode domain yang “dikhususkan” oleh ISO 3166-1) (lihat pula .gb)

.us – Amerika Serikat

.uy – Uruguay

.uz – Uzbekistan

.va – Vatikan

.vc – Saint Vincent dan Grenadines

.ve – Venezuela

.vg – Kepulauan Virgin Britania Raya

.vi – Kepulauan Virgin Amerika Serikat

.vn – Vietnam

.vu – Vanuatu

.wf – Wallis dan Futuna

.ws – Samoa (dulunya Samoa Barat)

.ye – Yaman

.yt – Mayotte

.yu – Yugoslavia

.za – Afrika Selatan

.zm – Zambia

.zw – Zimbabwe

Untuk Indonesia terbagi menjadi beberapa sub domain seperti :

1. ac.id : Jenis domain yang digunakan bagi lingkungan akademik/perguruan tinggi dengan ketentuan dan kebijakan yang telah ditentukan.
2.co.id : Jenis domain yang digunakan bagi organisasi komersial yang pada ketentuan dan kebijakan selanjutnya hanya diperuntukan bagi perusahaan dengan ketentuan dan kebijakan yang telah ditentukan.
3.or.id : Jenis domain yang digunakan bagi organisasi selain organisasi yang masuk kedalam kategori domain ac.id, co.id, net.id, go.id, mil.id, sch.id, dst dengan ketentuan dan kebijakan yang telah ditentukan.
4.net.id : Jenis domain yang digunakan bagi organisasi pemegang Izin Penyelenggara jasa telekomunikasi dengan ketentuan dan kebijakan yang telah ditentukan.
5. web.id : Jenis domain yang digunakan bagi personal dan organisasi dengan ketentuan dan kebijakan yang telah ditentukan.
6. sch.id : Jenis domain yang digunakan bagi sekolah dengan ketentuan dan kebijakan yang telah ditentukan.
7. go.id : Jenis domain yang digunakan khusus bagi instansi pemerintah dengan ketentuan dan kebijakan yang telah ditentukan.
8.mil.id : Jenis domain yang digunakan bagi kalangan militer dengan ketentuan dan kebijakan yang telah ditentukan.
9. war.net.id Jenis domain yang digunakan bagi warung internet dengan ketentuan dan kebijakan yang telah ditentukan.

Tugas Konten 01 09 2015

Web Browser

Pengertian :

Web Browser adalah suatu program atau software yang digunakan untuk menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer. Awalnya, web browser berorientasi pada teks dan belum dapat menampilkan gambar. Namun, web browser sekarang tidak hanya menampilkan gambar dan teks saja, tetapi juga memutar file multimedia seperti video dan suara. Web browser juga dapat mengirim dan menerima email, mengelola HTML, sebagai input dan menjadikan halaman web sebagai hasil output yang informative.

Dengan menggunakan web browser, para pengguna internet dapat mengakses berbagai informasi yang terdapat di internet dengan mudah. Beberapa contoh web browser diantaranya Internet Explorer, Mozilla, Firefox, Safari, Opera, dll. Hal yang perlu diketahui dalam pencarian suatu informasi adalah pemahaman tentang struktur Ø Fungsi Web Browser :

Fungsi Web Browser adalah untuk menampilkan dan melakukan interaksi dengan dukumen-dokumen yang disediakan oleh web server.

Ø Contoh Web Browser :

- Mozilla Firefox – link, yaitu dibuat oleh mozilla corporation, firefox adalah salah satu web browser open source yang dibangun dengan Gecko layout engine. Tak hanya handal firefox juga didukung oleh sejumlah Add-ons yang dapat diinstall terpisah yang memungkinkan pengguna melakukan sesuai dengan kegunaan Add-ons tersebut.

- Internet Exporer – link, yaitu Web browser besutan Microsoft Corporation biasanya dikenal dengan nama pendek IE, sejak 1995 IE mulai di masukan sebagai default sotware pada saat instalasi Sistem Operasi Windows, sejak tulisan ini dibuat IE belum lama ini meluncurkan versi IE8.

- Safari – link, yaitu Dibuat oleh Apple Inc, perusahaan yang juga memproduksi komputer Macintosh, iPod, dan juga iPhone. dibangun dengan browser engine WebKit, WebKit juga adalah browser engine pertama yang lulus test Acid3.

- Flock – link, yaitu Flock adalab web browser yang dibangun dengan code mozilla frefox yang web browser ini khususkan menyediakan social networking dan Web 2.0. Flock didesain untuk memudahkan aktivitas online pengguna internet mengatur beberapa social networking, web mail, news feeds dan blogs yang mereka miliki. Dengan Mengunakan Flock mereka dapat dengan mudah menjelajah, berbagi, dan menikmati content maupun menjalin hubungan di situs pertemanan yang mereka inginkan.

- Opera – link, yaitu Opera dikembangkan oleh Opera Software company adalah salah satu Web Browser dan juga Internet Suite. Jika firefox punya Add-ons, Opera punya “Opera Widgets”, sebuah aplikasi web kecil yang dijalankan bersamaan dengan Opera yang mempunyai kegunaan tertentu, layaknya Add-ons firefox.

- K-Meleon–link, yaitu K-Meleon salah satu browser gratis dan open source di rilis dibawah Lisensi GNU General Public dan berjalan diplatform Microsoft Windows (Win32) operating systems. Dibangun di atas Gecko layout engine, layout engine yang sama seperti digunakan Mozilla Firefox.

- SeaMonkey–link, yaitu SeaMonkey adalah sebuah proyek komunitas untuk menjadikan SeaMonkey all-in-one internet application suite, alamat web, misalnya http://www.kumpulanistilah.com. Alamat tersebut dapat kita artikan sebagai berikut :

- http, yaitu service transfer web (protocol)

- www, (world wide web), yaitu jaringan situs web terbesar sebagai seperti software suite populer yang sudah dibuat sebelumnya oleh Netscape dan Mozilla, dan proyek SeaMonkey melanjutkan konsep tersebut. Terdiri dari Internet browser, email & newsgroup client, HTML editor, IRC chat and web development tools, SeaMonkey direkomendasikan bagi advanced users, web developers dan corporate users.

- Camino – link, yaitu Camino adalah open source web browser dikembangkan berfokus pada memberikan experience terbaik kepada pengguna Mac OS X. Camino mengkombinasikan visual sederhana, elegan dan menyajikan pengalaman yang mengagumkan yang menjadi filosofi dari Macintosh dengan Gecko layout engine yang powerful.

- Konqueror – link, yaitu Konqueror adalah web browser, file manager, dll. Konqueror menyediakan file viewer yang bisa mengexplore file-file di komputer anda maupun secara remote ke komputer lain. Protokol yang didukung Konqueror :

1. FTP and SFTP/SSH browser

2. SAMBA (Microsoft file-sharing) browser

3. HTTP browser

4. IMAP mail client

5. ISO (cd image) viewer

6. VNC viewerpengelola pengalamatan situs web di internet.

- Kumpulan istilah disebut wilayah (domain), yaitu sebuah nama yang digunakansecara institusi untuk situs webnya.

- Com, merupakan nama terakhir sebuah domain, biasanya menunjukan bidang usaha situs web bersangkutan. Untuk menginstall Konqueror ini anda harus install KDE terlebihdahulu. KDE adalah Desktop Enviroment di keluarga unix, jika anda pengguna windows telebih dahulu install KDE. Masih banyak web browser yang terdapat di internet, kembali kepada anda untuk mengunakan browsing internet sehari-hari dan install Add-ons atau Widgetnya untuk mendapatkan pengalaman berbeda saat berselancar. Web browser tak hanya mempunyai tampilan yang cantik tapi ada juga web browser yang bisa bicara, ikuti ulasannya disini web browser luar biasa yang diciptakan untuk pengguna luar biasa.

Senin, 24 Agustus 2015

Tes Ui Hiperlink Web 2

Latihan Halaman Web 2-a

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

Instagram = www.instagram.com

hasil uji latihan web 1

Latihan Halaman Web 1 Halaman Webku Isi halaman web ada disini.
Nama : Febriana Ayu Astrini
Kelas : XII AK 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

Bullet dan Numbering
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

Kamis, 20 Agustus 2015

Tugas KKPI - CSS

2. CSS

Dalah sebuah dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat. CSS memperkenalkan “template” yang berupa style untuk dibuat dan mengijinkan penulisan kode yang lebih mudah dari halaman-halaman web yang dirancang. CSS mampu menciptakan halaman yang tampak sama pada resolusi layar yang berbeda dari pengunjung berbeda tanpa memerlukan penggunaan tabel seperti pada html klasik. Dengan CSS anda akan lebih mudah dalam melakukan setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS dengan atribut yang diinginkan. Anda tidak perlu repot merubah satu per satu atribut tiap elemen yang ada dalam halaman web jika anda menggunakan style CSS ini.Dengan menggunakan CSS, maka dokumen yang dibuat menggunakan HTML murni akan dapat lebih disingkat dan akan lebih mengefisiensikan waktu yang dibutuhkan. Bayangkan jika kita membuat sebuah situs yang kompleks dengan banyak atribut untuk tiap halaman dalam situs tersebut, maka kita harus menentukan tiap

atribut untuk tiap halaman tersebut satu per satu.

Cara Kerja

Cara kerja CSS sangatlah mudah, karena CSS hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang kita buat. Tiap style memiliki dua buah elemen dasar yaitu “selector” dan “declaration”.
Sebuah selector biasanya adalah tag HTML, sementara declaration adalah satu atau beberapa perintah / nilai dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan tanda kurung kurawal “{ }” , dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma “;” seperti terlihat pada contoh berikut :

< style type="text/css">
.teks {font-family:verdana; color:blue;}
< /style>

Disini terlihat bahwa .teks adalah selector, dan {font-family:verdana; color:blue;} adalah declaration.
Selector-selector dan style dalam CSS akan dimasukkan dalam sebuah tempat yang sama dalam isi dokumen HTML atau dibuat diluar dokumen HTML yang nantinya akan dipanggil untuk menentukan isi tampilan dokumen HTML. Anda hanya menunjuk pada selector-selector dimana akan mengaktifkan sebuah style yang anda inginkan.
Hal yang paling umum dalam memasukkan kode Style CSS dengan menggunakan tag < style type=”text/css”>. Tag < style type=”text/css”> ini selalu tampil dalam bagian < head> dan sebelum < /head> dari dokumen anda seperti terlihat pada contoh berikut :< html>
< head>
< style type="text/css">
... aturan-aturan css ...
< /style>
< /head>
< body>
... Dokumen html yang akan diberikan aturan CSS ...
< /body>
< /html>

Untuk menentukan font dan warna-warna tiap kali anda memulai sebuah cell table, anda dapat menentukan sebuah style dan kemudian anda tinggal menunjuk ke style dalam cell table anda. Bandingkan contoh dari sebuah table berikut yang dibuat menggunakan HTML sederhana :

< html>
< head>belajar css
< /head>
< body>
< table>
< tr>< td bgcolor="red" align="center">
< font face="verdana" color="blue">belajar css1
< /font>< /td>< /tr>
< /table>
< /body>
< /html>

Bandingkan jika dokumen tersebut dibuat dengan menggunakan CSS (dengan menganggap bahwa sebuah selector yang dipanggil “teks” telah ditetapkan yang akan mengatur format teks dokumen html tersebut).

< html>
< head>< title>belajar css< /title>
< style type="text/css">
.teks { background-color:red; color:blue; font-family:verdana;}
< /style>
< /head>
< body>
< table>
< tr>< td class="teks">belajar css1< /td>< /tr>
< /table>
< /body>
< /html>

Penempatan CSS
Menempatkan style CSS dalam dokumen web yang kita buat dalam bahasa html dapat dilakukan dengan beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan kita. Cara penempatan dalam HTML adalah dengan menggunakan beberapa cara, diantaranya adalah menggunakan Inline Style, Internal Style, External style, dan juga teknik Importing dengan Internal Style.

Inline Style
Adalah CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh elemen dalam dokumen web. Contohnya adalah sebagai berikut :

< html>
< head>
< title>belajar css< /title>
< /head>
< body>
< font style="arial; font-family:Arial; font-size: 20px; background-color:yellow">Penerapan Inline Style < /font>
< /body>
< /html>

Dalam script di atas dapat diketahui bahwa style tersebut memiliki nama style arial yang memiliki nilai atau value untuk style tersebut. Adapun nilai style adalah jenis font arial dengan ukuran 20 pixel dan memiliki warna latar kuning.

Internal Style
Pada teknik ini, style CSS diletakkan pada tengah tag antara tagdan. Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. Contoh dari teknik ini terlihat pada contoh berikut :

< html>
< head>
< title>Belajar CSS< /title>
< style type="text/css">
< !-- .teks {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; color: white; background-color: blue;} -->
< /style>
< /head>
< body>
< div class=teks>Penerapan Internal Style

< /body>
< /html>

Maksud dari < !– aturan css –> diatas adalah berguna agar browser yang tidak mendukung CSS tidak menampilkan perintah-perintah CSS, jadi perintah CSS didalam < !– –> akan dianggap sebagai komentar HTML biasa dan tidak akan ditampilkan dalam browser walaupun browser tersebut mendukung CSS.

Import Style
Dengan teknik ini sebuah Style tidak disimpan pada halaman tersebut, namun untuk menghubungkannya dengan halaman web yang kita buat digunakan perintah import yang terdapat pada style CSS. Seperti terlihat pada contoh berikut :

< html>
< head>
< title>Belajar CSS< /title>
< style type="text/css">
< !-- @import url (http://www.nama_situs.com/style.css); -->
< /style>
< /head>
< body>
< div class=teks>Penerapan Import Style< /div>
< /body>
< /html>

Pada teknik diatas, dokumen HTML akan mengambil atau import style CSS untuk dipergunakan dalam dokumen tersebut. Dimana pada contoh diatas dokumen akan mengimport file style dengan nama style yang berekstensi CSS pada alamat url http://www.nama_situs.com dengan menggunakan perintah :
@import url (http://www.nama_situs.com/style.css);

External Style
Dengan menggunakan teknik ini kita dapat memanggil style CSS pada file CSS yang kita inginkan dengan menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan nama yang telah kita tentukan seperti terlihat pada contoh :

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

Dalam contoh diatas kita menghubungkan sebuah dokumen html dengan sebuah style eksternal dengan nama style.css yang telah kita buat sedemikian rupa sehingga style tersebut dihubungkan untuk memformat tampilan dalam dokumen html tersebut.
Dalam mengimport file CSS, kita dapat langsung mengimport beberapa file CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen kita seperti terlihat pada contoh berikut :

< link rel="stylesheet" type="text/css" href="style1.css">
< link rel="stylesheet" type="text/css" href="style2.css">
< link rel="stylesheet" type="text/css" href="style3.css">

Atau kita dapat menggunakan perintah :

< style>
< !-- @import url(style1.css); @import url(style2.css); @import url(style3.css); -->
< /style>

Perbedaan dalam teknik terakhir adalah perintah import tersebut akan mengambil style CSS dengan cara import style dari alamat url yang kita tentukan. Cara ini lebih efisien dikarenakan dokumen yang kita beri perintah import tersebut hanya akan mengimport file css yang pada akhirnya, style CSS tersebut hanya perlu di download sekali saja dalam dokumen style sheet eksternal yang terpisah dengan dokumen HTML asli. Ketika surfing ke dalam situs anda maka CSS akan disembunyikan dalam komputer user sehingga akan memperkecil ukuran file sebuah situs yang kita buat. Jadi jika anda menggunakan cara terakhir ini, maka sebelumnya anda harus membuat sebuah dokumen style CSS eksternal tersebut dengan ekstensi .css dimana dokumen style tersebut berisi aturan yang akan mengatur tampilan dokumen web yang dibuat

STRUKTUR CSS
Dalam pembuatan dokumen web menggunakan style CSS di kenal adanya aturan atau struktur penulisan baku agar style CSS yang kita buat tersebut dapat ditampilkan dengan baik dalam dokumen web yang dibuat. Contoh :

< html>
< head>
< title>HTML Selector< /title>
< style type=”text/CSS”>
< !– p {font-family: verdana;} –>
< /style>
< /head>
< body>
< p> penggunaan HTML Selector dalam CSS < /p>
< /body>
< /html>

Pada contoh diatas dipergunakan tag HTML < p> sebagai selector dan setiap huruf yang berada diantara tag < p>
dan < /p> akan memiliki jenis font verdana sesuai dengan value atau nilai yang diberikan dalam property style tersebut.

Selector
Jika dalam HTML kita mengenal adanya tag-tag yang menyusun sebuah dokumen HTML, maka dalam CSS kita juga mengenalnya dengan sebutan selector. Selector adalah nama-nama yang diberikan untuk style-style yang berbeda baik itu style internal maupun eksternal. Dalam style tujuan, anda harus menentukan bagaimana tiap selector seharusnya bekerja yang dinamakan properties di dalam tanda { } (curly bracket) yang dapat memiliki nilai berupa font, warna dll, kemudian dalam body di halaman web anda, anda arahkan ke selector-selector ini untuk mengaktifkan style tersebut.
Karena CSS memiliki aturan tersendiri dalam penulisan sintaknya dalam CSS, dan penulisan sintak tersebut terbagi ke dalam tiga bagian yaitu : Selector, Property, dan Value. Sebagai penjelas coba perhatikan contoh berikut :Selector {property: value;}

Selector dalam CSS adalah elemen yang akan didefinisikan dalam style CSS, sedangkan elemen ini dapat berupa tag HTML maupun Class. Sedangkan Property dalam CSS adalah atribut yang berfungsi untuk mendefinisikan Selector, sedangkan Value adalah nilai atau harga dari sebuah Property. Sebagai contoh :

< html>
< head>
< style type="text/css">
B.besar {
color:red; font-size:15px; font-family:arial;
}
< /style>
< /head>
< body>
< b>ini adalah huruf besar dengan html

< b class="besar">ini adalah huruf besar dengan CSS
< /body>
< /html>

Class Selector
Digunakan untuk menentukan style yang dapat digunakan tanpa menentukan lagi tag HTML sederhana. Penulisan class adalah dengan menggunakan tanda titik atau dot. Selain aturan penulisan diatas, CSS juga mengenal Class Selector dimana dalam elemen yang sama kita dapat menerapkan lebih dari satu style. Adapun contohnya adalah sebagai berikut

< html>
< head>
< title>Class Selector< /title>
< style type="text/CSS">
< !-- f.times {font-family: times;} f.verdana {font-family: verdana;} .courier {font-family: "courier";} -->
/style>
< /head>
< body>
< f class="times"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf times new roman

Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf verdana< /f>< br />
< f class="courier"> Ini adalah Contoh penggunaan class sebagai selector, setiap huruf memiliki huruf courier< /f>
< /body>
< /html>

Pada contoh diatas, tag f memiliki 2 class yang berbeda untuk memformat paragraf yaitu .times dan .verdana dikarenakan tag class .times dan .verdana adalah class yang dimiliki oleh tag f maka ia hanya dapat dikenakan pada elemen f saja. Lain halnya dengan class .courier, ia dapat dipergunakan oleh semua elemen tanpa harus menggunakan tag f di awal dan akhir elemen yang akan di format.
Nama untuk tiap class dapat berbeda-beda, Anda dibebaskan menentukan nama class sendiri, namun ada baiknya memilih nama dari tiap class yang mengacu kepada fungsi dari class tersebut. Hal ini ditujukan agar anda tidak bingung mempergunakan class pada saat menggabungkannya ke dalam tag HTML. Contoh :< p class="blog"> Ini teks untuk paragraph pada blog < /p>
< p class="menukiri"> Ini teks untuk paragraph pada menu kiri < /p>

Id Selector
ID selector digunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah ID yang unik. Berbeda dengan Class Selector yang dapat kita pergunakan pada berbagai tag, ID Selector ini memiliki sifat-sifat yang berbeda. ID selector hanya dapat dipergunakan pada satu elemen saja pada setiap halaman web yang kita buat. ID Selector menggunakan tag # (kres) sebelum menggunakan nama Selector. Adapun contohnya adalah sebagai berikut :
#helvetica {font-family: Helvetica;}

Dalam penerapannya pada tag HTML, Anda dapat menggunakan aribut < span> ataupun < div>, seperti terlihat pada contoh berikut :< span id="helvetica">Ini adalah huruf helvetica< /span>
< div id=”helvetica”>Ini adalah huruf helvetica< /div>

Adapun penulisan dalam dokumen dapat dituliskan seperti pada contoh berikut :< html>
< head>
< title>ID Selector< /title>
< style type="text/CSS">
< !-- #times {font-family: times;} #verdana {font-family: verdana;} #courier {font-family: "courier";} -->
< /style>
< /head>
< body>
< div id="times"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf times new roman< /div>< br>
< div id="verdana"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf verdana< /div>< br>
< div id="courier"> Ini adalah Contoh penggunaan id sebagai selector, setiap huruf memiliki huruf courier< /div>
< /body>
< /html>

Selain yang dijelaskan diatas, dalam CSS kita juga mengenal adanya Pewarisan (inheritance), Pseudo Classes, Pseudo-Element, dan Selectors-Kontekstual (Contextual Selector).

Pewarisan / Inheritance
Yang dimaksud pewarisan atau inheritance disini adalah satu kondisi dimana bagian-bagian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau dibuat menurut aturan CSS yang menutupinya. Setiap aturan yang tidak ada dalam format huruf yang dibuat dengan HTML atau ingin menggantikannya dengan aturan CSS, tetap akan mempengaruhi huruf yang ada didalam kurungan CSS.

< html>
< head>< title>inheritance< /title>
< style type="text/css">
B {background-color : green; color : white;}
< /style>
< /head>
< body>
< B>belajar membuat web dengan < fontsize="+1">< em>CSS< /em>< /font> sangatlah mudah. < br>
hanya dengan program notepad pun jadi.< /B>
< /body>
< /html>

Jika dilihat dari contoh diatas dapat dilihat bahwa tag < B> dalam aturan CSS akan mendefinisikan warna font dan warna latar dari font sedangkan tag < B> dalam HTML bisa diartikan sebagai bold atau format untuk menebalkan huruf. Sedangkan tag < font> yang berada dalam lingkup CSS dapat menerapkan aturan HTML dasar akan tetapi tetap terpengaruh dengan kondisi warna dan tebalnya huruf dari aturan CSS yang melingkupinya. Cara ini dapat anda gunakan untuk dikombinasikan lebih lanjut dengan tag-tag lain agar sesuai dengan keperluan dalam dokumen anda.

Pseudo Classess
Pseudo classes dalam CSS dibuat tebal dalam selector-selector untuk menentukan sebuah statemen atau relasi selector, dan penulisannya hanya dipisahkan dengan sebuah tanda titik dua : diantara selector dan pseudo class. Adapun contoh format penulisannya adalah :selector:pseudo class { property: value; }

Banyak format CSS yang tidak didukung oleh kebanyakan browser, namun terdapat empat pseudo classes yang dapat digunakan secara aman ketika diaplikasikan kedalam hyperlink atau link, yaitu :

link : untuk tampilan sebuah link yang belum dikunjungi.
visited : untuk tampilan sebuah link ke halaman yang telah dikunjungi.
active : untuk tampilan sebuah link yang sedang aktif (ketika di klik).
hover : untuk tampilan sebuah link yang hover (ketika cursor melintas diatasnya).

Contoh penggunaan :
a.budi:link {color:blue;}
a.budi:visited {color:purple;}
a.budi:active {color:red;}
a.budi:hover {text-decoration:none; color:blue; background-color:yellow;}

Anda dapat menggunakan hover pseudo class dengan elemen-elemen lain selain link.

Pseudo Element
Pseudo element dalam CSS ditempatkan dalam sebuah selector sama seperti pada pseudo classes, penulisannya akan seperti contoh berikut :selector:pseudoelement {property: nilai;}

Contoh setting huruf dan baris pertama :
Pseudo element pada huruf pertama di aplikasikan elemen dari huruf pertama dan baris pertama pada atas baris sebuah elemen. Anda dapat membuat huruf besar dan huruf tebal baris pertama pada paragraf dengan menggunakan perintah berikut :p:first-letter {font-size:5px; float:left;}
p:first-line {font-weight:bold;}

Before dan Ater
Pseudo element before dan after digunakan dengan property content untuk menempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. Nilai dari property content ini dapat berupa open-quote, close-quote, no-open-quote, no-close-quote, berbagai string yang disertakan dalam tanda kutip atau berbagai image gambar menggunakan url(nama image) seperti contoh berikut :blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
li:before {content: "POW: "}
p:before {content: url(images/gambar.jpg)}

Selector Kontekstual
Selektor Kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan kondisional dimana deklarasi dalam Style-Sheet CSS yang ada akan berpengaruh jika menemui kondisi atau keadaan tertentu. Contoh dari selector kontekstual adalah :

< html>
< head>
< title>selector kontekstual < /title>
< style type="text/css">
b em {font-family: verdana; background: blue; color: white; }
< /style>
< /head>
< body>
< b>
belajar membuat web dengan < em>CSS< /em>sangatlah mudah < br>
< /b>
< em>hanya dengan program notepad pun jadi< /em>
< /body>
< /html>

Dalam contoh diatas dapat dilihat bahwa dokumen web tersebut akan menerapkan style CSS tersebut pada dokumen yang berada dalam tag < em> (font verdana, warna latar biru dan font berwarna putih) dimana tag < em> tersebut berada di dalam tag < b> dan (bold/tebal), sedangkan tag < em> yang berada di luar tag < b> dan tag < /b> tidak akan terpengaruh dengan setting style tersebut atau hanya memiliki nilai < em> biasa atau huruf miring.

Shorthand CSS
Spesifikasi dalam CSS, dimana anda harus mengetikkkan aturan-aturan CSS ke dalam style kadang membuat kita merasa jemu jika harus menuliskan seluruh aturan-aturan yang panjang tersebut. Teknik seperti ini biasa disebut dengan Longhand Notation dimana seluruh aturan harus diketikkan tanpa adanya penyingkatan kata seperti ketika kita menulis sms ke teman kita.
Namun jika anda menggunakan teknik shorthand CSS dimana dengan menggunakan teknik ini memungkinkan anda untuk membuat berbagai style menggunakan sintaks yang lebih singkat yang dikenal dengan shorthand CSS atau Shorthand Notation. Shorthand CSS memungkinkan anda untuk menentukan nilai dari beberapa property sekaligus dengan menggunakan sebuah property tag, contoh adalah pada penggunaan property font yang memungkinkan anda untuk menentukan property font-style, font-variant, font-weight, font-size, line-height, dan font-family dalam sebuah baris sintak. Contoh :< html>
< title>menggunakan shorthand CSS< /title>
< head>
< style>
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
< /style>
< /head>
< body>
< h1>huruf ini akan tebal dengan jenis huruf arial sebesar 16 point < /h1>
< /body>
< /html>

Jika ditulis dalam shorthand CSS, tag diatas akan terlihat sama seperti :
H1 {font: bold 16pt/18pt Arial}

Sebagai perbandingan adalah pada tag H1 dibawah ini yang menggunakan sintak longhand CSS (Catatan bahwa property font-variant, font-stretch, font-size-adjust, dan font-style telah dibuat kedalam nilai default).

Dengan menggunakan shorthand CSS ini memungkinkan anda untuk menempatkan hanya beberapa nilai saja dari property yang kita inginkan dalam sebuah style. Penempatan property tersebut dalam dokumen web diwakili oleh nilai yang dipisahkan dengan spasi.
Sebagai contoh dalam menyingkat penulisan pembuatan layout seperti margin, padding dan border-width dengan Shorthand CSS kita dapat menjadikan satu ke dalam margin-top-width, margin-right-width, margin-bottom-width dan lain sebagainya dalam susunan property seperti top, right, bottom dan left. Seperti dalam contoh berikut :p {border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px; }

Dapat dibuat menjadi lebih singkat dengan mengunakan shorthand notation sehingga akan menjadi :
p {border-width: 1px 5px 10px 20px; color: red; }

Kemudian untuk property border-width, border-color dan border-style dapat juga dijadikan satu menjadi :p {border: 1px red solid;}

Cara ini dapat juga di aplikasikan untuk border-top, border-right dan sebagainya dengan hanya menetapkan dua nilai (seperti margin: 1em 10em;), dimana nilai pertama akan menjadi nilai untuk posisi atas dan posisi bawah, kemudian nilai kedua akan menjadi nilai dari posisi kiri dan kanan. Property yang berhubungan dengan font juga dapat dijadikan satu dengan mengunakan property font seperti dalam contoh berikut ini dimana nilai ‘/1.5′ adalah mengacu pada nilai untuk line-height :p {font: italic bold 1em/1.5 courier;}

Jika diterapkan dalam dokumen HTML maka akan menjadi :< html>
< title>menggunakan shorthand CSS< /title>
< head>
< style>
body {border: 1px red solid;}
p {font: italic bold 1em/1.5 courier;}
H1 {font: bold 16pt/18pt Arial}
< /style>
< /head>
< body>
< p>huruf ini akan tebal dan miring dengan line height 1,5< /p>
< h1>huruf ini akan tebal dengan jenis huruf arial sebesar 16 point < /h1>
< /body>
< /html>

Ketika ditulis menggunakan shorthand notation, nilai lain akan diabaikan secara otomatis dan menetapkan nilai default untuk nilai yang diabaikan tersebut. Jika anda memiliki style-style yang ditentukan dalam lebih dari satu lokasi sebagai contoh adalah style CSS yang diikutkan dalam halaman HTML dan style yang diimport dari external style sheet menggunakan sintaks CSS shorthand dan longhand. Sebaiknya anda berhati-hati jika anda mengabaikan property tersebut karena jika terdapat aturan CSS yang berlawanan maka akan dapat mengakibatkan adanya property yang bertumbuk sehingga akan merusak tampilan yang dibuat.