HTML & CSS Pemrograman Web Rajif Agung Yunmar, S.Kom
Istilah-Istilah (Wikipedia) World Wide Web Kumpulan server web dari seluruh dunia yang menyediakan data dan informasi untuk dapat digunakan bersama. Website Sejumlah halaman web yang memiliki topik saling terkait, terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Halaman web Berkas yang ditulis sebagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML, atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip.
Website Road Map (Nova Spivack )
Web Architecture Server Interconnection Domain Name Server Web Server Client
Web Architecture (Cont.) Web Server DNS Server Client
Web Browser Menampilkan dan melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server web. Menterjemahkan kode yang dikirim dari web server untuk ditampilkan ke user.
Web Browser Statistic Internet Explorer 22.9% Firefox 39.7% Chrome 30.5% Safari 4.0% Opera 2.2%
HTML Dikembangkan Tim Berners-Lee pada 1990 Menggabungkan hypertext dan internet
HTML Digunakan untuk membuat suatu halaman web Bukan bahasa pemrograman Terdiri dari markup (penandaan) dengan simbol lebih kecil ( < ) dan dan lebih besar ( > ) yang biasa disebut tag
HTML vs. XHTML Tag harus ditulis dengan huruf kecil Terdapat penutup untuk setiap tag Membuka dan menutup tag pada sarang yang benar Atribut tag ditulis dengan huruf kecil dan memakai tanda petik
HTML Element Komponen penyusun terkecil dari sebuah dokumen HTML Element Tag Pembuka Tag Penutup <p align="center">... </p> Name Value Content Atribut
HTML Basic Structure <html> <head> </head> <body> </body> </html> Head Body
Formatting HTML Document Heading Paragraph Break HR PRE Etc..
Heading Memberikan heading sebuah dokumen Type Level 1..6 Syntax: <h#>... </h#>
Heading Example <html> <head> <title>the Heading Element</title> </head> <body> <h1>this is a level one heading.</h1> <h2>this is a level two heading.</h2> <h3>this is a level three heading.</h3> <h4>this is a level four heading.</h4> <h5>this is a level five heading.</h5> <h6>this is a level six heading.</h6> </body> </html>
Paragraph Membuat paragraf Syntax: <p>... </p>
Paragraph Example <html> <head> </head> <body> </html> <title>gathotkaca</title> <p> </p> </body> Alkisah, Gathot Kaca adalah kesatria sakti anak dari Bima dan Nagagini dari Pringgondani. Kecepatan terbang Gathotkaca seperti kilat da liar seperti halilintar. <br /> Tiada senjata yang dapat menembus kulitnya, kecuali senjata Kunta Wijayadanu milik Adipati Karna yang sengaja dibuat khusus untuk membunuhnya.
TABLE Membuat tabel <table> mendefinisikan sebuah tebel <tr> mendefinisikan baris tabel <th> mendefinisikan judul kolom <td> mendefinisikan isi tiap kolom
TABLE EXAMPLE <table border="1"> <tr> <th>kolom 1</th> <th>kolom 2</th> <th>kolom 3</th> </tr> <tr> <td>baris 1 kolom 1</td> <td>baris 1 kolom 2</td> <td>baris 1 kolom 3</td> </tr> <tr> <td>baris 2 kolom 1</td> <td>baris 2 kolom 2</td> <td>baris 2 kolom 3</td> </tr> </table>
Formatting Character Bold Italic Underline Strike Font Format Etc.
Formatting Character Example <html> <head> </head> <body> </html> <title>kerajaan Alengka Diraja</title> <p> <em>alengka Diraja</em> adalah sebuah negeri yang sangat indah dan damai. Didirikan oleh <strong>bathara Wiswakarma</strong> yang jebolan Teknik Arsitektur ITB. Istananya berlapiskan <font color="#ffe331" size="14px">emas</font> pinatik. </p> <p> Namun semua itu berubah seketika saat <u>negara Api</u> menyerang.. </p> </body>
Image Memasukkan gambar kedalam dokumen HTML Syntax: <img src="somelocation/image_name.jpg" />
LINK Mengaitkan antar halaman web Syntax: <a href="http://website.com/location.html">linked Me</a>
CSS Menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman. Memisahkan antara isi dan presentasi. Bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen XHTML yang diberikan. Warna, font, text size, background, susunan elemen pada halaman dan seluruh aspek presentasi isi, diatur oleh CSS.
Writing Rules Berisi set intruksi yang memerintahkan browser untuk mengikuti aturan. Mengubah tampilan elemen XHTML berdasarkan pada nilai-nilai yang diberikan. Rule Selector Declaration body { background-color: gray; } Property Value
Inline Styles Deklarasi CSS atribut pada elemen. Tidak dibangun sebagai aturan, dan tidak ada selector. Properti dan nilainya melekat langsung pada elemen. Contoh: <h2 style="text decoration:underline;">pandawa</h2> <p style="color:blue;">nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p>
Embedded Style Sheets Menanamkan aturan CSS dalam elemen head dari dokumen. Aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.
Embedded Style Sheets (Cont.) <html> <head> <style type="text/css"> h2 { text decoration:underline; } p { color:blue; }.example { background:yellow;color:red; } </style> </head> <body> <h2>pandawa</h2> <p>nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p> <p>namun, <span class="example">kesetiaan</span> mereka pada Pandawa tak pernah goyah.</p> <body> </html>
External Style Sheets Menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan dokumen melalui elemen head File style sheet text disimpan menggunakan ektensi.css Contoh: <head> </head> <link rel="stylesheet" type="text/css" href="style.css" />
Any Question?
I Give You Question