membuat Marquee Change text .between marquee tags
Alternate marquee behavior Up marquee direction Down marquee direction <<< opposite Direction Marquees>>>

TUGAS KONTEN ISP 1/9/2015

Jaringan internet merupakan jaringan komputer global, dengan adanya jaringan internet ini semua informasi yang kita butuhkan bisa kita dapatkan dengan sangat cepat dan dengan biaya yang murah. Untuk mengakses jaringan internet ini kita semua membutuhkan koneksi internet, dimana koneksi internet ini bisa kita dapatkan dengan cara berlangganan pada ISP. Apa itu pengertian ISP? Fungsi ISP untuk apa? dan contoh-contoh ISP yang ada di Indonesia apa saja? Insya Allah Blog Berbagi Informasi dan Tips Terbaru ini akan membahasnya secara tuntas pada kesempatan posting kali ini.

Pengertian ISP

ISP merupakan kependekan dari Internet Service Provider yaitu sebuah perusahaan atau badan usaha yang menyediakan layanan jasa sambungan internet dan jasa lainnya yang berhubungan. ISP memiliki infrastruktur telekomunikasi yang terkoneksi ke internet dimana ISP nantinya akan membagi kapasitas koneksi internet yang dimilikinya kepada para pelanggan yang membutuhkan jasa koneksi internet. Itulah pengertian ISP yang paling benar. Biasanya sistem langganan yang diterapkan oleh ISP adalah sistem langganan tiap bulan meskipun saat ini banyak sekali provider telekomunikasi yang menerapkan sistem berlangganan dengan sistem berbasis quota.

Berdasarkan pengertian ISP diatas maka keberadaan sebuah ISP memang sangat dibutuhkan saat ini, tentunya kehandalan sebuah ISP nantinya akan mempengaruhi kecepatan koneksi internetyang kita miliki. Oleh karena itu sebelum anda memilih berlangganan dengan ISP tertentu ada beberapa hal yang harus anda perhatikan yaitu :

1. Kecepatan transfer data
Sesuai dengan pengertian ISP diatas, jika anda akan berlangganan layanan ISP maka anda harus mengetahui berapa kecepatan transfer data maksimal yang ditawarkan oleh ISP tersebut. Semakin cepat transfer data yang ditawarkan menunjukkan ISP tersebut semakin handal

2. Jenis modem yang digunakan
Jenis modem yang digunakan oleh pihak ISP untuk sambungan internet pelanggannya juga menunjukkan kehandalan dari ISP tersebut, pilihlah ISP yang menawarkan modem digital untuk sambungan internet dengan menggunakan kabel serta modem yang sudah support teknologi 3G untuk sambungan internet menggunakan wireless.

3. Rasio jumlah sambungan internet ke pelanggan
Perhatikan pula rasio jumlah sambungan dibagi jumlah pelanggannya, untuk shared connection idealnya 1 sambungan maksimal untuk 10 pelanggan untuk menghindari koneksi internet yang lambat.

4. Fitur tambahan
ISP biasanya tidak hanya menawarkan layanan jasa sambuangan internet saja, tetapi juga menawarkan fitur-fitur tambahan sebagai nilai plus dari ISP tersebut. Anda harus jeli mnemperhatikan fitur yang ditawarkan semakin banyak fitur yang ditawarkan menunjukkan ISP tersebut semakin handal
Pengertian ISP diatas semoga saja bisa menambah wawasan anda tentang ISP yang merupakan penyedia jasa layanan sambungan internet, berikut ini adalah contoh-contoh ISP yang ada di Indonesia.

Contoh ISP

1. Telkom Speedy
Telkom speedy merupakan ISP produk dari PT Telkom Indonesia, dengan harga yang cocok di kantong orang berpenghasilan menengah kebawah Telkom Speedy menawarkan koneksi internet yang stabil, info lebih lanjut bisa diakses di http://telkomspeedy.com

2. Astinet
Astinet juga merupakan produk dari PT Telkom Indonesia yang menawarkan jasa sambungan internet untuk penggunaan skala besar. Astinet sendiri merupakan kependekan dari Access Service Dedicated To Internet Info lebih lanjut tentang Astinet bisa anda akses di http://telkomspeedy.com/telkomnet-astinet

3. IM2
IM2 merupakan layanan sambungan internet milik PT Indosat, selain itu IM2 juga melayani jasa hosting dan sewa domain, untuk lebih lengkapnya anda bisa mengakases http://www.indosatm2.com/

4. Centrin
Centrin merupakan ISP milik PT Centrin Online, menawarkan layanan jasa koneksi internet dengan infrastruktur yang sangat canggih, anda bisa membaca lebih lengkap di http://www.centrin.net.id

5. Provider Seluler lainnya
Saat ini hamper semua provider seluler ternama sudah menawarkan jasa layanan internet atau ISP, biasanya berbasis quota dan bisa diaktifkan dengan paket-paket tertentu, ISP jenis ini merupakan pilihan cocok bagi anda yang hanya membutuhkan koneksi internet secara isidental saja.

