Belajar CSS

Apa itu CSS? dan apa kegunaanya?. Pernahkah anda melihat sebuah halaman web dengan bentuk yang rapi, warna-warna yang indah. Itulah yang disebut dengan CSS(Cascading Style Sheet). Penggunaan CSS dilakukan untuk mempercantik tampilan web. Kode CSS ditulis didalam tag <style> </style>.
Ada 3 cara untuk membuat CSS bisa diterapkan ke dalam HTML :

• Inline CSS
• Embedded CSS
• External CSS

Untuk bisa belajar CSS yang harus disiapkan adalah :

1. Text Editor (Notepad, Adobe Dreamweaver, dll), disini penulis lebih senang menggunakan text editor Notepad++
2. Browser seperti Mozilla Firefox, Google Chrome,Opera, dll

Inline

Inline CSS digunakan pada tag HTML-nya

Sebagai contoh, ketikkan source code berikut :

1. <body>  
2. <body>  
3. <h1 style="color:red;">  
4. Contoh Inline CSS</h1>  
5. </body>  

Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya. Disini sebagai contoh adalah akan membuat tag header <h1> </h1> yang akan dibuat menjadi warna merah. Untuk tampilannya seperti berikut :

Embedded CSS

CSS ini menempel diantara tag <head> .. </head>

Sebagai contoh :

1. <html>  
2. <head>  
3. <style type="text/css">  
4. p {  
5. color:red;  
6. }  
7. </style>  
8. </head>  
9. <body>  
10. <p>  
11. Paragraf cara belajar CSS dengan cepat adalah dengan sering berlatih <p>  
12. </body>  
13. </html>  

Simpan file CSS diatas dengan nama terserahanda.html, kemudian jalankan di Mozilla Firefox atau Browser lainnya.

<style type="text/css">
p {
color:red;
}
</style>
Source kode diatas adalah tag untuk CSS yang akan membuat tag yang didalam paragraf <p> </p> berubah menjadi warna merah.

Untuk tampilannya sebagai berikut :

External CSS

External CSS adalah cara dimana kita nantinya akan membuat file.css sendiri, kemudian memanggilnya dengan link dari tag HTML. Langsung saja saya contohkan dari External CSS.
Pertama buatlah satu Folder. Buatlah halaman dengan nama style.css simpan kedalam folder yang anda buat tadi, kemudian ketik source code dibawah :

view plainprint?

1. #kotak1 {  
2.  background-color:red;  
3.  width:200px;  
4.  height:200px;  
5.  float:left;  
6. }  

#kotak1 {
background-color:red;
width:200px;
height:200px;
float:left;
}
Pengertian source code diatas adalah :
#kotak1 = nama id
background-color:red; = membuat background menjadi warna merah
width:200px; = membuat panjang dengan ukuran 200px
height:200px; = membuat lebar kebawah dengan ukuran 200px
float:left; = posisi objek berada di kiri


Untuk bisa menampilkan kita harus memanggil file .css yang telah dibuat tadi. Buatlah satu file dengan nama index.html. Kemudian tuliskan source code dibawah ini :

1. <html>  
2. <head>  
3. <link rel="stylesheet" href="style.css" type="text/css">  
4. </head>  
5. <body>  
6. <div id="kotak1">  
7. </div>  
8. </body>  
9. </html>  

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

Masukkan kedua file tersebut ke dalam satu folder. Jika file style.css dan index.html sudah ada di dalam satu folder langkah selanjutnya adalah jalankan file index.html di Mozilla Firefox atau Browser lainnya.

Untuk tampilannya sebagai berikut :

Pertemuan 5 - HTML5

PENGENALAN HTML5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."

1.      DOCTYPE UNTUK HTML5

DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.  Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.  Penggunaan DOCTYPE pada html5 lebih di sederhanakan.

Contoh Penggunaan:

<!DOCTYPE html> <html> <head>     <meta charset=”UTF-8”     <title>Judul pada dokumen</title> </head> <body> Isi dokumen... </body> </html>

2.      PENJELASAN TAG-TAG HTML5

-   <header>, digunakan untuk area header(bagian atas sebuah halaman web).

-   <article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.

-   <aside>, digunakan sebagai penambah informasi utama didalam halaman web. Biasanya berupa peringatan, catatan, dll.

-   <section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.

-   <figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode, dll

-   <figcaption>, Mendefinisikan caption untuk elemen <figure>

Contoh Penggunaan:

<!DOCTYPE html> <html> <head>     <meta charset=”UTF-8”     <title>Fitur HTML</title> </head> <body> <header> <h2> Tutorial HTML5</h2> </header> <article> Web hypertext aplication teknologi working group(WHATWG) memulai membuat standar baru ini pada tahun2004 ketika konstorium w3c sedang fokus pada pengembangan XHTML2.0 di masa depan sementara HTML 4.01 belum ada perubahan sejak tahun 2000<br/> <b>sejak tahun 2009</b>,w3c & XHTML bekerja sama dlm pengembangan HTML<br/> Dibawah ini logo HTML5 yaitu: </article> <footer> <p><h4>copyright &copy;2004 admin</h4></p> <footer> </body> </html>

