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>
Home »
» Rangkuman PPW
Rangkuman PPW
Written by : Your Name - Describe about you
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus.
Join Me On: Facebook | Twitter | Google Plus :: Thank you for visiting ! ::
0 komentar:
Posting Komentar