Penerapan HTML (Part 9)

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.
Kelas HTML

Classing Block Elements

The HTML class attribute makes it possible to define equal styles for "equal" <div> elements

Contoh :

Maka outputnya :

 Classing Inline Elements
Atribut class HTML juga memungkinkan untuk menentukan gaya yang sama untuk "sama" <span> elemen

Contoh :

Maka outputnya :

Layout HTML

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran)

HTML Tata Letak Menggunakan <div> Elemen

<Div> elemen sering digunakan sebagai alat tata letak, karena dapat dengan mudah diposisikan dengan CSS.
Contoh ini menggunakan empat <div> elemen untuk membuat tata letak kolom beberapa

Contoh :

Maka outputnya :

 
Situs Tata Letak Menggunakan HTML5
HTML5 menawarkan elemen semantik baru yang mendefinisikan bagian yang berbeda dari halaman web:

HTML5 Semantic Elements

•     <Header> - Mendefinisikan header untuk dokumen atau bagian yang
•     <Nav> - Mendefinisikan sebuah wadah untuk link navigasi
•     <Section> - Mendefinisikan sebuah bagian dalam sebuah dokumen
•     <Article> - Mendefinisikan sebuah artikel mandiri independen
•     <Aside> - Mendefinisikan konten selain dari konten (seperti sidebar)
•     <Footer> - Mendefinisikan footer untuk dokumen atau bagian yang
•     <Rincian> - Mendefinisikan rincian tambahan
•     <Summary> - Mendefinisikan heading untuk <rincian> elemen

Contoh ini menggunakan <header>, <nav>, <section>, dan <footer> untuk membuat kolom layout beberapa

 Maka outputnya :

HTML Tata Letak Menggunakan Tabel

Catatan <table> elemen tidak dirancang untuk menjadi alat tata letak.
Tujuan dari <table> elemen untuk menampilkan data tabular.
Tata letak dapat dicapai dengan menggunakan <table> elemen, karena unsur-unsur tabel dapat ditata dengan CSS

Contoh :

Maka outputnya :

 Peringatan: Membuat layout dengan tabel tidak salah, tetapi tidak dianjurkan! Hindari tabel untuk menciptakan tata letak.

Desain Web HTML Responsif

Halaman web kamu harus terlihat baik, dan mudah digunakan, terlepas dari perangkat.

Apa Desain Web Responsif?
Desain Web Responsif membuat halaman web Anda terlihat baik di semua perangkat (desktop, tablet, dan telepon).
Desain Web Responsif adalah tentang menggunakan CSS dan HTML untuk mengubah ukuran, menyembunyikan, mengecilkan, memperbesar, atau memindahkan konten untuk membuatnya terlihat bagus di layar setiap

 Buat Desain Responsif Sendiri
Salah satu cara untuk membuat desain responsif, adalah untuk menciptakan sendiri

Contoh :

Maka outputnya:

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/htm