3.      VIDEO

Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web.Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahan yang biasa disebut flash Player.

-   Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang mendukung yaitu :

a.    Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

b.     MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

c.    WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)

d.    Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter. Tag <video>  Sintaks Penulisanya :

<video src="judulvideo.ogg" controls="controls"> </video>

atau

<videocontrols="controls"><source src="judulvideo.webm" type="video/webm"></ video>

4.      AUDIO

 Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web.Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.  Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang mendukung yaitu:Ogg, MP3, Wav.

Sintaks Penulisanya :

<audio controls="controls"><source src="judullagu.mp3" type="audio/mp3"></audio>

5.      INPUT FORM BARU DI HTML5

Macam -macam jenis input form baru di HTML5 yaitu:

a.    email

b.    url

c.    number

d.    range

e.    Date pickers (date, month, week, time, datetime, datetime-local)

f.     search

g.    color

h.    tel (tipe ini belum support jadi tidak ada perubahan)

Sintaks Penulisanya :

<input type="jenis"/>

Pertemuan 4 - Form dan Input HTML

Form dan Input HTML

Form  merupakan  salah  satu  elemen  HTML  yang  digunakan  untuk  mendapatkan  masukan  dari  pengguna  web.  Pengguna  web  dapat  memasukkan  input  melalui  halaman-halaman  HTML. Umumnya  pengolahan  form  dilakukan  pada  server  dengan  menggunakan  skrip  yang  bersifat  server-side  seperti  PHP,  ASP  dan  lain  sebagainya.  ).  Untuk  membuat  form  digunakan  tag  awal <form> dan tag penutup </form>.

Sintaks penulisannya :

<form action=”url” method=”get|post”>

</form>

 

 Jenis Masukan dalam Form

Jenis masukan dalam satu formulir dibedakan menjadi :

Text digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.

Radio elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.

Checkbox elemen yang menyediakan beberapa pilihan bisa lebih dari satu.

List elemen pilihan dalam bentuk daftar.

Button elemen berupa tombol untuk melakukan suatu proses.

Submit elemen tombol yang digunakan untuk memanggil url.

Reset elemen tombol yang digunakan untuk mengembalikan kondisi awal.

Image digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.

Textarea elemen yang dapat menampung kumpulan teks ketikan dari user.

File elemen button yang dapat memanggil file atau gambar dari storage.

Password elemen berupa teks yang khusus digunakan untuk mengisi password.

Tag <TEXTAREA>

Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai

beberapa atribut, yaitu :

Name:         Mendefinisikan nama Objek Area

Rows:         Menentukan Jumlah baris text area

Cols :          menentukan lebar text area

Contoh:

<html>

<head >

<title>Contoh Tag Textarea dan Tag Select</title> </head>

<body>

<table width="100%" >

<tr>

<td>Pilih Jenis Kendaraan </td>

<td><select name="motor">

<option value="yamaha">Yamaha</option >

<option value="honda">Honda</option >

<option value="suzuki">Suzuki</option></select></td> </tr>

<tr>

<td> Alamat </td>

<td><textarea name="alamat" cols="55" rows="5"></textarea></td>

</tr >

</table >

</body>

</html >

Hasil:

Tag <INPUT>

Tag <INPUT>  digunakan untuk membuat komponen-komponen yang digunakan untuk meminta  informasi  dari  user,  misalnya  kotak  teks,  kotak  pilihan,  tombol  dan  lain-lain.  Tag  ini  tidak  memerlukan tag penutup.

Tipe input yang dapat dibuat adalah :

Text            : digunakan untuk membuat kotak teks

Password    : digunakan  untuk  membuat  kotak  teks,  tetapi  semua  karakter  akan  ditampilkan  dengan tanda *.

Check Box : digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.

Radio                   : digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.

File             : digunakan untuk memanggil file atau gambar dari storage.

Hidden       : Digunkan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat  oleh browser.

Reset           : digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form  yang telah diberikan.

Submit       : digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.

Contoh:

<html>

<head >

<title>Input Data Berita</title>

</head >

<body text="#0000FF" >

<h2>Tambah Berita</h2>

<form method="post" action="#" enctype="multipart/form -data">

<table width="100%">

<tr>

<td>Judul</td>

<td> : <input type="text" name="judul" size="60"/></td>

</tr>

<tr>

<td>Kategori</td>

<td> :<select name="kategori" >

<option    value="kategori_berita" selected>- Pilih Kategori </option>

<option value="komputer">Komputer

<option value="ekonomi">Ekonomi

<option value="pendidikan">Pendidikan

</select>

</td>

</tr>

<tr>

<td>Headline</td>

<td> : <input type="radio" name="headline" value="Y" checked/>Y

<input type="radio" name="headline" value="N"/> N</td>

</tr>

<tr>

<td>Isi Berita</td>

<td> : <textarea name="isi_berita" cols="45" rows="6"></textarea>

</td>

</tr>

<tr>

<td>Gambar</td>

<td> : <input type="file" name="fupload" size="40"></td>

</tr>

<tr>

<td colspan=2>

<input type="submit" value="Simpan"/>

<input type="reset" value="Reset"/> 

</td>

</tr>

</table>

</form>

</body>

</html>

Hasil: