KOMPUTER APLIKASI IT XHTML & CSS MODUL 01

Presentasi berjudul: "KOMPUTER APLIKASI IT XHTML & CSS MODUL 01"— Transcript presentasi:

1 KOMPUTER APLIKASI IT XHTML & CSS MODUL 01

2 Blog : http://amarullz.blog.unikom.ac.id/ Kuliah Online : amarullz
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 PERKENALAN & INFO KONTAK Nama : Ahmad Amarullah Blog : Kuliah Online : amarullz Kampus Online : amarullz Facebook : Face2Face : Unikom Center

3 Kependekan dari Interconnected Networking
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 APA ITU INTERNET ? Kependekan dari Interconnected Networking Jaringan Komputer Dunia yang terhubung dengan TCP/IP Memiliki Beragam Layanan, Diantaranya Website, , FTP dan Sebagainya. Internet adalah Infrastruktur untuk melakukan koneksi dari satu komputer ke komputer lainnya.

4 Salah-satu Layanan di Internet Memerlukan Browser Untuk Mengaksesnya
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 APA ITU WEBSITE ? Salah-satu Layanan di Internet Memerlukan Browser Untuk Mengaksesnya Berupa Halaman-halaman situs yang didesign sedemikian rupa. Memiliki beragam kegunaan, dari mulai sarana Berita, Pencarian, Jejaring Sosial, Streaming Video sampai File Sharing.

5 Memiliki Alamat yang biasanya dimulai dengan http://
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CIRI-CIRI WEBSITE Memiliki Link yang dapat di klik pada halamannya untuk melakukan Navigasi Memiliki Alamat yang biasanya dimulai dengan Memiliki design unik di tiap-tiap website. Biasanya memiliki gambar dan teks baik itu berupa artikel, dan sebagainya.

6 Search Engine : Google Search, Bing, Yahoo! Search.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 JENIS & CONTOH WEBSITE Jejaring Sosial : Facebook, Twitter, Kampus Online Unikom, Google+, Koprol, MySpace. Search Engine : Google Search, Bing, Yahoo! Search. Content/News : Blog, Detik, CNN, Oke Zone. Webmail : Gmail, Yahoo! Mail, Hotmail. File Sharing/Video : YouTUBE, 4Shared, RapidShare. Lain-lain : Profil Perusahaan, Portofolio, Web Pribadi, Jual-Beli (eBay, Amazon), dan sebagainya.

7 Penemu : Tim Berners Lee ( CERN ) - 1989.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 SEJARAH WEBSITE Penemu : Tim Berners Lee ( CERN ) Dari Ide dan Implementasi yang sederhana agar dapat menghubungkan Informasi antar komputer. CERN Meluncurkan web pada tahun 1991 Data yang dikirim berupa File yang berisi Tag-tag yang selanjutnya disebut HTML. Standarisasi Web sekarang dipegang oleh W3C (World Wide Web Consortium), dan Tim ikut serta di dalamnya.

8 Software untuk mengakses Website.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 APA ITU BROWSER ? Software untuk mengakses Website. Bertugas untuk mentranslate ( interpretasi ) kode HTML menjadi tampilan yang dapat di akses oleh pengguna ( surfer ). Merupakan perantara antara Server Web dan Pengguna Web.

9 Memiliki Address Bar untuk memasukan alamat website.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CIRI-CIRI UMUM BROWSER Memiliki Address Bar untuk memasukan alamat website. Biasanya memiliki tombol Back, Forward, Refresh, Home dan Sebagainya. Area terbesar dalam aplikasi adalah Tampilan Web. Browser Modern dewasa ini dilengkapi oleh Tab, Pencarian dan Bookmark.

10 Internet Explorer dari Microsoft Firefox dari Mozilla.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 BROWSER YANG UMUM DIGUNAKAN Internet Explorer dari Microsoft Firefox dari Mozilla. Chrome dari Google. Safari dari Apple. Opera dari Opera Inc.

11 Opera Mini & Mobile dari Opera Inc. Android Browser pada Android
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 BROWSER LAINNYA Selain pada PC Basis GUI, Browser juga terdapat pada device seperti HandPhone, Tablet, dan Basis Text (Terminal). Opera Mini & Mobile dari Opera Inc. Android Browser pada Android iOS Safari pada iPhone IE Mobile - Pada Windows Mobile/Phone Lynx, Links, wget - Pada Terminal ( LINUX )

12 Bahasa Markup untuk sebuah Website.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 APA ITU XHTML ? Bahasa Markup untuk sebuah Website. Semua tampilan website pada dasarnya merupakan dokumen dengan format HTML. Merupakan File Teks Biasa yang dapat di edit dengan text editor seperti Notepad, UltraEdit, Notepad+, Gedit, VIM, dan sebagainya. Terdapat juga aplikasi yang khusus untuk mendesign sebuah web seperti : Adobe Dreamweaver.

13 Berisi Tag-tag  <html></html>
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CIRI-CIRI XHTML Berisi Tag-tag  <html></html> Bila dibuka dengan Browser akan memiliki tampilan dan format baik pada tulisan atau layout. Biasanya memiliki nama extensi .html pada nama filenya. Memiliki 2 Bagian, yaitu HEAD dan BODY. Pada Browser Source Code dapat dilihat biasanya dengan mengakses menu View Source.

14 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01
APA ITU CSS ? Merupakan Cara Standard untuk melakukan pemformatan/styling pada XHTML (Halaman Web). Dengan CSS, designer dapat dengan mudah melakukan pemformatan Huruf, Teks, Alignment, Positioning, Border, Background, dan sebagainya. CSS menupakan standard pemformatan dari W3C dikarenakan kekeliruan HTML-3 dalam penggunaan Tag untuk melakukan styling.

15 Memiliki Struktur seperti: h { font-size: 14px; color: red; }
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CIRI-CIRI DOKUMEN CSS Memiliki Struktur seperti: h { font-size: 14px; color: red; } Merupakan File Teks Biasa yang dapat di edit dengan text editor seperti Notepad, UltraEdit, Notepad+, Gedit, VIM, dan sebagainya. Memiliki ekstensi .css pada nama filenya.

16 Buka Text Editor – UltraEdit
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CARA EDITING XHTML Buka Text Editor – UltraEdit Ketik Kode Berikut: <html> <head> <title>XHTML PERTAMA SAYA</title> </head> <body> Ini Adalah <b>XHTML</b> Pertama Saya </body> </html> Lalu simpan dengan nama file latihan01.html Kemudian buka dengan menggunakan Browser.

17 Kemudian Refresh Browser Anda.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 CARA EDITING CSS Tambahkan kode berikut antara <head> pada file XHTML yang telah dibuat: … <head> <title>XHTML PERTAMA SAYA</title> <style type=“text/css”> b { color:blue; } </style> </head> … Lalu simpan Ctrl+S Kemudian Refresh Browser Anda.

18 Gunakan < untuk <, > untuk >, dan & untuk &.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 XHTML ENTITIES Karakter < dan > merupakan karakter tag, Jadi bagaimana untuk menampilkan karakter-karakter tersebut pada Tampilan Browser? XHTML memiliki fasilitas HTML Entities, yang cirinya dimulai dengan karakter “&” dan diikuti jenisnya, kemudian diakhiri dengan titik koma “;” Gunakan < untuk <, > untuk >, dan & untuk &. HTML Entities Lengkap akan dipelajari pada pertemuan selanjutnya.

19 <title> - Untuk Menentukan Judul.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 TAG-TAG XHTML DASAR <title> - Untuk Menentukan Judul. <b> Bold, <em> Italic, <u> Underline <p> Paragraf <h1> sampai <h6> untuk Heading <br /> Ganti Baris, <hr /> Garis Pembatas

20 <tag /> Tag yang berdiri sendiri.
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 JENIS-JENIS TAG <tag /> Tag yang berdiri sendiri. <tag></tag> Tag yang berpasangan.

21 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01
STRUKTUR TAG Dimulai dengan <html> sebagai tanda bahwa dokumen tersebut merupakan XHTML Diikuti oleh <head> sebagai area untuk tag-tag non display. Diikuti oleh <body> sebagai area untuk tag-tag display. Strukturnya Sebagai Berikut: <html> <head> …. TAG-TAG HEAD … </head> <body> ….. TAG-TAG TAMPILAN ---- </body> </html>

22 TERIMA KASIH DAN SELAMAT BELAJAR PENUTUP
KOMPUTER APLIKASI IT - XHTML & CSS MODUL 01 PENUTUP TERIMA KASIH DAN SELAMAT BELAJAR