Sejarah dan Pengertian HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud dengan Semantic Web? Semantic berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni pembelajaran untuk memahami penanda.Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya.

Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan teknologi benar-benar cepat sekali berubah.

Tujuan dibuatnya HTML5 antara lain:

1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
3. Penanganan kesalahan yang lebih baik.
4. Lebih banyak markup untuk menggantikan scripting.
5. HTML5 merupakan perangkat mandiri.

Fitur baru dalam HTML5:

• Unsur kanvas untuk menggambar.
• Video dan elemen audio untuk media pemutaran.
• Dukungan yang lebih baik untuk penyimpanan secara offline.
• Elemen  konten yang  lebih  spesifik, seperti  artikel, footer, header,
  navigation, section.
• Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Beberapa kelebihan yang dijanjikan pada HTML5:

• Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
• Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
• Integrasi (‘inline’) dengan doctype yang lebih sederhana.
• Penulisan kode yang lebih efisien.
• Konten yang ada di situs lebih mudah terindeks oleh search engine.

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

Markup

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font>dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

API baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs) antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

• Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.
• Timed media playback
• Media penyimpanan luring (aplikasi web luring)
• Penyuntingan dokumen
• Drag and Drop
• Cross-document messaging
• Manajemen sejarah kunjungan penjelajah web
• Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

• Geolocation
• Web SQL Database, media penyimpanan database lokal.
• API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB)

Apa itu HTML5 dan Kelebihannya?

Pada bagian sebelumnya saya menuliskan arikel tentang apa itu HTML?. Sekarang saya akan memberikan sedikit bacaan tentang apa itu HTML5 yang merupakan penyempurnaan dari versi HTML yang sebelumnya.

Pengertian HTML5

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
• Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

• Unsur kanvas untuk menggambar
• Video dan elemen audio untuk media pemutaran
• Dukungan yang lebih baik untuk penyimpanan secara offline
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

<video src=tutorialku.mp4>
</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

Apakah Browser Saya Support HTML5?

Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.

Sekian untuk saat ini semoga bermanfaat.

Adobe InDesign

Adobe InDesign is a desktop publishing software application produced by Adobe Systems. It can be used to create works such as posters, flyers, brochures, magazines, newspapers and books. InDesign can also publish content suitable for tablet devices in conjunction with Adobe Digital Publishing Suite. Graphic designers and production artists are the principal users, creating and laying out periodical publications, posters, and print media. It also supports export to EPUB and SWFformats to create e-books and digital publications, including digital magazines, and content suitable for consumption on tablet computers. In addition, InDesign supports XML, style sheets and other coding markup, making it suitable for exporting tagged text content for use in other digital and online formats. The Adobe InCopy word processor uses the same formatting engine as InDesign.

Contents

  [hide] 

• 1 History
  • 1.1 InDesign and Leopard
  • 1.2 Server version
• 2 Versions
• 3 Internationalization and localization
• 4 User groups
• 5 See also
• 6 References
• 7 External links

History[edit]

InDesign is the successor to Adobe PageMaker, which was acquired with the purchase of Aldus in late 1994. By 1998 PageMaker had lost almost the entire professional market to the comparatively feature-rich QuarkXPress 3.3, released in 1992, and 4.0, released in 1996. Quark stated its intention to buy out Adobe^[3] and to divest the combined company of PageMaker to avoid anti-trust issues.

Adobe rebuffed the offer and instead continued to work on a new page layout application. The project had been started by Aldus and was code-named "Shuksan". It was later code-named "K2" and was released as InDesign 1.0 in 1999.

In 2002, InDesign was the first Mac OS X-native desktop publishing (DTP) software. In version 3 (InDesign CS) it received a boost in distribution by being bundled with Photoshop, Illustrator, and Acrobat in the Creative Suite.

InDesign exports documents in Adobe's Portable Document Format (PDF) and has multilingual support. It was the first DTP application to support Unicode for text processing, advanced typography with OpenType fonts, advanced transparency features, layout styles, optical margin alignment, and cross-platform scripting using JavaScript.

Later versions of the software introduced new file formats. To support the new features, especially typographic, introduced with InDesign CS, both the program and its document format are not backward-compatible. Instead, InDesign CS2 has the backward-compatible INX (.inx) format, an XML-based document representation. InDesign CS versions updated with the 3.1 April 2005 update can read InDesign CS2-saved files exported to the .inx format. The InDesign Interchange format does not support versions earlier than InDesign CS. With InDesign CS 5, Adobe replaced INX with InDesign Markup Language (IDML), another XML-based document representation.^[4]

Adobe developed InDesign CS3 (and Creative Suite 3) as universal binary software compatible with native Intel andPowerPC Mac machines in 2007, two years after the announced 2005 schedule, inconveniencing Intel-Mac early-adopters. Adobe CEO Bruce Chizen had announced that "Adobe will be first with a complete line of universal applications".^[5] The CS2 Mac version had code tightly integrated to the PPC architecture, and not natively compatible with the Intel processors in Apple's new machines, so porting the products to another platform was more difficult than had been anticipated. Adobe developed the CS3 application integrating Macromedia products (2005), rather than recompiling CS2 and simultaneously developing CS3.

InDesign and Leopard[edit]

InDesign CS3 initially had a serious compatibility issue with Leopard (Mac OS X v10.5), as Adobe stated: "InDesign CS3 may unexpectedly quit when using the Place, Save, Save As or Export commands using either the OS or Adobe dialog boxes. Unfortunately, there are no workarounds for these known issues."^[6] Apple fixed this with their OS X 10.5.4 update.^[7]

Server version[edit]

Adobe InDesign Server

In October 2005, Adobe released InDesign Server CS2, a modified version of InDesign (without user interface) for Windows and Macintosh server platforms. It does not provide any editing client; rather it is for use by developers in creating client-server solutions with the InDesign plug-in technology.^[8] In March 2007 Adobe officially announced Adobe InDesign CS3 Server as part of the Adobe InDesign family.

Versions[edit]

InDesign CS5 icon

• InDesign 1.0 (codenamed Shuksan, then K2): August 31, 1999;
• InDesign 1.0J (codenamed Hotaka): Japanese support;
• InDesign 1.5 (codenamed Sherpa): April 2001;
• InDesign 2.0 (codenamed Annapurna): January 2002 (just days before QuarkXPress 5). First version to support Mac OS X, native transparencies and drop shadows;
• InDesign CS (codenamed Dragontail) and InDesign CS Page Maker Edition (3.0): October 2003;
• InDesign CS2 (4.0) (codenamed Firedrake): May 2005;
• InDesign Server (codenamed Bishop): October 2005;
• InDesign CS3 (5.0) (codenamed Cobalt): April 2007. First version to support Intel-based Macs, regular expression and table styles;
• InDesign CS3 Server (codenamed Xenon): May 2007;
• InDesign CS4 (6.0) (codenamed Basil): October 2008;
• InDesign CS4 Server (codenamed Thyme);
• InDesign CS5 (7.0) (codenamed Rocket): April 2010;
• InDesign CS5.5 (7.5) (codenamed Odin): April 2011;
• InDesign CS6 (8.0) (codenamed Athos): 23 April 2012;
• InDesign CC (9.2) (codenamed Citius): 15 January 2014;
• InDesign CC2014 (10) (codenamed Sirius): 18 June 2014.

Newer versions can as a rule open files created by older versions, but the reverse is not true. Current versions can export the InDesign file as an IDML file (InDesign Markup Language), which can be opened by InDesign versions from CS4 upwards; older versions from CS4 down can export to an INX file (InDesign Interchange format).^[9][10]

Internationalization and localization[edit]

InDesign Middle Eastern editions come with special settings for laying out Arabic or Hebrew text. They feature:

• Text settings: Special settings for laying out Arabic or Hebrew text, such as:
  1. Ability to use Arabic, Persian or Hindi digits;
  2. Use kashidas for letter spacing and full justification;
  3. Ligature option;
  4. Adjust the position of diacritics, such as vowels of the Arabic script;
  5. Justify text in three possible ways: Standard, Arabic, Naskh^{[further explanation needed]};
  6. Option to insert special characters, including Geresh, Gershayim, Maqaf for Hebrew and Kashida for Arabic texts;
  7. Apply standard, Arabic or Hebrew styles for page, paragraph and footnote numbering.
• Bi-directional text flow: The notion of right-to-left behavior applies to several objects: Story, paragraph, character and table. It allows mixing right-to-left and left-to-right words, paragraphs and stories in a document. It is possible to change the direction of neutral characters (e.g. / or ?) according to the user's keyboard language.^[11]
• Table of contents: Provides a set of table of contents titles, one for each supported language. This table is sorted according to the chosen language. InDesign CS4 Middle Eastern versions allows to choose the language of the index title and cross-references.
• Indices: Allows creating of a simple keyword index or a somewhat more detailed index of the information in the text using embedded indexing codes. Unlike more sophisticated programs, InDesign is incapable of inserting character style information as part of an index entry (e.g., when indexing book, journal or movie titles). Indices are limited to four levels (top level and three sub-levels). Like tables of contents, indices can be sorted according to the selected language.
• Importing and exporting: Can import QuarkXPress files, even using Arabic XT, Arabic Phonyx or Hebrew XPressWay fonts, retaining the layout and content. Includes 50 import/export filters, including a Microsoft Word 97-98-2000 import filter and a plain text import filter.
• Reverse layout: Include a reverse layout feature to reverse the layout of a document, when converting a left-to-right document to a right-to-left one or vice versa.
• Complex script rendering: InDesign supports Unicode character encoding, with Middle East editions supporting complex text layout for Arabic and Hebrew types of complex script. The underlying Arabic and Hebrew support is present in the Western editions of InDesign CS4, CS5, CS5.5 and CS6, but the user interface is not exposed, so it is difficult to access.

HTML Links

Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman.Link HTML - Hyperlink
Link HTML adalah hyperlink.
Sebuah hyperlink adalah teks atau gambar yang Anda dapat mengklik, dan melompat ke dokumen lain.Link HTML - Sintaks
Dalam HTML, link yang didefinisikan dengan tag <a>:<a href="URL"> link teks </a>Contoh:<a href="http://www.w3schools.com/html/"> Kunjungi kami </a> HTML tutorial
Cobalah Sendiri »
Href atribut menentukan alamat tujuan (http://www.w3schools.com/html/)
Teks link adalah bagian yang terlihat (Kunjungi tutorial HTML kami).
Mengklik pada link teks, akan mengirimkan ke alamat yang ditentukan.Catatan link teks tidak harus berupa teks. Hal ini dapat gambar HTML atau elemen lainnya HTML.Link lokal
Contoh di atas menggunakan URL absolut (A alamat web penuh).
Sebuah link lokal (link ke situs web yang sama) ditentukan dengan URL relatif (tanpa http: // www ....).Contoh:<a href="html_images.asp"> HTML Images </a>
Cobalah Sendiri »Link HTML - Warna dan Ikon
Bila Anda memindahkan kursor mouse di atas link, dua hal yang biasanya akan terjadi:

    Mouse panah akan berubah menjadi tangan kecil
    Warna elemen link akan berubah
Secara default, link akan muncul karena hal ini di semua browser:

    Link yang belum dikunjungi adalah digarisbawahi dan biru
    Sebuah link yang dikunjungi adalah digarisbawahi dan ungu
    Link aktif adalah digarisbawahi dan merah
Anda dapat mengubah default, menggunakan gaya:Contoh<Style>a: link {color: # 000000; background-color: transparent; text-decoration: none}a: visited {color: # 000000; background-color: transparent; text-decoration: none}a: hover {color: # ff0000; background-color: transparent; text-decoration: underline}a: active {color: # ff0000; background-color: transparent; text-decoration: underline}</ Style>
Cobalah Sendiri »Link HTML - Target Atribut
Target atribut menentukan di mana untuk membuka dokumen terkait.
Contoh ini akan membuka dokumen terkait dalam jendela browser baru atau tab baru:Contoh<a href="http://www.w3schools.com/" target="_blank"> Visit W3Schools! </a>
Cobalah Sendiri »Target Nilai Keterangan_blank Membuka dokumen terkait di jendela baru atau tab_self Membuka dokumen terkait dalam frame yang sama seperti yang diklik (ini adalah default)_parent Membuka dokumen terkait dalam kerangka induk_top Membuka dokumen terkait dalam tubuh penuh jendelaframename Membuka dokumen terkait dalam bingkai bernama
Jika halaman web Anda terkunci dalam bingkai, Anda dapat menggunakan target = "_ top" untuk keluar dari frame:Contoh<a href="http://www.w3schools.com/html/" TARGET="_top"> HTML5 tutorial! </a>
Cobalah Sendiri »Link HTML - Gambar sebagai link
Hal ini umum untuk menggunakan gambar sebagai link:Contoh<a href="default.asp">
  <Img src = "smiley.gif" alt = "HTML tutorial" style = "width: 42px; height: 42px; border: 0"></a>
Cobalah Sendiri »Catatan border: 0 ditambahkan untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar.Link HTML - The id Atribut
Atribut id dapat digunakan untuk membuat bookmark di dalam dokumen HTML.
Bookmark tidak ditampilkan dengan cara khusus. Mereka terlihat pembaca.Contoh
Menambahkan atribut id untuk setiap elemen <a>:<a Tips id="tips"> Berguna Bagian </a>
Kemudian membuat link ke elemen <a> (Tips Berguna Bagian):<a href="#tips"> Kunjungi Berguna Tips Bagian </a>
Atau, membuat link ke elemen <a> (Tips Berguna Bagian) dari halaman lain:<a href="http://www.w3schools.com/html_links.htm#tips"> Kunjungi Berguna Tips Bagian </a>
Cobalah Sendiri »Catatan Tanpa slash sisa pada alamat subfolder, Anda mungkin akan menghasilkan dua permintaan ke server.Banyak server secara otomatis akan menambahkan garis miring ke alamat, dan kemudian membuat permintaan baru.Bab Ringkasan

    Gunakan elemen HTML <a> untuk mendefinisikan link
    Gunakan HTML atribut href untuk menentukan alamat link
    Gunakan atribut target HTML untuk menentukan di mana untuk membuka dokumen terkait
    Gunakan HTML <img> elemen (dalam <a>) untuk menggunakan gambar sebagai link
    Menggunakan atribut HTML id (id = "value") untuk menentukan bookmark di halaman
    Gunakan HTML atribut href (href = "# value") untuk mengatasi penunjuk

sumber dari :http://www.w3schools.com

Cara membuat link di html

Cara Membuat link di HTML

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.
Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).
Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan buat kode seperti dibawah ini.
Contoh penggunaan tag link <a>:

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link</h1>
  <p>Saya sedang belajar HTML dari 
  <a href="http://www.duniailkom.com">Duniailkom</a></p>
</body>
</html>

---

Alamat Absulut dan Alamat Relatif

Pada contoh diatas kita menuliskan alamat link secara lengkap dengan bagian “http://www.”. Penulisan seperti ini disebut juga dengan external link, yang berarti kita membuat link ke alamat lain di internet, atau lebih dikenal dengan: alamat absolut.
Alamat absolut adalah penulisan alamat file dengan menyertakan nama website, seperti: href=”http://www.duniailkom.com/belajar_html.html”, atau href=”http://www.wikipedia.org”.
Namun jika kita ingin membuat link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file saat ini. Jenis alamat ini disebut alamat relatif.
Sebagai contoh alamat relatif, apabila kita ingin membuat link kepada file hello.html pada folder yang sama dengan file saat ini, maka atribut hrefnya, berisi: href=”hello.html”. Berikut adalah kode HTMLnya:
Contoh penggunaan tag link <a> untuk alamat relatif:

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link</h1>
  <p>Halaman HTML pertama saya adalah <a href="hello.html">Hello</a></p>
</body>
</html>

Alamat absolute ditulis dengan lengkap, seperti http://www.duniailkom.com, atau jika kita merujuk kepada halaman tertentu, menjadi http://www.duniailkom.com/nama_halaman.html.
Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. Seandainya nama file kita adalah belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html” untuk membuat link ke halaman belajar_list.html .
Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatifnya menjadi href=”lagi_belajar/belajar_list.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../belajar_list.html”, untuk naik 2 folder diatasnya.

---

Atribut tag <a>: target

Atribut penting lainnya dari tag <a> adalah target. Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka di jendela browser saat ini, atau terbuka di jendela baru.
Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web saat ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.
Contoh penggunaan tag link <a> dengan atribut target:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar html dari <a href="http://www.duniailkom.com" 
target=”_blank”>Duniailkom</a> dan akan terbuka pada tab baru</p>
</body>
</html>

Jika kita men-klik link tersebut, maka halaman duniailkom.com akan terbuka di tab baru, dan tidak menimpa tab saat ini.


sumber dari : http://www.duniailkom.com/belajar-html-cara-membuat-link-di-html-tag-a/

Dasar HTML untuk Menambahkan Images

Dasar HTML: Menambahkan ImagesOleh Joe Luka bakar


 



Dengan update oleh staf editorial)Cara Tambah Gambar Untuk Halaman Web Anda!Sekarang Anda tahu cukup untuk menulis sangat bagus, halaman rumah berbasis teks, tetapi kemampuan Web untuk memberikan gambar, secara teknis disebut gambar, grafik, atau kadang-kadang ikon, yang telah membuatnya menjadi begitu populer. Dalam Primer ini, Anda akan belajar bagaimana menempatkan gambar pada halaman Anda dan juga bagaimana mengubah sebuah gambar menjadi link ke halaman lain.Menempatkan Sebuah Gambar Pada Halaman AndaPerintah untuk menempatkan gambar konstan. Anda akan menggunakan format yang sama setiap kali. Sekarang mungkin saat yang tepat untuk berbicara tentang di mana untuk menyimpan segala sesuatu pada server web Anda karena Anda mulai memanggil materi tambahan untuk mengisi halaman rumah Anda. Sampai saat ini, semua yang Anda lakukan adalah menempatkan teks pada halaman. Sekarang Anda akan menempatkan gambar.Pada titik ini dalam karir HTML Anda, itu ide yang baik bagi Anda untuk menempatkan gambar apa pun yang Anda akan menggunakan di dalam subdirektori bernama "gambar". Itu berarti menempatkan gambar dalam sebuah direktori (disebut "gambar") di bawah direktori di mana halaman web Anda berada (yang akan menjadi "akar" direktori untuk situs Anda). Ada lebih pada datang di Primer # 7.Berikut format untuk menempatkan gambar:<IMG SRC = "image.gif" ALT = "beberapa teks" WIDTH = 32 HEIGHT = 32>Dengan mengganti "image.gif" dengan "homepage.gif", salah satu dari grafis saya sendiri, Anda mendapatkan ini ...



 Berikut adalah Apa yang Terjadi: Image Elemen Parameter

    IMG singkatan dari "gambar." Ini mengumumkan pada browser gambar akan pergi di sini pada halaman. Ya, gambar akan muncul tepat di mana Anda menulis dalam tag gambar.

   
    SRC singkatan dari "sumber." Ini lagi adalah atribut, perintah dalam perintah. Ini memberitahu browser mana harus pergi untuk menemukan gambar. Sekali lagi, yang terbaik bagi Anda untuk menempatkan gambar yang ingin Anda gunakan di dalam subdirektori bernama "gambar". Dengan cara ini Anda dapat meminta gambar dengan nama hanya dengan nama subdirektori di depannya, seperti ini: /images/imagename.gif. Anda juga bisa mengarahkan sumber ke tempat lain secara online, seperti gambar yang telah disimpan di Photobucket, misalnya, dengan menggunakan URL penuh gambar, seperti http://www.photobucket.com/youraccount/imagename. jpg. Sekarang, mari kita mendapatkannya bekerja.

   
    image.gif adalah nama dari gambar. Perhatikan itu mengikuti jenis yang sama format sebagai dokumen HTML Anda. Ada nama (image) maka titik dan kemudian ada akhiran (gif).

   
    ALT singkatan dari "teks alternatif". Ini memberitahu browser bahwa jika tidak dapat menemukan gambar, kemudian hanya menampilkan teks ini. Ia juga memberitahu siapa pun yang tidak dapat melihat gambar Anda apa gambar tentang. Misalnya seorang pengguna penyandang cacat yang menggunakan screen reader, atau berani saya menyebutkan itu, Search Engine. Ketika Anda mengarahkan mouse di atas gambar, teks alternatif muncul.

   
    "Beberapa teks" adalah di mana Anda meletakkan teks yang menjelaskan gambar Anda.

   
    LEBAR singkatan hanya itu, lebar gambar dalam piksel. Hal ini dapat berkisar dari 1 pixel, baik, hampir setiap nomor, tetapi umumnya akan kurang dari lebar browser web.

   
    TINGGI singkatan, seperti yang Anda duga, ketinggian gambar dalam piksel. Sekali lagi, tingginya bisa apa saja, tetapi umumnya akan kurang dari ketinggian browser web.Format Gambar untuk WebAda empat format dasar yang Anda akan menemukan di Web. Masing-masing dilambangkan ke browser dengan akhiran yang berbeda. Ingat bahwa "name.suffix" diskusi dari Primer # 1?



    Gif ini diucapkan "jif" atau "gif" (keras "G") tergantung pada siapa Anda berbicara. Saya selalu mengatakan "jif", seperti selai kacang. Ini adalah singkatan dari Graphics Interchange Format.

    Format ini diciptakan oleh Compuserve dan itu sangat populer. Alasannya adalah bahwa itu adalah format yang sederhana. Ini adalah serangkaian elemen berwarna gambar, atau titik, yang dikenal sebagai piksel, yang berbaris untuk membuat gambar. Gambar televisi Anda dibuat dengan cara yang sama. Browser dapat menangani format ini cukup mudah.

   
    .png Diucapkan sebagai 'ping', ini adalah singkatan dari Portable Network Graphic. Hal ini pada akhirnya pengganti gif, dengan pilihan transparansi parsial, namun dukungan browser samar - beberapa browser masih tidak ingin menampilkan png file.

   
    jpeg atau .jpg (diucapkan "j-peg") Ada dua nama untuk menunjukkan format ini karena PC dan format MAC memungkinkan 3 dan 4 huruf setelah titik. JPEG adalah singkatan dari Joint Photographic Experts Group, organisasi yang menemukan format. Formatnya adalah unik karena menggunakan kompresi setelah itu dibuat. Itu bicara komputer mewah yang berarti bahwa ketika komputer tidak menggunakan gambar .jpeg lipatan itu dan menempatkan itu pergi. Sebagai contoh, jika gambar adalah 10K byte ketika ditampilkan, mungkin hanya 4K byte bila disimpan. Nice trik, huh? Ini menghemat ruang hard drive, tetapi juga cenderung memerlukan sedikit memori pada bagian Anda terungkap gambar.

    Seseorang selalu menulis kepada saya untuk memberitahu saya bahwa gambar gif juga menggunakan kompresi. Ya, mereka lakukan, tetapi hanya ketika mereka pertama kali diciptakan dalam format tersebut. Setelah itu, tidak ada kompresi. JPEG, di sisi lain, menggunakan kompresi sepanjang hidupnya melipat kecil daripada yang sebenarnya.

   
    bmp (diucapkan "BIMP") Ini adalah "bitmap." Anda mungkin tidak akan pernah menempatkan bitmap sebagai gambar, meskipun beberapa browser mengizinkan itu. Sebuah bitmap adalah gambar yang memproduksi komputer dan tempat-tempat untuk Anda. Sebuah counter adalah contoh. Meskipun beberapa browers, seperti Internet Explorer, akan memungkinkan Anda untuk menempatkan BMP sebagai gambar, saya tidak mau. Kebanyakan browser tidak akan mampu menampilkannya. Pergilah dengan .gif, .jpg atau .png.

 Mana Saya Dapatkan Free Images Untuk Halaman Saya?Mereka benar-benar di mana-mana. Ada banyak situs di luar sana yang menawarkan ton gambar bebas. Plus, karena Anda sudah berselancar, Anda telah melihat ratusan gambar sudah. Jika Anda melihat sesuatu di halaman seseorang yang benar-benar Anda sukai, meminta untuk menggunakannya. Jangan hanya mengambil. Itu tidak benar dan bisa melawan hukum hak cipta. Bertanya. Anda mungkin akan mendapatkan gambar. Dalam waktu singkat Anda akan memiliki membunuh untuk digunakan pada halaman Anda. Satu tempat yang bagus untuk memulai adalah FreeDigitalPhotos.net kita sendiri, yang memiliki ratusan ribu gambar untuk digunakan pada halaman web Anda.Mengaktifkan Sebuah Gambar: Mengubah Citra menjadi linkOke, ini mendapat sedikit mewah. Dalam Primer # 4, saya menunjukkan cara untuk membuat link hypertext. Apa itu adalah membuat kata-kata biru pada halaman Anda sehingga seseorang bisa klik pada mereka dan kemudian melompat ke situs lain. Nah, di sini kita akan mengaturnya sehingga gambar menjadi diklik atau "aktif." Penampil akan klik pada gambar, bukan kata-kata hyperlink, untuk membuat link hypertext. Aku akan membuat link ke halaman rumah saya menggunakan gambar di atas. Berikut format:

 <A HREF="http://www.htmlgoodies.com"> <IMG SRC = "homepage.gif" ALT = "Home"> </A>Lihatlah lagi. Lihat apa yang terjadi? Aku meletakkan tag gambar di mana saya biasanya memiliki kata-kata yang ditempatkan. Namun, dalam kasus gambar tidak terlihat untuk alasan apapun saya telah menambahkan beberapa teks alternatif yang menyatakan di mana link pergi.Berikut adalah apa yang Anda dapatkan dengan format tersebut. Lay pointer Anda pada gambar, tapi jangan klik. Anda akan melihat seluruh gambar aktif:

 RumahRapi, ya? Tapi apa dengan perbatasan baru di sekitar gambar? Itulah yang terjadi ketika Anda mengaktifkan gambar. Ia mencoba untuk berubah menjadi biru, atau warna apa pun halaman diatur ke, seperti kata-kata itu diganti, sehingga menempatkan apa yang dikenal sebagai "perbatasan" di sekitar gambar. Beberapa orang seperti itu. Aku tidak, dan saya tahu bagaimana untuk menyingkirkan itu.Untuk membuat perbatasan hilang, kita perlu sedikit kecil inline CSS (Cascading Style Sheets). Ini digunakan untuk dilakukan dengan menggunakan atribut Perbatasan, tapi itu sayangnya tidak lagi bersama kita ...Berikut format:

 <IMG STYLE = "border: none;" SRC = "homepage.gif" ALT = "Home">Lihat apa yang saya lakukan? Saya menambahkan beberapa CSS yang dilambangkan bahwa tidak boleh ada perbatasan. Anda dapat pergi ke arah lain juga jika Anda ingin. Buatlah "border: 55px menyala biru;" kalau kamu mau. Itu hanya akan membuat perbatasan besar. Perhatikan bahwa CSS adalah dalam tanda kutip.Berikut adalah apa yang Anda dapatkan dengan menggunakan CSS:

 RumahSekali lagi, berbaring pointer Anda pada gambar tanpa mengklik. Anda akan melihat bahwa itu adalah aktif, tetapi tidak membawa bahwa perbatasan biru menjengkelkan.Dan itu membawa ini ke dekat. Pelajaran berikutnya akan menangani hampir secara eksklusif dengan atribut yang akan Anda gunakan untuk memanipulasi gambar Anda. Anda akan benar-benar mengesankan teman-teman Anda dengan yang satu ini.

sumber dari : http://www.htmlgoodies.com/primers/html/article.php/3478181

Html Tentang Image

Ringkasan

HTML <img> Elemen (atau HTML Gambar Elemen) merupakan gambar dari dokumen.



Penggunaan catatan:
Browser tidak selalu menampilkan gambar direferensikan oleh elemen. Ini adalah kasus untuk browser non-grafis (termasuk yang digunakan oleh orang-orang dengan gangguan penglihatan), jika pengguna memilih untuk tidak menampilkan gambar, atau jika browser tidak dapat menampilkan gambar karena tidak valid atau jenis yang tidak didukung. Dalam kasus ini, browser dapat mengganti gambar dengan teks didefinisikan dalam elemen ini atribut alt.

    Konten kategori konten Arus, isi kalimat, konten tertanam, konten teraba. Jika elemen memiliki atribut usemap, juga merupakan bagian dari kategori konten interaktif.
    Diizinkan konten Tidak, itu adalah elemen kosong.
    Tag kelalaian Harus memiliki tag awal dan tidak harus memiliki tag akhir.
    Diizinkan elemen orangtua Setiap elemen yang hanya menerima suatu tertanam konten.
    Antarmuka DOM HTMLImageElement

Atribut

Elemen ini meliputi atribut global.

align Usang sejak HTML4.01, Usang sejak HTML5 Gunakan properti CSS vertical-align
    Penyesuaian gambar sehubungan dengan konteks sekitarnya.
alt
    Atribut ini mendefinisikan teks alternatif yang menjelaskan gambar. Pengguna akan melihat ini ditampilkan jika URL gambar yang salah, gambar tidak di salah satu format yang didukung, atau jika gambar belum di-download.

    Penggunaan catatan: Menghilangkan atribut ini menunjukkan bahwa gambar merupakan bagian penting dari isi, tapi tidak ada yang setara tekstual tersedia. Mengatur atribut ini ke string kosong menunjukkan bahwa gambar ini bukan merupakan bagian penting dari isi; browser non-visual dapat menghilangkan dari render.
perbatasan Usang sejak HTML4.01, Usang sejak HTML5
    Lebar perbatasan di sekitar gambar.
crossorigin HTML5
    Atribut enumerated ini menunjukkan jika mengambil dari gambar terkait harus dilakukan dengan menggunakan CORS atau tidak. Gambar CORS-enabled dapat digunakan kembali dalam <canvas> elemen tanpa tercemar. Nilai-nilai diperbolehkan adalah:

    anonim
        Permintaan lintas asal (yaitu, dengan Asal: HTTP header) dilakukan. Tapi tidak ada credential dikirim (yaitu, tidak ada cookie, tidak ada sertifikat X.509, dan tidak ada otentikasi HTTP Basic dikirim). Jika server tidak memberikan mandat ke situs asal (dengan tidak menetapkan Access-Control-Biarkan-Asal: HTTP header), gambar akan tercemar dan dibatasi penggunaannya.
    menggunakan kredensial-
        Permintaan lintas asal (yaitu, dengan Asal: HTTP header) dilakukan dengan credential dikirim (yaitu, cookie, sertifikat, dan otentikasi dasar HTTP dilakukan). Jika server tidak memberikan mandat ke situs asal (melalui Access-Control Memungkinkan-Kredensial: HTTP header), gambar akan tercemar dan dibatasi penggunaannya.

    Ketika tidak ada, sumber daya diambil tanpa permintaan CORS (yaitu, tanpa mengirim Asal yang: HTTP header), mencegah non-tercemar penggunaan dalam <canvas> elemen. Jika tidak valid, itu ditangani seolah-olah kata kunci enumerated anonim digunakan. Lihat pengaturan CORS atribut untuk informasi tambahan.
tinggi badan
    Ketinggian gambar di HTML5 CSS pixel, atau HTML 4 dalam pixel atau sebagai persentase.
hspace Usang sejak HTML4.01, Usang sejak HTML5
    Jumlah piksel ruang putih untuk memasukkan ke kiri dan kanan gambar.
ismap
    Atribut Boolean ini menunjukkan bahwa gambar merupakan bagian dari peta server-side. Jika demikian, koordinat yang tepat dari klik yang dikirim ke server.

    Penggunaan Catatan: Atribut ini diperbolehkan hanya jika <img> elemen adalah keturunan dari suatu unsur <a> dengan atribut href valid.
longdescHTML 4 hanya
    URL deskripsi gambar yang akan ditampilkan, yang melengkapi teks alt. Dalam HTML5, gunakan elemen <a> biasa untuk link ke deskripsi.
nama jenis Usang sejak HTML4.01, Usang sejak HTML5
    Sebuah nama untuk elemen. Hal ini didukung dalam HTML 4 hanya untuk kompatibilitas. Menggunakan atribut id gantinya.
sizesHTML5
    Daftar satu atau lebih string dipisahkan dengan koma menunjukkan satu set ukuran sumber. Setiap ukuran sumber terdiri dari:

        kondisi media yang. Ini harus dihilangkan untuk item terakhir.
        nilai ukuran sumber.

    Nilai ukuran sumber yang digunakan untuk menentukan ukuran dimaksudkan gambar, dengan tujuan untuk memilih sumber dari daftar yang disediakan oleh atribut srcset ketika menggunakan 'w' deskriptor. Ukuran yang dipilih mempengaruhi ukuran intrinsik gambar (gambar ukuran melekat jika tidak ada styling CSS eksplisit diterapkan). Jika atribut srcset tidak ada, atau tidak mengandung nilai-nilai dengan deskripsi lebar, maka ukuran atribut tidak berpengaruh.
src
    URL gambar, atribut ini adalah wajib untuk <img> elemen. Pada browser yang mendukung srcset, src diperlakukan seperti gambar calon dengan kerapatan pixel keterangan 1x kecuali gambar dengan ini kepadatan pixel descriptor sudah didefinisikan dalam srcset atau srcset berisi 'w' deskriptor.

srcsetHTML5
    Daftar satu atau lebih string dipisahkan dengan koma menunjukkan satu set kemungkinan gambar untuk agen pengguna untuk menggunakan. Setiap string terdiri dari:

        URL untuk gambar,
        opsional, spasi diikuti oleh salah satu:
            deskriptor lebar, yang merupakan bilangan bulat positif diikuti langsung oleh 'w'. Lebar deskripsi dibagi dengan ukuran sumber diberikan dalam ukuran atribut untuk menghitung kepadatan pixel efektif.
            deskriptor kepadatan pixel, yang merupakan angka floating positif diikuti langsung oleh 'x'.

    Jika tidak ada keterangan yang ditentukan, itu setara dengan 1x.

    Ini tidak valid untuk mencampur deskripsi lebar dan deskripsi kepadatan pixel dalam atribut srcset yang sama. Di antara daftar, harus ada hanya satu string yang berisi deskripsi yang sama.

    Browser memilih gambar yang paling memadai untuk menampilkan pada suatu titik waktu tertentu.
lebar
    Lebar gambar di HTML5 CSS pixel, atau HTML 4 dalam pixel atau sebagai persentase.
usemap
    Parsial URL (dimulai dengan '#') dari peta gambar yang berhubungan dengan elemen.

    Penggunaan catatan: Anda tidak dapat menggunakan atribut ini jika <img> elemen adalah keturunan dari <a> atau <button> elemen.
vSpace Usang sejak HTML4.01, Usang sejak HTML5
    Jumlah piksel ruang putih untuk menyisipkan atas dan di bawah gambar.

Format gambar yang didukung

Standar HTML tidak memberikan daftar format gambar yang harus didukung, sehingga setiap user agent mendukung satu set yang berbeda dari format. Gecko mendukung:

    JPEG
    GIF, termasuk animasi GIF
    PNG
    APNG
    SVG
    BMP
    BMP ICO
    PNG ICO

Catatan:
Dukungan untuk format XBM telah dihapus di Gecko 1.9.2.

sumber dari :https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img