Kamis, 20 Agustus 2015

Pengertian,Perintah Dasar beserta Contoh HTML



HTML (HyperText Mark up Language) 

merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.
Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunnya HTML nya adalah sebagai berikut:

  • Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
  • Markup 
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.
  • Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi. 


Adapun Perintah - Perintah Dasar dari HTML adalah sebagai berikut:

1.  <H1> sampai <H6> <H1>  </H1>font ukuran besar
        <H2>  </H2>
         ....         ....
        <H6>   </H6>font semakin kecil

2.  <HR>
        Fungsi : perintah untuk membuat garis horizontal penuh layar
        cth :
3. <I>
        Fungsi : membuat teks miring

4. <B>
        Fungsi : membuat teks tebal

5. <U>
        Fungsi : membuat teks bergaris bawah

6.  <CENTER>
        Fungsi : membuat text ke tengah layar

7. <ALIGN>
        Fungsi : Membuat teks rata kiri dan rata kanan
        Sintak
        <P ALIGN=right>untuk rata kanan
        <P ALIGN=left>untuk rata kiri
        <P ALIGN=center>untuk rata tengah
        <P ALIGN=justify>untuk rata kiri dan rata kanan

        atau

        <H?ALIGN=right>
        <H?ALIGN=left>
        <H?ALIGN=center>
        <H?ALIGN=justify>

        Contoh pemakaian:
        <H2 Align=right>Selamat Datang Ke Website Kami <H2>

8. <BR>
        Fungsi : memasukkan fungsi enter
        Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya

9. <!->
        Fungsi : membuat komentar
        Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan

10.  <P>
        Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain

11. <DD>
        Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam

12. <BASEFONT>
        Fungsi : Mengubah ukuran font
        Contoh :
        <BASEFONT SIZE=6>
        WELCOME TO MY WEBSITE
        <B>WELCOME TO MY WEBSITE DAN TEBAL</B>

13. <FONT>
        Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib

14. <FACE>
        Fungsi : mengubah jenis font

15.  <SUP>
        Fungsi : membuat cetak naik suatu teks
        Contoh :
        Kami adalah yang pertama:1stin the world

16.  <SUB>
        Fungsi : membuat suatu teks cetak turun
        Contoh :
        contoh-contoh teks cetak turun :
        H2O (Disebut Air) dan
        C2127No (Disebut Methadon)

17.  <UL> atau Unorder List
        Fungsi : membuat bullet

18.   <LI>
        Fungsi : juga untuk membuat bullet
        Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
        Contoh :
        <UL>
        <LI>
        <H2> Jawa Timur </H2>
        <UL>
        <LI> SURABAYA </LI>
        <LI> MALANG </LI>
        <LI> GRESIK </LI>
        </UL>
        </LI>
        </BR>
        <LI>
        <H2> Jawa Barat </H2>
        <UL>
        <LI> Bandung </LI>
        <LI> Sukabumi </LI>
        <LI> Bogor </LI>
        </UL>
        </LI>
        </UL>

19.   <IMGSRC>
        Fungsi : memasukkan gambar ke dalam Website
        Anda dapat juga memasukkan gambar berakhiran *.Jpg,   *.Gif, *.Bmp dll
        Sintak :<IMG BORDER="5">
        "5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda

20.    <BGSOUND>
        Fungsi : memasukkan suara atau musik ke dalam Website
        Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">

    Link dengan sorot
    Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.
    <HTML>
    <HEAD>
    <TITLE> </TITLE>
    <META Name="description"Content=" ">
    <META Name="keywords"Content=" ">
    <META Name="generator"Content="Cute HTML">
    </HEAD>
    <BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080">
    <Center>
    <A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):">
    <Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
    </CENTER>
    </BODY>
    </HTML>

    Link dengan tombol
    Berikut adalah contoh program link dengan tombol
    Sintak :
    <Input type="button"Value="Nama Tombol"
    On Click="parent.location="Link anda disini" >

    Contoh
    Buatlah link dengan nama
    tentang_kami.html
    produk_kami.html
    cara_memesan.html


    < HTML >
    < HEAD >
    < TITLE > </TITLE>
    < META name="description"Content=" ">
    < META name="keywords"Content=" ">
    < META name="generator"Content="Cute HTML">
    < /HEAD >
    < BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" >
    < Center >
    < h1 > PT.OCTA >
    < Input Type="button"value="Tentang Kami"
    on click="parent.location="c:/website/tentang_kami.html'" >
    < Input Type="button"value="Produk Kami"
    on click="parent.location="c:/gambar/produk_kami.html'" >
    < Input Type="button"value="cara memesan"
    on click="parent.location="c:/gambar/cara_memesan.html'" >
    < /Center >
    < /Body >
    < /HTML >

    Kolom
    < tr > adalah perintah untuk membuat kolom pada notepad
    Berikut adalah contoh perintah cara membuat kolom pada notepad
    < html >
    < head >
    < title > Belajar membuat kolom < /title >
    < /head >
    < H3 Align="Center" > DAFTAR MAHASISWA < H3 >
    < table border="3" border color="red"
    < tr >
    < td > No
    < td > Nama
    < td > Alamat
    < td > No. Phone
    < td > Gambar
    < /tr >
    < tr >
    < td > 1
    < td > Octa
    < td > Padang Bulan
    < td > 8214773
    < td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr >

    Hasilnya menjadi

    Membuat Frame

    -Framecols : membagi layar dalam bentuk kolom
    -FrameRows : membagi layar dengan bentuk baris
    -Frame Src : menampilkan file dalam frame
    Bentuknya
    (Frame cols="30%,*")
    (Frame Src="Nama.file Name="Teks")
    (Frame Rows="40%,*")
    (Frame Src="Nama.file"Nama="teks")
    (Frame Src="Nama.file"Nama="Teks)
    (/Frameset)

    Contoh Program Frame

    < Html >
    < Head >
    < Title >Melink dengan sorot < /Title >
    < /Head >
    < Frameset cols="30%,*" >
    < Frame Src="Nama file"Nama="Teks" >
    < Frame Rows="40%%,*" >
    < Frame Src="Gambar File’Nama="Gambar" >
    < Frame Src="Nama File"Nama="Teks >
    < /Frameset >

Contoh HTML :
struktur dasar bahasa HTML.
<html>
<head>
<title> tempat menulis judul halaman web </html>
<head>
<body>
tempat untuk menulis isi dari halaman web
</body>
</html>
 kita coba latihan,,
langkah pertama
buka lah satu program  aplikasi pengolah kata seperti notepad atau wordpad ataupun aplikasi pengolah kata lainnya.
langkah kedua
tuliskan tag html di bawah ini pada aplikasi pengolah kata:
<html>
 
<head>
 
<title>
LATIHAN 1 HTML OLEH ALIM di INDONESI4KU.WORDPRESS.COM
</title>
 </head>
 
<body>
 
<br>
 
<p>HTML adalah bahasa standar yang digunakan untuk membuat halaman web.<br>
 
salah satu tutorial atau contoh latihannya dapat kita lihat di situs<br>
Indonesi4ku.wordpress.com.
</body>
</html>
langkah ketiga
simpanlah file tadi dengan ekstensi atau tipe file “.html”. contoh: latihan1.html
langkah keempat
 bukalah file yang sudah kita simpan tadi, dengan cara mengklik dua kali pada nama filenya.


PEMROGRAMAN INTERNET DEFINISI CSS, FUNGSI CSS, SYNTAX CSS, SIFAT CSS, METODE PENULISAN CSS,PROPERTY CSS,CSS ID & Class



DEFINISI CSS
CSS merupakan kepanjangan dari Cascading Style Sheet yaitu suatu dokumen yang digunakan untuk melakukan pengaturan halaman web.

Apa itu CSS :
  • CSS singkatan dari Cascading Style Sheets
  •   Styles didefinisikan bagaimana manampilkan elemen HTML
  •   Styles umumnya disimpan ke dalam Style Sheet
  •   Styles ditambahkan HTML untuk membantu pekerjaan
  •   External Style Sheets dapat membantu banyak pekerjaan
  •   ExternalStyle Sheet disimpan dalam CSS files
  •   Multiple Style dapat didefinisi banyak jendela menjadi satu

Menggunakan CSS tidak memerlukan perangkat lunak tertentu karena merupakan script yang telah embeded dengan HTML. Cukup menggunakan aplikasi seperti note pad, anda sudah mampu menciptakan script CSS sendiri Style Sheets merupakan feature yang sangat penting  dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web,  akan tetapi penggunaan style sheets
merupakan kelebihan tersendiri.

Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bias
menyebutnya sebagai template dari documents HTML yang menggunakanya.

Anda juga bisa membuat efek-efek sepsial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bias anda lakukan dengan style sheet.

Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada
prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.
Pada perkembangannya CSS sudah masuk level 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.

CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
– Ukuran file lebih kecil
– Load file lebih cepat
– Dapat berkolaborasi dengan JavaScript
– Pasangan setia XHTML
– Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
– Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
– Dan banyak lagi yang lainnya.
FUNGSI CSS
Fungsi CSS adalah mendefinisikan style untuk suatu teks dengan jenis huruf, ukuran,
dan warna tertentu.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf,
spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style
lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada
umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan
bahasa HTML dan XHTML.
SYNTAX CSS
Aturan penulisan CSS terdiri dari dua bagian utama, yaitu sebuah selector dan satu atau
beberapa deklarasi.
Keterangan:
• Selector
selector adalah HTML elemen yang ingin kita ubah. Selector bisa juga berupa id/
• Declaration
Declaration terdiri dari property dan value.
• Property
Property adalah atribut dari style yang ingin kita ubah.
• Value
Value adalah nilai dari atribut style yang dideklarasikan.
Penulisan syntax html akan sedikit berbeda dengan syntax CSS. Pada syntax html,
pendeklarasian attributnya selalu diberi tanda petik dua ( “ ) pada bagian value dan
tanpa diakhiri titik koma ( ; ), sedangkan pendeklarasian attribute CSS pada bagian value
tidak akan diberikan tanda petik dua ( “ ) dan selalu diakhiri dengan titik koma ( ; ), dan
declaration groups akan diapit di dalam kurung kurawal ( { } ).
Agar Syntax CSS lebih mudah dibaca, penulisannya seperti dibawah ini:
P
{
color : red;
Text-align : Center;
}
Sintaks dari HTML

Penulisan  kode CSS dibuat menjadi tiga bagian, yaitu:

selector { property1: value; property2:value, . . .}
ex. H1{ color:green; background-color:orange}

Ket:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector.Selector adalah tag html yang umumnya kamu
ketahui.
2. Declaration
Terdiri dari property dan nilainya.Property adalah atribut yang kamu ingin ubah dan tiap property
mempunyai nilai/value.


Catatan:
  • Jangan ada spasi antara property value dengan unitnya(1).
  •   Nama property bersifat case sensitif dan menggunakan huruf kecil.
  •   Jika nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai(2)
  •   Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property
lain(3,5).
  • Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda koma(6).

Ada tiga cara penempatan kode CSS dalam HTML, yaitu :

1. Internal CSS
Yaitu menuliskan langsung script CSS di file HTML-nya.
Contoh :
<html>
                    <head>
                    <title>Belajar CSS</title>
                    <style type=”text/css”>
                                         p {color: white; }
                                         body {background-color: black; }
                    </style>
                    </head>
                    <body>
                    <p>Selamat Datang CSS</p>
                    </body>
                    </html>

2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan
file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format
tersebut.Eksternal style ditulis di text editor lain dengan ekstention .css Untuk lebih jelasnya kita
lihat contoh dibawah ini:
<html>
                    <head>
                    <title>Belajar CSS</title>
                    <link rel=”stylesheet” type=”text/css” href=”test.css”/>
                    </head>
                    <body>
                    <h3> Selamat Datang CSS </h3>
                    </body>
                    </html>

3. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
                    <head>
                    <title>Belajar CSS</title>
                    </head>
                    <p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
                    </body>
                    </html>



SIFAT CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu
dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web
yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan
lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam
berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika
halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.
METODE PENULISAN CSS
Ada tiga metode penulisan CSS atribut, yaitu :
1. Inline Style Sheet
2. Embedded Style Sheet
3. Linked/ external style sheet
Inline Style Sheet
Inline merupakan style yang terlemah karena editing harus dilakukan disemua bagian
dimana inline berada. Inline mirip dengan atribut biasa. Inline mendeklarasikan format
elemen secara individu. CSS didefinisikan langsung pada tag HTML yang bersangkutan.
Attribute style:
• property CSS diikuti oleh sebuah colon dan value
• misalnya: style=”font-size=20pt”
Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML
tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan
memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet:
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>
<body>
<h1 style=”color:orange;fontfamily:
verdana”>This is a sample inline
style sheet</h1>
</body>
<html>
<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor=”#FFFFFF”>
<p id=”cth1″>Ini adalah contoh tag P tanpa di format menggunakan CSS </p>
<p id=”cth2″ style=”fontsize:
20pt”>Tag P ini diformat dengan besar font 20
point </p>
<p id=”cth3″ style=”fontsize:
14pt; color:red”>Tag P ini diformat dengan besar
font 14 point, dan menggunakan warna merah </p>
</body>
</html>
<body>
<p>This text does not have any style applied to it.</p>
<p style = “fontsize:
20pt”>This text has the
<em>fontsize</
em> style applied to it, making it 20pt.
</p>
<p style = “fontsize:
20pt; color: #0000ff”>
This text has the <em>fontsize</
em> and
<em>color</em> styles applied to it,
making it 20pt. and blue.</p>
</body>
mengetikkan langsung dalam tag html sebagai atribut .
<body>
<b style = “color : blue”> teks tebal dan biru </b>
</body>
Embedded Style Sheet
CSS di definisikan dalam tag <head> dan mempunyai efek pada 1 halaman saja. CSS
didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada
pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag
HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah :
Selector
{
property1: value1;
property2: value2;
propertyN: valueN;
}
Selector adalah tag yang digunakan web browser.
Property : value adalah efek dari style yang diinginkan untuk selector.
<head>
<style type=“text/css”> ……… style definitions ………</style>
</head>
Contoh penggunaan CSS dengan metode Embedded Style Sheet:
<head>
<style type=”text/css”>
p{fontfamily:
Arial, Helvetica; fontsize:
12pt; color: #FF0000}
</style
</head>
Selector = p
property = font-family
value = Arial, Helvetica, sans-serif
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; marginleft:
0.5in}
h1 {fontsize:
18pt; color:#FF0000}
p {fontsize:
12pt; fontfamily:
arial; textindent:
0.5in}
</style>
<body>
<h1 id=”cth1″>Judul ini berukuran 18 dengan warna merah!</h1>
<p id=”cth2″>Tag p ini di format dengan besar font 12 point dengan tipe
font Arial dan mempunyai identasi 0.5 inch </p>
<p id=”cth3″>Yang perlu diperhatikan juga bahwa body disini telah diformat
dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
<head>
<style type = “text/css”>
em { backgroundcolor:
#8000ff; color: white }
h1 { fontfamily:
arial, sansserif
}
p { fontsize:
14pt }
.special { color: blue }
</style>
</head>
<h1 class = “special”>Deitel &amp; Associates, Inc.</h1>
<p>Deitel &amp; Associates, Inc. programming, and Object Technology.</p>
<h1>Clients</h1>
<p class = “special”> The company’s clients include many <em>Fortune 1000
companies</em>,government agencies, branches and World Wide Web
courses.</p>
Conflicting style
<style type = “text/css”>
a.nodec { textdecoration:
none }
a:hover { textdecoration:
underline;color: red;backgroundcolor:
#ccffcc }
li em { color: red;fontweight:
bold }
ul { marginleft:
75px }
ul ul { textdecoration:
underline; marginleft:
15px }
</style>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><a class = “nodec” href = “http://www.food.com”>Go to the Grocery
store</a></p>
Linked/ External Style Sheet
Style yang paling banyak dipakai. Di simpan di file lain, sehingga dengan 1 file CSS dapat
dipakai di banyak file HTML lainnya. File hanya berisi style, bukan tag HTML.
Cara link CSS dari file HTML d bagian <HEAD>.
<link rel=stylesheet href=”mystyles.css” type=”text/css”>
sedangkan file mystyles.css berisi sekumpulan selector.
Contoh:
.bodytext{fontfamily:
verdana, arial, helvetica, sansserif;
fontsize:
18pt;
fontstyle:
italic;
color: #0000CC;
textindent:
20px}
a { textdecoration:
none }
a:hover { textdecoration:
underline; color: red; backgroundcolor:
#ccffcc }
li em { color: red; fontweight:
bold; backgroundcolor:
#ffffff }
ul { marginleft:
2cm }
ul ul { textdecoration:
underline; marginleft:
.5cm }
<head>
<link rel = “stylesheet” type = “text/css” href = “styles.css” />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p>
<a href = “http://www.food.com”>Go to the Grocery store</a>
</p>
</body>
Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css
Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head.
<head> <link rel=“stylesheet” type=“text/css” href=“namafile.css”/> </head>
Contoh :
<style type=“text/css” >
hr
{
color : red ;
height : 5px ;
width : 50%;
}
</style>
Keterangan :
Tag adalah style
Atribut adalah type=“text/css”
Selector adalah hr
Property adalah color, height, width
Value adalah red, 5px, 50%\

PROPERTY CSS
a)      background
Adalah property untuk mengatur latar belakang.
Valuenya;
1. Kode warna (#000 #001 #002 dsb) atau nama warna dalam bahasa inggris (black, red, blue dll)
Selector {background:#f00;}
atau
Selector {background:red;}
Catatatan;
Kode warna yang 6 digit/karakter (#ff0000) dapat disingkat menjadi 3 digit/karakter (#f00)
Dengan ketentuan,
digit ke 1 sama dengan digit ke 2,
digit ke 3 sama dengan digit ke 4, dan
digit ke 5 sama dengan digit ke 6.
2. url(http://url-gambar/icon)
Adalah value untuk memberi gambar/icon pada background.
Selector {background:url(http://url_gambar/icon;}
Untuk mengatur gambar/icon dan untuk menempatkan gambar/icon disuatu tempat harus memakai atribut sebagai berikut;
  • left top no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dikiri atas dan tidak mengulang.
  • right top no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dikanan atas dan tidak mengulang.
  • center top no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada tengah bagian atas dan tidak mengulang.
  • left bottom no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dikiri bagian bawah dan tidak mengulang.
  • right bottom no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dikanan bagian bawah dan tidak mengulang.
  • center bottom no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada ditengah bagian bawah dan tidak mengulang.
  • left center no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dikiri bagian tengah dan tidak mengulang.
  • right center no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dikanan bagian tengah dan tidak mengulang.
  • center no-repeat Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada ditengah dan tidak mengulang.
  • repeat-x Fungsinya untuk mengatur gambar yang kita buat untuk CSS mengulang ke kanan.
  • repeat-x top Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada diatas dan mengulang ke kanan.
  • repeat-x bottom Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada dibawah dan mengulang ke kanan.
  • repeat-y Fungsinya untuk mengatur gambar yang kita buat untuk CSS mengulang ke bawah.
  •  repeat-y right Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada di kanan dan mengulang ke bawah
  • repeat-y left Fungsinya untuk mengatur gambar yang kita buat untuk CSS berada di kiri dan mengulang ke bawah
  • repeat fixed Fungsinya untuk mengatur gambar yang kita buat untuk CSS mengulang memenuhi ruang element
  • background-size:100% Fungsinya untuk mengatur gambar yang kita buat untuk CSS mengulang memenuhi ruang tersebut.
Selector {background:url(http://url_gambar) center no-repeat; border:none; margin:3px; padding:3px; background-size:100% 100%;}
18. transparent adalah value yang fungsinya untuk menyamakan element warna font atau warna latar/bergambar yang dihimpit oleh element lain.
Selector {background:transparent; border:none; margin:0; padding:3px}
b)      margin
Adalah property untuk mengatur jarak antara dinding dengan bagian tepi luar.
Valuenya; pixel/px (0, 1px, 2px, 3px dst)
Selector {margin-top:0px; margin-right:3px; margin-bottom:0px;/span>; margin-left:3px;}
Keterangan;
margin-top value margin atas 0px
margin-right value margin kanan 3px
margin-bottom value margin bawah 0px
margin-left value margin kiri 0px
Untuk memberi value dari atas, kanan, bawah, kiri (searah jarum jam)
Contoh diatas dapat kita disingkat. Tujuan disingkat adalah; agar saat menggunakan CSS tersebut tidak terlalu berat. Maka jadinya seperti ini;
Selector {margin:0px 3px 0px 3px}
Karena value atas dengan value bawah valuenya sama (0px), dan value kanan dengan value kiri valuenya sama (5px), maka dapat disingkat kembali menjadi;
Selector {margin:0px 3px}
Catatan;
Yang boleh disingkat kalau value atas dengan value bawah sama, dan value kanan dengan value kiri juga sama.
Dan 0px juga dapat disingkat menjadi 0 (tanpa px), maka seperti ini jadinya;
Selector {margin:0 3px}
Kalau keempat sisi valuenya sama, maka bisa menulisnya cukup seperti ini;
Selector {margin:3px}
Untuk memberi value pada 1 sisi, 2 sisi, atau 3 sisi saja, maka harus diberi keterangan, sperti ini;
Selector {margin-top:3px; margin-bottom:5px}
c)      padding
Adalah value untuk mengatur jarak antara margin dengan bagian dalam.
Valuenya sama seperti value margin.
d)     border
Adalah property untuk memberi garis pembatas pada setiap element, property.
Valuenya;
1. Pixel/px (0, 1px, 2px, 3px, dst)
2. Warna (kode warna/nama warna bahasa inggris)
3. Style (solid, dashed, dotted, double, rigde, groove, inset, outset)
Selector {border:3px solid #00f}
Dalam membuat border, kita bisa membuat border hanya beberapa sisi saja, dan juga bisa memberi jenis border yang berbeda serta warna border yang berbeda pula.
Selector {border-top:3px solid #00f; border-right:2px dashed black}
Keterangan;
border-top, border-right = property
top = memberi border bagian atas
3px solid #00f = value border-top
3px = ketebalan border atas
solid = jenis border atas
#00f = warna border atas
right = memberi border bagian kanan
2px dashed black = value border-right.
2px = ketebalan border kanan
dashed = jenis border kanan
black = warna border kanan.
Kalau digambarkan background, margin, padding, border seperti ini;
teks
padding
margin

teks
padding
margin
background

color
Adalah property untuk memberi warna teks dan link.
Valuenya;
1. Kode warna (#000, #001, #002, dsb)
2. Nama warna bahasa inggris (black, red, blue dsb)
Selector {color:#00f}
atau
Selector {color:blue}
text-align
Adalah property untuk meratakan elemen text agar rata ke…..
Valuenya;
1. left = agar rata sebelah kiri.
2. right = agar rata sebelah kanan.
3. center = agar rata ditengah.
4. justify = agar rata kanan dan kiri.
Selector {text-align:justify; color:#000}
opacity
Adalah property untuk membuat suatu element CSS terlihat transparan
valuenya;
0,1 0,2 0,3 sampai 0,9 (semakin banyak angkanya maka semakin transparan)
#header {background:#fff; border:none; margin:1px; padding:0; opacity:0,5}
text-decoration
Adalah property yang berfungsi untuk memberi dekorasi pada text.
valuenya; underline (membuat text bergaris bawah).
a {text-decoration:underline}
text-transform
Adalah property untuk mengatur jenis teks pada suatu element.
valuenya;
1. capitalize = membuat text dengan huruf kapital.
2. lowpercase = membuat text dengan huruf kecil.
3. uppercase = membuat text dengan huruf besar.
.heading a {text-transform:upercase}
font-size
Adalah property untuk membuat text menjadi….
valuenya;
1. small = text menjadi kecil.
2. Pixel/px atau em. (semakin banyak angkanya maka semakin besar teksnya.
.heading a {font-size:30px}
font-size:0
Adalah property untuk menghilangkan/menyembunyikan text pada suatu element
#search-form [type=submit {background:#fff; margin:1px; margin:1px; border:none; font-size:0}
width dan height
Adalah property untuk mengatur panjang dan lebar suatu element.
valuenya; …% dan …px (semakin banyak %nya atau …px-nya maka semakin panjang dan lebar
#comment form textarea {width:70%; height:50px; background:#fff; border:1px solid #000}
display
Adalah property untuk membuat style bertumpuk.
valuenya; block.
.post-meta 2 a {display:block;}
  • list-style
    Adalah property untuk memberi urutan pada daftar kategori.
    valuenya;
    none = tanpa menggunakan nomer pada daftar linknya.#navigation-menu li {list-style:none; padding:3px; color:#00f}
  • disc = mengganti nomer urut dengan titik bulat
  • circle = mengganti nomer urut dengan berbentuk lingkaran
  • square = mengganti nomer urut dengan persegi
  • lower-alpha = mengganti nomer urut dengan huruf abjad kecil.
  • uper-alpha = mengganti nomer urut dengan huruf capital
  • georgian = mengganti nomer urut dengan huruf Georgia
  • lower-roman = mengganti nomer urut dengan angka romawi kecil
  • uper-roman = mengganti nomer urut dengan angka romawi kapital.
  • desimal = mengganti nomer urut dengan angka
  •  desimal-leading-zero = mengganti nomer urut dengan angka desimal.
  • lower greeck = mengganti nomer urut dengan huruf greck kecil
  •  armenian = mengganti nomer urut dengan huruf armenia.
  • lower latin = mengganti nomer urut dengan huruf latin kecilkecil
  • uper latin = mengganti nomer urut dengan huruf kacil.

#navigation-menu li {list-style-type:disc; border-bottom:1px solid #00f; padding:3px; color:#00f}
image = memberi nomer daftar link dengan icon.
#navigation-menu li {list-style-image:url(http://url_icon); border-bottom:1px solid #000; padding:3px; color:#00f;}
noneAdalah value untuk tidak memberikan suatu nilai pada property.
#header {background:#fff; border:none; margin:0; padding:2px}
CSS Text Properties

Digunakan untuk mengontrol tampilan dari teks, merubah warna teks, penurunan atau kenaikan
spasi antara teks, perataan teks, dekorasi teks, pengaturan teks dalam baris dan sebagianya.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.


W3C: Penomoran “W3C” column indikasi yang mana CSS merekomendasikan definisi property (CSS1
or CSS2).

CSS Klasifikasi Properties

Digunakan untuk mengontrol bagaimana tampilan elemen, set dimana gambar, set dimana gambar
dapat tampil di semua elemen, posisi elemen relative ke dalam normal, posisi elemen digunakan
dalam nilai absolute , dan bagaimana mengontrol tampilan elemen.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: Penomoran “W3C” kolom indikasi yang mana CSS merekomendasikan definisi property (CSS1 or CSS2).

CSS Table Properties

Digunakan untuk mensetting tampilan dari tabel.

Browser support: IE: Internet Explorer, M: Mac IE only, F: Firefox, N: Netscape.

W3C: Penomoran “W3C” kolom indikasi yang mana CSS merekomendasikan definisi property (CSS1 or CSS2).

CSS Background Properties

Digunakan untuk mengontrol warna background dari elemen, setting gambar, setting gambar
sabagai background, mengulang gambar background vertical dan horizontal, posisi gambar dalam
halaman
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Penomoran “W3C” kolom indikasi yang mana CSS merekomendasikan definisi property (CSS1 or CSS2).

CSS Font Properties
Digunakan untuk merubah jenis huruf, ketebalan,ukuran, style dari teks.
Catatan: CSS1 font diidentifikasi oleh font name. Jika browser tidak support font, dapat gunakan
font default.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Penomoran “W3C” kolom indikasi yang mana CSS merekomendasikan definisi property (CSS1 or CSS2).

CSS font Property
Digunakan untuk dengan pengecualian system font, property pendek untuk mesetting semua
property dari huruf dalam satu pendeklarasian
Catatan: Property ini juga mempunyai enam nilai: “line-height”, penulisan spasi dengan garis.



Pengertian JavaScript

JavaScript adalah bahasa pemograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemograman yang pemrosesannya dilakukan olehclient. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

Perintah Dasar pada JavaScript

Perintah dasar  merupakan perintah yang digunakan sebagai operasi yang paling dasar dalam pemrograman Javascript, yaitu

  1. perintah assigment
  2. perintah untuk menampilkan output
  3. perintah untuk menerima input
  4. 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






Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)