Penerapan HTML (Part 2)
I.Latar Belakang.Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime text
III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.
IV.Penjelasan.
HTML Pos
Judul didefinisikan dengan <h1> sampai <h6> tag.
<H1> mendefinisikan heading yang paling penting. <H6> mendefinisikan heading yang paling tidak penting.
Contoh :
Maka outputnya :
Aturan Horizontal HTML
<hr> mendefinisikan istirahat tematik di halaman HTML, dan yang paling sering ditampilkan sebagai aturan horisontal.
<hr> elemen digunakan untuk memisahkan konten (atau menentukan perubahan) dalam sebuah halaman HTML
Contoh :
Maka outputnya :
HTML <head> Elemen
HTML <head> elemen tidak ada hubungannya dengan judul HTML.
<Head> elemen merupakan wadah untuk metadata. metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
<Head> elemen ditempatkan di antara <html> tag dan <body> tag
Contoh :
Maka outputnya :
Penjelasan : Meta Data adalah suatu sintag yang mendefisinikan bahwa itu
program HTML.
HTML Tip - Cara Lihat HTML Sumber
Apakah Anda pernah melihat halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukan itu?"
Untuk mengetahui, klik kanan-di halaman dan pilih "View Page Source" (di Chrome) atau "View Source" (di IE), atau serupa di browser lain. Ini akan membuka jendela yang berisi kode HTML halaman.
tag Deskripsi
<Html> Mendefinisikan root dari suatu dokumen HTML
<Body> Mendefinisikan tubuh dokumen
<Head> Sebuah wadah untuk semua elemen kepala
(judul,script, gaya,informasi meta, dan banyak lagi)
<H1> sampai<h6> Mendefinisikan judul HTML
<Hr> Mendefinisikan perubahan tematik dalam konten
HTML Paragraf
HTML <p> mendefinisikan sebuah paragraf
Tampilan HTML
Anda tidak bisa yakin bagaimana HTML akan ditampilkan.
Besar atau kecil layar, dan jendela ukurannya akan menciptakan hasil yang berbeda.
Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris ekstra dalam kode HTML Anda.
Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan.
Contoh :
Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag akhir
Gunakan <br> jika Anda ingin mengganti baris (baris baru) tanpa memulai sebuah paragraf baru
Maka outputnya :
<br> tag adalah tag kosong, yang berarti bahwa ia tidak memiliki tag akhir.
Poem Problem
Poem ini akan ditampilkan pada satu baris
Contoh :
Maka otputnya :
HTML <pre> Elemen
HTML <pre> elemen mendefinisikan teks terformat.
Teks di dalam <pre> elemen ditampilkan dalam font fixed-width (biasanya Kurir), dan mempertahankan kedua ruang dan jeda baris
Contoh :
Maka outputnya :
Ringkasan.
tag Deskripsi
<P> Mendefinisikan sebuah paragraf
<br> Sisipan satu baris tunggal
<Pre> Mendefinisikan pre diformat teks
HTML Styles.
HTML Style Atribut
Pengaturan gaya elemen HTML, dapat dilakukan dengan atribut style. Atribut style HTML memiliki sintaks berikut:
style="property:value;"
Properti adalah properti CSS. nilai adalah nilai CSS.
Catatan : kita akan belajar lebih banyak tentang CSS kemudian dalam tutorial ini.
HTML Warna Background
Properti background-color mendefinisikan warna latar belakang untuk elemen HTML.
Contoh ini menetapkan latar belakang untuk halaman untuk "lightblue".
Maka outputnya
HTML Warna Teks
Properti color mendefinisikan warna teks untuk elemen HTML
Contoh :
Maka outputnya :
HTML Font
Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML
Contoh :
Maka outputnya :
HTML ukuran teks
Properti font-size mendefinisikan ukuran teks untuk elemen HTML
Contoh :
Maka outputnya :
HTML Penyelarasan Teks
Properti text-align mendefinisikan perataan teks horisontal untuk elemen HTML
Contoh :
Maka outputnya :
Rangkuman Bab
V.Kesimpulan.
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.
VI.Refrensi.
http://www.w3schools.com/html
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime text
III.Tujuan.
untuk mengetahui langkah dasar untuk membuat web yang sederhana.
IV.Penjelasan.
HTML Pos
Judul didefinisikan dengan <h1> sampai <h6> tag.
<H1> mendefinisikan heading yang paling penting. <H6> mendefinisikan heading yang paling tidak penting.
Contoh :
Maka outputnya :
Aturan Horizontal HTML
<hr> mendefinisikan istirahat tematik di halaman HTML, dan yang paling sering ditampilkan sebagai aturan horisontal.
<hr> elemen digunakan untuk memisahkan konten (atau menentukan perubahan) dalam sebuah halaman HTML
Contoh :
Maka outputnya :
HTML <head> Elemen
HTML <head> elemen tidak ada hubungannya dengan judul HTML.
<Head> elemen merupakan wadah untuk metadata. metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
<Head> elemen ditempatkan di antara <html> tag dan <body> tag
Contoh :
Maka outputnya :
Penjelasan : Meta Data adalah suatu sintag yang mendefisinikan bahwa itu
program HTML.
HTML Tip - Cara Lihat HTML Sumber
Apakah Anda pernah melihat halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukan itu?"
Untuk mengetahui, klik kanan-di halaman dan pilih "View Page Source" (di Chrome) atau "View Source" (di IE), atau serupa di browser lain. Ini akan membuka jendela yang berisi kode HTML halaman.
tag Deskripsi
<Html> Mendefinisikan root dari suatu dokumen HTML
<Body> Mendefinisikan tubuh dokumen
<Head> Sebuah wadah untuk semua elemen kepala
(judul,script, gaya,informasi meta, dan banyak lagi)
<H1> sampai<h6> Mendefinisikan judul HTML
<Hr> Mendefinisikan perubahan tematik dalam konten
HTML Paragraf
HTML <p> mendefinisikan sebuah paragraf
Tampilan HTML
Anda tidak bisa yakin bagaimana HTML akan ditampilkan.
Besar atau kecil layar, dan jendela ukurannya akan menciptakan hasil yang berbeda.
Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris ekstra dalam kode HTML Anda.
Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan.
Contoh :
Maka Outputnya :
Jangan Lupakan Tag akhir
Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag akhir
Contoh :
Maka outputnya :
Breaks HTML Baris
HTML Situs elemen mendefinisikan satu baris.Gunakan <br> jika Anda ingin mengganti baris (baris baru) tanpa memulai sebuah paragraf baru
Contoh :
<br> tag adalah tag kosong, yang berarti bahwa ia tidak memiliki tag akhir.
Poem Problem
Poem ini akan ditampilkan pada satu baris
Contoh :
Maka otputnya :
HTML <pre> Elemen
HTML <pre> elemen mendefinisikan teks terformat.
Teks di dalam <pre> elemen ditampilkan dalam font fixed-width (biasanya Kurir), dan mempertahankan kedua ruang dan jeda baris
Contoh :
Maka outputnya :
Ringkasan.
tag Deskripsi
<P> Mendefinisikan sebuah paragraf
<br> Sisipan satu baris tunggal
<Pre> Mendefinisikan pre diformat teks
HTML Styles.
HTML Style Atribut
Pengaturan gaya elemen HTML, dapat dilakukan dengan atribut style. Atribut style HTML memiliki sintaks berikut:
style="property:value;"
Properti adalah properti CSS. nilai adalah nilai CSS.
Catatan : kita akan belajar lebih banyak tentang CSS kemudian dalam tutorial ini.
HTML Warna Background
Properti background-color mendefinisikan warna latar belakang untuk elemen HTML.
Contoh ini menetapkan latar belakang untuk halaman untuk "lightblue".
Maka outputnya
HTML Warna Teks
Properti color mendefinisikan warna teks untuk elemen HTML
Contoh :
HTML Font
Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML
Contoh :
Maka outputnya :
HTML ukuran teks
Properti font-size mendefinisikan ukuran teks untuk elemen HTML
Contoh :
Maka outputnya :
HTML Penyelarasan Teks
Properti text-align mendefinisikan perataan teks horisontal untuk elemen HTML
Contoh :
Maka outputnya :
Rangkuman Bab
- Gunakan atribut style untuk elemen styling HTML
- Gunakan background-warna untuk warna latar belakang
- Gunakan warna untuk warna teks
- Gunakan font-family untuk font teks
- Gunakan font-size untuk ukuran teks
- Gunakan text-align untuk perataan teks
V.Kesimpulan.
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.
VI.Refrensi.
http://www.w3schools.com/html
Komentar
Posting Komentar