Cascading Style Sheets

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 

CSS didefinisikan langsung pada tag HTML yang bersangkutan. 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 :

<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>

<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>.[6] Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.[6]

Contoh penggunaan CSS dengan metode Embedded Style Sheet :[6]

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent: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

cara membuat daftar/list di HTML

 Cara Membuat Daftar/List di HTML

---

Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:

<!DOCTYPE html> <html> <head>   <title>penggunaan tag list </title> </head> <body>   <h1>daftar belanjaan</h1>   <ol>   <li>minyak goreng</li>     <li>sabun mandi</li>     <li>deterjen</li>     <li>shampoo</li>     <li>obat nyamuk</li>   </ol> </body> </html>

---

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

<!DOCTYPE html> <html> <head>   <title>penggunaan tag list </title> </head> <body>   <h1>daftar belanjaan</h1>   <ul>     <li>minyak goreng</li>     <li>sabun mandi</li>     <li>deterjen</li>     <li>shampoo</li>     <li>obat nyamuk</li>   </ul> </body> </html>

        Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

CARA MEMBUAT TAG HTML

Cara Membuat Form Pendaftaran Menggunakan HTML Dengan Mudah

 

 pada kali ini saya ingin membahas tentang Cara Membuat Form Pendaftaraan dengan script HTML dengan Mudah. Iya kenapa kata mudah saya pertebal, karena dengan kata itu kita dapat menyelesaikan berbagai pekerjaan kita dengan cepat.

OK, masuk ketopik pembahasan.

Form Pendaftaran Dengan HTML

Kali ini saya akan membuat form pendaftaraan yang memiliki design yang hampir sama dengan milik FB tetapi dengan versi HTML saya sendiri. Kalian hanya perlu memasukan script dibawah ini :

	<html>
	<head><title>Form Pendaftaran</title></head>
	<body>
	<table border="4" bgcolor="A9C5EB" align="center" height="500" width="400" cellpadding="20">
	<tr>
	<td>
	<b><font color="black" size="10"> Mendaftar </font></b>
	<p> Gratis, untuk pelajar </p>
	<input type="text" Name="nama" size="20" placeholder="Nama Depan">
	<input type="text" Name="nama" size="20" placeholder="Nama Belakang"><br><br>
	<input type="text" Name="email" size="46" placeholder="Email Anda"><br><br>
	<input type="text" Name="remail" size="46" placeholder="Masukan Ulang Email"><br><br>
	<input type="password" Name="sandi" size="46" placeholder="Kata Sandi Baru"><br>
	<p><b> Tanggal Lahir </b></p>
	<select name="Tanggal">
	<option>-Tanggal-</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	<option value="19">19</option>
	<option value="20">20</option>
	<option value="21">21</option>
	<option value="22">22</option>
	<option value="23">23</option>
	<option value="24">24</option>
	<option value="25">25</option>
	<option value="26">26</option>
	<option value="27">27</option>
	<option value="28">28</option>
	<option value="29">29</option>
	<option value="30">30</option>
	<option value="31">31</option>
	<option value="32">32</option>
	</select>
	<select name="Bulan">
	<option>-Bulan-</option>
	<option value="1">Januari</option>
	<option value="2">Februari</option>
	<option value="3">Maret</option>
	<option value="4">April</option>
	<option value="5">Mei</option>
	<option value="6">Juni</option>
	<option value="7">Juli</option>
	<option value="8">Agustus</option>
	<option value="9">September</option>
	<option value="10">Oktober</option>
	<option value="11">November</option>
	<option value="12">Desember</option>
	</select>
	<select name="Tahun">
	<option>-Tahun-</option>
	<option value="1980">1980</option>
	<option value="1981">1981</option>
	<option value="1982">1982</option>
	<option value="1983">1983</option>
	<option value="1984">1984</option>
	<option value="1985">1985</option>
	<option value="1986">1986</option>
	<option value="1987">1987</option>
	<option value="1988">1988</option>
	<option value="1989">1989</option>
	<option value="1990">1990</option>
	<option value="1991">1991</option>
	<option value="1992">1992</option>
	<option value="1993">1993</option>
	<option value="1994">1994</option>
	<option value="1995">1995</option>
	<option value="1996">1996</option>
	<option value="1997">1997</option>
	<option value="1998">1998</option>
	<option value="1999">1999</option>
	<option value="2000">2000</option>
	<option value="2001">2001</option>
	<option value="2002">2002</option>
	<option value="2003">2003</option>
	<option value="2004">2004</option>
	<option value="2005">2005</option>
	<option value="2006">2006</option>
	<option value="2007">2007</option>
	<option value="2008">2008</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	</select><br><br>
	<input type="radio" name="Kelamin" value="L">Laki Laki
	<input type="radio" name="Kelamin" value="P">Perempuan
	<br><br>
	<input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">
	</td>
	</tr>
	</body>
	</html>
	Nah, coba kalian masukkan script diatas ke dalam notepad anda, kemudian save dalam format HTML ( saya menyarankan pakai notepad++ dengan language HTML ) kemudian jalankan di browser kalian, dan apa yang terjadi ?. Berikut Screen Shot hasil dari Form Pendaftaraan yang telah saya buat menggunakan script diatas Form Pendaftaran Yang Sudah Jadi Yaa, itu lah form pendaftaran dengan menggunakan bahasa HTML, untuk keperluan lain, kalian dapat dengan mudah meng-edit bagian - bagian form tersebut. Sekian dari saya, apabali ada pertanyaan silakan menulisnya di komentar, Terima Kasih :D

