Fungsi JavaScript adalah blok kode yang dirancang untuk melakukan tugas tertentu .
Fungsi JavaScript dijalankan ketika " sesuatu " itu memanggil ( menyebutnya ) .
contoh
Fungsi myFunction ( p1 , p2 ) {
kembali p1 * p2 ; // Fungsi mengembalikan produk p1 dan p2
}
Cobalah Sendiri »
JavaScript Fungsi Sintaks
Fungsi JavaScript didefinisikan dengan fungsi kata kunci , diikuti dengan nama , diikuti dengan tanda kurung ( ) .
Nama fungsi dapat berisi huruf, angka , garis bawah , dan tanda-tanda dolar ( aturan yang sama seperti variabel ) .
Tanda kurung mungkin termasuk nama parameter dipisahkan dengan koma : ( parameter1 , parameter2 , ... )
Kode akan dieksekusi , oleh fungsi , ditempatkan di dalam kurung keriting : { }
functionName ( parameter1 , parameter2 , parameter3 ) {
kode yang akan dieksekusi
}
Parameter fungsi adalah nama-nama yang tercantum dalam definisi fungsi .
contoh
Hitung produk dari dua angka, dan mengembalikan hasil :
var x = myFunction ( 4 , 3 ) ; // Fungsi ini disebut , nilai kembali akan berakhir di x
Fungsi myFunction (a , b ) {
mengembalikan * b ; // Fungsi mengembalikan produk a dan b
}
Hasil di x akan :
12
Cobalah Sendiri »
Mengapa Fungsi ?
Anda dapat menggunakan kembali kode : Tentukan kode sekali , dan menggunakannya berkali-kali .
Anda dapat menggunakan yang sama kali kode banyak dengan argumen yang berbeda , untuk menghasilkan hasil yang berbeda .
contoh
Mengkonversi Fahrenheit ke Celcius :
Fungsi toCelsius ( fahrenheit ) {
kembali ( 9/5 ) * ( fahrenheit - 32 ) ;
}
document.getElementById ( " demo " ) innerHTML = toCelsius ( 32 ) . ;
Cobalah Sendiri »
The ( ) Operator memanggil Fungsi
Menggunakan contoh di atas , toCelsius mengacu pada fungsi objek , dan toCelcius ( ) mengacu pada hasil fungsi .
contoh
Mengakses fungsi tanpa ( ) akan mengembalikan definisi fungsi :
Fungsi toCelsius ( fahrenheit ) {
kembali ( 9/5 ) * ( fahrenheit - 32 ) ;
}
document.getElementById ( " demo " ) innerHTML = toCelsius . ;
Cobalah Sendiri »
Fungsi Digunakan sebagai Variabel
Dalam JavaScript , fungsi dapat digunakan sebagai variabel :
contoh
Alih-alih :
temp = toCelsius ( 32 ) ;
text = " Suhu " + suhu + " celcius " ;
Anda dapat menggunakan :
text = " Suhu " + toCelsius ( 32 ) + " celcius " ;
JavaScript Functions
Posted by Unknown
Posted on 05.41
with No comments
HTML5 audio
Posted by Unknown
Posted on 05.38
with No comments
Audio di Web Sebelum HTML5 , tidak ada standar untuk memainkan file audio pada halaman web . Sebelum HTML5 , file audio hanya bisa dimainkan dengan plug-in ( seperti flash) . HTML5 < Audio > elemen menentukan cara standar untuk menanamkan audio dalam halaman web . Dukungan Browser Internet Explorer Firefox Opera Google Chrome Safari Internet Explorer 9 + , Firefox , Opera , Chrome , dan Safari mendukung < audio yang > elemen . Catatan : Internet Explorer 8 dan versi sebelumnya , tidak mendukung < audio yang > elemen . HTML < Audio > Elemen Untuk memutar file audio dalam HTML , gunakan < audio yang > elemen : contoh < kontrol audio > < sumber src = " horse.ogg " type = " audio / ogg " > < sumber src = " horse.mp3 " type = " audio / mpeg " > Browser Anda tidak mendukung elemen audio. < / audio > Cobalah sendiri » HTML Audio - Cara Bekerja Kontrol atribut menambahkan kontrol audio , seperti play, pause , dan volume . Teks antara < audio yang > dan < / audio > tag akan ditampilkan dalam browser yang tidak mendukung < audio yang > elemen . Beberapa < sumber > elemen dapat link ke file audio yang berbeda . Browser akan menggunakan format yang diakui pertama .
HTML5 video
Posted by Unknown
Posted on 05.35
with No comments
Video Bermain di HTML Sebelum HTML5 , tidak ada standar untuk menampilkan video pada halaman web . Sebelum HTML5 , video hanya bisa dimainkan dengan plug-in ( seperti flash) . HTML5 < video> elemen menentukan cara standar untuk menanamkan video di halaman web . Dukungan Browser Internet Explorer Firefox Opera Google Chrome Safari Internet Explorer 9 + , Firefox , Opera , Chrome , dan Safari mendukung < video> elemen . Catatan : Internet Explorer 8 dan versi sebelumnya , tidak mendukung < video> elemen . HTML < video> Elemen Untuk menampilkan video di HTML , gunakan < video> elemen : contoh < width video = " 320 " height = " 240 " kontrol > < sumber src = " movie.mp4 " type = " video / mp4 " > < sumber src = " movie.ogg " type = " video / ogg " > Browser Anda tidak mendukung tag video. < / video > Cobalah sendiri » Cara Kerja Kontrol atribut menambahkan kontrol video, seperti play, pause , dan volume . Ini adalah ide yang baik untuk selalu menyertakan lebar dan tinggi atribut . Jika tinggi dan lebar tidak diatur , browser tidak mengetahui ukuran video . Efeknya akan bahwa halaman akan berubah ( atau flicker ) sedangkan beban video. Teks antara < video> dan < / video > tag hanya akan ditampilkan dalam browser yang tidak mendukung < video> elemen . Beberapa < sumber > elemen dapat link ke file video yang berbeda . Browser akan menggunakan format yang diakui pertama . HTML < video> Autoplay Untuk memulai video secara otomatis menggunakan atribut autoplay : contoh < width video = " 320 " height = " 240 " autoplay > < sumber src = " movie.mp4 " type = " video / mp4 " > < sumber src = " movie.ogg " type = " video / ogg " > Browser Anda tidak mendukung tag video. < / video >
Rangkuman PPW
Posted by Unknown
Posted on 19.39
with No comments
HTML ini berisi ratusan contoh HTML.
Dengan HTML editor online kami, Anda dapat mengedit HTML, dan klik pada tombol untuk melihat hasilnya.
contoh
<! DOCTYPE html>
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
HTML Elements
Elemen HTML ditulis dengan tag awal, dengan tag akhir, dengan isi di antara:
<tagname> isi </ tagname>
Elemen HTML adalah segalanya dari tag awal sampai tag akhir:
<p> paragraf pertama saya. </ p>
Mulai tag Elemen konten tag End
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
<br>
Catatan Beberapa elemen HTML tidak memiliki tag akhir.
Bersarang HTML Elements
Elemen HTML dapat bersarang (elemen dapat berisi elemen).
Semua dokumen HTML terdiri dari elemen HTML bersarang.
Contoh ini berisi 4 elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
Coba sendiri »
HTML Contoh Dijelaskan
<Html> mendefinisikan seluruh dokumen.
Memiliki tag awal <html> dan tag akhir </ html>.
Isi elemen adalah elemen HTML lain (<body> elemen).
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
<Body> mendefinisikan tubuh dokumen.
Memiliki tag awal <body> dan tag akhir </ body>.
Isi elemen adalah dua elemen HTML lain (<h1> dan <p>).
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
<H1> mendefinisikan heading.
Memiliki tag awal <h1> dan tag akhir </ h1>.
Isi elemen adalah: My Heading Pertama.
<h1> My Heading Pertama </ h1>
The <p> mendefinisikan sebuah paragraf.
Memiliki tag awal <p> dan tag akhir </ p>.
Isi elemen adalah: paragraf pertama saya.
<p> paragraf pertama saya. </ p>
Jangan Lupakan Tag Akhir
Beberapa elemen HTML akan muncul dengan benar, bahkan jika Anda lupa tag akhir:
contoh
<html>
<body>
<p> Ini adalah sebuah paragraf
<p> Ini adalah sebuah paragraf
</ body>
</ html>
Coba sendiri »
Contoh di atas bekerja di semua browser, karena tag penutup dianggap opsional.
Jangan bergantung pada ini. Ini bisa menghasilkan hasil yang tidak diharapkan dan / atau kesalahan jika Anda lupa tag akhir.
Kosong HTML Elements
Elemen HTML tanpa konten disebut elemen kosong.
<br> merupakan elemen kosong tanpa tag penutup (Jaringan tag mendefinisikan satu baris).
Elemen kosong bisa "tertutup" dalam tag pembuka seperti ini: <br />.
HTML5 tidak memerlukan elemen kosong harus ditutup. Tapi jika Anda perlu validasi ketat, dan membuat dokumen Anda dibaca oleh parser XML, tutup semua elemen HTML.
Link HTML - Hyperlink
Link HTML adalah hyperlink.
Sebuah hyperlink adalah elemen, teks, atau gambar yang Anda dapat mengklik, dan melompat ke dokumen lain.
Link HTML - Sintaks
Dalam HTML, link didefinisikan dengan tag <a>:
Tautan Sintaks:
<a href="url"> link teks </a>
contoh:
<a href="http://www.w3schools.com/html/"> Kunjungi kami </a> HTML tutorial
Coba Sendiri »
Href atribut menentukan alamat tujuan (http://www.w3schools.com/html/)
Link teks adalah bagian yang terlihat (Kunjungi tutorial HTML kami).
Mengklik link teks, akan mengirimkan ke alamat yang ditentukan.
Catatan link teks tidak harus berupa teks. Hal ini dapat gambar HTML atau elemen lain 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>
Coba 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 warna default, menggunakan gaya:
contoh
<style>
a: link {color: # 000000; background-color: transparent}
a: visited {color: # 000000; background-color: transparent}
a: hover {color: # ff0000; background-color: transparent}
a: active {color: # ff0000; background-color: transparent}
</ style>
HTML Images Sintaks
Dalam HTML, gambar didefinisikan dengan tag <img>.
<Img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
The src atribut mendefinisikan url (alamat web) dari gambar:
<img src = "url" alt = "some_text">
Alt Atribut
Atribut alt menentukan sebuah teks alternatif untuk gambar, jika tidak dapat ditampilkan.
Nilai atribut alt harus menjelaskan gambar dengan kata:
contoh
<img src = "html5.gif" alt = "The HTML5 Icon resmi">
Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
Layar Pembaca HTML
Layar pembaca adalah program perangkat lunak yang dapat membaca apa yang ditampilkan di layar.
Digunakan di web, pembaca layar dapat "mereproduksi" HTML sebagai teks-to-speech, ikon suara, atau output braille.
Layar pembaca digunakan oleh orang-orang yang buta, tunanetra, atau ketidakmampuan belajar.
Catatan Layar pembaca dapat membaca atribut alt.
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan atribut style untuk menentukan lebar dan tinggi dari suatu gambar.
Nilai-nilai yang ditentukan dalam pixel (px digunakan setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">
Coba Sendiri »
Atau, Anda dapat menggunakan lebar dan tinggi atribut.
Nilai-nilai yang ditentukan dalam piksel (tanpa px setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5 Icon" width = "128" height = "128">
Coba Sendiri »
Lebar dan Tinggi atau Style?
Baik lebar, tinggi, dan atribut gaya, berlaku dalam standar HTML5 terbaru.
Kami sarankan Anda menggunakan atribut style. Ini mencegah gaya lembar untuk mengubah ukuran default gambar:
contoh
<! DOCTYPE html>
<html>
<head>
<style>
img {width: 100%; }
</ style>
</ head>
<body>
<img src = "html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">
<img src = "html5.gif" alt = "HTML5 Icon" width = "128" height = "128">
</ body>
</ html>...
Mendefinisikan Tabel HTML
contoh
<span tabel = "width: 100%">
<tr>
<td> Jill </ td>
<td> Smith </ td>
<td> 50 </ td>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Coba Sendiri »
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan tag <tr>.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Catatan Tabel Data <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Border
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan menggunakan atribut border:
contoh
<table border = "1" style = "width: 100%">
<tr>
<td> Jill </ td>
<td> Smith </ td>
<td> 50 </ td>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Coba Sendiri »
Catatan Atribut perbatasan sedang dalam perjalanan dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti border CSS:
contoh
meja, th, td {
border: 1px solid hitam;
}
Coba Sendiri »
Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.
Sebuah Tabel HTML dengan Borders Collapsed
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse:
contoh
meja, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
Coba Sendiri »
Sebuah Tabel HTML dengan Sel Padding
Sel bantalan menentukan ruang antara isi sel dan perbatasannya.
Jika Anda tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa bantalan.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
meja, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
Coba Sendiri »
HTML Table Pos
Tabel judul didefinisikan dengan <th> tag.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<span tabel = "width: 100%">
<tr>
<th> Nama depan </ th>
<th> Nama belakang penumpang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Coba Sendiri »
Untuk kiri menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
text-align: left;
}
Coba Sendiri »
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak Border menentukan ruang antara sel.
Untuk mengatur jarak perbatasan untuk tabel, menggunakan properti CSS border-spacing:
contoh
table {
border-spacing: 5px;
}
Coba Sendiri »
Catatan Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
contoh
<span tabel = "width: 100%">
<tr>
<th> Nama </ th>
<th colspan = "2"> Telepon </ th>
</ tr>
<tr>
<td> Bill Gates </ td>
<td> 555 77 854 </ td>
<td> 555 77 855 </ td>
</ tr>
</ table>
Coba Sendiri »
Tabel Sel yang berkaitan dengan berbagai Rows
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<span tabel = "width: 100%">
<tr>
<th> Nama Pertama: </ th>
<td> Bill Gates </ td>
</ tr>
<tr>
<th rowspan = "2"> Telepon: </ th>
<td> 555 77 854 </ td>
</ tr>
<tr>
<td> 555 77 855 </ td>
</ tr>
</ table>
Coba Sendiri »
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke tabel, gunakan <caption> tag:
contoh
<span tabel = "width: 100%">
<caption> tabungan bulanan </ caption>
<tr>
<th> Bulan </ th>
<th> Tabungan </ th>
</ tr>
<tr>
<td> Januari </ td>
<td> $ 100 </ td>
</ tr>
<tr>
<td> Februari </ td>
<td> $ 50 </ td>
</ tr>
</ table>
Coba Sendiri »
Catatan <caption> tag harus dimasukkan segera setelah <table> tag.
Gaya Berbeda untuk Tabel Berbeda
Sebagian contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar dari setiap meja.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya di <head>, bagaimanapun, menentukan gaya untuk semua tabel di halaman.
Untuk menentukan gaya khusus untuk meja khusus, menambahkan atribut id ke meja:
contoh
<table id = "T01">
<tr>
<th> Nama depan </ th>
<th> Nama belakang penumpang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Memformat Teks
Teks ini ditebalkan
Teks ini miring
Ini adalah superscript
HTML Format Elemen
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.
Unsur-unsur ini disebut unsur-unsur format.
HTML Bold Memformat
HTML <b> mendefinisikan teks tebal, tanpa kepentingan tambahan.
contoh
<p> Teks ini adalah normal. </ p>
<p> <b> Teks ini ditebalkan </ b> </ p>.
Coba Sendiri »
HTML <strong> mendefinisikan teks yang kuat, dengan tambahan semantik penting.
contoh
<p> Teks ini adalah normal. </ p>
<p> <strong> Teks ini ditebalkan </ strong> </ p>.
Coba Sendiri »
HTML Miring Memformat
HTML <i> mendefinisikan teks miring, tanpa kepentingan tambahan.
contoh
<p> Teks ini adalah normal. </ p>
<p> <i> Teks ini miring </ i> </ p>.
Coba Sendiri »
HTML <em> elemen mendefinisikan menekankan teks, dengan menambahkan semantik penting.
contoh
<p> Teks ini adalah normal. </ p>
<p> <em> Teks ini ditekankan </ em>. </ p>
Coba Sendiri »
Catatan Browser display <strong> sebagai <b>, dan <em> sebagai <i>.
Namun, ada perbedaan dalam arti tag ini: <b> dan <i> mendefinisikan teks tebal dan miring,
tetapi <strong> dan <em> berarti bahwa teks adalah "penting".
HTML Ditandai Memformat
HTML <mark> elemen mendefinisikan ditandai atau teks yang disorot:
contoh
<h2> HTML <mark> Ditandai </ mark> Formatting </ h2>
Coba Sendiri »
HTML Dihapus Memformat
HTML <del> elemen mendefinisikan dihapus (dihapus) teks.
contoh
<p> Warna favorit saya <del> biru </ del> merah. </ p>
Coba Sendiri »
HTML Disisipkan Memformat
HTML <ins> elemen mendefinisikan dimasukkan (ditambahkan) teks.
contoh
<p> Favorit saya <ins> warna </ ins> merah. </ p>
Coba Sendiri »
HTML Subscript Memformat
HTML <sub> mendefinisikan teks subscript.
contoh
<p> Ini adalah <sub> subscript </ sub> Teks </ p>.
Coba Sendiri »
HTML Superscript Memformat
HTML <sup> mendefinisikan teks superscripted.
contoh
<p> Ini adalah <sup> superscripte </ sup> teks. </ p>
HTML Format Elemen
Pada bab sebelumnya, Anda belajar tentang elemen format HTML.
Elemen format adalah elemen HTML khusus dengan arti khusus.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks, seperti teks penting, menekankan teks, subskrip, dan superscripts.
HTML Styling
Styling HTML tidak ada hubungannya dengan unsur-unsur format.
Styling adalah tentang mengubah atau menambahkan gaya elemen HTML yang ada.
Setiap elemen HTML memiliki gaya default (warna latar belakang putih, warna teks hitam ...)
Mengubah gaya default elemen HTML, dapat dilakukan dengan atribut style.
contoh
<gaya body = "background-color: lightgrey">
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
Coba Sendiri »
Catatan bgcolor atribut, didukung dalam versi HTML, tidak berlaku di HTML5.
Gaya HTML Atribut
Gaya HTML atribut memiliki sintaks berikut:
style = "property: value"
Properti adalah properti CSS. Nilai adalah nilai CSS.
Catatan Anda akan belajar lebih banyak tentang CSS nanti dalam tutorial ini.
HTML Warna Teks
Properti color mendefinisikan warna teks yang akan digunakan untuk elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<h1 style = "color: blue"> Ini adalah heading </ h1>
<p style = "color: red">. Ini adalah sebuah paragraf </ p>
</ body>
</ html>
Coba Sendiri »
HTML Text Font
Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<span h1 = "font-family: verdana"> Ini adalah heading </ h1>
<p style = "font-family: courier">. Ini adalah sebuah paragraf </ p>
</ body>
</ html>
Coba Sendiri »
Catatan <font> tag, didukung dalam versi HTML, tidak berlaku di HTML5.
HTML Text Size
Properti font-size mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<span h1 = "font-size: 300%"> Ini adalah heading </ h1>
<p style = "font-size: 160%">. Ini adalah sebuah paragraf </ p>
</ body>
</ html>
Coba Sendiri »
HTML Text Keselarasan
Properti text-align mendefinisikan perataan teks horisontal untuk sebuah elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<span h1 = "text-align: center"> Centered Heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
Dengan HTML editor online kami, Anda dapat mengedit HTML, dan klik pada tombol untuk melihat hasilnya.
contoh
<! DOCTYPE html>
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
HTML Elements
Elemen HTML ditulis dengan tag awal, dengan tag akhir, dengan isi di antara:
<tagname> isi </ tagname>
Elemen HTML adalah segalanya dari tag awal sampai tag akhir:
<p> paragraf pertama saya. </ p>
Mulai tag Elemen konten tag End
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
<br>
Catatan Beberapa elemen HTML tidak memiliki tag akhir.
Bersarang HTML Elements
Elemen HTML dapat bersarang (elemen dapat berisi elemen).
Semua dokumen HTML terdiri dari elemen HTML bersarang.
Contoh ini berisi 4 elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
Coba sendiri »
HTML Contoh Dijelaskan
<Html> mendefinisikan seluruh dokumen.
Memiliki tag awal <html> dan tag akhir </ html>.
Isi elemen adalah elemen HTML lain (<body> elemen).
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
<Body> mendefinisikan tubuh dokumen.
Memiliki tag awal <body> dan tag akhir </ body>.
Isi elemen adalah dua elemen HTML lain (<h1> dan <p>).
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
<H1> mendefinisikan heading.
Memiliki tag awal <h1> dan tag akhir </ h1>.
Isi elemen adalah: My Heading Pertama.
<h1> My Heading Pertama </ h1>
The <p> mendefinisikan sebuah paragraf.
Memiliki tag awal <p> dan tag akhir </ p>.
Isi elemen adalah: paragraf pertama saya.
<p> paragraf pertama saya. </ p>
Jangan Lupakan Tag Akhir
Beberapa elemen HTML akan muncul dengan benar, bahkan jika Anda lupa tag akhir:
contoh
<html>
<body>
<p> Ini adalah sebuah paragraf
<p> Ini adalah sebuah paragraf
</ body>
</ html>
Coba sendiri »
Contoh di atas bekerja di semua browser, karena tag penutup dianggap opsional.
Jangan bergantung pada ini. Ini bisa menghasilkan hasil yang tidak diharapkan dan / atau kesalahan jika Anda lupa tag akhir.
Kosong HTML Elements
Elemen HTML tanpa konten disebut elemen kosong.
<br> merupakan elemen kosong tanpa tag penutup (Jaringan tag mendefinisikan satu baris).
Elemen kosong bisa "tertutup" dalam tag pembuka seperti ini: <br />.
HTML5 tidak memerlukan elemen kosong harus ditutup. Tapi jika Anda perlu validasi ketat, dan membuat dokumen Anda dibaca oleh parser XML, tutup semua elemen HTML.
Link HTML - Hyperlink
Link HTML adalah hyperlink.
Sebuah hyperlink adalah elemen, teks, atau gambar yang Anda dapat mengklik, dan melompat ke dokumen lain.
Link HTML - Sintaks
Dalam HTML, link didefinisikan dengan tag <a>:
Tautan Sintaks:
<a href="url"> link teks </a>
contoh:
<a href="http://www.w3schools.com/html/"> Kunjungi kami </a> HTML tutorial
Coba Sendiri »
Href atribut menentukan alamat tujuan (http://www.w3schools.com/html/)
Link teks adalah bagian yang terlihat (Kunjungi tutorial HTML kami).
Mengklik link teks, akan mengirimkan ke alamat yang ditentukan.
Catatan link teks tidak harus berupa teks. Hal ini dapat gambar HTML atau elemen lain 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>
Coba 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 warna default, menggunakan gaya:
contoh
<style>
a: link {color: # 000000; background-color: transparent}
a: visited {color: # 000000; background-color: transparent}
a: hover {color: # ff0000; background-color: transparent}
a: active {color: # ff0000; background-color: transparent}
</ style>
HTML Images Sintaks
Dalam HTML, gambar didefinisikan dengan tag <img>.
<Img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
The src atribut mendefinisikan url (alamat web) dari gambar:
<img src = "url" alt = "some_text">
Alt Atribut
Atribut alt menentukan sebuah teks alternatif untuk gambar, jika tidak dapat ditampilkan.
Nilai atribut alt harus menjelaskan gambar dengan kata:
contoh
<img src = "html5.gif" alt = "The HTML5 Icon resmi">
Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
Layar Pembaca HTML
Layar pembaca adalah program perangkat lunak yang dapat membaca apa yang ditampilkan di layar.
Digunakan di web, pembaca layar dapat "mereproduksi" HTML sebagai teks-to-speech, ikon suara, atau output braille.
Layar pembaca digunakan oleh orang-orang yang buta, tunanetra, atau ketidakmampuan belajar.
Catatan Layar pembaca dapat membaca atribut alt.
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan atribut style untuk menentukan lebar dan tinggi dari suatu gambar.
Nilai-nilai yang ditentukan dalam pixel (px digunakan setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">
Coba Sendiri »
Atau, Anda dapat menggunakan lebar dan tinggi atribut.
Nilai-nilai yang ditentukan dalam piksel (tanpa px setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5 Icon" width = "128" height = "128">
Coba Sendiri »
Lebar dan Tinggi atau Style?
Baik lebar, tinggi, dan atribut gaya, berlaku dalam standar HTML5 terbaru.
Kami sarankan Anda menggunakan atribut style. Ini mencegah gaya lembar untuk mengubah ukuran default gambar:
contoh
<! DOCTYPE html>
<html>
<head>
<style>
img {width: 100%; }
</ style>
</ head>
<body>
<img src = "html5.gif" alt = "HTML5 Icon" style = "width: 128px; height: 128px">
<img src = "html5.gif" alt = "HTML5 Icon" width = "128" height = "128">
</ body>
</ html>...
Mendefinisikan Tabel HTML
contoh
<span tabel = "width: 100%">
<tr>
<td> Jill </ td>
<td> Smith </ td>
<td> 50 </ td>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Coba Sendiri »
Contoh menjelaskan:
Tabel didefinisikan dengan tag <table>.
Tabel dibagi menjadi baris tabel dengan tag <tr>.
Tabel baris dibagi menjadi data tabel dengan <td> tag.
Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.
Catatan Tabel Data <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll
Sebuah Tabel HTML dengan Atribut Border
Jika Anda tidak menentukan perbatasan untuk meja, maka akan ditampilkan tanpa batas.
Perbatasan dapat ditambahkan menggunakan atribut border:
contoh
<table border = "1" style = "width: 100%">
<tr>
<td> Jill </ td>
<td> Smith </ td>
<td> 50 </ td>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Coba Sendiri »
Catatan Atribut perbatasan sedang dalam perjalanan dari standar HTML! Hal ini lebih baik menggunakan CSS.
Untuk menambahkan perbatasan, menggunakan properti border CSS:
contoh
meja, th, td {
border: 1px solid hitam;
}
Coba Sendiri »
Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.
Sebuah Tabel HTML dengan Borders Collapsed
Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse:
contoh
meja, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
Coba Sendiri »
Sebuah Tabel HTML dengan Sel Padding
Sel bantalan menentukan ruang antara isi sel dan perbatasannya.
Jika Anda tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa bantalan.
Untuk mengatur padding, menggunakan properti CSS padding:
contoh
meja, th, td {
border: 1px solid hitam;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
Coba Sendiri »
HTML Table Pos
Tabel judul didefinisikan dengan <th> tag.
Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:
contoh
<span tabel = "width: 100%">
<tr>
<th> Nama depan </ th>
<th> Nama belakang penumpang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Coba Sendiri »
Untuk kiri menyelaraskan judul tabel, menggunakan properti text-align CSS:
contoh
th {
text-align: left;
}
Coba Sendiri »
Sebuah Tabel HTML dengan Spasi Perbatasan
Jarak Border menentukan ruang antara sel.
Untuk mengatur jarak perbatasan untuk tabel, menggunakan properti CSS border-spacing:
contoh
table {
border-spacing: 5px;
}
Coba Sendiri »
Catatan Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.
Tabel Sel yang berkaitan dengan berbagai Kolom
Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
contoh
<span tabel = "width: 100%">
<tr>
<th> Nama </ th>
<th colspan = "2"> Telepon </ th>
</ tr>
<tr>
<td> Bill Gates </ td>
<td> 555 77 854 </ td>
<td> 555 77 855 </ td>
</ tr>
</ table>
Coba Sendiri »
Tabel Sel yang berkaitan dengan berbagai Rows
Untuk membuat rentang sel lebih dari satu baris, menggunakan atribut rowspan:
contoh
<span tabel = "width: 100%">
<tr>
<th> Nama Pertama: </ th>
<td> Bill Gates </ td>
</ tr>
<tr>
<th rowspan = "2"> Telepon: </ th>
<td> 555 77 854 </ td>
</ tr>
<tr>
<td> 555 77 855 </ td>
</ tr>
</ table>
Coba Sendiri »
Sebuah Tabel HTML Dengan Caption
Untuk menambahkan keterangan ke tabel, gunakan <caption> tag:
contoh
<span tabel = "width: 100%">
<caption> tabungan bulanan </ caption>
<tr>
<th> Bulan </ th>
<th> Tabungan </ th>
</ tr>
<tr>
<td> Januari </ td>
<td> $ 100 </ td>
</ tr>
<tr>
<td> Februari </ td>
<td> $ 50 </ td>
</ tr>
</ table>
Coba Sendiri »
Catatan <caption> tag harus dimasukkan segera setelah <table> tag.
Gaya Berbeda untuk Tabel Berbeda
Sebagian contoh di atas menggunakan atribut gaya (width = "100%") untuk menentukan lebar dari setiap meja.
Hal ini membuat mudah untuk menentukan lebar yang berbeda untuk tabel yang berbeda.
Gaya di <head>, bagaimanapun, menentukan gaya untuk semua tabel di halaman.
Untuk menentukan gaya khusus untuk meja khusus, menambahkan atribut id ke meja:
contoh
<table id = "T01">
<tr>
<th> Nama depan </ th>
<th> Nama belakang penumpang </ th>
<th> Poin </ th>
</ tr>
<tr>
<td> Eve </ td>
<td> Jackson </ td>
<td> 94 </ td>
</ tr>
</ table>
Memformat Teks
Teks ini ditebalkan
Teks ini miring
Ini adalah superscript
HTML Format Elemen
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.
Unsur-unsur ini disebut unsur-unsur format.
HTML Bold Memformat
HTML <b> mendefinisikan teks tebal, tanpa kepentingan tambahan.
contoh
<p> Teks ini adalah normal. </ p>
<p> <b> Teks ini ditebalkan </ b> </ p>.
Coba Sendiri »
HTML <strong> mendefinisikan teks yang kuat, dengan tambahan semantik penting.
contoh
<p> Teks ini adalah normal. </ p>
<p> <strong> Teks ini ditebalkan </ strong> </ p>.
Coba Sendiri »
HTML Miring Memformat
HTML <i> mendefinisikan teks miring, tanpa kepentingan tambahan.
contoh
<p> Teks ini adalah normal. </ p>
<p> <i> Teks ini miring </ i> </ p>.
Coba Sendiri »
HTML <em> elemen mendefinisikan menekankan teks, dengan menambahkan semantik penting.
contoh
<p> Teks ini adalah normal. </ p>
<p> <em> Teks ini ditekankan </ em>. </ p>
Coba Sendiri »
Catatan Browser display <strong> sebagai <b>, dan <em> sebagai <i>.
Namun, ada perbedaan dalam arti tag ini: <b> dan <i> mendefinisikan teks tebal dan miring,
tetapi <strong> dan <em> berarti bahwa teks adalah "penting".
HTML Ditandai Memformat
HTML <mark> elemen mendefinisikan ditandai atau teks yang disorot:
contoh
<h2> HTML <mark> Ditandai </ mark> Formatting </ h2>
Coba Sendiri »
HTML Dihapus Memformat
HTML <del> elemen mendefinisikan dihapus (dihapus) teks.
contoh
<p> Warna favorit saya <del> biru </ del> merah. </ p>
Coba Sendiri »
HTML Disisipkan Memformat
HTML <ins> elemen mendefinisikan dimasukkan (ditambahkan) teks.
contoh
<p> Favorit saya <ins> warna </ ins> merah. </ p>
Coba Sendiri »
HTML Subscript Memformat
HTML <sub> mendefinisikan teks subscript.
contoh
<p> Ini adalah <sub> subscript </ sub> Teks </ p>.
Coba Sendiri »
HTML Superscript Memformat
HTML <sup> mendefinisikan teks superscripted.
contoh
<p> Ini adalah <sup> superscripte </ sup> teks. </ p>
HTML Format Elemen
Pada bab sebelumnya, Anda belajar tentang elemen format HTML.
Elemen format adalah elemen HTML khusus dengan arti khusus.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks, seperti teks penting, menekankan teks, subskrip, dan superscripts.
HTML Styling
Styling HTML tidak ada hubungannya dengan unsur-unsur format.
Styling adalah tentang mengubah atau menambahkan gaya elemen HTML yang ada.
Setiap elemen HTML memiliki gaya default (warna latar belakang putih, warna teks hitam ...)
Mengubah gaya default elemen HTML, dapat dilakukan dengan atribut style.
contoh
<gaya body = "background-color: lightgrey">
<h1> Ini adalah heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
Coba Sendiri »
Catatan bgcolor atribut, didukung dalam versi HTML, tidak berlaku di HTML5.
Gaya HTML Atribut
Gaya HTML atribut memiliki sintaks berikut:
style = "property: value"
Properti adalah properti CSS. Nilai adalah nilai CSS.
Catatan Anda akan belajar lebih banyak tentang CSS nanti dalam tutorial ini.
HTML Warna Teks
Properti color mendefinisikan warna teks yang akan digunakan untuk elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<h1 style = "color: blue"> Ini adalah heading </ h1>
<p style = "color: red">. Ini adalah sebuah paragraf </ p>
</ body>
</ html>
Coba Sendiri »
HTML Text Font
Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<span h1 = "font-family: verdana"> Ini adalah heading </ h1>
<p style = "font-family: courier">. Ini adalah sebuah paragraf </ p>
</ body>
</ html>
Coba Sendiri »
Catatan <font> tag, didukung dalam versi HTML, tidak berlaku di HTML5.
HTML Text Size
Properti font-size mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<span h1 = "font-size: 300%"> Ini adalah heading </ h1>
<p style = "font-size: 160%">. Ini adalah sebuah paragraf </ p>
</ body>
</ html>
Coba Sendiri »
HTML Text Keselarasan
Properti text-align mendefinisikan perataan teks horisontal untuk sebuah elemen HTML:
contoh
<! DOCTYPE html>
<html>
<body>
<span h1 = "text-align: center"> Centered Heading </ h1>
<p> Ini adalah paragraf. </ p>
</ body>
</ html>
HTML editors
Posted by Unknown
Posted on 09.35
with No comments
HTML dapat diedit dengan menggunakan editor HTML profesional seperti:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac).
Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.
Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.
Langkah 1: Buka Notepad
Untuk membuka Notepad di Windows 7 atau sebelumnya:
Klik Start (kiri bawah pada layar Anda). Klik All Programs. Klik Accessories. Klik Notepad.
Untuk membuka Notepad di Windows 8 atau yang lebih baru:
Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda). Ketik Notepad.
Langkah 2: Tulis Beberapa HTML
Menulis atau menyalin beberapa HTML ke dalam Notepad.
contoh
<! DOCTYPE html>
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
Notepad
Langkah 3: Simpan Halaman HTML
Simpan file di komputer Anda.
Pilih File -> Save as dalam menu Notepad.
Saat menyimpan file HTML, menggunakan baik htm atau ekstensi file html. Tidak ada perbedaan, itu sepenuhnya terserah Anda.
Langkah 4: Lihat HTML Halaman di Browser Anda
Klik dua kali file HTML yang disimpan,
sumber :w3schools.com
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Namun, untuk belajar HTML sebaiknya editor teks seperti Notepad (PC) atau TextEdit (Mac).
Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML.
Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.
Langkah 1: Buka Notepad
Untuk membuka Notepad di Windows 7 atau sebelumnya:
Klik Start (kiri bawah pada layar Anda). Klik All Programs. Klik Accessories. Klik Notepad.
Untuk membuka Notepad di Windows 8 atau yang lebih baru:
Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda). Ketik Notepad.
Langkah 2: Tulis Beberapa HTML
Menulis atau menyalin beberapa HTML ke dalam Notepad.
contoh
<! DOCTYPE html>
<html>
<body>
<h1> My Heading Pertama </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
Notepad
Langkah 3: Simpan Halaman HTML
Simpan file di komputer Anda.
Pilih File -> Save as dalam menu Notepad.
Saat menyimpan file HTML, menggunakan baik htm atau ekstensi file html. Tidak ada perbedaan, itu sepenuhnya terserah Anda.
Langkah 4: Lihat HTML Halaman di Browser Anda
Klik dua kali file HTML yang disimpan,
sumber :w3schools.com
HTML Introduction
Posted by Unknown
Posted on 04.46
with 1 comment
Apa itu HTML ? HTML adalah bahasa markup untuk menggambarkan dokumen web ( halaman web ) . HTML singkatan dari Hyper Text Markup Language Sebuah bahasa markup adalah seperangkat tag markup Dokumen HTML dijelaskan oleh tag HTML Setiap tag HTML menjelaskan isi dokumen yang berbeda HTML Contoh Dokumen HTML Kecil < ! DOCTYPE html > < html > <body > < h1 > My Heading Pertama < / h1 > < p > paragraf pertama saya . < / p > < / body> < / html > Coba Sendiri » contoh Dijelaskan Deklarasi DOCTYPE mendefinisikan tipe dokumen Teks di antara < html > dan < / html > menjelaskan dokumen web Teks di antara <body > dan < / body> menggambarkan isi halaman yang terlihat Teks di antara < h1 > dan < / h1 > menggambarkan judul Teks di antara < p > dan < / p > menjelaskan ayat Menggunakan deskripsi , web browser dapat menampilkan dokumen dengan judul dan paragraf . HTML Tag Tag HTML adalah kata kunci ( nama tag ) dikelilingi oleh kurung sudut : < tagname > isi < / tagname > Tag HTML umumnya selalu berpasangan seperti < p > dan < / p > Tag pertama dalam pasangan adalah tag awal , tag kedua adalah tag akhir Tag akhir ditulis seperti tag awal , tetapi dengan sebuah garis miring sebelum nama tag
HTML basic
Posted by Unknown
Posted on 04.40
with No comments
HTML Contoh Dasar beberapa hal mendasar dalam perancangan web. Dokumen HTML Semua dokumen HTML harus dimulai dengan deklarasi tipe : < ! DOCTYPE html > . Dokumen HTML itu sendiri dimulai dengan < html > dan diakhiri dengan < / html > . Bagian terlihat dari dokumen HTML adalah antara <body > dan < / body> . contoh < ! DOCTYPE html > < html > <body > < h1 > My Heading Pertama < / h1 > < p > paragraf pertama saya . < / p > < / body> < / html > Coba Sendiri » HTML Pos Judul HTML didefinisikan dengan < h1 > untuk < h6 > tags : contoh < h1 > Ini adalah heading < / h1 > < h2 > Ini adalah heading < / h2 > < h3 > Ini adalah heading < / h3 > Coba Sendiri » HTML Paragraf Paragraf HTML didefinisikan dengan tag <p> : contoh < p > Ini adalah paragraf . < / p > < p > Ini adalah paragraf lain. < / p > Coba Sendiri » Links HTML Link HTML didefinisikan dengan tag <a> : contoh <a href="http://www.w3schools.com"> Ini adalah </a> tautan Coba Sendiri » Alamat link ditentukan dalam atribut href . Atribut yang digunakan untuk memberikan informasi tambahan tentang elemen HTML . HTML Images Gambar HTML didefinisikan dengan tag <img> . File sumber ( src ) , teks alternatif ( alt ) , dan ukuran ( lebar dan tinggi ) disediakan sebagai atribut. sumber : w3schools.com