Rabu, 28 November 2018

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.


MUSLIM PROMO

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





MUSLIM PROMO

Minggu, 25 November 2018

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>



MUSLIM PROMO
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

MUSLIM PROMO