Semoga saja pembahasan pengertian ISP dan contohnya diatas bisa bermanfaat bagi anda semua, jangan lupa untuk berkunjung ke blog tercinta ini lagi di lain kesempatan yang anda miliki.

TUGAS KONTEN DOMAIN 1/9/2015

PENGERTIAN DAN CONTOH DOMAIN

Pengertian istilah Nama domain
Nama domain (domain name) adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet.
Nama Domain berfungsi mempermudah pengguna di internet untuk melakukan akses ke server dan mengingat server yang dikunjungi dibandingan harus mengenal deretan nomor atau yang dikenal IP address. Nama domain juga di kenal sebagai sebuah kesatuan dari sebuah situs web.

www.bungurnews.blogspot.com
^                   ^                ^
|             |               |
|                     |               |__________ Domain
|                   |__________________   Nama Domain
|__________________________   Subdomain

Domain :Pengertian : daerah; daerah kekuasaan; wilayah; kawasan
Dalam dunia internet dapat dikatakan sebagai pengelompokan/pembagian dari penamaan untuk masing-masing arti atau tujuan, misalnya untuk komersial, organsisasi, sekolah, dll

Domain Level tinggi atau GTLD (Generic Top Level Domain)
Domain ini sebenarnya milik Amerika, namun karena sering digunakan terlihat seperti Domain standard untuk alamat Internet.
Sebagian besar pengguna Internet lebih menyukai penggunaan Domain Level Tinggi ini. Setiap orang boleh memiliki Domain ini tanpa perlu persyaratan yang rumit kecuali domain edu,mil,travel
Contoh Domain Level tinggi /GTLD :
1. .Com : di gunakan untuk kepentingan komersial atau perusahaan.
2. .Net : di gunakan untuk kepentingan network infrastruktur.
3. .Org : di gunakan untuk kepentingan organisasi.
4. .Info : di gunakan untuk kepentingan informasional website.
5. .Name : digunakan untuk kepentingan keluarga atau personal.
6. .Edu : digunakan untuk kepentingan website pendidikan, terbatas hanya utk pendidikan.
7. .Mil : di gunakan untuk kepentingan website angkata bersenjata amerika, terbatas hanya utk Militer.
8. .biz : di gunakan untuk kepentingan Bisnis.
9. .tv : di gunakan untuk Entertainment seperti Televisi, Radio, majalah.
10. .travel : di gunakan untuk Bisnis Pariwisata.
11. .xxx : di gunakan untuk Pornografi (masih di ajukan).

ccTLD’s (Country Coded Top Level Domains)
Domain yang disediakan utk masing masing negara seperti :
Indonesia menggunakan .id
Singapura menggunakan .sg
Malaysia menggunakan .my

Untuk Indonesia terbagi menjadi beberapa sub domain seperti :
.or.id : Untuk Organisasi
.co.id : Untuk Komersial
.go.id : Untuk Pemerintahan
.ac.id : Pendidikan Tinggi
.sch.id: untuk Sekolah
.net.id: Internet Provider
.web.id: digunakan untuk umum

DOMAIN KOMERSIAL

TUGAS KONTEN 01-09-2015

Browser atau Penjelajah Web sudah tidak asing lagi ditelinga kita, setiap hari kita selalu berhubungan dengan browser. Aktifitas kerja ataupun hiburan kini kebanyakan dijalankan di browser dengan memanfaatkan jaringan internet. Secara singkat browser adalah alat untuk menjelajahi atau membuka konten-konten yang bertebaran di dunia maya.

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 informatif.

Browser pertama kali digunakan pada tahun 1993 yang diberi nama browser Mosaic. Mosaic adalah nama browser yang diciptakan oleh tim dari National Center for Supercomputing Applications at the University of illinois at Urbana-Champaign (NCSA-UIUC) tidak lama setelah ditemukannya media baru untuk penyebaran informasi yaitu WWW (World Wide Web). Browser Mosaic pada masa awal lahirnya sangat digandrungi oleh para penjelajah internet. Hal itu terjadi karena Browser Mosaic adalah alat penjelajah internet pertama yang memiliki tampilan grafis dan terlihat lebih menarik. Kepopuleran Mosaic ternyata tidak bertahan lama, pada tahun 1994 browser Mosaic mulai ditinggalkan dengan hadirnya Netscape Navigator. Setelah itu bermunculan-lah browser-browser baru dengan kemampuan yang terus ditingkatkan hingga sampai saat ini.

Berikut ini adalah contoh dari web browser :

1. Mozilla Firefox

Mozilla Firefox , adalah sebuah aplikasi untuk browsing yang sangat populer, 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. Jika anda memerlukan aplikasi browsing yang ngacir dan teruji keamanannya saat travelling di internet, Software ini wajib di coba dan dijadikan aplikasi browsing utama.
Sottware ini mampu melindungi PC / Laptop kita dari virus, worm, trojan horse dan spyware. Bukan menghapus, jangan salah arti. Maksudnya, jika anda tanpa sengaja mengakses situs yang berbahaya, Kita akan menerima pesan peringatan bahwa situs tersebut berbahaya untuk dibuka. Warning gitu.
Situs : http://www.mozilla.com/firefox/

2. Google Chrome

Google Chrome adalah browser yang menggabungkan desain minimalis dengan teknologi canggih untuk membuka web lebih cepat, aman dan lebih mudah. Memiliki satu kotak untuk semua dalam arti apabila anda mengetik di address bar maka anda akan mendapatkan saran-saran untuk pencarian, semua halaman web, thumbnail dari situs utama Anda dan Akses halaman favorit dengan kecepatan langsung.

Google didirikan oleh Larry Page dan Sergey Brin ketika mereka masih mahasiswa di Universitas Stanford dan perusahaan ini merupakan perusahaan saham pribadi pada 4 September 1998 Penawaran umum perdananya dimulai pada tanggal 19 Agustus 2004, mengumpulkan dana $1,67 miliar, menjadikannya bernilai $23 miliar.
Situs : http://www.google.com/chrome

3. Opera

Opera mungkin banyak juga yang sudah mengenal bagi para pencinta internet, Opera web browser yang memiliki 2 versi yaitu mobile dan dekstop.Opera adalah penjelajah web dan paket perangkat lunak Internet antar-platform. Opera terdiri dari kumpulan perangkat lunak untuk Internet seperti penjelajah web, serta perangkat lunak untuk membaca dan mengirim surat elektronik.
Situs : http://www.apera.com/download

4. Internet Explorer

Internet Explorer merupakan sebuah browser keluaran Microsoft yang sangat terkenal dan banyak digunakan oleh orang-orang di seluruh dunia untuk menmgakses internet, karena software ini didukung oleh teknologi baru untuk membuat tampilan web lebih dinamis dan lebih hidup serta kompetibel.

Internet Explorer terdapat kumpulan aplikasi yang saling terintegrasi dan terdapat berbagai macam fasilitas khusus untuk mendukung pemakaian internet, yaitu diantaranya adalah I Net, I News, Net Meeting serta Chomic Chat.
Situs : http://windows.microsoft.com/en-us/internet-explorer/browser-ie

5. Safari

Safari adalah aplikasi browser dari Apple Inc. Awalnya aplikasi ini hanya dapat digunakan pada Mac OS X saja. Namun pada pertengahan tahun 2007 Apple meluncurkan aplikasi browser Safari untuk sistem operasi Windows. Aplikasi Safari berbeda dengan aplikasi browser lainnya, karena menitik beratkan pada kemudahan dan kenyamanan penggunanya. Pada safari kita akan temui tampilan yang jauh berbeda, dimana elemen desain yang sangat canggih sehingga membuat browsing kita lebih menyenangkan.

SnapBack. Fasilitas ini berfungsi untuk kembali ke titik awal aktivitas browsing setelah berkunjung ke banyak tempat (situs website). Progress Bar, dengan fasilitas ini kita bisa tahu seberapa cepat halaman website tampil di layar.Untuk keamanan,fasilitasnya masih standar.Untuk kecepatan akses, boleh dibilang Safari adalah jagoannya. Karena Safari memang dirancang sebagai browser yang ringan dan cepat.

Situs : http://www.apple.com/safari/download/

6. Maxthon

Maxthon yang sebelumnya dikenal sebagai MyIE2 adalah browser web gratis untuk Microsoft Windows. Maxthon telah mengembangkan basis pengguna yang berkembang sejak rilis awal tahun 2003 khususnya di Cina, sehingga pada tahun 2006, Maxthon 2.0 mendapatkan dukungan dari beberapa sponsor. Dan pada bulan Januari 2006, pengembang Maxthon berkerjasama dengan pihak Microsof.

Maxthon awalnya diciptakan oleh Changyou, programmer Cina, yang ingin menyesuaikan dengan browser Internet Explorer. Maxthon merupakan browser yang cocok bagi yang sering menjelajah dengan mesin pencari, karena dalam browser ini terdapat fasilitas mesin pencari seperti Bing, Yahoo, Google, Amazon, dsb. Anda dapat mengakses dan mendapatkan informasi yang anda cari dengan browser ini.

Situs : http://www.maxthon.com/

7. Flock

Flock adalah sebuah Browser yang berguna untuk menjadikan pusat kegiatan blogging kita hanya dengan menggunakan browser yang satu ini, bagaimana tidak jika kita telah memiliki banyak account blogging, jejaring sosial, webmail dan media sharing maka bisa jadi browser ini bisa membantu kepusingan kita dalam mengelola semua itu ,karena semua itu bisa dilakukan di satu tempat saja dengan flock.

Browser flock ini telah diluncurkan pada pertengahan Juni tahun ini dengan menggunakan basis code Firefox 3. Flock ini adalah sebuah browser yang bisa dikatakan sangat memanjakan para bloger. Betapa tidak, menggunakan Flock, kita bisa melakukan penambahan posting di blog yang kita miliki dengan mudah.

Secara keseluruhan, dibandingkan dengan browser lainnya, fitur blogging sangat ditonjolkan di browser ini. Utilitas yang dibutuhkan oleh bloger untuk menuliskan ide-idenya bisa langsung difasilitasi, misalnya fitur pengelolaan blog. Dengan fitur ini, kita bisa langsung melakukan posting ke web-blog yang kita miliki, tanpa harus melakukan login lagi.

Situs : http://www.flock.com/

8. Avant Browser

Avant Browser memiliki fitur yang merupakan peningkatan dari apa yang dimiliki oleh Internet Explorer. Avant Browser adalah Browser yang cepat, stabil, user-friendly, dan merupakan multiwindow browser. Memang engine yang dipakai adalah egine Internet Explorer. Akan tetapi Avant Browser

Senin, 24 Agustus 2015

Mengubah Font

Mengubah Font Ini font Arial warna hitam size =1
Ini font Verdana warna biru size=‘2’
Ini font Tahoma warna aqua size=3
Ini font Impact warna kuning size=4
Ini font Times New Roman warna hijau size=5
Mengubah Font Ini font COURIER warna hitam size =1
Ini font GEORGIA warna biru size=‘2’
Ini font HELVETICA warna aqua size=3
Ini font TREBUCHET warna kuning size=4
Ini font VERDANA warna hijau size=5

mengedit paragraf HTML

Membuat paragraf

Membuat paragraf memakai tag <p>

Paragraf rata kiri. Kalimat ini dituliskan untuk membuktikan bahwa tag p align="left" untuk rata kiri.

Paragraf rata tengah. Kalimat ini dituliskan untuk membuktikan bahwa tag p align="center" untuk rata tengah.

Paragraf rata kanan. Kalimat ini dituliskan untuk membuktikan bahwa tag p align="right" untuk rata kanan.

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.

Latihan halam 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 Latiann web 1

Halaman Webku Isi halaman web ada disini.
Nama : ............
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, 06 Agustus 2015

HTML : adalah Bahasa Pemrograman Standar yang digunakan untuk sebuah halaman web, menampilkan berbagai informasi didalam webdan merupakan singkatan dari HyperText Markup Language.
PERINTAH :

Home » Without category » perintah-perintah HTML

perintah-perintah HTML

PERINTAH-PERINTAH HTML

PERINTAH-PERINTAH HTML Sumber Modul MR. HANDRI SUNJAYA

TEKS

Berikut ini adalah perintah-perintah HTML untuk penanganan TEKS.

<H1> Sampai <H6>

fungsi : untuk membuat (memilih) ukuran teks.

Sintak : <H1> </H1>

Contoh

<HTML>

<HEAD><TITLE>Contoh Heading</TITLE></HEAD>

<BODY>

<H1> Teks dengan Heading 1</H1>

<H2> Teks dengan Heading 2</H2>

<H3> Teks dengan Heading 3</H3>

<H4> Teks dengan Heading 4</H4>

<H5> Teks dengan Heading 5</H5>

<H6> Teks dengan Heading 6</H6>

</BODY>

</HTML>

<HR>

Perintah ini digunakan untuk membuat garis horizontal penuh layar

Sintaks : <HR>

Contoh :

<HTML>

<BODY>

<HR> Kalimat ini diapit oleh 2 buah garis<HR>

</BODY>

</HTML>

<I>

Perintah ini digunakan untuk membuat teks miring.

Sintaks : <I> </I>

Contoh

<HTML>

<BODY>

<I> Selamat Datang Ke Websiteku</I>

</BODY>

</HTML>

<B>

Perintah ini digunakan untuk membuat teks tebal.

Sintaks : <B> </B>

Contoh

<HTML>

<BODY>

<B> Selamat Datang Ke Websiteku</B>

</BODY>

</HTML>

<U>

Perintah ini digunakan untuk membuat teks bergaris bawah.

Sintaks : <U> </U>

<HTML>

<BODY>

<U> Selamat Datang Ke Websiteku</U>

<U><B> Selamat Datang Ke Websiteku</U></B>

</BODY>

</HTML>

<CENTER>

Perintah ini untuk membuat teks ke tengah layar.

Sintaks : <CENTER> </CENTER>

Contoh :

<HTML>

<BODY>

<H1><CENTER> Selamat Datang Ke Websiteku</CENTER></H1>

</BODY>

</HTML>

ALIGN

Digunakan untuk membuat teks rata kiri, tengah, kanan atau rata kanan dan kiri.

Sintaks :

<P ALIGN=right> → Rata Kanan

<P ALIGN=left> → Rata Kiri

<P ALIGN=center> → Rata Tengah

<P ALIGN=justify> → Rata Kanan dan Kiri

atau

Contoh pemakaian :

<H2 ALIGN=center>SELAMAT DATANG </H2>

<BR> (Line Break)

Perintah ini digunakan untuk memasukan fungsi Enter. Sebagai contoh, jika perintah <BR> diberikan di akhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya.

<!–

Perintah untuk membuat KOMENTAR. Semua teks atau perintah yang diapit perintah ini tidak akan dijalankan. Ini hanya komentar untuk program.

Sintaks : <!– –>

Contoh : <!—Ini adalah contoh komentar –>

<SMALL>

Perintah untuk membuat teks berukuran kecil.

<BIG>

Perintah untuk membuat teks berukuran besar

<P> (Paragraph)

Perintah ini digunakan untuk memisahkan paragraph yang satu dengan paragraph yang lain.

Sintaks : <P> </P>

<DD>

Perintah ini digunakan untuk membuat teks atau sebuah paragraph agak masuk ke dalam.

Sintaks : <DD>

BASEFONT

Perintah ini digunakan untuk mengubah ukuran font.

Contoh :

<HTML>

<BODY>

Teks dengan ukuran 6 pt<BR>

<B>Teks dengan ukuran 6 pt dan tebal</B>

<BR>

Teks dengan ukuran 10 pt

</BODY>

</HTML>

FONT

Juga untuk mengubah ukuran font, tetapi angka yang terdapat dalam SIZE yang merupkan ukuran font harus diberi tanda kutip.

FACE

Untuk mengubah jenis font

Contoh :

<HTML>

</HEAD>

<BODY>

Teks dengan jenis font Times New Roman.

Teks dengan jenis font Arial.

</BODY>

</HTML>

<SUP>

Perintah ini digunakan untuk membuat cetak naik suatu teks.

Contoh :

<HTML>

</HEAD>

<BODY>

Kami adalah yang pertama : 1<SUP>st</SUP> in the world.

</BODY>

</HTML>

<SUB>

Perintah ini digunakan untuk membuat cetak turun suatu teks.

Contoh :

<HTML>

<BODY>

H<SUB>2</SUB>O (disebut air(

</BODY>

</HTML>

<UL>

Perintah <UL> (Unordered List) adalah perintah untuk membuat daftar (list).

<LI>

Perintah <LI> (List Item) adalah perintah untuk membuat daftar (list)

CATATAN : Perintah <LI> harus berada dalam perintah OL, UL, DIR, MENU.

Contoh :

<HTML>

</HEAD>

<BODY>

<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>

</BODY>

</HTML>

BODY

<BODY … </BODY>

Perintah BODY adalah perintah untuk membuat warna latar belakang pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan atribut yang diberikan. Sedangkan BODY memiliki 8 atribut, antara lain :

TEXT=warna	Untuk menentukan warna teks.
BGCOLOR=warna	Untuk mengubah warna dasar layar (halaman).
BACKGROUND=URL	Untuk mengatur warna latar belakang gambar.
LINK=warna	Untuk menentukan warna link.
ALINK=warna	Untuk menentukan warna link yang sedang dipilih.
VLINK=warna	Untuk menentukan warna link yang sudah dikunjungi.
ONLOAD=string	Perintah yang akan dilaksanakan ketika halaman Website selesai di Download
ONUNLOAD=string	Perintah yang akan dilaksanakan ketika halaman Website ditutup.

Contoh :

INPUT

<INPUT>

Adalah perintah untuk meminta memasukan (input) dari pengunjung, sedangkan INPUT memiliki cukup banyak atribut, antara lain:

TYPE=[text | password | checkbox | radio | submit | reset | file | hidden | image | button] (jenis input)
NAME=string (kunci dalam form submit)
VALUE=string (nilai dari input)
CHECKED (tombol check radio atau checkbox)
SIZE=number(panjang kotak teks)
MAXLENGHT=number (panjang karakter)
SCR=URL (lokasi URL atau gambar)
ALT=string (keterangan untuk gambar)
ALIGN=[top | middle | bottom | left | right] (pengaturan teks atau gambar)
DISABLED (menyembunyikan elemen)
READONLY (mencegah perubahan)
ACCEPT=string (media untuk upload file)
ACCESSKEY=character (tombol shortcut)
TABINDEX=number (posisi tab)
ONFOCUS=string (kotak teks yang menerima fokus / kursor)
ONBLUR=string (kotak teks yang ditinggalkan focus / kursor)
ONSELECT=string (teks yang dipilih)
ONCHANGE=string (nilai yang akan diganti)
ONCLICK=string (perintah yang akan dilaksanakan apabila tombol di klik)

Contoh :

Program 1

<HTML>

<HEAD>

</HEAD>

<p> <label accesskey=p>Password: <input type=”password” name=”pw” size=”20″ maxlength=”20″></label></p>

</BODY>

</HTML>

Program 2

<HTML>

<HEAD>

</HEAD>

<p> Silahkan pilih jenis pembayaran Anda :</p>

<p><label accesskey=c><input type=”radio” name=”jenis pembayaran” value=”master card” checked>Master card </label><br>

<p><label accesskey=m><input type=”radio” name=”jenis pembayaran” value=”wesel pos” checked>Wesel pos </label><br>

<p><label accesskey=s><input type=”checkbox” name=”kirim” value=”yes” checked>Kirim vie e-mail </label><br>

</BODY>

</HTML>

FORM

<FORM> </FORM>

Perintah FORM adalah suatu metode untuk membuat format input seperti formulir, dan terdiri dari beberapa atribut:

ACTION=URL	Penanganan form
METHOD=[get \| post]	Metode HTTP untuk submit form.
ENCTYPE=string	Tipe isi submit form.
TARGET=string	Target berupa jendela atau frame.
ONSUBMIT=string	From yang sudah di-Submit.
ONRESET=string	Form yang di-reset.

Contoh :

<HTML>

<HEAD>

</HEAD>

<form>

<p>

1:<INPUT type=”radio” NAME=”radio” value=”Anda Memilih Nomor ” onclick=”alert(Value)”>

2:<INPUT type=”radio” NAME=”radio” value=”Anda Memilih Nomor ” onclick=”alert(Value)”>

3:<INPUT type=”radio” NAME=”radio” value=”Anda Memilih Nomor ” onclick=”alert(Value)”>

</form>

</BODY>

</HTML>

LABEL

<LABEL> </LABEL>

adalah suatu perintah untuk membuat keterangan field (kotak input) dalam pembuatan form, dan umumnya digunakan dengan perintah INPUT. Sedangkan LABEL terdiri dari beberapa atribut :

ACCESSKEY=character	Tombol shortcut.
ONFOCUS=script	Elemen yang menerima fokus (kursor)
ONBLUR=script	Elemen yang ditinggalkan fokus (kursor).

Contoh :

<HTML>

<HEAD>

</HEAD>

<p>

<label accesskey=U>Nama Anda :

</p>

<p>

<label accesskey=P>Password :

</p>

</BODY>

</HTML>

TEXTAREA

<TEXTAREA> </TEXTAREA>

adalah suatu perintah untuk membuat pengunjung dapat mengetik sekumpulan teks dalam sebuah kotak. Atribut yang dapat digunakan dengan perintah TEXTAREA adalah sebagai berikut :

NAME=string (kunci untuk submit form)
ROW=number (jumlah baris)
COLS=number (jumlah kolom)
DISABLE=menyembunyikan elemen
READONLY=mencegah perubahan
ACCESSKEY=character (tombol shortcut)
TABINDEX=number (posisi tab)
ONFOCUS=string (kotak teks yang menerima fokus/kursor)
ONBLUR=string (kotak teks yang ditinggalkan focus/kursor)
ONSELECT=string (teks yang dipilih)
ONCHANGE=string (nilai yang akan diganti)

Contoh :

<HTML>

<HEAD>

</HEAD>

<p>

Ketik pesan Anda dalam kotak di bawah ini : <br>

</label>

</p>

</BODY>

</HTML>

FIELDSET

<FIELDSET> </FIELDSET>

adalah suatu perintah untuk membuat beberapa formulir yang terdiri dari beberapa bagian:

PEMBUATAN MENU

<SELECT> </SELECT>

Perintah ini digunakan untuk membuat daftar menu pilihan (options selector), dan umumnya digunakan dengan perintah OPTIONS (pembuat menu pilihan) dan OPTGROUP (pembuat group pilihan). Dengan perintah ini maka Anda akan dapat membuat daftar pilihan seperti yang sering Anda lihat dalam Website professional:

ATRIBUT :

NAME=string (kunci untuk submit form)
MULTIPLE=dapat membuat menu pilihan berganda
SIZE=number (jumlah pilihan yang tampak)
DISABLE=menyembunyikan elemen
TABINDEX=number (posisi tab)
ONFOCUS=string (kotak teks yang menerima fokus/kursor)
ONBLUR=string (kotak teks yang ditinggalkan focus/kursor)
ONCHANGE=string (nilai yang akan diganti)

<OPTIONS> </OPTIONS>

Perintah ini untuk membuat menu pilihan, dan umumnya digunakan dengan perintah kontrol SELECT :

ATRIBUT :

VALUE=string (nilai pilihan)
SELECTED=pilihan berupa inisial
DISABLE=menyembunyikan pilihan
LABEL=string (pilihan label)

Contoh :

<HTML>

<HEAD>

</HEAD>

Pilih status perkawinan Anda :

<option selected value=”">Status … </option>

<option> Belum kawin </option>

<option> kawin </option>

<option> Janda </option>

</select>

</BODY>

</HTML>

STYLE

<STYLE> </STYLE>

adalah perintah untuk memasukan (embedding) stylr sheet, misalnya untuk penanganan warna latar belakang halaman (background).

ATRIBUT :

TYPE=string(harus “text/css”)
MEDIA=MediaDesc (jenis media yang akan dimasukan)
TITLE=strings (judul style sheet)

Contoh :

<HTML>

<HEAD>

</HEAD>

<font color=”white”><h1> Selamat datang ke Websiteku. </h1> </font>

BODY {background: red; color:black }

</style>

</BODY>

</HTML>

KETERANGAN

<FONT COLOR=WHITE>

Perintah ini untuk membuat warna teks (foreground) dengan warna putih. Jika ingin warna lain, misalnya merah, ganti dengan RED.

BODY { background: red; color:black}

Perintah untuk membuat warna latar belakang halaman Website, jika ingin warna aqua misalnya, ganti red dengan aqua.

TABEL & KOTAK

Perintah-perintah yang termasuk ke dalam kategori TABEL adalah sebagai berikut :

TABLE
CAPTION
COLGROUP
COL – Table Column
THEAD – Table Head
TFOOT – Table Foot
TBODY – Table Body
TR – Table Row
TTD – Table Data Cell
TH – Table Header Cell

<TABLE> </TABLE>

Perintah untuk membuat table. Dan terdiri dari beberapa atribut:

SUMMARY=string (struktur table)
WIDTH=length (lebar table)
BORDER=pixels (lebar border)
FRAME=[void | above | hsides | lhs | rhs | vsides | box | border] (bagian luar border)
RULES=[none | groups | row | cols | all] (bagian dalam border)
CELLSPACING=length (spasi antara cell)
CELLPADDING=length (spasi dalam cell)
ALIGN=[left | center | right] (perata tabel)
BGCOLOR=color (warna background table)

Contoh :

<HTML>

<HEAD>

</HEAD>

<table>

<th scope=”col”>Alamat</th>

</tr>

<td>Paingan </td>

</tr>

</table>

</BODY>

</HTML>

MEMBUAT KOTAK

Contoh :

<HTML>

<HEAD>

</HEAD>

<tr>

Kalimat biasa dalam kotak <br>

<b>Kalimat tebal dalam kotak</b> <br>

<i>Kalimat miring dalam kotak</i> <br>

</tr>

</table>

</BODY>

</HTML>

MEMBUAT TABLE & KOTAK

Contoh :

<HTML>

<HEAD>

</HEAD>

<th scope=”col”>Alamat</th>

</tr>

<td>Paingan </td>

</tr>

</table>

</BODY>

</HTML>

WARNA

FONT COLOR

Perintah untuk memasukan warna kedalam teks.

Contoh :

<HTML>

<HEAD>

</HEAD>

<b>

<font color=”red”>Teks dengan warna merah</font><br>

<font color=”black”>Teks dengan warna hitam</font><br>

<font color=”blue”>Teks dengan warna biru</font>

</b>

</BODY>

</HTML>

BACKGROUND

Adalah perintah untuk membuat warna latar belakang sebuah teks.

KODE-KODE WARNA UNTUK WARNA BACKGROUND

#000000 : Black

#c0c0c0 : Silver

#808080 : Gray

#ffffff : White

#800000 : Maroon

#ff0000 : Red

#800080 : Purple

#ff00ff : Fuchsia

#008000 : Green

#00ff00 : Lime

#808000 : Olive

#ffff00 : Yellow

#000080 : Navy

#0000ff : Blue

#008080 : Teal

#00ffff : Aqua

Contoh :

<HTML>

<HEAD>

</HEAD>

<td style=”BACKGROUND: #000000; COLOR: white”>Dasar Hitam </td>

<td style=”BACKGROUND: #ff0000; COLOR: white”>Dasar Merah </td>

</table>

</BODY>

</HTML>

GAMBAR & MUSIK

Perintah-perintah untuk memasukan GAMBAR & MUSIK adalah sebagai berikut :

IMG SRC : Untuk memasukan gambar ke dalam Website
IMG BORDER : Untuk membuat bingkai gambar dengan kotak
BGSOUND : Untuk memasukkan suara atau musik ke dalam Website Anda.

IMG SRC

Adalah perintah untuk memasukkan gambar ke dalam Website. Anda dapat memasukkan gambar yang berakhiran (berformat) .JPG, .GIF, .BMP dan lain-lain. Untuk kemudahan pengiriman gambar kelak ke dalam server, satukan terlebih dahulu gambar ke dalam folder program. Barulah panggil ke dalam program.

Sintaks : <IMG SRC=”lokasi gambar”>

IMG BORDER

Untuk membingkai gambar dengan kotak

Sintaks : <IMG BORDER=”5

Angka 5 adalah ukuran border (bingkai), ganti angka ini sesuai dengan ukuran border yang Anda inginkan.

BGSOUND

Perintah ini untuk memasukan suara atau musik ke dalam Website Anda.

Sintaks : <BGSOUND loop=infinite SCR=”Lokasi File”>

PERHATIAN : Ukuran file musik yang sangat besar (misalnya MP3), tidak dapat kita masukkan ke dalam Website kita. Karena nanti kita tidak dapat memindahkannya ke dalam server agar dapat diakses pemakai internet, karena ukurannya sangat besar, akan keluar pernyataan kehabisan waktu ketika kita memindahkannya ke dalam server.

FRAME

Adalah suatu fasilitas dalam HTML yang berfungsi untuk membagi layar ke dalam beberapa jendela. Ada pun perintah-perintah untuk membuat frame dalam HTML adalah sebagai berikut:

FRAMESET
FRAME
IFRAME

<FRAMESET> </FRAMESET>

Adalah perintah untuk membuat frame, dan umumnya berpasangan dengan perintah FRAME. Atribut untuk FRAMESET :

ROWS=length (panjang baris dalam satuan pixel)
COLS=length (panjang kolom dalam satuan pixel)
ONLOAD=string (semua frame sudah selesai di-load)
ONUNLOAD=string (semua frame sudah dihapus)

Contoh :

<FRAMESET COLS=”lebar jendela bagian kiri, lebar jendela bagian kanan”>
<FRAME COLS=”*,*”>
<FRAME ROWS=”*,*”>

FRAME

Perintah ini untuk memasukan gambar, halaman atau URL ke dalam jendela (frame), mengatur margin, menggulung frame dan lain-lain. FRAME terdiri dari beberapa atribut, antara lain :

NAME=string (nama frame)
SRC=URL (isi frame)
LONGDESC=URL (uraian dari frame)
FRAMEBORDER=[1 | 0] (border frame)
MARGINWIDTH=pixels (batas kiri terhadap ini frame)
MARGINHEIGHT=pixels (batas atas terhadap ini frame)
NORESIZE
SCROLLING=[yes | no | auto] (penggulung frame)

Contoh :

<FRAME SRC=”link” NAME=”nama”

SCROLLING=”auto” MARGINWIDTH=1 MARGINHEIGHT=1

NORESIZE>

Keterangan :

Untuk pembuatan FRAME perintah <BODY> tidak digunakan dalam program, karena jika ada perintah <BODY> maka program ini tidak dapat berjalan.

IFRAME SRC

Adalah perintah untuk membuat jendela dengan lebar dan tinggi sesuai dengan keinginan programmer, dan dapat diletakan di bagian kiri, tengah, atau bagian kanan.

Sintaks :

Contoh :

<HTML>

<HEAD>

</HEAD>

</iframe> </p>

</BODY>

</HTML>

A HREF

<A HREF

Adalah perintah HTML untuk membuat LINK (membuka sebuah halam atau URL dari sebuah halaman). Ada pun atribut yang dapat digunakan dengan HREF adalah sebagai berikut:

ONCLICK : Membuka link setelah tombol di-klik
ONMOUSEOVER : Membuka link hanya dengan menyorot tombol
- ONMOUSEOUT : Membuka link hanya dengan menyorot tombol, dan kembali kehalaman semula apabila mouse dijauhkan dari link.

Sintaks:

CARA PEMBERIAN NAMA FILE

Untuk menjaga kesalahan, berilah nama file dengan ketentuan sebagai berikut:

File pertama (file induk) simpan dengan nama index.html (semua huruf kecil)
File-file berikutnya juga disimpan dengan huruf kecil.
Tentang file gambar, juga disimpan dengan huruf kecil.
Jika nama file lebih dari satu kata, pisahkan dengan underscore ( _ )

2. CSS : CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita .

PERINTAH CSS :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.

Terkait dengan Mengenal Sistem Kerja Cascading Style Sheet (CSS)

Mengubah Teks Website dengan Google Font
Tampilan website biasanya memiliki jenis huruf/font yang standar karena halaman web yang ditampilkan dalam seluruh browser memiliki tampilan dengan huruf/font yang berbeda tergantung font yang ...
Membuat Efek Transisi Pada Tombol dengan CSS
Seperti yang telah kita ketahui bersama bahwa sebuah tombol/hyperlink memiliki tampilan standar (biasanya berwarna biru dengan garis biru dibawahnya/underscore). Dan ketika mouse anda melintas diatas ...
Mengganti Logo di Halaman Login Admin dari Functions
Dalam tutorial sebelumnya tentang Mengganti Logo di Halaman Login Admin WordPress 3.5.1 telah dijelaskan tentang cara mengganti tampilan logo pada halaman login admin. Namun dikarenakan ...
PHP Database Framework Terbaik
Dahulu kala sebelum ditemukannya database framework, pekerjaan membuat sebuah database dengan menggunakan PHP untuk sebuah website merupakan sebuah pekerjaan yang cukup melelahkan dan menyita banyak ...

3. JAVA SCRIPT :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.

PERINTAH : 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

Dewi Nadia Ulfa

Senin, 31 Agustus 2015

Membuat Marquee

TUGAS KONTEN ISP 1/9/2015

Pengertian ISP

Contoh ISP

TUGAS KONTEN DOMAIN 1/9/2015

PENGERTIAN DAN CONTOH DOMAIN

TUGAS KONTEN 01-09-2015

Senin, 24 Agustus 2015

Mengubah Font

mengedit paragraf HTML

Membuat paragraf memakai tag <p>

Latihan halam web 2

Latihan Halaman Web 2-a

Hasil Uji Latiann web 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

Kamis, 06 Agustus 2015

Siti Azizah

perintah-perintah HTML

PERINTAH-PERINTAH HTML