Selamat Siang smartpeople ....
Bermula dari sebuah bahasa yang sebelumnya banyak
digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup
Language), HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi
Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun
1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Kali ini saya akan sharing materi tentang HTML (Hyper Text Markup Language), baiklah yang akan saya bahas petama adalah tentang sejarah HTML.
- Sejarah HTML (Hyper Text Markup Language)
Hypertext Markup
Language (HTML) adalah sebuah bahasa
markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di
dalam sebuah penjelajah web Internet dan pemformatan hiperteks
sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan
tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam
perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman
web dengan
perintah-perintah HTML.
- Tag - Tag HTML
ELEMEN
Element itu
isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu
sendiri dan atribut yang dimilikinya (jika ada). Pada contoh dibawah, “<i> Semangat Wisuda 2019 </i>”
merupakan element i. Element tidak hanya berisi text, namun juga bisa tag lain.
ATRIBUT
Atribut
adalah informasi tambahan yang diberikan kepada tag untuk meanpilkan link atau
sebuah situs. Informasi ini bisa berupa instruksi untuk warna dari text, besar
huruf dari text, dll. Href merupakan nama dari atribut, tidak semua tag
membutuhkan atribut.
HEADING
Heading atau
lebih tepatny tag Heading merupakan tag khusus yang disediakan oleh HTML untuk
membuat sebuah judul pada teks dalam sebuah halaman web. tag Heading secara
default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal
(bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang
lebih tegas dan penekanan, tag Heading juga sangat penting dalam kaitannya
dengan teknik Search Engine Optimization (SEO). Tag Heading dalam HTML terdiri dari
6 tingkatan berdasarkan tingkat penting dan ukurannya. tag Heading tersebut
adalah <h1>, <h2>, <h3>, <h4>, <h5> dan
<h6>. Tag h1 memiliki ukuran paling besar, sedangkan tag h6 memiliki
ukuran paling kecil.
PARAGRAPHS
Sebuah
paragraf di HTML ditandai dengan pasangan tag <p> dan tag </p>. Tag
<p> menyatakan awal suatu paragraf sedangkan akhir paragraf ditandai
dengan tag </p>. Memang kita bisa mengakhiri paragraph dengan tidak
menggunakan tag </p> tetapi saya menyarankan untuk tetap menggunakan tag
penutup </p>.
HTML STYLE
Style itu digunakan untuk memberikan konten gaya penampilan yang
bagus.
HTML FORMATTING
HTML Formatting adalah tag html yang berfungsi mengubah bentuk
tampilan dari teks. dengan menggunakan tag html ini kita bisa membentuk teks
seperti tebal, miring, garis bawah, teks berpangkat, dll
COMMENTS
Untuk membuat komentar di HTML, kita menggunakan awalan <!– dan
penutup –>. Agar lebih mudah dipahami,Tag komentar ini juga akan berlaku
selama belum di temukan tag penutup.
COLORS
Untuk memberikan warna pada
tulisan/teks.
LINKS
Membuat link menuju ke halaman lain, HTML link adalah kata,
sekumpulan kata, ataupun gambar yang apabila di-klik akan menuju ke
dokumen/halaman lain atau bagian lain dari dokumen/halaman yang sama.
IMAGES
Tag Image digunakan untuk menampilkan gambar kedalam halaman web,
menggunakan <img>, src adalah singkatan dari source, merupakan atribut
yang berisi alamat dari gambar yang akan ditampilkan.
TABLES
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag,
yaitu tag <table>, tag <tr>, dan tag <td>:
a.
Tag <table> digunakan untuk memulai tabel
b.
Tag <tr> adalah singkatan dari table row, digunakan untuk
membuat baris dari tabel.
c.
Tag <td> adalah singkatan dari table data, digunakan untuk
menginput data ke tabel.
LISTS
List adalah elemen yang digunakan untuk menampilkan informasi
dalam bentuk list. Biasanya digunakan untuk membuat menu.
UNORDERED LIST
Sementara untuk list yang tidak terurut, biasanya menggunakan
simbol-simbol.
Cara membuatnya menggunakan tag <ul> (unordered list). Ia
juga memiliki anak yang sama seperti <ul>.
ORDERED LIST
Ordered list
adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di
depannya sebagai penanda bahwa list ini terurut.
Ordered list
dibuat dengan tag <ol>. Tag ini memiliki anak berupa tag untuk membuat
item list yaitu <li> (list item).
DEFINITION LIST
List ini
digunakan untuk menampilkan deskripsi/penjelasan. Contohnya seperti kamus. Tag
unutuk membuat description list adalah <dl> (data list). Dalam tag ini
terdapat tag <dt> (data term) dan <dd> (data description).
NESTED LIST
List juga
dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list
dengan unordered list. Caranya, list yang di dalam ditulis di dalam tag
<li>.
IFRAMES
HTML
<iframe> element digunakan untuk merepresentasikan konteks jelajah dari
sebuah dokumen atau file lain untuk dimasukkan (embed) dalam dokumen yang
bersangkutan, <iframe> element sering digunakan untuk menyisipkan konten
dari website lain, contohnya menyisipkan script iklan dari website pihak
ketiga, memasukkan widget atau aplikasi tertentu, dan memasukkan video dari
sumber lain (seperti Youtube, Vimeo dan sejenisnya).
JAVASCRIPT
The <script> tag digunakan untuk mendefinisikan script
(JavaScript) .
The <script> elemen baik berisi pernyataan scripting atau
menunjuk ke sebuah file script eksternal melalui src atribut.
penggunaan umum untuk JavaScript yang manipulasi gambar, validasi
form, dan perubahan dinamis konten.
script di bawah ini menulis Hello Kelas Desain Web! ke elemen HTML
dengan id="demo" .
FILE PATHS
HTML File
Paths menggambarkan lokasi file dalam struktur folder situs web. HTML File Paths digunakan saat menghubungkan
ke file eksternal seperti :
a. Halaman web
b. Gambar
c. Style sheets
d. JavaScripts
HEAD
Elemen
<head> adalah wadah penampung untuk semua elemen <head>. Elemen
<head> wajib memasukkan elemen <title> kedalam dokumen, dan bisa
juga memasukkan beberapa elemen lain seperti <script>, <style>,
<meta>, dan lain-lain.
LAYOUT
Elemen Tata
Letak HTML
Situs web
sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). HTML5
menawarkan elemen semantik baru yang menentukan bagian-bagian berbeda dari
halaman web:
<header>
- Menentukan header untuk dokumen atau bagian
<nav> -
Menentukan penampung untuk tautan navigasi
<section>
- Mendefinisikan bagian dalam dokumen
<article>
- Menentukan artikel mandiri independen
<aside>
- Mendefinisikan konten selain konten (seperti sidebar)
<footer>
- Menentukan footer untuk dokumen atau bagian
<details>
- Menentukan detail tambahan
<summary>
- Menentukan heading untuk elemen <details>
Teknik Tata
Letak HTML
Ada empat
cara berbeda untuk membuat tata letak multikolumn. Setiap jalan memiliki
kelebihan dan kekurangannya:
Tabel HTML
(tidak disarankan)
Properti
float CSS
CSS flexbox
Kerangka CSS
RESPONSIVE
Apa itu
Desain Web Responsif?
Desain Web
Responsif adalah tentang menggunakan HTML dan CSS untuk secara otomatis
mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar, situs web, agar
terlihat bagus di semua perangkat (desktop, tablet, dan ponsel).
Mengatur Area
TampilaN
Saat membuat
halaman web yang responsif, tambahkan elemen <meta> di semua halaman web
Anda.
Gambar
Responsif
Gambar
responsif adalah gambar yang diskalakan dengan baik agar sesuai dengan ukuran
browser apa pun. Menggunakan Properti lebar, jika properti lebar CSS disetel ke
100%, gambar akan responsif dan ditingkatkan ke atas dan ke bawah.
COMPUTERCODE
HTML
<code> Untuk Kode Komputer
Elemen HTML
<code> mendefinisikan sebuah fragmen kode komputer. Teks yang dikelilingi
oleh tag <code> biasanya ditampilkan di font default monospace browser. Perhatikan
bahwa elemen <code> tidak mempertahankan
spasi ekstra dan jeda baris.
ENTITIES
Entitas HTML
Karakter yang
dicadangkan dalam HTML harus diganti dengan entitas karakter.
Karakter yang
tidak ada di keyboard Anda juga dapat diganti oleh entitas.
Entitas HTML
Beberapa
karakter dicadangkan dalam HTML.
Jika Anda
menggunakan tanda-tanda kurang dari (<) atau lebih besar dari (>) di teks
Anda, browser mungkin mencampurnya dengan tag.
Entitas
karakter digunakan untuk menampilkan karakter yang dipesan dalam HTML.
Entitas
karakter terlihat seperti ini:
&entity_name;
OR
&#entity_number;
Untuk
menampilkan tanda kurang dari (<) kita harus menulis: & lt; atau <
Keuntungan menggunakan
nama entitas: Nama entitas mudah diingat.
Kerugian
menggunakan nama entitas: Browser mungkin tidak mendukung semua nama entitas,
tetapi dukungan untuk angka itu bagus.
SYMBOL
Untuk menambahkan simbol ke halaman HTML, Anda dapat menggunakan nama
entitas HTML. Jika tidak ada nama entitas,
Anda dapat menggunakan nomor entitas, desimal, atau referensi heksadesimal.
CHARSET
Untuk menampilkan
halaman HTML dengan benar, browser web harus tahu set karakter mana (pengkodean
karakter) yang akan digunakan.
Apa itu Pengodean
Karakter?
ASCII adalah
standar pengkodean karakter pertama (juga disebut set karakter). ASCII
mendefinisikan 128 karakter alfanumerik berbeda yang dapat digunakan di
internet: angka (0-9), huruf Inggris (A-Z), dan beberapa karakter khusus
seperti! $ + - () @ <>.
ANSI (Windows-1252)
adalah kumpulan karakter Windows asli, dengan dukungan 256 kode karakter yang
berbeda. ISO-8859-1 adalah karakter default yang ditetapkan untuk HTML 4.
Kumpulan karakter ini juga mendukung 256 kode karakter yang berbeda.Karena ANSI
dan ISO-8859-1 sangat terbatas, HTML 4 juga mendukung UTF-8. UTF-8 (Unicode)
mencakup hampir semua karakter dan simbol di dunia. Pengkodean karakter default
untuk HTML5 adalah UTF-8.
Atribut charset
HTML
Untuk menampilkan
halaman HTML dengan benar, browser web harus mengetahui set karakter yang
digunakan di halaman.
Ini ditentukan
dalam tag <meta>:
Untuk html4 :
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
Untuk html5 :
<meta charset="UTF-8">
Character Set ASCII
Set Karakter ASCII
ASCII menggunakan
nilai dari 0 hingga 31 (dan 127) untuk karakter kontrol.
ASCII menggunakan
nilai dari 32 hingga 126 untuk huruf, angka, dan simbol.
ASCII tidak
menggunakan nilai dari 128 hingga 255.
Character Set Latin-1 atau
ISO/IEC 8859-1
Set Karakter
ISO-8859-1
8859-1 identik
dengan ASCII untuk nilai dari 0 hingga 127.
8859-1 tidak
menggunakan nilai dari 128 hingga 159.
8859-1 identik
dengan UTF-8 untuk nilai dari 160 hingga 255.
Character Set UTF-16 dan
UCS-2
UTF-16 (16-bit Unicode Transformation Format) adalah suatu pengkodean karakter Unicode yang mampu mengkodekan 1,112,064 angka (disebut code point) dalam jangkauan kode Unicode dari 0 sampai 0x10FFFF. Pengkodean ini
adalah sebuah "variable-width encoding" karena code point itu
dikodekan dengan satu atau dua code units16-bit .
Universal Character
Set UCS-2 (2-byte) mirip dengan pengkodean karakter yang sekarang digantikan oleh UTF-16
versi 2.0 sebagai standar Unicode pada bulan Juli 1996.[2]Menghasilkan format dengan panjang tetap (fixed-length format)
hanya menggunakan code point sebagai unit kode 16-bit dan membuahkan hasil yang
tepat sama dengan UTF-16 untuk 97% (63.488; bukan 65.536) dari seluruh code
point dalam jangkauan 0-0xFFFF, termasuk semua karakter yang telah diberi nilai
saat itu.
Character Set UTF-32 dan
UCS-4
UTF-32 secara resmi menjadi bagian dari Unicode standar pada versi 3.1.0
yang dipublikasikan tahun 2001, sistem encoding ini sama dengan yang
digunakan pada UCS-4 (4-byte Universal Character Set) – didefinisikan oleh ISO
10646, yang sudah terlebih dahulu diperkenalkan.
Angka 32 pada UTF berarti 32 bit dan 4 pada UCS berarti 4 byte,
yang dapat diartikan bahwa space yang digunakan untuk menyimpan suatu karakter
adalah 4 byte atau 32 bit.
Character Set dan Character
Encoding UTF-8
Set Karakter UTF-8
UTF-8 identik
dengan ASCII untuk nilai dari 0 hingga 127.
UTF-8 tidak
menggunakan nilai dari 128 hingga 159.
UTF-8 identik
dengan ANSI dan 8859-1 untuk nilai dari 160 hingga 255.
UTF-8 berlanjut
dari nilai 256 dengan lebih dari 10.000 karakter yang berbeda.
URL Encoding
HTML Uniform
Resource Locators
URL adalah
kata lain untuk alamat web. URL dapat terdiri dari kata-kata (w3schools.com),
atau alamat Internet Protocol (IP) (192.68.20.50).
Kebanyakan
orang memasukkan nama saat berselancar, karena nama lebih mudah diingat
daripada angka.
URL - Uniform
Resource Locator
Browser web
meminta halaman dari server web dengan menggunakan URL.
Uniform
Resource Locator (URL) digunakan untuk menangani dokumen (atau data lain) di
web.
Alamat web
seperti https://www.w3schools.com/html/default.asp mengikuti aturan sintaks
ini:
scheme://prefix.domain:port/path/filename
Penjelasan:
skema -
mendefinisikan jenis layanan Internet (paling umum adalah http atau https)
prefix -
mendefinisikan awalan domain (default untuk http adalah www)
domain -
mendefinisikan nama domain Internet (seperti w3schools.com)
port -
mendefinisikan nomor port di host (default untuk http adalah 80)
path -
mendefinisikan path di server (Jika dihilangkan: direktori root dari situs)
namafile -
mendefinisikan nama dokumen atau sumber daya
Pengodean URL
URL hanya
dapat dikirim melalui Internet menggunakan set karakter ASCII. Jika URL berisi
karakter di luar set ASCII, URL harus dikonversi.
Penyandian
URL mengubah karakter non-ASCII ke dalam format yang dapat ditransmisikan
melalui Internet.
Enkode URL
menggantikan karakter non-ASCII dengan "%" diikuti dengan digit
heksadesimal.
URL tidak
boleh berisi spasi. Pengkodean URL biasanya menggantikan spasi dengan tanda
plus (+), atau% 20.
Form
Sebuah form dalam
HTML harus berada di dalam tag form,
yang diawali dengan <form> dan
diakhiri dengan </form>.
Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan
seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan
kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat
dari sebuah halaman PHP yang
digunakan untuk memproses isi data form.
Atribut kedua adalah method,
yang berfungsi untuk menjelaskan bagaimana data isian form akan dikirim oleh
web browser. Nilai dari atribut method ini
bisa berupa get atau post.
Form Elemen
Bab ini
menjelaskan semua elemen formulir HTML.
Elemen
<input>
Elemen
formulir yang paling penting adalah elemen <input>.
Elemen
<input> dapat ditampilkan dalam beberapa cara, tergantung pada atribut
type.
Input Type
Bab ini
menjelaskan berbagai jenis input untuk elemen <input>.
Teks Jenis
Input
<input
type = "text"> mendefinisikan bidang input teks satu baris.
Input Atribut
Didalam input
atribut ada beberapa jenis inputan antara lain :
·
Atribut nilai
·
Atribut Read-only
·
Atribut Disable
·
Atribut Ukuran
·
Atribut Max-Length
Atribut Nilai
Atribut nilai
menentukan nilai awal untuk bidang input.
Atribut Read-Only
Atribut yang
hanya bisa dibaca
Atribut
readonly menentukan bahwa field input hanya bisa dibaca (tidak dapat diubah).
Atribut Disable
Atribut
disable menetapkan bahwa field input dinonaktifkan. Bidang input yang
dinonaktifkan tidak dapat digunakan dan tidak dapat diklik, dan nilainya tidak
akan dikirim saat mengirimkan formulir.
Atribut Ukuran
Atribut
ukuran menentukan ukuran (dalam karakter) untuk bidang input.
Atribut Max-Length
Atribut
maxlength menentukan panjang maksimum yang diizinkan untuk bidang input.
- HTML5
Tentang HTML 5
New Elements dan
Semantic Tag
Elemen <article>
article merupakan tag yang ditulis sebagai element HTML dalam
format <article>..</article>, digunakan untuk memberi mark up
sebuah independent content, artinya element itu dapat berdiri sendiri sebagai
sebuah konten utuh yang tidak terikat dengan konten lain (element lain).
Contoh: sebuah postingan blog, komentar blog, postingan forum, sebuah review
item tertentu, berita atau sebuah interaktif widget dapat ditulis dan diapit
menggunakan element <article> </article> .
Elemen <aside>
aside
artinya disamping yang menunjukkan bersebelahan. Element aside digunakan untuk
merepresentasikan sebuah bagian halaman (seksi) yang berkaitan dengan konten
disekitar element aside itu sendiri.
Elemen <bdi>
bdi
adalah kepanjangan dari Bi-Directional Isolation yang berarti isolasi dua
arah.HTML element <bdi> digunakan untuk mengisolasi diri terhadap arah
tulisan yang mungkin berbeda dari element lain di sekitarnya.
Elemen <detail>
HTML <details> merupakan element interaktif yang digunakan
untuk menentukkan rincian (detail) konten tambahan yang dapat ditampilkan atau
disembunyikan oleh user.Secara default, teks atau konten pada details element
tidak akan ditampilkan pada jendela browser kecuali attribute open disebutkan
pada details element tersebut.
Elemen <dialog>
HTML <dialog> tag digunakan untuk merepresentasikan kotak
dialog yang akan muncul untuk mendapatkan perhatian dan interaksi dengan
user.Element <dialog> dimaksudkan untuk mempermudah pembuatan jendela
popup dan modal dialog pada sebuah halaman web yang kebanyakan dibuat oleh
script (JavaScript).
ELEMEN <figcaption>
HTML <figcaption> element merepresentasikan sebuah judul
(caption) untuk <figure> element. Contohnya, sebuah gambar seringkali
terdapat catatan (judul) yang mewakili atau memberi keterangan pada gambar
tersebut. Elemen <figcaption> dapat digunakan untuk memarkup judul atau
keterangan dari gambar tersebut.
ELEMEN <figure>
<figure> element digunakan untuk merepresentasikan konten
tersendiri (self-contained, seperti sebuah kalimat lengkap), contohnya sebuah
ilustrasi, diagram, foto, video, skema, deretan kode (code listings) dan lain
sebagainya.<figure> element digunakan untuk meng-group blok konten yang
dapat dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi
arti dari induk dokumen.
ELEMEN <footer>
HTML <footer> element merepresentasikan sebuah catatan kaki
(bagian kaki / footer) untuk elemen yang menaunginya (berada di dalamnya),
seperti catatan kaki pada sebuah <article> element, <section>
element, catatan kaki untuk induk dokumen (<body> element) dan lain
sebagainya.
ELEMEN <header>
HTML <header> element merepresentasikan konten pengantar,
pembukaan atau navigasi yang terdiri dari deretan link.Dalam penggunaannya,
<header> element dapat berisi element heading (<h1>-<h6>)
tapi tidak diperlukan, daftar isi (table of contents), sebuah logo, form
pencarian dan lain sebagainya.
ELEMEN <main>
HTML <main> element merepresentasikan konten utama dalam
sebuah dokumen (tepatnya didalam <body> element).
ELEMEN <mark>
HTML <mark> element digunakan untuk merepresentasikan teks
yang disorot atau ditandai karena memiliki peran penting, yang biasanya
dimaksudkan untuk mereferensi (merujuk) atau mengingatkan akan hal penting yang
berkaitan dengan konteks khusus sebuah kalimat.
ELEMEN <meter>
HTML <meter> element digunakan untuk mengukur data
berdasarkan tingkat tertentu. Memeteri data dengan bilangan yang menunjukkan
tingkat meteran atau dikenal dengan istilah gauge.
ELEMEN <nav>
HTML <nav> element merepresentasikan link navigasi
(navigational link).
ELEMEN <progress>
HTML <progress> element merepresentasikan berlangsungnya
(progres) suatu kegiatan atau tugas.
ELEMEN <selection>
Select berarti memilih. HTML <select> element
merepresentasikan sebuah kontrol yang digunakan untuk menyeleksi (memilih) deretan
opsi (daftar pilihan) yang diberikan baik satu ataupun lebih dari satu pilihan.
ELEMEN <time>
HTML <time> element digunakan untuk merepresentasikan sebuah
waktu 24-jam atau tanggal, tepatnya tanggal dalam sistem masehi (dikenal dengan
nama "Gregorian Calendar") dengan tambahan waktu dan informasi zona
waktu (timezone) yang dapat ditulis secara opsional.
ELEMEN <wbr>
HTML element <wbr> (Word Break Opportunity) digunakan untuk
merepresentasikan posisi sebuah kata atau frase yang dapat dipecah (dipindahkan)
ke baris baru (line break).
ELEMEN <track>
HTML <track> element digunakan untuk menampilkan teks
berdasarkan waktu putar media (audio maupun video) atau tepatnya adalah timed
text tracks. <track> tag ditulis di dalam media element, seperti
<audio> dan <video>.
Graphics dan Canvas
Tentang Canvas
Tentang canvas
HTML element <canvas> digunakan untuk menggambar grafik /
bitmap secara interaktif menggunakan script (javascript). Contohnya, digunakan
untuk menggambar grafik permainan, animasi, komposisi foto dan efek gambar
visual lainnya.
<canvas> element hanya sebagai container (penampung) untuk
gambar, sedangkan gambarnya dibuat oleh script secara terpisah.
Didalam element canvas, dapat disisipkan teks apa saja sebagai
fallback untuk browser yang tidak mendukung HTML canvas, teks ini akan muncul
apabila browser tidak mendukung canvas element.
Kanvas Gambar
Didalam sebuah
bingkai terdapat gambar atau bisa jadi berupa video dan audio.
Koordinat kanvas
Untuk menggambar garis lurus di kanvas, gunakan metode berikut:
moveTo( x,y ) - mendefinisikan titik awal dari garis
lineTo( x,y ) - mendefinisikan titik akhir dari garis
Untuk benar-benar menarik garis, Anda harus menggunakan salah satu
dari "ink" metode, seperti stroke() .
Draw Line
Berfungsi untuk membuat garis lurus.
Draw a Circle
Untuk
menggambar lingkaran pada canvas, gunakan metode berikut:
§ beginPath ()
- memulai jalur
§ arc (x, y, r,
startangle, endangle) - membuat busur / kurva. Untuk membuat lingkaran dengan
busur (): Atur mulai sudut ke 0 dan ujung ke 2 * Math.PI. Parameter x dan y
menentukan koordinat x dan y dari pusat lingkaran. Parameter r mendefinisikan
radius lingkaran.
§ Menentukan lingkaran dengan metode arc (). Kemudian gunakan metode
stroke () untuk benar-benar menggambar lingkaran.
Canvas Gradient
Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran,
garis, teks, dll Bentuk di kanvas tidak terbatas pada warna solid.
Ada dua jenis yang berbeda dari gradien:
createLinearGradient ( x,y,x1,y1 ) - menciptakan gradien linier
createRadialGradient ( x,y,r,x1,y1,r1 ) - menciptakan radial /
melingkar gradien
Setelah kami memiliki objek gradien, kita harus menambahkan dua
atau lebih berhenti warna.
The addColorStop() metode menentukan berhenti warna, dan posisinya
di sepanjang gradien. posisi gradien dapat di mana saja antara 0-1.
Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle
properti untuk gradien, kemudian menggambar bentuk (rectangle, text, or a line)
.
CreateLinearGradient
Buat
gradien linier. Isi persegi panjang dengan gradien.
CreateRadialGradient
Buat radial / melingkar gradien. Isi persegi panjang dengan
gradien.
Canvas Text
Untuk menggambar teks pada kanvas, properti yang paling penting
dan metode adalah:
font - mendefinisikan properti font untuk teks
fillText( text,x,y ) - menarik "filled" teks pada kanvas
strokeText( text,x,y ) - menarik teks pada kanvas (no fill)
CanvasImages
Untuk
menarik gambar pada kanvas, menggunakan metode berikut:
drawImage(
image,x,y )
SVG
Apa itu SVG?
Singkatan dari Scalable
Vector Graphics (SVG) adalah format gambar yang dikembangkan oleh Word Wide Web Consortium sejak tahun 1999. Sebuah gambar dengan
format SVG disimpan dalam bentuk file XML format gambar yang menggunakan XML (eXtensible
Markup Language) digunakan untuk mendefinikan sebuah garis berbasis vector
dan web. SVG mendefinisikan grafis dalam format XML sebagai dasar untuk
membentuk gambar vektor dua dimensi dan juga Grafis SVG tidak kehilangan
kualitas jika mereka di perbesar atau diubah ukurannya. Setiap elemen dan
setiap atribut dalam file SVG dapat di buat animasi.SVG adalah rekomendasi dari
W3C dengan standar W3C lain seperti DOM dan XSL.
SVG memiliki
beberapa elemen bentuk yang telah ditentukan yang dapat digunakan oleh
pengembang:
·
Rectangle <rect>
·
Lingkaran <lingkaran>
·
Ellipse <elips>
·
Baris <line>
·
Polyline <polyline>
·
Polygon <poligon>
·
Jalur <path>
Membuat Gambar SVG
Berikut adalah
syntax membuat gambar svg menggunakan elemen <circle> yaitu untuk membuat
gambar svg berbentuk lingkaran.
Contoh SVG Rectangle
Elemen <rect>
digunakan untuk membuat persegi panjang.
Circle
Elemen <circle> digunakan untuk membuat
lingkaran.
Ellipse
Elemen <ellipse>
digunakan untuk membuat bentuk elips.
Elips hamper
sama dengan lingkaran perbedaannya
elips memiliki radius x dan y yang berbeda satu sama lain, sementara lingkaran
memiliki radius x dan y yang sama.
Line
Elemen
<line> digunakan untuk membuat garis
Polygon
Elemen
<polygon> digunakan untuk membuat grafik yang mengandung tiga sisi.
Polyline
Elemen
<polyline> digunakan untuk membuat bentuk apa pun yang hanya terdiri dari
garis lurus (yang terhubung pada beberapa titik).
Path
Kurva Bézier digunakan untuk memodelkan kurva halus yang dapat
diskalakan tanpa batas. Umumnya, pengguna memilih dua titik akhir dan satu atau
dua titik kontrol. Kurva Bézier dengan satu titik kontrol disebut kurva Bézier
kuadrat dan jenis dengan dua titik kontrol disebut kubik. Contoh berikut
membuat kurva Bézier kuadrat, di mana A dan C adalah titik awal dan akhir, B
adalah titik kontrol.
Text
Teks dalam dokumen web dapat diformat secara khusus untuk
menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut.
Perbedaan ditampilan dalam warna, bentuk huruf tebal, miring, garis bawah dan
lainnya.
Stroke
Stroke memiliki berbagai
macam properti stroke, seperti :
·
Pukulan
·
Lebar-stroke
·
Stroke-linecap
·
Stroke-dasharray
Semua properti stroke dapat diterapkan untuk semua jenis garis, teks dan
garis besar elemen seperti lingkaran.
Blur
Effect
semua filter SVG internet didefinisikan dalam elemen <defs>. Elemen <defs> pendek
untuk definisi elemen khusus (seperti filter) yang digunakan menentukan filter
SVG. Elemen <filter> memiliki aatribut id yang diperlukan mengidetifikasi
filter, grafik kemudian menunjuk ke filter untuk digunakan.
Drop
Shadow
Elemen <feOffset> digunakan untuk membuat efek drop shadow. Untuk
mengambil grafik SVG dan memindahkan sesuai yang diinginkan.
Linear
Digunakan untuk
mendefinisikan gradien linier.
Radial
Digunakan untuk menentukan gradien radial.
Google
Maps
Digunakan untuk menunjukan suatu lokasi, contohnya untuk menunjukan Universitas
Teknologi Yogyakarta dengan menentukan titik koordinat.
Media
Multimedia sama dengan media
di web adalah suara, musik, video, film, dan animasi.
Multimedia hadir dalam berbagai format seperti :
gambar, musik, suara, video, rekaman, film, animasi, dan lainnya.
Halaman web
mengandung elemen multimedia dari berbagai jenis dan format.
·
Dukungan
Browser
Browser web pertama hanya mendukung teks,
terbatas pada satu huruf dalam satu warna.
Kemudian datang browser dengan dukungan untuk
warna dan font, dan gambar.
Audio, video, dan animasi telah ditangani secara
berbeda oleh peramban utama. Berbagai format telah didukung, dan beberapa
format memerlukan program pembantu ekstra (plug-in) untuk berfungsi.
Semoga ini akan menjadi sejarah. HTML5
multimedia menjanjikan masa depan yang lebih mudah untuk multimedia.
·
Format
Multimedia
Elemen multimedia (seperti audio atau video)
disimpan dalam file media.
File multimedia memiliki format dan ekstensi
yang berbeda seperti: .swf, .wav, .mp3, .mp4, .mpg, .wmv, dan .avi.
·
Format
Video Umum
-
MP4
adalah format baru dan yang akan datang untuk video internet.
-
MP4
direkomendasikan oleh YouTube.
-
MP4
didukung oleh Flash Players.
-
MP4
didukung oleh HTML5
Video
Digunakan untuk merujuk sumber file video, sehingga dapat diputar
(dimainkan)pada halaman web.
Audio
Digunakan untuk memasukan audio seperti lag uke dalam HTML yang dapat
diputar.
·
Audio
di Web
Sebelum HTML5, file audio hanya dapat diputar di
browser dengan plug-in (seperti flash). Elemen HTML5 <audio> menentukan
cara standar untuk menanamkan audio di halaman web.
·
Dukungan
Browser
Angka-angka dalam tabel menentukan versi browser
pertama yang sepenuhnya mendukung elemen <audio>.
Plug-ins
Audio di WebSebelum HTML5, file audio hanya
dapat diputar di browser dengan plug-in (seperti flash).
Elemen HTML5 <audio> menentukan cara
standar untuk menanamkan audio di halaman web.Angka-angka dalam tabel
menentukan versi browser pertama yang sepenuhnya mendukung elemen
<audio>.
Sekalian pembahasan mengenai HTML ini, untuk contoh tag nya akan dibahas di postingan selanjutnya 😁
Komentar
Posting Komentar