CSS, PHP, dan HTML

CSS

 Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS adalah kode untuk mengatur bagaimana elemen HTML ditampilkan dalam suatu halaman website. Elemen HTML dimaksud di sini adalah tag-tag HTML misalnya, tag <body>, , <table>, <div>
 tag tag atau kode HTML lainnya yang digunakan dalam mendesain HTML.
Di Mana dan Bagaimana Menulis Kode CSS

Di mana kita bisa menulis kode-kode CSS? sama halnya seperti HTML, kita menulis kode CSS di teks editor seperti notepad atau bisa langsung di aplikasi pembuat website seperti MS Frontpage atau Dreamweaver.

Kode CSS biasanya di tulis di file yang sama dengan file tempat kode-kode HTML kita, yang bisa saja ber-ekstensi .html, .php. .asp

Contoh, file : index.html, kalian ketik kode di bawah di Notepad, lalu save as index.html. Jangan lupa save as type: All File (*.*)

<html>
<head>
<style>
p{font-size:17pt;}
</style>
</head>
<body>
Ini adalah paragraf yang diformat menggunakan CSS
<br />

<div style="border: red 1px solid;">
Ini juga di atur menggunakan CSS, di mana kode CSS langsung ditulis di tag atau elemen HTML
</div>
</body>
</html>

Jika kita lihat kode di atas:
Kode CSS bisa ditulis di antara tag <style> dan <style>
Kode CSS juga bisa ditulis langsung di dalam element HTML yang ingin atur formatnya <div style="border:red 1px solid">

Output dari kode di atas adalah:

Belajar CSS

Kode CSS bisa juga di tulis di file terpisah, dengan menyimpannya ber-ekstensi .css

Contoh: ketiklah kode di bawah di notepad lalu simpan dengan nama gaya.css

p{font-size:17pt;}

Lalu bagaimana cara menyatukan file css di atas ke dalam kode HTML kita, cukup menulis kode berikut di dalam kode HTML kita:

<link rel="stylesheet" type="text/css" href="highlight.css">

Syntax CSS

Setelah kalian tahu di mana dan bagaimana cara menulis kode CSS, sekarang kita mulai belajar kode CSS. Aturan sintaks penulisan kode CSS adalah sebagai berikut:

selector {property: value}

Selector: adalah tag atau element HTML yang ingin diatur gaya atau formatnya, misalnya p, table, body, div dan lainnya
Property: adalah kode CSS untuk mengatur format element HTML. Misalnya font-size, border, background-color, dan lainnya.
Value: adalah nilai dari property CSS di atas, misalnya nilai font-size kita set 17pt
Lebih Lanjut dengan Selector CSS

Jika kita lihat sintaks CSS di atas, selector adalah tag atau elemen HTML yang akan di atur. Ada macam-macam cara memilih selector:

    Selector Normal
    Yaitu, kamu langsung menulis tag HTML apa yang akan diatur format CSS nya.
    Contoh:

    body {color: black}

    p {font-family: "sans serif"}

    p
    {
    text-align: center;
    color: black;
    font-family: arial
    }

    Selector Grouping
    Anda bisa menggroup-kan elemen-elemen HTML yang akan diformat CSS nya, mungkin karena formatnya sama. Contoh:

    h1,h2,h3,h4
    {
    color: blue;
    }

    Class Selector
    Biasanya kita ingin mengatur suatu paragraf atau div dengan format yang berbeda-beda, maka kita bisa buat kelas-kelas. Contoh:

    <html>
    <head>
    <style>
    a.menu{color:black;text-decoration:none}
    a.judul{color:blue;font-size:15pt}
    </style>
    </div>
</table>
</body>
    <body>
    <center>
    <a class="menu" href="http://www.blogger.com/index.php">Home</a> |
    <a class="menu" href="http://www.blogger.com/teknologi.php">Teknologi</a> |
    <a class="menu" href="http://www.blogger.com/ekonomi.php">Ekonomi</a>

    <a class="judul" href="http://www.blogger.com/artikel1.html">Ini adalah judul artikel</a>

    </center>
</body>
   

    Pada contoh di atas terlihat kita memilih selector a untuk tag <a href="http://www.blogger.com/blogger.g?blogID=1733603682017083721">, lalu kita buat kelas-kelas dengan cara memberi titik (.) diikuti nama kelas.

    Jika anda membuat kelas, jangan lupa di tag HTML ditambahkan properti class="nama kelas"
    
    ID Selector
    Selain menggunakan kelas, kita juga bisa menggunakan id selector, caranya: kode atau tag HTML yang akan diatur CSSnya kita kasih id, yaitu dengan menambahkan properti id="nama-id" pada tag HTMLnya.
    Contoh:

    <html>
    <head>
    <style>
    #biru {color:blue}
    #hijau {color:green}
    </style>
    </head>
    <body>
    <div id="biru">
