PEMROGRAMAN WEB       PERTEMUAN I
A. World Wide WebInternet merupkan jaringan global yang menghubungkansuatu network dengan network lainya di seluruh dunia,...
B. Pengenalan HTMLHypertext Markup Language merupkan standard bahasayang di gunakan untuk menampilkan document web, yangbi...
C. Browser dan EditorBrowserBrowser merupakan software yang di install di mesinclient yang berfungsi untuk menterjemahkan ...
D. BASIC TAG HTMLStruktur HTML DocumentDocument HTML bisa di bagi mejadi tiga bagian utama:HTMLSetiap document HTML harus ...
 Basic HTML ElementBlock Level ElementBlock level element yang sering di gunakan :Heading (H1 sampai H6)Paragraf (P) List...
ContohTag        Atribute   Value    Description<UL>       TYPE       SQUARE   Bullet Kotak                      DISC     ...
Horizontal Rules(HR)Horizontal Rule tag digunakan untuk menggambar garishorizontal dalam document HTML. Atribute          ...
Pemformatan Page BreakTag <BR> di gunakan untuk memulai baris baru pada document HTML, tagini fungsinya mirip dengan carri...
ColorColor merupakan attribute yang bisa anda tambahkan padabeberapa element seperti body, font, link dan lainya. Colordi ...
AlignmentAlign attribute digunakan untuk menentukan perataanobject dalam document HTML baik berupa text, object,image, par...
Format textPhysical FormattingTag                      Description<B> ... </B>             Bold text<I> ... </I>          ...
Logical FormattingTag                     Description<EM> ... </EM>          Text miring / <I><STRONG> ...</STRONG>   Text...
LATIHAN – LATIHAN :A. DASAR-DASAR HTML1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaankomentar dan tag <BR> untuk...
2. Menggunakan tag <P> untuk membuat paragraph; tag judul<H1> s/d <H6> untuk pembesaran huruf.   <HTML>   <HEAD>   <TITLE>...
3. Membuat garis horizontal <HR>  <HTML>  <HEAD>  <TITLE>Atribut NOSHADE pada Tag HR</TITLE>  </HEAD>  <BODY>  <H1>UNIVERS...
4. Menggunakan tag <DIV> untuk mengelompokkansejumlah baris teks yang memiliki karakteristik yang sama.    <HTML>    <HEAD...
B. PENGATURAN TEKS1. Penggunaan <PRE> untuk menampilkan teks apa adanya.   <HTML>   <HEAD>   <TITLE>Praformat </TITLE>   <...
2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font),Color (untuk warna) <HTML> <HEAD> <TITLE>Jenis Font...
3. Pengaturan warna background : BGCOLOR <HTML> <HEAD> <TITLE>Warna - Bagian 2</TITLE> </HEAD> <BODY BGCOLOR = "black" TEX...
Upcoming SlideShare
Loading in …5
×

Web dasar i

390 views

Published on

  • Be the first to comment

  • Be the first to like this

Web dasar i

  1. 1. PEMROGRAMAN WEB PERTEMUAN I
  2. 2. A. World Wide WebInternet merupkan jaringan global yang menghubungkansuatu network dengan network lainya di seluruh dunia,TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapatberkomunikasi.World Wide Web (WWW) merupakan bagian dari internetyang paling cepat berkembang dan paling populer. WWWbekerja merdasarkan pada tiga mekanisme berikut:• Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.• Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.• HTML digunakan untuk membuat document yang bisa di akses melalui web.
  3. 3. B. Pengenalan HTMLHypertext Markup Language merupkan standard bahasayang di gunakan untuk menampilkan document web, yangbisa anda lakukan dengan HTML yaitu:• Mengontrol tampilan dari web page dan contentnya.• Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.• Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.• Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.
  4. 4. C. Browser dan EditorBrowserBrowser merupakan software yang di install di mesinclient yang berfungsi untuk menterjemahkan tag-tagHTML menjadi halaman web. Browser yang sering digunakan biasanya Internet Explorer, NetscapeNavigator dan masih banyak yang lainya.EditorProgram yang di gunakan untuk membuat documentHTML, ada banyak HTML editor yang bisa andagunakan diantaranya: Ms FrontPage, Dreamweaver,Notepad
  5. 5. D. BASIC TAG HTMLStruktur HTML DocumentDocument HTML bisa di bagi mejadi tiga bagian utama:HTMLSetiap document HTML harus di awali dan di tutup dengan tagHTML<HTML> </HTML>HEADBagian header dari document HTML di apit oleh tag<HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLEyang menampilkan judul dari halaman pada titlenya browser.Header juga memuat tag META yang biasanya di gunakan untukmenentukan informasi tertentu mengenai document HTML, andabisa menentukan author name, keywords, dan lainyan pada tagMETA.BODYDocument body di gunakan untuk menampilkan text, image link dansemua yang akan di tampilkan pada web page
  6. 6.  Basic HTML ElementBlock Level ElementBlock level element yang sering di gunakan :Heading (H1 sampai H6)Paragraf (P) List Item(LI)List item di gunakan untuk mengelompokkan databaik berurutan (ordered list) maupun yangtidak berurutan (unordered list).Ada dua macam list yang bisa anda tambahkan kedocument HTML:1. Unordered List (Bullet) :2. Ordered List (Numbering)
  7. 7. ContohTag Atribute Value Description<UL> TYPE SQUARE Bullet Kotak DISC Bullet Titik CIRCLE Bullet Lingkaran<OL> TYPE Ii Upper Roman Lower Roman Aa Upercase Lowercase<OL> START n Begin Number
  8. 8. Horizontal Rules(HR)Horizontal Rule tag digunakan untuk menggambar garishorizontal dalam document HTML. Atribute Description Pasition menetukan posisi dari HR, dengan value : canter | right | left. Width Untuk menentukan panjang HR default 100% Size Untuk menentukan tebal dari HR dalam pixel Noshad Efek Bayangan
  9. 9. Pemformatan Page BreakTag <BR> di gunakan untuk memulai baris baru pada document HTML, tagini fungsinya mirip dengan carriage return.FontDengan tag <FONT> anda bisa menentukan format tampilan font dalamdocument HTML seperti color, size, style dan lainya.CONTOH: Attribute Description Color Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff) Size Untuk menentukan ukuran dari font 1 – 7 face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.
  10. 10. ColorColor merupakan attribute yang bisa anda tambahkan padabeberapa element seperti body, font, link dan lainya. Colordi bagi dalam tiga ketegori warna primer yaitu red, greendan blue.Masing-masing color didefinisikan dalam dua digithexadecimal number.#RRGGBBHexadecimal Color#FF0000 Red#00FF00 Green#0000FF Blue#000000 Black#FFFFFF White
  11. 11. AlignmentAlign attribute digunakan untuk menentukan perataanobject dalam document HTML baik berupa text, object,image, paragraph, division dan lain-lain.Value DescriptionLeft Rata kiriRight Rata kananCenter Rata tengahJustify Rata kanan kiri
  12. 12. Format textPhysical FormattingTag Description<B> ... </B> Bold text<I> ... </I> Italic text<U> ... </U> Underline Text<BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal<STRIKE> ... </STRIKE> Untuk memberi garis di tengah text<SUP> ... </SUP> Superscript text<SUB> ... </SUB> Subscript text<CENTER> ... </CENTER> Center document
  13. 13. Logical FormattingTag Description<EM> ... </EM> Text miring / <I><STRONG> ...</STRONG> Text tebal / <B><DEL> ... </DEL> Mencoret text /<STRIKE><INS> ... </INS> Underline text / <U>Preformatted textTag PRE di gunakan untuk menampilkan text sesuaidengan format aslinya.
  14. 14. LATIHAN – LATIHAN :A. DASAR-DASAR HTML1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaankomentar dan tag <BR> untuk ganti baris. <HTML> <HEAD> <TITLE>Latihan HTML</TITLE> </HEAD> <!-- Ini merupakaan suatu komentar --> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML>
  15. 15. 2. Menggunakan tag <P> untuk membuat paragraph; tag judul<H1> s/d <H6> untuk pembesaran huruf. <HTML> <HEAD> <TITLE>Contoh Pengaturan Judul</TITLE> </HEAD> <BODY> <H1 ALIGN = “CENTER”> Teknik Informatika</H1><P> Fakultas Teknik Komputer<BR> Universitas Muslim Indoensia<BR> Makassar </BODY> </HTML>
  16. 16. 3. Membuat garis horizontal <HR> <HTML> <HEAD> <TITLE>Atribut NOSHADE pada Tag HR</TITLE> </HEAD> <BODY> <H1>UNIVERSITAS MUSLIM INDONESIA</H1> <HR SIZE = "10" NOSHADE> Jl. Urip Sumoharjo Km. 05 <BR> Makassar <BR> Indonesia<BR> </BODY> </HTML>
  17. 17. 4. Menggunakan tag <DIV> untuk mengelompokkansejumlah baris teks yang memiliki karakteristik yang sama. <HTML> <HEAD> <TITLE>Tag DIV</TITLE> </HEAD> <BODY> <DIV ALIGN = "RIGHT"> <H1><U>UMI</U></H1> <H2>Jl. Urip</H2> <H2>Makassar</H2> </DIV> <HR> </BODY> </HTML>
  18. 18. B. PENGATURAN TEKS1. Penggunaan <PRE> untuk menampilkan teks apa adanya. <HTML> <HEAD> <TITLE>Praformat </TITLE> </HEAD> <BODY> <H2>Daftar Harga Keladi:</H2> <PRE> Red Flash.........35.000 Red Fire..........60.000 Fannie Munson.....60.000 </PRE> Harga sewaktu-waktu bisa berubah. </BODY> </HTML> Coba hilangkan tag <PRE> dan lihat apa perbedaanya.
  19. 19. 2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font),Color (untuk warna) <HTML> <HEAD> <TITLE>Jenis Font</TITLE> </HEAD> <BODY> Normal: 012345ABCD<BR> <FONT COLOR="blue" FACE = "Arial">Arial: 012345ABCD</FONT> <BR> <FONT COLOR="green" FACE = "Courier" SIZE="5"> Courier: 012345ABCD</FONT> <BR> </BODY> </HTML>
  20. 20. 3. Pengaturan warna background : BGCOLOR <HTML> <HEAD> <TITLE>Warna - Bagian 2</TITLE> </HEAD> <BODY BGCOLOR = "black" TEXT = "gray"> Normal<BR> <FONT COLOR = "blue">Warna Biru</FONT><BR> <FONT COLOR = "green">Warna Hijau</FONT><BR> <FONT COLOR = "red">Warna Merah</FONT><BR> <FONT COLOR = "yellow">Warna kuning</FONT><BR> </BODY> </HTML>

×