Belajar Html

 

 

Pengenalan HTML

Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:

<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body>
</html>

Tag Dasar HTML

Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:
<html> <head> <title>Disini titel websiteku</title> </head> <body> Disini adalah konten yang tampil di browser </body> </html>

Format Font HTML

Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:

<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face="Verdana">Judul dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>
Untuk membuat ukuran (size):
<h1><font size="5">Judul dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>
Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>

Format text HTML

Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:
<html> 
<head> 
<title>Selamat Datang di Websiteku</title> 
</head> 
<body> 
Ini adalah halaman HTML pertamaku. 
<p>Aku sedang membuat paragraf dan ini contohnya.</p> 
<p>Ini contoh paragraf yang lainnya.</p> 
<p>Ini juga paragraf mm...tapi de-<br> ngan baris baru.<br> Ini baris baru yang lain.</p> 
</body> 
</html>

Hyperlink HTML

Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:

<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:</p>
<a href="http://www.mp3.com/" target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:</p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:</p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css/">Link ini</a> 

akan membawa anda ke halaman belajar css.
</body>
</html>

Background HTML

Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:
<html> <head></head> <body bgcolor="#FF99FF"> 
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p> <p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p> 
</body> 
</html>

Pemrograman Web

Pengertian Pemrograman Web

Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web.
Pemrograman yang dalam bahasa English adalah programming dan diartikan proses, cara, perbuatan program (secara bahasa indonesia).
Definisi Web : jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. (http://www.artikata.com/arti-201588-web.php).
Orang banyak mengenal web dengan istilah WWW (world wide web), World Wide Web adalah layanan internet yang paling populer saat ini internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW .
WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi . WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP). Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dapat dibuka/dilihat/diterjemahkan dengan Internet Browser . Sintaks HTML mampu memuat konten text, gambar, audio, video dan animasi. Kini internet identik dengan web, karena kepopuleran web sebagai standar interface pada lanyanan-layanan yang ada di internet, dari awalnya sebagai penyedia informasi, ini digunakan juga untuk komunikasi dari email sampai dengan chatting, sampai dengan melakukan transaksi binsin (commerce) (Betha Sidik,Ir, Pemrograman web dengan HTML, Informatika Bandung, 2005) Banyak keuntungan yang diberikan oleh Aplikasi berbasis Web dari pada aplikasi berbasis destop, sehingga aplikasi berbasis web telah diadopsi oleh perusahaan sebagai bagian dari strategi teknologi informasinya, karena beberapa alasan :
Akses informasi mudah,
Setup server lebih mudah
Informasi mudah didistribusikan
Bebas platform,
informasi dapat di sajikan oleh browser web pada sistem operasi mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan

Cara kerja pemrograman web

Sebelum menjelaskan cara kerja pemrograman web, sebaiknya anda mengetahui tentang HTML bahwa HTML bukan bahasa pemrograman tapi adalah markup language (bahasa penandaan yang terdiri dari TAG). HTML hanya mendeskripsikan bahwa bagian tertentu dalam sebuah halaman web adalah isi yang harus ditampilkan oleh browser dengan cara tertentu.
Bagaimana cara kerja pemrograman web? Secara sederhana pemrograman web hanya dilakukan dengan menyisipkan perintah diantara TAG HTML. Misal :

<html>
<head>
<title>Contoh</title>
</head>
<body>
<?php
   echo date("d/m/Y");
?>
</body>
</html> 

Pada saat kita mengakses halaman tersebut, web server langsung merespon apa yang kita minta dengan melakukan proses parsing (membaca isi halaman baris perbaris) dan jika menemukan baris perintah bahasa pemrograman maka web server akan mengeksekusi/menjalankan perintah tersebut dan setelah semua selesai baru akan mengirimkannya ke browser. Contoh diatas web server akan mengirimkan hasil eksekusi baris perintah echo date("d/m/Y") dalam bentuk tanggal dinamis yang diangap sebagai bagian dari HTML yang bersifat statis.

Apa yang dapat dilakukan dengan pemrograman web

1. Pemrograman web memungkinkan kita dapat membuat halaman web yang dinamis dengan perintah-perintah yang cukup sederhana tapi dapat menghasilkan informasi yang beragam.
2. Pemrograman web dapat melakukan interaksi sehingga pengguna dapat memperoleh informasi yang sesuai/relevan seperti pencarian, pengiriman data dll.
3. Pemrograman web dapat dihubungkan dengan berbagai macam basis data/database seperti mysql, oracle, sql server dll

Bahasa pemrograman apa saja yang dapat digunakan untuk pemrograman web

Bisa dikatakan hampir semua bahasa pemrograman dapat digunakan untuk pemrograman web asalkan bahasa pemrograman tersebut bisa bekerja dalam web server dan dapat menciptakan HTML, XHTML, CSS, JavaScript, dan XML. Beberapa bahasa pemrograman web yang populer diantaranya yaitu : PHP, ASP.NET, Ruby on Rails, Perl, ASP classic, Python, danJSP.

selamat datang

selamat datang di blog saya,  semoga bermanfaat .