HTML & CSS. Pemrograman Web. Rajif Agung Yunmar, S.Kom

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML & CSS. Pemrograman Web. Rajif Agung Yunmar, S.Kom"

Fanny Budiman
7 tahun lalu
Tontonan:

1 HTML & CSS Pemrograman Web Rajif Agung Yunmar, S.Kom

2 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.

3 Website Road Map (Nova Spivack )

4 Web Architecture Server Interconnection Domain Name Server Web Server Client

5 Web Architecture (Cont.) Web Server DNS Server Client

6 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.

7 Web Browser Statistic Internet Explorer 22.9% Firefox 39.7% Chrome 30.5% Safari 4.0% Opera 2.2%

8 HTML Dikembangkan Tim Berners-Lee pada 1990 Menggabungkan hypertext dan internet

9 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

10 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

11 HTML Element Komponen penyusun terkecil dari sebuah dokumen HTML Element Tag Pembuka Tag Penutup <p align="center">... </p> Name Value Content Atribut

12 HTML Basic Structure <html> <head> </head> <body> </body> </html> Head Body

13 Formatting HTML Document Heading Paragraph Break HR PRE Etc..

14 Heading Memberikan heading sebuah dokumen Type Level 1..6 Syntax: <h#>... </h#>

15 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>

16 Paragraph Membuat paragraf Syntax: <p>... </p>

17 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.

18 TABLE Membuat tabel <table> mendefinisikan sebuah tebel <tr> mendefinisikan baris tabel <th> mendefinisikan judul kolom <td> mendefinisikan isi tiap kolom

19 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>

20 Formatting Character Bold Italic Underline Strike Font Format Etc.

21 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>

22 Image Memasukkan gambar kedalam dokumen HTML Syntax: <img src="somelocation/image_name.jpg" />

23 LINK Mengaitkan antar halaman web Syntax: <a href=" Me</a>

24 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.

25 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

26 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>

27 Embedded Style Sheets Menanamkan aturan CSS dalam elemen head dari dokumen. Aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.

28 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>

29 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" />

30 Any Question?

31 I Give You Question

dokumen-dokumen yang mirip

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah