1 Tujuan : Memahami dan dapat menggunakan konsep HTML Memahami dan mengenal lebih jauh mengenai HTML 5 Memahami dan dapat menggunakan tag dasar dalam ...
Memahami dan dapat menggunakan konsep HTML Memahami dan mengenal lebih jauh mengenai HTML 5 Memahami dan dapat menggunakan tag dasar dalam HTML
6.1 Definisi HTML HTML adalah sekumpulan kode logika (markup) yang diapit oleh tag (tanda kurung siku) untuk mengatur bagaimana penampilan sebuah dokumen web dan kandungan informasinya. Pemrograman HTML berbeda dengan pemrograman Pascal yang kalian sedang pelajari. HTML tidak butuh variabel layaknya Pascal dan pemrograman lainnya. HTML lebih dititk beratkan untuk bagaimana mengatur format dan tata letak sebuah web page. - HTML disajikan dalam web browser oleh web server - HTML pada umumnya berisi informasi ataupun interface, dan umumnya HTML yang ditampilkan di client bukan merupakan murni source code asli. - HTML bisa hasil dari representasi bahasa pemrograman server side seperti PHP, JSP, NET, ruby dll Seperti contohnya, jika kita membuka sebuah halaman index sebuah web, misalnya "index.php", tetapi jika dilihat di source code nya hanya merupakan sekumpulan kode HTML. Aturan penulisan baku HTML sekarang diatur oleh sebuah organisasi Internasional bernama W3C. Misalnya sebuah web harus dilengkapi minimal elemen head dan body. Untuk menandai elemen, kita menggunakan tag (diawali <, diakhiri >), sedangkan untuk menandai komen digunakan tanda slash bintang (diawali /*, diakhiri */). Secara umum, digambarkan sebagai berikut /*… informasi tentang dokumen, judul webpage, script selain HTML (seperti javascript, CSS)… */ /*…konten web/ segala sesuatu yang akan ditampilkan di browser diletakkan disini… */
Tag dapat mempunyai atribut, yang digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Misalnya : tes
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------: body = elemen tag HTML bgcolor = atribut red = nilai Sedangkan yang tanpa atribut seperti bold , italic , dll. Dengan source kode diatas, maka di halaman web akan berwarna merah, dengan tulisan “tes” bercetak tebal. Ket
6.2 HTML5 HTML5 adalah next generation dari HTML 4.01 / XHTML 1.x. HTML5 akan menjadi standar baru HTML, XHTML dan HTML DOM. HTML5 merupakan hasil kerjasama dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group. Browser modern kebanyakan sudah mendukung HTML5, seperti Safari, Opera 10.6, Mozilla Firefox 3.5, Google Chrome 6.0, dll. Selain itu banyak website yang telah menggunakan HTML 5, seperti Youtube dan Vimeo yang tidak lagi menggunakan flash dalam menampilkan video melainkan menggunakan syntag. Beberapa fitur baru yang ada di HTML5 : Elemen Canvas Untuk menggambar objek di halaman web tanpa menggunakan flash maupun aplet java. Berikut adalah tag untuk membuat canvas dan canvas tidak memiliki kemampuan untuk menggambar sendiri. Menggambar semua harus dilakukan didalam JavaScript. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Elemen audio dan video Dengan elemen ini, plugin pemutar audio dan video tidak dibutuhkan lagi karena sudah ada tag khusus dan codec OGG sudah langsung mengenalinya, sehingga akan menjadi ancaman tersendiri untuk Adobe Flash dan Ms Silverlight. Video Format Format IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6 6.0+ No Ogg = Ogg files with Theora video codec and Vorbis audio codec MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------Contoh Audio Format Format Ogg Vorbis MP3 Wav
IE 9 No Yes No
Firefox 3.5 Yes No Yes
Opera 10.5 Yes No Yes
Chrome 3.0 Yes Yes Yes
Safari 3.0 No Yes Yes
Local offline storage Local storage ini bukan sekedar cookies biasa. Fitur ini mampu menyimpan data dalam ukuran besar sekaligus. Misalnya jika kamu sedang membuka Feed situs-situs favorit di Google Reader, kamu bisa membaca seluruh isi Feed langganan kamu dalam offline mode. Konten elemen baru Seperti article, footer, header, nav, section, calendar, date, time, email, url, search
6.3 Format Content dalam HTML Dalam menulis HTML diperlukan pemformatan yang sesuai sehingga ada pemisahan antara satu kata, kalimat , paragraf dengan yang lainnya. Berikut beberapa format untuk konten teks webpage.
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------a. Heading Adalah format teks tertentu yang digunakan sebagai judul dari suatu paragraph. Heading lebih tepat digunakan untuk tulisan berkedudukan sebagai judul atau sub bab. Ada 6 tingkatan heading.
merupakan tingkatan dengan ukuran font paling besar, sedangkan
sebaliknya.
contoh heading
contoh heading
contoh heading
contoh heading
contoh heading
contoh heading
1l
2 3 4 5 6
Outputnya
b. Paragraph Jika kita ingin menampilkan dokumen yang cukup panjang, misalnya pada suatu postingan blog, maka kita perlu pemisah antar kalimat yang biasa kita sebut paragraph, supaya hasil tulisan menjadi lebih rapih maka diberikan sebuah style dengan CSS.
paragraph
ini adalah sebuah paragraf. kita menggunakan tag paragraf jika kita ingin menuliskan sebuah dokumen yang cukup panjang
Outputnya :
c. Break Adalah tag yang digunakan untuk memenggal atau memotong kalimat atau konten HTML. Hasil yang diperoleh seperti kita menekan “enter” ketika mengetik pada dokumen. Penulisan brak yaitu . d. Horizontal Rule Digunakan untuk membuat garis batas horizontal. Atribut yang dapat digunakan antara lain seperti align, width, size, noshade, color. Penulisan horizontal rule yaitu .
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------6.4 Format Text Format text dalam HTML berfungsi menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dengan bentuk huruf tebal, miring, garisbawah dan semacamnya. 6.4.1 Font Untuk mengatur huruf pda HTML. Namun pada HTML5 sudah tidak support lagi. Tetapi bisa menggunakan CSS. 6.4.1.1 Size Untuk mengatur besarnya huruf, paling kecil 1 dan paling besar 7. Tetapi bisa juga menggunakan ukuran pixel dengan max tidak terbatas 6.4.1.2 Face Untuk mengatur jenis huruf, bisa juga dituliskan lebih dari satu yang artinya mempunyai prioritas yang berbeda-beda. Misalnya diisi string jenis font (jenis font didalam tanda petik dua), seperti “Arial”, “Times New Roman” dan sebagainya. Atribut tersebut memiliki arti huruf yang ditampilkan berjenis Arial, jika tidak terdapat huruf Arial maka akan menjadi jenis Times New Roman. 6.4.1.3 Color Untuk memberi warna pada font. Ada 2 cara yaitu, pertama menuliskan nama warnanya seperti red, green atau blue. Dan cara kedua dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna yang dinyatakan dalam angka hexadecimal. teks ini sizenya 5 teks ini sizenya 7 Jika browser tidak mendukung font Rockwell, maka akan tampil tulisan dengan font Times New Roman
tulisannya jadi warna merah tulisannya jadi warna hijau
tulisannya jadi warna biru
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------Blockquote dan Address Blockquote digunakan untuk menulis kutipan teks, sehingga tulisan akan menjorok kekanan layar browser. Sedangkan Address merupakan salah satu elemen yang umum di dalam suatu dokumen, untuk penulisan alamat perusahaan, personal atau instansi. 6.4.2
Ini contoh petikan/ quotation
untuk kutipan yang berasal dari luar website
Sedangkan untuk petikan tanpa tag paragraph break cukup dengan gausah pake petik contoh penulisan tag address Email me ITTELKOM BANDUNG, Jl. Telekomunikasi Terusan Buah Batu Phone: +022xxxxxx
6.4.3
List Berfungsi untuk menjabarkan point-point informasi. Pada HTML ada 2 buah jenis list yaitu ordered list , dan unordered list
. Selain itu, list juga bisa digunakan sebagai dasar dalam pembuatan menu dengan menggabungkan CSS atau javascript. Ordered list (list terurut), penomeran menggunakan angka 1,2,3,4,…dst ataupun menggunakan sejumlah item dalam list tersebut. Unordered list, bisa diartikan seperti bulleted list dalam aplikasi “Office”, defaultnya berupa noktah. Neste list. Merupakan unordered list yang digunakan secara bersarang, maksudnya di dalam list ada list lagi.
6
Modul HTML Scripting – Tingkat Dasar
-------------------------------------------------------- ordered list
Kopi
Teh
Susu
unordered list
HTML
CSS
PHP
nested list
bahasa pemrograman web
HTML
AJAX
bahasa pemrograman aplikasi
Pascal
C
6.4.4
Link Link berfungsi untuk memberikan sebuah hubungan kepada sebuah konten ataupun dokumen lain baik dalam satu web page ataupun berbeda bahkan ke seluruh konten yang berada pada satu jaringan yang sama. Atribut href sering dipakai. Href merupakan kepanjangan dari hypertext reference. Ketika link ditekan, maka halaman baru akan muncul sesuai value yang dipilih. Dengan menggunakan attribute target, kita bisa menentukan value nya yang berfungsi Valuenya yaitu : _blank : target URL akan dibuka di tab/ jendela baru _self : target URL akan dibuka di tab yang sama _parent : target URL akan dibuka di tab/ dokumen sebelumnya. _top : target URL akan dibuka di tab/ jendela secara full Ada beberapa jenis link, yaitu sbb: 6.4.4.1 Link Absolute Digunakan untuk membuat link ke web page lain yang berada di situs lain. 6.4.4.2 Link Relative Digunakan untuk membuat link ke web page lain yang berada di dalam web tersebut, atau masih berada dalam public_html / htdocs yang sama. 6.4.4.3 Bookmark Digunakan untuk menghubungkan dengan bagian-bagian tertentu yang ada pada dokumen yang sama. Ada 2 tag yang diperlukan dalam mebuat bookmark, yaitu tag untuk
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------link ke bookmark, dan tag untuk bookmarknya sendiri testkampus saya
Media pada HTML Memasukkan konten media selain image sangat memungkinkan pada HTML, dengan menggunakan tag <embed> maka beberapa media yang didukung oleh browser memungkinkan untuk dimunculkan mulai dari sebuah file music sampai sebuah file office. Konten yang dimainkan atau dijalankan dalam tag embed sebenarnya merupakan sebuah perantara, konten atau file tersebut tidak langsung dijalankan dengan browser tetapi dijalankan dengan sebuah plugins yang terinstall pada browser. Misalnya plugin media player, flashplayer, pdf , dll. Beberapa atribut pada tag embed: src : alamat resource untuk di masukkan ke tag embed. width : lebar area untuk resource yang akan dimunculkan. height : tinggi area untuk resource yang akan ditampilkan. align : posisi pada embed misalnya left, right, center. name : nama untuk identitas objek. pluginspage : identitas untuk menandakan dimana software untuk plugins yang di embedkan. pluginurl: url untuk instalasi plugin. hidden : untuk menyembunyikan atau tidak objek. href : membuat link pada objek. target: target pada objek yang akan di tampilkan. autostart: jika konten atau objek yang ditampilkan berjenis music atau film maka akan otomatis dijalankan (start). loop dan playcount : jumlah untuk perulangan pada musik atau film. volume : untuk menset besar suara. control : untuk menampilkan posisi peletakan control controller : untuk menampilkan control pada objek. mastersound : untuk mengidentifikasikan music yang akan digunakan dalam
6
Modul HTML Scripting – Tingkat Dasar
--------------------------------------------------------beberapa grup objek. starttime : seberapa lama musik atau video dimainkan. endtime : untuk menset waktu untuk memberhentikan.
Contoh penggunaan embed untuk file music atau video : <EMBED SRC="MyMovie.mov" HEIGHT=400 WIDTH=600 TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/"/>
Contoh penggunaan embed untuk file pdf: <EMBED height="166" src="document.pdf" type="application/pdf" width="216">
