Diberdayakan oleh Blogger.

Senin, 05 Januari 2015

Editor HTML

Menulis HTML Menggunakan Notepad atau TextEdit

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: Menulis Beberapa HTML

Menulis atau menyalin beberapa HTML ke Notepad.

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Notes

Langkah 3: Simpan halaman HTML

Simpan file di komputer Anda.
Pilih File> Save as dalam menu Notepad.
Anda dapat menggunakan salah htm atau html sebagai ekstensi file. Tidak ada perbedaan, itu terserah Anda.

Langkah 4: Lihat halaman HTML di Browser Anda

Klik dua kali file HTML yang disimpan, dan hasilnya akan terlihat seperti ini:



Lihat di Browser 
HTML Contoh Dasar

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 First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Cobalah Sendiri »

HTML Pos

Judul HTML didefinisikan dengan <h1> sampai <h6> tag:

Contoh

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Cobalah Sendiri »

HTML Paragraf

Paragraf HTML didefinisikan dengan tag <p>:

Contoh

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Cobalah Sendiri »

Link HTML

Link HTML didefinisikan dengan tag <a>:

Contoh

<a href="http://www.w3schools.com">This is a link</a>

Cobalah 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:

Contoh

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Cobalah Sendiri »
 
 
 

HTML Elemen

 

HTML Elemen

Elemen HTML ditulis dengan tag awal, dengan tag akhir, dengan isi di antara:
<Tagname> konten </ tagname>
Elemen HTML adalah segalanya dari tag awal sampai tag akhir:
<P> My first HTML paragraf. </ P>

Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    
Catatan Beberapa elemen HTML tidak memiliki tag akhir.

Bersarang HTML Elemen

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 First Heading</h1>
  <p>My first paragraph.</p>
</body>

</html>

Cobalah sendiri »

HTML Contoh Dijelaskan

<Html> elemen mendefinisikan seluruh dokumen.
Ini memiliki tag awal <html> dan tag akhir </ html>.
Isi elemen adalah elemen HTML lain (<body> elemen).
<html>

<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>

</html>
<Body> mendefinisikan tubuh dokumen.
Ini memiliki tag awal <body> dan tag akhir </ body>.
Isi elemen adalah dua elemen HTML lainnya (<h1> dan <p>).
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
<H1> mendefinisikan heading.
Ini memiliki tag awal <h1> dan tag akhir </ h1>.
Isi elemen adalah: My Pos Pertama.
<h1>My First Heading</h1>
The <p> mendefinisikan sebuah paragraf.
Ini memiliki tag awal <p> dan tag akhir </ p>.
Isi elemen adalah: paragraf pertama saya.
<p>My first paragraph.</p>

Jangan Lupakan Tag Akhir

Beberapa elemen HTML akan muncul dengan benar, bahkan jika Anda lupa tag akhir:

Contoh

<html>

<body>
  <p>This is a paragraph
  <p>This is a paragraph
</body>

</html>

Cobalah 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 Elemen

Elemen HTML tanpa konten yang disebut elemen kosong.
Situs adalah elemen kosong tanpa tag penutup (Jejaring tag mendefinisikan satu baris).
Elemen kosong bisa "tertutup" dalam tag pembuka seperti ini: <br />.
HTML5 tidak memerlukan elemen kosong harus ditutup. Tetapi jika Anda memerlukan validasi ketat, dan membuat dokumen Anda dibaca oleh parser XML, tutup semua elemen HTML.

HTML Tip: Gunakan huruf kecil Tag

Tag HTML tidak case sensitif: <P> berarti sama dengan <p>.
HTML5 standar tidak memerlukan tag huruf kecil, tapi W3C merekomendasikan huruf kecil di HTML4, dan menuntut huruf kecil untuk jenis dokumen ketat seperti XHTML.


Input Type: text

<Input type = "text"> mendefinisikan input lapangan satu-line untuk input teks:

Contoh

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

Cobalah Sendiri »
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Nama depan:

Nama Belakang:


Input Type: password

<Input type = "password"> mendefinisikan field kata sandi:

Contoh

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

Cobalah Sendiri »
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Nama depan:

Kata Sandi:
Catatan Karakter dalam bidang password bertopeng (ditampilkan sebagai tanda bintang atau lingkaran).

Input Type: submit

<Input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir masukan ke bentuk-handler.
Bentuk-handler biasanya halaman server dengan script untuk memproses input data.
Bentuk-handler yang ditetapkan dalam aksi atribut form:

Contoh

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Cobalah Sendiri »
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Nama depan:

Nama terakhir:

Jika Anda menghilangkan tombol submit yang nilai atribut, tombol akan mendapatkan teks default:

Contoh

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Cobalah Sendiri »

Input Type: radio

<Input type = "radio"> mendefinisikan tombol radio.
Tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan:

Contoh

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

Cobalah Sendiri »
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Laki-laki
Perempuan

Input Type: checkbox

<Input type = "checkbox"> mendefinisikan sebuah kotak centang.
Checkbox membiarkan pengguna memilih ZERO atau LEBIH pilihan dari sejumlah pilihan.

Contoh

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Cobalah Sendiri »
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Saya memiliki sepeda
Saya memiliki mobil

Input Type: tombol

<Input type = "button> mendefinisikan tombol:

Contoh

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Cobalah Sendiri »
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:


Jenis input HTML5

HTML5 menambahkan beberapa jenis masukan baru:
  • warna
  • buah kurma
  • datetime
  • datetime lokal
  • email
  • bulan
  • nomor
  • jarak
  • pencarian
  • tel
  • waktu
  • url
  • minggu
Catatan Jenis masukan, tidak didukung oleh browser web lama, akan berperilaku sebagai jenis input teks.

Input Type: Nomor

The <input type = "angka"> digunakan untuk field input yang harus berisi nilai numerik.
Anda dapat mengatur pembatasan angka.
Tergantung pada dukungan browser, pembatasan dapat diterapkan pada bidang masukan.

Contoh

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Cobalah Sendiri »

Pembatasan masukan

Berikut adalah daftar beberapa pembatasan masukan umum (beberapa baru di HTML5):
Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
Anda akan belajar lebih banyak tentang pembatasan masukan dalam bab berikutnya.

Contoh

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Cobalah Sendiri »

Input Type: tanggal

The <input type = "date"> digunakan untuk field input yang harus berisi tanggal.
Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

Contoh

<form>
  Birthday:
  <input type="date" name="bday">
</form>

Cobalah Sendiri »
Anda dapat menambahkan pembatasan input:

Contoh

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Cobalah Sendiri »

Input Type: warna

The <input type = "warna"> digunakan untuk field input yang harus berisi warna.
Tergantung pada dukungan browser, color picker dapat muncul dalam bidang masukan.

Contoh

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Cobalah Sendiri »

Input Type: kisaran

The <input type = "range"> digunakan untuk field input yang harus berisi nilai dalam kisaran.
Tergantung pada dukungan browser, field input dapat ditampilkan sebagai kontrol slider.

Contoh

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Cobalah Sendiri »
Anda dapat menggunakan atribut berikut untuk menentukan batasan: min, max, langkah, nilai.

Input Type: bulan

The <input type = "bulan"> memungkinkan pengguna untuk memilih bulan dan tahun.
Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

Contoh

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Cobalah Sendiri »

Input Type: minggu

The <input type = "Minggu"> memungkinkan pengguna untuk memilih satu minggu dan tahun.
Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

Contoh

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Cobalah Sendiri »

Input Type: waktu

The <input type = "waktu"> memungkinkan pengguna untuk memilih waktu (tidak ada zona waktu).
Tergantung pada dukungan browser, pemetik waktu dapat muncul dalam bidang masukan.

Contoh

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

Cobalah Sendiri »

Input Type: datetime

The <input type = "datetime"> memungkinkan pengguna untuk memilih tanggal dan waktu (dengan zona waktu).
Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

Contoh

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

Cobalah Sendiri »

Input Type: datetime lokal

The <input type = "datetime lokal"> memungkinkan pengguna untuk memilih tanggal dan waktu (tidak ada zona waktu).
Tergantung pada dukungan browser, tanggal pemetik dapat muncul dalam bidang masukan.

Contoh

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Cobalah Sendiri »

Input Type: email

The <input type = "email"> digunakan untuk field input yang harus berisi alamat e-mail.
Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika diajukan.
Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan email.

Contoh

<form>
  E-mail:
  <input type="email" name="email">
</form>

Cobalah Sendiri »

Input Type: cari

The <input type = "search"> digunakan untuk bidang pencarian (kolom pencarian berperilaku seperti kolom teks biasa).

Contoh

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Cobalah Sendiri »

Input Type: tel

The <input type = "tel"> digunakan untuk field input yang harus berisi nomor telepon.
Jenis tel saat ini didukung hanya di Safari 8.

Contoh

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

Cobalah Sendiri »

Input Type: url

The <input type = "url"> digunakan untuk field input yang harus berisi alamat URL.
Tergantung pada dukungan browser, bidang url dapat secara otomatis divalidasi ketika diajukan
Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan masukan url.

Contoh

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Cobalah Sendiri »
 
 
Bersambung 

Diposting oleh Blogger Senja di 10.18

0 komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.