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

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                                 

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                                 

           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                                           <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..               Image ● Memasukkan gambar kedalam dokumen HTML ● Syntax: LINK ● Mengaitkan antar halaman web ● Syntax: Linked Me 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: 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. Embedded Style Sheets (Cont.)           <style type="text/css">          h2 { text­decoration:underline; }          p { color:blue; }          .example { background:yellow;color:red; }                       Pandawa        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:      Any Question? I Give You Question × Report "HTML & CSS. Pemrograman Web. Rajif Agung Yunmar, S.Kom" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close