Pembuatan CSS Dasar dalam html

Pembuatan CSS Dasar

            Sebelum kita membuat file html dengan mengguakan CSS ada baiknya kita terlebih dahulu mengetahui bagaimana penulisan atau memasang CSS pada dokumen html

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

1. Internal Style Sheet (file CSS berbeda dari file HTML),
2. External Style Sheet (Kode CSS dipasang di dalam tag head HTML)
3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

1.a Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML 

1.b External CSS

            External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan ditempatkan di folder lain atau di folder yang sama dengan file html tersebut. browser akan membaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file, namun dalam external CSS karena memakai 2 notepad ada baiknya di masukkan terlebih dahulu ke folder yang kosong sehingga agar dapat lebih mudah dalam pembacaannya...

II.2 Inline Styles

Inline Style adalah pemformatan pada sebagian kecil saja dari web anda, anda dapat menggunakan inline style.Definisi style pada inline style hanya berpengaruh pada tag dimana inline style tersebut berada.Ada dua cara untuk merubah style dari web page anda yaitu dengan :

- Merubah inline style
-Menulis script untuk merubah style anda.

Dengan menggunakan inline style anda dapat membuat dynamic style

tanpa harus menambahkan script ke web anda. Inline styles merupakan

style yang bisa kita pasang pada element web tertentu saja.

Contoh:

Jika anda ingin menambahkan style pada

dengan warna merah,

anda harus mengeset attribut STYLE dari tag

.

Jika anda ingin menggunakan script untuk memodifikasi inline style,

anda dapat menggunakan Style Object. Style Object mensupport semua

property yang di support CSS untuk style. Untuk menggunakan property

pada script :

1. Hilangkan tanda hubung “-” dari property CSS Style

2. Ganti huruf setelah tanda hubung menjadi Capital

II. 3 ISTILAH-ISTILAH DALAM CSS

1. Style rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan

style dari document. Sebagai contoh kita bisa membuat aturan style yang

menentukan bahwa semua

di tampilkan dengan warna orange.

2. Style sheet

Style sheet dapat dapat di embedded ke HTML document. Atau disebut

embedded style sheet. Style sheet juga bisa dibuat sebagai external file

dan di link ke document HTML. Style role bisa di kenakan pada bagian

tertentu dari web page. Sebagai contoh anda bisa menentukan

paragraph tertentu di tampilkan dengan style bold dan italic sementara

yang lain tetap seperti biasa

3. Selector

selector { property1: value; property2:value, . . .}

H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

1. Selector

Bagian pertama sebelum tanda “{}” disebut selector.

2. Declaration

Terdiri dari property dan nilainya.

 

Contoh:  Istilah-istilah dari CSS

 II.4  Mengatur Format Font

a. Model huruf

Model yang umum dipakai adalah teks miring (italik) atau tebal (bold).

Umumnya program browser mempergunakan tag em untuk huruf italik

dan tag strong untuk huruf tebal. Misalnya anda ingin menuliskan kode

em agar huruf tampil berbentuk italik dan tebal dan menuliskan kode

strong untuk huruf tebal uppercase, perintahnya dituliskan sebagai

berikut :

Contoh: em { font-style: italic; font-weight: bold; }

  strong { text-transform: uppercase; font-weight:bold; }

bila gagal dapat ditambahkan perintah ini :h2 { text-transform: lowercase; }

b. Mengatur ukuran huruf

Kebanyakan program browser mempergunakan huruf yang lebih besar

untuk heading yang penting sifatnya. Bila anda menimpa ukuran

defaultnya, anda menempuh resiko yaitu huruf menjadi tampak lebih

kecil khususnya bila anda mempergunakan ukuran yang anda tambahkan

tersebut dengan ukuran titik (point). Karenanya anda disarankan untuk

melakukan pengaturan ukuran huruf dengan ukuran yang sama.

Contoh berikut mengatur ukuran heading dalam persen relatif terhadap

ukuran teks normal.

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 100%; }

c.       Mengatur jenis huruf

Bisa saja jenis huruf favorit anda tidak bisa ditampilkan oleh berbagai jenis browser.Untuk mengatasi hal ini anda dapat menuliskan beberapa jenis huruf  yang tidak dapat ditampilkan oleh hampir semua browser.

Ada beberapa jenis huruf generik yang dijamin cocok, sehingga anda

kami sarankan untuk mengakhiri daftar perintah HTML anda dengan

salah satu jenis huruf berikut : serif, sans-serif, cursive, fantasy, atau

monospace, contoh :body { font-family: Verdana, sans-serif; }

h1,h2 { font-family: Garamond, Times New Roman,serif; }

Dalam contoh ini heading penting akan ditampilkan dalam bentuk huruf

Garamond, bila gagal maka akan ditampilkan dalam bentuk Times New

Roman, dan bila juga masih tidak dapat tampil, maka akan tampil

sebagai huruf serif. Teks paragraf akan ditampilkan dengan huruf

Verdana atau bila masih tidak tampil juga, maka browser masih dapat

menampilkannya dengan jenis huruf standar sans-serif.

 kesimpulan: dari artikel diatas ternyata pembuatan css dalam program html tidaklah sulit, hanya      saja kita harus memperhatikan Syntax CSS yang External dan Internal,,,, 

untuk itu silakan mencoba n pasti berhasil.............

Pembuatan Web Statis dan Form

WEB STATIS

Web statis adalah web yang berisi/menampilkan informasi–informasi yang sifatnya statis(tetap).disebut statis karena pengguna tidak dapat berinteraksi dengan web tersebut.singkatnya,untuk mengetahui suatu web bersifat statis atau dinamis dapat dilihat

Dari tampilannya.jika suatu web hanya berhubungan dengan halaman web lain dan berisi informasi yang tetap maka web tersebut disebut dengan web statis.pada web statis,pengguna hanya dapat melihat isi dokumen pada halaman web dan apabila diklik akan berpindah ke halaman web yang lain.interaksi pengguna hanya terbatas dapat melihat informasi yang ditampilkan .tetapi tidak dapat mengolah informasi yang dihasilkan.web statis biasanya merupakan HTML yang ditulis pada editor teks dan disimpan dalam bentuk .Html atau .htm

 Contoh desain web statis

Gambar di atas merupakan contoh desain web statis yang menerangkan tentang suatu lembaga perusahaan yang sudah memiliki alamat untuk di cari atau di temukan melalui address yang terpadat pada mozila firefox,namun kami akan menerangkan cara pembuatan web statis yang sangat sederhana.

Cara pembuatan web statis melalui notepad

          Adapun contoh web ini berisi data diri saya.

1 .ketikan pada notepad perintah di bawah ini;

2.kemudian,klik File>Save AS>Buat Folder Baru Dengan nama ” Web Statis” Simpan dalam folder tersebut dengan File name = biodata.html  dan  Save As Type= All files,kemudian klik Save

3.buka menu  Mozilla firefox seperti di bawah ini.

4.kemudian klik file>open file>web statis>biodata,kemudian klik open,maka hasilnya   seperti gambar di bawah ini.

5.selesai,namun kalian dapat berinovasi dengan menambahkan dengan menu frame dan memasukkan foto kalian seperti gambar di bawah ini ataupun sesuai keinginan anda.

6.Selamat mencoba.

Contoh gambar web statis di atas merupakan penggabungan dari 2 bentuk notepad yang menggunakan fungsi penggabungan frame yang tidak begitu sulit namun temen temen dapat membuat dengan inovasi yang anda inginkan .

C.Pengenalan Form

Form artinya sama Formulir. Tapi dalam konteks ini Form akan berbentuk input digital. Form sendiri adalah Kesatuan dari beberapa Input Field yang memiliki tujuan proses.Sebenarnya Form sendiri mengumpulkan data - data User dari Input yang bisa diubah Value (isinya) oleh User. Kalian kalo mau daftar Facebook harus ngisi Registrasi atau Kalo mau Login, harus ngisi User/Email dan Password kan  tempat kalian ngisi data - data itu disebut Form.

Contoh gambar form yang sudah memiliki fungsi.

Contoh from di atas sudah dapat di jalankan dengan fungsinya,pada mesin pencari seperti mozzila dan sebagainya,namun kami akan menyampaikan cara mudah untuk membuat form.


ketiklah terlebih dahulu Script ini

4.Kemudian simpan file html kemudian buka file tersebut maka akan tampil gambar seperti di bawah ini.

5.Silahkan mencoba,anda dapat memvariasikan form tersebut sesuai keinginan anda.

Pembuatan list,Bullet, an frame pada HTML

Apa yang dimaksud dengan website?

