Pengenalan web minggu kedua
Download as pptx, pdf0 likes347 views
Dokumen ini menjelaskan tentang HTML sebagai bahasa pemrograman untuk membuat halaman web, termasuk cara penggunaan tag dan elemen dasar. Selain itu, dibahas juga tentang warna, font, dan berbagai tag yang digunakan dalam HTML. Terakhir, dokumen tersebut menyebutkan fitur baru dalam HTML5 seperti elemen semantik dan kemampuan menyimpan data lokal.
![• 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](https://image.slidesharecdn.com/pengenalanwebminggukedua-121124165416-phpapp01/85/Pengenalan-web-minggu-kedua-8-320.jpg)
Pengenalan web minggu kedua
- 1. Pemrograman Web (Teori) HTML Wawan Darmawan, S.Kom darmawan.wawan@gmail.com STMIK MUHAMMADIYAH JAKARTA - 2012
- 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. Apa itu HTML • HTML (Hypertext Markup Language) adalah bahasa program 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 tag untuk menjadi dokumen HTML (file *.htm atau *.html). • Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word. STMIK MUHAMMADIYAH JAKARTA - 2012
- 4. • HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language). • Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambah elemen atau sering disebut sebagai tag-tag STMIK MUHAMMADIYAH JAKARTA - 2012
- 5. Mengenal TAG • Tag awal HTML <HTML> <BODY> </BODY> </HTML> •Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. STMIK MUHAMMADIYAH JAKARTA - 2012
- 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. Warna Heksadesimal White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Aquamarine #70DB93 Chocolate #5C3317 Violet #9F5F9F Brass #B5A642 Copper #B87333 Pink #FF6EC7 Orange #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. • 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. <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. • 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=/slideshow/pengenalan-web-minggu-kedua/15331726/“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. <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=/slideshow/pengenalan-web-minggu-kedua/15331726/"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. HTML 5 STMIK MUHAMMADIYAH JAKARTA - 2012
- 13. What’s New??? • Semantic elements: header, footer, section, articles, etc • Canvas (for drawing) • Local storage • Audio & Video Elements STMIK MUHAMMADIYAH JAKARTA - 2012