1 HTML & CSS Pemrograman Web Rajif Agung Yunmar, S.Kom2 Istilah-Istilah (Wikipedia) World Wide Web Kumpulan server web dari seluruh dunia yang menyedi...
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.)
DNS Server
Web 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
..... Name
Value
Atribut
Content
HTML Basic Structure … … … … … …
Head
Body
Formatting HTML Document ●
Heading
●
Paragraph
●
Break
●
HR
●
PRE
●
Etc..
Heading ●
Memberikan heading sebuah dokumen
●
Type ➢
●
Level 1..6
Syntax: ...
Heading Example The Heading Element
This is a level one heading.
This is a level two heading.
This is a level three heading.
This is a level four heading.
This is a level five heading.
This is a level six heading.
Paragraph ●
Membuat paragraf
●
Syntax:
...
Paragraph Example Gathotkaca
Alkisah, Gathot Kaca adalah kesatria sakti anak dari Bima dan Nagagini dari Pringgondani. Kecepatan terbang Gathotkaca seperti kilat da liar seperti halilintar. Tiada senjata yang dapat menembus kulitnya, kecuali senjata Kunta Wijayadanu milik Adipati Karna yang sengaja dibuat khusus untuk membunuhnya.
TABLE ●
Membuat tabel
●
mendefinisikan sebuah tebel
●
mendefinisikan baris tabel
●
mendefinisikan judul kolom
●
mendefinisikan isi tiap kolom
TABLE EXAMPLE
Kolom 1
Kolom 2
Kolom 3
Baris 1 kolom 1
Baris 1 kolom 2
Baris 1 kolom 3
Baris 2 kolom 1
Baris 2 kolom 2
Baris 2 kolom 3
Formatting Character ●
Bold
●
Italic
●
Underline
●
Strike
●
Font Format
●
Etc.
Formatting Character Example Kerajaan Alengka Diraja
<em>Alengka Diraja adalah sebuah negeri yang sangat indah dan damai. Didirikan oleh <strong>Bathara Wiswakarma yang jebolan Teknik Arsitektur ITB. Istananya berlapiskan emas pinatik.
Namun semua itu berubah seketika saat Negara Api menyerang..
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: Pandawa Nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.
Embedded Style Sheets ●
●
Menanamkan aturan CSS dalam elemen head dari dokumen. Aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.
Nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.
Namun, <span class="example">kesetiaan mereka pada Pandawa tak pernah goyah.
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:
