Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML.

Atribut HTML

• Semua elemen HTML dapat memiliki atribut
• Atribut memberikan informasi tambahan tentang suatu elemen
• Atribut selalu ditentukan dalam tag awal
• Atribut biasanya datang dalam pasangan nama / nilai seperti: name = "value"

Atribut "href"

Tautan dalam HTML didefinisikan dengan tag <a>. Alamat tautan ditentukan dalam atribut href:

Contoh :

Anda akan mempelajari lebih lanjut tentang atribut "href" dan tag <a> pada tutorial selanjutnya.

Atribut src

Gambar HTML didefinisikan dengan tag <img>. Nama file sumber gambar ditentukan dalam atribut "src" :

Contoh :

Silahkan ketikan script di bawah ini, dan simpan file dengan nama "gambar.html"

buka file menggunakan web browser, maka tampilannya akan seperti gambar di bawah :

*Catatan : untuk gambar dan ukuran gambar bisa disesuaikan dengan kebutuhan masing-masing

Atribut width dan height

Gambar dalam HTML memiliki satu set atribut ukuran, yang menentukan lebar dan tinggi gambar:

Contoh :

Ukuran gambar ditentukan dalam satuan piksel (px) : width = "500" berarti lebar 500 piksel. Anda akan belajar lebih banyak tentang atribut gambar ini pada bagian Gambar HTML.

Atribut alt

Atribut alt menentukan teks alternatif yang akan digunakan, ketika gambar tidak dapat ditampilkan. Nilai atribut ini dapat dibaca oleh pembaca layar. Dengan cara ini, setiap orang akan bisa mengerti gambar apa yang hendak ditampilkan dalam web browser walaupun gambar yang dimaksud tidak dapat ditampilkan.

Contoh :

<img src="img_girl.jpg" alt="Girl with a jacket">

Catatan : Atribut alt berfungsi menampilkan keterangan gambar jika gambar tidak dapat ditampilkan.

Silahkan ketik kode program dibawah ini :

Setelah itu simpan file dengan nama alt.html, lalu buka file menggunakan browser anda sehingga muncul tampilan seperti berikut

Gambar tidak dapat ditampilkan dan fungsi atribut alt akan menampilkan keterangan dari gambar tersebut yaitu "Girl with a jacket".

Read More

Elemen HTML

Elemen HTML biasanya terdiri dari tag awal dan tag akhir, dengan konten disisipkan di antara:

<tagname> Konten diletakkan di sini ... </ tagname>

Elemen HTML adalah segalanya dari tag awal hingga tag akhir:

<p> Paragraf pertamaku. </ p>

Elemen HTML tanpa konten disebut elemen kosong. Elemen kosong tidak memiliki tag akhir, seperti elemen <br> (yang menunjukkan jeda baris).

Elemen HTML Tersarang

Elemen HTML Tersarang elemen HTML yang dapat diulang (elemen dapat mengandung elemen). Semua dokumen HTML terdiri dari elemen HTML yang disarangkan. Contoh di bawah ini berisi empat elemen HTML:

Cotnoh Elemen HTML Tersarang

Penjelesan dari contoh diatas :

• Elemen <html> mendefinisikan seluruh dokumen.
• Elemen ini memiliki tag awal <html> dan tag akhir </ html>.
• Isi elemen adalah elemen HTML lain (contoh : elemen <body>).
• Elemen <body> mendefinisikan badan dokumen.
• Elemen <body> memiliki tag awal <body> dan tag akhir </ body>.
• Isi elemen adalah dua elemen HTML lainnya (<h1> dan <p>).
• Elemen <h1> mendefinisikan sebuah heading.
• Elemen <h1> memiliki tag awal <h1> dan tag akhir </ h1>.
• Isi elemennya adalah: "Judul Pertama Saya".
• Elemen <p> mendefinisikan sebuah paragraf.
• Elemen <p> memiliki tag awal <p> dan tag akhir </ p>.
• Isi elemennya adalah: "Paragraf Pertama Saya".

Jangan Lupakan Tag Akhir

Beberapa elemen HTML akan ditampilkan dengan benar, meskipun Anda lupa tag akhir:

Contoh :

Contoh di atas berfungsi di semua browser, karena tag penutup dianggap opsional.

"Jangan bergantung pada ini. Ini mungkin bisa menampilkan sebuah hasil atau mungkin kesalahan yang tidak terduga jika Anda lupa tag akhir."

Elemen HTML Kosong 

Elemen HTML tanpa konten disebut elemen kosong. <br> adalah elemen kosong tanpa tag penutup (tag <br> berfungsi untuk membuat baris baru). Elemen kosong dapat "ditutup" di tag pembuka seperti ini: <br />. HTML5 tidak memerlukan elemen kosong untuk ditutup. Tetapi jika Anda ingin validasi yang lebih ketat, atau jika Anda perlu membuat dokumen Anda dapat dibaca oleh parser XML, Anda harus menutup semua elemen HTML dengan benar.

Gunakan Tag Huruf Kecil

Tag HTML tidak membedakan huruf besar atau kecil: <P> berarti sama dengan <p>.

Standar HTML5 tidak memerlukan tag huruf kecil, tetapi admin merekomendasikan huruf kecil dalam HTML, dan sangat menganjurkan penggunaan huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.

Read More

Contoh Dasar HTML

Jangan khawatir jika contoh ini menggunakan tag yang belum Anda pelajari.

Anda akan belajar mengenai tag-tag tersebut pada postingan berikutnya.

Dokumen HTML

Semua dokumen HTML harus diawali dengan deklarasi tipe dokumen : <!DOCTYPE html>.

Dokumen HTML selalu diawali dengan <html> dan diakhiri dengan </html>.

Bagian yang terlihat dari dokumen HTML adalah antara <body> dan </ body>.

Contoh Dokumen HTML

HTML Headings

Judul HTML didefinisikan dengan tag <h1> hingga <h6>.

<h1> mendefinisikan tajuk yang paling penting. <h6> mendefinisikan tajuk yang paling tidak penting:

Contoh HTML Headings

Paragraf HTML

Paragraf HTML didefinisikan dengan tag <p>:

Contoh Paragraf HTML

Link HTML

Link / Tautan HTML didefinisikan dengan tag <a>:

Contoh Link HTML

Tujuan link ditentukan dalam atribut href. Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML. Anda akan belajar lebih banyak tentang atribut di postingan selanjutnya.

HTML Images

HTML Images didefinisikan dengan tag <img>. File sumber (src), teks alternatif (alt), width, dan height disediakan sebagai atribut:

Cotnoh HTML Images

HTML Buttons

HTML Buttons didefinisikan dengan tag <button>:

Contoh HTML Buttons

HTML List

HTML List didefinisikan dengan daftar <ul> (tidak beraturan / daftar peluru) atau <ol> (daftar berurutan / bernomor), diikuti oleh tag <li> (item daftar):

Contoh HTML List

Read More

HTML Editors

Menulis HTML Menggunakan Notepad atau TextEdit

Halaman web dapat dibuat dan dimodifikasi dengan menggunakan editor HTML profesional. Namun, untuk belajar HTML kami merekomendasikan editor teks sederhana seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk mempelajari HTML. Ikuti empat langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit.

Langkah 1: Buka Notepad (PC)

Windows 8 atau lebih baru:

• Buka Layar START (simbol jendela di kiri bawah pada layar Anda). Ketik Notepad.

Windows 7 atau yang lebih lama:

• Buka START >  Program >  Aksesori > Notepad

Langkah 1: Buka TextEdit (Mac)

• Buka Finder> Aplikasi> TextEdit
• Juga ubah beberapa preferensi untuk mendapatkan aplikasi untuk menyimpan file dengan benar. Di Preferences> Format> pilih "Plain Text"
• Kemudian di bawah "Buka dan Simpan", centang kotak yang mengatakan "Display HTML files as HTML code instead of formatted text".

Kemudian buka dokumen baru untuk menempatkan kode.

Langkah 2: Tulis Beberapa HTML

Tulis beberapa HTML dibawah ini ke Notepad.

<!DOCTYPE>

<html>

<body>

<h1>Judul Pertama Saya</h1>

<p>Paragraf Pertama Saya</h1>

</body>

</html>

Langkah 3: Simpan Halaman HTML

Simpan file di komputer Anda. Pilih File> Save as dalam menu Notepad.

Nama file "index.html" dan atur encoding ke UTF-8 (yang merupakan pengkodean yang lebih disukai untuk file HTML).

Anda dapat menggunakan .htm atau .html sebagai ekstensi file. Tidak ada perbedaan, terserah Anda.

Langkah 4: Lihat Halaman HTML di Browser Anda

Buka file HTML yang disimpan menggunakan browser favorit Anda (klik dua kali pada file, atau klik kanan - dan pilih "Open with").

Hasilnya akan terlihat seperti ini:

Catatan : mohon tidak hanya copy - paste code program jadilah programer yang bijak dengan menuliskan sendiri code program, dengan begitu anda akan membiasakan diri anda dalam berinteraksi dengan kode - kode program.

Sumber : www.w3school.com.com

Read More

Pengenalan HTML

Apa itu HTML?

• HTML adalah bahasa markup standar untuk membuat halaman web.
• HTML adalah singkatan dari Hyper Text Markup Language
• HTML menggambarkan struktur halaman web menggunakan markup
• Elemen HTML adalah blok pembangun halaman HTML
• Elemen HTML diwakili oleh tag
• Tag HTML melabeli potongan konten seperti "pos", "paragraf", "tabel", dan seterusnya

·         Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk merender konten halaman

Contoh dokumen HTML sederhana :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

Contoh di atas menjelaskan

• Deklarasi <! DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
• Elemen <html> adalah elemen root dari sebuah halaman HTML
• Elemen <head> berisi informasi meta tentang dokumen
• Elemen <title> menentukan judul untuk dokumen
• Elemen <body> berisi konten halaman yang terlihat
• Elemen <h1> mendefinisikan heading besar
• Elemen <p> mendefinisikan sebuah paragraph

Tag HTML

• Tag HTML adalah nama elemen yang dikelilingi tanda kurung siku:
• Tag HTML biasanya 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 garis miring yang disisipkan sebelum nama tag

Web Browser

Tujuan dari web browser (Chrome, IE, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkannya pada browser. Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menentukan cara menampilkan dokumen, perhatikan gambar dibawah ini :

Struktur Halaman HTML

Di bawah ini adalah visualisasi struktur halaman HTML:

Deklarasi <! DOCTYPE>

Deklarasi <! DOCTYPE> mewakili jenis dokumen, dan membantu browser untuk menampilkan halaman web dengan benar. Hanya harus muncul sekali, di bagian atas halaman (sebelum tag HTML apa pun). Deklarasi <! DOCTYPE> tidak case sensitive artinya dapat ditulis dengan huruf besar maupun kecil. Deklarasi <! DOCTYPE> untuk HTML5 adalah:

Versi HTML

Sejak masa awal web, ada banyak versi HTML:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

Sumber : www.w3school.com

Read More