Pada dasarnya Website adalah sebuah cara untuk menampilkan diri Anda di Internet. Website Anda adalah sebuah tempat di Internet, siapa saja di dunia ini dapat mengunjunginya, kapan saja mereka dapat mengetahui tentang diri Anda, memberi pertanyaan kepada Anda, memberikan anda masukan atau bahkan mengetahui dan membeli produk Anda.

Internet bagaikan sebuah pusat perdagangan terbesar di dunia dan Website Anda adalah salah satu Toko/Kios di pusat perdagangan tersebut.

Mengapa Anda membutuhkan sebuah website?

5 tahun yang lalu memiliki sebuah website hanyalah untuk gengsi.
2 tahun yang lalu memiliki sebuah website hanyalah karena trendy.
Hari ini memiliki sebuah website adalah keharusan!

Semua orang menggunakan Web untuk segala sesuatu mulai dari pekerjaan sekolah sampai dengan memesan makanan karena prosesnya yang cepat, murah, mudah & menyenangkan! Anda tidak perlu meninggalkan meja Anda. Bahkan orang yang suka belanja sekalipun mencari produk yang diinginkan di Web. Kini mereka berusaha mencari produk atau servis Anda, tempat pertama yang mereka cari adalah di Web - dan jika mereka tidak dapat menemukan produk dan servis Anda di Web, kemungkinan besar mereka akan menemukan kompetitor Anda yang sudah memiliki Website!

Apa yang dapat dilakukan dengan adanya sebuah website?

Website Anda dapat digunakan untuk berbagai tugas, misalnya:
Membuat pengumuman atau pemberitahuan. Memberikan pelayanan kepada Customer Anda.
Menerima masukan dari pengunjung/customer Anda. Membagi dan mendistribusi file dan foto. Berkomunikasi langsung dengann Customer Anda yang berada di belahan dunia manapun.
Dan tentu saja, menjual produk dan servis Anda. Mungkin hal di atas masih kedengaran kurang menarik, tetapi jangan lupa bahwa Anda dapat melakukan hal di atas tersebut ke seluruh dunia kapan saja .. pada siang maupun malam hari dengan biaya yang sangat murah!

PEMBUATAN DAN KEGUNAAN LIST

Kegunaan Frame biasanya digunakan untuk membuat suatu halaman yang interaktif di dalam dokumen HTML. Dengan Frame kita dapat menampilkan lebih dari satu halaman web dalam halaman browser yang sama. Setiap dokumen HTML dapat ditampilkan didahjkgblam Frame dan setiap frame adalah bebas antara satu dengan yang lain.berikut cara membuat frame pada website.Dalam Pembuatan List dibagi menjadi 2 buah yang pertama ordered list dan unordered list, yang mana kalau ordered list akan menciptakan list yg beruntun yakni daimulai dari angka 1 sampai sekian, secara default ordered list merupakan angka sati dan seterusnya. Unordered list merupakan list yang tidak beraturan artinya bisa dimulai dengan bullet, secara default unordered list merupakan bullet, dalam html tag ordered list dan unordered list sebagai berikut :

Ordered list                                                                                        Unordered list

                                                                                                      

isi dari listnya

                                                                    

isi dari listnya

isi dari listnya

                                                                    

isi dari listnya

                                                                                                    

contoh pembuatan List ol dan ul jika kita masukkan dalam HTML

             

Berikut ini Pengertian UL dan OL

OL adalah list berurut nomornya secara default adalah menggunakan angka 1,2,3,…, dan seterusnya sampai dengan sejumlah item dalam list tersebut. sedangkan UL Unordered list sering disebut sebagai bulleted list, mempunyai bulleted default berupa noktah. Jenis bulet bisa diubah,berikut adalah daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:

                              

Contoh UL dan OL

Nama – nama Pemain Bola

Irfan hanafi

very  beiby chiforever

faisal nur

suhendri gunawan

riswanto

wahyu syahputera

Nama – nama Klub Liga Champion Europa

Arsenal

Liverpool

Aston Villa

Barselona

Mancuster United

Real Madrid

maka akan menghasilkan gambar berikut ini:

                                          

Cara Membuat Bullet and Numbering dengan HTML

Sebenarnya Cara Membuat Bullet and Numbering dengan HTML tidaklah sulit tapi hanya butuh ketelitian.kali ini saya hanya sedekar ingin berbagi pengetahuan tentang format bullet and numbering dengan HTML. Kalau temen-temen sering ngetik di Microsoft Word pasti sudah pernah menggunakan bullet and numbering. Itu loh… yang berfungsi untuk memberikan label urutan kepada suatu list. Misalnya urutan 1, 2, 3, 4, atau mungkin a, b, c, d, atau bisa juga berupa simbol. Sebenernya di hampir semua blog sudah tersedia fasilitas penambahan bullet and numbering secara mudah dengan meng-klik iconnya saja, tapi bagi temen-temen yang lebih senang dengan tantangan atau mungkin ingin lebih berkreasi dengan bullet and numbering, bisa melalui HTML.

Contohnya:
1. ini bentuk numbering satu

2. numbering lagi

3. numbering lagi yach…

4. ini yang terakhir

Sejauh yang saya ketahui, untuk membuat bullet and numbering ini bisa langsung melalui HTML, atau bisa juga melalui CSS (Cascading Style Sheet).

Untuk tutorial ini bisa anda coba membuatnya di notepad, atau langsung di blog juga bisa.
Tentukan bentuk bullet/numbering yang anda inginkan. Jika ingin berupa number/nomor, seperti 1, 2, 3, 4, dst, maka kode yang Anda gunakan adalah:

1. ini bentuk numbering satu
2. numbering lagi
3. numbering lagi yach...
4. ini yang terakhir

Hasil yang terlihat akan seperti ini:
1. ini bentuk numbering satu
2. numbering lagi
3. numbering lagi yach…
4. ini yang terakhir

Yang menentukan list tersebut berupa number adalah code

dan

.
Sedangkan bila Anda ingin membuat list berupa bullet (simbol), maka code yang bisa Anda gunakan adalah:

• ini bullet satu
• ini bullet lagi
• yang ini juga bullet

Sehingga hasilnya menjadi
• ini bullet satu
• ini bullet lagi
• yang ini juga bullet

Sedikit ada spesial pada tag UL ini: bentuk bullet bisa kreasikan, baik dengan code maupun dengan gambar. Misalnya:

• ini bentuk disc bulllet
• ini bentuk circle (lingkaran)
• kalo yang ini bentuk persegi

Sehingga hasilnya seperti:
• ini bentuk disc bulllet
o ini bentuk circle (lingkaran)
§ kalo yang ini bentuk persegi

Pembuatan Tabel

Tabel seperti yang kalian tahu terdiri dari kolom dan baris. Pada tabel data-data dimasukkan dalam kombinasi antara kolom dan baris tertentu. Beberapa baris dan kolom dari tabel bisa digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan data kita. Pada html semua itu dapat dilakukan, namun tentunya kita harus mengetahui terlebih dahulu bahan-bahan apa saja yang diperlukan untuk meracik sebuah tabel. Untuk meracik sebuah tabel kita akan membutuhkan bahan-bahan sebagai berikut, , , dan                : yang digunakan untuk membuat sebuah baris/row

             : yang digunakan untuk membuat kolom/data

             : yang digunakan untuk membuat header suatu table

Dari tag-tag diatas jika dimasukkan dalam sebuah HTML akan seperti berikut :

Contoh table dalam HTML

        

Tabel Nama-nama pemain Bola

. Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini, Dalam pembuatan table dalam HTML perlu mneggunakan beberapa tag seperti :   : yang berguna untuk mengawali pembuatan table

No	Nama	Nomor Induk
1	Irfan  Hanafi	1020000332
2	ferri beiby chiforever	1020000333
3	faisal nur	1020000334
4	suhendri gunawan	1020000335
5	suhendri gunawan	1020000336
6	wahyu syahputear	1020000337

maka tampilannya akan muncul seperti gambar berikut ini:

Pembuatan Dan Kegunaan Frame

Frame merupakan tag HTML yang digunakan untuk membuat sebuah bingkai yang terdapat pada frameset, jadi kita bisa menyatukan beberapa halaman html pada 1 halaman HTML saja, dan setiap halaman akan ada bingkai2nya, dalam pembuatannya kita membutuhkan tag-tag berikut ini :

: untuk memulai pembuatan binkai disini kita akan menentukan lebar kolom dll

                          : untuk memasukkan halaman-halaman web

Contoh Frame dalam HTML

maka tampilan yang akan dihasilkan seperti gambar dibawah ini: