O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Pengenalan web minggu kedua

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Pengenalan web minggu kedua

  1. 1. Pemrograman Web (Teori) HTMLWawan Darmawan, S.Komdarmawan.wawan@gmail.com STMIK MUHAMMADIYAH JAKARTA - 2012
  2. 2. Pengantar• Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, yakni dengan menggunakan editor HTML berjenis WYSIWYG seperti Microsoft FrontPage, Dreamweaver, Adobe PageMill atau Netscape Composer, namun sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Terutama agar anda bisa memanfaatkan secara optimal berbagai fasilitas browser dan mengingat sejumlah kelemahan yang terdapat pada editor WYSIWYG seperti di atas.• Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML. STMIK MUHAMMADIYAH JAKARTA - 2012
  3. 3. Apa itu HTML• HTML (Hypertext Markup Language) adalah bahasaprogram yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web.• Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut taguntuk menjadi dokumen HTML (file *.htm atau*.html).• Oleh karena itu, untuk membuat dokumen HTML, andabisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word. STMIK MUHAMMADIYAH JAKARTA - 2012
  4. 4. • HTTP (hypertext transfer protocol) merupakan protokolyang digunakan untuk mentransfer data antara webserver ke web browser. Protokol ini mentransferdokumen-dokumen web yang ditulis atau berformatHTML (hypertext markup language).• Dikatakan markup language karena HTML berfungsiuntuk memformat file dokumen teks biasa untuk bisaditampilkan pada web browser sesuai keinginan. Haltersebut dapat dilakukan dengan menambah elemenatau sering disebut sebagai tag-tag STMIK MUHAMMADIYAH JAKARTA - 2012
  5. 5. Mengenal TAG• Tag awal HTML <HTML> <BODY> </BODY> </HTML>•Isi dari dokumen HTML yang sesungguhnyaadalah yang ditulis diantara tag <BODY>. STMIK MUHAMMADIYAH JAKARTA - 2012
  6. 6. • Warna pada HTML - Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol STMIK MUHAMMADIYAH JAKARTA - 2012
  7. 7. Warna HeksadesimalWhite #FFFFFFBlack #000000Red #FF0000Green #00FF00Blue #0000FFMagenta #FF00FFCyan #00FFFFYellow #FFFF00Aquamarine #70DB93Chocolate #5C3317Violet #9F5F9FBrass #B5A642Copper #B87333Pink #FF6EC7Orange #FF7F00<HTML> <BODY BGCOLOR="#FFFF00" TEXT="#FF0000"> Tulisan ini akan tampak dalam browser. </BODY></HTML> Tulisan ini akan tampak dalam browser STMIK MUHAMMADIYAH JAKARTA - 2012
  8. 8. • Heading, Paragraph dan Break - Tag heading <hx> berfungsi untuk memformat heading ( judul dan sub-judul ) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>. - Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraph dalam halaman web anda. Dalam elemen paragraph terdapat atribut : align = [left | center | right] yang berfungsi sebagai pengaturan perataan paragraph, jadi cukup pilih salah satu dari ketiga pilihan tanpa diberi kurung buka dan tutup, sebagai default-nya adalah left. Anda dapat memilih perataan kiri, tengah atau kanan. - Tag paragraph <br> berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Tag Break tidak memerlukan tag penutup break. - Tag Horisontal Ruler <hr> berfungsi untuk menampilkan garis horizontal di dalam halaman web anda. Tag Horisontal Ruler tidak memerlukan elemen penutup </hr>. (standarisasi terbaru, semua tag pembuka memakai tag penutup). STMIK MUHAMMADIYAH JAKARTA - 2012
  9. 9. <HTML><BODY><H1>Header level 1</H1> Header level 1<H2>Header level 2</H2> Header level 2 <HTML><H3>Header level 3</H3> Header level 3 <BODY><H4>Header level 4</H4> Header level 4 Baris pertama<H5>Header level 5</H5> Header level 5 <BR>Baris kedua<H6>Header level 6</H6> Header level 6 <BR>Baris ketiga</BODY> </BODY></HTML> </HTML> Baris pertama Baris kedua Baris ketiga STMIK MUHAMMADIYAH JAKARTA - 2012
  10. 10. • Font pada HTML - Untuk memodifikasi font digunakan tag <font> </font> - Atribut untuk font yaitu: • color=“#FF0000” • size=“7” • face=“verdana, arial”• Image pada HTML - Menggunakan <image src=“x.jpg”> - Memiliki atribut antara lain : - src→lokasi gambar yang akan ditampilkan - width→ukuran lebar gambar - height→ukuran tinggi gambar - alt→deskripsi tentang gambar - title→judul gambar STMIK MUHAMMADIYAH JAKARTA - 2012
  11. 11. <html> <head> <title>Minggu 5</title> </head> <body> <p align="right"> <font size="5" color="green" face="Verdana, Arial"> Tulisan ini berwarna hijau, berukuran 7, dan jenisnya Verdana </font> </p> <p align="center"> <font size="5" color="red" face="Courier, Arial"> Tulisan ini berwarna hijau, berukuran 7, dan jenisnya Verdana </font> </p> <p align="left"> Paragraf Rata kiri </p> <img src="Sunset.jpg" width="150" height="115" align="middle" hspace="200" vspace="50" alt="gambar" border="10"> Jarak bagian kanan<BR> Jarak bagian bawah<BR> </body></html> STMIK MUHAMMADIYAH JAKARTA - 2012
  12. 12. HTML 5STMIK MUHAMMADIYAH JAKARTA - 2012
  13. 13. What’s New???• Semantic elements: header, footer, section, articles, etc• Canvas (for drawing)• Local storage• Audio & Video Elements STMIK MUHAMMADIYAH JAKARTA - 2012

×