Belajar HTML&CSS: Layout

01.40

Assalamu'alaikum warrahmatullahi wabarakatuh.

Untuk postingan ini saya akan menjelaskan tentang membuat layout di html&css. Langsung saja berikut adalah tahapan yang umumnya dilakukan saat membuat layout :

Seperti biasa, buka software Sublime Text 3. Selanjutnya, buatlah struktur dasar HTML.

Berikut adalah instruksi-instruksi yang akan dilakukan :

Buatlah sebuah halaman Web menggunakan HTML yang memiliki kriteria sebagai berikut (contoh terlampir):

Memiliki Bagian Header sebagai judul website, tulisan warna ~~putih~~, background warna ~~hitam~~.
Kata yang paling akhir pada Judul Website diberi warna ~~merah~~ (gunakan span).
Memiliki Bagian Navigasi yang terdapat 5 link ke bagian internal web kita sendiri, rata tengah, background warna tertentu.
Memiliki Bagian Konten selamat datang yang memiliki judul dan 2 paragraf isi.
Memiliki Bagian Sidebar di sebelah kanan Bagian Konten yang terdapat 4 link ke web eksternal, background warna tertentu.
Memiliki Bagian Footer tulisan warna putih, background warna ~~hitam~~.
Buatlah layout Anda sendiri yang memanfaatkan materi yang sudah dipelajari pada pekan ini. (4 poin).

NOTES

Inti pada postingan mengenai HTML: Layout adalah mengatur margin dan padding serta width dan height sehingga terbentuk layout yang diinginkan. + Tidak lupa juga menggunakan elemen divide yang diberi nama dengan properti 'id' dan 'class'.

Pada instruksi ke-1, saya akan membuat bagian header yang memberi judul website :

Outputnya :

Instruksi ke-2, berilah warna berbeda pada "MotivatedSloth" menggunakan elemen span.

Outputnya :

Selanjutnya, untuk instruksi ke-3, menambahkan link navigasi yang terhubung dengan bagian di dalam web itu sendiri.

Outputnya :

Sesuai instruksi ke-4, web memiliki bagian konten yang berisi judul dan paragraf.

Outputnya :

Lalu, untuk instruksi ke-5, tambahkan bagian sidebar disebelah kanan bagian konten yang link ke alamat web eksternal :

Outputnya :

Lalu, untuk instruksi ke-6, tambahkan bagian footer yang memiliki tulisan tertentu dengan background disesuaikan dengan header.

Outputnya :

my LAYOUT

Untuk perintah terakhir, perbedaan mendasar antara layout dicontoh dan layout yang saya buat memilki navigation bar di bagian atas dan link bar di bagian bawah sebelum footer serta memilki bagian konten yang terdiri dari dua kolom :