Tulisan ini diformat berwarna biru
    </div>
<div id="hijau">
Tulisan ini difromat berwarna hijau
    </div>
</body>
    </html>

Property CSS
Setelah kita mengetahui bagaimana cara memilih elemen atau tag HTML mana yang akan diformat CSS, saatnya kita mengatur format dari HTML. Property CSS adalah kode css untuk mengatur format atau gaya dari elemen HTML yang ingin ditampilkan di halaman website kita
PHP

 1. Pengenalan PHP

Pengertian PHP (Hypertext Proccesor) berdasarkan informasi dari situs resmii PHP, “PHP.net”. PHP (Hypertext Proccesor) merupakan bahasa pemrograman web yang disisipkan dalam script HTML (Hypertext Markup Language) dan banyaknya sintak di dalamnya mirip dengan bahasa C, Java dan Perl. Tujuan dari bahasa ini adalah membantu para pengembang web untuk membuat web dinamis secara cepat. PHP adalah sebuah bahasa Script server-side yang biasa digunakan dengan bahasa HTML atau dokumennya secara bersamaan untuk membuat sebuah aplikasi di web yang sangat banyak kegunaannya. PHP merupakan bahasa yang digunakan dalam HTML dan bekerja pada sisi server, artinya sintak dan perintah yang diberikan akan dijalankan di server tetapi disertakan pada halaman HTML biasa sehingga script-nya tak tampak pada sisi client. HTML adalah bahasa web yang sangat dominan menjadi bahasa penghubung antara (web server) di seluruh dunia. PHP adalah sebuah bahasa script server-side yang bisa digunakan dengan bahasa HTML atau dokumennya secara bersamaan untuk membangun sebuah aplikasi di web yang sangat banyak kegunaannya. PHP di rancang untuk dapat bekerja sama dengan database server dan dibuat sedemikia rupa sehingga pembuatan dokumen HTML yang dapat mengakses database menjadi begitu mudah. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang dijalankan diatas teknologi web browser, tetapi prosesnya secara keseluruhan dijalankan diatas web server. Kekuatan PHP yang paling utama adalah konektifitas database dengan web.

2. Sintaks Dasar PHP

Ada empat macam cara penulisan kode PHP, yaitu :

·       <? Echo (“iniadalahscript PHP\n”); ?>
·       <?phpecho(“inijuga\n”);?>
·       <script language=”php”>
echo (“tulis pake ini jika html editor kamu tidak mengenali PHP”);
</script>
·      <%echo (“kalau yang ini mirip dengan ASP”);%>

Dan yang paling sering digunakan adalah cara pertama dan kedua. Perhatikan bahwa tiap akhir baris harus selalu diberi tanda titik koma (;).
Untuk menambahkan baris komentar pada PHP caranya adalah dengan meletakkan komentar tersebut disebelah kanan tanda// jika komentar satu baris dan diantara/* dan */ jika komentarnya lebih dari satu baris.
<? Echo (“latihanPHP”; //ini adalah contoh komentar satu baris
/* kalau yang ini adalah komentar
Lebih dari satu baris*/
echo (“memang mudah”);
?>


HTML

1. Pengenalan HTML

HTML (Hyper Text Markup Language) adalah merupakan sebuah dasar ataupun pondasi bahasa pemrograman sebuah webpage, HTML muncul sebagai standar baru dari kemajuan dan berkembangnya internet, pada pertama kali muncul internet masih dalam keadaan berbasis text dimana tampilan sebuah halaman web hanya berisikan sebuah text yang monoton tanpa sebuah format dokumen secara visual, bayangkan saja sebuah dokumen text yang dikemas dalam bungkus format seperti tipe file .txt atau sering disebut notepad, tanpa paragraph, satu warna, satu ukuran huruf tanpa gambar serta tidak adanya visual format dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan dalam membaca. Dan selain itu pertama kali muncul internet user mengakses masih menggunakan sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemrograman HTML muncul seiring perkembangan teknologi dan informasi.

2. Struktur Dasar Dokumen HTML

Struktur dasar dokumen HTML adalah sebagai berikut :
  
<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
      Disini penulisan informasi Web
</body>
</html>


Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:

a. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh<body> adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

b. Element

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:
ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar

<p>
<b>
................
</b>
</p>

Contoh penulisan tag-tag yang salah

<p>
<b>
................
</p>
</b>

c. Attribute

Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
> 
.................
</TAG>


Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah 

d. Element HTML

Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:

<html>
..........
</html>


e. Element HEAD

Merupakan kepala dari dokumen HTML. Tag dan tag terletak di antara tag dan tag .
Sintaks:

<head>
...........
</head>

f. Element TITLE

Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:

<title>
.........
</title>

g. Element BODY

Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:

<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi. Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

Komentar

Posting Komentar